/* ============================================================
   JIIVE — DESIGN TOKENS (v3 · gold period)
   The single source for every CSS custom property on the site.
   DESIGN.md names these tokens ({colors.emerald-ink} → --color-emerald-ink);
   the values live here and nowhere else.

   Naming: --{group}-{name}
     color · font · weight · text · leading · tracking · measure
     space · grid · radius · shadow · filter · ease · dur · motion
     beat · story · z · size
   Composite values (gradients) use a bare name: --gold-bead, --glass-cell,
   --band-story, --band-footer.

   Light mode only. There is no dark theme.

   Removed in v3: --color-gold, --color-plan-fill, --color-plan-border,
   --color-plan-fill-featured, --text-display-xl, --text-eyebrow,
   --tracking-eyebrow, --shadow-float, --z-float, the [data-theme="dark"] block.

   Contrast ratios quoted below are WCAG 2.x, measured against the
   resolved sRGB value of each oklch() colour.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- Brand ---------- */
  --color-emerald-ink:   oklch(0.22 0.05 155);    /* #032110 — headlines, primary pills, bands, footer */
  --color-emerald-deep:  oklch(0.18 0.04 155);    /* #021709 — body text on light surfaces */
  --color-vital-green:   oklch(0.52 0.12 162);    /* #007d53 — the one interactive accent. 4.65:1 on bg, 5.14:1 on surface, 3.3:1 on ink (graphics only) */

  /* ---------- Light surfaces ---------- */
  --color-bg:            oklch(0.965 0.012 85);   /* #f7f3eb — cream canvas */
  --color-surface:       oklch(1 0 0);            /* #ffffff — panels, bubbles, highlighted ledger rows */
  --color-border:        oklch(0.88 0.015 85);    /* #dcd7cd — hairlines (decorative, not a text colour) */
  --color-text-secondary: oklch(0.42 0.03 155);   /* #405246 — 7.53:1 on bg, 8.33:1 on surface */

  /* translucent light steps */
  --color-header-bg:     oklch(0.965 0.012 85 / 0.85);  /* sticky header on cream, behind backdrop blur */
  --color-header-border: oklch(0.88 0.015 85 / 0.6);
  --color-bg-wash:       oklch(0.965 0.012 85 / 0.82);  /* cream wash over art behind copy */
  --color-figure-light:  oklch(0.934 0.012 133);        /* #e6ebe3 — body-diagram figure, top-left of its gradient (prototype --fig-1) */
  --color-figure-shade:  oklch(0.872 0.02 133);         /* #d0d8cb — body-diagram figure, bottom-right (prototype --fig-2) */
  --color-figure-shadow: oklch(0.22 0.05 155 / 0.12);   /* the figure's soft drop shadow (prototype #1f2b22 at .12) */

  /* ---------- On dark (story band, footer, report heads) ----------
     Text on emerald uses ONLY these four. No other greys on emerald. */
  --color-ink-contrast:  #fdfcf9;                 /* primary text: 16.6:1 on ink, 11.2:1 on band glow */
  --color-on-dark:       oklch(0.9 0.015 85);     /* running copy on bands: 12.7:1 on ink, 8.5:1 on glow */
  --color-on-dark-muted: #cfd8d2;                 /* secondary text: 11.7:1 on ink, 7.9:1 on glow */
  --color-on-dark-accent: oklch(0.75 0.09 162);   /* #77c09d — labels, ticks on dark: 8.0:1 on ink, 5.4:1 on glow */

  /* dark structure */
  --color-band-glow:     oklch(0.34 0.05 155);    /* #21402c — centre of the story and footer radials */
  --color-on-dark-hairline: oklch(0.32 0.03 155); /* rules on emerald */
  --color-header-bg-dark: oklch(0.22 0.05 155 / 0.85);   /* sticky header while it sits over the story band */
  --color-header-border-dark: var(--color-on-dark-hairline);

  /* scrims (functional gradients only: footer art) */
  --color-scrim-strong:  oklch(0.22 0.05 155 / 0.9);
  --color-scrim:         oklch(0.22 0.05 155 / 0.6);
  --color-scrim-faint:   oklch(0.22 0.05 155 / 0.1);
  --color-scrim-clear:   oklch(0.22 0.05 155 / 0);
  --color-backdrop:      oklch(0.22 0.05 155 / 0.4);  /* behind the menu sheet */

  /* ---------- Gold — the period and the drop ONLY ----------
     Never text, UI, borders, focus, fills, icons or imagery. */
  --color-gold-100:      #fffdf2;   /* specular highlight */
  --color-gold-200:      #fbe6a6;
  --color-gold-300:      #edc46a;
  --color-gold-400:      #c9932f;   /* core */
  --color-gold-500:      #93621a;
  --color-gold-600:      #5e3d0d;
  --color-gold-700:      #452c08;   /* rim shadow */
  --color-gold-metal:    #e9ae48;   /* Three.js base colour of the liquid-gold drop */
  --color-gold-glow:     #f2c666;   /* glow sprites and particle halos (story renderer) */
  --color-gold-halo:     #f0cd78;   /* CSS bead halo */
  --color-gold-ring:     #f0d58e;   /* landing ring pulse */
  --color-gold-shadow:   #281804;   /* contact shadow under a bead */

  /* ---------- Story renderer mirrors ----------
     Three.js r128 cannot parse oklch(), so the renderer reads these hex
     copies at boot (getComputedStyle). Keep each in sync with its source. */
  --color-story-glass:      #007d53;  /* = --color-vital-green — glass shell, cytoplasm */
  --color-story-glass-back: #032110;  /* = --color-emerald-ink — glass back face, cell edge */
  --color-story-rim:        #77c09d;  /* = --color-on-dark-accent — fresnel rim, green glow, cell highlight */
  --color-story-band-glow:  #21402c;  /* = --color-band-glow — 2D cell mid-tone */
  --color-story-key-light:  #fff1dc;  /* studio key light */
  --color-story-fill-light: #d9f0e0;  /* studio fill light */

  /* ---------- Focus + form states ---------- */
  --color-focus-ring:    oklch(0.52 0.12 162 / 0.18);  /* 3px glow around a focused input */
  --color-error-ring:    oklch(0.5 0.18 25 / 0.12);

  /* ---------- Report flags (SEMANTIC — report results only, never UI) ---------- */
  --color-flag-ok-bg:      #eaf3de;
  --color-flag-ok-text:    #27500a;   /* 8.2:1 */
  --color-flag-watch-bg:   #faeeda;
  --color-flag-watch-text: #633806;   /* 8.7:1 */
  --color-flag-act-bg:     #fcebeb;
  --color-flag-act-text:   #791f1f;   /* 9.0:1 */

  /* ---------- Composite surfaces ---------- */
  --gold-bead:
    radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--color-gold-200) 55%, transparent) 0, transparent 30%),
    radial-gradient(circle at 33% 27%, var(--color-gold-100) 0, var(--color-gold-200) 8%, var(--color-gold-300) 21%, var(--color-gold-400) 43%, var(--color-gold-500) 67%, var(--color-gold-600) 87%, var(--color-gold-700) 100%);
  --glass-cell:
    radial-gradient(circle at 31% 25%, color-mix(in srgb, var(--color-surface) 95%, transparent) 0, transparent 9%),
    radial-gradient(circle at 66% 78%, color-mix(in srgb, var(--color-on-dark-accent) 50%, transparent) 0, transparent 14%),
    radial-gradient(circle at 50% 54%, var(--color-gold-200) 0, var(--color-gold-300) 6%, var(--color-gold-500) 14%, transparent 17%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-vital-green) 22%, transparent) 0, color-mix(in srgb, var(--color-vital-green) 34%, transparent) 56%, color-mix(in srgb, var(--color-on-dark-accent) 80%, transparent) 68.5%, color-mix(in srgb, var(--color-emerald-ink) 75%, transparent) 70.5%, transparent 72%);
  --band-story:  radial-gradient(120% 70% at 63% 50%, var(--color-band-glow) 0%, var(--color-emerald-ink) 55%, var(--color-emerald-deep) 100%);
  --band-footer: radial-gradient(90% 80% at 50% 45%, var(--color-band-glow) 0%, var(--color-emerald-ink) 70%);

  /* ---------- Type families ----------
     Each web font is followed by a metric-matched copy of its fallback (the
     @font-face rules after this block), so text set before the fonts arrive
     wraps the same way and nothing shifts when they swap in. */
  --font-display: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-body:    "IBM Plex Sans", "Plex Sans Fallback", "Plex Sans Fallback Arial", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "Plex Mono Fallback", "Plex Mono Fallback Courier", Consolas, monospace;

  /* ---------- Weights ---------- */
  --weight-display:  380;   /* every serif headline, price and stat */
  --weight-numeral:  340;   /* the story's result number */
  --weight-body:     400;
  --weight-medium:   500;
  --weight-strong:   600;   /* card titles, buttons, ledger names */
  --weight-mono:     500;

  /* ---------- Type scale ---------- */
  --text-hero:           clamp(2.6rem, 5.6vw, 5.1rem);    /* Home h1 in the hero */
  --text-page-title:     clamp(2.4rem, 5vw, 3.9rem);      /* h1 on every other page */
  --text-section:        clamp(1.9rem, 4vw, 3.1rem);
  --text-story:          clamp(1.7rem, 3vw, 2.6rem);      /* story caption h2 */
  --text-numeral:        clamp(6rem, 15vw, 11rem);        /* story result number */
  --text-footer-line:    clamp(2.4rem, 6.4vw, 5.6rem);
  --text-title:          1.7rem;                          /* tier names, organ panel title */
  --text-price:          2.4rem;
  --text-stat:           clamp(1.9rem, 3.5vw, 2.6rem);
  --text-pull:           clamp(1.15rem, 2.2vw, 1.45rem);
  --text-lead:           clamp(1.1rem, 1.6vw, 1.2rem);
  --text-intro:          1.08rem;
  --text-story-sub:      1.05rem;                         /* story caption line */
  --text-body:           1.0625rem;                       /* 17px */
  --text-card-title:     1.1rem;
  --text-button:         0.875rem;   /* 14px, the liquid-glass pill */
  --text-caption:        0.92rem;
  --text-cluster-label:  0.82rem;                         /* story cluster names */
  --text-field-label:    0.75rem;
  --text-mono-meta:      0.72rem;

  --leading-numeral:     1;
  --leading-display:     1.02;   /* hero h1, prices */
  --leading-footer:      1.05;
  --leading-head:        1.08;   /* section heads, story captions */
  --leading-snug:        1.3;
  --leading-copy:        1.5;
  --leading-body:        1.55;

  --tracking-numeral:    -0.03em;
  --tracking-hero:       -0.025em;   /* hero h1, footer line */
  --tracking-display:    -0.02em;    /* every other serif headline */
  --tracking-label:      0.14em;
  --tracking-meta:       0.1em;

  --measure:             65ch;   /* running copy */
  --measure-head:        18em;   /* section headlines */
  --measure-caption:     34ch;   /* story caption line */
  --measure-footer:      16ch;   /* footer closing line */

  /* ---------- Spacing (8px base) ---------- */
  --space-xxs: 0.25rem;   /* 4 */
  --space-xs:  0.5rem;    /* 8 */
  --space-sm:  0.75rem;   /* 12 */
  --space-md:  1rem;      /* 16 */
  --space-lg:  1.5rem;    /* 24 */
  --space-xl:  2.5rem;    /* 40 */
  --space-2xl: 4rem;      /* 64 */

  /* section rhythm — pick by relationship, never patch per-ID */
  --space-section-tight: clamp(2.5rem, 5vw, 4rem);
  --space-section:       clamp(5rem, 12vw, 8.75rem);    /* 80–140px, the prototype's section padding */
  --space-section-loose: clamp(6rem, 13vw, 11rem);

  --space-split:       clamp(2rem, 6vw, 5rem);          /* gap between the halves of a split */
  --space-block:       clamp(2.25rem, 5vw, 3.5rem);     /* headline to the content it introduces */
  --space-hero-top:    calc(var(--size-header) + clamp(2rem, 3vw, 2.375rem));
  --space-hero-bottom: 3.75rem;
  --space-nav:         1.75rem;                          /* gap between header links */
  --space-card:        var(--space-lg);
  --space-card-roomy:  clamp(1.75rem, 3vw, 2.5rem);     /* form cards, the specimen */
  --size-pill:         3.5rem;    /* 56px: every liquid-glass pill except the header's */
  --space-pill-x:      2.5rem;    /* 40px sides */
  --space-pill-compact-y: 0.7rem;
  --space-pill-compact-x: 1.2rem;
  --space-chip-y:      0.22rem;   /* flag chips */
  --space-chip-x:      0.6rem;
  --space-input-y:     0.75rem;   /* form fields */
  --space-input-x:     0.9rem;

  /* ---------- Grid ---------- */
  --grid-max-width:    1120px;
  --grid-inline:       clamp(1.25rem, 4vw, 3.5rem);   /* .wrap side padding */
  --grid-columns:      12;
  --grid-gutter:       clamp(1rem, 2.5vw, 1.5rem);

  /* ---------- Radius ---------- */
  --radius-input:  12px;
  --radius-card:   20px;
  --radius-bubble: 20px;
  --radius-tail:   6px;      /* the tucked bubble corner */
  --radius-panel:  26px;
  --radius-frame:  30px;
  --radius-focus:  6px;      /* :focus-visible outline corners */
  --radius-pill:   9999px;
  --radius-full:   50%;

  /* ---------- Elevation (emerald-tinted, never grey) ---------- */
  --shadow-card:   0 1px 2px oklch(0.22 0.05 155 / 0.05), 0 8px 28px oklch(0.22 0.05 155 / 0.07);
  --shadow-bubble: 0 1px 1px oklch(0.22 0.05 155 / 0.06), 0 6px 18px oklch(0.22 0.05 155 / 0.06);
  /* liquid glass: every action pill. Rims and inner shading in emerald ink on cream, in cream on the bands
     (the supplied LiquidButton's light and dark shadows, with black and white mapped to the palette) */
  --shadow-glass:      0 0 6px oklch(0.22 0.05 155 / 0.03), 0 2px 6px oklch(0.22 0.05 155 / 0.08), inset 3px 3px 0.5px -3px oklch(0.22 0.05 155 / 0.9), inset -3px -3px 0.5px -3px oklch(0.22 0.05 155 / 0.85), inset 1px 1px 1px -0.5px oklch(0.22 0.05 155 / 0.6), inset -1px -1px 1px -0.5px oklch(0.22 0.05 155 / 0.6), inset 0 0 6px 6px oklch(0.22 0.05 155 / 0.12), inset 0 0 2px 2px oklch(0.22 0.05 155 / 0.06), 0 0 12px rgb(253 252 249 / 0.15);
  --shadow-glass-dark: 0 0 8px oklch(0.22 0.05 155 / 0.03), 0 2px 6px oklch(0.22 0.05 155 / 0.08), inset 3px 3px 0.5px -3.5px rgb(253 252 249 / 0.09), inset -3px -3px 0.5px -3.5px rgb(253 252 249 / 0.85), inset 1px 1px 1px -0.5px rgb(253 252 249 / 0.6), inset -1px -1px 1px -0.5px rgb(253 252 249 / 0.6), inset 0 0 6px 6px rgb(253 252 249 / 0.12), inset 0 0 2px 2px rgb(253 252 249 / 0.06), 0 0 12px oklch(0.22 0.05 155 / 0.15);
  --shadow-gold-edge:  inset 0 0 0 var(--size-hairline) var(--color-gold-300);   /* the very thin gold edge an emerald pill shows on hover */
  --shadow-frame:  0 24px 60px oklch(0.22 0.05 155 / 0.22);   /* 9:16 media frame */
  /* bead shadows belong to the gold object, so they are warm, not emerald */
  --shadow-bead:    0 0.03em 0.06em color-mix(in srgb, var(--color-gold-shadow) 45%, transparent), 0 0 0.22em color-mix(in srgb, var(--color-gold-halo) 35%, transparent);   /* inline periods (sized in em) */
  --shadow-speck:   0 0 6px color-mix(in srgb, var(--color-gold-halo) 60%, transparent);   /* the glow round a cluster bead */
  --shadow-bead-px: 0 1px 2px color-mix(in srgb, var(--color-gold-shadow) 40%, transparent), 0 0 10px color-mix(in srgb, var(--color-gold-halo) 45%, transparent);      /* rail bead, pricing dot */
  --filter-glyph:   drop-shadow(0 1px 1px oklch(0.22 0.05 155 / 0.5)) drop-shadow(0 3px 10px oklch(0.22 0.05 155 / 0.4));   /* the decorative hero "?" over the glass cell */

  /* ---------- Motion (site-wide) ---------- */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);     /* entrances, presses, reveals */
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);    /* on-screen movement */

  --dur-120: 120ms;   /* press, colour changes */
  --dur-200: 200ms;   /* hovers, exits, small toggles */
  --dur-320: 320ms;   /* sheets, panels, tab changes */
  --dur-500: 500ms;   /* section reveals, the period regrowing, the pricing cell */
  --dur-count: 1200ms; /* the Jiive Age count-up, once (What you get) */
  --dur-tier:  1100ms; /* a pricing visual opening on hover (the prototype's timing, on --ease-out so it never overshoots) */

  --motion-rise:   10px;   /* reveal travel distance */
  --motion-press:  0.97;   /* press scale */
  --motion-grow:   1.05;   /* hover scale on liquid-glass pills */
  --motion-lift-card: -3px;
  --motion-swap:   4px;    /* rise of panel content that replaces other content in place */
  --motion-nudge:  2px;    /* hover travel of a text link's arrow, in the direction it points */

  /* the heartbeat: the landed period only (header logo, footer full stop) */
  --beat-duration: 2.4s;
  --beat-ease:     ease-in-out;   /* contract value, see DESIGN.md "Scroll story contract" */

  --stagger:       60ms;   /* gap between items that enter together (30–80ms band) */

  /* ---------- Story (scroll story contract, enhanced v3) ----------
     Used inside the loader, the story stage and the progress rail only.
     Never use them anywhere else. */
  --story-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);   /* letter rise, "?" scale */
  --story-ease-fade:     var(--ease-out);                  /* loader cover, letter and "?" fades */
  --story-ease-slide:    cubic-bezier(0.6, 0, 0.2, 1);     /* wordmark slides from centred dot to centred word */
  --story-ease-fly:      cubic-bezier(0.7, 0, 0.2, 1);     /* wordmark flies into the header */
  --story-loader-fade:   850ms;
  --story-letter-fade:   500ms;
  --story-letter-rise:   700ms;
  --story-letter-travel: 0.1em;
  --story-slide:         900ms;
  --story-fly:           850ms;
  --story-cap-in:        var(--dur-500);   /* incoming caption: fade + rise, ease-out */
  --story-cap-out:       var(--dur-200);   /* outgoing caption: faster than it entered */
  --story-cap-travel:    16px;             /* rise of an incoming caption */
  --story-cap-exit:      8px;              /* drift of an outgoing caption */
  --story-label-travel:  6px;              /* cluster label rise as its cluster lands */
  --story-result-travel: 12px;             /* result number seats as the period lands */
  --story-regrow-from:   0.4;              /* header period regrows from this scale, never 0 */
  --story-q-fade:        900ms;
  --story-q-scale:       0.86;
  --story-q-travel:      4px;
  --story-rail-fade:     400ms;
  --story-step:          1200ms;                           /* one scroll glides the story to the next scene's rest */
  --story-ease-step:     cubic-bezier(0.3, 0.2, 0.2, 1);   /* answers the scroll at once, settles softly into the rest */
  --story-height:        600vh;
  --story-center-x:      63%;
  --story-center-y:      50%;
  --story-caps-left:     6vw;
  --story-caps-bottom:   14vh;
  --story-caps-width:    min(30vw, 400px);

  /* ---------- Layers ---------- */
  --z-fx:          3;     /* the story canvas (fixed, pointer-events none) */
  --z-stage-copy:  4;     /* captions, result, cluster labels, hero copy */
  --z-rail:        6;
  --z-rail-bead:   7;
  --z-header:      50;
  --z-consent:     60;    /* the cookie bar: over the header, under the loader */
  --z-loader:      80;
  --z-skip:        100;

  /* ---------- Fixed sizes ---------- */
  --size-header:     4.5rem;  /* 72px; 64px at ≤ 720px (below) */
  --size-tap:        44px;    /* minimum touch target */
  --size-hairline:   1px;
  --size-rule:       2px;
  --size-rule-accent: 3px;    /* pull-quote rule; input glow rings */
  --size-ledger-tick: 6px;    /* the marks that hang from a ledger's top rule at each column start */
  --size-focus:      2.5px;   /* :focus-visible outline */
  --size-focus-offset: 3px;
  --size-blur:       12px;    /* header backdrop blur — the only blur on the site */
  --size-frame-max:  24rem;   /* 9:16 frame width cap */
  --size-consent:    44rem;   /* the cookie bar's width cap */
  --size-wa-dialog:  26rem;   /* the WhatsApp QR box's width cap */
  --size-qr:         13.75rem;   /* the QR code inside it (220px) */
  --size-logo-mini:  28px;       /* the wordmark in the invite page's preview of the home page */
  --ratio-site-preview: 16 / 10; /* that preview's shape */
  --size-icon-sm:    16px;
  --size-icon-md:    20px;
  --size-icon-lg:    24px;

  /* the logo: assets/brand/jiive-wordmark*.png (the supplied jiive-logo*.png with its dot lifted off).
     The gold period sits where the artwork's dot was, so its place is given as a share of the image. */
  --size-logo:           44px;     /* header logo height; 38px at ≤ 720px, 34px at ≤ 360px */
  --size-logo-loader:    clamp(3.5rem, 9vw, 4.5rem);   /* loader logo height; 72px at most, so the 300 × 144 artwork stays sharp on 2x screens */
  --logo-ratio:          300 / 144; /* the artwork's width / height */
  --logo-dot-x:          95.92%;   /* the period's centre, from the artwork's left edge */
  --logo-dot-y:          63.62%;   /* the period's centre, from the artwork's top edge (on the baseline) */
  --logo-dot-size:       6.2%;     /* the period's diameter, as a share of the artwork's width */
  --size-period-numeral: 0.17em;   /* period after the result number and footer line */
  --size-rail-bead:      8px;
  --size-rail-inset:     24px;     /* rail distance from the right edge; 12px at ≤ 760px */
  --size-rail-top:       22vh;
  --size-rail-length:    56vh;
  --size-hero-cell:      min(38vw, 440px);
  --size-body-max:       320px;    /* body diagram width cap */
  --size-organ-hit:      var(--size-tap);
  --size-avatar:         3.5rem;   /* ledger-team avatar well (56px) */
  --size-chat-avatar:    2.25rem;  /* Lumi's avatar in a chat head (36px) */
  --size-spec-mark:      1.5rem;   /* numbered marker on the report specimen (24px) */
  --size-hero-copy:      40rem;    /* hero copy column cap (prototype 640px) */
  --text-glyph:          clamp(4rem, 9vw, 7rem);   /* the decorative hero "?" */
  --size-tier-visual:    220px;
  --size-one-dot:        16px;
  --size-one-dot-open:   6;        /* scale factor when the pricing dot opens into a cell */
  --size-constel:        44px;     /* Complete Wellness: the bead cluster's radius at rest */
  --size-constel-open:   92px;     /* … and once it spreads on hover */
  --size-speck:          5px;      /* one bead in that cluster */
}

/* stage-internal breakpoint (the story script uses VW < 760) */
@media (max-width: 760px) {
  :root {
    --story-center-x:    50%;
    --story-center-y:    40%;
    --story-caps-left:   20px;
    --story-caps-bottom: calc(9vh + var(--size-tap) + var(--space-md));   /* clears the Skip pill */
    --story-caps-width:  auto;
    --size-rail-inset:   12px;
    --size-hero-cell:    min(68vw, 320px);
    --size-body-max:     min(62vw, 260px);
    --size-tier-visual:  180px;
  }
}

/* phones: a shorter story, so the offer is closer (approved 1 November 2026) */
@media (max-width: 767px) {
  :root {
    --story-height: 250vh;
  }
}

@media (max-width: 720px) {
  :root {
    --size-header: 4rem;
    --size-logo:   38px;
  }
}

@media (max-width: 360px) {
  :root {
    --size-logo: 34px;
  }
}

/* ---------- Metric-matched fallbacks ----------
   The fallbacks DESIGN.md names (Georgia, Segoe UI, Consolas), with Arial and
   Courier New where those are missing, scaled to the width of the web font
   they stand in for (measured in Chrome over a line of site copy). Line
   heights are set everywhere, so size-adjust does the work; the ascent and
   descent overrides keep glyphs from jumping inside their lines. A face whose
   local font is absent simply doesn't load and the stack moves on. */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  font-weight: 300 500;
  size-adjust: 100.83%;
  ascent-override: 73.39%;
  descent-override: 26.78%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Sans Fallback";
  src: local("Segoe UI");
  font-weight: 400 500;
  size-adjust: 101.24%;
  ascent-override: 101.74%;
  descent-override: 27.66%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Sans Fallback";
  src: local("Segoe UI Semibold"), local("SegoeUI-Semibold");
  font-weight: 600;
  size-adjust: 101.46%;
  ascent-override: 101.52%;
  descent-override: 27.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Sans Fallback Arial";
  src: local("Arial"), local("ArialMT");
  font-weight: 400 500;
  size-adjust: 100.61%;
  ascent-override: 102.38%;
  descent-override: 27.83%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Sans Fallback Arial";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600;
  size-adjust: 96.87%;
  ascent-override: 106.33%;
  descent-override: 28.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Mono Fallback";
  src: local("Consolas");
  font-weight: 500;
  size-adjust: 109.06%;
  ascent-override: 94.45%;
  descent-override: 25.67%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Mono Fallback Courier";
  src: local("Courier New"), local("CourierNewPSMT");
  font-weight: 500;
  size-adjust: 99.92%;
  ascent-override: 103.08%;
  descent-override: 28.02%;
  line-gap-override: 0%;
}