/* site.css — the one stylesheet every page shares.
 *
 * WHY THIS EXISTS
 *   Until 2026-08-21 there was no shared stylesheet at all: 166KB of CSS, hand-copied
 *   twelve times, nothing in common. That single fact produced both of the complaints
 *   the design review measured. Everything looked the same, because one copied recipe
 *   was the only recipe there was. And everything was subtly WRONG in a different way on
 *   each page, because there were twelve copies drifting apart:
 *
 *     :root      8 different versions across 12 pages
 *     .eyebrow   7 versions across 10 pages
 *     .bar       5 versions across 11 pages
 *     .foot      4 versions across 10 pages
 *     .reveal    4 versions across  6 pages
 *
 *   /merch lost its entire navigation and nobody noticed. Headings drifted between Title
 *   Case and lowercase. A page defined --faint and used --panel it had never declared.
 *   Same-but-inconsistent is not a contradiction; it is the signature of a missing system.
 *
 * WHAT BELONGS HERE
 *   Only what genuinely repeats: the tokens, the header, the footer, the wordmark, the
 *   buttons, the eyebrow, the reveal, the focus ring. Measured, not guessed — every rule
 *   below was on four or more pages, and where versions had drifted the majority won.
 *   812 selectors are used on three pages or fewer; those stay in the page that owns them.
 *   A page's SIGNATURE — the thing only it does — is page-local by design. This file is
 *   the grammar, not the sentence.
 *
 * HOW TO USE IT
 *   <link rel="stylesheet" href="/assets/css/site.css?v=1"> BEFORE the page's own
 *   <style>, so a page can still override deliberately. _headers caches /assets/css/*
 *   for a day, so bump ?v= when this changes or a returning visitor keeps the old copy.
 */

/* ============================================================ tokens ==== */
/* Brand invariants, and they do not move: one background, one cream, one amber, one
   typeface. Source of truth is yoggin-brain/ideas/meta/brand.md. */
:root{
  --void:#0d1117;        /* the page */
  --navy:#141b25;        /* a panel on it */
  --navy2:#1c2530;       /* a panel on a panel */
  --line:#2a333f;        /* every border */
  --hairline:rgba(241,239,232,.12);
  --cream:#F1EFE8;       /* every word that matters */
  --read:#cfd2cc;        /* long-form body copy */
  --muted:#9a978f;       /* secondary copy */
  --dim:#6d6b66;         /* tertiary */
  --faint:#838179;       /* legal, stamps, captions */
  --amber:#E0A45E;       /* the ONE accent. never a second one. */
  --ice:#FBEFDB;         /* a filled button's rest state */
  --up:#6FC48C;          /* a number that went the good way */
  --down:#E07A5F;        /* and the bad way */

  /* ONE typeface, everywhere. That is the brand — no second font, anywhere, ever.
     The all-caps look is this same face tracked out, never a mono substitute. */
  --display:'Architects Daughter','Comic Sans MS',cursive;
  --body:'Architects Daughter','Comic Sans MS',cursive;
  --disp-track:.005em; --disp-weight:400; --disp-lh:.98;
  --eyebrow-track:.34em;
  /* the ONLY place a second family is allowed: columns of figures that must line up */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ============================================================== base ==== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--void);color:var(--cream);font-family:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}

/* A very large monitor gets a zoomed page rather than a page of tiny type.
   LANDMINE: css zoom is NOT accounted for by viewport units, so anything sized in
   svh/vh inside a zoomed page must be divided by the same factor — see the .hero
   overrides that live in each page. */
@media (min-width:1700px){html{zoom:1.25;}}
@media (min-width:2200px){html{zoom:1.5;}}

/* The grain. It is what stops a flat #0d1117 reading like a default dark theme. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:4px;
  border-radius:2px;}

/* THE `hidden` GUARD. It lives here now (2026-08-24), not copied into twelve pages.
   Without it, ANY rule that sets `display` outranks the hidden attribute's UA
   `display:none` and the element renders anyway -- silently, with nothing in the
   console. It has now shipped as a real bug TWICE: the parked streamer-in-a-box buy
   buttons rendered with their flag off, and /services drew an empty amber tag pill
   plus a "change" button above the message box on every load, because
   `.tagrow{display:flex}` beat the attribute. An audit on 2026-08-24 found only
   three of sixteen pages carried their own copy.
   /draft, /privacy and /terms do NOT load this file on purpose (see docs/NEXT.html),
   so they keep a page-local copy. Nothing else should. */
[hidden]{display:none !important;}

/* ============================================================ wordmark ==== */
.wm{font-family:var(--display);text-transform:none;}
.dot{color:var(--amber);}

/* ============================================================== header ==== */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:1.1rem clamp(1.2rem,4vw,3rem);
  background:linear-gradient(180deg,rgba(13,17,23,.82),rgba(13,17,23,0));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;}
/* set by each page's scroll handler once you are past the hero */
.bar.solid{background:var(--void);border-bottom-color:var(--line);
  backdrop-filter:none;-webkit-backdrop-filter:none;}
.bar__wm{font-family:var(--display);font-size:1.5rem;color:var(--cream);text-decoration:none;}
.bar__nav{display:flex;gap:1.7rem;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;font-family:var(--display);}
.bar__nav a{color:var(--muted);text-decoration:none;transition:color .2s ease;}
.bar__nav a:hover{color:var(--cream);}
/* On a phone the bar keeps only the marked links; menu.js replaces the rest with a
   burger and builds its overlay from these same anchors, carrying their classes. */
@media (max-width:720px){
  .bar__nav a{display:none;}
  .bar__nav a.m-keep{display:inline-block;}
}

/* ============================================================= eyebrow ==== */
/* Use it sparingly. Seven of these on one page is a tic, not a system — /draft had
   exactly that before the redesign. */
.eyebrow{font-family:var(--display);font-size:.72rem;letter-spacing:var(--eyebrow-track);
  text-transform:uppercase;color:var(--amber);display:inline-flex;align-items:center;gap:.7rem;}

/* ============================================================= buttons ==== */
.pill{font-family:var(--display);font-size:1rem;letter-spacing:.02em;text-decoration:none;
  cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.7rem;border-radius:999px;background:var(--ice);color:var(--void);
  border:1px solid var(--ice);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;}
.pill:hover{background:var(--amber);border-color:var(--amber);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(224,164,94,.28);}
.pill--ghost{background:none;color:var(--cream);border-color:var(--line);}
.pill--ghost:hover{background:rgba(224,164,94,.08);border-color:var(--amber);
  color:var(--cream);box-shadow:none;transform:none;}

/* ============================================================== reveal ==== */
/* TWO class names, and both are load-bearing. The pages drifted into calling the
   revealed state `.in` (index, services, why, socials) and `.in-view` (draft, fantasy).
   Honouring only one of them would leave four pages permanently at opacity 0 -- blank
   pages, no error, nothing in the console. They get unified when those pages are
   rebuilt; until then this rule is what keeps them visible. */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s ease,transform .8s ease;}
.reveal.in-view,.reveal.in{opacity:1;transform:none;}

/* ============================================================== footer ==== */
.foot{background:var(--void);border-top:1px solid var(--line);
  padding:clamp(2.2rem,5vw,3rem) clamp(1.3rem,6vw,5rem) clamp(1.8rem,4vw,2.6rem);}
.foot__in{max-width:1180px;margin:0 auto;}
.foot__strips{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:start;}
.foot__strip{display:flex;flex-wrap:wrap;gap:0 .55rem;font-size:.95rem;
  align-items:center;}
.foot__strip + .foot__strip{margin-top:.15rem;}
.foot__k{font-family:var(--display);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber);margin-right:.65rem;}
/* Andrew, 2026-08-22: "the hyperlinks don't even, like, work." They do -- all four
   destinations are live and nothing intercepts the click. The problem is that these
   were bare text nodes with no box around them, so on a phone there was almost
   nothing to hit: the "x" link measured SEVEN PIXELS wide. Each one is a real target
   now, 44px tall with a floor on its width, and the row's gap comes down by what the
   padding adds so the footer does not grow. */
.foot__strip a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:2.4rem;padding:0 .5rem;
  color:var(--muted);text-decoration:none;transition:color .2s ease;}
.foot__strip a:hover{color:var(--cream);}
.foot__tag{color:var(--muted);font-size:.95rem;text-align:right;max-width:26ch;
  line-height:1.6;}
.foot__brand{flex-direction:column;align-items:flex-start;}
/* The wordmark must stay fully visible — it is the signature at the end of every page,
   and clipping it is the one thing this block is not allowed to do. */
.foot__wm{font-family:var(--display);font-size:clamp(3rem,11vw,7.5rem);color:var(--cream);
  line-height:.9;opacity:.9;}
.foot__legal{font-size:.86rem;letter-spacing:.03em;color:var(--faint);text-align:right;
  line-height:1.7;}
.foot__legal a{color:var(--faint);text-decoration:none;}
.foot__legal a:hover{color:var(--cream);}
@media (max-width:760px){
  .foot__strips{grid-template-columns:1fr;}
  .foot__tag,.foot__legal{text-align:left;}
}

/* ==================================================== reduced motion ==== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal.in,.reveal.in-view{opacity:1;transform:none;transition:none;}
  .pill:hover{transform:none;}
}