/*
 * Shipfall design system — the shared stylesheet (GD-29).
 *
 * Extracted VERBATIM from the Founder-authored landing page, which was a single
 * self-contained HTML file. It is the source of truth for the public look: pixel
 * primitives, the void/teal/amber palette, the crack divider, the card and slot
 * shapes. Both public sites are meant to consume THIS file rather than each keeping
 * a private copy — that is the whole reason it was pulled out of the page.
 *
 * Consumed by:
 *   web/landing/index.html  — links it as ./shipfall.css
 *   public-site/index.html  — the crew/status page, generated by public-publisher.ts.
 *                             It links this file and carries ONLY the components a
 *                             status page has that a marketing page does not (the "as
 *                             of" indicator, progress rows, the crew panel, the feed).
 *                             Its embedded block declares no colours of its own — a
 *                             test fails the build on a raw hex literal in there.
 *
 * It is not served from here. orchestrator/src/jobs/public-publisher.ts copies it
 * into each site output directory at bake time, because the two sites are separate
 * Cloudflare Pages projects and cannot share a URL.
 *
 * Edit this file, never a copy in an output directory — those are overwritten.
 *
 * Verbatim from the landing page except for one addition: --live, which is the value
 * .term .ok already used, named so the crew page can reuse it instead of inventing a
 * second green. web/shared/emblem.png is the same lockup, extracted from the page's
 * inline data URI so the status header can link it; the landing page still inlines
 * its own copy, because restructuring the Founder's file was not this task's job.
 */
:root{
  --void:#150127; --void-deep:#0c0118; --panel:#1d0a33; --panel-2:#241040;
  --line:#3b1f5f; --teal:#37e9ff; --ice:#bef6ff; --teal-dim:#1a9ab5;
  --amber:#ffab40; --ember:#ff7a1a; --text:#e8defc; --muted:#a795c9;
  /* The terminal's "ok" green, promoted to a token. Same value it always was — the
     crew page needs it for a live indicator, and a second green would be a drift. */
  --live:#67f2a8;
  --ps:'Press Start 2P',monospace; --body:'Chakra Petch',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--teal)}
::selection{background:var(--teal);color:var(--void)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ---------- pixel primitives ---------- */
.px-btn{display:inline-block;font-family:var(--ps);font-size:12px;letter-spacing:1px;text-decoration:none;
  color:var(--void);background:var(--teal);border:0;padding:16px 22px;cursor:pointer;
  box-shadow:4px 4px 0 var(--teal-dim);transition:transform .08s steps(2),box-shadow .08s steps(2)}
.px-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--teal-dim)}
.px-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--teal-dim)}
.px-btn.alt{background:var(--amber);box-shadow:4px 4px 0 #b36a1a;color:#2a1400}
.px-btn.alt:hover{box-shadow:2px 2px 0 #b36a1a}
.eyebrow{font-family:var(--ps);font-size:10px;color:var(--amber);letter-spacing:2px;text-transform:uppercase;margin-bottom:18px}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
h2{font-family:var(--ps);font-size:clamp(16px,2.6vw,24px);line-height:1.7;color:var(--ice);margin-bottom:20px}
p.lede{font-size:19px;color:var(--muted);max-width:62ch}

/* ---------- crack divider (echoes the planet fracture) ---------- */
.crack{display:block;width:100%;height:26px}
.crack path{stroke:var(--ember);stroke-width:3;fill:none}
.crack .glow{stroke:var(--amber);stroke-width:7;opacity:.18}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--void) 88%,transparent);
  backdrop-filter:blur(6px);border-bottom:2px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;padding:14px 24px;max-width:1060px;margin:0 auto}
.lockup-h{display:flex;align-items:center;gap:12px;text-decoration:none}
.lockup-h img{width:34px;height:34px;image-rendering:pixelated}
.lockup-h span{font-family:var(--ps);font-size:13px;color:var(--ice);letter-spacing:1px}
.nav .grow{flex:1}
.nav a.plain{font-family:var(--ps);font-size:9px;color:var(--muted);text-decoration:none;letter-spacing:1px}
.nav a.plain:hover{color:var(--teal)}

/* ---------- hero ---------- */
.hero{position:relative;text-align:center;padding:72px 24px 96px;overflow:hidden;
  background:radial-gradient(ellipse 90% 60% at 50% 105%, #2a0f42 0%, var(--void) 60%)}
.hero .emblem{width:min(340px,68vw);margin:0 auto;image-rendering:pixelated;
  filter:drop-shadow(0 0 24px rgba(55,233,255,.22))}
.wordmark{font-family:var(--ps);font-size:clamp(26px,6.4vw,54px);color:var(--ice);letter-spacing:.06em;
  margin:26px 0 6px;text-shadow:0 0 18px rgba(55,233,255,.35), 3px 3px 0 var(--teal-dim)}
.wordmark .fall{color:var(--amber);text-shadow:0 0 18px rgba(255,171,64,.35), 3px 3px 0 #8a4d0e}
.tagline{font-size:clamp(17px,2.4vw,21px);color:var(--muted);max-width:44ch;margin:0 auto 34px}
.tagline b{color:var(--text);font-weight:600}
/* ambient falling shards — the one motion moment */
.shard{position:absolute;top:-20px;width:6px;height:10px;background:var(--teal);opacity:.65;
  animation:fall linear infinite;image-rendering:pixelated}
.shard.s2{background:var(--ice);width:4px;height:7px;opacity:.45}
.shard.s3{background:var(--amber);width:5px;height:8px;opacity:.35}
@keyframes fall{to{transform:translateY(110vh)}}
@media (prefers-reduced-motion:reduce){.shard{display:none}}

/* ---------- loop cards ---------- */
.loop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:36px}
.card{background:var(--panel);border:3px solid var(--line);padding:26px 22px;position:relative;
  transition:transform .08s steps(2)}
.card:hover{transform:translate(-2px,-2px);border-color:var(--teal-dim)}
.card .k{font-family:var(--ps);font-size:12px;color:var(--teal);margin-bottom:14px;display:block}
.card p{font-size:15px;color:var(--muted)}
.card .glyph{font-size:26px;line-height:1;margin-bottom:14px;filter:saturate(.9)}

/* ---------- worlds run out ---------- */
.runout{background:var(--void-deep);border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
.runout .big{font-family:var(--ps);font-size:clamp(15px,2.4vw,21px);line-height:2;color:var(--text)}
.runout .big em{font-style:normal;color:var(--amber)}
.runout .big u{text-decoration:none;color:var(--teal)}
.runout p{margin-top:22px;color:var(--muted);max-width:64ch}

/* ---------- agents ---------- */
.agents .row{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
.term{background:#0a0114;border:3px solid var(--line);padding:22px;font-family:var(--ps);
  font-size:9px;line-height:2.4;color:var(--teal);box-shadow:6px 6px 0 #08010f}
.term .dim{color:var(--muted)} .term .ok{color:var(--live)} .term .amb{color:var(--amber)}
@media (max-width:760px){.agents .row{grid-template-columns:1fr}}

/* ---------- shots ---------- */
.vid{aspect-ratio:16/9;margin-top:36px;background:
  repeating-linear-gradient(45deg,var(--panel) 0 14px,var(--panel-2) 14px 28px);
  border:3px solid var(--line);display:grid;place-items:center;text-align:center;padding:16px}
.vid span{font-family:var(--ps);font-size:10px;color:var(--muted);line-height:2.4}
.vid iframe,.vid video{width:100%;height:100%;border:0;display:block}
.shot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.shot{aspect-ratio:16/9;background:
  repeating-linear-gradient(45deg,var(--panel) 0 14px,var(--panel-2) 14px 28px);
  border:3px solid var(--line);display:grid;place-items:center;text-align:center;padding:16px}
.shot span{font-family:var(--ps);font-size:9px;color:var(--muted);line-height:2.2}

/* ---------- news ---------- */
.news li{list-style:none;border-left:4px solid var(--teal-dim);padding:6px 0 6px 18px;margin:18px 0}
.news .d{font-family:var(--ps);font-size:9px;color:var(--amber);display:block;margin-bottom:6px}
.news b{color:var(--ice);font-weight:600}
.news p{color:var(--muted);font-size:15px}

/* ---------- signup ---------- */
.signup{background:linear-gradient(180deg,var(--void) 0%,#1c0733 100%);text-align:center}
.signup form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.signup input[type=email]{font-family:var(--body);font-size:16px;padding:15px 16px;min-width:min(340px,80vw);
  background:var(--void-deep);border:3px solid var(--line);color:var(--text)}
.signup input[type=email]:focus{border-color:var(--teal)}
.soon{display:inline-block;margin-top:30px;font-family:var(--ps);font-size:11px;line-height:2.4;
  color:var(--amber);border:3px dashed #8a4d0e;padding:18px 22px}
.fine{margin-top:22px;font-size:13px;color:var(--muted)}

footer{border-top:2px solid var(--line);padding:34px 24px;text-align:center;color:var(--muted);font-size:13px}
footer .mini{font-family:var(--ps);font-size:9px;letter-spacing:1px;margin-bottom:12px}
footer a{color:var(--muted)} footer a:hover{color:var(--teal)}