/*
 * NIGHTWEAVE — layout and styling. Every value comes from assets/tokens.css.
 * Namespace: .nw-*. Mobile first; the page is complete without JavaScript.
 * site.js adds html.nw-js (motion allowed) and html.nw-weave-on (canvas drawn).
 */

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--s-bg-deep); }
body {
    margin: 0;
    background: var(--s-bg);
    color: var(--s-text);
    font: var(--s-weight-400) var(--s-step-body)/var(--s-leading-160) var(--s-font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, figure, blockquote, dl, dd { margin: 0; }
:focus-visible { outline: var(--s-focus) solid var(--s-red); outline-offset: 3px; }
::selection { background: var(--s-cyan); color: var(--s-btn-ink); }

.nw-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nw-skip {
    position: absolute; left: var(--s-gutter); top: 12px; z-index: var(--s-z-skip);
    padding: 12px 18px; background: var(--s-btn-bg); color: var(--s-btn-ink);
    font: var(--s-weight-600) var(--s-step-micro)/var(--s-leading-100) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase;
    text-decoration: none; transform: translateY(-300%);
}
.nw-skip:focus { transform: none; }

.nw-grain {
    position: fixed; inset: 0; z-index: var(--s-z-grain); pointer-events: none;
    background: url("img/grain.png") repeat;
    opacity: var(--s-grain-opacity);
}

/* Micro labels — the credits-block voice */
.nw-kicker, .nw-slate, .nw-label, .nw-sheet-tag, .nw-spec-label, .nw-formats-title, .nw-cue {
    font: var(--s-weight-500) var(--s-step-micro)/var(--s-leading-150) var(--s-font-body);
    letter-spacing: var(--s-track-micro);
    text-transform: uppercase;
}
.nw-kicker { color: var(--s-steel); }
.nw-slate { color: var(--s-red-text); font-variant-numeric: tabular-nums; }
.nw-slate, .nw-spec-label { font-size: var(--s-step-slate); }

.nw-h2, .nw-h3, .nw-title, .nw-sheet-code, .nw-release, .nw-numeral, .nw-date, .nw-spec-value, .nw-format dt, .nw-logo-word, .nw-credit--title {
    font-family: var(--s-font-display);
    font-weight: var(--s-weight-display);
    text-transform: uppercase;
    letter-spacing: var(--s-track-display);
    line-height: var(--s-leading-display);
}
.nw-h2 { font-size: var(--s-step-h2); margin-top: 18px; max-width: 14ch; text-wrap: balance; }
.nw-h2--tight { max-width: 18ch; }
.nw-h3 { font-size: var(--s-step-h3); margin: 14px 0 22px; text-wrap: balance; }
.nw-lede { color: var(--s-muted); font-size: var(--s-step-lede); line-height: var(--s-leading-155); max-width: 44ch; margin-top: 24px; }

/* ── Buttons: sharp, cyan underline sweep, red focus ring ─────────── */
.nw-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 48px; padding: 0 22px; border: var(--s-hairline) solid transparent; border-radius: var(--s-radius);
    font: var(--s-weight-600) var(--s-step-micro)/var(--s-leading-100) var(--s-font-body); letter-spacing: var(--s-track-0p16); text-transform: uppercase;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color var(--s-dur-fast) var(--s-ease), color var(--s-dur-fast) var(--s-ease);
}
.nw-btn::after {
    content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px;
    background: var(--s-cyan); transform: scaleX(0); transform-origin: left center;
    transition: transform var(--s-dur) var(--s-ease-sweep);
}
.nw-btn:hover::after, .nw-btn:focus-visible::after { transform: scaleX(1); }
.nw-btn--solid { background: var(--s-btn-bg); color: var(--s-btn-ink); }
.nw-btn--solid:hover { background: var(--s-cyan-core); }
.nw-btn--line { background: transparent; color: var(--s-text); border-color: var(--s-rule-strong); }
.nw-btn--line:hover { border-color: var(--s-steel); }
.nw-play { width: 9px; height: 11px; background: var(--s-red); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.nw-note { min-height: var(--s-measure-1p4); color: var(--s-cyan); font-size: var(--s-size-small); line-height: var(--s-leading-150); max-width: 52ch; }

/* ── Nav ──────────────────────────────────────────────────────────── */
.nw-nav {
    position: sticky; top: 0; z-index: var(--s-z-nav);
    height: var(--s-nav-h); margin-bottom: calc(-1 * var(--s-nav-h));
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 0 var(--s-gutter);
    padding-left: max(var(--s-gutter), env(safe-area-inset-left));
    padding-right: max(var(--s-gutter), env(safe-area-inset-right));
    background: var(--s-veil);
    border-bottom: var(--s-hairline) solid var(--s-rule);
    transition: background-color var(--s-dur) var(--s-ease), border-color var(--s-dur) var(--s-ease);
}
/* Transparent only over the hero, and only when JS can tell (solid by default). */
.nw-nav.is-clear { background: var(--s-veil-soft); border-bottom-color: transparent; }
.nw-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.nw-logo-word { font-size: var(--s-size-logo); letter-spacing: var(--s-track-0p08); line-height: var(--s-leading-100); }
.nw-logo-light {
    width: 7px; height: 7px; background: var(--s-aircraft); border-radius: 50%;
    box-shadow: 0 0 10px var(--s-red); animation: nw-blink var(--s-blink) steps(1, end) infinite;
}
.nw-nav-links ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nw-menu-title, .nw-menu-note, .nw-menu-num { display: none; }
.nw-nav-links a, .nw-nav-cta {
    position: relative; text-decoration: none;
    font: var(--s-weight-500) var(--s-step-micro)/var(--s-leading-100) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase;
}
.nw-nav-links a { color: var(--s-steel); padding: 10px 0; }
.nw-nav-links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--s-cyan);
    transform: scaleX(0); transform-origin: left; transition: transform var(--s-dur) var(--s-ease-sweep);
}
.nw-nav-links a:hover, .nw-nav-links a:focus-visible { color: var(--s-text); }
.nw-nav-links a:hover::after, .nw-nav-links a:focus-visible::after { transform: scaleX(1); }
.nw-nav-cta { padding: 12px 16px; border: var(--s-hairline) solid var(--s-cyan); color: var(--s-text); transition: background-color var(--s-dur-fast) var(--s-ease), color var(--s-dur-fast) var(--s-ease); }
.nw-nav-cta:hover { background: var(--s-cyan); color: var(--s-btn-ink); }
.nw-nav-cta { margin-left: auto; }
@media (min-width: 768px) {
    .nw-nav-links { display: block; margin-left: auto; }
    .nw-nav-cta { margin-left: 0; }
}

/* Phones. Without JS the three links sit in a scrollable chip row under the bar;
   with JS (html.nw-menu-on) they become a full-screen menu behind a button. */
@media (max-width: 767px) {
    .nw-nav-links {
        position: absolute; left: 0; right: 0; top: 100%;
        overflow-x: auto; background: var(--s-veil); border-bottom: var(--s-hairline) solid var(--s-rule);
    }
    .nw-nav-links ul { gap: 22px; padding: 12px var(--s-gutter); white-space: nowrap; }
    .nw-nav-links a { padding: 6px 0; }

    .nw-menu-on .nw-nav-links {
        position: fixed; inset: 0; top: 0; z-index: 1; overflow-y: auto;
        display: flex; flex-direction: column; justify-content: center; gap: 28px;
        padding: calc(var(--s-nav-h) + 24px) var(--s-gutter) 40px;
        background: var(--s-bar); border: 0;
        visibility: hidden; opacity: 0;
        transition: opacity var(--s-dur) var(--s-ease), visibility 0s linear var(--s-dur);
    }
    .nw-menu-on .nw-nav-links.is-open { visibility: visible; opacity: 1; transition: opacity var(--s-dur) var(--s-ease), visibility 0s; }
    .nw-menu-on .nw-nav-links ul { flex-direction: column; gap: 6px; padding: 0; white-space: normal; }
    .nw-menu-on .nw-nav-links a {
        display: flex; align-items: baseline; gap: 14px; padding: 10px 0;
        font: var(--s-weight-display) clamp(2.6rem, 14vw, 4.2rem)/var(--s-leading-95) var(--s-font-display);
        letter-spacing: var(--s-track-display); color: var(--s-text);
        border-bottom: var(--s-hairline) solid var(--s-rule);
    }
    .nw-menu-on .nw-nav-links a::after { bottom: -1px; height: 2px; }
    .nw-menu-on .nw-menu-num { display: inline; font: var(--s-weight-500) var(--s-step-micro)/var(--s-leading-100) var(--s-font-body); letter-spacing: var(--s-track-micro); color: var(--s-red-text); transform: translateY(var(--s-shift-n1p4)); }
    .nw-menu-on .nw-menu-title { display: block; color: var(--s-dim); font: var(--s-weight-display) var(--s-step-micro)/var(--s-leading-100) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase; }
    .nw-menu-on .nw-menu-note { display: block; color: var(--s-red-text); font: var(--s-weight-500) var(--s-step-micro)/var(--s-leading-150) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase; }
    .nw-logo, .nw-nav-cta, .nw-menu-btn { position: relative; z-index: 2; }
}
.nw-menu-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-left: 10px; padding: 0 4px 0 10px;
    background: transparent; color: var(--s-text); border: 0; cursor: pointer;
    font: var(--s-weight-500) var(--s-step-micro)/var(--s-leading-100) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase;
}
.nw-menu-btn[hidden] { display: none; }
@media (min-width: 768px) { .nw-menu-btn { display: none; } }
@media (max-width: 379px) {
    .nw-nav { gap: 12px; }
    .nw-nav-cta { padding: 12px; }
    .nw-menu-btn { margin-left: 0; padding: 0 0 0 6px; min-width: 44px; justify-content: flex-end; }
    .nw-menu-text { display: none; }
}
.nw-menu-icon { position: relative; width: 20px; height: 10px; }
.nw-menu-icon span {
    position: absolute; left: 0; right: 0; height: 1.5px; background: var(--s-cyan);
    transition: transform var(--s-dur) var(--s-ease), top var(--s-dur) var(--s-ease);
}
.nw-menu-icon span:first-child { top: 0; }
.nw-menu-icon span:last-child { top: 8.5px; }
.nw-menu-btn[aria-expanded="true"] .nw-menu-icon span:first-child { top: 4.25px; transform: rotate(45deg); }
.nw-menu-btn[aria-expanded="true"] .nw-menu-icon span:last-child { top: 4.25px; transform: rotate(-45deg); }
.nw-menu-open { overflow: hidden; }
.nw-menu-open .nw-nav { background: var(--s-bar); border-bottom-color: var(--s-rule); }

@keyframes nw-blink { 0% { opacity: 1; } 12% { opacity: 0.15; } 100% { opacity: 0.15; } }

/* ── 1 · Hero: the letterboxed frame ─────────────────────────────── */
.nw-hero {
    --nw-ratio: var(--s-frame-ratio-portrait);
    --nw-vh: 100vh;
    --nw-frame-h: min(calc(100vw / var(--nw-ratio)), calc(var(--nw-vh) - var(--s-bar-top-min) - var(--s-bar-bottom-min)), calc(var(--nw-vh) * var(--s-frame-max-vh)));
    position: relative;
    display: grid;
    grid-template-rows: minmax(var(--s-bar-top-min), var(--s-bar-top-share)) var(--nw-frame-h) minmax(var(--s-bar-bottom-min), var(--s-bar-bottom-share));
    height: 100vh;
    height: 100svh;
    background: var(--s-bar);
    overflow: hidden;
}
@supports (height: 100svh) { .nw-hero { --nw-vh: 100svh; } }
@media (min-aspect-ratio: 1/1) { .nw-hero { --nw-ratio: var(--s-frame-ratio-flat); } }
@media (min-aspect-ratio: 16/10) { .nw-hero { --nw-ratio: var(--s-frame-ratio); } }

.nw-bar { position: relative; z-index: var(--s-z-over); padding: 0 var(--s-gutter); display: grid; gap: 10px; text-align: center; }
.nw-bar--top { padding-top: var(--s-nav-h); align-content: end; padding-bottom: 14px; }
.nw-bar--bottom { align-content: start; justify-items: center; padding-top: 16px; padding-bottom: 16px; }
.nw-slate--hero { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.nw-rec { width: 6px; height: 6px; border-radius: 50%; background: var(--s-red); animation: nw-blink var(--s-blink) steps(1, end) infinite; }
.nw-kicker--hero { color: var(--s-text); }

.nw-release-block { display: grid; gap: 6px; }
/* Tagline first, date as a label: the stamp in the frame owns the big moment. */
.nw-release { order: -1; font: var(--s-weight-500) var(--s-step-micro)/var(--s-leading-150) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase; color: var(--s-red-text); }
.nw-tagline {
    font: var(--s-weight-display) clamp(1.35rem, 2.6vw, 2.3rem)/var(--s-leading-100) var(--s-font-display);
    letter-spacing: var(--s-track-0p03); text-transform: uppercase; color: var(--s-steel); text-wrap: balance;
}
.nw-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; }
.nw-actions .nw-cue { display: none; }
@media (max-width: 559px) { .nw-actions .nw-btn { padding: 0 14px; letter-spacing: var(--s-track-0p12); } }
@media (max-height: 640px) and (max-width: 559px) { .nw-tagline { display: none; } }
.nw-bar--bottom .nw-note { text-align: center; }

@media (max-width: 419px), (max-height: 600px) { .nw-slate--hero { display: none; } }
.nw-timecode { display: none; color: var(--s-muted); font: var(--s-weight-500) var(--s-step-micro)/var(--s-leading-150) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nw-timecode-label { color: var(--s-dim); margin-right: 10px; }
@media (min-width: 1024px) {
    .nw-bar--top { grid-template-columns: 1fr auto 1fr; align-items: end; text-align: left; }
    .nw-slate--hero { justify-content: flex-start; white-space: nowrap; }
    .nw-kicker--hero { text-align: center; white-space: nowrap; }
    .nw-timecode { display: block; text-align: right; }
}
@media (min-width: 900px) {
    .nw-bar--bottom { grid-template-columns: 1fr auto; align-items: center; justify-items: stretch; text-align: left; column-gap: 32px; }
    .nw-actions { justify-content: flex-end; margin-top: 0; gap: 10px; }
    .nw-actions .nw-cue { display: flex; margin-right: 22px; }
    .nw-bar--bottom .nw-note { grid-column: 1 / -1; text-align: right; justify-self: end; }
}

.nw-frame {
    position: relative; overflow: hidden;
    background:
        radial-gradient(120% 70% at 50% 100%, var(--s-horizon-glow), var(--s-veil-soft) 60%),
        linear-gradient(180deg, var(--s-sky-top), var(--s-sky-mid) 45%, var(--s-sky-low) 75%, var(--s-sky-horizon));
}
/* The frame edge: a hairline top and bottom so the 2.39:1 picture reads against the bars. */
.nw-frame::after {
    content: ""; position: absolute; inset: 0; z-index: var(--s-z-over); pointer-events: none;
    border-top: var(--s-hairline) solid var(--s-frame-edge); border-bottom: var(--s-hairline) solid var(--s-frame-edge);
}
.nw-weave { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The city as CSS masks: the no-JS / no-canvas version of the frame,
   and the backdrop of the tickets scene. Colour from tokens, shape from SVG. */
.nw-city, .nw-tickets-city { position: absolute; inset: 0; pointer-events: none; }
.nw-city-layer {
    position: absolute; left: 0; right: 0; bottom: 0;
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: center bottom; mask-position: center bottom;
    -webkit-mask-size: auto 100%; mask-size: auto 100%;
}
.nw-city-layer--far { height: calc(var(--s-weave-layer-share-1) * 100%); background: var(--s-layer-far); -webkit-mask-image: url("img/skyline-far.svg"); mask-image: url("img/skyline-far.svg"); }
.nw-city-layer--mid { height: calc(var(--s-weave-layer-share-2) * 100%); background: var(--s-layer-mid); -webkit-mask-image: url("img/skyline-mid.svg"); mask-image: url("img/skyline-mid.svg"); }
.nw-city-layer--near { height: calc(var(--s-weave-layer-share-3) * 100%); background: var(--s-layer-near); -webkit-mask-image: url("img/skyline-near.svg"); mask-image: url("img/skyline-near.svg"); }
/* Lit windows: clipped to each building layer by the layer's own mask. */
.nw-city-layer--mid::after, .nw-city-layer--near::after {
    content: ""; position: absolute; inset: 14px 0 0;
    background: var(--s-window-warm); opacity: 0.55;
    -webkit-mask: url("img/windows-mask.svg") 0 0 / 216px 220px repeat;
    mask: url("img/windows-mask.svg") 0 0 / 216px 220px repeat;
}
.nw-city-layer--near::after { background: var(--s-window-cool); opacity: 0.4; -webkit-mask-position: 60px 30px; mask-position: 60px 30px; }

.nw-title {
    position: absolute; left: 50%; top: calc(var(--s-title-y) * 100%); z-index: var(--s-z-over);
    transform: translate(-50%, -50%);
    font-size: min(var(--s-step-hero), calc(var(--s-title-width-mobile) * 100vw / 4.4), calc(var(--nw-frame-h) * 0.32));
    letter-spacing: var(--s-track-title);
    color: var(--s-title-fill); white-space: nowrap;
    text-shadow: 0 0 14px var(--s-title-glow), 0 0 48px var(--s-cyan-wash);
}
.nw-stamp {
    position: absolute; left: 50%; top: calc(var(--s-title-y) * 100% + min(9vw, 8.5vh, 7rem)); z-index: var(--s-z-over);
    transform: translateX(-50%) rotate(-3deg);
    padding: 4px 12px 2px; border: 2px solid var(--s-stamp); color: var(--s-red-text);
    font: var(--s-weight-display) clamp(1rem, 2.2vw, 1.8rem)/var(--s-leading-100) var(--s-font-display); letter-spacing: var(--s-track-0p14); text-transform: uppercase;
}
.nw-cue {
    align-items: center; gap: 10px; color: var(--s-steel); white-space: nowrap;
    transition: opacity var(--s-dur) var(--s-ease);
}
.nw-cue-line { width: 28px; height: 1px; background: var(--s-cyan); transform-origin: left; animation: nw-cue var(--s-cue-dur) var(--s-ease) infinite; }
@keyframes nw-cue { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.nw-cue.is-gone { opacity: 0; }

/* Canvas live: the real h1 stays in the DOM for search and screen readers. */
.nw-weave-on .nw-city, .nw-weave-on .nw-stamp { display: none; }
.nw-weave-on .nw-title {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; text-shadow: none;
}

/* ── Strand dividers with a travelling spark ─────────────────────── */
.nw-wire { position: relative; z-index: 3; height: 48px; margin: -24px 0; pointer-events: none; }
.nw-wire svg { width: 100%; height: 100%; overflow: visible; }
.nw-wire--flip { transform: scaleX(-1); }
.nw-wire-cable { fill: none; stroke: var(--s-cyan); stroke-opacity: 0.35; stroke-width: 1; }
.nw-wire-spark {
    fill: none; stroke: var(--s-cyan-core); stroke-width: 2.4; stroke-linecap: round;
    stroke-dasharray: 3 97; stroke-dashoffset: 100;
    filter: drop-shadow(0 0 5px var(--s-cyan));
    animation: nw-spark var(--s-spark-dur) linear infinite;
}
@keyframes nw-spark { to { stroke-dashoffset: 0; } }

/* ── 2 · Story: three cuts ───────────────────────────────────────── */
.nw-head {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px;
    padding: var(--s-section) var(--s-gutter) clamp(40px, 6vw, 80px);
    max-width: var(--s-max); margin-inline: auto;
}
.nw-head > * { grid-column: 1 / -1; }
@media (min-width: 900px) {
    .nw-head > * { grid-column: 2 / span 8; }
    .nw-head--cast { padding-top: var(--s-cast-head-top); }
    .nw-head--cast > * { grid-column: 2 / span 10; }
    .nw-head--cast .nw-h2 { max-width: 18ch; }
}

.nw-beat {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-content: end;
    min-height: 100vh; min-height: 100svh;
    padding: var(--s-section) var(--s-gutter) clamp(56px, 9vw, 120px);
    background: var(--s-bg);
}
.nw-beat--1 { background: radial-gradient(60% 55% at 76% 18%, var(--s-red-wash), var(--s-veil-soft) 70%), linear-gradient(180deg, var(--s-sky-top), var(--s-bg)); }
.nw-beat--2 { background: radial-gradient(50% 60% at 18% 62%, var(--s-cyan-wash), var(--s-veil-soft) 70%), linear-gradient(180deg, var(--s-bg), var(--s-sky-mid)); }
.nw-beat--3 { background: radial-gradient(40% 40% at 50% 70%, var(--s-red-wash), var(--s-veil-soft) 70%), linear-gradient(180deg, var(--s-sky-mid), var(--s-bg)); }

.nw-beat-art { position: absolute; inset: 0 0 40% 0; }
@media (min-width: 900px) { .nw-beat-art { inset: 0; } }
.nw-art { width: 100%; height: 100%; }
.nw-art-tower { fill: var(--s-layer-near); }
.nw-art-tower--far { fill: var(--s-layer-mid); }
.nw-art-warning { fill: var(--s-aircraft); animation: nw-blink var(--s-blink) steps(1, end) infinite; }
.nw-art-warning-halo { fill: var(--s-red-wash); animation: nw-blink var(--s-blink) steps(1, end) infinite; }
.nw-art-dead { fill: none; stroke: var(--s-dim); stroke-width: 1.5; stroke-dasharray: 2 10; }
.nw-art-strand { fill: none; stroke: var(--s-cyan); stroke-width: 2.4; stroke-linecap: round; }
.nw-art-strand--thin { stroke-width: 1; stroke-opacity: 0.55; }
.nw-art-strand-glow { fill: none; stroke: var(--s-cyan); stroke-opacity: 0.16; stroke-width: 22; stroke-linecap: round; }
.nw-art-node { fill: var(--s-cyan-core); }
.nw-art-node-halo { fill: var(--s-cyan-wash); }
.nw-art-spark { fill: none; stroke: var(--s-red-text); stroke-width: 2.2; stroke-linecap: round; }

.nw-numeral {
    position: absolute; z-index: 1; top: clamp(72px, 10vw, 140px); right: var(--s-gutter);
    font-size: var(--s-step-mega); line-height: var(--s-leading-80);
    color: transparent; -webkit-text-stroke: 1px var(--s-dim);
    font-variant-numeric: tabular-nums; user-select: none;
}
@supports not (-webkit-text-stroke: 1px) { .nw-numeral { color: var(--s-surface-2); } }
.nw-beat--2 .nw-numeral { right: auto; left: var(--s-gutter); }
.nw-beat-card { position: relative; z-index: 2; grid-column: 1 / -1; max-width: 34rem; }
.nw-line { overflow: hidden; color: var(--s-steel); font-size: var(--s-step-cut-line); line-height: var(--s-leading-150); }
.nw-line + .nw-line { margin-top: 12px; }
.nw-line-in { display: block; }
@media (min-width: 900px) {
    .nw-beat-card { grid-column: 2 / span 5; }
    .nw-beat--2 .nw-beat-card { grid-column: 8 / span 5; }
    /* Cuts 02 and 03 light the strands along the bottom of the frame: the words sit above them. */
    .nw-beat--2, .nw-beat--3 { padding-bottom: var(--s-beat-copy-lift); }
}
/* A local dark shade behind the words, so body copy keeps AA over the strands and the stills. */
.nw-beat--2 .nw-beat-card::before, .nw-beat--3 .nw-beat-card::before {
    content: ""; position: absolute; inset: var(--s-card-scrim-bleed); z-index: -1;
    background: var(--s-card-scrim); pointer-events: none;
}

/* The title card: printed over cut 01's sky, under the next two cuts. */
.nw-beats { position: relative; }
.nw-titlecard {
    position: absolute; z-index: 2; left: var(--s-gutter); right: var(--s-gutter); top: var(--s-titlecard-top);
    max-width: var(--s-max); pointer-events: none;
}
.nw-titlecard .nw-h2 { max-width: 11ch; text-shadow: 0 0 40px var(--s-bg-deep); }
.nw-beat--1 { z-index: 1; }
.nw-beat--2, .nw-beat--3 { z-index: 3; }
@media (max-width: 899px) { .nw-beat--1 .nw-numeral { display: none; } }
@media (min-width: 900px) {
    .nw-titlecard { left: calc(var(--s-gutter) + (100% - 2 * var(--s-gutter)) / 12); }
}

/* The city under every cut: dark in 01 (fires only), strung with light in 02 and 03. */
.nw-beat-city { position: absolute; left: 0; right: 0; bottom: 0; height: var(--s-beat-city-h); pointer-events: none; }
.nw-beat-city .nw-city-layer--far { height: 100%; }
.nw-beat-city .nw-city-layer--mid { height: 78%; }
.nw-beat-city .nw-city-layer--near { height: 52%; }
.nw-beat-city--dark .nw-city-layer::after { content: none; }
.nw-beat-city .nw-strands { height: 78%; }
.nw-fires {
    position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
    background:
        radial-gradient(5% 30% at 14% 100%, var(--s-fire-glow), transparent 70%),
        radial-gradient(3% 20% at 37% 100%, var(--s-fire-glow), transparent 70%),
        radial-gradient(6% 34% at 63% 100%, var(--s-fire-glow), transparent 70%),
        radial-gradient(4% 24% at 88% 100%, var(--s-fire-glow), transparent 70%),
        linear-gradient(0deg, var(--s-fire-haze), transparent 60%);
    animation: nw-flicker var(--s-blink) ease-in-out infinite alternate;
}
@keyframes nw-flicker { from { opacity: 0.75; } to { opacity: 1; } }

/* A still from the cut, opposite the card. On a phone it fills the top of the frame. */
.nw-still {
    position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: var(--s-still-h-mobile); margin: 0;
    -webkit-mask-image: linear-gradient(180deg, var(--s-layer-near) 62%, transparent);
    mask-image: linear-gradient(180deg, var(--s-layer-near) 62%, transparent);
}
.nw-still picture, .nw-still img { display: block; width: 100%; height: 100%; }
.nw-still img { object-fit: cover; }
.nw-beat--1 .nw-still img { object-position: var(--s-still-pos-1); }
.nw-beat--2 .nw-still img { object-position: var(--s-still-pos-2); }
.nw-beat--3 .nw-still img { object-position: var(--s-still-pos-3); }
/* The burnt-in caption of a dailies print: timecode red dot, white monospace-feel label. */
.nw-burn {
    position: absolute; left: var(--s-gutter); top: calc(var(--s-nav-h) + 14px);
    display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 2 * var(--s-gutter));
    padding: 8px 12px; background: var(--s-burn-bg); color: var(--s-text);
    font: var(--s-weight-500) var(--s-step-burn)/var(--s-leading-150) var(--s-font-body); letter-spacing: var(--s-track-0p08);
    font-variant-numeric: tabular-nums;
}
.nw-burn-rec { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--s-aircraft); animation: nw-blink var(--s-blink) steps(1, end) infinite; }
.nw-beat--1 .nw-burn { top: auto; bottom: 18%; }
.nw-beat { align-content: end; }
.nw-beat-card { padding-top: calc(var(--s-still-h-mobile) * 0.2); }
/* A soft dark pool behind the words, so the lit city can run under them. */
.nw-beat-card::before {
    content: ""; position: absolute; z-index: -1; inset: -64px -96px -56px -72px; pointer-events: none;
    background: radial-gradient(closest-side, var(--s-bg-deep) 55%, transparent);
    opacity: 0.94;
}
@media (min-width: 900px) {
    .nw-still {
        top: 0; bottom: 0; height: auto; width: var(--s-still-w);
        -webkit-mask-image: linear-gradient(270deg, var(--s-layer-near) 55%, transparent);
        mask-image: linear-gradient(270deg, var(--s-layer-near) 55%, transparent);
    }
    .nw-beat--2 .nw-still {
        right: auto; left: 0;
        -webkit-mask-image: linear-gradient(90deg, var(--s-layer-near) 55%, transparent);
        mask-image: linear-gradient(90deg, var(--s-layer-near) 55%, transparent);
    }
    .nw-burn { left: auto; right: var(--s-gutter); top: auto; bottom: clamp(56px, 9vw, 120px); }
    .nw-beat--1 .nw-burn { bottom: clamp(56px, 9vw, 120px); }
    .nw-beat--2 .nw-burn { right: auto; left: var(--s-gutter); }
    .nw-beat-card { padding-top: 0; }
    .nw-beat--1 .nw-numeral { bottom: auto; top: clamp(72px, 10vw, 140px); right: auto; left: 50%; }
    .nw-beat--3 .nw-numeral { right: auto; left: 50%; }
    .nw-beat-city { height: calc(var(--s-beat-city-h) * 0.8); }
}

/* Pinned cut mode (added by site.js only when motion is allowed). */
.nw-beats.is-cut { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.nw-beats.is-cut .nw-beat { position: absolute; inset: 0; min-height: 0; }

/* ── 3 · Characters: one-sheets ──────────────────────────────────── */
.nw-cast {
    position: relative; isolation: isolate; padding-bottom: var(--s-section);
    background: linear-gradient(180deg, var(--s-bg) 0%, var(--s-sky-mid) 34%, var(--s-bg) 62%);
}
.nw-cast-sky { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--s-cast-sky-h); pointer-events: none; }
.nw-cast-sky .nw-city-layer--far { height: 70%; }
.nw-cast-sky .nw-city-layer--mid { height: 54%; }
.nw-cast-sky .nw-strands { height: 54%; }
.nw-cast-sky .nw-city-layer--near { height: 36%; }
.nw-cast-sky::after { /* the street below falls away into the cards */
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 22%; background: linear-gradient(180deg, transparent, var(--s-bg));
}
.nw-head--cast { padding-top: var(--s-cast-head-top-phone); padding-bottom: 0; position: relative; }
.nw-head--cast .nw-h2 { text-shadow: 0 0 36px var(--s-bg-deep), 0 0 12px var(--s-bg-deep); }
.nw-cast .nw-sheets { position: relative; margin-top: 28px; }
@media (min-width: 900px) { .nw-cast .nw-sheets { margin-top: var(--s-cast-overlap); } .nw-cast { padding-bottom: var(--s-section-tight); } }
.nw-sheets {
    display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding: 4px var(--s-gutter) 18px; scroll-padding-inline: var(--s-gutter);
    scrollbar-width: thin; scrollbar-color: var(--s-dim) transparent;
    max-width: var(--s-max); margin-inline: auto;
}
.nw-sheets:focus-visible { outline-offset: -2px; }
@media (min-width: 600px) { .nw-sheets { grid-auto-columns: 46%; } }
@media (min-width: 1024px) {
    .nw-sheets { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 20px; }
    .nw-sheets { align-items: start; }
    .nw-sheet--2 { margin-top: var(--s-sheet-offset); }
}
.nw-sheet {
    position: relative; overflow: hidden; aspect-ratio: var(--s-card-ratio);
    background: var(--s-surface); border: var(--s-hairline) solid var(--s-rule);
    scroll-snap-align: start; isolation: isolate;
    transition: border-color var(--s-dur) var(--s-ease);
}
.nw-sheet-art { position: absolute; inset: -6% 0; }
.nw-sheet-art picture { display: block; width: 100%; height: 100%; }
.nw-sheet-art img { width: 100%; height: 100%; object-fit: cover; }
.nw-sheet-rim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, var(--s-veil-soft) 35%, var(--s-cyan-wash) 47%, var(--s-cyan-haze) 53%, var(--s-veil-soft) 65%);
    transform: translateX(-110%);
    transition: transform var(--s-dur-sweep) var(--s-ease-sweep);
}
.nw-sheet:hover, .nw-sheet.is-lit { border-color: var(--s-cyan); }
.nw-sheet:hover .nw-sheet-rim, .nw-sheet.is-lit .nw-sheet-rim { transform: translateX(110%); }
.nw-sheet-body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 64px clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px);
    background: linear-gradient(180deg, var(--s-scrim-clear), var(--s-scrim) 42%);
}
.nw-sheet-tag { color: var(--s-red-text); }
.nw-sheet-code { font-size: clamp(2.4rem, 4.2vw, 3.6rem); margin: 8px 0 12px; }
.nw-sheet-name { display: grid; gap: 2px; font-size: var(--s-size-name); }
.nw-sheet-name span:first-child { font-weight: var(--s-weight-600); color: var(--s-text); }
.nw-sheet-name span:last-child { color: var(--s-muted); }
.nw-sheet-quote { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--s-cyan); color: var(--s-steel); font-size: var(--s-size-quote); line-height: var(--s-leading-150); }

/* ── 4 · In cinemas: a two-column poster ──────────────────────── */
.nw-cinemas {
    padding: var(--s-section-tight) var(--s-gutter);
    max-width: var(--s-max); margin-inline: auto;
}
.nw-cinemas-grid { display: grid; gap: 28px; }
.nw-date { display: grid; justify-items: start; }
.nw-date-day { font-size: clamp(8rem, 34vw, 22rem); line-height: var(--s-leading-76); color: var(--s-text); font-variant-numeric: tabular-nums; }
.nw-date-month { font-size: clamp(2rem, 6vw, 4.6rem); color: var(--s-red-text); letter-spacing: var(--s-track-0p12); margin-top: 10px; }
@media (min-width: 900px) {
    .nw-cinemas-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }
    /* Two rows: the date beside the headline, the formats beside the figures. No column runs empty. */
    .nw-date-col { grid-column: 1 / span 5; grid-row: 1; border-right: var(--s-hairline) solid var(--s-rule); align-self: stretch; }
    .nw-date-day { font-size: clamp(12rem, 25vw, 24rem); }
    .nw-cinemas-main { display: contents; }
    .nw-cinemas-copy { grid-column: 6 / -1; grid-row: 1; padding-left: clamp(24px, 3vw, 48px); align-self: end; }
    .nw-specs { grid-column: 6 / -1; grid-row: 2; margin-left: clamp(24px, 3vw, 48px); }
    .nw-formats { grid-column: 1 / span 5; grid-row: 2; margin-top: clamp(40px, 5vw, 64px); padding-right: clamp(24px, 3vw, 48px); border-right: var(--s-hairline) solid var(--s-rule); }
}
.nw-specs {
    list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: var(--s-hairline) solid var(--s-rule-strong);
}
.nw-spec { display: grid; gap: 12px; align-content: start; padding: 22px 16px 26px; border-bottom: var(--s-hairline) solid var(--s-rule); }
.nw-spec:nth-child(odd) { padding-left: 0; }
.nw-spec:nth-child(even) { border-left: var(--s-hairline) solid var(--s-rule); padding-left: 20px; }
.nw-spec-value { display: flex; align-items: baseline; gap: 6px; font-size: clamp(2.6rem, 5vw, 4.4rem); font-variant-numeric: tabular-nums; }
.nw-spec-unit { font-size: var(--s-size-0p32); color: var(--s-cyan); letter-spacing: var(--s-track-0p08); }
.nw-spec-label { color: var(--s-muted); }
.nw-formats { display: grid; gap: 18px; margin-top: clamp(36px, 4.5vw, 56px); }
.nw-formats-title { color: var(--s-steel); }
.nw-format-list { display: grid; gap: 0; }
.nw-format { display: grid; gap: 8px; padding: 18px 0; border-top: var(--s-hairline) solid var(--s-rule); }
.nw-format dt { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.nw-format dd { color: var(--s-muted); max-width: 40ch; }

.nw-advisory {
    margin-top: clamp(36px, 4.5vw, 56px); padding: 18px 0;
    border-top: var(--s-hairline) solid var(--s-rule-strong); border-bottom: var(--s-hairline) solid var(--s-rule);
    color: var(--s-muted); font-size: var(--s-size-legal); line-height: var(--s-leading-155);
}

/* ── 5 · Tickets: the city, lit ──────────────────────────────────── */
.nw-tickets {
    position: relative; overflow: hidden;
    min-height: 100vh; min-height: 100svh;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-content: start;
    padding: clamp(48px, 9vw, 150px) var(--s-gutter) 44vh;
    background:
        radial-gradient(90% 55% at 50% 100%, var(--s-horizon-glow), var(--s-veil-soft) 70%),
        linear-gradient(180deg, var(--s-sky-top), var(--s-sky-mid) 50%, var(--s-sky-low));
}
.nw-tickets-city .nw-city-layer--far { height: 58%; }
.nw-tickets-city .nw-city-layer--mid { height: 46%; }
.nw-tickets-city .nw-city-layer--near { height: 32%; }
.nw-tickets-city .nw-city-layer--mid::after { opacity: 0.85; }
.nw-tickets-city .nw-city-layer--near::after { opacity: 0.7; }
/* Cables strung between real rooftops: same 2400x700 space and mask mapping as the mid layer. */
.nw-strands { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; }
.nw-strands--core { filter: drop-shadow(0 0 4px var(--s-cyan)); }
.nw-strands-layer {
    position: absolute; inset: 0; background: var(--s-cyan-core);
    -webkit-mask: url("img/strands-core.svg") center bottom / auto 100% repeat-x;
    mask: url("img/strands-core.svg") center bottom / auto 100% repeat-x;
}
.nw-strands-layer--glow {
    background: var(--s-cyan); opacity: 0.22;
    -webkit-mask-image: url("img/strands-glow.svg"); mask-image: url("img/strands-glow.svg");
}
.nw-tickets-card { position: relative; z-index: 2; grid-column: 1 / -1; max-width: 38rem; }
@media (min-width: 900px) {
    .nw-tickets-card { grid-column: 2 / span 6; }
    /* The headline starts within a frame of the advisory; the skyline climbs behind it, so the band is never empty sky. */
    .nw-tickets { padding-top: clamp(40px, 4vw, 64px); padding-bottom: 30vh; background: radial-gradient(90% 55% at 50% 100%, var(--s-horizon-glow), var(--s-veil-soft) 70%), linear-gradient(180deg, var(--s-bg) 0%, var(--s-sky-top) 12%, var(--s-sky-mid) 55%, var(--s-sky-low)); }
    .nw-tickets-city .nw-city-layer--far { height: 86%; }
    .nw-tickets-city .nw-city-layer--mid { height: 64%; }
    .nw-tickets-city .nw-strands { height: 64%; }
    .nw-tickets-city .nw-city-layer--near { height: 40%; }
    .nw-cinemas { padding-bottom: clamp(16px, 2vw, 32px); }
    .nw-tickets-card::before {
        content: ""; position: absolute; z-index: -1; inset: -80px -140px -90px -100px; pointer-events: none;
        background: radial-gradient(closest-side, var(--s-bg-deep) 60%, transparent); opacity: 0.9;
    }
}
.nw-form { margin-top: 36px; display: grid; gap: 10px; }
.nw-label { color: var(--s-steel); }
.nw-form-row { display: grid; gap: 10px; }
.nw-input {
    width: 100%; min-height: 52px; padding: 0 16px;
    background: var(--s-bg); color: var(--s-text);
    border: var(--s-hairline) solid var(--s-rule-strong); border-radius: var(--s-radius);
    font: var(--s-weight-400) var(--s-size-input)/var(--s-leading-120) var(--s-font-body);
    -webkit-appearance: none; appearance: none;
    transition: border-color var(--s-dur-fast) var(--s-ease);
}
.nw-input::placeholder { color: var(--s-muted); opacity: 1; }
.nw-input:focus { border-color: var(--s-cyan); }
.nw-form-row .nw-btn { min-height: 52px; }
@media (min-width: 560px) { .nw-form-row { grid-template-columns: 1fr auto; } }
.nw-note--form { margin-top: 4px; }
.nw-note--form.is-error { color: var(--s-red-text); }

/* ── 6 · Billing block ───────────────────────────────────────────── */
.nw-foot {
    padding: clamp(64px, 9vw, 120px) var(--s-gutter) 36px;
    background: var(--s-bg-deep); border-top: var(--s-hairline) solid var(--s-rule);
    text-align: center;
}
.nw-billing {
    max-width: 58rem; margin: 0 auto;
    font: var(--s-weight-600) var(--s-step-billing)/var(--s-leading-145) var(--s-font-display);
    letter-spacing: var(--s-track-0p1); text-transform: uppercase; color: var(--s-muted);
    text-align: center; text-wrap: balance;
}
.nw-credit { display: inline; }
.nw-credit::after { content: "  "; white-space: pre; }
.nw-credit--title { display: block; margin: 10px 0 8px; font-size: clamp(2.6rem, 8vw, 6rem); color: var(--s-text); letter-spacing: var(--s-track-0p02); }
.nw-credit--title::after { content: none; }
.nw-legal { max-width: 60ch; margin: 36px auto 0; color: var(--s-muted); font-size: var(--s-size-legal); line-height: var(--s-leading-160); }
.nw-foot-row {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
    max-width: var(--s-max); margin: 48px auto 0; padding-top: 20px;
    border-top: var(--s-hairline) solid var(--s-rule); color: var(--s-muted); font-size: var(--s-size-legal);
}
.nw-top { color: var(--s-steel); text-underline-offset: 4px; padding: 8px 0; }
.nw-top:hover { color: var(--s-cyan); }

/* ── Reduced motion: a designed still, never a broken one ────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .nw-wire-spark, .nw-cue, .nw-actions .nw-cue { display: none; }
    .nw-cue-line { transform: none; }
    .nw-sheet.is-lit .nw-sheet-rim, .nw-sheet:hover .nw-sheet-rim { transform: translateX(-110%); }
}