/*
 * Kapell — global style layer (tokens, webfaces, reset, prose).
 * Generated from src/styles/ in the kapell-site repo. Do not edit here.
 * Stable URL: https://kapell.fm/css/kapell.css
 */
/* ============================================================
   KAPELL — global stylesheet entry point
   Loaded once in Layout.astro. Import order matters:
   fonts → colors → typography → spacing → base.
   ============================================================ */

/* Kapell — webfonts (licensed Klim WOFF2)
   Founders Grotesk = TITLING (display, headings, UI labels & controls).
   Financier Text   = BODY (running / reading text, descriptions, sleeve).
   JetBrains Mono   = telemetry / diagnostics readout (Apache-2.0, TTF). */

/* ---------------- Founders Grotesk ---------------- */
@font-face {
  font-family: "Founders Grotesk";
  src: url("https://kapell.fm/fonts/founders-grotesk-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("https://kapell.fm/fonts/founders-grotesk-light-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("https://kapell.fm/fonts/founders-grotesk-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("https://kapell.fm/fonts/founders-grotesk-regular-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("https://kapell.fm/fonts/founders-grotesk-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("https://kapell.fm/fonts/founders-grotesk-medium-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("https://kapell.fm/fonts/founders-grotesk-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("https://kapell.fm/fonts/founders-grotesk-semibold-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("https://kapell.fm/fonts/founders-grotesk-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("https://kapell.fm/fonts/founders-grotesk-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------------- Financier Text ---------------- */
@font-face {
  font-family: "Financier Text";
  src: url("https://kapell.fm/fonts/financier-text-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Financier Text";
  src: url("https://kapell.fm/fonts/financier-text-regular-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Financier Text";
  src: url("https://kapell.fm/fonts/financier-text-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Financier Text";
  src: url("https://kapell.fm/fonts/financier-text-medium-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Financier Text";
  src: url("https://kapell.fm/fonts/financier-text-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Financier Text";
  src: url("https://kapell.fm/fonts/financier-text-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Financier Text";
  src: url("https://kapell.fm/fonts/financier-text-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Financier Text";
  src: url("https://kapell.fm/fonts/financier-text-black-italic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ---------------- JetBrains Mono (variable, Apache-2.0) ---------------- */
@font-face {
  font-family: "JetBrains Mono";
  src: url("https://kapell.fm/fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("https://kapell.fm/fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   KAPELL — COLOR
   Two axes compose every surface:
     appearance : light | dark            (data-appearance)
     base       : orange | green | berry  (data-base)

   • accent, dome, backlight glow, smoked rack  → key off BASE only
   • paper, hairline, art frame, glass, title bar → key off the (appearance,base) PAIR
   • ink / graphite / slate (labels)              → key off APPEARANCE only

   The base names the accent family (orange / green / berry), not a colour
   temperature. Orange lives on :root as the fallback; green and berry override.
   Consumers set both attributes on a root element, e.g.
     <div data-appearance="dark" data-base="green"> … </div>
   ============================================================ */

:root {
  /* ---- BASE = ORANGE : accent + signal (independent of light/dark) ---- */
  --accent:        #D8531C;
  --accent-dark:   #B8431A;
  --accent-bright: #E8763C;
  --faint:         #F5E3DA;
  /* raw glow triplet — wrap in rgb()/rgba() */
  --sig:           232, 118, 60; /* @kind color */

  /* control keycap dome (tactile transport buttons) */
  --dome-top:      #FBF3E6;
  --dome-bottom:   #E8DCC6;

  /* backlight glow bundle — what the glass refracts */
  --glow-center:   rgba(255, 176, 98, .95);
  --halo:          rgba(255, 176, 98, .50);
  --dot:           rgba(255, 176, 98, .95);
  --bloom:         rgba(255, 176, 98, .35);
  --fill:          #FFC07A;

  /* smoked rack — telemetry / station chrome (always dark) */
  --rack-top:      #241D16;
  --rack-bottom:   #15100A;
  --rack-solid:    #1D1710;   /* flat --smoke */
  --rack-label:    rgba(255, 200, 140, .60);

  /* living-waveform strokes — raw rgb triplets, wrapped in rgba() by waves.js.
     hero (page accent) + dim room (secondary). Base-keyed so the waves follow
     the palette switch. */
  --wave-hero:     216, 83, 28;
  --wave-dim:      232, 176, 98;

  /* ---- APPEARANCE = LIGHT : ink / labels ---- */
  --ink:       #1B1B1A;   /* primary text */
  --graphite:  #5A554C;   /* secondary text */
  --slate:     #8C867A;   /* muted / section labels */

  /* ---- PAIR = light · orange : paper ramp ---- */
  --paper:        #EFEADD;
  --paper-light:  #F7F4EC;
  --paper-dark:   #E7E1D2;
  --paper-tint:   #F4EEE2;
  --hairline:     #C9C2B2;
  --hairline-soft:#E0DBCC;
  --art-frame:    rgba(27, 27, 26, .16);

  /* ---- PAIR = light · orange : Liquid Glass (sidebar / dock) ---- */
  --glass-fill-top:    rgba(244, 238, 226, .85);
  --glass-fill-bottom: rgba(225, 213, 188, .85);
  --glass-border:      rgba(255, 255, 255, .60);
  --glass-rim-top:     rgba(255, 255, 255, .85);

  /* ---- PAIR = light · orange : title-bar glass (lighter) ---- */
  --bar-fill-top:    rgba(250, 247, 240, .44);
  --bar-fill-bottom: rgba(246, 241, 231, .36);

  /* ---- SEMANTIC ALIASES (stable names consumers should prefer) ---- */
  --text-primary:    var(--ink);
  --text-secondary:  var(--graphite);
  --text-muted:      var(--slate);
  --text-accent:     var(--accent);
  --link:            var(--accent-deep, var(--accent-dark));   /* prose link color — contrast-safe on light paper */

  --surface-app:     var(--paper);
  --surface-raised:  var(--paper-light);
  --surface-sunken:  var(--paper-dark);
  --surface-tint:    var(--paper-tint);
  --surface-rack:    var(--rack-solid);

  --border-hairline: var(--hairline);
  --border-soft:     var(--hairline-soft);
  --focus-ring:      var(--accent);

  --glow-rgb:        var(--sig);
}

/* ================= BASE = GREEN (accent / glow / dome / rack) =============== */
[data-base="green"] {
  --accent:        #3E9C73;
  --accent-dark:   #2F7D5A;
  --accent-bright: #5FB98C;
  --accent-deep:   #286B4C;   /* deeper green for prose links — clears AA (≥4.5:1) on every light·green paper */
  --faint:         #DFEBE3;
  --sig:           95, 185, 140; /* @kind color */

  --dome-top:      #F0F4F6;
  --dome-bottom:   #D9E1E5;

  --glow-center:   rgba(109, 202, 142, .95);
  --halo:          rgba(109, 202, 142, .50);
  --dot:           rgba(109, 202, 142, .95);
  --bloom:         rgba(109, 202, 142, .35);
  --fill:          #9CE0A8;

  --rack-top:      #1B2127;
  --rack-bottom:   #0F1318;
  --rack-solid:    #161B20;
  --rack-label:    rgba(150, 190, 235, .62);

  --wave-hero:     62, 156, 115;
  --wave-dim:      120, 205, 212;
}

/* ================= BASE = BERRY (pink accent + purple glow/dome/rack) ======= */
/* Front-page-only palette: pink is the accent (signal), purple carries the
   glow, keycap dome, waveform fill and the smoked rack. Structure mirrors the
   green block exactly so the theme matrix and re-bind keep working. */
[data-base="berry"] {
  --accent:        #D6337A;
  --accent-dark:   #B02465;
  --accent-bright: #E85BA0;
  --accent-deep:   #9E1E5A;   /* deeper magenta for prose links — clears AA (≥4.5:1) on every light·berry paper */
  --faint:         #F4E1EC;
  --sig:           232, 91, 160; /* @kind color */

  --dome-top:      #F1ECF6;
  --dome-bottom:   #DED2E8;

  --glow-center:   rgba(178, 120, 230, .95);
  --halo:          rgba(178, 120, 230, .50);
  --dot:           rgba(178, 120, 230, .95);
  --bloom:         rgba(178, 120, 230, .35);
  --fill:          #C79CE8;

  --rack-top:      #241A2E;
  --rack-bottom:   #150F1C;
  --rack-solid:    #1D1526;
  --rack-label:    rgba(210, 180, 245, .62);

  --wave-hero:     232, 91, 160;
  --wave-dim:      178, 120, 230;
}

/* ================= APPEARANCE = DARK (ink / labels) ======================== */
[data-appearance="dark"] {
  --ink:       #ECE3D2;
  --graphite:  rgba(236, 227, 210, .62);
  --slate:     rgba(236, 227, 210, .40);
}
[data-appearance="dark"][data-base="green"] {
  --ink:       #E7EDF3;
  --graphite:  rgba(220, 231, 240, .62);
  --slate:     rgba(220, 231, 240, .40);
}
[data-appearance="dark"][data-base="berry"] {
  --ink:       #ECE4F3;
  --graphite:  rgba(236, 228, 243, .62);
  --slate:     rgba(236, 228, 243, .40);
}

/* ================= PAIR SURFACES (paper / glass / bar) ===================== */
/* light · green */
[data-appearance="light"][data-base="green"] {
  --paper:        #E6EAEE;
  --paper-light:  #F2F4F6;
  --paper-dark:   #DCE0E5;
  --paper-tint:   #EAECED;
  --hairline:     #C1C7CE;
  --hairline-soft:#DCE1E6;
  --art-frame:    rgba(20, 28, 32, .18);

  --glass-fill-top:    rgba(240, 243, 246, .85);
  --glass-fill-bottom: rgba(219, 225, 232, .85);
  --glass-border:      rgba(255, 255, 255, .60);
  --glass-rim-top:     rgba(255, 255, 255, .90);

  --bar-fill-top:    rgba(248, 250, 252, .44);
  --bar-fill-bottom: rgba(240, 244, 248, .36);
}

/* dark · orange */
[data-appearance="dark"][data-base="orange"] {
  --paper:        #1E1810;
  --paper-light:  #241D16;
  --paper-dark:   #15100A;
  --paper-tint:   #241D16;
  --faint:        #2A1C12;   /* accent-tinted panel fill — dark so ink-on-faint stays legible */
  --hairline:     rgba(236, 227, 210, .12);
  --hairline-soft:rgba(236, 227, 210, .07);
  --art-frame:    rgba(0, 0, 0, .30);

  --glass-fill-top:    rgba(42, 34, 27, .82);
  --glass-fill-bottom: rgba(31, 25, 18, .80);
  --glass-border:      rgba(255, 240, 220, .13);
  --glass-rim-top:     rgba(255, 255, 255, .14);

  --bar-fill-top:    rgba(48, 40, 32, .46);
  --bar-fill-bottom: rgba(40, 33, 25, .40);
}

/* dark · green */
[data-appearance="dark"][data-base="green"] {
  --paper:        #141A20;
  --paper-light:  #1A2027;
  --paper-dark:   #0E141A;
  --paper-tint:   #1A2027;
  --faint:        #18271F;   /* accent-tinted panel fill — dark so ink-on-faint stays legible */
  --hairline:     rgba(220, 231, 240, .12);
  --hairline-soft:rgba(220, 231, 240, .06);
  --art-frame:    rgba(0, 0, 0, .32);

  --glass-fill-top:    rgba(33, 39, 46, .82);
  --glass-fill-bottom: rgba(23, 28, 34, .80);
  --glass-border:      rgba(225, 238, 250, .13);
  --glass-rim-top:     rgba(255, 255, 255, .12);

  --bar-fill-top:    rgba(38, 44, 51, .46);
  --bar-fill-bottom: rgba(30, 36, 43, .40);
}

/* light · berry — lavender paper ramp */
[data-appearance="light"][data-base="berry"] {
  --paper:        #EBE7F0;
  --paper-light:  #F5F2F9;
  --paper-dark:   #E1DCEB;
  --paper-tint:   #EDE9F2;
  --hairline:     #CCC4D8;
  --hairline-soft:#E2DCEC;
  --art-frame:    rgba(30, 20, 40, .16);

  --glass-fill-top:    rgba(243, 240, 249, .85);
  --glass-fill-bottom: rgba(226, 219, 236, .85);
  --glass-border:      rgba(255, 255, 255, .60);
  --glass-rim-top:     rgba(255, 255, 255, .90);

  --bar-fill-top:    rgba(249, 247, 252, .44);
  --bar-fill-bottom: rgba(243, 240, 248, .36);
}

/* dark · berry — deep aubergine room */
[data-appearance="dark"][data-base="berry"] {
  --paper:        #191320;
  --paper-light:  #1F1728;
  --paper-dark:   #120D18;
  --paper-tint:   #1F1728;
  --faint:        #271A2E;   /* accent-tinted panel fill — dark so ink-on-faint stays legible */
  --hairline:     rgba(230, 220, 245, .12);
  --hairline-soft:rgba(230, 220, 245, .06);
  --art-frame:    rgba(0, 0, 0, .32);

  --glass-fill-top:    rgba(40, 33, 48, .82);
  --glass-fill-bottom: rgba(28, 22, 36, .80);
  --glass-border:      rgba(235, 225, 250, .13);
  --glass-rim-top:     rgba(255, 255, 255, .12);

  --bar-fill-top:    rgba(46, 40, 54, .46);
  --bar-fill-bottom: rgba(38, 33, 46, .40);
}

/* ============================================================
   KAPELL — TYPOGRAPHY
   Founders Grotesk = TITLING — display, headings, UI labels & controls.
   Financier Text  = BODY — running / reading text, descriptions, sleeve.
   JetBrains Mono  = telemetry / diagnostics readout.
   ============================================================ */

:root {
  /* ---- families ---- */
  --font-sans:  "Founders Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Financier Text", Georgia, "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- type scale (px → rem at 16px root) ---- */
  --text-display:  3.5rem;   /* 56 — "Pick up where you left off"  */
  --text-title-1:  2rem;     /* 32 — view titles                   */
  --text-title-2:  1.5rem;   /* 24 — section / station heads       */
  --text-title-3:  1.25rem;  /* 20 — card titles                   */
  --text-body:     1rem;     /* 16 — Financier body (serif reads small) */
  --text-callout:  0.875rem; /* 14 — secondary body                */
  --text-ui:       0.875rem; /* 14 — Founders UI labels / controls  */
  --text-label:    0.75rem;  /* 12 — eyebrow / nav labels          */
  --text-micro:    0.6875rem;/* 11 — telemetry caption             */

  /* ---- line heights ---- */
  --leading-tight:  1.04;
  --leading-snug:   1.18;
  --leading-normal: 1.42;
  --leading-relaxed:1.6;

  /* ---- tracking ---- */
  --tracking-display: -0.02em;  /* tighten big grotesque display   */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-label:   0.08em;   /* eyebrow / section labels        */
  --tracking-mono:    0.04em;   /* monospace readouts              */

  /* ---- semantic roles ---- */
  /* TITLING — Founders Grotesk */
  --type-display:  var(--weight-bold)     var(--text-display)/var(--leading-tight) var(--font-sans);
  --type-title-1:  var(--weight-semibold) var(--text-title-1)/var(--leading-snug)  var(--font-sans);
  --type-title-3:  var(--weight-semibold) var(--text-title-3)/var(--leading-snug)  var(--font-sans);
  --type-ui:       var(--weight-medium)   var(--text-ui)/var(--leading-snug)       var(--font-sans);
  /* BODY — Financier Text */
  --type-body:     var(--weight-regular)  var(--text-body)/var(--leading-relaxed)  var(--font-serif);
  --type-sleeve:   italic var(--weight-regular) var(--text-body)/var(--leading-normal) var(--font-serif);
}

/* ============================================================
   KAPELL — SPACING, RADII, ELEVATION, MOTION
   A quiet 4px-based rhythm. Hardware-honest radii and shadows:
   soft ambient drops, bright inset rims, no flashy glows.
   ============================================================ */

:root {
  /* ---- spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- page widths ----
     Every standalone page shares one outer frame (--page-max) so gutters and
     the content's left edge line up site-wide. Running prose is capped to
     --measure (a readable line length) inside that frame. */
  --page-max: 1080px;
  --measure:   680px;

  /* ---- corner radii ---- */
  --radius-xs:  4px;   /* chips, badges            */
  --radius-sm:  8px;   /* buttons, inputs          */
  --radius-md:  12px;  /* nav items, small cards   */
  --radius-lg:  16px;  /* cards, album art         */
  --radius-xl:  22px;  /* glass panels, racks      */
  --radius-2xl: 28px;  /* window / chin shell      */
  --radius-pill:999px; /* keycaps, pills, scrubber */

  /* ---- hairline border weight ---- */
  --border-thin: 1px;

  /* ---- elevation (ambient drops) ---- */
  --shadow-flush:  0 1px 0 rgba(0,0,0,.04);
  --shadow-card:   0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --shadow-raised: 0 2px 6px rgba(0,0,0,.10), 0 18px 48px rgba(0,0,0,.14);
  --shadow-glass:  0 1px 1px rgba(0,0,0,.05), 0 24px 64px rgba(0,0,0,.18);
  --shadow-rack:   inset 0 1px 0 rgba(255,255,255,.04), 0 24px 64px rgba(0,0,0,.40);

  /* tactile keycap: ambient drop + bright top rim + soft inner floor */
  --shadow-keycap:
    0 1px 1px rgba(0,0,0,.10),
    0 6px 14px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 3px rgba(0,0,0,.08);

  /* glass rim highlight (top lip inset) */
  --rim-inset: inset 0 1px 0 var(--glass-rim-top);

  /* accent backlight halo (the refracted glow) */
  --backlight: 0 0 24px var(--halo), 0 0 6px var(--glow-center);

  /* ---- motion: calm, precise, mechanical ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-spring:   cubic-bezier(0.34, 1.3, 0.5, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-normal: 200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
}

/* ============================================================
   KAPELL — base layer
   Minimal reset + a few recipe classes for the signature
   surfaces (Liquid Glass, smoked rack) so cards & kits can
   compose them without re-deriving the gradients each time.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Always reserve the scrollbar's space so centered content (the nav, page
     frames) doesn't shift when navigating between a page that scrolls and one
     that doesn't. No-op on overlay-scrollbar systems. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-primary);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Let full-bleed decorations (the hero waveform) span 100vw without
     introducing a horizontal scrollbar. */
  overflow-x: clip;
}

::selection { background: rgba(var(--glow-rgb), .28); }

/* ---- Liquid Glass surface (sidebar / dock chrome) ---- */
.kap-glass {
  background: linear-gradient(180deg, var(--glass-fill-top), var(--glass-fill-bottom));
  border: var(--border-thin) solid var(--glass-border);
  box-shadow: var(--rim-inset), var(--shadow-glass);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border-radius: var(--radius-xl);
}

/* ---- Title-bar glass (lighter, more translucent) ---- */
.kap-bar {
  background: linear-gradient(180deg, var(--bar-fill-top), var(--bar-fill-bottom));
  border-bottom: var(--border-thin) solid var(--glass-border);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}

/* ---- Smoked rack (telemetry / station chrome) ---- */
.kap-rack {
  background: linear-gradient(180deg, var(--rack-top), var(--rack-bottom));
  box-shadow: var(--shadow-rack);
  border-radius: var(--radius-xl);
  color: var(--rack-label);
  font-family: var(--font-mono);
}

/* ---- Section / eyebrow label ---- */
.kap-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Poetic sleeve caption ---- */
.kap-sleeve {
  font: var(--type-sleeve);
  color: var(--text-secondary);
}


/* ------------------------------------------------------------
   THEME RE-BIND (critical — see handoff README "the gotcha")
   The semantic aliases (--surface-app, --text-primary, …) are
   declared only on :root, so their var() froze to the light·orange
   values. Re-declaring them on every element that sets BOTH
   data-appearance and data-base makes them resolve in-scope, so
   nested themed bands (and the DS components inside them) retheme.
   ------------------------------------------------------------ */
[data-appearance][data-base] {
  --surface-app:     var(--paper);
  --surface-raised:  var(--paper-light);
  --surface-sunken:  var(--paper-dark);
  --surface-tint:    var(--paper-tint);
  --text-primary:    var(--ink);
  --text-secondary:  var(--graphite);
  --text-muted:      var(--slate);
  --text-accent:     var(--accent);
  --border-hairline: var(--hairline);
  --border-soft:     var(--hairline-soft);
  --link:            var(--accent-deep, var(--accent-dark));
}

/* Themed bands paint their own paper + ink so the matrix reads. */
[data-appearance][data-base] {
  background: var(--surface-app);
  color: var(--text-primary);
}

/* Links brighten on dark paper for legibility (mid green is too dim). */
[data-appearance="dark"][data-base] {
  --link: var(--accent-bright);
}

html { scroll-behavior: smooth; }

/* Links take the theme-aware --link color and are underlined by default
   (visible without hover). The underline is a soft tint of the link color;
   hover brings it to full. */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklab, currentColor 38%, transparent);
}
a:hover { text-decoration-color: currentColor; }

/* Opt out the links where a permanent underline reads as broken or noisy:
   buttons, the primary top nav, the logo lockup, the full-card blog rows,
   the docs sidebar / table-of-contents nav, and the stacked prev/next blocks. */
.btn,
.nav__link,
.nav__brand,
.entry,
.docnav__link,
.toc__link,
.prevnext__link { text-decoration: none; color: inherit; }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}