/* ==========================================================================
   karaseen.com — design tokens. EVERY design value lives here (DESIGN.md §2).
   site.css uses var(--…) only: no hex, no px (1px hairlines and @media
   breakpoints excepted). To restyle: edit DESIGN.md, then this file.

   Direction: "field notebook / instrument panel". Monochrome paper + ink, one
   signal colour (her orange), typewriter-mono labels, oscilloscope graticule.
   ========================================================================== */

/* ---------- fonts (self-hosted, SIL OFL — licences beside the files) ---------- */
@font-face {
  font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/space-mono-latin-ext-400.woff2?v=b4f90459') 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: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/space-mono-latin-400.woff2?v=e0c8e616') 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+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/space-mono-latin-ext-700.woff2?v=512458b3') 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: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/space-mono-latin-700.woff2?v=af7cf6d2') 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+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Hanken Grotesk is one variable file per subset (weights 100–900, incl. the 300 body). */
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin-ext.woff2?v=a1376a56') 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: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin.woff2?v=1f21c6ea') 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+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- colour ---------- */
  --paper: #f7f6f1;           /* page ground */
  --paper-2: #efede6;         /* recessed: empty media, grid-cell hover */
  --ink: #121212;             /* text, strong rules */
  --ink-2: #4d4a45;           /* secondary text */
  --ink-3: #8a867e;           /* tags, captions */
  --rule: #d8d4ca;            /* hairline rules */
  --signal: #e65706;          /* her orange: venues, institutions, the one accent */
  --night: #0b0d14;           /* dark video panels */
  --night-ink: #f2f0ea;       /* text on night */
  --night-signal: #ff8a48;    /* link hover on night */
  --night-ink-3: #9a98a6;     /* tags on night */
  --night-caption: #c9c7d2;   /* caption over video */
  --black: #000;              /* video letterbox */
  --grid-line: color-mix(in srgb, var(--ink) 5%, transparent);
  --scrim: color-mix(in srgb, var(--paper) 70%, transparent);
  --hero-scrim: color-mix(in srgb, var(--night) 72%, transparent);   /* gradient under a title over the hero */
  --link-underline: color-mix(in srgb, var(--signal) 70%, transparent);
  --name-rule: 1.5px;          /* her name in pubs: thin orange underline */
  --name-rule-offset: 4px;
  --ping: color-mix(in srgb, var(--signal) 45%, transparent);       /* "current" node pulse */

  /* ---------- type ---------- */
  --mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --w-light: 300;             /* body */
  --w-regular: 400;           /* mono everywhere */
  --w-strong: 600;            /* strong, pub title, timeline role */

  --fs-xs: 0.72rem;
  --fs-sm: 0.86rem;
  --fs-base: 1.0625rem;
  --fs-nav: 0.66rem;          /* section-nav labels */
  --fs-num: 0.64rem;          /* home-grid numbers */
  --fs-wordmark: 1.15rem;
  --fs-pub: 1rem;
  --fs-role: 1.12rem;
  --fs-lead: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-h3: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-h2: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
  --fs-h1: clamp(1.6rem, 1.2rem + 1.9vw, 2.75rem);
  --fs-year: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --fs-hero-name: clamp(2.4rem, 1.6rem + 4vw, 5rem);
  --fs-art-hero: clamp(2.2rem, 1.4rem + 4vw, 4.6rem);

  /* ---------- space ---------- */
  --gutter: clamp(16px, 4vw, 48px);
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6.5rem;
  --measure: 65ch;
  --page: 1180px;
  --col-gap: clamp(1.25rem, 3vw, 2.5rem);     /* card grid columns */
  --split-gap: clamp(2rem, 5vw, 4.5rem);      /* prose | media splits */

  /* ---------- component metrics (px lives here, nowhere else) ---------- */
  --hair: 1px;
  --focus-w: 2px; --focus-offset: 3px;
  --link-thick: 1.5px;        /* prose link underline */
  --art-hero-max: 760px;
  --tap-y: 6px;               /* small link hit padding */
  --bar-pad-top: 14px;   --bar-pad-bottom: 10px;
  --bar-pad-top-wide: 10px; --bar-pad-bottom-wide: 6px;
  --home-bar-pad-top: 18px; --home-bar-pad-bottom: 12px;
  --nav-width: 680px;         /* section nav at ≥900px */
  --nav-gap: 2px;
  --sec-pad: 4px 2px 8px;
  --sec-pad-bottom-sm: 9px;
  --sec-gap: 4px;
  --glyph: 30px;  --glyph-sm: 28px;
  --underline: 3px;           /* active-section bar */
  --grid-cell: 28px;          /* graticule */
  --ruler-h: 10px; --ruler-minor: 8px; --ruler-major: 40px; --ruler-minor-h: 4px; --ruler-major-h: 9px;
  --head-icon: 76px; --head-icon-sm: 52px;
  --back-pad: 8px;
  --icon-grid-max: 820px;
  --icon-cell-pad: clamp(10px, 2.4vw, 26px);
  --icon-max: 150px;
  --num-top: 8px; --num-left: 10px;
  --rise: 8px;
  --meta-gap: 12px;  --meta-gap-sm: 8px;
  --card-title-gap: 10px 0 14px;
  --more-pad: 4px;
  --sticky-top: 24px;  --year-sticky-top: 16px;
  --aside-max: 420px;
  --wide-figure-max: 980px;
  --wide-figure-max-h: 88vh;   /* tallest a wide figure gets (portrait graphics) */
  --caption-gap: 8px;
  --pub-dash: 6px;
  --go-pad: 3px 6px 2px;
  --scholar-pad: 10px 14px;
  --tl-node: 22px;  --tl-dot: 11px;  --tl-ping: 10px;
  --tag-inset-x: 14px; --tag-inset-y: 12px;
  --eq-h: 18px; --eq-bar: 3px; --eq-gap: 3px;
  --collage-gap: 10px;
  --pair-under-cols: minmax(0, 1fr) minmax(0, 1.5fr);      /* pair with under: main column : text column */
  --pair-under-cols-flip: minmax(0, 1.5fr) minmax(0, 1fr);
  --pair-under-w: 75%;        /* width of the under-media within the text column */
  --gallery-tile: 3 / 4;      /* grid tile shape when build.py hasn't derived one (--tile) */

  /* ---------- motion ---------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .2s;  --t-med: .25s;  --t-rise: .6s;
  --wobble-dur: .5s;          /* the one hover: a gentle wobble, no glow (signed off 2026-10) */
  --wobble-x: 0.5px;
  --wobble-y: 0.25px;
  --wobble-rot: 1deg;
  --ping-dur: 2.4s;  --eq-dur: 1.1s;
}