/* Operation Elsewhere. A boarding pass for one room.
   Hero: three fields (cobalt pass / live footage / pale spec sheet) joined by one rule.
   Roadmap: grain paper, a pinned 3D deck of stage cards. Follow: Swiss poster, signal bars forming an X.
   Type: NeoX Display (numerals, headlines; Bold only, never mixed with another weight) and STRK TYP128 Text (everything else: labels, metadata, controls, reading copy). */
@font-face { font-family: "NeoX Display"; src: url("/fonts/NeoXDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "STRK TYP128"; src: url("/fonts/STRK_TYP128-Text-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "STRK TYP128"; src: url("/fonts/STRK_TYP128-Text-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "STRK TYP128"; src: url("/fonts/STRK_TYP128-Text-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --cobalt: #4677F6;    /* ink on it 4.51:1 */
  --cobalt-d: #3A69EE;  /* overlays only */
  --sky: #3D8BF6;       /* ink on it 5.36:1 */
  --sky-d: #3482F1;
  --pale: #E7E8EC;
  --pale-2: #DADDE5;
  --paper: #EDEDEA;
  --lav: #E2E3EC;
  --ink: #0A1433;
  --ink-2: #26304F;
  --chart: #C6F04A;
  --signal: #EB2F52;    /* ink on it 4.36:1: large type only */
  --yellow: #FFD626;
  --hazard: #E8D35A;   /* game danger-zone stripe: chalky, muted */
  --floor: #3F6BD8;    /* game cobalt floor plate */
  --chalk: #EEEDE8;    /* game matte slabs */
  --yellow-hi: #FFE94A;
  --bracket: #2156F2;
  --strk: #FF5500;      /* the dev's handle: 5.7:1 on ink, so always set on an ink plate */
  --display: "NeoX Display", "Arial Narrow", system-ui, sans-serif;
  --text: "STRK TYP128", ui-monospace, Menlo, monospace;
  --body: "STRK TYP128", ui-monospace, Menlo, monospace;
  --pad: clamp(18px, 3.9vw, 56px);
  --rule-y: clamp(76px, 11vh, 108px);
  --fa: 37%;
  --fcw: 20%;
  /* type scale: label 11/.1em, micro 10/.12em, small 13, body 15, lede 17 */
  --ls: .1em; --ls-m: .12em;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--ink) var(--pale); }
body {
  margin: 0;
  background: var(--pale);
  color: var(--ink);
  font: 400 16px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  caret-color: var(--signal);
  accent-color: var(--ink);
}
::selection { background: var(--chart); color: var(--ink); }
/* On chartreuse or yellow surfaces the default pair vanishes: flip to ink with chartreuse text. */
.title .t2::selection, .title .t2 ::selection, .viewer-x::selection, .viewer-x ::selection, .draft::selection { background: var(--ink); color: var(--pale); }
/* OPERATION: is filtered to its rim; a painted highlight would be reduced to a bare frame and hide the letters, so it gets none */
.title .t1::selection { background: transparent; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
svg { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sq { display: inline-block; width: 9px; height: 9px; background: var(--ink); flex: none; }

/* Shared: label/value pairs, as printed on the pass */
.lv { margin: 0; }
.lv span { display: block; font: 700 11px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; }
.lv b { display: block; margin-top: 3px; font: 700 clamp(17px, 1.6vw, 23px)/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.kv { margin: 0; display: grid; gap: 16px; }
.kv div { min-width: 0; }
.kv dt { font: 700 11px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; }
.kv dd { margin: 4px 0 0; font: 700 18px/1.05 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.kv-row { grid-auto-flow: column; justify-content: start; gap: 16px 44px; }
.label { display: block; margin-bottom: 8px; font: 700 11px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; }

/* Registration marks */
.reg { position: absolute; width: 16px; height: 16px; pointer-events: none; z-index: 2; }
.reg-tl { left: 18px; top: 18px; border-left: 2px solid; border-top: 2px solid; }
.reg-tr { right: 18px; top: 18px; border-right: 2px solid; border-top: 2px solid; }
.reg-bl { left: 18px; bottom: 18px; border-left: 2px solid; border-bottom: 2px solid; }
.reg-br { right: 18px; bottom: 18px; border-right: 2px solid; border-bottom: 2px solid; }

/* Barcode + code */
.code { display: flex; flex-direction: column; gap: 6px; }
.barcode {
  display: block; height: 40px; width: 100%; max-width: 220px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 3px, transparent 3px 5px, var(--ink) 5px 6px, transparent 6px 9px,
    var(--ink) 9px 13px, transparent 13px 14px, var(--ink) 14px 15px, transparent 15px 19px,
    var(--ink) 19px 21px, transparent 21px 23px, var(--ink) 23px 26px, transparent 26px 29px);
}
.code-n { font: 400 10px/1 var(--text); letter-spacing: var(--ls-m); }

/* Controls: flat fills, no frames. The wedge is the one call-to-action shape. */
input[type=email], input[type=text], textarea {
  width: 100%; min-width: 0;
  height: 54px; padding: 0 16px;
  font: 500 16px var(--body); color: var(--ink);
  background: #F3F5FB; border: 0; border-radius: 0;
  transition: background-color .15s ease;
}
input::placeholder, textarea::placeholder { color: #4B556E; opacity: 1; }
input:focus, textarea:focus { background: #FFFFFF; }
button { font: inherit; color: inherit; border: 0; border-radius: 0; background: none; padding: 0; cursor: pointer; }
.wedge {
  position: relative; flex: 0 0 auto;
  height: 54px; padding: 0 44px 0 20px;
  font: 700 14px/1 var(--text); letter-spacing: .08em; text-transform: uppercase;
  color: var(--chart);
  background: linear-gradient(106.5deg, var(--ink) calc(100% - 34px), var(--signal) calc(100% - 34px));
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  transition: background-position .2s cubic-bezier(.16,1,.3,1), color .15s ease, padding .25s cubic-bezier(.16,1,.3,1);
  background-size: 130% 100%; background-position: 100% 0;
}
.wedge:hover { background-position: 0 0; color: #FFFFFF; padding-left: 23px; padding-right: 41px; }
.wedge[disabled] { cursor: progress; color: #B7C0D6; }
.signup .wedge { animation: ready 7s cubic-bezier(.16,1,.3,1) 4s infinite; }
.signup .wedge:hover, .signup .wedge:focus-visible, .signup:focus-within .wedge { animation: none; }
@keyframes ready { 0%, 90%, 100% { background-position: 100% 0; color: var(--chart); padding-right: 44px; } 94% { background-position: 0 0; color: #FFFFFF; padding-right: 41px; } }
.wedge:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--chart); }
.ts:empty { display: none; }
.ts { margin-top: 12px; }
.status { min-height: 1.5em; margin: 12px 0 0; font: 400 14px/1.45 var(--body); }
.status[data-tone]:not([data-tone=""])::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: .05em; background: currentColor; }
.status[data-tone=ok]::before { background: var(--chart) !important; box-shadow: 0 0 0 2px var(--ink); }
.status[data-tone=info]::before { background: var(--yellow) !important; box-shadow: 0 0 0 2px var(--ink); }
.status[data-tone=err]::before { background: var(--signal) !important; box-shadow: 0 0 0 2px var(--ink); }

/* ================= HERO ================= */
.hero {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: var(--fa) 1fr var(--fcw);
  min-height: max(100svh, 660px);
}

/* Field A: the pass */
.fa {
  position: relative; z-index: 1;
  background: var(--cobalt);
  padding: var(--rule-y) var(--pad) clamp(24px, 4.5vh, 48px);
  display: flex; flex-direction: column;
}
.fa::before { /* dot field, lower left */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64%; z-index: -1;
  opacity: .6;
  background: radial-gradient(rgba(10,20,51,.34) 1.3px, transparent 1.6px) 14px 10px / 28px 28px;
  -webkit-mask-image: linear-gradient(90deg, #000 0 70%, transparent 96%);
  mask-image: linear-gradient(90deg, #000 0 70%, transparent 96%);
}
.cap {
  position: absolute; left: var(--pad); right: var(--pad); top: 0; height: var(--rule-y);
  display: flex; align-items: flex-end; gap: 32px; padding-bottom: 16px;
}
.cap .lv b { font-size: 15px; letter-spacing: .02em; }
.cap .cap-2 { margin-left: 0; }

.pass { margin-top: clamp(28px, 5vh, 56px); display: flex; flex-direction: column; }
h1 {
  margin: 0;
  font: 700 clamp(32px, min(3.4vw, 6.2vh), 56px)/1.02 var(--display);
  letter-spacing: -.005em;
  text-wrap: balance;
}
/* The hero message: the name, set big. ELSEWHERE is the pass block and spills across the seam onto the footage. */
.title {
  font: 700 clamp(56px, min(7.8vw, 12.5vh), 128px)/.9 var(--display);
  letter-spacing: -.01em; text-transform: uppercase; text-wrap: nowrap;
}
.title .t1, .title .t2 { display: block; }
/* OPERATION recedes: outlined, smaller, tracked out. ELSEWHERE is the hero. */
.title .t1 {
  font-size: .56em; letter-spacing: .025em; margin-bottom: .1em;
  /* An inner line, not an outer stroke: an outside outline closed the gaps between letters on phones. The SVG filter (sprite in index.html) erodes the
     glyphs' merged alpha and keeps only the white rim, so the font's overlapping inner contours never show, as a centred stroke or a clip would. */
  color: var(--cobalt); filter: url(#t1-line);
}
.title .t2 {
  display: inline-block; white-space: nowrap; margin-top: .06em;
  background: linear-gradient(90deg, var(--signal) 0 .06em, transparent .06em .1em, var(--chart) .1em);
  padding: .06em .14em .02em .22em;
}
.title .t2 > span { display: inline-block; }
.tag { margin: clamp(18px, 3vh, 32px) 0 0; font: 700 clamp(22px, 2.2vw, 34px)/1.1 var(--display); }
.hl { background: linear-gradient(var(--ink), var(--ink)) 0 94% / 100% .09em no-repeat; padding: 0 .04em .06em; margin-left: -.02em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sub { margin: 12px 0 0; max-width: 36ch; font: 400 clamp(16px, 1.2vw, 17px)/1.45 var(--body); }

.pass { flex: 1; }
/* The signup anchors to the bottom of the pass; the gap between the title group and the form is whatever room is left. */
.signup { position: relative; margin-top: auto; padding-top: clamp(20px, 3.5vh, 36px); max-width: 34rem; width: 100%; }
.row { display: flex; flex-wrap: wrap; row-gap: 8px; }
.row .field { position: relative; flex: 1 1 280px; min-width: 0; }
.ph { position: absolute; left: 16px; right: 16px; top: 0; height: 54px; display: none; align-items: center; overflow: hidden; white-space: nowrap; pointer-events: none; font: 500 16px var(--body); color: #4B556E; }
.field[data-typing] .ph { display: flex; }
.field[data-typing] input::placeholder { color: transparent; }
.ph::after { content: ""; flex: none; width: .6em; height: 1.15em; margin-left: 2px; background: var(--ink); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.row .wedge { flex: 1 0 auto; text-align: left; }
.privacy { margin: 2px 0 0; font: 400 14px/1.45 var(--body); }
.privacy a, .jump a, .site-foot nav a {
  text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .3s cubic-bezier(.16,1,.3,1), color .15s ease;
}
.privacy a { background-size: 100% 1.5px; }
.privacy a:hover, .privacy a:focus-visible { background-size: 100% 3px; }
.jump a:hover, .jump a:focus-visible, .site-foot nav a:hover, .site-foot nav a:focus-visible { background-size: 100% 1.5px; }

/* Field B: footage */
.fb { position: relative; overflow: hidden; background: var(--sky); color: #FFFFFF; }
.stage { position: absolute; inset: 0; }
.bg { position: absolute; left: 0; top: -240px; width: 100%; height: calc(100% + 240px); object-fit: cover; object-position: 48% 50%; }
.fb .reg { color: #FFFFFF; mix-blend-mode: difference; }
.fb .reg-tl, .fb .reg-tr { top: calc(var(--rule-y) + 18px); }
.fb-cap {
  position: absolute; left: 18px; bottom: 44px; z-index: 2; margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--pale); color: var(--ink);
  font: 700 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase;
}
.fb-cap .sq { background: var(--signal); }
.fb-cap i { width: 4px; height: 4px; background: var(--ink); }
.full {
  position: absolute; right: 18px; top: calc(var(--rule-y) + 46px); z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 12px; background: var(--ink); color: var(--pale);
  font: 700 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .15s ease, color .15s ease;
}
.full svg { width: 16px; height: 16px; }
.full:hover, .fb:hover .full { background: var(--chart); color: var(--ink); }
.fb .reg { transition: translate .3s cubic-bezier(.16,1,.3,1); }
.fb:hover .reg-tl { translate: 6px 6px; } .fb:hover .reg-tr { translate: -6px 6px; }
.fb:hover .reg-bl { translate: 6px -6px; } .fb:hover .reg-br { translate: -6px -6px; }
.full:focus-visible { outline-color: var(--chart); }

/* Field C: spec sheet */
.fc {
  position: relative; z-index: 2;
  background: var(--pale);
  padding: calc(var(--rule-y) + 36px) clamp(18px, 2.2vw, 32px) 0;
  display: flex; flex-direction: column;
}
.jump {
  position: absolute; right: clamp(18px, 2.2vw, 32px); top: calc(var(--rule-y) - 34px);
  display: flex; gap: 18px; white-space: nowrap;
  font: 700 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase;
}
.fc .kv { gap: 20px; }
.fc .kv dd { font-size: 15px; }
.meter { display: block; position: relative; height: 2px; margin: 36px 0 0; background: var(--ink); }
.meter::before { content: ""; position: absolute; left: 0; top: -9px; width: 27%; height: 11px; background: var(--ink); }
.fc-low {
  margin: 36px calc(-1 * clamp(18px, 2.2vw, 32px)) 0;
  padding: 32px clamp(18px, 2.2vw, 32px) 28px;
  background: var(--pale-2);
  flex: 1;
  display: flex; flex-direction: column; gap: 28px;
}
.kv-2 { grid-template-columns: 1fr; gap: 22px; }
.fc .kv-2 dd { font-size: 15px; }
.fc-low .kv-2 { margin: auto 0; }
.fc-low .barcode { height: 32px; }
.route-link {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 calc(-1 * clamp(18px, 2.2vw, 32px)) 0 -72px;
  height: clamp(64px, 8.5vh, 84px); padding: 0 clamp(18px, 2.2vw, 32px) 0 64px;
  background: var(--signal); color: var(--ink); text-decoration: none;
  font: 700 clamp(20px, 1.8vw, 26px)/1 var(--display); text-transform: uppercase;
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%);
  transition: background-color .15s ease;
}
.route-link svg { animation: bob 2.4s ease-in-out infinite; width: 24px; height: 24px; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.route-link:hover { background: #F2405F; }
.route-link:hover svg, .route-link:focus-visible svg { transform: translateY(4px); animation: none; }
.route-link:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ink); }

/* The rule that joins the three fields */
.rule {
  position: absolute; left: 0; right: 0; top: var(--rule-y); height: 2px; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0 var(--fa), transparent var(--fa) calc(100% - var(--fcw)), var(--ink) calc(100% - var(--fcw)));
}
.rule i { position: absolute; left: var(--fa); right: var(--fcw); top: -2px; height: 5px; background: var(--chart); }
.rule::before { content: ""; position: absolute; left: calc(var(--fa) - 4px); top: -3px; width: 8px; height: 8px; background: var(--ink); }
.rule::after { content: ""; position: absolute; left: calc(100% - var(--fcw)); top: -2px; width: 48px; height: 6px; background: var(--ink); }

/* Full view */
.viewer { padding: 0; border: 0; width: min(94vw, 1600px); max-width: none; max-height: 94vh; background: var(--ink); color: var(--pale); overflow: visible; }
.viewer::backdrop { background: rgba(10,20,51,.86); }
.viewer-in { position: relative; }
.viewer video { display: block; width: 100%; height: auto; max-height: calc(94vh - 52px); aspect-ratio: 16 / 9; object-fit: contain; background: var(--ink); }
.viewer-cap { margin: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; font: 700 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; }
.viewer-cap .sq { background: var(--signal); }
.viewer-x {
  position: absolute; right: 0; bottom: 0; height: 52px;
  display: inline-flex; align-items: center; gap: 10px; padding: 0 18px;
  background: var(--chart); color: var(--ink);
  font: 700 11px/1 var(--text); letter-spacing: var(--ls); text-transform: uppercase;
}
.viewer-x svg { width: 16px; height: 16px; }
.viewer-x:focus-visible { outline-color: var(--chart); }
.viewer[open] { animation: unfold .45s cubic-bezier(.16,1,.3,1); }
@keyframes unfold { from { clip-path: inset(0 20% 0 37%); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

/* ================= ROADMAP: Swiss paper, a deck of twelve stage cards tipped forward in perspective =================
   At rest the cards tip forward in perspective, each showing its header strip, widening toward the viewer (rotateX, set in app.js). One card at a time lifts flat
   and forward: scroll steps through 01..12 while the section is pinned; hovering or focusing a card overrides. Only transforms animate.
   Phones and reduced motion: a flat list where the active card opens in place. app.js writes --e/--p/--dm (scroll) and --k (active card). */
.roadmap {
  --n: 12; --e: 1; --p: .5; --dm: 1; --k: 0;
  --gs: clamp(64px, 12.5vw, 240px); --gm: clamp(76px, 7.6vw, 120px); --bt: #1436B0;
  position: relative; overflow: clip; background: var(--paper);
}
.rm-pin { position: relative; isolation: isolate; padding: 34px 0 calc(var(--gs) * .66); overflow: clip; }
.rm-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("/media/grain.png") 0 0 / 192px 192px,
    linear-gradient(rgba(10,20,51,.045) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(10,20,51,.045) 1px, transparent 1px) 0 0 / 48px 100%;
}

/* decoration: all quiet, all behind the cards */
.rm-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.rm-deco > * { position: absolute; display: block; }
.d-arc { left: 50%; top: 50%; width: max(128vw, 1100px); aspect-ratio: 1; border: 1.5px solid var(--ink); border-radius: 50%; translate: -50% -50%; rotate: calc(var(--p) * 150deg - 75deg); }
.d-arc::after { content: ""; position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink); }
.d-ring { left: -104px; top: 40%; width: 200px; height: 200px; fill: none; stroke: var(--hazard); stroke-width: 44; translate: 0 calc((var(--p) - .5) * -320px); }
.d-tri { left: 50%; bottom: 22px; width: 56px; height: 40px; margin-left: -28px; fill: var(--bracket); }

/* the one decorative route: a bold yellow line with rounded jogs and a big arrowhead, down the right margin; it draws with scroll */
.rm-route { position: absolute; z-index: 1; right: 0; top: 0; width: 100px; height: 720px; overflow: visible; pointer-events: none; translate: 0 calc((var(--p) - .5) * 150px); }
.rt { fill: none; stroke: var(--hazard); stroke-width: 20px; stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - var(--dm)); }
.rt-head { fill: var(--hazard); opacity: clamp(0, calc((var(--dm) - .85) * 8), 1); }

/* the ghost word, bleeding off the bottom-left */
.rm-ghost {
  position: absolute; z-index: 1; left: calc(var(--pad) - 1.2vw); bottom: calc(var(--gs) * -.1); margin: 0;
  font: 700 var(--gs)/.8 var(--display); letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap;
  color: var(--hazard); user-select: none; pointer-events: none;
  translate: calc((.5 - var(--p)) * 16vw) 0;
}
.rm-ghost .gw { background: linear-gradient(180deg, #F2E27C 0, var(--hazard) 45%, #D2B93A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-ghost .br { display: inline-block; color: var(--bracket); rotate: -13deg; scale: 1.1 1.4; transform-origin: 50% 62%; }

/* head: small print, top left */
.rm-in { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; padding: 0 var(--gm); }
.rm-head { padding-left: 8px; min-height: 76px; }
.rm-h { margin: 0 0 12px; font: 700 28px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.rm-funnel { position: relative; width: 100%; margin: 22px auto 0; }

/* cards. Base = flat list: stepped greys, each narrower, the active one opens in place */
.rm-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.band {
  --i: 0; --w: 100%; --g: #DADADA;
  --q: clamp(0, calc(var(--e) * 2.2 - var(--i) * 1.2 / (var(--n) - 1)), 1);
  position: relative; width: var(--w); background: var(--g); color: var(--ink);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5);
  opacity: var(--q); translate: 0 calc((1 - var(--q)) * -44px);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.band:nth-child(1) { --i: 0; --w: 100%; --g: #DADADA; }
.band:nth-child(2) { --i: 1; --w: 98%; --g: #D7D7D7; }
.band:nth-child(3) { --i: 2; --w: 96%; --g: #D4D4D4; }
.band:nth-child(4) { --i: 3; --w: 94%; --g: #D1D1D1; }
.band:nth-child(5) { --i: 4; --w: 92%; --g: #CECECE; }
.band:nth-child(6) { --i: 5; --w: 90%; --g: #CACACA; }
.band:nth-child(7) { --i: 6; --w: 88%; --g: #C7C7C7; }
.band:nth-child(8) { --i: 7; --w: 86%; --g: #C4C4C4; }
.band:nth-child(9) { --i: 8; --w: 84%; --g: #C1C1C1; }
.band:nth-child(11) { --i: 9; --w: 82%; --g: #BEBEBE; }
.band:nth-child(12) { --i: 10; --w: 80%; --g: #BABABA; }
.band:nth-child(13) { --i: 11; --w: 78%; --g: #B7B7B7; }
.band.is-open { background: var(--chalk); box-shadow: 0 7px 0 var(--floor), 16px 24px 40px rgba(38,48,79,.3); z-index: 5; }
/* the active stages carry the game's double yellow bar, like the walls */
.now::before { content: ""; position: absolute; left: 3.2%; top: 16px; width: 15px; height: 30px; background: repeating-linear-gradient(90deg, var(--hazard) 0 5px, transparent 5px 10px); pointer-events: none; }

.band-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; width: 100%; min-height: 60px; padding: 10px 8%; text-align: left; }
.rm-launch { position: relative; width: 100%; padding: 12px 8% 12px; z-index: 6; font: 700 11px/1 var(--text); letter-spacing: var(--ls); text-transform: uppercase; }
.rm-launch::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--ink); }
.rm-launch span { position: relative; display: inline-block; padding: 6px 10px; background: var(--yellow); color: var(--ink); }
.band-hd:focus-visible { outline: none; }
.band-hd:focus-visible .b-t { outline: 3px solid var(--ink); outline-offset: 6px; }
.b-meta { display: flex; align-items: center; gap: 10px; font: 700 11px/1 var(--text); letter-spacing: var(--ls); text-transform: uppercase; color: var(--bt); }
.b-st::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 10px; vertical-align: .1em; background: currentColor; }
.now .b-st, .launch .b-st { padding: 4px 7px; background: var(--hazard); color: var(--ink); }
.now .b-st::before, .launch .b-st::before { display: none; }
.beyond .b-st { color: #5A6482; }
.beyond .b-t { color: #3C4663; }
.b-t { display: inline-block; font: 700 clamp(20px, 2vw, 26px)/1.05 var(--display); letter-spacing: -.005em; text-transform: uppercase; }

.band-bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.16,1,.3,1); }
.band.is-open .band-bd { grid-template-rows: 1fr; }
.bd-clip { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .45s; }
.band.is-open .bd-clip { visibility: visible; transition-delay: 0s; }
.bd-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 40px; align-items: start; padding: 0 8% 28px; opacity: 0; transition: opacity .3s ease; }
.band.is-open .bd-in { opacity: 1; transition-delay: .15s; }
.band-tx { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.band-vis { grid-column: 2; grid-row: 1; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #E6E6E4; }
.band-tx p { margin: 0; font: 400 16px/1.5 var(--body); max-width: 42ch; }
.band-tx .tx-k { align-self: stretch; max-width: none; padding-bottom: 8px; font: 700 11px/1 var(--text); letter-spacing: var(--ls); text-transform: uppercase; color: var(--bt); box-shadow: 0 1.5px 0 rgba(10,20,51,.45); }
.band-tx .tx-d { display: flex; align-items: center; gap: 9px; font: 700 11px/1.3 var(--text); letter-spacing: var(--ls); text-transform: uppercase; }
.band-tx .tx-d::before { content: ""; width: 8px; height: 8px; background: var(--ink); flex: none; }
.band-link { display: inline-block; padding: 11px 20px 11px 14px; background: var(--yellow); color: var(--ink); font: 700 11px/1 var(--text); letter-spacing: var(--ls); text-transform: uppercase; text-decoration: none; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: background-color .2s, color .2s; }
.band-link:hover, .band-link:focus-visible { background: var(--ink); color: var(--yellow); }
.band-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; clip-path: none; }

/* panel visuals: flat grey */
.v-arc { background: #EDEDEB; }
.arc-chip { position: absolute; top: 12px; padding: 6px 8px; font: 700 11px/1 var(--text); letter-spacing: var(--ls); }
.arc-1p { left: 12px; background: var(--yellow); color: var(--ink); }
.arc-2p { right: 12px; background: var(--ink); color: var(--paper); }
.arc-foes { position: absolute; left: 50%; top: 24%; width: min(220px, 70%); translate: -50% 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.arc-foes i { aspect-ratio: 1; background: #9C9C9A; }
.arc-foes i:nth-child(odd) { background: var(--ink); }
.arc-ship { position: absolute; bottom: 36px; width: 22px; height: 22px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.arc-s1 { left: 28%; background: var(--yellow); box-shadow: 0 0 0 1px var(--ink); }
.arc-s2 { right: 28%; background: var(--ink); }
.arc-cap { position: absolute; left: 10px; bottom: 10px; font: 700 11px/1 var(--text); letter-spacing: var(--ls); text-transform: uppercase; }
.v-proto { background: var(--ink); }
.v-proto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.v-proto .reg { color: #FFFFFF; width: 14px; height: 14px; mix-blend-mode: difference; }
.v-proto .reg-tl, .v-proto .reg-tr { top: 10px; } .v-proto .reg-bl, .v-proto .reg-br { bottom: 10px; }
.v-proto .reg-tl, .v-proto .reg-bl { left: 10px; } .v-proto .reg-tr, .v-proto .reg-br { right: 10px; }
.proto-rec { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--paper); color: var(--ink); font: 700 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; }
.proto-rec::before { content: ""; width: 8px; height: 8px; background: var(--yellow); box-shadow: 0 0 0 1px var(--ink); }
.v-art { background: var(--ink); }
.v-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-sq { background: #EDEDEA; }
.v-sq img { object-position: 50% 35%; }
.art-cap { position: absolute; left: 10px; bottom: 10px; padding: 5px 7px; background: var(--paper); color: var(--ink); font: 400 10px/1 var(--text); letter-spacing: var(--ls-m); text-transform: uppercase; }

@media (prefers-reduced-motion: no-preference) {
  .arc-foes { animation: arc-march 3.2s ease-in-out infinite; }
  @keyframes arc-march { 0%, 100% { translate: calc(-50% - 14px) 0; } 50% { translate: calc(-50% + 14px) 0; } }
}

/* ---- the deck: desktop and tablet, motion allowed. Pinned; the cards lie back in perspective ---- */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .roadmap { height: calc(100svh + var(--n) * 34svh); --ch: clamp(232px, 28svh, 300px); --hh: clamp(94px, 11.5svh, 104px); --dp: .5; }
  .rm-pin { position: sticky; top: 0; height: 100svh; padding-bottom: 0; }
  .rm-ghost { bottom: calc(var(--gs) * -.5); }
  /* the heading shares the deck's column, so "Roadmap" starts at the cards' left edge */
  .rm-head { min-height: 64px; width: min(100%, 940px); margin-inline: auto; padding-left: 0; }
  .rm-funnel { width: min(100%, 940px); }
  .rm-funnel { margin-top: 14px; }
  /* the stack is a 3D deck: grey card rectangles tipped forward in perspective (top edge pinned), each cropped to its header strip; every resting card shows the same strip; every card is the same width, so the deck is a rectangle and only the tabs show depth.
     app.js writes each card's --tf (transform), --clip (inset crop) and --rh (strip height); the open card turns flat and forward. */
  .rm-stack { display: block; position: relative; height: var(--sh, 560px); }
  .band {
    position: absolute; left: 0; right: 0; top: 0; width: auto; height: var(--ch); z-index: calc(var(--i) + 1);
    will-change: transform;
    --g: color-mix(in srgb, #DEDEDC calc((1 - var(--i) / 11) * 100%), #A8A8A6);
    background: var(--g); box-shadow: none;
    /* deck-wide drift (not transitioned, fed by the lerped scroll progress --dp): the deck settles down as you scroll; every band moves together, so the seams hold */
    translate: 0 calc((1 - var(--dp)) * 16px + (1 - var(--q)) * -44px);
    transform: var(--tf, none); transform-origin: 50% 0;
    clip-path: var(--clip);
    transition: transform .6s cubic-bezier(.16,1,.3,1), clip-path .6s cubic-bezier(.16,1,.3,1), background-color .3s ease, box-shadow .3s ease;
  }
  /* where the card in front overlaps it, a soft shadow falls across the bottom of each resting strip */
  .band:not(.is-open) { background-image: linear-gradient(to top, rgba(10,20,51,.18), rgba(10,20,51,0) 16px); background-size: 100% var(--rh, 40px); background-repeat: no-repeat; }
  .band.is-open { z-index: 20; }
  .band:not(.is-open).beyond .b-st { color: #2A3452; }
  .band:not(.is-open).beyond .b-t { color: var(--ink); }
  .band:not(.is-open).beyond .b-no { color: #102A8C; }
  /* the launch tag: flat, outside the deck, on its right, level with the 09/10 seam; app.js sets --tx/--ty and moves it onto the card's right edge while 09 or 10 is open */
  .rm-launch {
    position: absolute; left: 0; top: 0; width: max-content; height: auto; padding: 0; z-index: 30; pointer-events: none;
    opacity: clamp(0, calc(var(--e) * 2.2 - 9 * 1.2 / (var(--n) - 1)), 1);
    translate: 0 calc((1 - var(--dp)) * 16px);
    transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 50%));
    transition: transform .6s cubic-bezier(.16,1,.3,1);
  }
  .rm-launch::before { left: auto; right: 100%; top: 50%; width: var(--hl, 44px); height: 1px; margin-top: -.5px; background: var(--ink); }
  .rm-launch.on-card::before { display: none; }
  .rm-launch span { position: static; display: block; padding: 6px 10px; background: var(--hazard); color: var(--ink); white-space: nowrap; }
  /* the open card: one padding (--pd) on all four sides. Text column on one left edge, top-aligned; the media spans the full content height on the right. */
  .roadmap { --pd: 26px; }
  .band-hd { display: block; height: var(--hh); min-height: 0; padding: var(--pd) 0 0 var(--pd); }
  .band-hd .b-t { margin: 8px 0 0 -3px; font-size: clamp(22px, 2.2vw, 32px); }
  .now::before { left: 0; top: var(--pd); height: 40px; width: 9px; }
  /* fisheye: the further a resting strip is from the lifted card, the smaller its header (app.js sets data-lv 0..3 and the offsets) */
  .band[data-lv="1"], .band[data-lv="2"], .band[data-lv="3"] { --hh: var(--rh, 40px); }
  .band[data-lv="1"] .band-hd, .band[data-lv="2"] .band-hd, .band[data-lv="3"] .band-hd { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; padding: 0 3% 0 40px; white-space: nowrap; }
  .band[data-lv="1"] .b-t, .band[data-lv="2"] .b-t, .band[data-lv="3"] .b-t { margin-top: 0; }
  .band[data-lv="1"] .b-t { font-size: 20px; }
  .band[data-lv="2"] .b-t { font-size: 14px; } .band[data-lv="2"] .b-meta, .band[data-lv="3"] .b-meta { font-size: 10px; }
  .band[data-lv="3"] .b-t { font-size: 11px; }
  .band[data-lv="2"] .b-st, .band[data-lv="3"] .b-st { display: none; }
  .band[data-lv="1"]::before, .band[data-lv="2"]::before, .band[data-lv="3"]::before { display: none; }
  .band-bd { grid-template-rows: 1fr; transition: none; height: calc(var(--ch) - var(--hh)); }
  .bd-clip { transition: none; }
  .bd-in { display: block; padding: 0 calc(48% + 28px) 0 var(--pd); }
  .band-vis { position: absolute; aspect-ratio: auto; top: var(--pd); bottom: var(--pd); right: var(--pd); left: 52%; height: auto; }
  /* the card has a fixed height: STRK TYP128 is wider than the old reading face, so the paragraph is a size smaller and fills the column, or card 04's button is cut off */
  .band-tx { padding-top: 0; gap: 9px; }
  .band-tx p { font-size: 14px; line-height: 1.45; max-width: none; }
  @media (max-width: 1000px) { .band-tx { gap: 7px; } .band-tx p { font-size: 13px; line-height: 1.4; } }
  .band-link { padding-block: 9px; }
}

/* ---- phones: flat list, route down the left, the card in view opens in place ---- */
@media (max-width: 760px) {
  .roadmap { --gs: 14vw; --gm: 0px; }
  .rm-pin { padding-top: 52px; padding-bottom: calc(var(--gs) * .66 + 70px); }
  .rm-in { padding: 0; }
  .rm-head { padding: 0 18px 0 46px; }
    .rm-funnel { margin-top: 18px; }
  .rm-route { left: 0; right: auto; translate: 60px calc((var(--p) - .5) * -60px); scale: -.6 .6; transform-origin: 0 0; }
  .band-hd { min-height: 52px; padding: 8px 9% 8px 52px; }
  .b-t { font-size: 19px; }
  .rm-launch { padding-left: 52px; }
  .bd-in { grid-template-columns: 1fr; row-gap: 16px; padding: 0 9% 24px 52px; }
  .band-tx, .band-vis { grid-column: 1; }
  .band-tx { grid-row: 1; } .band-vis { grid-row: 2; }
  .d-ring { width: 130px; height: 130px; left: -78px; }
  .d-tri { width: 40px; height: 29px; margin-left: -20px; bottom: 16px; }
}
@media (min-width: 761px) and (max-height: 800px) and (prefers-reduced-motion: no-preference) { .rm-ghost { bottom: calc(var(--gs) * -.8); } .roadmap { --ch: clamp(236px, 31svh, 300px); } }
/* tablets: the card is the full funnel width, so the two columns just tighten */
@media (min-width: 761px) and (max-width: 1000px) {
  .bd-in { column-gap: 24px; }
  .rm-hd-l { max-width: calc(50% - 44px); }
  .rm-hd-l .kv-row { grid-auto-flow: row; grid-template-columns: auto auto; }
}

/* ================= SUGGEST: sky field + pale field ================= */
.suggest { display: grid; grid-template-columns: 1fr 1fr; }
.sg-a {
  position: relative; overflow: hidden;
  background: var(--sky); isolation: isolate;
  padding: clamp(56px, 7vw, 104px) var(--pad);
  display: flex; flex-direction: column; gap: 20px;
}
.sg-dots { position: absolute; left: 0; right: 0; top: -240px; bottom: -240px; z-index: -1; pointer-events: none; background: radial-gradient(rgba(10,20,51,.28) 1.3px, transparent 1.6px) 14px 10px / 28px 28px; }
.sg-a h2 { margin: 0; font: 700 clamp(38px, 4.4vw, 64px)/1 var(--display); text-wrap: balance; max-width: 12ch; }
.lede { margin: 0; max-width: 32ch; font: 400 17px/1.5 var(--body); }
.sg-a .kv-row { margin-top: 12px; }
.sg-data {
  margin: auto 0 0; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 14px 32px;
  box-shadow: inset 0 1.5px 0 var(--ink);
}
.sg-data div { min-width: 0; }
.sg-data dt { font: 700 10px/1.2 var(--text); letter-spacing: var(--ls-m); text-transform: uppercase; }
.sg-data dd { margin: 3px 0 0; font: 400 13px/1.35 var(--text); }
.sg-arrow { position: absolute; right: var(--pad); top: clamp(56px, 7vw, 104px); width: 52px; color: var(--ink); }
.sg-arrow svg { width: 52px; height: 52px; }
.sg-b { background: var(--pale); padding: clamp(56px, 7vw, 104px) var(--pad); display: flex; flex-direction: column; }
.sform .opt { font-family: var(--body); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.sform textarea, .sform input { background: var(--pale-2); box-shadow: 10px 8px 14px -9px rgba(38,48,79,.3); } /* chalk slab, soft cool shadow */
.sform textarea:focus, .sform input:focus { background: #FFFFFF; }
.sform textarea { height: auto; min-height: 168px; padding: 14px 16px; resize: none; line-height: 1.5; }
.count { margin: 6px 0 18px; text-align: right; font-size: 11px; letter-spacing: var(--ls); }
.count.over { color: #A3122F; }
.sf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: end; }
.sf-f { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.sform .wedge { margin-top: 16px; align-self: flex-start; }
.sform label::before { content: ""; display: inline-block; width: 0; height: 9px; margin-right: 0; background: var(--chart); transition: width .2s cubic-bezier(.16,1,.3,1), margin .2s cubic-bezier(.16,1,.3,1); }
.sform label:has(+ textarea:focus)::before, .sform label:has(+ input:focus)::before { width: 9px; margin-right: 8px; }

/* ================= FOLLOW: Swiss poster, signal bars + one concept-art strip, follow and coffee CTAs ================= */
.follow {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ECECF2, var(--lav) 60%, #D8D9E5);
  min-height: clamp(560px, 56vw, 860px);
  color: var(--ink);
}
.follow .reg { color: var(--ink); width: 10px; height: 10px; }
/* One concept-art plate, washed like a printed proof; full colour on hover */
.strip { position: absolute; top: 8%; bottom: 8%; left: 5%; width: 50%; overflow: hidden; --sl: clamp(80px, 11vw, 170px); clip-path: polygon(var(--sl) 0, 100% 0, calc(100% - var(--sl)) 100%, 0 100%); }
.strip picture, .strip img { display: block; width: 100%; height: 100%; }
.strip img { object-fit: cover; object-position: 50% 50%; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.strip:hover img { transform: scale(1.03); }
.strip-cap { position: absolute; left: 14px; bottom: 22px; z-index: 1; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px; background: var(--pale); color: var(--ink); font: 700 10px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; }
.strip-cap i { width: 4px; height: 4px; background: var(--ink); }
.bars { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); aspect-ratio: 1440 / 860; }
.xbar {
  position: absolute; left: 60%; right: 0; top: 33%; min-height: 12%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 24px;
  padding: 0 clamp(24px, 4vw, 64px) 0 clamp(52px, 5.5vw, 96px);
  background: var(--strk); color: var(--ink); text-decoration: none;
  clip-path: polygon(clamp(18px, 4.8vw, 70px) 0, 100% 0, 100% 100%, 0 100%);
  transition: background-color .15s ease;
}
.xbar-k { grid-column: 1 / -1; font: 700 clamp(19px, 1.5vw, 22px)/1 var(--display); padding-top: clamp(14px, 1.6vw, 22px); }
.xbar-n { margin-bottom: clamp(16px, 1.7vw, 24px); font: 700 clamp(30px, 3.6vw, 58px)/1 var(--display); }
.xbar svg { grid-row: 2; grid-column: 3; width: clamp(28px, 2.6vw, 40px); height: clamp(28px, 2.6vw, 40px); margin-bottom: clamp(14px, 1.6vw, 22px); transition: transform .25s cubic-bezier(.16,1,.3,1); }
.xbar:hover { background: var(--ink); color: var(--strk); }
.xbar:hover svg { transform: translate(4px, -4px); }
.xbar:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ink); }
.xbar:focus-visible { background: var(--ink); color: var(--strk); }
/* Secondary: a smaller yellow wedge hanging under the follow bar */
.coffee {
  position: absolute; left: 66%; right: 0; top: 49%; min-height: 7.5%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(24px, 4vw, 64px) 0 clamp(40px, 4.4vw, 76px);
  background: var(--yellow); color: var(--ink); text-decoration: none;
  clip-path: polygon(clamp(14px, 3.4vw, 50px) 0, 100% 0, 100% 100%, 0 100%);
  font: 700 clamp(16px, 1.5vw, 22px)/1 var(--display); text-transform: uppercase;
  transition: background-color .15s ease;
}
.coffee svg { width: clamp(20px, 1.8vw, 26px); height: clamp(20px, 1.8vw, 26px); flex: none; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.coffee:hover { background: var(--yellow-hi); }
.coffee:hover svg { transform: translate(3px, -3px); }
.coffee:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ink); }
.fl-info { position: absolute; left: 62%; bottom: clamp(36px, 8%, 72px); display: flex; flex-direction: column; gap: 14px; width: 260px; }
.fl-meta { margin: 0; display: flex; align-items: center; gap: 12px; font: 700 11px/1.3 var(--text); letter-spacing: var(--ls); text-transform: uppercase; }
.fl-lede { margin: 0; font: 400 14px/1.5 var(--body); padding: 12px 0; box-shadow: inset 0 -1.5px 0 var(--ink), inset 0 1.5px 0 var(--ink); }
.glyph { width: 24px; height: 24px; flex: none; background:
  linear-gradient(var(--ink), var(--ink)) 8px 0 / 8px 24px no-repeat,
  linear-gradient(var(--ink), var(--ink)) 0 8px / 24px 8px no-repeat; }
.fl-info .barcode { height: 40px; max-width: 220px; }

/* ================= FOOTER: cobalt close ================= */
.site-foot {
  position: relative; overflow: hidden;
  padding: 0 var(--pad);
  background: var(--cobalt); color: var(--ink);
  font-size: 13px;
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 26px; font-weight: 500; }

/* New footer: label/value credits, a WIP note, and the name set edge to edge, whole, with as much space under it as the side margin
   (bottom padding = --pad; the name's own margin trims the line box's leftover under the baseline, see .ft-big). */
.ft2 { padding: clamp(64px, 6vw, 84px) var(--pad) var(--pad); container-type: inline-size; }
.ft2 .reg { top: 26px; color: var(--ink); width: 10px; height: 10px; }
.ft-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(24px, 4vw, 64px); align-items: start; }
.ft-wip { margin: 18px 0 0; max-width: 36ch; font: 400 15px/1.5 var(--body); }
.ft-wip b { display: block; margin-bottom: 22px; font: 700 clamp(22px, 2.4vw, 34px)/1.05 var(--display); }
.ft-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; padding-top: 16px; box-shadow: inset 0 1.5px 0 var(--ink); }
.ft-kv a { text-decoration: none; text-underline-offset: 4px; }
.ft-kv a:hover, .ft-kv a:focus-visible { text-decoration: underline; }
.ft-kv > div { min-width: 0; } .ft-kv dd { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .ft-top { grid-template-columns: minmax(0, 1fr); } }
.signup .hz-s1 { left: 0; bottom: -22px; }
@media (max-height: 700px) { .signup .hz { display: none; } }
.hz.hz-strip { height: 10px; width: clamp(140px, 16vw, 260px); aspect-ratio: auto; background: repeating-linear-gradient(135deg, var(--hazard) 0 5px, var(--floor) 5px 10px); }
.hz.hz-s2 { background: repeating-linear-gradient(45deg, var(--hazard) 0 5px, var(--floor) 5px 10px); }
.hz-s2 { left: var(--pad); top: 34px; }
.ft-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; margin-top: clamp(28px, 3.5vw, 48px); padding-top: 14px; box-shadow: inset 0 1.5px 0 var(--ink); }
/* -.025em: the line box keeps .075em under the baseline and the E's left bearing is .05em, so the gap under the letters equals the gap left of the E */
.ft-big { margin: clamp(14px, 2.4vw, 32px) 0 -.025em; font-weight: 700; font-family: var(--display); font-size: 12vw; font-size: calc(100cqw / 7.5); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; color: var(--ink); user-select: none; }
.copy { margin: 0; font-size: 11px; letter-spacing: var(--ls); text-transform: uppercase; }

/* Short laptop screens: tighten so the signup stays above the fold */
@media (max-height: 800px) and (min-width: 761px) {
  .pass { margin-top: 24px; }
  .tag { margin-top: 14px; }
  .sub { margin-top: 8px; }
  .signup { padding-top: 16px; }
  .fc { padding-top: calc(var(--rule-y) + 24px); }
  .fc .kv { gap: 10px; }
  .meter { margin-top: 22px; }
  .fc-low { margin-top: 22px; padding-top: 22px; padding-bottom: 20px; gap: 16px; }
}

/* ================= Mid widths ================= */
@media (max-width: 1180px) {
  :root { --fa: 52%; --fcw: 0%; }
  .hero { grid-template-columns: var(--fa) 1fr; }
  .fc { grid-column: 1 / -1; padding-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .jump { top: 16px; }
  .fc .meter { grid-column: 1; }
  .fc-low { grid-column: 2; grid-row: 1 / span 3; margin: 0 calc(-1 * clamp(18px, 2.2vw, 32px)) 0 0; }
  .route-link { grid-column: 1 / -1; margin: 28px calc(-1 * clamp(18px, 2.2vw, 32px)) 0; }
  .rule::after { display: none; }
}

/* ================= Phones and tablets portrait ================= */
@media (max-width: 760px) {
  :root { --rule-y: 0px; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .fb { order: -1; aspect-ratio: 16 / 11; }
  .fb .reg-tl, .fb .reg-tr { top: 14px; }
  .fb .reg { left: auto; right: auto; }
  .fb .reg-tl, .fb .reg-bl { left: 14px; } .fb .reg-tr, .fb .reg-br { right: 14px; }
  .fb .reg-bl, .fb .reg-br { bottom: 14px; }
  .fb-cap { left: 14px; bottom: 40px; font-size: 10px; padding: 6px 9px; }
  .full { top: 14px; right: 40px; padding: 8px 10px; }
  .full span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fa { padding: 24px var(--pad) 32px; }
  .cap { position: static; height: auto; padding: 0; margin: 0; }
  .pass { margin-top: 26px; flex: none; }
  .title { font-size: 11.5vw; }
  .title .t1 { filter: url(#t1-line-sm); }
  .tag { margin-top: 22px; }
  .sub { margin-top: 10px; }
  .signup { margin-top: 24px; padding-top: 0; }
  .sf-pair { grid-template-columns: 1fr; }
  .row { flex-direction: column; gap: 8px; }
  .row .field, .row .wedge { flex: none; }
  .wedge { width: 100%; text-align: left; }
  .rule { display: none; }
  .fc { display: flex; padding: 32px var(--pad) 0; }
  .jump { position: static; align-self: flex-start; margin-bottom: 22px; }
  .fc .kv:first-of-type { grid-template-columns: repeat(3, 1fr); }
  .fc-low { margin: 30px calc(-1 * var(--pad)) 0; padding: 28px var(--pad); }
  .route-link { display: none; }
  .fc { padding-bottom: 0; }
  .fc-low { margin-bottom: 0; }

  .kv-row { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  .suggest { grid-template-columns: 1fr; }
  .sg-arrow { display: none; }
  .sform .wedge { width: 100%; text-align: left; }

  .follow { min-height: 0; padding: 0 0 36px; display: flex; flex-direction: column; }
  .strip { position: relative; top: 0; bottom: auto; left: 0; width: 100%; height: 62vw; --sl: 12vw; margin-top: 24px; }
  .bg { top: -120px; height: calc(100% + 120px); }
  .signup .hz { display: none; }
  .strip-cap { bottom: 12px; }
  .bars { position: relative; top: 0; transform: none; aspect-ratio: 1 / .5; margin-top: 8px; }
  .xbar { left: 10%; top: 8%; padding-left: 40px; }
  .xbar-n { font-size: 26px; }
  .coffee { left: 22%; top: 52%; min-height: 14%; white-space: nowrap; }
  .fl-info { position: relative; left: auto; bottom: auto; width: auto; margin: 8px var(--pad) 0; }
  .ft2 { padding-top: 64px; }
  .ft-top { grid-template-columns: 1fr; }
  .ft-kv { grid-template-columns: 1fr; }
}

/* ================= Motion: one load sequence, scroll-driven reveals (all off under reduced motion) ================= */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes draw { from { transform: scaleX(0); } }
  @keyframes rise { from { transform: translateY(40%); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(0); } }
  @keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
  @keyframes slidein { from { opacity: 0; transform: translateX(-.3em); } to { opacity: 1; transform: none; } }
  @keyframes fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  /* backwards fill: start state holds during the delay, nothing is left applied afterwards */
  .rule { transform-origin: 0 50%; animation: draw .7s cubic-bezier(.16,1,.3,1) backwards; }
  .title .t1 { animation: rise .65s cubic-bezier(.16,1,.3,1) .15s backwards; }
  .title .t2 { animation: wipe .7s cubic-bezier(.16,1,.3,1) .3s backwards; }
  .title .t2 > span { animation: slidein .6s cubic-bezier(.16,1,.3,1) .5s backwards; }
  .tag { animation: fadeup .6s cubic-bezier(.16,1,.3,1) .7s backwards; }
  .sub { animation: fadeup .6s cubic-bezier(.16,1,.3,1) .8s backwards; }
  .signup { animation: fadeup .6s cubic-bezier(.16,1,.3,1) .9s backwards; }
  .fb .stage { animation: fadein .9s cubic-bezier(.16,1,.3,1) backwards; }
  .fc > * { animation: fadeup .6s cubic-bezier(.16,1,.3,1) backwards; }
  .fc > :nth-child(1) { animation-delay: .6s; } .fc > :nth-child(2) { animation-delay: .7s; }
  .fc > :nth-child(3) { animation-delay: .8s; } .fc > :nth-child(4) { animation-delay: .9s; }
  .fc > :nth-child(5) { animation-delay: 1s; }  .fc > :nth-child(6) { animation-delay: 1.1s; }
}

/* Scroll-driven entrance reveals (progressive: browsers without animation-timeline just show the content). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes reveal { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
    .sg-a h2, .sg-a .lede, .sform, .fl-info {
      animation: reveal linear backwards; animation-timeline: view(); animation-range: entry 0% entry 45%;
    }
  }
}
/* Depth parallax: ONE engine in app.js writes --py on every [data-depth] element (only when motion is allowed). */
[data-depth] { translate: 0 var(--py, 0px); }
.reg[data-depth] { translate: none; transform: translateY(var(--py, 0px)); }
/* Danger zone: one solid block of thick diagonal stripes, like the floor marking in the game. Decoration only. */
.hz { position: absolute; z-index: 1; pointer-events: none; height: clamp(86px, 12vh, 128px); aspect-ratio: 1 / 1.8; background: repeating-linear-gradient(135deg, var(--hazard) 0 12px, var(--floor) 12px 24px); }

/* Reduced motion: no smooth scroll, no unfold; app.js keeps the loop paused. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .viewer[open] { animation: none; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}

/* Aiming cursor: fine pointers only. Native CSS cursor, no JS follow, so no lag. */
@media (pointer: fine) {
  html, body { cursor: url("/media/cursor-aim-v1.svg") 16 16, crosshair; }
  a, button, [role=button], summary, label[for] { cursor: url("/media/cursor-lock-v1.svg") 16 16, pointer; }
  input, textarea { cursor: text; }
  button:disabled, .wedge[disabled] { cursor: progress; }
}

/* ================= Text pages (privacy, 404) ================= */
.doc { min-height: 100svh; display: flex; flex-direction: column;
  background: radial-gradient(rgba(10,20,51,.16) 1.2px, transparent 1.5px) 14px 10px / 28px 28px, var(--pale); }
.doc-in { flex: 1; width: min(100%, 760px); padding: clamp(36px, 6vw, 72px) var(--pad) 72px; }
.doc h1 { margin-top: 18px; font-size: clamp(40px, 6vw, 72px); }
.doc h2 { margin: 40px 0 0; display: flex; align-items: center; gap: 12px; font: 700 22px/1.15 var(--display); text-transform: uppercase; }
.doc h2::before { content: ""; width: 10px; height: 10px; background: var(--signal); flex: none; }
.doc main p, .doc main li { font: 400 16px/1.6 var(--body); }
.doc ul { padding-left: 1.2em; }
.doc main a { color: #1F47C9; }
.doc .site-foot { flex: none; }
.doc .site-foot p { line-height: 1.5; }
.doc .site-foot .ft-big { font-size: calc(100cqw / 7.5); line-height: .9; }
.doc .site-foot .ft-wip { font-size: 15px; }
.doc .site-foot .copy { font-size: 11px; }
.doc .site-foot .lv { line-height: 1.2; }
.doc-kv { margin-top: 22px; }
.doc .intro { max-width: 46ch; margin: 18px 0 0; font-size: 18px; line-height: 1.5; }
.back { font: 700 11px/1.2 var(--text); letter-spacing: var(--ls); text-transform: uppercase; text-decoration: none; }
.draft { margin: 0; padding: 10px var(--pad); background: var(--chart); color: var(--ink); font: 400 14px/1.45 var(--body); }
.updated { opacity: .85; }

/* Play the prototype: an ink plate under the sub line, label/value inside, arrow nudges on hover. */
.play { display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 18px 12px 16px; align-self: flex-start;
  background: var(--ink); color: var(--pale); text-decoration: none; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding-right: 30px; }
.play-k { font: 700 11px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--chart); }
.play-v { font: 700 18px/1.05 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.play-i { width: 18px; height: 18px; transition: translate .25s cubic-bezier(.16,1,.3,1); }
.play:hover .play-v { color: #fff; }
.play:hover .play-i { translate: 4px 0; }
.play:focus-visible { outline: 3px solid var(--chart); outline-offset: 3px; clip-path: none; }
@media (prefers-reduced-motion: reduce) { .play-i { transition: none; } }

/* Danger zone on the roadmap paper: left margin, below the header, clear of the deck; parallaxes against the decor via --p. */
.d-hz { left: 100px; top: 52%; height: clamp(80px, 11svh, 120px); translate: 0 calc((.5 - var(--p)) * 260px); }
@media (max-width: 1180px) { .d-hz { display: none; } }
@media (prefers-reduced-motion: reduce) { .d-hz { display: none; } }

/* ===== COFFEE page: one boarding pass with network tabs ===== */
.cf { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: calc(1680px + 2 * var(--pad)); margin: 0 auto; padding: clamp(24px, 2.4vw, 32px) var(--pad) clamp(24px, 2.4vw, 32px); }
@media (min-width: 761px) { .cf { box-sizing: border-box; min-height: 100svh; } }
.doc main.cf .back { display: inline-block; padding-bottom: 2px; color: var(--ink); }
.cf-pass { margin-top: 20px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cf-band { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 32px; padding: clamp(44px, 7svh, 88px) clamp(24px, 4vw, 64px) clamp(44px, 5svh, 72px); background: var(--cobalt); color: var(--ink); }
.cf-band .cf-head { flex: 1 1 320px; min-width: 0; }
.doc .cf-band h1 { margin: 0; font-size: clamp(40px, min(6vw, 10svh), 108px); line-height: .95; }
.doc main.cf .cf-intro { margin: 18px 0 0; max-width: 44ch; font: 400 clamp(16px, 1.2vw, 20px)/1.5 var(--text); }
.cf-band .cf-pair { flex: none; }
.cf-seat { position: absolute; right: clamp(24px, 4vw, 64px); bottom: -30px; z-index: 3; padding: 14px 22px 8px 30px; font: 700 clamp(36px, min(5vw, 8svh), 84px)/.9 var(--display); letter-spacing: -.01em; text-transform: uppercase; background: linear-gradient(90deg, var(--signal) 0 8px, var(--chart) 8px); user-select: none; }

.cf-tabs { display: none; gap: 2px; margin: 0; padding: 0; }
.js .cf-tabs { display: flex; }
.cf-tab { min-height: 48px; padding: 0 20px; font: 700 13px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--pale); background: var(--ink); transition: background-color .15s ease, color .15s ease; }
.cf-tab:hover { background: var(--chart); color: var(--ink); }
.cf-tab[aria-selected="true"] { background: var(--chart); color: var(--ink); }
.cf-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--chart); }
.cf-tab[aria-selected="true"]:focus-visible { box-shadow: inset 0 0 0 3px var(--ink); }
.cf-tab .l-short { display: none; }

.cf-panel, .cf-statusrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cf-panel { flex: 1; }
.cf-panel[hidden] { display: none; }
.js .cf-panel:not([hidden]) { animation: cf-in .3s cubic-bezier(.16,1,.3,1); }
@keyframes cf-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.cf-facts { padding: clamp(32px, 4svh, 64px) clamp(24px, 4vw, 64px) 0; background: var(--pale-2); }
.cf-facts .kv { max-width: 64ch; }
.cf-facts .kv { gap: 20px; }
.cf-facts .kv dd.cf-note { font: 400 15px/1.5 var(--text); letter-spacing: 0; text-transform: none; }
.cf-facts .kv dd.cf-addr { font: 500 clamp(16px, 1.2vw, 19px)/1.5 var(--text); letter-spacing: .02em; text-transform: none; word-break: break-all; overflow-wrap: anywhere; user-select: all; }
.cf-facts .wedge { margin-top: 28px; }
.cf-qr { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px 24px 76px; background: var(--field-light, #F3F5FB); }
.cf-plate { padding: 24px; background: #fff; line-height: 0; }
.cf-plate img { width: clamp(150px, min(17vw, 27svh), 300px); height: clamp(150px, min(17vw, 27svh), 300px); image-rendering: pixelated; image-rendering: crisp-edges; }
.cf-cap { margin: 0; font: 700 11px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; }
.cf-qr .code { position: absolute; right: 18px; bottom: 18px; width: 120px; }
.cf-qr .barcode { height: 28px; }
.cf-statusrow > div { padding: 0 clamp(24px, 4vw, 64px) 12px; background: var(--pale-2); }
.cf-statusrow > i { background: #F3F5FB; }
.doc main.cf .status { margin: 12px 0 0; font: 400 14px/1.45 var(--text); }
.cf-warn { margin: 0; padding: 20px clamp(24px, 4vw, 64px) 20px calc(clamp(24px, 4vw, 64px) + 30px); background: var(--signal); color: var(--ink); font: 700 clamp(19px, 2vw, 26px)/1.1 var(--display); letter-spacing: .01em; text-transform: uppercase; clip-path: polygon(34px 0, 100% 0, 100% 100%, 0 100%); }
.doc main.cf p.cf-warn { font: 700 clamp(19px, 2vw, 26px)/1.1 var(--display); }

@media (max-width: 760px) {
  .cf-band { flex-direction: column; padding: 52px 20px 28px; gap: 16px; }
  .cf-band .cf-pair { order: -1; }
  .cf-band .cf-head { flex: none; }
  .cf-seat { position: static; align-self: flex-start; margin-top: 4px; font-size: 44px; }
  .js .cf-tabs { flex-wrap: wrap; }
  .cf-tab { flex: 1 1 auto; padding: 0 10px; font-size: 11px; letter-spacing: .06em; }
  .cf-tab .l-long { display: none; }
  .cf-tab .l-short { display: inline; }
  .cf-panel, .cf-statusrow { grid-template-columns: 1fr; }
  .cf-qr { order: -1; padding: 32px 16px 80px; }
  .cf-plate img { width: 184px; height: 184px; }
  .doc .cf-band h1 { font-size: clamp(40px, 11vw, 60px); }
  .cf-facts { padding: 28px 20px 0; }
  .cf-facts .wedge { width: 100%; text-align: left; }
  .cf-statusrow > div { padding: 0 20px 24px; }
  .cf-statusrow > i { display: none; }
  .cf-warn { padding: 18px 20px 18px 44px; }
}
/* Short desktop viewports: compact vertical rhythm so the warning bar stays above the fold. */
@media (min-width: 761px) and (max-height: 960px) {
  .cf { padding-top: 16px; padding-bottom: 16px; }
  .cf-pass { margin-top: 10px; }
  .cf-band { padding: clamp(24px, 4svh, 40px) clamp(24px, 4vw, 64px) clamp(30px, 4.5svh, 44px); }
  .doc main.cf .cf-intro { margin-top: 10px; }
  .cf-seat { bottom: -24px; padding: 8px 18px 4px 26px; }
  .cf-tab { min-height: 40px; }
  .cf-facts { padding-top: 20px; }
  .cf-facts .kv { gap: 10px; }
  .cf-facts .wedge { margin-top: 16px; }
  .cf-qr { padding: 18px 24px 64px; gap: 10px; }
  .cf-qr .code { bottom: 12px; }
  .cf-statusrow > div { padding-bottom: 6px; }
  .doc main.cf .status { margin-top: 6px; min-height: 1.45em; }
  .cf-warn { padding-top: 12px; padding-bottom: 12px; }
}
@media (min-width: 761px) and (max-height: 780px) {
  .doc .cf-band h1 { font-size: clamp(40px, min(6vw, 8.5svh), 108px); }
  .cf-band { padding-top: 22px; padding-bottom: 36px; }
  .cf-facts { padding-top: 16px; }
  .cf-facts .kv { gap: 8px; }
  .cf-qr { padding-top: 12px; padding-bottom: 56px; }
  .cf-plate { padding: 16px; }
  .cf-plate img { width: clamp(150px, 24svh, 300px); height: clamp(150px, 24svh, 300px); }
  .cf-warn { padding-top: 10px; padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .cf-tab { transition: none; } .js .cf-panel:not([hidden]) { animation: none; } }