/* ============================================================
   The Unknown Unknown — Design System
   Colour + type tokens · "Signal" (light)

   Light-first: warm paper canvas, one fuchsia signal, and a
   working set of five that each recur on EVERY page.
   Supersedes the violet / near-black HerStory system.
   ============================================================ */

:root{

  /* ---- Canvas & ink -----------------------------------------
     Warm paper, never #FFFFFF. Ink is pulled toward the signal
     so even the black belongs to the brand. There are no greys
     in this system — every neutral is an ink or signal tint. */
  --paper:#F7F4EE;      /* the canvas */
  --surface-1:#F2EFE8;  /* recessed panels */
  --surface-2:#EDE9E1;  /* deeper panels */
  --ink:#14100F;        /* body + display · 17.2:1 on paper */

  --fg1:rgba(20,16,15,.96);  /* emphasis inside body copy */
  --fg2:rgba(20,16,15,.88);  /* lead text */
  --fg3:rgba(20,16,15,.78);  /* BODY COPY · 9.1:1 at weight 400 */
  --fg4:rgba(20,16,15,.75);  /* captions · 8.1:1 (300 only from 20px up) */
  --fg5:rgba(20,16,15,.92);  /* tracked mono labels · 14.4:1 */
  --fg6:rgba(20,16,15,.20);  /* DECORATIVE ONLY — watermarks, giant numerals */

  --hairline:rgba(20,16,15,.13);    /* the one border weight */
  --hairline-2:rgba(20,16,15,.24);  /* section rules */

  /* ---- The signal · the ask ---------------------------------
     Fuchsia is the only colour in the system permitted to ask.
     ONE moment per screen — its power is its scarcity. */
  --sig:#D6006B;        /* fill, buttons, text ≥1rem · 4.7:1 · white on it 5.2:1 */
  --sig-deep:#9A004E;   /* ALL tracked mono labels <1rem · 7.7:1 AAA */
  --sig-dark:#5C002E;   /* pressed states; ink for labels on a signal fill · 12.8:1 */
  --sig-light:#F5348F;  /* FILL ONLY on paper (3.3:1) */
  --sig-bright:#FF7EB6; /* emphasis on prussian/olive grounds · 7.5:1 */
  --sig-pale:rgba(214,0,107,.07);
  --sig-faint:rgba(214,0,107,.035);
  --sig-border:rgba(214,0,107,.28);

  /* ---- The working set --------------------------------------
     Five colours, each with a role that RECURS ON EVERY PAGE.
     Assigning a colour to a document type instead makes the
     system read as monotone — one colour visible per page. */

  /* Prussian · structure. Section counts, numerals, stat figures,
     gradient dividers, the deep band that closes a document. */
  --deep:#001B2E;                    /* 16.0:1 on paper */
  --deep-glow:rgba(0,27,46,.10);     /* the hero/close radial */

  /* Olive · the second voice. Rule labels, pull-quote type, row
     hovers, and every word set on beige. What is argued, not sold. */
  --olive:#41521F;                   /* 7.8:1 on paper · 7.2:1 with beige */
  --olive-faint:rgba(65,82,31,.045);
  --olive-border:rgba(65,82,31,.30);

  /* Cyan · the meta layer. Eyebrows, links in running text, ticker
     glyphs, provenance + confidence labels, table hovers. */
  --cyan:#2E7375;       /* text ≥1rem · 5.0:1 */
  --cyan-deep:#1A5153;  /* tracked mono labels <1rem · 8.2:1 AAA */
  --cyan-mid:#4B8F8C;   /* fill + chart series only */

  /* Aqua · the highlight. The mark behind a phrase, active states,
     one chart series. A fill that CARRIES type, never type itself. */
  --aqua:#84DCC6;       /* ink on it 12.0:1 */

  /* Beige · the interval. Ticker strips, pull-quote bands, long-read
     grounds. At least one per document, always with olive as its ink. */
  --beige:#EAF0CE;      /* olive on it 7.2:1 — little headroom, never lighten */

  /* ---- Heritage ---------------------------------------------
     Founding material only: 8 March 2026, origin story,
     anniversary artefacts. NEVER a button, link or UI state. */
  --violet:#7B2FBE;

  /* ---- Held back --------------------------------------------
     #E27396 petal rose · #EFCFE3 petal frost · #8FAD88 sage
     Near-relatives of the signal and aqua. They add softness,
     not range. Out of the interface entirely. */

  /* ---- Data visualisation -----------------------------------
     One warm, two darks, two cools — five genuinely distinct
     quantities, legible in greyscale. Series one is always the
     signal, because series one is the number being sold. */
  --data-1:#D6006B; --data-2:#001B2E; --data-3:#41521F;
  --data-4:#4B8F8C; --data-5:#84DCC6;

  /* ---- Functional (product UI only, never marketing) --------- */
  --success:#1F6B47; --warning:#8A5A00; --danger:#9A004E; --info:#1A5153;
  --success-pale:#E8F2EC; --warning-pale:#F7EFDD; --danger-pale:#FDEBF3;

  /* ---- Dark grounds -----------------------------------------
     On prussian or olive the size gate FLIPS: small type gets
     BRIGHTER, not darker. */
  --on-dark:#FFFFFF;
  --on-dark-2:rgba(255,255,255,.82);
  --on-dark-3:rgba(255,255,255,.72);
  --rule-dark:rgba(255,255,255,.14);
  /* small labels on prussian → --sig-bright (7.5:1) or --aqua */

  /* ---- Type -------------------------------------------------- */
  --serif:'Cormorant Garamond',Georgia,serif;    /* display, headlines, quotes, figures */
  --sans:'IBM Plex Sans',system-ui,sans-serif;   /* all body copy */
  --mono:'IBM Plex Mono',ui-monospace,monospace; /* labels, eyebrows, nav, tickers — ALWAYS uppercase + tracked */

  --w-light:300; --w-reg:400; --w-med:500; --w-semi:600; --w-bold:700;

  --t-hero:clamp(3.4rem,7.4vw,7rem);
  --t-display:clamp(2.6rem,5.4vw,4.6rem);
  --t-h1:2.9rem; --t-h2:2.15rem; --t-h3:1.2rem;
  --t-quote:clamp(2rem,4vw,3.2rem);
  --t-stat:3.2rem;
  --t-lead:1.25rem; --t-body:1.125rem; --t-sm:1rem;
  --t-label:.95rem; --t-mono:.72rem; --t-mono-sm:.7rem;

  --lh-tight:.98; --lh-snug:1.04; --lh-body:1.85; --lh-quote:1.28;
  --track-eyebrow:.20em; --track-label:.14em; --track-tight:-.03em;

  /* ---- THE SIZE GATE (applies to every hue, not just the signal)
     The smaller the type, the more contrast it takes.
       ≥1rem  → --sig / --cyan
       <1rem  → --sig-deep / --cyan-deep / --olive / --deep
     On dark grounds the rule inverts: small type goes brighter. */

  /* ---- Readability floors (hard minimums — always default UP) - */
  --min-body:17px;   /* screen body, weight 400 — never 300 */
  --min-label:14px;  /* UI label / caption */
  --min-mono:11px;   /* tracked mono label */
  --min-touch:44px;  /* hit target */
  /* Slides 1920×1080: body ≥28px (never below 24px), labels ≥24px.
     Print: body ≥12pt, default 14pt. */

  /* ---- Space, shape, motion ---------------------------------- */
  --radius:0;                 /* SHARP CORNERS EVERYWHERE. Load-bearing. */
  --hair:1px;
  --lift:-4px; --lift-sm:-2px;/* elevation = border shift + lift, NEVER a shadow */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --pad-section-y:6rem; --pad-section-x:5rem; --pad-section-x-mobile:1.5rem;
  --dur-fast:.2s; --dur-mid:.4s; --dur-slow:.9s;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   Base
   ============================================================ */
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);font-weight:var(--w-reg);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
/* Film grain keeps the paper from reading clinical. Never omit it. */
body::before{content:'';position:fixed;inset:0;background-image:url('assets/grain.svg');opacity:.055;pointer-events:none;z-index:100;mix-blend-mode:multiply}
a{color:var(--cyan-deep);text-decoration:none;transition:color var(--dur-fast) var(--ease)}
a:hover{color:var(--deep)}
mark{background:var(--aqua);color:var(--ink);padding:.06em .22em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ============================================================
   Type roles
   ============================================================ */
.hero-title{font-family:var(--serif);font-size:var(--t-hero);font-weight:var(--w-bold);line-height:var(--lh-tight);letter-spacing:var(--track-tight)}
.display{font-family:var(--serif);font-size:var(--t-display);font-weight:var(--w-bold);line-height:var(--lh-snug);letter-spacing:var(--track-tight)}
.hero-title em,.display em{font-style:italic;color:var(--sig)}  /* ONE per screen */
.lead{font-size:var(--t-lead);font-weight:var(--w-light);line-height:1.7;color:var(--fg4);max-width:34em}
.copy{font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg3);max-width:38em}
.caption{font-size:var(--t-sm);color:var(--fg4);line-height:1.6}
.eyebrow{font-family:var(--mono);font-size:var(--t-mono);font-weight:var(--w-med);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--cyan-deep)}
.label{font-family:var(--mono);font-size:var(--t-mono-sm);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg5)}
.sec-count{font-family:var(--mono);font-size:var(--t-mono);font-weight:var(--w-med);letter-spacing:.18em;text-transform:uppercase;color:var(--deep)}
.rule-label{font-family:var(--mono);font-size:.74rem;font-weight:var(--w-med);letter-spacing:.16em;text-transform:uppercase;color:var(--olive)}
.stat-fig{font-family:var(--serif);font-size:var(--t-stat);font-weight:var(--w-bold);line-height:1;color:var(--deep)}
.stat-fig span{color:var(--cyan)}
.quote{font-family:var(--serif);font-size:var(--t-quote);font-style:italic;font-weight:var(--w-light);line-height:var(--lh-quote);color:var(--olive);max-width:26em}

/* ============================================================
   Buttons — square, ≥44px, one hover behaviour
   ============================================================ */
.btn{display:inline-flex;align-items:center;min-height:var(--min-touch);padding:0 22px;font-family:var(--mono);font-size:var(--t-mono);font-weight:var(--w-med);letter-spacing:var(--track-label);text-transform:uppercase;border:var(--hair) solid transparent;border-radius:var(--radius);white-space:nowrap;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.btn-primary{background:var(--sig);color:#fff;border-color:var(--sig)}  /* THE ask — one per screen */
.btn-primary:hover{background:var(--sig-deep);border-color:var(--sig-deep);color:#fff;transform:translateY(var(--lift-sm))}
.btn-ghost{border-color:var(--hairline);color:var(--fg2)}
.btn-ghost:hover{border-color:var(--cyan-deep);color:var(--cyan-deep);transform:translateY(var(--lift-sm))}
.on-dark .btn-ghost{border-color:var(--rule-dark);color:var(--on-dark)}
.on-dark .btn-ghost:hover{border-color:var(--aqua);color:var(--aqua)}

/* ============================================================
   Surfaces — every document gets at least one non-paper ground
   ============================================================ */
.surface-deep{background:var(--deep);color:var(--on-dark)}      /* proof, closing */
.surface-deep .eyebrow{color:var(--sig-bright)}
.surface-olive{background:var(--olive);color:var(--beige)}      /* field, partnership */
.surface-beige{background:var(--beige);color:var(--olive)}      /* long reads, tickers, quotes */
.surface-signal{background:var(--sig);color:#fff}               /* commercial covers */
.surface-wash{background:var(--surface-1)}

/* ============================================================
   Components — 1px border, sharp, lift on hover, never a shadow
   ============================================================ */
.card{border:var(--hair) solid var(--hairline);padding:var(--s4);transition:all var(--dur-fast) var(--ease)}
.card:hover{border-color:var(--cyan);background:var(--surface-1);transform:translateY(var(--lift))}
.row-item{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);border-left:3px solid var(--olive);background:var(--olive-faint);padding:19px var(--s3);margin-bottom:var(--s1)}
.tag{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;padding:10px 15px;border:var(--hair) solid var(--hairline);color:var(--fg5)}
.tag-on{background:var(--sig);border-color:var(--sig);color:#fff}
.tag-sel{background:var(--sig-pale);border-color:var(--sig);color:var(--sig-dark)}
.hairline{height:1px;background:var(--hairline)}
.deep-rule{height:2px;background:linear-gradient(to right,var(--deep),transparent)}

/* ============================================================
   Motion — restrained. No bounce, no spring, no parallax.
   Reveal: opacity 0→1 + translateY(24px→0) over .9s ease.
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) ease,transform var(--dur-slow) ease}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}