/* Meridian — a film. Bone-white type on the picture, one flare colour, letterbox bars that carry the HUD. */
@font-face { font-family: 'Bebas Neue'; src: url(assets/fonts/BebasNeue-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow SC'; src: url(assets/fonts/BarlowSemiCondensed-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow SC'; src: url(assets/fonts/BarlowSemiCondensed-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow SC'; src: url(assets/fonts/BarlowSemiCondensed-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --ink: #050505;
  --bone: #f2ece0;
  --bone-rgb: 242, 236, 224;   /* the bone and flare colours as triplets, set from content.js */
  --flare-rgb: 255, 90, 31;
  --bone-70: rgba(var(--bone-rgb), .7);
  --bone-35: rgba(var(--bone-rgb), .35);
  --bone-16: rgba(var(--bone-rgb), .16);
  --flare: #ff5a1f;
  --display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --text: 'Barlow SC', 'Arial Narrow', Arial, sans-serif;
  --bar: 149px;          /* letterbox bar height, set by JS from the viewport */
  --cover: 0;            /* 0 = 2.39:1 open, 1 = bars closed to black */
  --film-length: 1600vh;   /* set by JS from content.film.lengthVh */
  --pad: 28px;
}
@media (max-width: 720px), (orientation: portrait) { :root { --bar: 56px; --pad: 16px; } }

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--bone); scroll-behavior: auto; }
body { margin: 0; font-family: var(--text); font-weight: 400; font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.fine, body.fine a, body.fine button { cursor: none; }
a { color: inherit; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--flare); color: var(--ink); padding: 8px 12px; z-index: 50; font-family: var(--display); letter-spacing: .08em; }
.skip:focus { left: 8px; }

/* ---------------------------------------------------------------- the stage */
#film { height: var(--film-length); position: relative; }
#stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--ink); }
#pano { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--ink) url(assets/stills/opening-1920.jpg) center / cover no-repeat; }
#pano.live { animation: fade-up 1.1s ease-out both; }
@keyframes fade-up { from { opacity: 0; } to { opacity: 1; } }
/* the first title tracks in once, on load; every later title tracks in with the scroll */
html[data-mode="film"] .card-opening .title { animation: track-in 1.8s cubic-bezier(.16, 1, .3, 1) .25s both; }
@keyframes track-in { from { letter-spacing: .5em; opacity: 0; clip-path: inset(0 40% 0 40%); } to { letter-spacing: .04em; opacity: 1; clip-path: inset(0 0 0 0); } }
html[data-mode="film"] .card-opening .kicker { animation: rise .9s ease-out 1.2s both; }
html[data-mode="film"] .card-opening .sub { animation: rise .9s ease-out 1.5s both; }
html[data-mode="film"] .card-opening .lede { animation: rise .9s ease-out 1.8s both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#picture { position: absolute; left: 0; right: 0; top: var(--bar); bottom: var(--bar); overflow: hidden; }

.bar { position: absolute; left: 0; right: 0; height: var(--bar); background: var(--ink); z-index: 6; }
.bar-top { top: 0; }
.bar-bottom { bottom: 0; }
/* the shutters: on a cut the black grows from the bars' inner edges; the HUD stays where it is */
.bar::after { content: ''; position: absolute; left: 0; right: 0; height: calc((50vh - var(--bar)) * var(--cover)); background: var(--ink); }
.bar-top::after { top: 100%; }
.bar-bottom::after { bottom: 100%; }
.hud { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 24px; align-items: end; padding: 0 var(--pad); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-70); white-space: nowrap; }
.bar-top .hud { bottom: 16px; }
.bar-bottom .hud { top: 18px; align-items: start; }
.hud > :nth-child(2), .hud > :nth-child(3) { text-align: center; }
.hud > :last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hud-brand { color: var(--bone); font-family: var(--display); font-size: 20px; letter-spacing: .14em; display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.hud-brand i { width: 10px; height: 10px; background: var(--flare); display: inline-block; }
.hud-coords, .hud-still { color: var(--bone); }
/* the reel: one link per chapter, the running one spelled out */
.reel { display: flex; justify-content: center; gap: 18px; min-width: 0; }
.reel a { display: inline-flex; align-items: baseline; gap: 8px; color: var(--bone-35); text-decoration: none; letter-spacing: .18em; transition: color .15s; }
.reel a b { font-weight: 500; font-variant-numeric: tabular-nums; }
.reel a span { display: none; color: var(--bone); }
.reel a.active { color: var(--bone); }
.reel a.active span { display: inline; }
.reel a:hover { color: var(--flare); }
.reel a:focus-visible { color: var(--flare); outline: 1px solid var(--flare); outline-offset: 5px; }
.hud-still { display: none; }
.hud-tc, .hud-fr { font-variant-numeric: tabular-nums; }
.progress { position: absolute; left: var(--pad); right: var(--pad); top: 6px; height: 2px; background: var(--bone-16); }
.progress i { display: block; height: 100%; width: 0; background: var(--flare); }
@media (max-width: 720px), (orientation: portrait) {
  .hud { grid-template-columns: 1fr auto; gap: 12px; font-size: 10px; letter-spacing: .14em; }
  .hud > :nth-child(3), .hud-lens, .hud-scene { display: none; }
  .hud > :nth-child(2) { text-align: right; }
  .reel { justify-content: flex-end; gap: 10px; }
  .reel a.active span { display: none; }
  .hud-brand { font-size: 16px; }
  .bar-top .hud { bottom: 12px; } .bar-bottom .hud { top: 12px; }
}

/* ---------------------------------------------------------------- foreground layers */
.fg { position: absolute; inset: -6% -10%; pointer-events: none; opacity: 0; will-change: transform; }
.fg svg { position: absolute; }
.ridge { left: -10%; bottom: 0; width: 120%; height: 30%; filter: blur(1.6px); }
.ridge path { fill: #030303; }
.rope, .guys { left: 50%; top: 5.4%; width: 41.7%; height: 22.3%; overflow: visible; }
.rope-core { fill: none; stroke: #0e0b09; stroke-width: 5; vector-effect: non-scaling-stroke; }
.rope-lay { fill: none; stroke: #4a3b31; stroke-width: 3; stroke-dasharray: 2.2 4.4; vector-effect: non-scaling-stroke; }
.rope-hi { fill: none; stroke: #6b5a4d; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; transform: translateY(-1.5px); }
.prusik { fill: none; stroke: #1a1410; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.sling { fill: none; stroke: var(--flare); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.biner { fill: none; stroke: #101010; stroke-width: 3.2; vector-effect: non-scaling-stroke; }
.gate { fill: none; stroke: #3a3a3a; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.nose { fill: none; stroke: #101010; stroke-width: 2; vector-effect: non-scaling-stroke; }
.guy { fill: none; stroke: #f2ece0; stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .85; }
.lock rect { fill: #0e0f13; }
.lock path { fill: none; stroke: #4a4f5c; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tail { fill: none; stroke: #f2ece0; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }

/* the route */
#route { position: absolute; left: 0; right: 0; bottom: 9%; height: 14%; width: 100%; pointer-events: none; overflow: visible; }
#route-path { fill: none; stroke: var(--bone-35); stroke-width: 1.2; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
#route-drawn { fill: none; stroke: var(--flare); stroke-width: 2; vector-effect: non-scaling-stroke; }
#route .waypoints circle { fill: var(--ink); stroke: var(--bone); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
#marker { position: absolute; left: 0; top: 0; pointer-events: none; transform: translate(-50%, -50%); }
#marker i { display: block; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 13px solid var(--flare); transform: translateY(-9px); filter: drop-shadow(0 0 6px rgba(var(--flare-rgb), .6)); }
#marker b { position: absolute; left: 12px; top: -22px; font-family: var(--display); font-size: 14px; letter-spacing: .12em; color: var(--flare); white-space: nowrap; }
#flare { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(120% 80% at 100% 50%, rgba(var(--flare-rgb), .9), rgba(var(--flare-rgb), .35) 40%, transparent 70%); mix-blend-mode: screen; }

/* ---------------------------------------------------------------- chapters and cards */
.chapter { position: absolute; inset: 0; pointer-events: none; }
.chapter.on { pointer-events: auto; }
.chapter .still { display: none; }
.card { position: absolute; left: var(--pad); right: var(--pad); bottom: 12%; max-width: 1200px; opacity: 0; will-change: transform, opacity; }
.card-opening { bottom: auto; top: 50%; transform: translateY(-50%); text-align: center; left: 0; right: 0; max-width: none; }
.kicker { display: flex; gap: 26px; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-70); }
.kicker span { position: relative; }
.kicker span + span::before { content: ''; position: absolute; left: -16px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--flare); }
.card-opening .kicker { justify-content: center; }
/* The display lines carry the customer's own brand name, which is the one field every
   project changes. They used to be `white-space: nowrap` at 19vw: a two-word name ran off both
   edges of the opening, and because the opening hides its own overflow the page reported no
   horizontal overflow at all while half the name was gone. Wrapping is now allowed as the
   floor -- seeing the whole name on two lines beats seeing half of it on one -- and main.js
   `fitDisplayText()` scales each line down so it normally still sits on one. */
.title { font-family: var(--display); font-weight: 400; font-size: clamp(64px, 11.5vw, 190px); line-height: .88; margin: 0; letter-spacing: var(--track, .04em); text-transform: uppercase; color: var(--bone); text-shadow: 0 2px 50px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .35); max-width: 100%; overflow-wrap: break-word; }
.card-opening .title { font-size: clamp(88px, 19vw, 330px); }
.sub { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 10px 0 0; font-family: var(--display); font-size: clamp(18px, 2vw, 30px); letter-spacing: .12em; color: var(--bone); }
.sub .dot { color: var(--flare); }
.card-opening .sub { justify-content: center; }
.lede { max-width: 560px; margin: 26px auto 0; font-size: 17px; line-height: 1.45; color: var(--bone-70); }
.slate-cue { position: absolute; left: var(--pad); bottom: 10%; margin: 0; display: flex; gap: 16px; align-items: baseline; font-size: 12px; letter-spacing: .22em; color: var(--bone-70); opacity: 0; }
.slate-cue strong { font-family: var(--display); font-size: 28px; letter-spacing: .1em; color: var(--flare); font-weight: 400; }

/* film slates: the dense info block */
.slate { position: absolute; right: 4%; bottom: 5%; width: min(560px, 47%); background: rgba(6, 6, 8, .84); border: 1px solid var(--bone-35); padding: 22px 26px 24px; opacity: 0; will-change: transform, opacity; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.clap { position: absolute; left: -1px; top: -1px; width: 130px; height: 20px; background: repeating-linear-gradient(135deg, var(--bone) 0 12px, var(--ink) 12px 24px); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.slate-head { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: 12px; margin: 10px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--bone-35); }
.slate-head small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .2em; color: var(--bone-70); }
.slate-head b { display: block; font-family: var(--display); font-size: 24px; letter-spacing: .06em; font-weight: 400; line-height: 1.1; }
.slate h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: .06em; line-height: 1; }
.slate h3 span { display: block; font-family: var(--text); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--flare); margin-top: 6px; }
.slate p { margin: 0 0 12px; font-size: 15px; line-height: 1.42; color: var(--bone); }
.spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; margin: 0 0 12px; padding: 10px 0; border-top: 1px solid var(--bone-16); border-bottom: 1px solid var(--bone-16); }
.spec div { display: flex; flex-direction: column; }
.spec dt { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-70); }
.spec dd { margin: 0; font-family: var(--display); font-size: 22px; letter-spacing: .04em; line-height: 1.1; }
.kit { margin: 0 0 16px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 13px; color: var(--bone-70); }
.kit li::before { content: '— '; color: var(--flare); }
/* the two slates of the last frame: wider, centred */
.slate-wide { width: min(880px, 78%); right: auto; left: calc(50% - min(440px, 39%)); bottom: 6%; }
.people { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.people li { display: flex; flex-direction: column; border-top: 1px solid var(--bone-16); padding-top: 8px; }
.people b { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: .05em; line-height: 1.05; }
.people span { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--flare); margin-top: 2px; }
.people em { font-style: normal; font-size: 13px; line-height: 1.35; color: var(--bone-70); margin-top: 4px; }
.kit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.kit-cols small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .2em; color: var(--bone-70); border-bottom: 1px solid var(--bone-16); padding-bottom: 6px; margin-bottom: 8px; }
.kitlist { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.35; color: var(--bone); }
.kitlist li { padding: 3px 0; }
.kitlist li::before { content: '— '; color: var(--flare); }

/* film-slate buttons: caps in a bordered bar with a running frame counter */
.cap { display: inline-flex; align-items: stretch; border: 2px solid var(--bone); color: var(--bone); background: transparent; text-decoration: none; font-family: var(--display); font-size: 19px; letter-spacing: .1em; line-height: 1; padding: 0; transition: background .12s, color .12s, border-color .12s; }
.cap > span { display: inline-flex; align-items: center; padding: 10px 14px; }
.cap .cap-arrow { background: var(--bone); color: var(--ink); font-size: 12px; padding: 10px 11px; transition: inherit; }
.cap .cap-fr { border-left: 2px solid var(--bone); font-family: var(--text); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--bone-70); font-variant-numeric: tabular-nums; min-width: 78px; justify-content: center; transition: inherit; }
.cap:hover, .cap:focus-visible { background: var(--flare); border-color: var(--flare); color: var(--ink); outline: none; }
.cap:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px var(--flare); }
.cap:hover .cap-arrow, .cap:focus-visible .cap-arrow { background: var(--ink); color: var(--flare); }
.cap:hover .cap-fr, .cap:focus-visible .cap-fr { border-color: var(--ink); color: var(--ink); }
.cap.primary { border-color: var(--flare); color: var(--flare); }
.cap.primary .cap-arrow { background: var(--flare); color: var(--ink); }
.cap.primary .cap-fr { border-color: var(--flare); }
button.cap { font: inherit; font-family: var(--display); font-size: 19px; letter-spacing: .1em; }

/* ---------------------------------------------------------------- the last frame */
.map { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1120px, 88%); margin: 0; padding: 14px 18px 10px; background: rgba(5, 5, 5, .5); border: 1px solid var(--bone-35); opacity: 0; will-change: transform, opacity; }
.map svg { width: 100%; height: auto; display: block; }
#map-route { fill: none; stroke: var(--flare); stroke-width: 2.5; stroke-linecap: round; }
.map-points circle { fill: var(--ink); stroke: var(--bone); stroke-width: 1.5; }
.map-points circle.last { fill: var(--flare); stroke: var(--flare); }
.map-points text { fill: var(--bone); font-family: var(--display); font-size: 17px; letter-spacing: .08em; }
.map-points text.m { fill: var(--bone-70); font-family: var(--text); font-weight: 600; font-size: 10px; letter-spacing: .16em; }
.map figcaption { display: flex; gap: 32px; justify-content: center; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--bone-16); font-family: var(--display); font-size: 22px; letter-spacing: .1em; }
.map figcaption span + span::before { content: '·'; color: var(--flare); margin-right: 32px; }

.board-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(920px, 90%); opacity: 0; will-change: transform, opacity; }
.board { width: 100%; border-collapse: collapse; background: rgba(5, 5, 5, .72); border: 1px solid var(--bone-35); font-family: var(--display); font-size: 28px; letter-spacing: .06em; }
.board caption { caption-side: top; display: flex; justify-content: space-between; padding: 10px 18px; background: var(--bone); color: var(--ink); font-size: 20px; letter-spacing: .14em; }
.board caption .live { font-family: var(--text); font-weight: 600; font-size: 12px; letter-spacing: .18em; align-self: center; font-variant-numeric: tabular-nums; }
.board caption .live::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--flare); margin-right: 8px; }
.board th { font-family: var(--text); font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--bone-70); text-align: left; padding: 12px 18px 8px; border-bottom: 1px solid var(--bone-35); }
.board td { padding: 10px 18px; border-bottom: 1px solid var(--bone-16); white-space: nowrap; }
.board tbody tr { opacity: 0; transform: translateX(-18px); }
.board td:nth-child(3), .board th:nth-child(3) { text-align: center; }
.board td:nth-child(5), .board th:nth-child(5) { text-align: right; color: var(--bone); }
.board td:last-child, .board th:last-child { text-align: right; padding-left: 0; width: 1%; }
.board .ask { display: inline-block; border: 1px solid var(--flare); color: var(--flare); padding: 3px 9px 2px; font-family: var(--text); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-decoration: none; transition: background .12s, color .12s; }
.board .ask i { font-style: normal; font-size: 8px; margin-left: 4px; }
.board .ask:hover, .board .ask:focus-visible { background: var(--flare); color: var(--ink); outline: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chip { display: inline-block; border: 1px solid var(--bone-70); padding: 3px 9px 2px; font-family: var(--text); font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--bone); }
.chip.warn { border-color: var(--flare); color: var(--flare); }
.chip.off { border-color: var(--bone-35); color: var(--bone-70); }
.actions { display: flex; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.board-note { margin: 14px 0 0; font-size: 13px; color: var(--bone-70); max-width: 560px; }

.credits { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.roll { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 0; list-style: none; text-align: center; font-family: var(--display); font-size: clamp(22px, 3vw, 38px); letter-spacing: .08em; line-height: 1.15; will-change: transform; }
.roll li { margin: 0 0 22px; }
.roll li.h { color: var(--flare); font-size: clamp(30px, 4.6vw, 56px); margin-bottom: 40px; }
.roll small { display: block; font-family: var(--text); font-size: 11px; font-weight: 600; letter-spacing: .24em; color: var(--bone-70); margin-bottom: 2px; }
.roll b { font-weight: 400; color: var(--flare); }

.endcard { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; opacity: 0; z-index: 7; pointer-events: none; }
.endcard-brand { margin: 0; font-family: var(--display); font-size: clamp(64px, 14vw, 240px); line-height: .9; letter-spacing: .1em; color: var(--bone); max-width: 100%; overflow-wrap: break-word; }
.endcard-line { margin: 0; display: flex; gap: 36px; font-size: 15px; font-weight: 600; letter-spacing: .26em; color: var(--flare); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the viewfinder pointer */
#finder { position: fixed; left: 0; top: 0; width: 150px; height: 92px; margin: -46px 0 0 -75px; pointer-events: none; z-index: 40; display: none; opacity: 0; transition: opacity .2s; will-change: transform; }
body.fine #finder { display: block; }
body.fine #finder.show { opacity: 1; }
.brackets { position: absolute; inset: 0; }
.brackets i { position: absolute; width: 16px; height: 16px; border: 1.5px solid var(--bone); }
.brackets i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.brackets i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.brackets i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.brackets i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.brackets .cross { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.brackets .cross::before, .brackets .cross::after { content: ''; position: absolute; background: var(--flare); }
.brackets .cross::before { left: 0; right: 0; top: 4.5px; height: 1px; }
.brackets .cross::after { top: 0; bottom: 0; left: 4.5px; width: 1px; }
.finder-text { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; display: flex; justify-content: space-between; gap: 6px; font-size: 9px; font-weight: 600; letter-spacing: .14em; color: var(--bone); white-space: nowrap; text-shadow: 0 1px 2px #000; }
.finder-text span:last-child { color: var(--flare); }
#finder.lock .brackets i { border-color: var(--flare); }

/* ---------------------------------------------------------------- phone: taller crops, stacked titles, slates as sheets */
@media (max-width: 720px), (orientation: portrait) {
  .card { bottom: 18%; }
  .title { font-size: clamp(56px, 19vw, 120px); }
  .card-opening .title { font-size: clamp(72px, 24vw, 160px); }
  .kicker { flex-direction: column; gap: 4px; font-size: 10px; }
  .kicker span + span::before { display: none; }
  .sub { font-size: 16px; }
  .lede { font-size: 14px; margin-top: 14px; padding: 0 8px; }
  .slate { right: 0; left: 0; bottom: 0; width: auto; padding: 14px 16px 16px; border-left: 0; border-right: 0; }
  .slate p { font-size: 13px; line-height: 1.35; }
  .slate h3 { font-size: 26px; }
  .slate-head { grid-template-columns: 1fr 1fr 1fr 1.6fr; gap: 6px; margin: 8px 0 10px; padding-bottom: 8px; }
  .slate-head b { font-size: 18px; }
  .spec { grid-template-columns: repeat(3, 1fr); gap: 6px 8px; padding: 8px 0; }
  .spec dd { font-size: 18px; }
  .kit { display: none; }
  .slate-wide { width: auto; left: 0; right: 0; bottom: 0; }
  .people { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .people b { font-size: 18px; } .people span { font-size: 9px; } .people em { display: none; }
  .kit-cols { gap: 0 12px; } .kitlist { font-size: 11px; } .kitlist li { padding: 2px 0; }
  .board .ask { font-size: 8px; padding: 2px 4px; letter-spacing: .08em; } .board .ask i { margin-left: 2px; }
  .slate-cue { bottom: 6%; }
  .rope, .guys { left: 34%; width: 58%; height: 16%; }
  .map { width: 94%; padding: 8px; }
  .map-points text { font-size: 22px; } .map-points text.m { font-size: 13px; }
  .map figcaption { font-size: 15px; gap: 12px; } .map figcaption span + span::before { margin-right: 12px; }
  .board-wrap { width: 96%; }
  .board { font-size: 15px; letter-spacing: .04em; } .board td { padding: 8px 5px; } .board th { padding: 8px 5px 6px; font-size: 8px; letter-spacing: .12em; }
  .board caption { font-size: 13px; padding: 6px 8px; letter-spacing: .08em; } .board caption .live { font-size: 10px; letter-spacing: .1em; }
  .board td:nth-child(3), .board th:nth-child(3) { display: none; }
  .chip { font-size: 9px; padding: 2px 5px; letter-spacing: .1em; }
  .actions { gap: 10px; }
  .cap, button.cap { font-size: 15px; }
  .cap > span { padding: 8px 10px; }
  .cap .cap-fr { display: none; }
  .board-note { font-size: 12px; }
  .roll li { margin-bottom: 14px; }
}

/* ---------------------------------------------------------------- reduced motion / no WebGL: still plates, the same film as a page */
html[data-mode="still"] #film { height: auto; }
html[data-mode="still"] #stage { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; }
html[data-mode="still"] .bar-top { order: -1; } html[data-mode="still"] #picture { order: 0; } html[data-mode="still"] .bar-bottom { order: 1; }
html[data-mode="still"] #pano, html[data-mode="still"] .fg, html[data-mode="still"] #route, html[data-mode="still"] #marker, html[data-mode="still"] #flare, html[data-mode="still"] .endcard, html[data-mode="still"] #finder { display: none; }
html[data-mode="still"] #picture { position: static; overflow: visible; }
html[data-mode="still"] .bar { position: relative; height: 64px; }
html[data-mode="still"] .bar::after { display: none; }
html[data-mode="still"] .bar-top .hud { bottom: auto; top: 22px; }
html[data-mode="still"] .bar-bottom { border-top: 1px solid var(--bone-16); }
html[data-mode="still"] .progress { display: none; }
html[data-mode="still"] .chapter { position: relative; inset: auto; pointer-events: auto; border-top: 1px solid var(--bone-16); }
html[data-mode="still"] .chapter .still { display: block; width: 100%; aspect-ratio: 2.39; object-fit: cover; }
html[data-mode="still"] .chapter .still.broken { visibility: hidden; }   /* the section keeps the world's tone under the title */
html[data-mode="still"] .card, html[data-mode="still"] .card-opening { position: absolute; opacity: 1; top: calc(100vw / 2.39 - 40px); bottom: auto; transform: translateY(-100%); text-align: left; left: var(--pad); right: var(--pad); }
html[data-mode="still"] .card-opening .title { font-size: clamp(64px, 11.5vw, 190px); }
html[data-mode="still"] .lede { margin-top: 12px; font-size: 15px; }
html[data-mode="still"] .card-opening .kicker, html[data-mode="still"] .card-opening .sub { justify-content: flex-start; }
html[data-mode="still"] .card-opening .lede { margin-left: 0; }
html[data-mode="still"] .title { --track: .04em; }
html[data-mode="still"] .slate-cue { display: none; }
html[data-mode="still"] .hud-still { display: inline; }
html[data-mode="still"] .slate, html[data-mode="still"] .slate-wide, html[data-mode="still"] .map, html[data-mode="still"] .board-wrap { position: relative; opacity: 1; transform: none; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: 1120px; margin: 28px var(--pad); pointer-events: auto; }
html[data-mode="still"] .credits { position: relative; inset: auto; padding: 60px var(--pad) 80px; border-top: 1px solid var(--bone-16); pointer-events: auto; }
html[data-mode="still"] .roll { position: static; transform: none; }
.noscript { margin: 40px var(--pad); font-size: 15px; color: var(--bone-70); max-width: 560px; }
@media (max-width: 720px), (orientation: portrait) {
  html[data-mode="still"] .chapter .still { aspect-ratio: 0.72; }
  html[data-mode="still"] .card, html[data-mode="still"] .card-opening { top: calc(100vw / 0.72 - 24px); }
}

/* A crossing name can wrap; dates, prices and the booking action stay together.
   This also bounds the table's intrinsic width in the narrow still-page column. */
@media (max-width: 420px) {
  .board caption { display: table-caption; text-align: left; }
  .board caption .live { float: right; }
  .board td:first-child { white-space: normal; overflow-wrap: anywhere; }
}