/* ==========================================================================
   Pikvita — base.css
   Tokens (values from docs/DESIGN-SYSTEM.md), @font-face, reset, type styles, utilities.
   Components use these custom properties only. If a value is missing, add a token here first.
   ========================================================================== */

/* ---------- Fonts: self-hosted woff2 (latin + latin-ext) ---------- */
/* Work Sans (SIL OFL, Fontsource variable build, latin): every weight in one file */
@font-face { font-family: "Work Sans"; src: url("/assets/fonts/work-sans-var.woff2") format("woff2-variations"), url("/assets/fonts/work-sans-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Work Sans latin-ext (Fontsource 5.1.0, SIL OFL; round 221): the latin file has no rupee sign or macron letters (₹, ā), which fell back to Arial.
   Same family, so the browser fetches it only for these characters. */
@font-face { font-family: "Work Sans"; src: url("/assets/fonts/work-sans-latin-ext-var.woff2") format("woff2-variations"), url("/assets/fonts/work-sans-latin-ext-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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; }
/* Iansui (SIL OFL, Google Fonts v14, latin subset; round 263): the hand-written note beside the hero button only */
@font-face { font-family: "Iansui"; src: url("/assets/fonts/iansui-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("/assets/fonts/gilroy-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("/assets/fonts/gilroy-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("/assets/fonts/gilroy-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("/assets/fonts/gilroy-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("/assets/fonts/gilroy-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Metric-matched fallbacks limit layout shift while the webfonts load.
   Values measured from the woff2 files against Arial / Georgia (size-adjust from average glyph width).
   Gilroy has no ₹ (U+20B9): the browser takes it from the next face in --font-body (interim decision). */
@font-face { font-family: "Gilroy Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 104.17%; ascent-override: 74.4%; descent-override: 21.6%; line-gap-override: 19.2%; }
@font-face { font-family: "Work Sans Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 111.03%; ascent-override: 84.08%; descent-override: 21.97%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */

:root {
  /* Colour palette (owner, round 20): six brand colours + neutrals. Nothing else.
     Cream #E8D3AA · Cream Soft #FFF4E3 · Maroon #4B2323 · Black #181818 · Secondary Black #3D3D3D · Tertiary Black #737373.
     Legacy token names below stay (components read them) but now point at this palette or at neutrals. */
  --success: #28A745;   /* free-delivery lines (owner, round 45) */
  --yellow: #FDF6BF;   /* the one accent (owner, round 44; v3 value round 155): highlights, hover fills, marquee, markers */
  --yellow-stroke: color-mix(in srgb, var(--yellow) 55%, #b38f00);   /* a darker yellow edge (#DCC869), for the store badges (round 275) */
  --cream-deep: var(--yellow);   /* legacy name: every old accent now resolves to the yellow */
  --cream: #FFF4E3;
  --maroon: #4B2323;
  --maroon-deep: #2B1212;   /* round 330: section 3 map name tags, darker than the city's blocks (#3A1A1A) */
  --black: #181818;
  --black-2: #3D3D3D;
  --black-3: #737373;
  --brown-900: var(--maroon);
  --red-800: var(--maroon);
  --red-700: var(--black);
  --black-900: var(--black);
  --green-50: var(--cream);
  --green-100: var(--cream-deep);
  --green-500: var(--maroon);
  --green-600: var(--black);
  --green-900: var(--black);
  --green-bright: var(--maroon);
  --sky: var(--cream-deep);
  --sky-deep: var(--black-3);
  --neutral-0: #FFFFFF;
  --neutral-50: #FAFAFA;
  --neutral-100: #F0F0F0;
  --neutral-200: #E0E0E0;
  --neutral-300: #C4C4C4;
  --neutral-400: #9E9E9E;
  --neutral-500: var(--black-3);
  --neutral-600: #525252;
  --neutral-700: var(--black-2);
  --neutral-900: var(--black);
  --success-500: var(--maroon);
  --success-700: var(--maroon);
  --info-100: var(--cream-deep);
  --info-700: var(--black);
  --warning-700: var(--black-2);
  --warning-900: var(--black);
  --error-100: var(--cream-deep);
  --disabled-bg: #E0E0E0;
  --disabled-text: #9E9E9E;
  --disabled-icon: #BDBDBD;
  --surface-subtle: #FAFAFA;
  --butter: var(--cream-deep);

  /* Semantic colour */
  --color-bg: var(--cream);
  --color-surface: var(--neutral-0);
  --color-surface-subtle: var(--surface-subtle);
  --color-brand-deep: var(--brown-900);
  --color-brand: var(--red-800);
  --color-brand-hover: var(--red-700);
  --color-text: var(--black);
  --color-text-secondary: var(--color-text);   /* round 125: eyebrow, heading, subheading and body text are one colour (#181818) everywhere */
  --color-text-tertiary: var(--color-text);
  --color-text-disabled: var(--neutral-400);
  --color-text-inverse: var(--neutral-0);
  --color-border-subtle: var(--neutral-100);
  --color-border-default: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-positive: var(--green-500);
  --color-positive-tint: var(--green-100);
  --color-highlight: var(--butter);
  --color-sky: var(--sky);
  --color-sky-deep: var(--sky-deep);
  --color-focus: var(--info-700);
  --color-success: var(--success-500);
  --color-info: var(--info-700);
  --color-warning: var(--warning-700);
  --color-error: var(--red-800);
  --color-error-surface: var(--error-100);
  --color-live: var(--success-500);
  --color-on-dark: var(--cream);
  --color-on-dark-soft: rgb(255 244 227 / 0.78);
  --color-on-dark-rule: rgb(255 244 227 / 0.22);
  --color-ink-rule: rgb(75 35 35 / 0.16);
  --color-ink-rule-strong: rgb(75 35 35 / 0.32);
  --color-overlay: rgb(75 35 35 / 0.56);

  /* Hero shopfront, door and game: drawn only with the palette above (round 20; Figma woods/brick/door browns retired) */
  --color-ink-deep: var(--maroon);
  --color-ink-tint: rgb(75 35 35 / 0.11);
  --color-shelf-back: #F5F5F5;             /* cabinet back panel (Figma neutral shelf) */
  --color-shelf-lip: #F0F0F0;              /* rack board top */
  --color-shelf-base: #E0E0E0;             /* board front face + plinth */
  --color-shelf-tag: #F0F0F0;              /* rack label tag */
  --color-shelf-string: var(--neutral-400);/* sign strings */
  --color-awning-light: #F0F0F0;
  --color-awning-dark: #E0E0E0;
  --color-awning-shadow: rgb(0 0 0 / 0.1);
  --color-door-frame: var(--black);
  --color-door: var(--maroon);
  --color-door-trim: var(--black);
  --color-door-glass: var(--neutral-200);
  --color-door-glare: rgb(255 255 255 / 0.45);
  --color-door-handle: var(--cream-deep);
  --color-floor: var(--neutral-300);
  --color-veil: rgb(255 255 255 / 0.72);   /* white at 72%: the catch game veil (footer is white since round 25) */

  /* Contextual tokens: components read these; .theme-* classes re-point them */
  --ink: var(--color-text);   /* headings #181818 */
  --text: var(--color-text-secondary);   /* body #3D3D3D */
  --text-soft: var(--color-text-secondary);
  --rule: var(--color-ink-rule);
  --rule-strong: var(--color-ink-rule-strong);
  --surface: var(--color-bg);
  --accent: var(--color-brand);
  --focus-ring: var(--color-focus);

  /* Type families (owner, round 18): Gilroy for headings, buttons and UI chrome; Work Sans for everything else */
  --font-display: "Gilroy", "Gilroy Fallback", "Avenir Next", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-ui: var(--font-display);
  --font-body: "Work Sans", "Work Sans Fallback", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-hand: "Iansui", "Segoe Print", "Bradley Hand", cursive;   /* the hero note only (round 263) */

  /* Type roles (owner, round 70): ONE golden-ratio scale (φ = 1.618), five styles, every size rounded to the nearest 4px.
     Phones: Subheading 24 · Heading 40 · Body 14 · Eyebrow 10 · Button 16.
     From 48em: Subheading 32 · Heading 52 · Body 18 · Eyebrow 14 · Button 16 (round 71: Body and Eyebrow were 2px quieter than the φ steps; line heights 1.05 / 1.4 / 1.7 / 1.7).
     Line heights snap to the 8-point grid (round()). Only these five styles exist: the old alias names (title, small, label, xs, h1 ...) are gone (round 81). */
  --text-heading: 2.625rem;     /* 42 → 52  Gilroy 700 (round 167: +2 phones, +4 from 48em; was 40 → 48) */
  --text-subheading: 1.5rem;    /* 24 → 32  Gilroy 600 */
  --text-body: 0.875rem;        /* 14 → 18  Work Sans 400 */
  --text-eyebrow: 0.75rem;      /* 12 → 13  Work Sans 500 uppercase (round 83: phones 9 → 12) */
  --text-button: 1rem;          /* 16       Gilroy 600 */
  --text-hero: calc(var(--text-heading) + 0.75rem);   /* hero headlines only (round 243): Heading + 12, 54 phones, 64 from 48em; home hero, launch offer, story hero */
  --leading-hero: round(calc(var(--text-hero) * 1.1), 0.5rem);   /* 56 · 72 */

  --leading-heading: round(calc(var(--text-heading) * 1.2), 0.5rem);   /* 1.2 snapped to 8 (round 145): 64px lines from 48em, 48px on phones */
  --leading-subheading: round(calc(var(--text-subheading) * 1.2), 0.25rem);   /* ×1.2 snapped to 4px (round 161, was ×1.4 to 8px): 28px lines on phones, 40px on desktop */
  --leading-body: round(calc(var(--text-body) * 1.8), 0.125rem);   /* 1.8 snapped to 2px (round 147): 28px lines on desktop, 26px on phones (was 24 / 24) */
  --leading-eyebrow: round(calc(var(--text-eyebrow) * 1.7), 0.5rem);
  --leading-button: 1;

  --tracking-heading: -0.02em;
  --tracking-subheading: -0.01em;
  --tracking-body: -0.015em;   /* tighter body letter spacing (round 146) */
  --tracking-eyebrow: 0.14em;   /* owner, round 26: wider */
  --tracking-button: 0;
  --tracking-wordmark: 0.14em;

  --measure: 66ch;

  /* Space (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;
  /* Spacing is strictly on the 4px grid (owner, round 19): tokens only, stepped at 48em / 64em (never fluid) */
  /* Section spacing (round 241): one scale for every section. Space above and below a section 80 · 96 · 128 (phones · tablet · desktop);
     heading block → content 48 · 64; content → its button 48. Inside text blocks: 16 (eyebrow → heading → line), 32 before a next group. */
  --section-pad: var(--space-10);   /* 80 phones, 96 from 48em, 128 from 64em (round 241; was 60 / 80 / 80) */
  --head-gap: var(--space-8);       /* heading block → content: 48, 64 from 64em */
  --cta-gap: var(--space-8);        /* content → button: 48 */
  --stack-gap: var(--space-5);     /* 24 → 32 → 40 */

  /* Layout */
  --container: 77.5rem;          /* content cap (round 207, was 1200): 1240 = the owner's 1440 frame less its 100px margins; wider screens grow the margins */
  --container-narrow: 48rem;
  --gutter: var(--space-4);        /* 16 → 32 → 24: the gap between grid columns (owner, round 157) */
  --margin: var(--space-4);        /* 16 → 32 → 80 minimum (the 1240 cap makes it 100 at 1440, round 207): the page margin, outside the first and last column (owner, round 157) */
  --header-h: 5rem;   /* floating pill: 16px offset + 64px bar */
  --tap: 2.75rem;               /* 44px minimum touch target */
  --btn-h: 3rem;                /* every button is 48px tall (owner, round 19) */
  --chip-h: 2.5rem;              /* chips / toggles stay 40px (44px hit band) */
  --logo-size: calc(var(--space-7) + var(--space-4));   /* 56px: every store logo on the site, at every width (owner, round 212) */
  --card-pad: var(--space-5);    /* 24px: the inner padding of every card (owner, round 183); 16px on phones since round 311 (below) */
  --badge-h: var(--btn-h);       /* 48px: every Google Play / App Store badge, every place, every width (owner, round 231) */
  --badge-w: 10rem;              /* 160px: both badge images are 3.37:1, so 160 × 48 fits each */
  /* Page grid (round 155): faint column lines behind every section, aligned to the container (layout.css).
     4 columns on phones, 8 from 48em, 12 from 64em; the gap is the gutter. Percentages resolve where the vars are used. */
  --grid-cols: 4;
  --grid-gap: var(--gutter);
  --grid-line: #F5F5F5;          /* owner (round 342; #FAFAFA since round 233, #F2F2F2 from round 157); solid, so overlapping layers never darken it */
  --grid-w: min(100% - var(--margin) * 2, var(--container));   /* full width less the margins, capped at 1240 (round 207) */
  --grid-col: calc((100% - (var(--grid-cols) - 1) * var(--grid-gap)) / var(--grid-cols));
  --grid-lines: repeating-linear-gradient(to right,
    var(--grid-line) 0 1px, transparent 1px calc(var(--grid-col) - 1px),
    var(--grid-line) calc(var(--grid-col) - 1px) var(--grid-col),
    transparent var(--grid-col) calc(var(--grid-col) + var(--grid-gap)));
  /* Buttons (owner, round 19): primary = black fill, white text; secondary = white fill, black stroke */
  --color-button: var(--black-900);
  --color-button-hover: var(--neutral-700);
  --color-button-fg: var(--neutral-0);
  --color-button-2: var(--neutral-0);   /* white fill + black stroke: every button is black or white (owner, round 224; was transparent) */
  --color-button-2-hover: rgb(24 24 24 / 0.06);
  --color-button-2-fg: var(--black-900);
  --color-button-2-stroke: var(--black-900);

  /* Radius */
  --radius-xs: 4px;   /* every corner is 4px (owner, round 73); only circles keep --radius-pill */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  /* Borders (round 320, owner): ONE stroke for the whole site. Every border, divider, card / tile / chip / input outline, the
     navbar edge, the dock edge, inset outlines and corner hinges use --stroke (or --stroke-w + --stroke-color). Not strokes, so
     not covered: button borders (they match the button's fill), focus rings, offset "hard" shadows, the loading spinner. */
  --border-hair: 1px;
  --border-ink: 1px;   /* was 2px (v1 / v2 ink borders); now the one stroke width */
  --stroke-w: var(--border-hair);   /* 1px everywhere */
  --stroke-color: rgb(24 24 24 / 0.16);   /* black at 16% on light surfaces; dark surfaces re-point it (themes, section 3) */
  --stroke: var(--stroke-w) solid var(--stroke-color);

  /* Elevation */
  --shadow-ink: var(--color-brand-deep);
  --shadow-hard: 4px 4px 0 var(--shadow-ink);
  --shadow-hard-hover: 6px 6px 0 var(--shadow-ink);
  --shadow-hard-press: 1px 1px 0 var(--shadow-ink);
  --shadow-1: 0 1px 2px rgb(24 24 24 / 0.06), 0 2px 8px rgb(24 24 24 / 0.06);
  --shadow-2: 0 8px 24px rgb(24 24 24 / 0.10);

  /* Motion */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);   /* round 341: a softer ease-out (quart; was 0.22, 1, 0.36, 1) */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 450ms;     /* round 341: = --dur-hover (was 300) */
  --dur-slow: 400ms;     /* panels, sheets, the dock sliding in */
  --dur-reveal: 1200ms;  /* round 341: every appearance on scroll, slower and smoother (was 800); see docs/MOTION.md */
  --dur-hover: 450ms;    /* round 341: every hover / focus state change on the site (was 300) */
  --dur-media: 900ms;    /* round 341: image zoom on hover (was 600; a large surface moves a little slower) */
  --rise: 1rem;          /* round 324: how far a block rises as it fades in (16px) */
  --dur-marquee: 70s;
  --dur-ticker: 45s;
  --dur-spin: 700ms;     /* loading spinner turn */
  --dur-pulse: 2s;       /* live dot + map door ring */

  /* Icons */
  /* Every icon is a Hugeicons (stroke rounded) icon, 16 × 16 with a 1.5px stroke (owner, round 84) */
  --icon-sm: 1rem;
  --icon-md: 1rem;
  --icon-lg: 1rem;
  --icon-xl: 1rem;

  /* Layers */
  --z-base: 1;
  --z-header: 50;
  --z-nudge: 60;
  --z-overlay: 100;
  --z-toast: 110;
}

@media (max-width: 47.99em) {
  :root { --card-pad: var(--space-4); }   /* phones: every card's inner padding is 16 (owner, round 311) */
}
@media (min-width: 48em) {
  :root { --header-h: 5rem; }
}
@media (min-width: 64em) {
  :root { --header-h: 5rem; }
}

/* Reduced motion: every transition reads these tokens, so they collapse here. Loops opt out locally. */
/* only while the site respects the OS reduce-motion setting (motion.js RESPECT_REDUCED_MOTION) */
html.calm {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
    --dur-hover: 0ms;
    --dur-media: 0ms;
  }

/* Surface themes re-point the contextual tokens */
.theme-dark {
  --surface: var(--color-brand-deep);
  --ink: var(--color-on-dark);
  --text: var(--color-on-dark);
  --text-soft: var(--color-on-dark-soft);
  --rule: var(--color-on-dark-rule);
  --stroke-color: rgb(253 246 191 / 0.24);   /* the one stroke on dark surfaces: light yellow at 24% (round 320) */
  --stroke: var(--stroke-w) solid var(--stroke-color);   /* redeclared here: a var resolves where it is declared */
  --rule-strong: var(--color-on-dark-soft);
  --accent: var(--color-highlight);
  --focus-ring: var(--color-sky);
  --shadow-ink: var(--black-900);
  --shadow-hard: 4px 4px 0 var(--shadow-ink);
  --shadow-hard-hover: 6px 6px 0 var(--shadow-ink);
  --shadow-hard-press: 1px 1px 0 var(--shadow-ink);
  background-color: var(--surface);
  color: var(--text);
}
.theme-brand {
  --surface: var(--color-brand);
  --ink: var(--color-on-dark);
  --text: var(--color-on-dark);
  --text-soft: var(--color-on-dark-soft);
  --rule: var(--color-on-dark-rule);
  --stroke-color: rgb(253 246 191 / 0.24);   /* the one stroke on dark surfaces: light yellow at 24% (round 320) */
  --stroke: var(--stroke-w) solid var(--stroke-color);   /* redeclared here: a var resolves where it is declared */
  --rule-strong: var(--color-on-dark-soft);
  --accent: var(--color-highlight);
  --focus-ring: var(--color-sky);
  --shadow-ink: var(--black-900);
  --shadow-hard: 4px 4px 0 var(--shadow-ink);
  --shadow-hard-hover: 6px 6px 0 var(--shadow-ink);
  --shadow-hard-press: 1px 1px 0 var(--shadow-ink);
  background-color: var(--surface);
  color: var(--text);
}
.theme-highlight {
  --surface: var(--color-highlight);
  --accent: var(--color-brand);
  background-color: var(--surface);
  color: var(--text);
}

/* ---------- Page-to-page polish (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html { scroll-behavior: smooth; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-4);   /* header is not sticky */
  color-scheme: light;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-bg);
  color: var(--color-text-secondary);   /* body text #3D3D3D; headings use --ink #181818; tertiary #737373 */
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: from-font; text-underline-offset: 0.18em; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
p, li, figcaption, blockquote, dd { text-wrap: pretty; overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; overflow-wrap: break-word; }
[hidden]:not([hidden="until-found"]) { display: none; }
dialog { padding: 0; border: 0; color: inherit; max-width: none; max-height: none; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
::selection { background-color: var(--color-highlight); color: var(--color-brand-deep); }

/* Focus: one ring everywhere, re-coloured on dark surfaces via --focus-ring */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Spacing steps (4px grid): section padding, stack gap and gutter grow at the tablet and desktop breakpoints */
@media (min-width: 48em) {
  :root { --section-pad: var(--space-11); --stack-gap: var(--space-6); --gutter: var(--space-6); --margin: var(--space-6); --grid-cols: 8; }
}
@media (min-width: 64em) {
  :root { --section-pad: var(--space-12); --head-gap: var(--space-9); --stack-gap: var(--space-7); --gutter: var(--space-5); --margin: var(--space-10); --grid-cols: 12; }   /* owner's desktop grid: 12 columns, 24 gutters; margins 80 minimum, 120 at 1440 via the 1200 cap (round 160) */
}

@media (min-width: 48em) {
  :root { --text-heading: 3.25rem; --text-subheading: 2rem; --text-body: 1rem; --text-eyebrow: 0.8125rem; }   /* desktop Body 18 → 17 (round 125) */
}

/* ---------- Type styles ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;   /* headings are bold again (round 145) */
}
h1, .h1 {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: var(--text-heading);
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
h2, .h2 {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: var(--text-heading);
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
h3, .h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: var(--text-subheading);
  font-weight: 600;
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}
h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.display {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
}
.lede {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-soft);
  max-width: 38em;
}
.text-small {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-soft);   /* eyebrows #3D3D3D everywhere (round 50) */
}
.eyebrow--muted { color: var(--text-soft); }
strong, b { font-weight: 700; }
em { font-style: italic; }
small { font-size: var(--text-body); }

/* Inline text links */
.link {
  color: var(--accent);
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.link:hover { text-decoration-thickness: 2px; }
.link:active { opacity: 0.8; }

/* ---------- Icons ---------- */
.icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: none;
  stroke-width: 1.25px;   /* round 354 (owner): every icon line 1.25px on screen, at any icon size (the sprite paths also carry vector-effect: non-scaling-stroke) */
}

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-brand-deep);
  color: var(--color-on-dark);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--dur-hover) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }
.nowrap { white-space: nowrap; }

/* Lenis smooth scroll (from lenis/dist/lenis.css): let the page size itself; nested scrollers keep their own scroll */
html.lenis,
html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }   /* Lenis does the easing; native smooth scrolling would fight it */
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }