/* ==========================================================================
   Kattegat Studios — tokens
   Suite grey   #CBCDC8  page surround (calibrated grading-suite wall)
   Panel grey   #E3E5E0  raised surfaces on the surround
   Kattegat     #0C2427  ink: the deep strait
   Sea          #234A4F  secondary ink, machine work, done states
   Graphite     #3E4644  meta text
   Tally        #C42A15  the ONE accent: only where a human acts
   Monitor      #0F1718  product UI chrome
   ========================================================================== */
:root {
  --surround: #CBCDC8;
  --panel: #E3E5E0;
  --ink: #0C2427;
  --sea: #234A4F;
  --graphite: #3E4644;
  --tally: #C42A15;
  --tally-ink: #FFF4F0;
  --rule: rgba(12, 36, 39, .16);

  --mon: #0F1718;
  --mon-2: #172223;
  --mon-3: #213031;
  --mon-line: #2A3a3b;
  --mon-text: #DCE3E0;
  --mon-dim: #8E9E9B;

  --f-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, Menlo, monospace;

  --s-h1: clamp(2.9rem, 7vw, 6.6rem);
  --s-h2: clamp(2.3rem, 5vw, 4.6rem);
  --s-h3: clamp(1.35rem, 2vw, 1.75rem);
  --s-lede: clamp(1.08rem, 1.35vw, 1.3rem);
  --s-mono: .8rem;

  --wrap: 1320px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --r: 6px;
  --sec: clamp(6rem, 12vw, 10.5rem);

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surround);
  color: var(--ink);
  font: 400 1rem/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
a { color: inherit; }
.mono { font-family: var(--f-mono); font-size: var(--s-mono); letter-spacing: .02em; }
.dim { color: var(--graphite); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.monitor :focus-visible, .closer :focus-visible { outline-color: #fff; }

.skip { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 50; border-radius: var(--r); }
.skip:focus { top: 1rem; }

/* ---------- type primitives ---------- */
.eyebrow {
  font-family: var(--f-mono); font-size: var(--s-mono); font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--sea);
  display: flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem;
}
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; }
h2 { font-size: var(--s-h2); line-height: .98; letter-spacing: -.03em; max-width: 20ch; text-wrap: balance; }
h3 { font-size: var(--s-h3); line-height: 1.12; letter-spacing: -.015em; }
.sub { font-size: var(--s-lede); color: var(--graphite); margin-top: 1.25rem; max-width: 40ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 .95rem/1 var(--f-display); letter-spacing: .005em; text-decoration: none;
  padding: .8rem 1.15rem; border-radius: var(--r); border: 0; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease;
}
.btn-tally { background: var(--tally); color: var(--tally-ink); }
.btn-tally::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--tally-ink); box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.btn-tally:hover { background: #A8230F; }
.btn-line { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--panel); }
.btn-lg { font-size: 1.08rem; padding: 1.05rem 1.5rem; }
.link-quiet { font-weight: 500; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(203, 205, 200, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.nav-in { display: flex; align-items: center; gap: 2rem; height: 64px; }
.wordmark { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: -.02em; text-decoration: none; display: inline-flex; gap: .3rem; align-items: baseline; }
.wm-k { font-weight: 700; }
.wm-s { font-weight: 500; color: var(--sea); }
.nav nav { margin-left: auto; }
.nav-links { display: flex; gap: 1.8rem; font-size: .93rem; }
.nav-links a { text-decoration: none; color: var(--graphite); }
.nav-links a:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-copy { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.hero h1 { font-size: var(--s-h1); line-height: .9; letter-spacing: -.045em; font-weight: 600; }
.h1-b { color: var(--sea); }
.hero-side { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; align-items: center; margin-top: .6rem; }
.lede { font-size: var(--s-lede); line-height: 1.45; color: var(--graphite); }
.cta-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* ---------- graded frame placeholders ---------- */
.frame {
  --a: #9FB3BC; --b: #D8B590; --c: #2F4E57; --d: #18292D; --sil: #0B1517;
  position: relative; display: block; overflow: hidden; border-radius: 3px;
  --sx: 72%; --sy: 30%; --sr: 16%; --sun: rgba(255, 240, 214, .55); --hz: rgba(255, 244, 228, .45);
  background:
    radial-gradient(circle at var(--sx) var(--sy), var(--sun) 0, transparent var(--sr)),
    linear-gradient(180deg, transparent calc(52% - 1px), var(--hz) calc(52% - 1px) calc(52% + 1px), transparent calc(52% + 1px)),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.34)),
    linear-gradient(180deg, var(--a) 0%, var(--b) 52%, var(--c) 52%, var(--d) 100%);
  color: var(--sil);
}
.frame::after { content: ""; position: absolute; inset: 0; background: var(--grain); mix-blend-mode: overlay; opacity: .32; pointer-events: none; }
.g-dawn  { --a: #8FA6B2; --b: #D9B48F; --c: #34535B; --d: #16282C; --sil: #0E1A1D; --sx: 22%; --sy: 50%; --sr: 14%; --sun: rgba(255, 226, 184, .9); }
.g-noon  { --a: #B9CDD0; --b: #E4DDC9; --c: #6A8C86; --d: #33504C; --sil: #1F3230; --sx: 80%; --sy: 14%; --sr: 15%; --sun: rgba(255, 255, 246, .85); }
.g-tung  { --a: #2E1C12; --b: #B06A32; --c: #573620; --d: #1F130C; --sil: #140B06; --sx: 18%; --sy: 28%; --sr: 24%; --sun: rgba(255, 196, 122, .75); --hz: rgba(255, 200, 140, .35); }
.g-storm { --a: #3A5260; --b: #8AA4AE; --c: #22383C; --d: #0D1A1C; --sil: #020506; --sx: 76%; --sy: 18%; --sr: 26%; --sun: rgba(214, 232, 244, .6); --hz: rgba(220, 236, 244, .6); }
.g-dusk  { --a: #3C3048; --b: #C77252; --c: #2A2938; --d: #121220; --sil: #0A0A12; --sx: 30%; --sy: 50%; --sr: 13%; --sun: rgba(255, 184, 140, .9); }
.g-steel { --a: #8A9195; --b: #B5B3A9; --c: #4A4F50; --d: #262A2B; --sil: #191C1D; --sx: 50%; --sy: 10%; --sr: 45%; --sun: rgba(255, 255, 255, .25); }
.g-steel2{ --a: #6E767A; --b: #9EA39E; --c: #3C4344; --d: #1F2324; --sil: #121516; --sx: 40%; --sy: 15%; --sr: 40%; --sun: rgba(255, 255, 255, .2); }
.g-pastel { --a: #F2CDBE; --b: #F5E3AE; --c: #8FC7C1; --d: #4F9E9B; --sil: #2D5E5C; --sx: 82%; --sy: 18%; --sr: 11%; --sun: rgba(255, 248, 214, .95); }
.g-pastel2{ --a: #C9DDEA; --b: #EADCF0; --c: #A7CFA2; --d: #5E9A70; --sil: #2F4F3A; --sx: 16%; --sy: 20%; --sr: 11%; --sun: rgba(255, 252, 230, .9); }
.g-pastel3{ --a: #F6E4C4; --b: #F8EED8; --c: #9DB9D6; --d: #5878A0; --sil: #2C3E57; --sx: 70%; --sy: 22%; --sr: 11%; --sun: rgba(255, 236, 190, .9); }
.g-ad    { --a: #F0B03A; --b: #F7E1A4; --c: #1F3B57; --d: #0E2135; --sil: #071321; --sx: 26%; --sy: 30%; --sr: 14%; --sun: rgba(255, 246, 210, .9); }
.g-ad2   { --a: #1F3B57; --b: #4F7896; --c: #F0B03A; --d: #B3781C; --sil: #071321; --sx: 74%; --sy: 24%; --sr: 12%; --sun: rgba(255, 220, 150, .6); }

.frame svg { position: absolute; fill: currentColor; }

/* ==========================================================================
   Monitor (hero product UI)
   ========================================================================== */
.monitor {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  background: var(--mon); color: var(--mon-text);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(12, 36, 39, .55), 0 0 0 1px rgba(12,36,39,.4);
  font-size: .9rem;
}
.mon-bar { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--mon-line); font-family: var(--f-mono); font-size: .75rem; letter-spacing: .03em; }
.mon-bar .dim { color: var(--mon-dim); }
.mon-tc { margin-left: auto; color: var(--mon-dim); font-variant-numeric: tabular-nums; }
.mon-pause { font: inherit; color: var(--mon-text); background: var(--mon-3); border: 1px solid var(--mon-line); border-radius: 4px; padding: .3rem .6rem; cursor: pointer; min-width: 4.6rem; }
.mon-pause:hover { background: var(--mon-line); }

/* stage ladder sits on top of the panel it governs */
.ladder { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--mon-line); counter-reset: st; }
.ladder li { position: relative; }
.ladder li + li { border-left: 1px solid var(--mon-line); }
.ladder button {
  width: 100%; display: flex; align-items: center; gap: .55rem; padding: .85rem 1rem;
  background: transparent; color: var(--mon-dim); border: 0; cursor: pointer;
  font: 500 .86rem/1 var(--f-display); text-align: left;
}
.ladder button::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.ladder li.is-gate button::after { content: "Gate"; margin-left: auto; font-family: var(--f-mono); font-size: .75rem; font-weight: 400; letter-spacing: .04em; text-transform: lowercase; color: var(--mon-dim); }
.ladder button:hover { color: var(--mon-text); }
.ladder li.is-gate:not(.done):not(.now) button::before { border-color: rgba(196,42,21,.75); }
.ladder li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.ladder li.done button { color: #9DB8B4; }
.ladder li.done button::before { background: #5F8F8A; border-color: #5F8F8A; }
.ladder li.now button { color: #fff; }
.ladder li.now button::before { background: #fff; border-color: #fff; }
.ladder li.now::after { background: #fff; }
.monitor[data-gate="wait"] .ladder li.now button::before { background: var(--tally); border-color: var(--tally); box-shadow: 0 0 0 4px rgba(196,42,21,.25); }
.monitor[data-gate="wait"] .ladder li.now::after { background: var(--tally); }

.mon-body { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.mon-media { position: relative; aspect-ratio: 16 / 9.4; background: #0A1112; border-right: 1px solid var(--mon-line); overflow: hidden; }
.mon-panel { display: flex; flex-direction: column; min-height: 0; }
.panel-layers { position: relative; flex: 1; min-height: 15rem; }

.layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.monitor[data-stage="0"] .m0, .monitor[data-stage="0"] .p0,
.monitor[data-stage="1"] .m1, .monitor[data-stage="1"] .p1,
.monitor[data-stage="2"] .m2, .monitor[data-stage="2"] .p2,
.monitor[data-stage="3"] .m3, .monitor[data-stage="3"] .p3,
.monitor[data-stage="4"] .m4, .monitor[data-stage="4"] .p4,
.monitor[data-stage="5"] .m5, .monitor[data-stage="5"] .p5 { opacity: 1; visibility: visible; }

/* media 0: brief */
.m0 { display: grid; place-items: center; padding: 8%; background: radial-gradient(80% 70% at 30% 30%, #1B2B2D, #0A1112); }
.brief-line { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 2.7vw, 2.5rem); line-height: 1.12; letter-spacing: -.02em; color: #F1F4F2; max-width: 20ch; }
.caret { display: inline-block; width: .08em; height: .95em; background: var(--mon-text); margin-left: .05em; vertical-align: -.1em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* script page */
.m1 { display: grid; place-items: center; padding: 4% 8%; background: #0A1112; }
.page { width: 100%; max-width: 34rem; height: 100%; background: #E9EAE5; color: #1B2425; border-radius: 3px; padding: 6% 8%; font-family: var(--f-mono); font-size: clamp(.75rem, .9vw, .82rem); line-height: 1.6; overflow: hidden; }
.page.light { height: auto; max-width: none; }
.page p { margin-bottom: .55em; }
.page .sh { font-weight: 500; display: flex; gap: 1.2em; }
.page .sh b { font-weight: 500; color: #7B8584; }
.page .act i { display: block; height: .55em; margin: .45em 0; background: #C7CBC6; border-radius: 1px; }
.page .who { margin: 1em 0 0 36%; margin-bottom: 0; }
.page .say { margin-left: 22%; max-width: 56%; }

@keyframes pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* cut view */
.m4 { padding: 4%; }
.cutview { display: flex; flex-direction: column; gap: 4%; height: 100%; }
.cut-frame { flex: 1; min-height: 0; }
.tl { position: relative; display: grid; gap: 5px; padding: 8px 0; }
.tl-row { display: grid; grid-template-columns: 1.8rem 1fr; align-items: center; gap: 6px; }
.tl-k { font-family: var(--f-mono); font-size: .75rem; color: var(--mon-dim); }
.tl-t { display: flex; gap: 2px; height: 16px; }
.tl-t i { flex: var(--w) 1 0; border-radius: 2px; }
.tl-t { height: 20px; }
.tl-t i.c { height: 100%; background: #3A5459; position: relative; display: flex; align-items: center; padding-left: 5px; }
.tl-t i.c:nth-child(4), .tl-t i.c:nth-child(5) { background: #5B5340; }
.tl-t i.c b { font: 500 .75rem/1 var(--f-mono); color: #E6ECEA; }
.tl-t i.gap { background: transparent; }
.tl-t i.a { background: #2F5D5F; height: 100%; }
.tl-t i.a.m { background: #3C4F6B; }
.playhead { position: absolute; top: 0; bottom: 0; left: calc(1.8rem + 6px + (100% - 1.8rem - 6px) * var(--p, 0)); width: 2px; background: #fff; }

/* episode */
.m5 { padding: 0; }
.ep-frame { position: absolute; inset: 0; border-radius: 0; }
.title-card { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 2; color: #FBEFE6; }
.tc-show { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.tc-ep { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; margin-top: .9rem; opacity: .8; }
.player { position: absolute; left: 4%; right: 4%; bottom: 5%; z-index: 2; display: flex; align-items: center; gap: .8rem; }
.pl-bar { flex: 1; height: 3px; background: rgba(255,255,255,.25); border-radius: 2px; overflow: hidden; }
.pl-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: #fff; }
.pl-t { font-family: var(--f-mono); font-size: .75rem; color: #fff; }

/* panel content */
.mon-panel .layer { padding: 1.25rem 1.25rem 0; }
.pl-h { font: 600 1.05rem/1 var(--f-display); color: #fff; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.pl-h .dim { font-family: var(--f-mono); font-size: .75rem; font-weight: 400; color: var(--mon-dim); }
.monitor .rows li, .monitor .kv > div { display: flex; justify-content: space-between; align-items: center; padding: .62rem 0; border-top: 1px solid var(--mon-line); }
.monitor .rows .mono, .monitor .kv dd { font-family: var(--f-mono); font-size: .75rem; color: var(--mon-text); }
.monitor .dim { color: var(--mon-dim); }
.monitor .ok { color: #8FC0B8; }
.kv { margin: 0; }
.kv dt { color: var(--mon-dim); }
.kv dd { margin: 0; }
.monitor[data-stage="1"] .p1 .rows li, .monitor[data-stage="2"] .p2 .rows li { animation: rowin .4s both; }
.rows li:nth-child(2) { animation-delay: .15s !important; } .rows li:nth-child(3) { animation-delay: .3s !important; }
.rows li:nth-child(4) { animation-delay: .45s !important; } .rows li:nth-child(5) { animation-delay: .6s !important; }
@keyframes rowin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.bar { height: 4px; background: var(--mon-3); border-radius: 2px; overflow: hidden; margin: -.2rem 0 1rem; }
.bar i { display: block; height: 100%; width: 64%; background: #5F8F8A; transition: width .3s; }

/* fixed-size status slot */
.slot { position: relative; height: 4.25rem; border-top: 1px solid var(--mon-line); margin: 0; }
.run, .gate-mini { position: absolute; inset: 0; display: flex; align-items: center; gap: .7rem; padding: 0 1.25rem; transition: opacity .3s; }
.run { color: var(--mon-dim); font-family: var(--f-mono); font-size: .75rem; }
.spin { width: .8rem; height: .8rem; border: 1.5px solid var(--mon-dim); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.gate-mini { opacity: 0; background: #1E1513; }
.monitor[data-gate="wait"] .gate-mini, .monitor[data-gate="ok"] .gate-mini { opacity: 1; }
.monitor[data-gate="wait"] .run, .monitor[data-gate="ok"] .run { opacity: 0; }
.monitor[data-gate="ok"] .gate-mini { background: var(--mon-2); }
.gm-l { font: 600 .95rem/1 var(--f-display); color: #fff; }
.gm-btn { margin-left: auto; position: relative; width: 6.4rem; height: 2.2rem; border-radius: 5px; background: var(--tally); color: var(--tally-ink); font: 600 .85rem/2.2rem var(--f-display); text-align: center; transition: background-color .25s; }
.gm-btn > span { position: absolute; inset: 0; transition: opacity .2s; }
.gm-ok { opacity: 0; }
.monitor[data-gate="ok"] .gm-btn { background: #2F4C4D; color: #CFE3DF; }
.monitor[data-gate="ok"] .gm-wait { opacity: 0; }
.monitor[data-gate="ok"] .gm-ok { opacity: 1; }
.monitor[data-gate="ok"] .tally { background: #5F8F8A; box-shadow: none; animation: none; }

/* tally light: the signature. Red means a person is needed. */
.tally { width: .7rem; height: .7rem; border-radius: 50%; background: var(--tally); box-shadow: 0 0 0 4px rgba(196,42,21,.22), 0 0 14px rgba(196,42,21,.7); flex: none; animation: tally 1.6s ease-in-out infinite; }
@keyframes tally { 50% { box-shadow: 0 0 0 6px rgba(196,42,21,.12), 0 0 22px rgba(196,42,21,.9); } }

/* shipped strip */
.shipped { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.25rem; font-size: .88rem; color: var(--graphite); }
.sh-k { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sea); display: inline-flex; align-items: center; gap: .5rem; flex: none; }
.sh-k::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--sea); }
.shipped ul { display: flex; gap: 2rem; overflow-x: auto; scrollbar-width: none; }
.shipped li { white-space: nowrap; }
.shipped b { color: var(--ink); font-weight: 500; margin-right: .25rem; }
.shipped .mono { margin-left: .35rem; }

/* ==========================================================================
   Sections
   ========================================================================== */
.sec { padding: var(--sec) 0 0; }

/* enemy */
.versus { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1.5px solid var(--ink); }
.vs { padding: 1.6rem 0 0; display: flex; flex-direction: column; gap: 1.6rem; }
.vs-us { padding-left: clamp(1.5rem, 4vw, 3.5rem); border-left: 1px solid var(--rule); }
.vs-them { padding-right: clamp(1.5rem, 4vw, 3.5rem); }
.vs-k { font-family: var(--f-mono); font-size: var(--s-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--graphite); }
.vs-us .vs-k { color: var(--ink); }
.vs-verbs { font: 500 var(--s-h3)/1.25 var(--f-display); letter-spacing: -.015em; max-width: 22ch; }
.vs-them .vs-verbs { color: var(--graphite); }
.rolls { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; height: clamp(7rem, 12vw, 10rem); }
.rolls .frame { height: 100%; }
.rolls .r2 { transform: rotate(-2deg) translateY(6px); } .rolls .r3 { transform: rotate(1.5deg); } .rolls .r4 { transform: rotate(-1deg) translateY(-4px); }
.rolls b, .reel-l { position: absolute; left: .45rem; top: .4rem; z-index: 2; font: 400 .75rem/1 var(--f-mono); color: #fff; background: #0B1112; padding: .2rem .35rem; border-radius: 2px; }
.reel { position: relative; display: flex; gap: 2px; height: clamp(7rem, 12vw, 10rem); }
.reel .frame { flex: var(--w) 1 0; height: 100%; border-radius: 0; }
.reel .frame:first-child { border-radius: 3px 0 0 3px; } .reel .frame:nth-last-child(2) { border-radius: 0 3px 3px 0; }

/* stages tabs */
.tabs { display: flex; gap: .25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1.5px solid var(--ink); }
.tabs [role="tab"] {
  display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.2rem; margin-bottom: -1.5px;
  background: transparent; border: 0; border-bottom: 3px solid transparent; cursor: pointer;
  font: 600 1.05rem/1 var(--f-display); color: var(--graphite);
}
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tab-n { font-family: var(--f-mono); font-size: .75rem; font-weight: 400; color: var(--graphite); }
.tab-g { width: .45rem; height: .45rem; border-radius: 50%; background: var(--tally); }

.tabpanels { margin-top: clamp(2rem, 4vw, 3rem); }
.tp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.tp[hidden] { display: none; }
.tp:focus-visible { outline-offset: 8px; }
.tp-copy { padding-top: .5rem; }
.tp-copy p { color: var(--graphite); margin-top: 1rem; max-width: 30ch; font-size: 1.05rem; }
@media (prefers-reduced-motion: no-preference) { .tp:not([hidden]) .art { animation: rowin .35s ease both; } }

/* artefact = product UI card on the light side */
.art { background: var(--mon); color: var(--mon-text); border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(12,36,39,.6); font-size: .88rem; }
.art-top { display: flex; justify-content: space-between; padding: .75rem 1.1rem; border-bottom: 1px solid var(--mon-line); font-family: var(--f-mono); font-size: .75rem; }
.art .dim { color: var(--mon-dim); }
.art .ok { color: #8FC0B8; }
.art-body.two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.art-body.two > :first-child { padding: 1.1rem; border-right: 1px solid var(--mon-line); }
.art .side { display: flex; flex-direction: column; justify-content: space-between; padding: 1.1rem; gap: 1.2rem; }
.art .rows li, .art .kv > div { display: flex; justify-content: space-between; padding: .55rem 0; border-top: 1px solid var(--mon-line); }
.art .rows .mono, .art .kv dd { font-family: var(--f-mono); font-size: .75rem; }
.art .page.light { font-size: .75rem; }
.art-body.two > .page.light { width: auto; margin: 1.1rem; padding: 1.5rem 1.7rem; border-right: 0; }
.art-script .art-body.two { border-right: 0; }
.art-script .side { border-left: 1px solid var(--mon-line); }

/* gate card (shared) */
.gate { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "t n" ". m" "b b"; gap: .25rem .7rem; align-items: center; padding: .95rem; border-radius: 8px; background: #241816; border: 1px solid rgba(196,42,21,.4); color: var(--mon-text); }
.gate .tally { grid-area: t; }
.g-name { grid-area: n; font: 600 1rem/1.1 var(--f-display); color: #fff; }
.g-meta { grid-area: m; font-family: var(--f-mono); font-size: .75rem; color: #B69C96; }
.g-btns { grid-area: b; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .7rem; }
.g-btns span { text-align: center; border-radius: 5px; font: 600 .82rem/2.1rem var(--f-display); white-space: nowrap; }
.b-ghost { border: 1px solid #4A3936; color: #D8C6C2; }
.b-tally { background: var(--tally); color: var(--tally-ink); }

/* compact gate slot (tabs): fixed size, no layout shift */
.cslot { display: flex; align-items: center; gap: .7rem; height: 3.6rem; padding: 0 .7rem 0 .95rem; border-radius: 8px; background: #241816; border: 1px solid rgba(196,42,21,.45); }
.cs-l { font: 600 .95rem/1 var(--f-display); color: #fff; }
.cs-b { margin-left: auto; width: 6.6rem; height: 2.3rem; border-radius: 5px; background: var(--tally); color: var(--tally-ink); font: 600 .85rem/2.3rem var(--f-display); text-align: center; }


/* shot list */
.shotlist { width: 100%; border-collapse: collapse; }
.shotlist th { text-align: left; font-family: var(--f-mono); font-size: .75rem; font-weight: 400; color: var(--mon-dim); letter-spacing: .08em; text-transform: uppercase; padding: .7rem 1.1rem .5rem; }
.shotlist td { padding: .5rem 1.1rem; border-top: 1px solid var(--mon-line); }
.shotlist td:first-child { width: 7.5rem; }
.thumb { width: 6rem; aspect-ratio: 16 / 9; }

/* cut artefact */
.art-cut .cutview { gap: .8rem; }
.art-cut .cut-frame { aspect-ratio: 16 / 9; flex: none; }

/* episodes list */
.eplist li { display: grid; grid-template-columns: 6rem 4rem 1fr 4.5rem; gap: 1.1rem; align-items: center; padding: .7rem 1.1rem; border-top: 1px solid var(--mon-line); }
.eplist li:first-child { border-top: 0; }
.ep-th { aspect-ratio: 16/9; }
.ep-n { font: 600 .95rem/1 var(--f-display); color: #fff; }
.eplist .mono { text-align: right; }
.rollup { height: 10px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--n) - 3px), var(--mon) calc(100% / var(--n) - 3px) calc(100% / var(--n))),
              linear-gradient(90deg, #5F8F8A calc(100% * var(--done) / var(--n)), var(--mon-3) 0); }

/* consistency strip */
.strip { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.pf .big { aspect-ratio: 16 / 10; border-radius: 4px; }
.pf figcaption { margin-top: .8rem; font-size: .95rem; color: var(--graphite); display: flex; gap: .6rem; align-items: baseline; }
.pf figcaption b { font: 600 1.05rem/1 var(--f-display); color: var(--ink); white-space: nowrap; }
.lockline { margin-top: 1.6rem; display: flex; align-items: center; gap: .6rem; color: var(--sea); }
.lock-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--sea); }

/* gates track */
.track { position: relative; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2.4rem; }
.lane { height: 48px; border-radius: 4px; background:
  repeating-linear-gradient(90deg, rgba(45,87,92,.75) 0 2px, transparent 2px 9px),
  rgba(45,87,92,.12); }
.phases { position: absolute; left: 0; right: 0; top: 0; height: 2rem; }
.phases span { position: absolute; left: calc(var(--x) * 1%); font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sea); white-space: nowrap; }
.stops { position: relative; height: 15rem; }
.stop { position: absolute; left: calc(var(--x) * 1%); top: -48px; width: 15rem; transform: translateX(-50%); padding-top: calc(48px + 2.4rem); }
.stop::before { content: ""; position: absolute; left: 50%; top: -10px; bottom: calc(100% - 48px - 2.4rem); width: 3px; margin-left: -1.5px; background: var(--tally); border-radius: 2px; }
.stop::after { content: ""; position: absolute; left: 50%; top: calc(48px + 2.4rem - 6px); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--tally); }
.stop:last-child { transform: translateX(-88%); }
.stop:last-child::before, .stop:last-child::after { left: 88%; }
.stop .gate { box-shadow: 0 24px 40px -26px rgba(12,36,39,.7); }


/* pricing */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.tier { background: var(--panel); border-radius: 10px; padding: 1.75rem; display: flex; flex-direction: column; gap: .4rem; border: 1px solid var(--rule); }
.tier h3 { font-size: 1rem; font-family: var(--f-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--sea); }
.price { display: flex; align-items: baseline; gap: .5rem; margin-top: 1.6rem; }
.price b { font: 600 clamp(2.6rem, 4vw, 3.6rem)/1 var(--f-display); letter-spacing: -.04em; }
.from { font-family: var(--f-mono); font-size: var(--s-mono); color: var(--graphite); }
.unit { color: var(--graphite); font-size: 1rem; }
.tier-main .unit, .tier-main .from { color: #B9C7C4; }
.tier ul { margin: 1.6rem 0 2rem; border-top: 1px solid var(--rule); }
.tier li { padding: .7rem 0; border-bottom: 1px solid var(--rule); display: flex; gap: .7rem; align-items: center; }
.tier li::before { content: ""; width: .7rem; height: .4rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px); flex: none; opacity: .7; }
.tier .btn { margin-top: auto; width: 100%; }
.tier-main { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.tier-main h3 { color: #8FB5B0; }
.tier-main ul, .tier-main li { border-color: rgba(227,229,224,.16); }
.tier-main :focus-visible { outline-color: #fff; }

/* closer */
.closer { margin-top: var(--sec); padding: clamp(5rem, 10vw, 8.5rem) 0; background: var(--ink); color: var(--panel); }
.closer h2 { max-width: 14ch; color: #F1F3EF; }
.closer .eyebrow { color: #A9C4C0; }
.pitch { display: flex; gap: .6rem; margin-top: clamp(2rem, 4vw, 3rem); max-width: 54rem; background: #132F33; border: 1px solid #2B4B4F; border-radius: 10px; padding: .5rem; }
.pitch input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font: 500 clamp(1rem, 1.5vw, 1.25rem)/1.3 var(--f-display); padding: .8rem 1rem; }
.pitch input::placeholder { color: #7F9C9A; }
.pitch input:focus { outline: none; }
.pitch:focus-within { border-color: #8FB5B0; }

/* footer */
.foot { background: var(--ink); color: #9FB0AD; border-top: 1px solid #22403F; }
.foot-in { display: flex; align-items: center; gap: 2rem; padding-top: 1.6rem; padding-bottom: 1.6rem; }
.foot .wordmark { color: #E3E5E0; font-size: 1rem; }
.foot .wm-s { color: #8FB5B0; }
.foot-links { display: flex; gap: 1.5rem; margin-left: auto; font-size: .88rem; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: #fff; }
.foot :focus-visible { outline-color: #fff; }
.foot .dim { color: #A9BAB7; }


/* ==========================================================================
   Rendered shots (three.js). The canvas sits on its graded fallback frame.
   ========================================================================== */
.frame > canvas.cine, .viewer > canvas.cine { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
canvas.cine.on { opacity: 1; }
.frame:has(> canvas.cine.on)::after { display: none; }
.no-gl canvas.cine { display: none; }
.frame > b { position: absolute; left: .45rem; top: .4rem; z-index: 2; font: 400 .75rem/1 var(--f-mono); color: #fff; background: #0B1112; padding: .25rem .4rem; border-radius: 2px; }

/* hero: cast, shots, episode */
.m2 { padding: 5%; display: flex; align-items: center; background: #0A1112; }
.cast3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; width: 100%; }
.castcard { background: #ECEBE4; border-radius: 4px; padding: 6% 6% 0; display: flex; flex-direction: column; }
.castcard .tn svg { display: block; width: 100%; aspect-ratio: 64 / 76; }
.castcard figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; padding: .55rem 0 .6rem; border-top: 1px solid rgba(34,40,42,.2); font: 600 .9rem/1 var(--f-display); color: #22282A; }
.castcard figcaption .mono { font-size: .75rem; font-weight: 400; color: #4B5351; }
.m3 { padding: 3.5%; }
.shotgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2.5%; height: 100%; }
.shotgrid .frame.pending { background: var(--mon-2); }
.shotgrid .frame.pending::before { content: ""; position: absolute; inset: 40% 46%; border: 2px solid var(--mon-dim); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
.monitor[data-stage="3"] .shotgrid .frame { animation: pop .5s both; }
.shotgrid .frame:nth-child(2) { animation-delay: .45s !important; } .shotgrid .frame:nth-child(3) { animation-delay: .9s !important; }
.shotgrid .frame:nth-child(4) { animation-delay: 1.35s !important; } .shotgrid .frame:nth-child(5) { animation-delay: 1.8s !important; }
.shotgrid .frame:nth-child(6) { animation-delay: 2.1s !important; }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.cut-frame { position: relative; }
.monitor.titled[data-stage="5"] .title-card { animation: titleout .9s ease 2.8s forwards; }
@keyframes titleout { to { opacity: 0; } }
.title-card { background: radial-gradient(70% 60% at 50% 50%, rgba(0,0,0,.35), transparent); }

/* clip tool vs Kattegat */
.rolls .frame, .reel .frame { overflow: hidden; }
.reel .frame:last-of-type { border-radius: 0 3px 3px 0; }

/* tabs */
.tabs-wrap { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.tabs-wrap .tabs { margin-top: 0; }

/* segmented control (in mock top bars) */
.seg { display: inline-flex; gap: 2px; background: var(--mon-3); border-radius: 6px; padding: 2px; }
.seg button { font: 500 .8rem/1 var(--f-display); color: var(--mon-dim); background: transparent; border: 0; border-radius: 4px; padding: .45rem .7rem; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--mon-line); color: #fff; }
.seg button:hover { color: #fff; }
.art-top:has(.seg) { align-items: center; padding-top: .5rem; padding-bottom: .5rem; }

/* storyboard */
.sb { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--mon-line); }
.sb-panel { background: #ECEBE4; color: #22282A; padding: .7rem .7rem .8rem; display: flex; flex-direction: column; gap: .45rem; }
.sb-frame { position: relative; aspect-ratio: 16 / 9; background: #F6F4EC; border: 1.5px solid #22282A; overflow: hidden; }
.sb-sketch { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-render { position: absolute; inset: 0; border-radius: 0; opacity: 0; transition: opacity .35s ease; }
.art-board[data-view="render"] .sb-render { opacity: 1; }
@media (hover: hover) { .sb-panel:hover .sb-render { opacity: 1; } }
.sb-meta { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: #3E4644; }
.sb-meta b { font: 700 1rem/1 var(--f-display); color: #22282A; min-width: 1rem; }
.sb-meta .chip { font: 500 .75rem/1 var(--f-mono); background: #22282A; color: #ECEBE4; padding: .2rem .35rem; border-radius: 2px; }
.sb-meta .mono { margin-left: auto; font-size: .75rem; }
.sb-line { font-size: .85rem; line-height: 1.35; color: #22282A; }
.sb-line b { font: 500 .75rem/1 var(--f-mono); letter-spacing: .04em; margin-right: .35rem; }

/* cast tab */
.castrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; padding: 1.1rem; align-content: center; }
.castrow .castcard { padding: .7rem .7rem 0; }

/* shot list thumbs */
.thumb { position: relative; display: block; width: 6.4rem; aspect-ratio: 16 / 9; }

/* episode list thumbs */
.ep-th { position: relative; display: block; }
.ep-th.pending { background: var(--mon-2); }

/* model sheet */
.art-sheet { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.sheet { background: #ECEBE4; color: #22282A;
  background-image: linear-gradient(rgba(34,40,42,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,40,42,.05) 1px, transparent 1px);
  background-size: 24px 24px; }
.sheet-c { padding: clamp(1rem, 2.4vw, 1.75rem); }
.sheet-c[hidden] { display: none; }
.sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1.5px solid #22282A; padding-bottom: .9rem; }
.sc-name { font: 700 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--f-display); letter-spacing: -.02em; }
.sc-meta { margin-top: .45rem; color: #3E4644; }
.stamp { transform: rotate(-4deg); border: 2px solid var(--sea); outline: 1px solid var(--sea); outline-offset: 2px; color: var(--sea); padding: .35rem .7rem; display: grid; text-align: center; border-radius: 3px; flex: none; }
.stamp b { font: 700 1rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .14em; }
.stamp span { font: 500 .75rem/1.2 var(--f-mono); }
.sc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); grid-template-areas: "turn turn height" "expr ward pal"; gap: 1.4rem 2rem; margin-top: 1.2rem; }
.sc-turn { grid-area: turn; } .sc-height { grid-area: height; } .sc-expr { grid-area: expr; } .sc-ward { grid-area: ward; } .sc-pal { grid-area: pal; }
.sc-k { font: 500 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: #3E4644; margin-bottom: .7rem; }
.row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.row4 > div, .row3 > div { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.tn svg { display: block; width: 100%; height: auto; }
.sc-turn .tn { width: 100%; aspect-ratio: 100 / 122; display: grid; align-items: end; }
.sc-turn .tn svg { max-height: 100%; }
.cap { font: 400 .8rem/1.2 var(--f-body); color: #3E4644; text-align: center; }
.cap b { font: 500 .75rem/1 var(--f-mono); color: #22282A; display: block; margin-bottom: .2rem; }
.sc-height svg { width: 100%; max-width: 260px; display: block; }
.sc-pal ul { list-style: none; display: grid; gap: .45rem; }
.sc-pal li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .6rem; align-items: center; font-size: .85rem; }
.sc-pal i { height: 1.6rem; border-radius: 3px; border: 1px solid rgba(34,40,42,.35); }
.sc-pal .mono { font-size: .75rem; color: #3E4644; }
.strip { margin-top: 1.25rem; }

/* grading suite */
.suite { margin-top: clamp(2.5rem, 5vw, 3.5rem); background: #0B1011; color: var(--mon-text); border-radius: 10px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(12,36,39,.6), 0 0 0 1px rgba(12,36,39,.5); }
.suite-bar { display: flex; justify-content: space-between; padding: .75rem 1.1rem; border-bottom: 1px solid var(--mon-line); font: 500 .8rem/1 var(--f-mono); }
.suite .dim { color: var(--mon-dim); }
.suite-main { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.viewer { position: relative; aspect-ratio: 16 / 9; background: #000; border-right: 1px solid var(--mon-line); overflow: hidden; }
.v-tag { position: absolute; top: .7rem; z-index: 3; font: 500 .75rem/1 var(--f-mono); color: #fff; background: #0B1112; padding: .3rem .45rem; border-radius: 2px; }
.v-l { left: .7rem; } .v-r { right: .7rem; }
.wipe-line { position: absolute; top: 0; bottom: 0; left: var(--wipe); width: 2px; margin-left: -1px; background: #fff; z-index: 2; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.wipe-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.4);
  background-image: linear-gradient(90deg, transparent 38%, #0B1112 38% 44%, transparent 44% 56%, #0B1112 56% 62%, transparent 62%); }
.wipe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }
.viewer:has(.wipe:focus-visible) .wipe-line::after { outline: 2px solid #fff; outline-offset: 3px; }
.suite-side { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.side-k { font: 500 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mon-dim); margin-bottom: .6rem; display: flex; align-items: center; gap: .7rem; }
.grades { display: grid; gap: 2px; }
.grades button { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; font: 500 .95rem/1 var(--f-display); color: var(--mon-text); background: transparent; border: 1px solid transparent; border-radius: 5px; padding: .5rem .55rem; cursor: pointer; }
.grades button:hover { background: var(--mon-2); }
.grades button[aria-checked="true"] { background: var(--mon-3); border-color: #3B4C4D; color: #fff; }
.grades i { width: 2.2rem; height: 1.2rem; border-radius: 2px; flex: none; background: linear-gradient(90deg, var(--a), var(--b)); }
.scope canvas { display: block; width: 100%; aspect-ratio: 480 / 200; background: #050708; border: 1px solid var(--mon-line); border-radius: 3px; }
.readout { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.readout div { background: var(--mon-2); border-radius: 4px; padding: .5rem .55rem; }
.readout dt { font-size: .75rem; color: var(--mon-dim); }
.readout dd { margin: .25rem 0 0; font: 500 .8rem/1 var(--f-mono); color: #fff; white-space: nowrap; }
.suite-eps { border-top: 1px solid var(--mon-line); padding: .9rem 1.1rem 1.1rem; }
.lockpill { font: 500 .75rem/1 var(--f-mono); text-transform: none; letter-spacing: .02em; color: #CFE3DF; background: #22393A; border-radius: 3px; padding: .3rem .45rem; }
.suite-eps ol { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.suite-eps li { display: grid; gap: .4rem; }
.suite-eps .frame { aspect-ratio: 16 / 9; }
.suite-eps li > b { font: 500 .75rem/1 var(--f-mono); color: var(--mon-dim); }


/* round-3 fixes */
.monitor[data-stage="5"] .run { visibility: hidden; }
.shotgrid { height: auto; grid-template-rows: none; align-content: center; }
.shotgrid .frame { aspect-ratio: 16 / 9; }
.m3 { display: flex; align-items: center; }
.m3 .shotgrid { width: 100%; }
.tl-t.sc { height: 16px; }
.tl-t.sc i { background: transparent; border-left: 2px solid var(--mon-dim); display: flex; align-items: center; padding-left: 5px; }
.tl-t.sc i b { font: 500 .75rem/1 var(--f-mono); color: var(--mon-dim); }
.no-gl .scope, .no-gl .wipe, .no-gl .wipe-line, .no-gl .v-l { display: none; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1080px) {
  .mon-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .tp { grid-template-columns: 1fr; }
  .stop { width: 13.5rem; }
  .sc-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "turn turn" "height expr" "ward pal"; }
  .suite-main { grid-template-columns: 1fr; }
  .viewer { border-right: 0; border-bottom: 1px solid var(--mon-line); }
  .suite-side { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .readout { grid-column: 1 / -1; }
}

/* ==========================================================================
   Mobile — restructured, not shrunk
   ========================================================================== */
@media (max-width: 720px) {
  :root { --sec: 5.5rem; }
  .nav-in { height: 56px; gap: 1rem; }
  .nav nav { display: none; }
  .nav .btn { margin-left: auto; padding: .65rem .9rem; font-size: .88rem; }

  .hero { padding-top: 2.5rem; }
  .hero h1 { font-size: clamp(2.6rem, 12.4vw, 3.6rem); line-height: .94; }
  .cta-row { width: 100%; }
  .cta-row .btn-lg { width: 100%; }
  .cta-row { gap: 1rem; }

  /* monitor: ladder becomes a compact progress rail; media stacks above panel */
  .monitor { margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); border-radius: 0; }
  .mon-tc { display: none; }
  .mon-pause { margin-left: auto; }
  .ladder { grid-template-columns: repeat(6, 1fr); }
  .ladder button { flex-direction: column; gap: .4rem; padding: .7rem .2rem; font-size: .75rem; text-align: center; }
  .ladder li.is-gate button::after { display: none; }
  .mon-body { grid-template-columns: 1fr; }
  .mon-media { border-right: 0; border-bottom: 1px solid var(--mon-line); aspect-ratio: 4 / 3; }
  .panel-layers { min-height: 13.5rem; }
  .mon-panel .layer { padding: 1rem 1rem 0; }
  .monitor .rows li:nth-child(n+4) { display: none; }
  .page { font-size: .75rem; padding: 7% 7%; }
  .m1 { padding: 5%; }
  .m2 { padding: 4%; }
  .shotgrid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .castcard figcaption .mono { display: none; }
  .brief-line { font-size: 1.55rem; }

  .shipped { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .shipped ul { flex-direction: column; gap: .35rem; }

  /* enemy: stack, "us" below "them" */
  .versus { grid-template-columns: 1fr; }
  .vs-them { padding-right: 0; padding-bottom: 2.4rem; }
  .vs-us { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .rolls { grid-template-columns: repeat(2, 1fr); height: auto; }
  .rolls .frame { aspect-ratio: 4 / 3; height: auto; }
  .reel { height: 6.5rem; }

  /* tabs: scrollable chips */
  .tabs-wrap { position: relative; margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); }
  .tabs-wrap::after { content: ""; position: absolute; right: 0; top: 0; bottom: 2px; width: 3rem; pointer-events: none; background: linear-gradient(90deg, rgba(203,205,200,0), var(--surround)); }
  .tabs { overflow-x: auto; scrollbar-width: none; gap: 0; padding: 0 var(--gut); scroll-snap-type: x proximity; scroll-padding: 0 var(--gut); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs [role="tab"] { padding: .85rem .6rem; font-size: .95rem; gap: .35rem; flex: none; scroll-snap-align: start; }
  .tab-n { display: none; }
  .art-body.two { grid-template-columns: 1fr; }
  .art-body.two > :first-child { border-right: 0; border-bottom: 1px solid var(--mon-line); }
  .shotlist th:nth-child(4), .shotlist td:nth-child(4) { display: none; }
  .shotlist td, .shotlist th { padding-left: .6rem; padding-right: .6rem; }
  .shotlist td:first-child { width: 4.6rem; }
  .thumb { width: 4rem; }
  .eplist li { grid-template-columns: 4rem 3.2rem 1fr; gap: .8rem; }
  .eplist .mono { display: none; }

  /* storyboard: a swipeable strip of panels */
  .sb { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sb-panel { scroll-snap-align: start; }
  .castrow { padding: .8rem; gap: .5rem; }
  .art-board .art-top > span:first-child .dim { display: none; }
  .castrow .castcard figcaption .mono { display: none; }
  /* model sheet: single column */
  .sc-head { align-items: center; }
  .sc-grid { grid-template-columns: 1fr; grid-template-areas: "turn" "expr" "ward" "height" "pal"; }
  .row4 { gap: .4rem; }
  /* suite */
  .suite { margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); border-radius: 0; }
  .suite-side { grid-template-columns: 1fr; }
  .grades { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .grades button { padding: .55rem .6rem; }
  .suite-eps ol { grid-template-columns: repeat(4, 1fr); }
  /* consistency: proof frames stack */
  .strip { grid-template-columns: 1fr; gap: 1rem; }
  .lockline { align-items: flex-start; line-height: 1.7; }
  .lock-dot { margin-top: .5rem; flex: none; }

  /* gates: the lane turns vertical; gates hang off it */
  .track { padding-top: 0; padding-left: 2.2rem; margin-top: 2.5rem; }
  .lane { position: absolute; left: 0; top: 0; bottom: 0; width: 26px; height: auto;
    background: repeating-linear-gradient(180deg, rgba(45,87,92,.75) 0 2px, transparent 2px 9px), rgba(45,87,92,.12); }
  .phases { display: none; }
  .stops { height: auto; display: grid; gap: 4.5rem; padding: 2.5rem 0; }
  .stop, .stop:last-child { position: relative; left: auto; top: auto; width: auto; transform: none; padding: 0; }
  .stop::before, .stop:last-child::before { left: -2.2rem; top: 1.2rem; bottom: auto; width: 2.2rem; height: 3px; margin: 0; }
  .stop::after, .stop:last-child::after { left: .9rem; top: 1rem; margin: 0; }
  .stop::after { display: none; }


  .tiers { grid-template-columns: 1fr; }
  .tier { padding: 1.4rem; }
  .tier ul { margin: 1.1rem 0 1.4rem; }
  .price { margin-top: 1rem; }
  .art-script .side { border-left: 0; }
  .pitch input { font-size: 1rem; }
  .tier-main { order: -1; }

  .pitch { flex-direction: column; }
  .pitch .btn { width: 100%; }

  .foot-in { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .foot-links { margin-left: 0; }
}

/* ==========================================================================
   Reduced motion: everything still, states still legible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .caret { display: none; }
}