/* The pinned film: section height, the stage's film layers (ray blur, door
   spill, alarm edge, grain), the chapter layout (headline top left, body and
   doors bottom left, HUD bottom right), the category interstitial, and the
   stacked still layout used for reduced motion, the still tier and no JS
   (html:not(.film-live)), where the chapters sit on glass over the stage. */
html.film-live .sh-film { height: 1100vh; height: calc(1000svh + 100svh); }
.sh-film__rays, .sh-film__spill, .sh-film__alarm, .sh-film__grain { position: absolute; inset: 0; pointer-events: none; }
.sh-film__rays { overflow: hidden; }
.sh-film__rays span {
  position: absolute; inset: -30%; opacity: 0; transform-origin: 50% 54%;
  background: repeating-conic-gradient(from 0deg at 50% 54%, rgb(255 236 200 / 0) 0deg 2.2deg, rgb(255 236 200 / 55%) 2.6deg, rgb(255 236 200 / 0) 3.1deg 5.4deg);
  -webkit-mask-image: radial-gradient(circle at 50% 54%, transparent 12%, #000 46%); mask-image: radial-gradient(circle at 50% 54%, transparent 12%, #000 46%);
}
.sh-film__rays span:nth-child(2) { background: repeating-conic-gradient(from 1.7deg at 50% 54%, rgb(190 214 255 / 0) 0deg 3deg, rgb(190 214 255 / 48%) 3.4deg, rgb(190 214 255 / 0) 3.9deg 7.1deg); }
.sh-film__rays span:nth-child(3) { background: repeating-conic-gradient(from .6deg at 50% 54%, rgb(255 255 255 / 0) 0deg 1.4deg, rgb(255 255 255 / 60%) 1.6deg, rgb(255 255 255 / 0) 1.9deg 4.3deg); }
.sh-film__rays span:nth-child(4) { background: radial-gradient(circle at 50% 54%, transparent 20%, rgb(255 214 150 / 40%) 60%, transparent 80%); }
html[data-tier="lite"] .sh-film__rays span:nth-child(n + 3) { display: none; }
.sh-film__spill { opacity: 0; background: radial-gradient(ellipse 28% 34% at 54% 60%, rgb(255 206 140 / 34%), rgb(255 170 90 / 10%) 55%, transparent 75%); mix-blend-mode: screen; }
.sh-film__alarm { opacity: 0; box-shadow: inset 0 0 18vmin 4vmin rgb(226 59 77 / 30%); background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgb(226 59 77 / 12%)); }
.sh-film__grain {
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html:not([data-tier="full"]) .sh-film__grain { display: none; }
.is-off { visibility: hidden; }

/* Film chrome. */
.sh-film__skip {
  position: absolute; left: var(--sh-gutter); top: 64px; z-index: 7; display: inline-flex; align-items: center; min-height: 32px;
  color: var(--sh-fg); opacity: .4; font: 500 11px/1 var(--sh-font-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.sh-film__skip:hover, .sh-film__skip:focus-visible { opacity: 1; }
.sh-film__schematic {
  position: absolute; right: var(--sh-gutter); top: calc(var(--sh-nav-h) + 124px); z-index: 8; margin: 0; padding: 5px 8px; border: 1px solid var(--sh-line-2);
  border-radius: 6px; background: rgb(7 8 10 / 60%); color: var(--sh-fg); font: 500 11px/1 var(--sh-font-mono); letter-spacing: .16em;
  text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
.sh-film__cue {
  position: absolute; left: 50%; bottom: 20px; z-index: 6; display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px;
  border: 1px solid var(--sh-glass-line); border-radius: 999px; background: rgb(22 25 30 / 55%); color: var(--sh-fg-2);
  font: 500 12px/1 var(--sh-font-sans); transform: translateX(-50%); pointer-events: none;
}

/* Chapters. */
.sh-film__copy { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.sh-ch { color: var(--sh-fg); }
html.film-live .sh-ch {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto;
  column-gap: 40px; padding: 108px var(--sh-gutter) 52px; opacity: 0; visibility: hidden; will-change: opacity, transform;
}
html.film-live .sh-ch:first-child, html.film-live .sh-ch.is-active { opacity: 1; visibility: visible; }
html.film-live .sh-ch.is-off { visibility: hidden; }
.sh-ch a, .sh-ch button { pointer-events: auto; }
.sh-ch__head { grid-area: 1 / 1 / 2 / 3; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; max-width: min(64vw, 900px); }
.sh-ch__kicker { width: 100%; color: var(--sh-gold); font: 700 11px/1 var(--sh-font-mono); letter-spacing: .2em; text-transform: uppercase; }
html.film-live .sh-ch__kicker { display: none; }
.sh-ch__title { margin: 0; font-size: clamp(32px, 4.2vw, 64px); font-weight: 600; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.sh-ch__title:focus { outline: none; }
.sh-ch__title em { font-style: normal; color: var(--sh-fg-2); }
.sh-ch--hero .sh-ch__title { font-size: clamp(40px, 5vw, 76px); line-height: .95; }
.sh-chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid rgb(95 212 196 / 34%); border-radius: 6px;
  background: rgb(95 212 196 / 14%); color: var(--sh-teal); font: 500 clamp(13px, 1.1vw, 16px)/1 var(--sh-font-sans); white-space: nowrap;
}
.sh-chip--red { border-color: rgb(226 59 77 / 40%); background: rgb(226 59 77 / 15%); color: #ff7b89; }
.sh-ch__foot { grid-area: 3 / 1 / 4 / 2; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 440px; }
.sh-ch__body { color: rgb(243 242 238 / 88%); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.42; text-wrap: pretty; }
.sh-ch__cta, .sh-ch__decide { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sh-ch__micro { color: var(--sh-fg-3); font: 500 11px/1.5 var(--sh-font-mono); letter-spacing: .06em; }
.sh-ch__cta .sh-ch__micro { width: 100%; letter-spacing: .16em; text-transform: uppercase; }
.sh-ch__demo-link { display: inline-flex; align-items: center; min-height: 32px; color: var(--sh-fg-2); font-size: 14px; text-decoration: underline; text-decoration-color: var(--sh-line-2); }
.sh-ch__demo-link:hover { color: var(--sh-fg); }
html.film-live .sh-ch [data-film-cta], html.film-live .sh-ch [data-chip] { opacity: 0; }
.sh-film__still-map { display: none; }

/* 09, the category: a black interstitial with the street as a product on a stand. */
.sh-ch--category .sh-ch__title { font-size: 22px; line-height: 1.15; letter-spacing: -.015em; color: var(--sh-fg-2); }
.sh-cat { grid-area: 2 / 1 / 4 / 3; align-self: start; justify-self: center; display: grid; justify-items: center; gap: 10px; margin-top: 2vh; text-align: center; }
.sh-cat__eyebrow { color: var(--sh-gold); font: 700 11px/1 var(--sh-font-mono); letter-spacing: .24em; text-transform: uppercase; }
.sh-cat__stats { display: grid; justify-items: center; }
.sh-cat__stat { grid-area: 1 / 1; display: grid; justify-items: center; gap: 12px; }
.sh-cat__num {
  font-family: var(--sh-font-num); font-size: min(10vw, 17vh, 190px); font-weight: 400; line-height: .9; letter-spacing: -.02em; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums; background: linear-gradient(180deg, #fffdf6 20%, #b9b3a3); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sh-cat__line { max-width: 34em; color: var(--sh-fg-2); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.4; }
.sh-cat__closing { max-width: 30em; margin-top: 18px; color: var(--sh-fg); font-size: clamp(20px, 1.95vw, 28px); font-weight: 600; line-height: 1.22; letter-spacing: -.02em; text-wrap: balance; }
html.film-live .sh-ch--category [data-film-stat="b"], html.film-live .sh-ch--category [data-film-closing] { opacity: 0; }

/* Phone portrait: headline top, HUD key lines and body above the dock. */
@media (max-width: 767px) and (orientation: portrait) {
  html.film-live .sh-film { height: 800vh; height: calc(700svh + 100svh); }
  html.film-live .sh-ch { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; padding: 96px 16px calc(96px + env(safe-area-inset-bottom)); }
  html.film-live .sh-ch--hero { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .sh-ch__head { max-width: none; gap: 10px 14px; }
  .sh-ch__title { font-size: clamp(30px, 9vw, 40px); }
  .sh-ch--hero .sh-ch__title { font-size: clamp(34px, 10.4vw, 44px); }
  html.film-live .sh-hud { grid-area: 3 / 1; justify-self: start; align-items: flex-start; margin-bottom: 12px; font-size: 10px; }
  html.film-live .sh-hud__line:not(.is-key) { display: none; }
  html.film-live .sh-ch__foot { grid-area: 4 / 1; max-width: none; gap: 14px; }
  .sh-ch__body { font-size: 15px; }
  .sh-ch__cta { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .sh-ch__cta .sh-btn { padding: 0 10px; }
  .sh-ch__decide { flex-direction: column; align-items: stretch; width: 100%; }
  .sh-film__cue { display: none; }
  .sh-film__skip { top: 58px; left: 16px; }
  .sh-film__schematic { top: 42%; left: auto; right: 16px; transform: none; font-size: 10px; }
  .sh-stage__vignette { background: radial-gradient(ellipse 90% 70% at 50% 40%, transparent 50%, rgb(3 4 6 / 50%) 100%), linear-gradient(180deg, rgb(7 8 10 / 70%) 0, rgb(7 8 10 / 0) 22%), linear-gradient(0deg, rgb(7 8 10 / 94%) 0, rgb(7 8 10 / 82%) 26%, rgb(7 8 10 / 0) 50%); }
  .sh-cat { margin-top: 22px; }
  .sh-cat__num { font-size: min(10vw, 208px); }
  .sh-ch--category .sh-ch__title { font-size: 18px; }
}
/* Phone landscape: pinned, short travel, key HUD lines only. */
@media (max-height: 500px) and (orientation: landscape) {
  html.film-live .sh-film { height: 700vh; height: calc(600svh + 100svh); }
  html.film-live .sh-ch { padding: 58px var(--sh-gutter) 14px; }
  .sh-ch__title, .sh-ch--hero .sh-ch__title { font-size: 28px; }
  html.film-live .sh-ch:not(.sh-ch--hero) .sh-ch__body, html.film-live .sh-ch__micro, .sh-film__cue { display: none; }
  html.film-live .sh-ch--hero .sh-ch__body { font-size: 13px; }
  html.film-live .sh-hud__line:not(.is-key) { display: none; }
  .sh-film__skip { top: 52px; left: var(--sh-gutter); }
  .sh-film__schematic { top: 90px; }
  .sh-ch__foot { gap: 10px; }
  .sh-cat__num { font-size: min(9vw, 20vh); }
  .sh-cat__closing { font-size: 18px; }
}

/* Still: reduced motion, the still tier, no JS. Every chapter as a row on glass; the stage shows one pose per chapter behind it. */
html:not(.film-live) .sh-film__cue { display: none; }
html:not(.film-live) .sh-film__copy { position: relative; inset: auto; }
html:not(.film-live) .sh-ch {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px 64px; align-content: start;
  padding: 72px max(var(--sh-gutter), calc((100vw - var(--sh-maxw)) / 2)); border-top: 1px solid var(--sh-line);
  background: linear-gradient(90deg, rgb(7 8 10 / 90%), rgb(7 8 10 / 72%) 60%, rgb(7 8 10 / 58%));
}
html:not(.film-live) .sh-ch__head { grid-column: 1; max-width: none; }
html:not(.film-live) .sh-ch__foot { grid-column: 1; }
html:not(.film-live) .sh-film .sh-hud {
  grid-column: 2; grid-row: 1 / span 3; align-self: start; align-items: flex-start; text-align: left;
  padding: 18px 20px; border: 1px solid var(--sh-line); border-radius: 14px; background: rgb(13 15 19 / 82%);
}
html:not(.film-live) .sh-ch--hero { min-height: 100vh; min-height: 100svh; grid-template-rows: auto 1fr auto; padding-top: 108px; padding-bottom: 64px; border: 0; background: transparent; }
html:not(.film-live) .sh-ch--hero .sh-ch__foot { grid-row: 3; }
html:not(.film-live) .sh-film .sh-ch--hero .sh-hud { grid-row: 3; align-self: end; justify-self: end; background: rgb(7 8 10 / 72%); }
html:not(.film-live) .sh-film__still-map { display: block; grid-column: 2; }
html:not(.film-live) .sh-cat { grid-column: 1 / -1; margin: 0; }
html:not(.film-live) .sh-cat__stats { gap: 40px; }
html:not(.film-live) .sh-cat__stat { grid-area: auto; }
@media (max-width: 767px) {
  html:not(.film-live) .sh-ch { grid-template-columns: minmax(0, 1fr); padding: 56px 16px; }
  html:not(.film-live) .sh-ch :is(.sh-ch__head, .sh-ch__foot, .sh-hud, .sh-film__still-map) { grid-column: 1; grid-row: auto; }
  html:not(.film-live) .sh-ch--hero { min-height: 88vh; min-height: 88svh; }
}
@media (prefers-reduced-motion: reduce) { .sh-ch, .sh-film__rays span { will-change: auto; } }