/* Ship Happens* / Dry Dock v2. One drawing sheet: a single thread runs from the hero drawing to the footer title block.
   Vanilla CSS, zero build. Brand rule: radius 0 (portholes and station marks excepted). */
@font-face{font-family:'Archivo';src:url(fonts/archivo-wght-only.woff2?v=20261027b) format('woff2');font-weight:500 900;font-display:swap}
@font-face{font-family:'Space Mono';src:url(fonts/spacemono-400.woff2?v=20261027b) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url(fonts/spacemono-700.woff2?v=20261027b) format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#161310;--bg-raised:#1c1915;--text:#f2efe8;--accent:#f84b1e;--accent-hover:#ff6a3d;--accent-dark:#7c2408;
  --grey:#9b9385;--grey-muted:#8a8173;--grey-faint:#6e675c;--line:#2b2721;--line-card:#38332c;--line-strong:#45403a;
  --grid:rgba(242,239,232,.035);--grid-major:rgba(242,239,232,.04);
  --shadow-hard:5px 5px 0 var(--accent);
  /* spacing scale, 8px base (4px baseline for type) */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;--s12:96px;
  --section-y:var(--s12);--stack:var(--s4);
  /* sheet geometry: thread x, content column, hero board edge, footer title block */
  --tx:max(24px,calc(50% - 512px));
  --col-l:max(72px,calc(50% - 448px));
  --col-r:max(24px,calc(50% - 448px));
  --board-left:max(24px,calc(50% - 460px));
  --tb-row:64px;--tb-rows:1;--foot-pb:var(--s6);
  --end-b:calc(var(--foot-pb) + var(--tb-row) * var(--tb-rows) - var(--tb-row) / 2);
  --font-ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* one continuous sheet: the grid runs top to bottom, no section seams */
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(var(--grid-major) 1px,transparent 1px) 0 0/120px 120px,
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px) 0 0/120px 120px,
    var(--bg)}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}ol,ul{list-style:none;padding:0}
img{display:block;max-width:100%}
a{color:inherit}a:hover{color:var(--accent)}
a,button,label{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 3a2.4 2.4 0 1 0 0 4.8A2.4 2.4 0 0 0 12 3zm-1 5.8v9.4c-2.8-.5-5-2.6-5.6-5.2h2.1L4 9.5 0.5 13h2c.6 4 4 7.2 8.5 7.2s7.9-3.2 8.5-7.2h2L18 9.5 14.5 13h2.1c-.6 2.6-2.8 4.7-5.6 5.2V8.8z' fill='%23f2efe8' stroke='%23161310' stroke-width='.8'/></svg>") 12 12,pointer}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mono{font-family:var(--font-mono)}.ast{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;z-index:10;background:var(--accent);color:var(--bg);font-weight:700;padding:10px 18px;text-decoration:none}
.skip-link:focus{left:12px;top:12px;color:var(--bg)}

/* ---------- shared bits ---------- */
.logo-mark{background:var(--accent);color:var(--bg);padding:2px 8px}
.tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;background:var(--accent);color:var(--bg);padding:4px 10px;white-space:nowrap}
.btn-solid{display:inline-block;text-decoration:none;background:var(--accent);color:var(--bg);font-weight:700;font-size:15px;line-height:24px;padding:12px 26px;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.btn-solid:hover{color:var(--bg);background:var(--accent-hover);transform:translate(-3px,-3px);box-shadow:3px 3px 0 var(--text)}
.btn-outline{display:inline-block;text-decoration:none;font-size:15px;line-height:24px;padding:11px 26px;border:1px solid var(--line-strong);white-space:nowrap;background:var(--bg)}
.btn-outline:hover{border-color:var(--accent);color:var(--text)}
.btn-ghost{text-decoration:none;font-size:12px;padding:8px 16px;border:1px solid var(--line-strong);white-space:nowrap;background:var(--bg)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.grid-bg{background:linear-gradient(rgba(242,239,232,.06) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(242,239,232,.06) 1px,transparent 1px) 0 0/24px 24px}
.sheet-mark{position:relative}
.sheet-mark::before,.sheet-mark::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--accent);pointer-events:none}
.sheet-mark::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
.sheet-mark::after{bottom:-7px;right:-7px;border-left:0;border-top:0}

/* status light, faithful to the real status: yard (building), queued, done, live (launched only) */
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;white-space:nowrap}
.status i{flex:none;width:10px;height:10px}
.status[data-status="yard"],.status[data-status="building"]{color:var(--accent)}
.status[data-status="yard"] i,.status[data-status="building"] i{border:1px solid var(--accent);background:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 4px) 0 0/5.66px 5.66px;animation:hatch 1.2s linear infinite}
.board[data-state="live"] .bp-hull{fill:rgba(248,75,30,.16)}
.status[data-status="live"]{color:var(--accent)}
.status[data-status="live"] i{border-radius:50%;background:var(--accent);animation:ping 1.6s ease-out infinite}
.status[data-status="queued"]{color:var(--grey-muted)}
.status[data-status="queued"] i{border:1px dashed var(--grey-faint)}
.status[data-status="done"]{color:var(--grey)}
.status[data-status="done"] i{background:var(--grey-faint)}

/* ---------- nav ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:var(--s2) clamp(16px,4vw,48px);border-bottom:1px solid var(--line);position:relative;z-index:3;background:var(--bg)}
.logo{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:900;letter-spacing:.01em;white-space:nowrap;text-decoration:none}
.logo:hover{color:inherit}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--grey)}.nav-links a{text-decoration:none}
[data-logo]{transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
html:has(#sos:checked) [data-logo]{transform:rotate(180deg)}

/* ---------- hero ---------- */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s4);padding:var(--s8) 24px var(--s8);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(242,239,232,.035) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(242,239,232,.035) 1px,transparent 1px) 0 0/24px 24px;
  -webkit-mask:radial-gradient(ellipse 60% 70% at 50% 40%,#000 20%,transparent 75%);mask:radial-gradient(ellipse 60% 70% at 50% 40%,#000 20%,transparent 75%)}
.badge{font-size:11px;letter-spacing:.14em;color:var(--grey);border:1px solid var(--line-card);padding:6px 14px;white-space:nowrap;background:var(--bg);max-width:90vw}
.hero h1{font-size:clamp(44px,7vw,86px);font-weight:900;line-height:.98;letter-spacing:-.02em;max-width:900px;text-wrap:balance}
.mark{background:var(--accent);color:var(--bg);padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-sub{font-size:18px;line-height:28px;color:var(--grey);max-width:540px}
.cta-row{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center}
.countdown{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line-card);background:rgba(28,25,21,.9);padding:22px clamp(16px,5vw,40px);max-width:100%}
.countdown[hidden]{display:none}
.countdown-label{font-size:11px;letter-spacing:.18em;color:var(--grey)}
.countdown-digits{display:flex;gap:clamp(10px,3vw,26px);justify-content:center}
.countdown .unit{display:flex;flex-direction:column;gap:2px}
.countdown .num{font-size:clamp(26px,7vw,42px);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.countdown .cap{font-size:10px;letter-spacing:.2em;color:var(--grey-faint)}
.countdown .colon{font-size:clamp(26px,7vw,42px);color:var(--line-card)}
.countdown-live{text-align:center;letter-spacing:.14em}
.board{width:min(920px,100%);border:1px solid var(--line-card);background:rgba(28,25,21,.9);padding:18px 18px 0;text-align:left;margin:var(--s2) 0 0}
.board-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;letter-spacing:.16em;color:var(--grey-muted);padding-bottom:12px;border-bottom:1px dashed var(--line-strong)}
.board-head b{color:var(--text)}
.blueprint{display:block;width:100%;height:auto;margin-top:6px}
.bp-line{fill:none;stroke:var(--text);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.bp-faint{stroke:var(--grey-faint);stroke-width:1}
.bp-accent{stroke:var(--accent);stroke-width:1.6}
.bp-dash{stroke-dasharray:4 6}
.bp-text{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;fill:var(--grey)}
.bp-text--accent{fill:var(--accent)}
.bp-fill{fill:var(--accent)}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s cubic-bezier(.6,.1,.2,1) forwards}
.d1{animation-delay:.15s}.d2{animation-delay:.6s}.d3{animation-delay:1s}.d4{animation-delay:1.4s}.d5{animation-delay:1.8s}
.pop{opacity:0;animation:pop .35s ease-out forwards}
.scan{opacity:0;animation:scan 5.5s linear 2.4s infinite}
.spec{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-card);margin:0 -18px}
.spec>div{padding:14px 18px;display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--line-card);min-width:0}
.spec>div:first-child{border-left:0}
.spec dt{font-size:10px;letter-spacing:.18em;color:var(--grey-faint)}
.spec dd{font-size:15px;letter-spacing:.06em;color:var(--text);font-weight:700}
/* the thread leaves the drawing at its bottom-left corner */
.hero-tie{position:absolute;left:calc(var(--tx) - 1px);bottom:0;height:calc(var(--s8) + 1px);width:calc(var(--board-left) - var(--tx) + 1px);border-top:2px solid var(--accent);border-left:2px solid var(--accent);pointer-events:none}
.hero-tie::before{content:"";position:absolute;right:-5px;top:-6px;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ---------- the sheet: everything below the hero, one continuous drawing ---------- */
.sheet{position:relative}
.thread{position:absolute;left:calc(var(--tx) - 1px);top:0;bottom:var(--end-b);width:2px;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(var(--line-strong) 0 6px,transparent 6px 10px)}
.thread-ink{position:absolute;inset:0;background:var(--accent);transform-origin:50% 0}
.thread-end{position:absolute;left:calc(var(--tx) - 1px);bottom:calc(var(--end-b) - 0px);width:calc(var(--col-l) - var(--tx) + 1px);height:2px;background:var(--accent);z-index:1;pointer-events:none}
.thread-end::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--accent);border-right:0}

/* ticker: the thread crosses it like a frame line */
.ticker{border-top:1px solid var(--line);overflow:hidden;padding:11px 0;background:var(--bg)}
.ticker-track{display:flex;width:max-content;animation:ticker 30s linear infinite;font-size:12px;letter-spacing:.14em;color:var(--grey);white-space:nowrap}
.ticker-chunk{padding-right:48px}
.blink{animation:blink 1.1s step-end infinite}
.wave-divider{height:6px;background:repeating-linear-gradient(135deg,var(--accent) 0 8px,transparent 8px 16px)}

/* sections share one column and one rhythm; no backgrounds, no borders between them */
.section{padding:var(--section-y) var(--col-r) 0 var(--col-l);display:flex;flex-direction:column;gap:var(--stack)}
.section:last-of-type{padding-bottom:var(--section-y)}
.section h2{font-size:clamp(32px,4vw,48px);font-weight:900;letter-spacing:-.015em;line-height:1.0}
.lede{font-size:18px;line-height:28px;color:var(--grey);max-width:640px}

/* station marks: the section numbers sit on the thread, tied into the column */
.eyebrow{display:flex;align-items:center;gap:var(--s2);height:var(--s4)}
.station{position:absolute;left:var(--tx);width:34px;height:34px;margin-left:-17px;border-radius:50%;border:1.5px solid var(--accent);background:var(--bg);display:grid;place-items:center;font:700 11px/1 var(--font-mono);color:var(--accent);z-index:2}
.station-tie{position:absolute;left:var(--tx);width:calc(var(--col-l) - var(--tx));height:1px;background:var(--accent);z-index:1}
.eyebrow-text{font-size:12px;letter-spacing:.18em;color:var(--text);white-space:nowrap}
.eyebrow-line{flex:1;height:0;border-top:1px dashed var(--line-strong);min-width:var(--s3)}
.eyebrow-ref{font-size:10.5px;letter-spacing:.16em;color:var(--grey-faint);white-space:nowrap}

/* ---------- 01 the deal ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-card);background:var(--bg)}
.stat{padding:var(--s3) var(--s3) var(--s4);display:flex;flex-direction:column;align-items:center;gap:var(--s1);text-align:center;border-left:1px solid var(--line-card)}
.stat:first-child{border-left:0}
.dim{position:relative;align-self:stretch;height:11px;border-left:1px solid var(--grey-faint);border-right:1px solid var(--grey-faint);margin-bottom:var(--s1)}
.dim::before{content:"";position:absolute;left:0;right:0;top:5px;border-top:1px solid var(--grey-faint)}
.dim::after{content:attr(data-l);position:absolute;left:50%;top:-1px;transform:translateX(-50%);background:var(--bg);padding:0 8px;font:10px/1 var(--font-mono);letter-spacing:.16em;color:var(--grey-faint)}
.stat-num{font-size:clamp(40px,6vw,64px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.stat-num--accent{color:var(--accent)}
.stat-num--ghost{color:transparent;-webkit-text-stroke:1.5px var(--grey)}
.stat-cap{font-size:11px;letter-spacing:.16em;color:var(--grey-muted)}

/* ---------- 02 crew ---------- */
.crew-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s3)}
.crew-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;border:1.5px solid var(--line-card);padding:var(--s2) 20px var(--s3);background:var(--bg-raised);box-shadow:var(--shadow-hard);transition:transform .2s,box-shadow .2s}
.crew-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--accent)}
.berth{align-self:stretch;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;color:var(--grey-faint);padding-bottom:12px;border-bottom:1px dashed var(--line-strong)}
.porthole{width:132px;height:132px;display:grid;place-items:center;margin-top:4px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 132'><circle cx='66' cy='66' r='60' fill='none' stroke='%2345403a' stroke-width='6'/><circle cx='66' cy='66' r='65' fill='none' stroke='%2338332c' stroke-width='1'/><g fill='%236e675c'><circle cx='66' cy='6' r='2.2'/><circle cx='66' cy='126' r='2.2'/><circle cx='6' cy='66' r='2.2'/><circle cx='126' cy='66' r='2.2'/><circle cx='23.6' cy='23.6' r='2.2'/><circle cx='108.4' cy='23.6' r='2.2'/><circle cx='23.6' cy='108.4' r='2.2'/><circle cx='108.4' cy='108.4' r='2.2'/></g><path d='M66 0v8M66 124v8M0 66h8M124 66h8' stroke='%23f84b1e' stroke-width='1.5'/></svg>") center/contain no-repeat}
.pfp{width:100px;height:100px;border-radius:50%;object-fit:cover;background:var(--bg)}
.crew-name{font-size:22px;font-weight:900}
.crew-bio{font-size:14px;line-height:20px;color:var(--grey)}
.handle{font-size:12px;color:var(--grey-muted);text-decoration:none;white-space:nowrap}
.handle:hover{color:var(--accent)}

/* ---------- 03 fleet ---------- */
.flagship{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:var(--s4);align-items:center;background:var(--bg);border:1px solid var(--line-card);padding:var(--s3);box-shadow:var(--shadow-hard)}
.flagship-shot{position:relative;border:1px solid var(--line-card);aspect-ratio:16/11;display:grid;place-items:center;overflow:hidden}
.flagship-shot img{width:72%;height:auto;opacity:.92}
.flagship-shot .ref{position:absolute;left:10px;top:8px;font:10px var(--font-mono);letter-spacing:.16em;color:var(--grey-faint)}
.flagship-shot .ref--r{left:auto;right:10px;top:auto;bottom:8px}
.stamp{position:absolute;right:14px;top:30px;transform:rotate(-8deg);border:2px solid var(--accent);color:var(--accent);font:700 12px var(--font-mono);letter-spacing:.24em;padding:5px 10px;background:rgba(22,19,16,.7)}
.flagship-body{display:flex;flex-direction:column;gap:12px;min-width:0;align-items:flex-start}
.flagship-title{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-weight:400;font-size:inherit}
.flagship-name{font-size:30px;font-weight:900}
.flagship-copy{font-size:15px;line-height:24px;color:var(--grey)}
.track-link{font-size:12px;color:var(--accent);text-decoration:none;letter-spacing:.08em}
.track-link:hover{color:var(--accent-hover)}
.ships{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3)}
.ship-sheet{border:1px dashed var(--line-strong);display:flex;flex-direction:column;background:var(--bg)}
.ship-sheet .drawing{position:relative;padding:var(--s2) var(--s2) 6px}
.ship-sheet .sheet-no{position:absolute;right:var(--s2);top:12px;font:9px var(--font-mono);letter-spacing:.14em;color:var(--grey)}
.ship-sheet svg{display:block;width:100%;height:auto}
.titleblock{display:grid;grid-template-columns:1fr auto;border-top:1px dashed var(--line-strong);flex:1}
.titleblock>div{padding:12px var(--s2);display:flex;flex-direction:column;gap:4px;min-width:0}
.titleblock>div+div{border-left:1px dashed var(--line-strong);justify-content:center}
.ship-kicker{font-size:11px;letter-spacing:.16em;color:var(--accent)}
.ship-title{font-size:22px;font-weight:900}
.ship-copy{font-size:13.5px;line-height:20px;color:var(--grey)}
.ship-link{font:12px var(--font-mono);letter-spacing:.08em;color:var(--accent);text-decoration:none;margin-top:4px}

/* ---------- 04 loop ---------- */
.rail{position:relative;display:grid;grid-template-columns:repeat(15,1fr);height:44px;border-bottom:2px solid var(--line-strong)}
.rail i{border-left:1px solid var(--line-strong);position:relative}
.rail i:nth-child(1),.rail i:nth-child(14),.rail i:nth-child(15){border-left:2px solid var(--accent)}
.rail i::after{content:attr(data-d);position:absolute;bottom:6px;left:5px;font:10px var(--font-mono);color:var(--grey-faint)}
.rail-tie{position:absolute;left:var(--tx);width:calc(var(--col-l) - var(--tx));height:2px;margin-top:-2px;background:var(--line-strong);z-index:0}
.hull-marker{position:absolute;bottom:0;left:0;width:calc(100% / 15);height:22px;background:var(--accent);clip-path:polygon(0 0,82% 0,100% 100%,0 100%);animation:slide 6s cubic-bezier(.7,0,.3,1) infinite}
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.phase{padding:var(--s2);border:1px solid var(--line-card);background:var(--bg);display:flex;flex-direction:column;gap:4px;min-width:0}
.phase .d{font:10.5px var(--font-mono);letter-spacing:.16em;color:var(--grey-muted)}
.phase .t{font-size:20px;font-weight:900;white-space:nowrap}
.phase--launch{border-color:var(--accent)}.phase--launch .d{color:var(--accent)}
.phase--repeat{background:var(--accent);border-color:var(--accent);color:var(--bg)}.phase--repeat .d{color:var(--accent-dark)}

/* ---------- 05 log ---------- */
.revs{border:1px solid var(--line-card);font-family:var(--font-mono);background:var(--bg)}
.rev{display:grid;grid-template-columns:116px 112px 1fr 136px;border-top:1px solid var(--line)}
.rev>*{padding:15px var(--s2);border-left:1px solid var(--line);font-size:13px;line-height:18px;min-width:0}
.rev>*:first-child{border-left:0}
.rev--head{border-top:0;background:var(--bg-raised)}
.rev--head>*{font-size:10px;letter-spacing:.18em;color:var(--grey-faint);padding-top:10px;padding-bottom:10px}
.rev-num{color:var(--accent);letter-spacing:.12em;white-space:nowrap}
.rev-date{color:var(--grey-faint);white-space:nowrap}
.rev-text{color:var(--grey)}
.rev--next{background:linear-gradient(90deg,rgba(248,75,30,.08),transparent 60%)}
.rev--next .rev-text{color:var(--text)}

/* ---------- footer: the drawing's title block, where the thread ends ---------- */
.footer{padding:var(--s8) var(--col-r) var(--foot-pb) var(--col-l);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3)}
.footer-logo{display:flex;align-items:center;gap:10px;font-size:clamp(36px,5vw,60px);font-weight:900;letter-spacing:-.02em;line-height:1;flex-wrap:wrap;justify-content:center}
.footer-logo .logo-mark{padding:2px 14px}
.footer-tagline{font-size:13px;color:var(--grey)}
.sos input{position:absolute;opacity:0;width:1px;height:1px}
.sos label{display:inline-block;font:11px var(--font-mono);letter-spacing:.16em;border:1px dashed var(--line-strong);color:var(--grey);padding:8px 16px;user-select:none;background:var(--bg)}
.sos label:hover,.sos input:focus-visible+label{border-color:var(--accent);color:var(--accent)}
.sos .on{display:none}
.sos input:checked+label .off{display:none}.sos input:checked+label .on{display:inline}
.sos input:checked+label{border-style:solid;border-color:var(--accent);color:var(--accent)}
.footer-handles{display:flex;gap:22px;font-size:12px;color:var(--grey);flex-wrap:wrap;justify-content:center}
.footer-handles a{text-decoration:none}
.tblock{align-self:stretch;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.8fr;grid-auto-rows:var(--tb-row);border:1px solid var(--line-card);margin-top:var(--s3);text-align:left;background:var(--bg)}
.tblock>div{padding:0 var(--s2);display:flex;flex-direction:column;justify-content:center;gap:4px;border-left:1px solid var(--line-card);min-width:0}
.tblock>div:first-child{border-left:0}
.tblock span{font:10px var(--font-mono);letter-spacing:.18em;color:var(--grey-faint);white-space:nowrap}
.tblock b{font:700 12px var(--font-mono);letter-spacing:.12em;color:var(--text);white-space:nowrap}
.tblock b.accent{color:var(--accent)}

/* ---------- 404 ---------- */
.lost{padding-bottom:var(--s8)}
.lost h1{font-size:clamp(40px,6.4vw,76px);font-weight:900;line-height:1;letter-spacing:-.02em;text-wrap:balance}
.chart{width:min(760px,100%);border:1px solid var(--line-card);background:rgba(28,25,21,.9);padding:16px 16px 0;text-align:left;margin:var(--s2) 0 0}
.lost .hero-tie{--board-left:max(24px,calc(50% - 380px))}
.chart svg{display:block;width:100%;height:auto}
.compass{transform-origin:640px 70px;animation:wobble 4s ease-in-out infinite}

/* ---------- keyframes ---------- */
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes scan{0%{opacity:0;transform:translateX(0)}5%{opacity:.9}60%{opacity:.9}70%,100%{opacity:0;transform:translateX(720px)}}
@keyframes hatch{to{background-position:5.66px 0}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(248,75,30,.6)}70%,100%{box-shadow:0 0 0 7px rgba(248,75,30,0)}}
@keyframes blink{50%{opacity:0}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes slide{0%,10%{transform:translateX(0)}45%,55%{transform:translateX(1300%);opacity:1}60%{transform:translateX(1300%);opacity:0}61%{transform:translateX(0);opacity:0}70%,100%{transform:translateX(0);opacity:1}}
@keyframes wobble{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(22deg)}}
@keyframes ink{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rise{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes mark{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes tie{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- scroll-driven reading (progressive enhancement) ----------
   Without support, or with reduced motion: everything is visible and the thread is fully inked. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sheet{view-timeline:--sheet block}
    .thread-ink{animation:ink linear both;animation-timeline:--sheet;animation-range:cover 50vh contain 100%}
    .station{animation:mark linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .station-tie,.rail-tie{transform-origin:0 50%;animation:tie linear both;animation-timeline:view();animation-range:entry 20% cover 35%}
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 25%}
  }
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  :root{--tx:18px;--col-l:46px;--col-r:20px;--board-left:18px;--section-y:var(--s8);--stack:var(--s3);--tb-rows:4;--tb-row:56px}
  .hero{padding:var(--s6) 18px var(--s6)}
  .station{width:30px;height:30px;margin-left:-15px;font-size:10px}
  .footer-logo{font-size:30px}
  .hero-tie{height:calc(var(--s6) + 1px)}
  .lost .hero-tie{--board-left:18px}
  .flagship{grid-template-columns:1fr}
  .rev{grid-template-columns:auto 1fr auto}
  .rev>*{border-left:0;padding:12px 14px}
  .rev--head{display:none}
  .rev-text{grid-column:1/-1;grid-row:2;padding-top:0!important}
  .tblock{grid-template-columns:1fr}
  .tblock>div{border-left:0;border-top:1px solid var(--line-card)}
  .tblock>div:first-child{border-top:0}
  .footer{padding-top:var(--s6)}
}
@media (max-width:360px){
  .nav{gap:8px;padding-left:12px;padding-right:12px}
  .logo{font-size:16px}
  .btn-ghost{padding:6px 8px}
}
@media (max-width:680px){
  .nav-links{display:none}
  .bp-text--hide-sm{display:none}
  .hide-sm{display:none}
  .spec{grid-template-columns:1fr 1fr}
  .spec>div:nth-child(3){border-left:0}
  .spec>div:nth-child(n+3){border-top:1px solid var(--line-card)}
  .stats{grid-template-columns:1fr}
  .stat{border-left:0;border-top:1px solid var(--line-card)}
  .stat:first-child{border-top:0}
  .rail i::after{display:none}
  .phases{grid-template-columns:1fr 1fr}
  .eyebrow-ref{display:none}
  .crew-grid,.ships{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .draw{animation:none;stroke-dashoffset:0}.pop{animation:none;opacity:1}
  .scan,.hull-marker,.ticker-track,.blink,.status i,.compass{animation:none!important}
  *,*::before,*::after{transition-duration:.01ms!important}
}