/* Self-hosted fonts — downloaded once from Google Fonts (latin + latin-ext subsets),

   served from this theme instead of fonts.googleapis.com, for GDPR-friendly loading. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/geist-300-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/geist-300-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/geist-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/geist-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/geist-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/geist-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/geist-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/geist-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/geist-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/geist-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrumentserif-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrumentserif-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrumentserif-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrumentserif-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrainsmono-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrainsmono-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrainsmono-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrainsmono-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/jetbrainsmono-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/jetbrainsmono-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/newsreader-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/newsreader-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================
   Isar Informatics — Design Tokens
   Drop-in CSS variables for colours, type, spacing, motion.
   Pair with Newsreader (substitute for Domaine Display) and Geist
   from Google Fonts — both imported below.
   ============================================================= */

/* All families below are 100% free / open-source via Google Fonts.
   Display serif: Instrument Serif (the closest free spirit to
   Domaine Display — high-contrast modern editorial serif, weight 400
   only which matches the brand spec exactly). Body sans: Geist.
   Mono: JetBrains Mono. Newsreader is loaded as a body-serif fallback. */
:root {
  /* ---------- Brand palette (the five) ----------------------- */
  --canvas:  #E7E8E4;   /* page background — warm paper grey   */
  --stone:   #B1B2AE;   /* mid neutral — borders, mute text    */
  --sky:     #D3DFF2;   /* pale alpine blue — card surface     */
  --slate:   #93A4C1;   /* muted slate-blue — icons, tags      */
  --ink:     #18202B;   /* near-black blue — primary text      */

  /* ---------- Derived shades (closed system) ---------------- */
  --canvas-soft:    color-mix(in oklab, var(--canvas) 60%, white);
  --canvas-deep:    color-mix(in oklab, var(--canvas) 80%, var(--ink) 20%);
  --stone-soft:     color-mix(in oklab, var(--stone) 50%, var(--canvas));
  --sky-soft:       color-mix(in oklab, var(--sky) 50%, var(--canvas));
  --sky-deep:       color-mix(in oklab, var(--sky) 70%, var(--ink) 30%);
  --slate-soft:     color-mix(in oklab, var(--slate) 60%, var(--canvas));
  /* 50/50 rather than 70/30: --slate-deep backs --fg3, which is used for
     eyebrows, footer copy, service bullets and roles at 11–14px. At 70%
     slate it lands on #6B7990 = 3.58:1 on --canvas, below the 4.5:1 WCAG AA
     floor for normal text. 50% gives #515E71 = 5.35:1 (5.82:1 on
     --bg-elevated) and still reads as muted slate-blue, not a second ink. */
  --slate-deep:     color-mix(in oklab, var(--slate) 50%, var(--ink) 50%);
  --ink-mute:       color-mix(in oklab, var(--ink) 70%, var(--canvas) 30%);
  --ink-soft:       color-mix(in oklab, var(--ink) 50%, var(--canvas));
  --ink-deep:       color-mix(in oklab, var(--ink) 88%, black);

  /* ---------- Semantic colour roles ------------------------- */
  --bg:            var(--canvas);
  --bg-elevated:   var(--canvas-soft);
  --bg-inverse:    var(--ink);
  --bg-accent:     var(--sky);

  --fg1:           var(--ink);          /* headlines, primary  */
  --fg2:           var(--ink-mute);     /* body                */
  --fg3:           var(--slate-deep);   /* meta, secondary     */
  --fg4:           var(--stone);        /* placeholder, disabled */
  --fg-on-ink:     var(--canvas);
  --fg-on-sky:     var(--ink);

  --border:        color-mix(in oklab, var(--ink) 12%, transparent);
  --border-strong: color-mix(in oklab, var(--ink) 24%, transparent);
  --border-on-ink: color-mix(in oklab, var(--canvas) 18%, transparent);

  --focus-ring:    var(--slate);
  --selection:     var(--sky-deep);

  /* ---------- Type families --------------------------------- */
  --serif-display: "Instrument Serif", "Newsreader", "Source Serif 4",
                   "Iowan Old Style", "Apple Garamond", Georgia, serif; /* @kind font */
  --sans-body:     "Geist", "Söhne", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* @kind font */
  --sans-mono:     "JetBrains Mono", "Geist Mono", "Berkeley Mono",
                   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* @kind font */
  /* Box-drawing/block/geometric-shape glyphs (used by the ASCII wave) are
     absent from JetBrains Mono's subset and fall back to a font with a
     different advance width, skewing the wave. This stack (matching the
     design kit's own --mono-ascii) covers those ranges at one uniform
     advance. Was previously referenced via var(--mono-ascii) with no
     fallback in several places and no definition here — resolved to
     `unset`, silently falling back to a proportional font, which threw
     off the JS column-width measurement badly enough to overflow the
     wave text 2-3x past its container. */
  --mono-ascii:    "DejaVu Sans Mono", "Menlo", "Consolas",
                   "Liberation Mono", "Courier New", monospace; /* @kind font */

  /* ---------- Type scale (1.25 modular, 16px anchor) -------- */
  --fs-display-xxl: 96px;
  --fs-display-xl:  76.8px;
  --fs-display-lg:  56px;
  --fs-display-md:  40px;
  --fs-heading-lg:  32px;
  --fs-heading-md:  24px;
  --fs-heading-sm:  20px;
  --fs-body-lg:     18px;
  --fs-body-md:     16px;
  --fs-body-sm:     14px;
  --fs-caption:     13px;
  --fs-micro:       11px;

  --lh-tight:    1.0;   /* @kind other */
  --lh-snug:     1.15;  /* @kind other */
  --lh-normal:   1.45;  /* @kind other */
  --lh-relaxed:  1.6;   /* @kind other */

  --tracking-display-xxl: -0.96px;   /* @kind other */
  --tracking-display-xl:  -0.768px;  /* @kind other */
  --tracking-heading-md:  -0.668px;  /* @kind other */
  --tracking-body:        0;         /* @kind other */
  --tracking-caps:        0.6px;     /* @kind other */

  --feat-display: "ss01", "ss04", "ss11"; /* @kind other */

  /* ---------- Spacing & layout ------------------------------ */
  --sp-xxs: 2px;
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  24px;
  --sp-xxl: 32px;
  --sp-3xl: 48px;
  --sp-section: 96px;

  --container-max:  1200px;
  --container-prose: 720px;

  /* ---------- Radii ----------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-full: 9999px;

  /* ---------- Elevation ------------------------------------- */
  --shadow-floating:
    0 1px 0 rgba(24, 32, 43, 0.04),
    0 8px 24px -12px rgba(24, 32, 43, 0.18);

  /* ---------- Motion ---------------------------------------- */
  --dur-micro:    160ms;                      /* @kind other */
  --dur-comp:     240ms;                      /* @kind other */
  --dur-page:     320ms;                      /* @kind other */
  --ease-out:     cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-inout:   cubic-bezier(0.4, 0, 0.6, 1); /* @kind other */

  /* Motion scale, named by the interaction rather than by raw duration, so
     component CSS stops inventing its own timings. The three --dur-* values
     above predate this and stay put -- they are referenced widely and
     several sit inside these ranges anyway; new work should use these.
     Only transform/opacity (and limited clip-path) should be animated. */
  --motion-button:   180ms; /* @kind other */
  --motion-dropdown: 220ms; /* @kind other */
  --motion-panel:    260ms; /* @kind other */
  --motion-section:  500ms; /* @kind other */
  --motion-hero:     700ms; /* @kind other */
  --motion-stagger:   70ms; /* @kind other */
  --motion-ease-entrance: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --motion-ease-state:    cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */

  /* ---------- Z-index --------------------------------------- */
  --z-nav:    100;  /* @kind other */
  --z-sticky: 200;  /* @kind other */
  --z-pop:    800;  /* @kind other */
  --z-scrim:  1000; /* @kind other */
  --z-modal:  1010; /* @kind other */
  --z-toast:  1100; /* @kind other */
}

/* =============================================================
   Dark-mode variant — semantic tokens only (raw 5-colour palette
   is untouched). Hand-tuned, not an --ink/--canvas swap: the dark
   background is its own deep ink-based tone, text stays warm, and
   sky/slate are lifted lighter + more saturated to hold up as
   accents against the dark surface — still low-contrast, no neon.
   ============================================================= */
:root[data-theme="dark"] {
  /* ---------- Derived shades (dark) — mix toward black/ink, not white --- */
  --canvas-soft:    color-mix(in oklab, #12161D 85%, black 15%);
  --canvas-deep:    color-mix(in oklab, #12161D 70%, black 30%);
  --stone-soft:     color-mix(in oklab, #7A7D79 45%, #12161D 55%);
  --sky-soft:       color-mix(in oklab, #4C6FA3 40%, #12161D 60%);
  --sky-deep:       color-mix(in oklab, #4C6FA3 75%, black 25%);
  --slate-soft:     color-mix(in oklab, #93A4C1 35%, #12161D 65%);
  --slate-deep:     color-mix(in oklab, #93A4C1 60%, black 40%);
  --ink-mute:       color-mix(in oklab, #F1ECE2 75%, #12161D 25%);
  --ink-soft:       color-mix(in oklab, #F1ECE2 55%, #12161D 45%);
  --ink-deep:       color-mix(in oklab, #12161D 90%, black 10%);

  /* ---------- Semantic colour roles (dark) ------------------ */
  --bg:            #12161D;   /* deep ink-based, warm-neutral undertone — not pure black */
  --bg-elevated:   #1B212B;   /* raised card / panel surface */
  --bg-inverse:    color-mix(in oklab, #EDEAE2 94%, white 6%); /* light emphasis surface — see .surface-ink below */
  --bg-accent:     #4C6FA3;   /* sky, lightened + saturated to read on dark */

  --fg1:           #F1ECE2;   /* warm off-white — headlines */
  --fg2:           #C9C3B5;   /* warm muted — body */
  --fg3:           #9FB2CE;   /* slate, lifted lighter for legibility */
  --fg4:           #6B6E6C;   /* dim stone — placeholder, disabled */
  --fg-on-ink:     #F1ECE2;
  --fg-on-sky:     #12161D;   /* dark ink text on the lightened accent */

  --border:        color-mix(in oklab, white 14%, transparent);
  --border-strong: color-mix(in oklab, white 26%, transparent);
  --border-on-ink: color-mix(in oklab, black 30%, transparent);

  --focus-ring:    #8FA6C8;
  --selection:     color-mix(in oklab, #4C6FA3 65%, black 15%);
}

/* =============================================================
   Base resets + page defaults
   ============================================================= */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg2);
  font-family: var(--sans-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-relaxed);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* =============================================================
   Type roles — semantic classes & element defaults
   ============================================================= */

.display-xxl,
h1.display {
  font-family: var(--serif-display);
  font-size: var(--fs-display-xxl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display-xxl);
  font-feature-settings: var(--feat-display);
  color: var(--fg1);
  text-wrap: balance;
  margin: 0;
}

.display-xl {
  font-family: var(--serif-display);
  font-size: var(--fs-display-xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display-xl);
  font-feature-settings: var(--feat-display);
  color: var(--fg1);
  text-wrap: balance;
  margin: 0;
}

.display-lg, h1 {
  font-family: var(--serif-display);
  font-size: var(--fs-display-lg);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: -0.5px;
  font-feature-settings: var(--feat-display);
  color: var(--fg1);
  text-wrap: balance;
  margin: 0 0 var(--sp-xl);
}

.heading-lg, h2 {
  font-family: var(--serif-display);
  font-size: var(--fs-heading-lg);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: -0.4px;
  font-feature-settings: var(--feat-display);
  color: var(--fg1);
  text-wrap: balance;
  margin: 0 0 var(--sp-lg);
}

.heading-md, h3 {
  font-family: var(--serif-display);
  font-size: var(--fs-heading-md);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading-md);
  font-feature-settings: var(--feat-display);
  color: var(--fg1);
  margin: 0 0 var(--sp-md);
}

.heading-sm, h4 {
  font-family: var(--sans-body);
  font-size: var(--fs-heading-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0 0 var(--sp-sm);
}

.eyebrow {
  font-family: var(--sans-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg3);
}

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg2); }
.body-md, p { font-size: var(--fs-body-md); line-height: var(--lh-relaxed); color: var(--fg2); margin: 0 0 var(--sp-lg); }
.body-sm    { font-size: var(--fs-body-sm); line-height: var(--lh-normal);   color: var(--fg2); }
.caption    { font-size: var(--fs-caption); line-height: var(--lh-normal);   color: var(--fg3); }
.micro      { font-size: var(--fs-micro);   line-height: 1.4;                color: var(--fg3); letter-spacing: var(--tracking-caps); text-transform: uppercase; }

code, kbd, samp, pre, .mono {
  font-family: var(--sans-mono);
  font-size: 0.95em;
  font-feature-settings: "ss01";
}

a {
  color: var(--fg1);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--ink) 30%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
a:hover { text-decoration-color: var(--ink); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-xxl) 0;
}

/* =============================================================
   Surface helpers
   ============================================================= */
.surface-canvas  { background: var(--canvas); color: var(--fg1); }
.surface-soft    { background: var(--canvas-soft); color: var(--fg1); }
.surface-sky     { background: var(--sky); color: var(--fg-on-sky); }
.surface-ink     { background: var(--ink); color: var(--fg-on-ink); }
.surface-ink .heading-md, .surface-ink h3,
.surface-ink .heading-lg, .surface-ink h2,
.surface-ink .display-xl, .surface-ink .display-xxl,
.surface-ink h1 { color: var(--canvas); }

/* Dark mode flips the "one inverted section" trick: .surface-ink becomes
   the light/canvas emphasis surface instead of stacking dark-on-dark. */
:root[data-theme="dark"] .surface-ink {
  background: var(--bg-inverse);
  color: #12161D;
}
:root[data-theme="dark"] .surface-ink .heading-md, :root[data-theme="dark"] .surface-ink h3,
:root[data-theme="dark"] .surface-ink .heading-lg, :root[data-theme="dark"] .surface-ink h2,
:root[data-theme="dark"] .surface-ink .display-xl, :root[data-theme="dark"] .surface-ink .display-xxl,
:root[data-theme="dark"] .surface-ink h1 { color: #12161D; }

.hairline { border-top: 1px solid var(--border); }

/* ---------- Reduced motion ----------------------------------
   Collapsing the motion scale at the token level is what makes
   prefers-reduced-motion actually reach the whole site: portal.css,
   academy.css and product-app.js carry no reduced-motion rules of their
   own, so anything driven by these tokens is covered here rather than
   needing a matching @media block in every file.

   Durations go to 1ms rather than 0 so transitionend/animationend still
   fire -- several components wait on those to unhide or clean up, and a
   true 0 can silently skip the event and leave them stuck.

   This does NOT cover components with hardcoded timings; those are being
   migrated onto the tokens. It also deliberately leaves the --dur-* trio
   alone, since they predate the scale and are referenced widely. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-button: 1ms;
    --motion-dropdown: 1ms;
    --motion-panel: 1ms;
    --motion-section: 1ms;
    --motion-hero: 1ms;
    --motion-stagger: 0ms;
    --dur-micro: 1ms;
    --dur-comp: 1ms;
    --dur-page: 1ms;
  }
}