/* james.com - the home page partial (css/ss-pages/home.css), loaded by INFO["ss_css"]="home".
   Extends the core components with ss-home-* classes only. Served byte for byte (css/ss-pages/main.mdk).
   No dancer imagery: the scene is the moon, stars, ridge, theatre, lamp-lit road, fog and light leak. */

/* moved from the core (css/ss-pages/safety-site.css) by RD/tools/css_split.py, review 2026-10-05:
   the rules below are used only by the pages that load this partial; they keep their core order */
.ss-hero { position: relative; height: 100vh; height: 100svh; background: var(--ss-navy); }
.ss-hero.is-pinned { height: 138vh; height: 138svh; }
.ss-hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.ss-scene { position: absolute; inset: 0; perspective: 1400px; perspective-origin: 50% 40%; }
.ss-rig { position: absolute; inset: -2.5%; transform-origin: 50% 60%; will-change: transform; }
.ss-plane { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; }
.ss-plane-sky { transform-origin: 50% 40%; }
.ss-sky, .ss-sky picture, .ss-sky img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-sky img { object-fit: cover; object-position: 50% 50%; }
@media (min-aspect-ratio: 2/1) {
  .ss-sky img { object-position: 50% 35%; }
}
@media (max-aspect-ratio: 4/5) {
  .ss-sky img { object-position: 50% 25%; }
}
@media (max-aspect-ratio: 3/5) {
  .ss-sky img { object-position: 50% 50%; }
}
.ss-hero .ss-moonglow {
  background: radial-gradient(closest-side, rgba(255, 236, 196, 0.5) 0%, rgba(242, 201, 135, 0.22) 32%, rgba(242, 201, 135, 0.08) 58%, rgba(242, 201, 135, 0) 100%);
  animation-duration: 7s;
}
@media (pointer: fine) {
  .ss-hero .ss-moonglow { mix-blend-mode: screen; }
}
.ss-hero .ss-stars { height: 100%; }
@media (pointer: fine) {
  .ss-hero .ss-stars { mix-blend-mode: screen; }
}
.ss-stage {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(100%, 177.78vh);
  width: max(100%, 177.78svh);
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
  --tile-w: 160%;
  --tile-s: 37.5%;
  --fog-ar: 2.849;
  --fog-op: 0.35;
}
.ss-lyr {
  position: absolute;
  left: var(--l);
  bottom: var(--b);
  width: var(--w);
  height: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ss-lyr-ridge { --w: 105%; --l: -2.5%; --b: 10%; }
.ss-lyr-theatre { --w: 20%; --l: 42%; --b: 20.5%; }
.ss-lyr-road { --w: 112%; --l: -6%; --b: -4%; }
.ss-fog {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: var(--fog-ar);
  overflow: hidden;
  opacity: var(--fog-op);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
}
.ss-fog-strip {
  position: absolute;
  top: 0; left: 0;
  width: var(--tile-w);
  height: 100%;
  background-repeat: repeat-x;
  background-size: var(--tile-s) 100%;
  animation: ss-fogdrift 75s linear infinite;
}
.ss-fog-strip.is-loaded { background-image: url("/img/safety-site/hero-fog-tile-1536.webp?v=1"); }
@media (max-width: 1100px) {
  .ss-fog-strip.is-loaded { background-image: url("/img/safety-site/hero-fog-tile-1024.webp?v=1"); }
}
@media (max-width: 600px) {
  .ss-fog-strip.is-loaded { background-image: url("/img/safety-site/hero-fog-tile-768.webp?v=1"); }
}
@media (min-aspect-ratio: 2/1) {
  .ss-stage { width: max(100%, 233.4vh); width: max(100%, 233.4svh); aspect-ratio: 2560 / 1097; }
  .ss-lyr-ridge { --b: 7%; }
  .ss-lyr-theatre { --w: 17%; --l: 43.5%; --b: 28.5%; }
}
@media (max-aspect-ratio: 3/2) {
  .ss-stage { width: max(100%, 133.34vh); width: max(100%, 133.34svh); aspect-ratio: 4 / 3; --tile-w: 180%; --tile-s: 44.444%; --fog-ar: 2.136; }
  .ss-lyr-ridge { --w: 130%; --l: -15%; --b: 8.5%; }
  .ss-lyr-theatre { --w: 26%; --l: 39%; --b: 18.5%; }
  .ss-lyr-road { --w: 135%; --l: -17.5%; --b: -3%; }
}
@media (max-aspect-ratio: 4/5) {
  .ss-stage { width: max(100%, 75vh); width: max(100%, 75svh); aspect-ratio: 3 / 4; --tile-w: 200%; --tile-s: 50%; --fog-ar: 1.709; --fog-op: 0.3; }
  .ss-lyr-ridge { --w: 190%; --l: -45%; --b: 7%; }
  .ss-lyr-theatre { --w: 45%; --l: 27.5%; --b: 13.5%; }
  .ss-lyr-road { --w: 180%; --l: -40%; --b: -3%; }
}
@media (max-aspect-ratio: 3/5) {
  .ss-stage { width: max(100%, 46.16vh); width: max(100%, 46.16svh); aspect-ratio: 1080 / 2340; --tile-w: 220%; --tile-s: 54.545%; --fog-ar: 1.424; }
  .ss-lyr-ridge { --w: 240%; --l: -70%; --b: 3%; }
  .ss-lyr-theatre { --w: 62%; --l: 19%; --b: 10%; }
  .ss-lyr-road { --w: 220%; --l: -60%; --b: -2%; }
}
.ss-hero.is-touch .ss-plane > .ss-stage { animation: ss-hdrift 22s ease-in-out infinite alternate; }
.ss-hero.is-touch .ss-plane[data-depth="0.05"] { --hd: 3px; }
.ss-hero.is-touch .ss-plane[data-depth="0.09"] { --hd: 5px; }
.ss-hero.is-touch .ss-plane[data-depth="0.14"] { --hd: 8px; }
.ss-hero.is-touch .ss-plane[data-depth="0.18"] { --hd: 11px; }
.ss-hero.is-touch .ss-plane-sky > .ss-sky { animation: ss-hdrift-sky 27s ease-in-out infinite alternate; }
.ss-hero.is-touch canvas.ss-stars { animation: ss-twinkle-h 4.6s ease-in-out infinite alternate; }
.ss-hero.is-static .ss-plane > .ss-stage, .ss-hero.is-static .ss-plane-sky > .ss-sky, .ss-hero.is-static canvas.ss-stars { animation: none; }
.ss-halo-box { position: absolute; left: var(--l); bottom: var(--b); width: var(--w); pointer-events: none; }
.ss-halo-box::before { content: ""; display: block; padding-top: 33.36%; }
.ss-halo-box.is-theatre::before { padding-top: 75%; }
.ss-halo {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 9%);
  aspect-ratio: 1;
  margin-left: calc(var(--s, 9%) / -2);
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 150, 0.55), rgba(224, 164, 88, 0.18) 45%, rgba(224, 164, 88, 0) 100%);
  animation: ss-flicker 5.2s ease-in-out infinite;
}
@media (pointer: fine) {
  .ss-halo { mix-blend-mode: screen; }
}
.ss-halo:nth-child(2) { animation-duration: 6.4s; animation-delay: -2s; }
.ss-halo:nth-child(3) { animation-duration: 4.6s; animation-delay: -1s; }
.ss-halo:nth-child(4) { animation-duration: 7.1s; animation-delay: -3s; }
.ss-halo-marquee {
  --s: 62%;
  background: radial-gradient(closest-side, rgba(255, 210, 140, 0.46), rgba(224, 164, 88, 0.14) 55%, rgba(224, 164, 88, 0) 100%);
  animation: ss-marquee 3.2s ease-in-out infinite;
}
.ss-leak {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.4s ease;
}
.ss-leak.is-loaded { background-image: url("/img/safety-site/hero-glow-1600.webp?v=1"); opacity: 0.32; }
@media (pointer: fine) {
  .ss-leak.is-loaded { mix-blend-mode: screen; opacity: 0.45; animation: ss-leak 11s ease-in-out 2.4s infinite alternate; }
}
@media (max-width: 800px) {
  .ss-leak.is-loaded { background-image: url("/img/safety-site/hero-glow-768.webp?v=1"); }
}
.ss-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(6, 11, 23, 0) 55%, rgba(6, 11, 23, 0.55) 85%, rgba(6, 11, 23, 0.85) 100%),
    linear-gradient(180deg, rgba(6, 11, 23, 0.45) 0%, rgba(6, 11, 23, 0) 18%, rgba(6, 11, 23, 0) 62%, rgba(6, 11, 23, 0.7) 90%, var(--ss-navy-0) 100%);
}
.ss-scrim {
  position: absolute;
  pointer-events: none;
  left: -10%;
  bottom: -10%;
  width: 80%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(6, 11, 23, 0.72), rgba(6, 11, 23, 0.4) 55%, rgba(6, 11, 23, 0) 100%);
}
.ss-cursor-glow {
  position: absolute;
  left: 0; top: 0;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 201, 135, 0.16), rgba(184, 106, 158, 0.06) 50%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
  will-change: transform;
}
.ss-cursor-glow.is-on { opacity: 1; }
.ss-hero-copy {
  position: absolute;
  z-index: 5;
  left: var(--ss-gutter);
  right: var(--ss-gutter);
  bottom: clamp(56px, 13vh, 150px);
  max-width: 760px;
  will-change: transform, opacity;
}
@media (min-width: 1100px) {
  .ss-hero-copy { left: max(var(--ss-gutter), calc((100vw - var(--ss-maxw)) / 2)); }
}
.ss-eyebrow {
  margin: 0 0 14px;
  color: var(--ss-amber-hi);
  font-size: clamp(10.5px, 1.05vw, 13px);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}
.ss-title {
  margin: 0;
  font-family: var(--ss-serif);
  font-weight: 500;
  line-height: 0.86;
  color: var(--ss-cream);
  text-shadow: 0 0 34px rgba(242, 201, 135, 0.28), 0 2px 40px rgba(0, 0, 0, 0.65);
}
.ss-title .ss-t1 {
  display: block;
  font-family: var(--ss-display); /* fonts-1006: Brygada sized to the old title's width (safety-site.css) */
  font-size: clamp(64px, 10vw, 156px);
  letter-spacing: -0.015em;
  /* fix-1005: background-clip:text paints the gradient only inside this box, and line-height 0.86 ended the
     box above the hook of the J (and 0.05em right of its left overhang), so the J read as an I. The padding
     gives the glyphs room; the negative margins cancel it, so nothing moves. The gradient keeps its old
     stops over the old box (100% - 0.2em) and holds its last colour below it. background-image, not the
     shorthand: the shorthand would reset background-clip to border-box. */
  padding: 0 0 0.2em 0.1em;
  margin: 0 0 -0.2em -0.1em;
  background-image: linear-gradient(180deg, #fff8e8 0, var(--ss-cream) calc((100% - 0.2em) * 0.46), #e6c88f calc(100% - 0.2em));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(242, 201, 135, 0.3)) drop-shadow(0 3px 18px rgba(0, 0, 0, 0.55));
}
.ss-title .ss-t2 {
  display: inline-block;
  margin-top: 12px; /* fix-1005: 8 -> 12 px, so the restored hook of the J clears the subtitle (1-3.6 px gap at 8) */
  font-size: clamp(28px, 4.2vw, 60px);
  font-style: italic;
  font-weight: 400; /* fonts-1006: Brygada's italic is darker than Cormorant's at 500 */
  line-height: 1;
  color: var(--ss-amber-hi);
  letter-spacing: 0.01em;
}
.ss-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.ss-hero-copy:focus-within { opacity: 1 !important; transform: none !important; }
.ss-scroll-cue {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 18px;
  width: 1px;
  height: 46px;
  overflow: hidden;
  transform: translateX(-50%);
  background: rgba(243, 233, 210, 0.15);
}
.ss-scroll-cue::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px;
  height: 18px;
  background: var(--ss-amber-hi);
  animation: ss-cue 2.2s var(--ss-ease-out) infinite;
}
@media (max-aspect-ratio: 4/5) {
  .ss-scrim { left: -40%; width: 180%; height: 46%; bottom: 26%; background: radial-gradient(closest-side, rgba(6, 11, 23, 0.6), rgba(6, 11, 23, 0.3) 60%, rgba(6, 11, 23, 0) 100%); }
  .ss-vignette {
    background:
      radial-gradient(130% 80% at 50% 40%, rgba(6, 11, 23, 0) 60%, rgba(6, 11, 23, 0.45) 100%),
      linear-gradient(180deg, rgba(6, 11, 23, 0.45) 0%, rgba(6, 11, 23, 0) 14%, rgba(6, 11, 23, 0) 84%, rgba(6, 11, 23, 0.75) 97%, var(--ss-navy-0) 100%);
  }
  .ss-hero-copy { top: 39vh; top: 39svh; bottom: auto; }
  .ss-title .ss-t1 { font-size: clamp(60px, 18vw, 96px); }
  .ss-title .ss-t2 { font-size: clamp(24px, 6.6vw, 36px); }
  .ss-hero-actions { margin-top: 18px; gap: 10px; }
  .ss-hero-actions .ss-btn { flex: 1 1 0; min-width: 0; padding: 12px 14px; }
}
@media (max-width: 420px) {
  .ss-hero-actions { flex-direction: column; }
  .ss-hero-actions .ss-btn { flex: none; width: 100%; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 700px) {
  .ss-hero-copy { top: 33vh; top: 33svh; }
  .ss-title .ss-t1 { font-size: clamp(52px, 15vw, 80px); }
}
.ss-seam {
  position: relative;
  z-index: 3;
  height: 140px;
  margin-top: -140px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 11, 23, 0) 0%, var(--ss-navy-0) 92%);
}
.ss-after-hero { position: relative; z-index: 2; background: var(--ss-navy-0); }
.ss-btn-pulse::before, .ss-btn-pulse::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid rgba(242, 201, 135, 0.75);
  animation: ss-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
.ss-btn-pulse::after { border-color: rgba(242, 201, 135, 0.5); animation-delay: 1.2s; }
.ss-stream-round a { width: 44px; height: 44px; padding: 0; justify-content: center; }
.ss-stream-round a .ss-ico { width: 18px; height: 18px; }
.ss-shows { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ss-show {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 176px;
  align-items: center;
  gap: 18px 22px;
  padding: 16px 20px 16px 16px;
  border-radius: var(--ss-radius);
  background: linear-gradient(100deg, rgba(26, 42, 74, 0.55), rgba(16, 27, 51, 0.55) 45%, rgba(11, 20, 38, 0.6));
  border: 1px solid var(--ss-line-2);
  transition: border-color 0.35s, box-shadow 0.45s, transform 0.45s var(--ss-ease-out);
}
.ss-show::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 120% at 0% 50%, rgba(242, 201, 135, 0.08), rgba(242, 201, 135, 0) 70%);
  opacity: 0;
  transition: opacity 0.4s;
}
.ss-show:hover { border-color: rgba(242, 201, 135, 0.3); box-shadow: 0 20px 60px -34px rgba(224, 164, 88, 0.5); transform: translateY(-2px); }
.ss-show:hover::before { opacity: 1; }
.ss-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding-right: 18px;
  border-right: 1px solid var(--ss-line);
  text-align: center;
  line-height: 1.1;
}
.ss-date .ss-wd { color: var(--ss-amber); font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.ss-date .ss-md { margin-top: 4px; font-family: var(--ss-serif); font-size: 27px; font-weight: 600; color: var(--ss-cream); white-space: nowrap; font-variant-numeric: lining-nums; }
.ss-date .ss-yr { margin-top: 3px; color: var(--ss-muted-2); font-size: 11px; letter-spacing: 0.16em; }
.ss-date.is-tba .ss-md { font-size: 17px; font-style: italic; line-height: 1.1; white-space: normal; color: var(--ss-amber-hi); }
.ss-where { min-width: 0; }
.ss-city { margin: 0; font-family: var(--ss-serif); font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; line-height: 1.1; color: var(--ss-cream); }
.ss-venue { margin: 3px 0 0; color: var(--ss-ink); font-size: 14.5px; font-weight: 500; }
.ss-show-meta { margin: 3px 0 0; color: var(--ss-muted-2); font-size: 12.5px; letter-spacing: 0.02em; }
.ss-act { display: flex; justify-content: flex-end; }
.ss-act .ss-btn { width: 100%; }
.ss-show.is-soon { background: rgba(11, 20, 38, 0.5); }
.ss-show.is-cancelled .ss-city { text-decoration: line-through; color: rgba(243, 233, 210, 0.6); }
.ss-state { color: var(--ss-muted); font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; }
@media (max-width: 860px) {
  .ss-show { grid-template-columns: 74px minmax(0, 1fr); grid-template-areas: "date where" "act act"; gap: 14px 16px; padding: 16px; }
  .ss-date { grid-area: date; padding-right: 14px; min-height: 64px; }
  .ss-date .ss-md { font-size: 23px; }
  .ss-where { grid-area: where; }
  .ss-act { grid-area: act; }
}
@media (max-width: 400px) {
  /* fonts-1006: Brygada is wider than Cormorant; at 22px "Philadelphia, PA" (160px) left "PA" alone on a 360px phone */
  .ss-show .ss-city { font-size: 20px; }
}
.ss-band {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 11vw, 150px) 0;
  isolation: isolate;
  background: radial-gradient(70% 60% at 50% 0%, rgba(26, 42, 74, 0.9), rgba(6, 11, 23, 0) 70%), var(--ss-navy-0);
}
.ss-band-moon {
  position: absolute;
  z-index: -2;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 4%;
  width: min(70vw, 620px);
  aspect-ratio: 1;
  /* centred by margin: the ss-breathe animation owns transform */
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(255, 246, 225, 0.5), rgba(243, 233, 210, 0.26) 40%, rgba(200, 161, 101, 0.1) 64%, rgba(200, 161, 101, 0) 72%);
  filter: blur(2px);
  animation: ss-breathe 9s ease-in-out infinite;
}
.ss-band-road {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -14%;
  width: max(110%, 900px);
  max-width: none;
  transform: translateX(-50%);
  opacity: 0.55;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
}
.ss-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 11, 23, 0.2) 0%, rgba(6, 11, 23, 0.55) 60%, rgba(6, 11, 23, 0.9) 100%);
}
.ss-band .ss-glass { max-width: 820px; margin: 0 auto; text-align: center; }
.ss-band .ss-h2 { font-size: clamp(32px, 4.4vw, 56px); }
.ss-band .ss-shows { margin: 22px 0 26px; text-align: left; }
.ss-band .ss-btn-row { justify-content: center; }
.ss-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) {
  .ss-form-row { grid-template-columns: minmax(0, 1fr); }
}
.ss-dlg-video { width: min(1100px, calc(100vw - 24px)); background: #000; border-radius: 18px; }
.ss-dlg-video .ss-video-box { position: relative; aspect-ratio: 16 / 9; background: #000; }
.ss-dlg-video video, .ss-dlg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .ss-hero.is-pinned { height: 100vh; height: 100svh; }
  .ss-btn-pulse::before, .ss-btn-pulse::after, .ss-cursor-glow { display: none; }
}
@keyframes ss-fogdrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--tile-s) * -1), 0, 0); } }
@keyframes ss-hdrift {
  from { transform: translateX(-50%) translate3d(calc(var(--hd, 4px) * -1), calc(var(--hd, 4px) * 0.35), 0); }
  to { transform: translateX(-50%) translate3d(var(--hd, 4px), calc(var(--hd, 4px) * -0.35), 0); }
}
@keyframes ss-hdrift-sky { from { transform: translate3d(-2px, 1px, 0); } to { transform: translate3d(2px, -1px, 0); } }
@keyframes ss-twinkle-h { from { opacity: 0.7; } to { opacity: 1; } }
@keyframes ss-flicker { 0%, 100% { opacity: 0.85; } 8% { opacity: 0.6; } 11% { opacity: 0.95; } 48% { opacity: 0.75; } 52% { opacity: 1; } 70% { opacity: 0.7; } }
@keyframes ss-marquee { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes ss-leak { 0% { opacity: 0.45; } 40% { opacity: 0.3; } 70% { opacity: 0.56; } 100% { opacity: 0.38; } }
@keyframes ss-cue { from { transform: translate3d(0, -20px, 0); } to { transform: translate3d(0, 48px, 0); } }
@keyframes ss-pulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.14, 1.5); opacity: 0; } }
/* end of the rules moved from the core */

/* hero halos (positions that the Safety hero sets inline) */
.ss-home-h1 { --x: 50%; --y: 64%; }
.ss-home-h2 { --x: 50%; --y: 28%; --s: 16%; }
.ss-home-l1 { --x: 9%; --y: 15.6%; --s: 7%; }
.ss-home-l2 { --x: 29.5%; --y: 35%; --s: 4.5%; }
.ss-home-l3 { --x: 70.5%; --y: 35%; --s: 4.5%; }
.ss-home-l4 { --x: 91%; --y: 15.6%; --s: 7%; }

/* desktop hero: the headline stops before the theatre, so the warm marquee (the scene's focal point, no
   dancer layer) stays clear; the theatre's position is untouched (the lamp halos are composed around it) */
@media (min-width: 1100px) and (min-aspect-ratio: 1/1) {
  /* the marquee halo starts at about 44.9vw at these aspect ratios; the copy ends 24 px before it */
  .ss-hero-copy { max-width: min(540px, calc(44.5vw - max(var(--ss-gutter), (100vw - var(--ss-maxw)) / 2) - 24px)); }
  .ss-title .ss-t1 { font-size: clamp(64px, 7.6vw, 96px); } /* "James Tonic" on one line inside the copy width */
  .ss-title .ss-t2 { font-size: clamp(24px, 2.4vw, 38px); text-wrap: balance; }
}

/* scroll-depth layers (js/ss-pages/home.js moves them; transform only) */
.ss-home-par { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.ss-home-par-moon { z-index: -2; }
.ss-home-par-road { z-index: -1; }
.ss-home-cover, .ss-home-frame-wrap { will-change: transform; }

/* latest release */
.ss-home-latest { overflow: hidden; overflow: clip; }
.ss-home-latest-glow {
  position: absolute;
  z-index: 0;
  left: -10%;
  top: 0;
  width: 70%;
  height: 100%;
  background: radial-gradient(closest-side, var(--ss-release-glow), rgba(0, 0, 0, 0) 100%);
  opacity: 0.8;
  pointer-events: none;
}
.ss-home-latest .ss-wrap { position: relative; z-index: 1; }
.ss-home-cover { max-width: 440px; width: 100%; }
.ss-home-date { margin: 0 0 14px; }
.ss-home-lede { margin: 0 0 22px; font-size: clamp(19px, 1.8vw, 23px); color: var(--ss-muted); }
.ss-home-latest .ss-stream { margin: 0 0 24px; }
.ss-home-actions { margin-top: 4px; }
@media (max-width: 899px) {
  .ss-home-cover { margin: 0 auto; max-width: 360px; }
}

/* featured video (the muted loop) */
.ss-home-video .ss-section-head { margin-bottom: 24px; }
/* the night loop (img/safety-site/home-loop-night-960.*) is already a 16:9 crop of the Safety film's
   night alley (no daylight, no bars): it simply covers the frame */
.ss-home-frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.ss-home-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(6, 11, 23, 0) 55%, rgba(6, 11, 23, 0.55) 100%);
}
.ss-home-vtoggle {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  background: rgba(6, 11, 23, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ss-home-vtoggle .ss-ico-play, .ss-home-vtoggle[aria-pressed="true"] .ss-ico-pause { display: none; }
.ss-home-vtoggle[aria-pressed="true"] .ss-ico-play { display: inline-block; } /* the sprite's play is already optically centred (fix-1005) */
.ss-home-vrow {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  /* a separate item, not the frame's caption: a clear gap and a hairline above it */
  margin-top: clamp(44px, 6vw, 72px);
  padding: 18px 20px 18px 22px;
  border-radius: var(--ss-radius);
  border: 1px solid var(--ss-line-2);
  border-left: 2px solid var(--ss-amber);
  background: linear-gradient(135deg, var(--ss-card-hi), var(--ss-card));
}
.ss-home-vrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(clamp(44px, 6vw, 72px) / -2);
  height: 1px;
  background: linear-gradient(90deg, rgba(242, 201, 135, 0), rgba(242, 201, 135, 0.28) 20%, rgba(242, 201, 135, 0.28) 80%, rgba(242, 201, 135, 0));
}
.ss-home-vrow .ss-label { margin: 0 0 4px; }
.ss-home-vtoggle[aria-pressed="true"] { width: 56px; height: 56px; background: rgba(6, 11, 23, 0.7); border-color: rgba(242, 201, 135, 0.6); color: var(--ss-amber-hi); }
.ss-home-vtitle { margin: 0; font-family: var(--ss-serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.1; color: var(--ss-cream); }
.ss-home-vrow .ss-btn .ss-ico { margin-right: 8px; }
@media (max-width: 620px) {
  .ss-home-vrow .ss-btn { width: 100%; }
}

/* tour band */
.ss-home-band .ss-shows { margin-bottom: 26px; }
.ss-home-empty { margin: 22px 0 26px; color: var(--ss-muted); font-size: 16px; }

/* discography strip */
.ss-home-records { padding-top: clamp(64px, 8vw, 110px); }
.ss-home-strip-ctl { display: flex; align-items: center; gap: 10px; }
.ss-home-strip-ctl .ss-btn-icon { width: 44px; height: 44px; color: var(--ss-amber-hi); border-color: rgba(242, 201, 135, 0.5); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.ss-home-strip-ctl .ss-btn-icon[disabled] { opacity: 0.35; cursor: default; }
/* owner 2026-10-06: the hover fill made the amber arrow invisible and stuck after a tap. Touch: no hover look
   at all; mouse: cream fill with a navy arrow; pressing: the same fill, released at once. */
.ss-home-strip-ctl .ss-btn-icon:hover { background: rgba(26, 42, 74, 0.5); color: var(--ss-amber-hi); border-color: rgba(242, 201, 135, 0.5); }
@media (hover: hover) and (pointer: fine) {
  .ss-home-strip-ctl .ss-btn-icon:not([disabled]):hover { background: var(--ss-cream); color: var(--ss-navy); border-color: var(--ss-cream); }
}
.ss-home-strip-ctl .ss-btn-icon:not([disabled]):active { background: var(--ss-cream); color: var(--ss-navy); border-color: var(--ss-cream); }
.ss-home-strip-ctl .ss-btn-icon:focus { outline: none; }
.ss-home-strip-ctl .ss-btn-icon:focus-visible { outline: 2px solid var(--ss-amber-hi); outline-offset: 3px; }
.ss-home-strip {
  margin: 0;
  padding: 4px 2px 14px;
  list-style: none;
  grid-auto-columns: minmax(150px, 200px);
  scroll-padding-left: 2px;
  scrollbar-width: none;
}
.ss-home-strip::-webkit-scrollbar { display: none; }
.ss-home-strip .ss-release { padding-top: 4px; }
@media (min-width: 1100px) { .ss-home-strip { grid-auto-columns: minmax(180px, 1fr); } }
@media (max-width: 620px) {
  .ss-home-strip { grid-auto-columns: 46%; gap: 14px; }
}

/* sign-up band (guests): the glass card over the lamp-lit haze */
.ss-home-signup {
  overflow: hidden;
  padding: clamp(90px, 12vw, 170px) 0 clamp(90px, 11vw, 150px);
  background: radial-gradient(80% 70% at 50% 100%, rgba(26, 42, 74, 0.75), rgba(6, 11, 23, 0) 70%), var(--ss-navy-0);
}
.ss-home-par-lamps { z-index: -2; }
.ss-home-signup-road {
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: max(110%, 900px);
  max-width: none;
  transform: translateX(-50%);
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 50%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 50%);
}
.ss-home-signup .ss-form-moon { top: 10px; }
.ss-home-signup-card .ss-h2 { font-size: clamp(32px, 4.2vw, 48px); }
.ss-home-signup-card .ss-body-2 { margin: 0 0 10px; }
.ss-home-signup-card .ss-body-2 a { color: var(--ss-amber-hi); }
.ss-home-signup-card .ss-form { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .ss-home-par, .ss-home-cover, .ss-home-frame-wrap { transform: none !important; will-change: auto; }
}