/* with icons — design tokens (v2). Shared by every page.
   Token NAMES are a stable contract: add, never rename. Self-hosted fonts only (site/fonts). */

/* ───────── fonts ───────── */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  src: url('../fonts/bricolage-grotesque-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: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  src: url('../fonts/bricolage-grotesque-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: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/caveat-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: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/caveat-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; }
/* 4 KB subset holding only "with" — preloaded so the logo never swaps */
@font-face { font-family: 'Caveat Logo'; font-style: normal; font-weight: 400 700; font-display: block;
  src: url('../fonts/caveat-logo.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/instrument-serif-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/instrument-serif-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: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/instrument-serif-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: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/jetbrains-mono-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 700; font-display: swap;
  src: url('../fonts/jetbrains-mono-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; }
/* metric-matched fallback so the swap does not shift layout */
@font-face { font-family: 'Bricolage Fallback'; src: local('Arial'); size-adjust: 104%; ascent-override: 90%; descent-override: 24%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  /* ───────── brand ───────── */
  --paper: #FBF8F3;          /* page ground */
  --paper-2: #F3EEE5;        /* sunken bands, wells */
  --paper-3: #EAE3D6;
  --card: #FFFFFF;
  --ink: #111318;            /* text, dark slabs */
  --ink-2: #3A3F4B;          /* body text */
  --muted: #5F6573;          /* secondary text (AA on paper) */
  --faint: #9AA0AC;          /* decorative only, not for text */
  --rule: #E6DFD3;
  --rule-strong: #D3CABA;
  --sun: #FFD23F;            /* highlight, focus, "new" */
  --sun-soft: #FFF1BF;
  --evergrow: #D5B473;       /* the Powered by Evergrow mark only */
  --evergrow-ink: #8A6A2C;

  /* ───────── one signature colour per style ─────────
     --c-<style>       the colour (fills, chips, accents, the nav morph)
     --c-<style>-text  a darker/brighter twin that passes AA as text on --paper
     --c-<style>-soft  a pale tint for backgrounds */
  --c-line: #2F5BFF;      --c-line-text: #2448D8;      --c-line-soft: #E3E9FF;
  --c-solid: #FF5A36;     --c-solid-text: #BA2F0E;     --c-solid-soft: #FFE5DE;
  --c-duo: #7252FF;       --c-duo-text: #5B3CE0;       --c-duo-soft: #ECE6FF;
  --c-gloss: #FF4FA3;     --c-gloss-text: #C4166C;     --c-gloss-soft: #FFE2F0;
  --c-engrave: #C9962B;   --c-engrave-text: #8A6414;   --c-engrave-soft: #F6ECD4;
  --c-blueprint: #00A3C4; --c-blueprint-text: #00728A; --c-blueprint-soft: #D9F3F8;
  --c-sketch: #22A861;    --c-sketch-text: #157A43;    --c-sketch-soft: #DDF3E6;
  /* run 4 (2026-10-02): the five palette styles. Their icons carry their own default palette
     (--with-<style>-<role>); these tokens are the site's signature colour for each style. */
  --c-glass: #5B9DFF;     --c-glass-text: #2F65C8;     --c-glass-soft: #E3EEFF;   /* icy sky */
  --c-kawaii: #FF7A9A;    --c-kawaii-text: #C2335A;    --c-kawaii-soft: #FFE6EC;  /* strawberry milk */
  --c-sticker: #B57CFF;   --c-sticker-text: #7A3FD6;   --c-sticker-soft: #F2E8FF; /* candy lilac */
  --c-pixel: #4FAE0C;     --c-pixel-text: #3B7300;     --c-pixel-soft: #E6F5D6;   /* arcade green */
  --c-retro: #F57C12;     --c-retro-text: #AD4C00;     --c-retro-soft: #FFEBD6;   /* sunset orange */
  /* run 7: the three studio styles (role-named palettes, --with-<style>-<role>) */
  --c-luxe: #2B3FB8;      --c-luxe-text: #2B3FB8;      --c-luxe-soft: #F5EBD3;    /* sapphire enamel on champagne */
  --c-bauhaus: #D62718;   --c-bauhaus-text: #B81E12;   --c-bauhaus-soft: #FCE3DF; /* Bauhaus red */
  --c-skeuo: #5A6E86;     --c-skeuo-text: #4A5C71;     --c-skeuo-soft: #E5EAF0;   /* brushed steel */
  /* run 8: the five storybook styles (role-named palettes, --with-<style>-<role>) */
  --c-anime: #2E9BF0;     --c-anime-text: #0B67B3;     --c-anime-soft: #DCEFFD;   /* cel sky blue */
  --c-gothic: #7A1F3D;    --c-gothic-text: #7A1F3D;    --c-gothic-soft: #F3E1E6;  /* cathedral wine */
  --c-pastel: #3DBFA0;    --c-pastel-text: #127A62;    --c-pastel-soft: #DDF5EE;  /* mint macaron */
  --c-coquette: #E2456F;  --c-coquette-text: #B81F4B;  --c-coquette-soft: #FDE4EA; /* ribbon rose */
  --c-plush: #F2AE24;     --c-plush-text: #8F5E00;     --c-plush-soft: #FDF0D5;   /* honey teddy */
  /* text/icon colour ON a filled style colour (AA): white on the deep ones, ink on the bright ones */
  --c-line-on: #FFFFFF; --c-solid-on: #111318; --c-duo-on: #FFFFFF; --c-gloss-on: #111318;
  --c-engrave-on: #111318; --c-blueprint-on: #111318; --c-sketch-on: #111318;
  --c-glass-on: #111318; --c-kawaii-on: #111318; --c-sticker-on: #111318; --c-pixel-on: #111318; --c-retro-on: #111318;
  --c-luxe-on: #FFFFFF; --c-bauhaus-on: #FFFFFF; --c-skeuo-on: #FFFFFF;
  --c-anime-on: #111318; --c-gothic-on: #FFFFFF; --c-pastel-on: #111318; --c-coquette-on: #111318; --c-plush-on: #111318;
  --c-duo-fill: var(--c-duo); /* kept for compatibility: violet is now deep enough (4.8:1 with white) */
  --style-on: var(--c-line-on);
  /* short aliases (library.css relies on these names) */
  --on-line: var(--c-line-on); --on-solid: var(--c-solid-on); --on-duo: var(--c-duo-on); --on-gloss: var(--c-gloss-on);
  --on-engrave: var(--c-engrave-on); --on-blueprint: var(--c-blueprint-on); --on-sketch: var(--c-sketch-on);
  --on-glass: var(--c-glass-on); --on-kawaii: var(--c-kawaii-on); --on-sticker: var(--c-sticker-on); --on-pixel: var(--c-pixel-on); --on-retro: var(--c-retro-on);
  --on-luxe: var(--c-luxe-on); --on-bauhaus: var(--c-bauhaus-on); --on-skeuo: var(--c-skeuo-on);
  --on-anime: var(--c-anime-on); --on-gothic: var(--c-gothic-on); --on-pastel: var(--c-pastel-on); --on-coquette: var(--c-coquette-on); --on-plush: var(--c-plush-on);
  /* every signature colour as one hue sweep (rings, dials, the CTA hover) */
  --spectrum: var(--c-line), var(--c-glass), var(--c-anime), var(--c-blueprint), var(--c-pastel), var(--c-sketch), var(--c-pixel), var(--c-plush), var(--c-engrave), var(--c-retro), var(--c-solid), var(--c-bauhaus), var(--c-gothic), var(--c-coquette), var(--c-kawaii), var(--c-gloss), var(--c-sticker), var(--c-duo), var(--c-luxe), var(--c-skeuo), var(--c-line);
  /* focus: ink ring (17:1 on paper) inside a sun halo; dark theme flips the ring to sun */
  --focus-ring: #111318; --focus-halo: var(--sun);
  /* the current style on a page/element: set --style on any element, e.g. style="--style: var(--c-duo)"
     or use the helper classes .s-line … .s-plush (they also set --style-text and --style-soft) */
  --style: var(--c-line); --style-text: var(--c-line-text); --style-soft: var(--c-line-soft);

  /* legacy semantic names (kept so older CSS keeps working) */
  --accent: var(--sun);
  --accent-ink: var(--ink);
  --accent-soft: var(--sun-soft);
  --accent-text: var(--c-line-text);
  --cool: var(--c-sketch);
  --cool-soft: var(--c-sketch-soft);
  --dark: #111318;           /* always-dark slab (stays dark in both themes) */
  --dark-2: #1B1E26;
  --on-dark: #F7F3EC;
  --on-dark-2: rgba(247, 243, 236, .74);
  --on-dark-rule: rgba(247, 243, 236, .12);

  /* icon colour hooks (consumed by the icon CSS / runtime) */
  --with-duo: currentColor;
  --eg-duo: var(--with-duo);

  /* ───────── type ───────── */
  --font-display: 'Bricolage Grotesque', 'Bricolage Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: var(--font-display);
  --font-hand: 'Caveat', 'Caveat Logo', 'Segoe Print', 'Bradley Hand', cursive;
  --font-logo-hand: 'Caveat Logo', 'Caveat', 'Segoe Print', cursive;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-italic: var(--font-serif);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--2: clamp(0.7rem, 0.68rem + 0.08vw, 0.76rem);
  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(0.98rem, 0.94rem + 0.18vw, 1.06rem);
  --step-1: clamp(1.15rem, 1.07rem + 0.38vw, 1.38rem);
  --step-2: clamp(1.45rem, 1.27rem + 0.85vw, 2rem);
  --step-3: clamp(1.95rem, 1.55rem + 1.9vw, 3.15rem);
  --step-4: clamp(2.55rem, 1.8rem + 3.6vw, 4.9rem);
  --step-5: clamp(3rem, 1.6rem + 6.6vw, 7.6rem);
  --step-6: clamp(3.4rem, 1.2rem + 10vw, 10.5rem);

  /* ───────── shape, depth, motion ───────── */
  --radius-s: 10px;
  --radius: 18px;
  --radius-l: 28px;
  --radius-xl: 40px;
  --pill: 999px;
  --shadow-s: 0 1px 0 rgba(17, 19, 24, .05), 0 4px 14px -8px rgba(17, 19, 24, .22);
  --shadow: 0 1px 0 rgba(17, 19, 24, .04), 0 12px 32px -14px rgba(17, 19, 24, .24);
  --shadow-l: 0 2px 0 rgba(17, 19, 24, .04), 0 40px 80px -36px rgba(17, 19, 24, .42);
  --ring: 0 0 0 3px var(--sun);
  --e-out: cubic-bezier(0.23, 1, 0.32, 1);
  --e-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --e-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: var(--e-out);
  --ease-spring: var(--e-spring);
  --dur: 240ms;
  --maxw: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 72px;
  --dot-grid: radial-gradient(circle at 1px 1px, rgba(17, 19, 24, .12) 1px, transparent 1.4px) 0 0 / 22px 22px;
  --dot-grid-dark: radial-gradient(circle at 1px 1px, rgba(247, 243, 236, .09) 1px, transparent 1.4px) 0 0 / 22px 22px;
}

/* ───────── dark theme ───────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0D0F14; --paper-2: #14171F; --paper-3: #1C2029; --card: #171A22;
  --ink: #F4F0E8; --ink-2: #C8CBD3; --muted: #969CAA; --faint: #5A606D;
  --rule: #242833; --rule-strong: #323745;
  --sun-soft: #3A3014;
  --evergrow-ink: #D5B473;
  --c-line: #5B7FFF;      --c-line-text: #8EA6FF;      --c-line-soft: #18204A;
  --c-solid: #FF6B4A;     --c-solid-text: #FF9479;     --c-solid-soft: #3A1810;
  --c-duo: #8E73FF;       --c-duo-text: #B3A1FF;       --c-duo-soft: #231A4A;
  --c-gloss: #FF5FAE;     --c-gloss-text: #FF8DC4;     --c-gloss-soft: #3D1328;
  --c-engrave: #D9A94A;   --c-engrave-text: #E7C17A;   --c-engrave-soft: #33280F;
  --c-blueprint: #19B8D8; --c-blueprint-text: #63D3EA; --c-blueprint-soft: #0B2B33;
  --c-sketch: #34BF73;    --c-sketch-text: #6FD99C;    --c-sketch-soft: #10301E;
  --c-glass: #7DB2FF;     --c-glass-text: #A9CBFF;     --c-glass-soft: #13243F;
  --c-kawaii: #FF8FAA;    --c-kawaii-text: #FFB3C4;    --c-kawaii-soft: #3D1622;
  --c-sticker: #C292FF;   --c-sticker-text: #D4B3FF;   --c-sticker-soft: #2A1A45;
  --c-pixel: #7FDB2E;     --c-pixel-text: #A8EE6E;     --c-pixel-soft: #172E0A;
  --c-retro: #FF9A3C;     --c-retro-text: #FFB878;     --c-retro-soft: #3A2210;
  --c-luxe: #9AA8FF;      --c-luxe-text: #C3CCFF;      --c-luxe-soft: #2A2312;
  --c-bauhaus: #FF5A47;   --c-bauhaus-text: #FF8A7A;   --c-bauhaus-soft: #3A1310;
  --c-skeuo: #9FB2C9;     --c-skeuo-text: #C3D2E4;     --c-skeuo-soft: #1C232D;
  --c-anime: #5DB4FF;     --c-anime-text: #9BD2FF;     --c-anime-soft: #0E2638;
  --c-gothic: #E0668C;    --c-gothic-text: #F09AB5;    --c-gothic-soft: #341020;
  --c-pastel: #5FD6B9;    --c-pastel-text: #94E8D3;    --c-pastel-soft: #0E2E27;
  --c-coquette: #FF6E93;  --c-coquette-text: #FFA3BA;  --c-coquette-soft: #3D1220;
  --c-plush: #FFC24D;     --c-plush-text: #FFD789;     --c-plush-soft: #33260B;
  --c-line-on: #111318; --c-solid-on: #111318; --c-duo-on: #111318; --c-gloss-on: #111318;
  --c-engrave-on: #111318; --c-blueprint-on: #111318; --c-sketch-on: #111318;
  --c-glass-on: #111318; --c-kawaii-on: #111318; --c-sticker-on: #111318; --c-pixel-on: #111318; --c-retro-on: #111318;
  --c-luxe-on: #111318; --c-bauhaus-on: #111318; --c-skeuo-on: #111318;
  --c-anime-on: #111318; --c-gothic-on: #111318; --c-pastel-on: #111318; --c-coquette-on: #111318; --c-plush-on: #111318;
  --c-duo-fill: var(--c-duo);
  --focus-ring: var(--sun); --focus-halo: rgba(255, 210, 63, .28);
  /* duo previews on dark grounds: a light-ink tint at 20% reads as muddy grey, so tint with the duo violet */
  --with-duo: var(--c-duo);
  --accent-text: var(--c-line-text);
  --dark: #07080B; --dark-2: #12141B;
  --shadow-s: 0 1px 0 rgba(0,0,0,.3), 0 4px 14px -8px rgba(0,0,0,.7);
  --shadow: 0 1px 0 rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.75);
  --shadow-l: 0 2px 0 rgba(0,0,0,.3), 0 40px 80px -36px rgba(0,0,0,.9);
  --dot-grid: radial-gradient(circle at 1px 1px, rgba(247, 243, 236, .08) 1px, transparent 1.4px) 0 0 / 22px 22px;
}
/* light by default: dark applies only via [data-theme="dark"] (the toggle) */

/* "more contrast" (macOS/iOS Increase Contrast, Windows contrast themes in Chromium): firmer hairlines and
   secondary text one step closer to the ink, in both themes */
@media (prefers-contrast: more) {
  :root { --muted: #474C58; --faint: #6B717E; --rule: #B9AF9E; --rule-strong: #8F8676; }
  :root[data-theme="dark"] { --muted: #B9BDC7; --faint: #8A909D; --rule: #4A5061; --rule-strong: #6A7184; }
}

/* style helper classes: set the "current style" colour trio on any element */
.s-line { --style: var(--c-line); --style-text: var(--c-line-text); --style-soft: var(--c-line-soft); --style-on: var(--c-line-on); --style-fill: initial; }
.s-solid { --style: var(--c-solid); --style-text: var(--c-solid-text); --style-soft: var(--c-solid-soft); --style-on: var(--c-solid-on); --style-fill: initial; }
.s-duo { --style: var(--c-duo); --style-text: var(--c-duo-text); --style-soft: var(--c-duo-soft); --style-on: var(--c-duo-on); --style-fill: var(--c-duo-fill); }
.s-gloss { --style: var(--c-gloss); --style-text: var(--c-gloss-text); --style-soft: var(--c-gloss-soft); --style-on: var(--c-gloss-on); --style-fill: initial; }
.s-engrave { --style: var(--c-engrave); --style-text: var(--c-engrave-text); --style-soft: var(--c-engrave-soft); --style-on: var(--c-engrave-on); --style-fill: initial; }
.s-blueprint { --style: var(--c-blueprint); --style-text: var(--c-blueprint-text); --style-soft: var(--c-blueprint-soft); --style-on: var(--c-blueprint-on); --style-fill: initial; }
.s-sketch { --style: var(--c-sketch); --style-text: var(--c-sketch-text); --style-soft: var(--c-sketch-soft); --style-on: var(--c-sketch-on); --style-fill: initial; }
.s-glass { --style: var(--c-glass); --style-text: var(--c-glass-text); --style-soft: var(--c-glass-soft); --style-on: var(--c-glass-on); --style-fill: initial; }
.s-kawaii { --style: var(--c-kawaii); --style-text: var(--c-kawaii-text); --style-soft: var(--c-kawaii-soft); --style-on: var(--c-kawaii-on); --style-fill: initial; }
.s-sticker { --style: var(--c-sticker); --style-text: var(--c-sticker-text); --style-soft: var(--c-sticker-soft); --style-on: var(--c-sticker-on); --style-fill: initial; }
.s-pixel { --style: var(--c-pixel); --style-text: var(--c-pixel-text); --style-soft: var(--c-pixel-soft); --style-on: var(--c-pixel-on); --style-fill: initial; }
.s-retro { --style: var(--c-retro); --style-text: var(--c-retro-text); --style-soft: var(--c-retro-soft); --style-on: var(--c-retro-on); --style-fill: initial; }
.s-luxe { --style: var(--c-luxe); --style-text: var(--c-luxe-text); --style-soft: var(--c-luxe-soft); --style-on: var(--c-luxe-on); --style-fill: initial; }
.s-bauhaus { --style: var(--c-bauhaus); --style-text: var(--c-bauhaus-text); --style-soft: var(--c-bauhaus-soft); --style-on: var(--c-bauhaus-on); --style-fill: initial; }
.s-skeuo { --style: var(--c-skeuo); --style-text: var(--c-skeuo-text); --style-soft: var(--c-skeuo-soft); --style-on: var(--c-skeuo-on); --style-fill: initial; }
.s-anime { --style: var(--c-anime); --style-text: var(--c-anime-text); --style-soft: var(--c-anime-soft); --style-on: var(--c-anime-on); --style-fill: initial; }
.s-gothic { --style: var(--c-gothic); --style-text: var(--c-gothic-text); --style-soft: var(--c-gothic-soft); --style-on: var(--c-gothic-on); --style-fill: initial; }
.s-pastel { --style: var(--c-pastel); --style-text: var(--c-pastel-text); --style-soft: var(--c-pastel-soft); --style-on: var(--c-pastel-on); --style-fill: initial; }
.s-coquette { --style: var(--c-coquette); --style-text: var(--c-coquette-text); --style-soft: var(--c-coquette-soft); --style-on: var(--c-coquette-on); --style-fill: initial; }
.s-plush { --style: var(--c-plush); --style-text: var(--c-plush-text); --style-soft: var(--c-plush-soft); --style-on: var(--c-plush-on); --style-fill: initial; }

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--font-sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2.5px solid var(--focus-ring, #111318); outline-offset: 2px; box-shadow: 0 0 0 7px var(--focus-halo, #FFD23F); border-radius: 8px; }
::selection { background: var(--sun); color: #111318; }
/* the visitor's own "Pause animations" (site.js sets html.is-still): the same treatment as the OS setting below */
html.is-still { scroll-behavior: auto; }
html.is-still :not(.wm-force, .wm-force *), html.is-still :not(.wm-force, .wm-force *)::before, html.is-still :not(.wm-force, .wm-force *)::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; }
  /* @withicons/motion: an element marked .wm-force (the visitor pressed "play anyway") keeps its animations and swap transitions */
  :not(.wm-force, .wm-force *), :not(.wm-force, .wm-force *)::before, :not(.wm-force, .wm-force *)::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}