/* =============================================================================
   GO FOR BROKE — the Company's frontage.  ML-GFB-ART-001 made web.
   One ink language on warm cream; oxblood is the single house spot; the seal is
   the one photographed object. No second red enters the language. §0 is honest:
   gains are green, losses are red — the inversion lives in the player.
   Self-hosted OFL fonts (no third party phones home). No JS anywhere.
   ========================================================================== */

/* ---- self-hosted type (subset woff2; see scripts/bake_web_assets.py) ------ */
@font-face { font-family:"Source Serif 4"; font-weight:400; font-style:normal;
  font-display:swap; src:url("fonts/source-serif-4-400.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-weight:600; font-style:normal;
  font-display:swap; src:url("fonts/source-serif-4-600.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-weight:700; font-style:normal;
  font-display:swap; src:url("fonts/source-serif-4-700.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:400; font-style:normal;
  font-display:swap; src:url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:600; font-style:normal;
  font-display:swap; src:url("fonts/ibm-plex-mono-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:400; font-style:normal;
  font-display:swap; src:url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:600; font-style:normal;
  font-display:swap; src:url("fonts/inter-600.woff2") format("woff2"); }

/* ---- tokens (tokens.ts, verbatim values) --------------------------------- */
:root{
  --paper:#F5F0E6; --paper-shade:#ECE5D6; --ink:#1C1915;
  /* app token is #6F6759; nudged one step darker for web so small muted labels
     clear WCAG AA (4.5:1) on BOTH cream (5.8) and the paper-shade tint (5.3) */
  --ink-muted:#635C4D;
  --rule:#C7BCA6; --loss:#A8241C; --gain:#1E5C3A; --guinea:#96762A;
  /* --loss is also the house SPOT (the seal wax / scene oxblood): art, used as
     the single accent. Green + red only ever appear as honest §0 figures. */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --measure:66ch; --page:min(100% - 2.4rem, 62rem);
  --shadow:0 1px 2px rgba(28,25,21,.10), 0 6px 18px rgba(28,25,21,.05);
  color-scheme:light;
}

/* ---- reset-ish ----------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:1.125rem; line-height:1.62;
  font-feature-settings:"onum" 1,"liga" 1,"kern" 1;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible{
  outline:2px solid var(--loss); outline-offset:3px; border-radius:2px;
}
::selection{ background:#e4d8bd; }
.center-page{ width:var(--page); margin-inline:auto; }
/* small utilities (kept in CSS so the CSP needs no style-src 'unsafe-inline') */
.mt-0{ margin-top:0; } .mt-1{ margin-top:.6rem; } .mt-2{ margin-top:1.2rem; }
.mt-3{ margin-top:1.8rem; }
.fine{ font-size:.82rem; line-height:1.55; color:var(--ink-muted); }  /* body fine print — muted, never dimmed by opacity */
.minh{ min-height:52vh; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-999px; top:0; background:var(--ink);
  color:var(--paper); padding:.6rem 1rem; z-index:20; font-family:var(--ui); }
.skip:focus{ left:.6rem; top:.6rem; }

/* ---- letterhead / masthead ---------------------------------------------- */
.masthead{ border-bottom:2px solid var(--ink); background:var(--paper); }
.masthead__bar{ width:var(--page); margin-inline:auto;
  display:flex; align-items:center; gap:.85rem; padding:.9rem 0 .7rem; }
.masthead__mark{ width:44px; height:44px; flex:none; border-radius:50%;
  box-shadow:var(--shadow); }
.masthead__word{ font-weight:700; letter-spacing:.02em; line-height:1; }
.masthead__word b{ display:block; font-size:1.24rem; }
.masthead__word span{ display:block; font-family:var(--mono); font-weight:400;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-muted); margin-top:.28rem; }
.masthead__ref{ margin-left:auto; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted);
  text-align:right; }

/* nav */
.nav{ border-bottom:1px solid var(--rule); background:var(--paper-shade); }
.nav__row{ width:var(--page); margin-inline:auto; display:flex; flex-wrap:wrap;
  gap:.2rem 1.4rem; padding:.5rem 0; font-family:var(--ui); font-size:.82rem; }
.nav a{ text-decoration:none; letter-spacing:.02em; color:var(--ink);
  padding:.15rem 0; border-bottom:2px solid transparent; }
.nav a:hover{ border-bottom-color:var(--loss); }
.nav a[aria-current="page"]{ border-bottom-color:var(--ink); font-weight:600; }

/* the Wire — chrome flavour tape (not market data). Mechanical, never bounces */
.wire{ overflow:hidden; border-bottom:1px solid var(--rule); background:var(--paper);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--ink-muted); white-space:nowrap; }
.wire__track{ display:inline-block; padding:.4rem 0; will-change:transform;
  animation:wire 48s linear infinite; }
.wire__track span{ padding:0 1.1rem; }
.wire__track b{ color:var(--ink); font-weight:600; }
.wire s{ color:var(--loss); text-decoration:none; }   /* the down mark ▼ */
@keyframes wire{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---- layout blocks ------------------------------------------------------- */
main{ display:block; }
.band{ padding:3.2rem 0; border-bottom:1px solid var(--rule); }
.band--tint{ background:var(--paper-shade); }
.band__inner{ width:var(--page); margin-inline:auto; }
.prose{ max-width:var(--measure); }
.prose p,.prose ul,.prose ol{ margin:0 0 1.05rem; }
.prose ul{ padding-left:1.1rem; } .prose li{ margin:.3rem 0; }
.lede{ font-size:1.3rem; line-height:1.5; color:var(--ink); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:700; line-height:1.12;
  letter-spacing:-.01em; margin:0 0 .6rem; }
h2{ font-size:1.9rem; } h3{ font-size:1.3rem; font-weight:600; }
.eyebrow{ font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--loss);
  margin:0 0 .5rem; }
.eyebrow--muted{ color:var(--ink-muted); }
.rule-tick{ height:0; border:0; border-top:2px solid var(--ink); width:2.4rem;
  margin:.2rem 0 1.3rem; }

/* corner-referenced document card — "what document is this?" */
.doc{ background:var(--paper); border:1px solid var(--rule); border-radius:2px;
  box-shadow:var(--shadow); padding:1.5rem 1.5rem 1.6rem; position:relative; }
.doc__ref{ font-family:var(--mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-muted);
  display:flex; justify-content:space-between; gap:1rem;
  border-bottom:1px solid var(--rule); padding-bottom:.55rem; margin-bottom:1rem; }
.grid{ display:grid; gap:1.4rem; }
@media (min-width:640px){ .grid--2{ grid-template-columns:1fr 1fr; }
  .grid--3{ grid-template-columns:repeat(3,1fr); } }

/* ---- the hero (landing) -------------------------------------------------- */
.hero{ text-align:center; padding:3rem 0 2.4rem; }
.hero__emblem{ width:min(72vw,320px); aspect-ratio:1; margin:0 auto 1.4rem;
  border-radius:50%; }
.hero h1{ font-size:clamp(2.6rem,9vw,4.4rem); letter-spacing:-.02em; margin:0; }
.hero__prop{ font-size:clamp(1.15rem,3.4vw,1.5rem); max-width:34ch;
  margin:1rem auto 0; color:var(--ink); }
.hero__prop em{ font-style:italic; }

/* the §0 demonstration — honest colours, glyph + sign never alone */
.delta{ font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.delta--down{ color:var(--loss); } .delta--up{ color:var(--gain); }
.reveal{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; justify-content:center;
  align-items:baseline; font-family:var(--mono); font-size:1.02rem;
  margin:1.6rem auto 0; }
.reveal .lbl{ color:var(--ink-muted); font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; }

/* ---- buttons / store ----------------------------------------------------- */
.cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center;
  margin-top:1.8rem; }
.btn{ font-family:var(--ui); font-weight:600; font-size:.95rem; text-decoration:none;
  display:inline-flex; align-items:center; gap:.55rem; padding:.8rem 1.35rem;
  border:2px solid var(--ink); border-radius:3px; background:var(--ink);
  color:var(--paper); letter-spacing:.01em; transition:transform .12s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn__k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.72; display:block; line-height:1; }
.btn__t{ display:block; line-height:1.15; margin-top:.15rem; font-size:1.05rem; }
.btn-store{ text-align:left; padding:.7rem 1.3rem; }
/* the American office — a stamped plaque, never a dead link */
.plaque{ font-family:var(--ui); display:inline-flex; flex-direction:column;
  text-align:left; padding:.7rem 1.3rem; border:2px dashed var(--rule);
  border-radius:3px; color:var(--ink-muted); background:transparent; }
.plaque .btn__t{ color:var(--ink-muted); }
/* the .btn__k opacity is for cream-on-ink; on the cream plaque it would dip
   below AA, so restore full strength here (muted-on-cream = 5.8:1) */
.plaque .btn__k{ opacity:1; }
.hint{ font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--ink-muted); text-align:center; margin-top:.9rem; }

/* ---- stamp (rubber furniture; thunks, never bounces) --------------------- */
/* Ink by default — a stamp is decoration, and red is reserved for §0 loss
   (ART-001 v1.26: marks print in ink, never in the house oxblood spot). */
.stamp{ font-family:var(--ui); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; font-size:.8rem; color:var(--ink);
  border:2px solid var(--ink); border-radius:3px; padding:.28rem .6rem;
  display:inline-block; transform:rotate(-4deg); opacity:.9; }
.stamp--ink{ color:var(--ink); border-color:var(--ink); }
.stamp--notice{ color:var(--loss); border-color:var(--loss); }  /* a true notice */

/* ---- staff plates -------------------------------------------------------- */
.staff{ display:grid; gap:1.4rem; }
@media (min-width:720px){ .staff{ grid-template-columns:repeat(3,1fr); } }
.plate{ background:var(--paper); border:1px solid var(--rule); border-radius:2px;
  box-shadow:var(--shadow); overflow:hidden; }
.plate img{ width:100%; background:var(--paper); border-bottom:1px solid var(--rule); }
.plate__body{ padding:1rem 1.1rem 1.2rem; }
.plate__name{ font-weight:700; font-size:1.15rem; }
.plate__role{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted); margin:.15rem 0 .7rem; }
.plate__line{ font-style:italic; color:var(--ink); margin:0; font-size:1rem; }
.plate__sig{ font-family:var(--mono); font-size:.72rem; color:var(--ink-muted);
  margin-top:.7rem; }

/* ---- scenes (world) ------------------------------------------------------ */
.scene{ background:var(--paper); border:1px solid var(--rule); border-radius:2px;
  box-shadow:var(--shadow); overflow:hidden; }
.scene img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 42%;
  border-bottom:1px solid var(--rule); }
.scene__cap{ padding:.85rem 1rem 1rem; }
.scene__cap b{ display:block; }
.scene__cap span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-muted); }

/* ---- scene gallery (world) ---------------------------------------------- */
.gallery{ display:grid; gap:1.3rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:820px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
.gallery figure{ margin:0; background:var(--paper); border:1px solid var(--rule);
  border-radius:2px; box-shadow:var(--shadow); overflow:hidden; }
.gallery img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 38%;
  border-bottom:1px solid var(--rule); background:var(--paper); }
.gallery figcaption{ padding:.8rem .95rem 1rem; }
.gallery figcaption b{ display:block; font-size:1.05rem; }
.gallery figcaption span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-muted); display:block; margin-bottom:.35rem; }
.gallery figcaption p{ margin:.35rem 0 0; font-size:.95rem; font-style:italic; }

/* a wide inset figure (the paper / the machine) */
.inset{ display:grid; gap:1.5rem; align-items:center; }
@media (min-width:720px){ .inset{ grid-template-columns:1fr 1fr; }
  .inset--r img{ order:2; } }
.inset img{ width:100%; border:1px solid var(--rule); border-radius:2px;
  box-shadow:var(--shadow); aspect-ratio:4/5; object-fit:cover; object-position:center 40%; }

/* ---- fact table (press) -------------------------------------------------- */
.facts{ width:100%; border-collapse:collapse; font-size:1rem; }
.facts th,.facts td{ text-align:left; padding:.6rem .5rem; vertical-align:top;
  border-bottom:1px solid var(--rule); }
.facts th{ font-family:var(--mono); font-weight:600; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted);
  white-space:nowrap; width:12rem; }
.facts td b{ font-weight:600; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.guinea{ color:var(--guinea); font-weight:600; }

/* ---- signpost rows (plain english) -------------------------------------- */
.signpost{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
.signpost li{ background:var(--paper); border:1px solid var(--rule);
  border-left:3px solid var(--ink); border-radius:2px; box-shadow:var(--shadow);
  padding:1.1rem 1.2rem; }
.signpost h3{ margin:0 0 .3rem; display:flex; align-items:center; gap:.6rem; }
.signpost p{ margin:0 0 .7rem; }
.signpost a.out{ font-family:var(--ui); font-weight:600; font-size:.9rem;
  text-decoration:none; border-bottom:2px solid var(--loss); }
.signpost a.out::after{ content:" \2197"; }         /* ↗ leaves the site */
.tag{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.15rem .45rem; border-radius:2px;
  background:var(--paper-shade); color:var(--ink-muted); border:1px solid var(--rule); }
.tag--todo{ color:var(--loss); border-color:var(--loss); }

/* ---- FAQ (native details, no JS) ---------------------------------------- */
.faq details{ border-bottom:1px solid var(--rule); padding:.4rem 0; }
.faq summary{ font-family:var(--serif); font-weight:600; font-size:1.14rem;
  cursor:pointer; list-style:none; padding:.7rem 2rem .7rem 0; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:.2rem; top:.55rem;
  font-family:var(--mono); color:var(--loss); font-size:1.3rem; }
.faq details[open] summary::after{ content:"\2212"; }   /* − */
.faq .a{ padding:0 0 1rem; max-width:var(--measure); }

/* ---- screenshot placeholders (operator supplies the live captures) ------- */
.shots{ display:grid; gap:1.2rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:720px){ .shots{ grid-template-columns:repeat(4,1fr); } }
.shot{ aspect-ratio:9/18; background:var(--paper-shade);
  border:1px solid var(--rule); border-radius:8px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem; padding:1rem; text-align:center; }
.shot .stamp{ font-size:.62rem; color:var(--ink); }  /* win over .shot span */
.shot span{ font-family:var(--mono); font-size:.68rem; line-height:1.4;
  color:var(--ink-muted); letter-spacing:.02em; }
.shot b{ font-family:var(--mono); font-size:.7rem; color:var(--ink);
  letter-spacing:.14em; }

/* ---- the seal (footer close) -------------------------------------------- */
.close{ text-align:center; padding:3rem 0 1rem; }
.close img{ width:min(46vw,196px); aspect-ratio:1; margin:0 auto 1rem; }
.close p{ font-family:var(--mono); font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted); max-width:40ch; margin:0 auto; }

/* ---- footer -------------------------------------------------------------- */
.foot{ background:var(--ink); color:var(--paper); font-family:var(--ui);
  font-size:.88rem; }
.foot__inner{ width:var(--page); margin-inline:auto; padding:2.2rem 0;
  display:grid; gap:1.4rem; }
@media (min-width:720px){ .foot__inner{ grid-template-columns:1.4fr 1fr 1fr; } }
.foot h2{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:#c9b98f; margin:0 0 .7rem; font-weight:600;
  line-height:1.2; }
.foot a{ color:var(--paper); text-decoration:none; opacity:.9;
  border-bottom:1px solid rgba(245,240,230,.25); }
.foot a:hover{ opacity:1; border-bottom-color:var(--paper); }
.foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.foot__brand b{ font-family:var(--serif); font-size:1.1rem; }
.foot__legal{ opacity:.72; font-size:.8rem; line-height:1.5; margin-top:.4rem; }
.foot__base{ border-top:1px solid rgba(245,240,230,.16); }
.foot__base div{ width:var(--page); margin-inline:auto; padding:1rem 0;
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-size:.76rem; opacity:.72;
  font-family:var(--mono); letter-spacing:.03em; }

/* ---- motion / a11y ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .wire__track{ animation:none; transform:none; }
  .btn{ transition:none; }
  *{ scroll-behavior:auto !important; }
}