@layer base, layout, components, utility;

/* ============================================================
   DESIGN CORE — TOKENS
   The non-color primitives (ported verbatim from crucix's tokens.css — sizing, type scale, radii,
   glass/shadow/glow recipe, motion, layout, z-index, content-type hues) plus the SLOT-ROLE colour
   contract every skin overrides. Primitives keep their crucix names (a size is a size on every site);
   colours that must vary per site route through the slot roles below instead — that split is the
   whole point of this file: `components.css` references ONLY these two sets, never a raw crucix ramp
   (`--mint-*`, `--color-text-*`, ...), so it re-skins correctly with zero rewrite (D3/D4).
   ============================================================ */

:root {
  /* ---------- SPACING — dense scale (crucix tokens.css:162-174) ---------- */
  --size-0: 0.125rem; /*  2px — hairline gap */
  --size-1: 0.25rem; /*  4px */
  --size-2: 0.375rem; /*  6px */
  --size-3: 0.5rem; /*  8px */
  --size-4: 0.75rem; /* 12px */
  --size-5: 1rem; /* 16px */
  --size-6: 1.5rem; /* 24px */
  --size-7: 2rem; /* 32px */
  --size-8: 3rem; /* 48px */
  --size-9: 4rem; /* 64px */

  /* Minimum interactive hit-area — WCAG 2.5.8 Target Size (Minimum). */
  --tap-min: 24px;

  /* ---------- RADII (crucix tokens.css:180-184) ---------- */
  --radius-0: 0; /* badges, chips */
  --radius-1: 2px; /* panels, cards */
  --radius-2: 3px; /* buttons, inputs */
  --radius-3: 6px; /* modals, large panels */

  /* ---------- TYPE SCALE — dense (crucix tokens.css:186-208) ----------
     Every step multiplies by --fs-scale (default 1) so a skin loosens the WHOLE type ramp with ONE
     knob (oldbooks sets it > 1 for its serif) without touching the fixed control/row-height grid below
     — scaling those would misalign the dense data tables. The px comments are at scale 1.
     --fs-floor (default 0 = off) is the SMALLEST step a skin allows: every step is max(floor, step), so a skin
     with a dense root (veritart: 13px, where --fs-micro is 8.8px) lifts its sub-floor steps with ONE knob, and a
     rule sized in em reads `max(var(--fs-floor), <n>em)` to honour it too. */
  --fs-scale: 1;
  --fs-floor: 0px;
  --fs-micro: calc(max(var(--fs-floor), 0.675rem * var(--fs-scale))); /* 10.8px — chip text, dense meta */
  --fs-xs: calc(max(var(--fs-floor), 0.75rem * var(--fs-scale))); /* 12px — meta, table cells */
  --fs-sm: calc(max(var(--fs-floor), 0.85rem * var(--fs-scale))); /* 13.6px — default UI text */
  --fs-base: calc(max(var(--fs-floor), 0.9rem * var(--fs-scale))); /* 14.4px — body copy */
  --fs-md: calc(max(var(--fs-floor), 0.975rem * var(--fs-scale))); /* 15.6px — lede, subhead */
  --fs-lg: calc(max(var(--fs-floor), 1.125rem * var(--fs-scale))); /* 18px — h3 */
  --fs-xl: calc(max(var(--fs-floor), 1.375rem * var(--fs-scale))); /* 22px — h2 */
  --fs-2xl: calc(max(var(--fs-floor), 1.75rem * var(--fs-scale))); /* 28px — h1 */
  --fs-3xl: calc(max(var(--fs-floor), 2.25rem * var(--fs-scale))); /* 36px — hero */
  --fs-4xl: calc(max(var(--fs-floor), 3rem * var(--fs-scale))); /* 48px — display */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.5;
  --lh-loose: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-mono: 0.02em;
  --tracking-caps: 0.12em;

  /* ---------- GLASS (backdrop-blur surfaces) (crucix tokens.css:142-152) ----------
     A dark-navy glass recipe by default — the ambient chrome identity (D2). Light skins neutralize
     these toward their own surface colour rather than leaving a navy tint behind cream/paper (P6). */
  --glass-subtle: oklch(14% 0.02 250 / 0.3);
  --glass-medium: oklch(14% 0.02 250 / 0.55);
  --glass-strong: oklch(14% 0.02 250 / 0.75);
  --glass-blur: 20px;
  --glass-blur-soft: 12px;
  --glass-blur-chip: 4px;

  /* ---------- SHADOW + GLOW (crucix tokens.css:154-160) ---------- */
  --glow-accent: 0 0 32px -8px oklch(85% 0.17 170 / 0.35);
  --glow-accent-sm: 0 0 16px -6px oklch(85% 0.17 170 / 0.25);
  --glow-cyan: 0 0 32px -8px oklch(78% 0.12 220 / 0.3);
  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-2: 0 4px 16px oklch(0% 0 0 / 0.5);
  --shadow-3: 0 12px 40px oklch(0% 0 0 / 0.6);

  /* ---------- EASINGS + DURATIONS (crucix tokens.css:210-234) ---------- */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* ---------- LAYOUT ---------- */
  --layout-max: 1440px;
  --layout-reading: 68ch;
  --sidebar-w: 220px;
  --header-h: 44px;

  /* ---------- CONTROL / ROW HEIGHTS — fixed grid for alignment ---------- */
  --h-ctrl-xs: 22px; /* chips, dense buttons */
  --h-ctrl-sm: 26px; /* default buttons, inputs */
  --h-ctrl-md: 30px; /* primary actions, bigger inputs */
  --h-ctrl-lg: 36px; /* rare — form submit row */
  --h-row-xs: 24px; /* ultra-dense log rows */
  --h-row-sm: 28px; /* default table row */
  --h-row-md: 32px; /* card list row */

  /* ---------- Z ---------- */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-modal: 40;
  --z-toast: 50;
  --z-tooltip: 60;

  /* ---------- PALETTE PRIMITIVE — a fixed hue more than one fact derives from ----------
     --violet-300 is the violet the prompt content type wears (--c-prompt below) AND what a skin uses as a plain
     violet tint (veritart's persona glitch/edge shadows) — one value, two meanings, so ONE primitive both alias. */
  --violet-300: oklch(78% 0.15 300);

  /* ---------- CONTENT-TYPE HUES (crucix tokens.css:50-57) ----------
     Each content type keeps its own hue everywhere, on every skin — a taxonomy colour, not a brand
     colour, so it is a primitive (fixed) rather than a slot role (overridden). */
  --c-article: oklch(85% 0.17 170); /* mint    — articles */
  --c-prompt: var(--violet-300); /* violet  — prompts */
  --c-tool: oklch(80% 0.14 220); /* cyan    — tools */
  --c-skill: oklch(80% 0.1 55); /* peach   — skills */
  --c-page: oklch(80% 0.13 25); /* rose    — static pages */
  --c-media: oklch(80% 0.14 330); /* magenta — media */
  --c-mcp: oklch(82% 0.18 145); /* lime    — mcp events */
  --c-api: oklch(80% 0.14 260); /* indigo  — api events */

  /* ============================================================
     SLOT-ROLE COLOUR CONTRACT
     Neutral dark fallbacks only — every skin (design/skins/*.css) OVERRIDES every one of these in its
     own :root{}, appended after this file (later wins the cascade at equal specificity). A value here
     should never be visible in a real render; it exists so components.css/the coverage guard have
     something defined even before a skin is selected.
     ============================================================ */
  --color-surface: oklch(20% 0 0);
  --color-surface-raised: oklch(26% 0 0);
  --color-ink: oklch(95% 0 0);
  --color-ink-muted: oklch(72% 0 0);
  --color-border: oklch(55% 0 0 / 0.16);
  --color-border-hover: oklch(65% 0 0 / 0.3);
  --color-accent: oklch(75% 0.08 240);
  --color-accent-ink: oklch(15% 0 0);
  --color-link: var(--color-accent);
  --color-danger: oklch(65% 0.2 25);
  --color-success: oklch(75% 0.15 155);
  --color-warning: oklch(78% 0.14 85);
  --color-info: oklch(75% 0.1 220);
  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;

  /* ---------- ADMIN ATMOSPHERE (per-skin) ----------
     The admin canvas + its ambient glow, expressed as slot-like knobs so `body.admin`
     (admin-chrome.ts) wears each site's OWN atmosphere instead of a hard-coded one. Neutral
     defaults here = a flat page on the surface colour with no glow (what oldbooks/seedy keep); a
     skin that has an ambient identity (veritart) overrides `--admin-ambient` and deepens
     `--admin-canvas` below its surfaces so the admin reads as part of that site, not a generic
     dashboard. Kept OUT of the `components.css` navy-literal firewall on purpose: the glow hues
     live in the skin, never the shared component library. */
  --admin-canvas: var(--color-surface);
  --admin-ambient: none;

  /* ============================================================
     TRIO-COMPAT ALIASES (crucix tokens.css:244-289)
     `--space-*`/`--text-*`/`--radius-sm/-md` map onto the primitives above so markup ported from the
     trio-compat vocabulary keeps working without a rewrite. Value-preserving (--space-4 = 1rem, same
     as --size-5).
     ============================================================ */
  --text-sm: var(--fs-sm);
  --text-base: var(--fs-base);
  --text-lg: var(--fs-lg);
  --text-xl: var(--fs-xl);
  --text-2xl: var(--fs-2xl);
  --leading-normal: var(--lh-body);
  --weight-normal: 400;
  --weight-bold: 700;

  --space-0: 0;
  --space-1: var(--size-1);
  --space-2: var(--size-3);
  --space-3: var(--size-4);
  --space-4: var(--size-5);
  --space-5: var(--size-6);
  --space-6: var(--size-7);
  --space-7: var(--size-8);
  --space-8: var(--size-9);

  --radius-sm: var(--radius-1);
  --radius-md: var(--radius-2);

  --measure: var(--layout-reading);
  --container: var(--layout-max);
}

@font-face {
  font-family: 'Be Vietnam Pro Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo'), local('Helvetica');
  size-adjust: 110.26%;
  ascent-override: 90.70%;
  descent-override: 24.03%;
  line-gap-override: 0%;
  unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro Fallback';
  font-style: normal;
  font-weight: 500;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo'), local('Helvetica');
  size-adjust: 111.54%;
  ascent-override: 89.65%;
  descent-override: 23.76%;
  line-gap-override: 0%;
  unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro Fallback';
  font-style: normal;
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Helvetica Bold');
  size-adjust: 104.31%;
  ascent-override: 95.87%;
  descent-override: 25.41%;
  line-gap-override: 0%;
  unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro Fallback';
  font-style: normal;
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Helvetica Bold');
  size-adjust: 105.58%;
  ascent-override: 94.71%;
  descent-override: 25.10%;
  line-gap-override: 0%;
  unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
/* ============================================================
   SKIN — veritart
   Dark-mint gallery, == crucix (the source the whole design core was extracted from — this file is
   expected to render byte/visually identical to authoring straight against crucix's own tokens.css,
   verified at the P7 public single-source migration). Full ambient identity; dense 13px scale.
   ============================================================ */
:root {
  --color-surface: oklch(16% 0.02 250);
  --color-surface-raised: oklch(20% 0.02 250);
  --color-ink: oklch(95% 0.02 170);
  --color-ink-muted: oklch(85% 0.02 170);
  --color-border: oklch(85% 0.17 170 / 0.12);
  --color-border-hover: oklch(85% 0.17 170 / 0.3);
  --color-accent: oklch(85% 0.17 170);
  --color-accent-ink: oklch(13% 0.02 250);
  --color-link: oklch(85% 0.17 170);
  --color-danger: oklch(70% 0.2 25);
  --color-success: oklch(82% 0.17 155);
  --color-warning: oklch(82% 0.14 85);
  --color-info: oklch(78% 0.12 220);

  /* P7 Phase A — the crucix-native colour vocabulary the veritart PUBLIC source uses, bridged onto the
     slot contract so the later-tokenized public layer resolves with no rewrite. Aliases where a slot
     already carries the EXACT crucix value; veritart-exact literals where none does (public-only, so
     they need not re-skin). --color-surface-1 is not here: crucix never defined it, and D84 aliases
     it in the public layer (sites/veritart.me/styles/20-surface-alias.css), the only CSS that uses it. */
  --color-base: var(--color-accent-ink); /* 13% 0.02 250 — deep navy page base */
  --color-elevated: var(--color-surface-raised); /* 20% 0.02 250 — cards/dropdowns */
  --color-text-1: var(--color-ink); /* 95% 0.02 170 — primary text */
  --color-text-2: var(--color-ink-muted); /* 85% 0.02 170 — secondary text */
  /* F3a / F3a1 — WCAG AA (4.5:1) on every veritart surface: the 13% base, 16% surface, 20% cards and the
     --tint-accent (/.08) over each, composited in sRGB. text-3 was 58% (4.29 on cards, 3.66 on tint/card) →
     64%: min 4.66 (tint/card). text-mute was 45% (2.44 on cards), then 60% (3.92 tint/card, 4.31
     tint/surface) → 64%, the lowest lightness that clears tint/card (min 4.59); its step from text-3 is
     hue + chroma (cool slate 260 vs mint 170, ΔE_ok 0.067 — wider than 60%'s 0.056), since AA leaves no
     darker room. It colours the form placeholders. */
  --color-text-3: oklch(64% 0.03 170); /* dim / meta — no slot equivalent */
  --color-text-mute: oklch(64% 0.06 260); /* disabled, placeholders */
  --color-accent-dim: oklch(75% 0.13 170);
  --color-accent2: var(--color-info); /* 78% 0.12 220 — cyan */
  --color-border-accent: oklch(85% 0.17 170 / 0.2);
  --color-border-strong: oklch(85% 0.17 170 / 0.45);
  --font-display: 'Be Vietnam Pro', 'Be Vietnam Pro Fallback', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', 'Be Vietnam Pro Fallback', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* F3a — no public text below 12px: the dense 13px root put --fs-micro..--fs-base at 8.8–11.7px. */
  --fs-floor: 12px;
  /* F3c (191be928:Q28 b) — the four small steps, re-spaced: the floor alone collapsed micro..base onto one 12px
     size (8.8 / 9.75 / 11.05 / 11.7px all clamped up). micro and xs sit ON the floor, sm and base step above it,
     so the ramp keeps three distinct sizes under --fs-md (12.675px). */
  --fs-micro: 12px;
  --fs-xs: 12px;
  --fs-sm: 12.5px;
  --fs-base: 13px;

  /* Admin ATMOSPHERE — the veritart signature. `body.admin` (admin-chrome.ts) reads these so the
     admin canvas is the SAME deep-navy base + top mint/cyan radial glows the PUBLIC `body` wears
     (verified against the live site: base oklch(13% .02 250) with a 1200×600 mint glow at 20%/-10%
     and a 900×500 cyan glow at 85%/-5%). This is the piece the token single-source (P7) could not
     carry — it lived only in the public layer — and its absence is why the admin read as a generic
     dark dashboard rather than veritart's own control room. Deepen the canvas to the 13% base so the
     16% surfaces and 20% cards sit ABOVE it, restoring the public depth hierarchy. */
  --admin-canvas: var(--color-base);
  --admin-ambient:
    radial-gradient(1200px 600px at 20% -10%, oklch(85% 0.17 170 / 0.05), transparent 60%),
    radial-gradient(900px 500px at 85% -5%, oklch(78% 0.12 220 / 0.04), transparent 60%);
  color-scheme: dark;
}

/* veritart public — @layer base: box-sizing reset, html/body, headings h1–h5, p, links, code, hr.
   Source order is cascade order: sites/veritart.me/styles/index.ts composes these files in sequence. */

@layer base {
  *,
  :before,
  :after {
    box-sizing: border-box;
  }
  /* F4 — form controls take the page's font (the UA gives them its own family and a 13.33px size); a component
     rule (.input-group input, .btn, .mochi-btn …) still sets its own, layered above base. */
  button,
  input,
  select,
  textarea {
    font: inherit;
  }
  html {
    background: var(--color-base);
    color: var(--color-text-1);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    color-scheme: dark;
  }
  body {
    background: var(--admin-ambient), var(--color-base);
    min-height: 100vh;
    margin: 0;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-1);
    margin: 0;
  }
  h1 {
    font-size: var(--fs-2xl);
  }
  h2 {
    font-size: var(--fs-xl);
  }
  h3 {
    font-size: var(--fs-lg);
  }
  h4 {
    font-size: var(--fs-md);
  }
  h5 {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-text-3);
    font-family: var(--font-mono);
    font-weight: 500;
  }
  p {
    color: var(--color-text-2);
    line-height: var(--lh-body);
    margin: 0;
  }
  a {
    color: var(--color-accent);
    text-underline-offset: 2px;
    transition: color var(--dur-fast) var(--ease-out);
    text-decoration: none;
  }
  a:hover {
    color: var(--color-accent-dim);
    text-decoration: underline;
  }
  code,
  pre,
  kbd,
  samp {
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-mono);
    font-size: max(var(--fs-floor), .92em);
  }
  hr {
    background: var(--color-border);
    height: 1px;
    margin: var(--size-5) 0;
    border: 0;
  }
  ::selection {
    color: var(--color-text-1);
    /* an accent tint, not a border — own value so retuning --color-border-hover cannot move it (F2 fix1) */
    background: color-mix(in oklch, var(--color-accent) 30%, transparent);
  }
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: 0 0;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-hover);
  }

}

/* veritart public — @layer layout: stack/row primitives, admin + public shells, workbench. */

@layer layout {
  .stack-2 {
    gap: var(--size-2);
    flex-direction: column;
    display: flex;
  }
  .row {
    gap: var(--size-3);
    align-items: center;
    display: flex;
  }
  .row-wrap {
    gap: var(--size-2);
    flex-wrap: wrap;
    align-items: center;
    display: flex;
  }
  .row-between {
    gap: var(--size-3);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }
  .public-header {
    z-index: var(--z-sticky);
    background: radial-gradient(ellipse 30% 200% at 0% 50%, color-mix(in oklch, var(--color-accent) 5%, transparent), transparent 55%), var(--glass-medium);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--color-border);
    height: var(--header-h);
    align-items: center;
    display: flex;
    position: sticky;
    top: 0;
  }
  .input-group--header {
    min-width: 240px;
  }
  /* the compact (`--compact`) header lives in 15-header-footer.css (F5a) */

}

/* veritart public — @layer components (1/4): brand, card, buttons, badges, status dots, labels,
   tables, description lists, nav. */

@layer components {
  .brand {
    align-items: center;
    gap: var(--size-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-lg);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-1);
    text-decoration: none;
    display: inline-flex;
  }
  .brand-logo {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    display: block;
  }
  .brand-word__art {
    color: var(--color-accent);
    position: relative;
  }
  .brand-word__art:after {
    content: "";
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent2), var(--c-prompt), var(--color-accent));
    opacity: .7;
    height: 2px;
    box-shadow: 0 0 6px color-mix(in oklab, var(--color-accent) 35%, transparent);
    transition: opacity var(--dur-base) var(--ease-out);
    background-size: 200% 100%;
    border-radius: 2px;
    position: absolute;
    bottom: -.16em;
    left: 0;
    right: 0;
  }
  .brand:hover .brand-word__art:after,
  .brand:focus-visible .brand-word__art:after {
    opacity: 1;
    box-shadow: 0 0 9px color-mix(in oklab, var(--color-accent2) 45%, transparent);
  }
  @media (prefers-reduced-motion:no-preference) {
    .brand:hover .brand-word__art:after,
    .brand:focus-visible .brand-word__art:after {
      animation: 6s linear infinite holo-edge-bg;
    }
  }
  .card-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--color-text-3);
    letter-spacing: var(--tracking-mono);
  }
  .btn,
  .comment-form__submit {
    justify-content: center;
    align-items: center;
    gap: var(--size-2);
    height: var(--h-ctrl-sm);
    padding: 0 var(--size-3);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-text-1);
    background: var(--color-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    white-space: nowrap;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }
  .btn:hover,
  .comment-form__submit:hover {
    border-color: var(--color-border-hover);
    color: var(--color-text-1);
    background: var(--color-raised-hover);
    text-decoration: none;
  }
  .btn:active,
  .comment-form__submit:active {
    transform: translateY(1px);
  }
  .btn svg {
    width: 13px;
    height: 13px;
  }
  .btn-primary,
  .comment-form__submit {
    border-color: var(--color-border-strong);
    color: var(--color-accent);
    background: linear-gradient(color-mix(in oklch, var(--color-accent) 22%, transparent),var(--hl-accent-subtle));
    box-shadow: inset 0 1px color-mix(in oklch, var(--color-sheen) 5%, transparent);
  }
  .btn-primary:hover,
  .comment-form__submit:hover {
    color: var(--color-text-1);
    background: linear-gradient(color-mix(in oklch, var(--color-accent) 32%, transparent),color-mix(in oklch, var(--color-accent) 15%, transparent));
  }
  /* F4 — one button system: .btn is THE public button (height, padding, look); a modifier states only what it
     changes. .btn-primary is the accent button (the /lucas/ hero CTA's old .btn--accent copy is gone). The engine's
     comment submit (.comment-form__submit, markup shared with seedy/oldbooks) is a .btn.btn-primary by selector, so
     this one rule set defines its look too (KI 4aac0bd). */
  .btn-sm {
    font-size: var(--fs-xs);
  }
  .badge {
    height: 16px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-2);
    background: var(--glass-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-0);
    white-space: nowrap;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    font-weight: 500;
    display: inline-flex;
  }
  .badge:before {
    content: "";
    opacity: .8;
    background: currentColor;
    border-radius: 999px;
    width: 4px;
    height: 4px;
  }
  .badge-accent {
    color: var(--color-accent);
    background: var(--tint-accent);
    border-color: color-mix(in oklch, var(--color-accent) 35%, transparent);
  }
  .label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-3);
    margin-bottom: var(--size-1);
    font-weight: 500;
    display: block;
  }
  .input-group {
    align-items: center;
    gap: var(--size-2);
    height: var(--h-ctrl-sm);
    padding: 0 var(--size-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    background: var(--color-sunken);
    display: flex;
  }
  .input-group:focus-within {
    border-color: var(--color-accent-dim);
  }
  .input-group svg {
    width: 12px;
    height: 12px;
    color: var(--color-text-3);
    flex: none;
  }
  .input-group input {
    color: var(--color-text-1);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    background: 0 0;
    border: 0;
    outline: none;
    flex: 1;
    min-width: 0;
    height: 100%;
  }
  .input-group .kbd {
    flex: none;
  }

}

/* veritart public — @layer components (2/4): metric tiles, toast, kbd, code block, avatar,
   section heads, type specimens, notifications. */

@layer components {
  .metric {
    padding: var(--size-3) var(--size-4);
    background: radial-gradient(ellipse 120% 80% at 0% 0%, color-mix(in oklch, var(--color-accent) 6%, transparent), transparent 55%), var(--glass-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
    gap: var(--size-1);
    transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
    flex-direction: column;
    display: flex;
    position: relative;
  }
  .metric:hover {
    border-color: var(--color-border-hover);
    background: radial-gradient(120% 80% at 0 0,color-mix(in oklch, var(--color-accent) 9%, transparent),transparent 55%),var(--glass-medium);
  }
  kbd,
  .kbd {
    height: 16px;
    line-height: 14px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--color-text-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
    background: var(--color-sunken);
    border-bottom-width: 2px;
    padding: 0 4px;
    display: inline-block;
  }
  pre.code-block {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
    padding: var(--size-3);
    font-family: var(--font-code);
    font-size: var(--fs-xs);
    color: var(--color-text-2);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-mono);
    background: var(--color-sunken);
    position: relative;
    overflow-x: auto;
  }
  .avatar {
    width: 22px;
    height: 22px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--color-accent);
    border: 1px solid var(--color-border-strong);
    letter-spacing: var(--tracking-mono);
    background: linear-gradient(135deg,color-mix(in oklch, var(--color-accent) 22%, transparent),color-mix(in oklch, var(--color-info) 15%, transparent));
    border-radius: 999px;
    flex: none;
    place-items: center;
    display: grid;
  }
  .avatar-lg {
    width: 36px;
    height: 36px;
    font-size: var(--fs-sm);
  }

}

/* veritart public — @layer components (3/4): the <mark> highlight (the .prose typography had no producer and was deleted, F12b). */

@layer components {
  mark {
    color: var(--color-text-1);
    border-bottom: var(--hl-accent-underline);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: 0 0;
    border-radius: 0;
    padding: 0 1px;
    text-decoration: none;
  }

}

/* veritart public — @layer components (4/4): do/dd panels, chart/ring detail, crumbs, status,
   workbench, and the late per-component variant/override rules (kept in their original order). */

@layer components {
  .btn-primary:hover,
  .comment-form__submit:hover {
    box-shadow: var(--glow-accent-sm);
  }
  .btn-primary:focus-visible,
  .comment-form__submit:focus-visible {
    box-shadow: 0 0 0 3px var(--color-border-accent), var(--glow-accent-sm);
  }

}

/* veritart public — @layer utility: caps, text colours, font sizes, glow. */

@layer utility {
  .caps {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-3);
  }
  .text-1 {
    color: var(--color-text-1);
  }
  .fs-micro {
    font-size: var(--fs-micro);
  }
  .fs-md {
    font-size: var(--fs-md);
  }

}

/* veritart public — @font-face: the self-hosted crucix families (served from /fonts).
   F8b (KI 2026-10-17 unused fonts): woff2 only — every browser that honours unicode-range reads woff2,
   so the .woff fallbacks were never fetched; JetBrains Mono keeps latin/latin-ext/vietnamese — no
   veritart content or capture carries a Cyrillic or Greek character (pinned by small-page-fixes.test.ts). */

@font-face {
  font-family: Be Vietnam Pro;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/be-vietnam-pro-vietnamese-400-normal-CRcqvyg1.woff2)format("woff2");
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: Be Vietnam Pro;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/be-vietnam-pro-latin-ext-400-normal-CiZNW1ec.woff2)format("woff2");
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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: Be Vietnam Pro;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/be-vietnam-pro-latin-400-normal-PpnXBOrz.woff2)format("woff2");
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Be Vietnam Pro;
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/be-vietnam-pro-vietnamese-500-normal-DREgrEoJ.woff2)format("woff2");
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: Be Vietnam Pro;
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/be-vietnam-pro-latin-ext-500-normal-h0Fp6aX0.woff2)format("woff2");
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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: Be Vietnam Pro;
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/be-vietnam-pro-latin-500-normal-B6LVzGNe.woff2)format("woff2");
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Be Vietnam Pro;
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/be-vietnam-pro-vietnamese-600-normal-nyU-ZL2p.woff2)format("woff2");
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: Be Vietnam Pro;
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/be-vietnam-pro-latin-ext-600-normal-BNd8euf0.woff2)format("woff2");
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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: Be Vietnam Pro;
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/be-vietnam-pro-latin-600-normal-BZDkUTrt.woff2)format("woff2");
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Be Vietnam Pro;
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/be-vietnam-pro-vietnamese-700-normal-Csr0PCuG.woff2)format("woff2");
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: Be Vietnam Pro;
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/be-vietnam-pro-latin-ext-700-normal-C8_gqRu2.woff2)format("woff2");
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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: Be Vietnam Pro;
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/be-vietnam-pro-latin-700-normal-DlW1Zbsh.woff2)format("woff2");
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,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-display: swap;
  font-weight: 400;
  src: url(/fonts/jetbrains-mono-vietnamese-400-normal-ByoDsISC.woff2)format("woff2");
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/jetbrains-mono-latin-ext-400-normal-Bc8Ftmh3.woff2)format("woff2");
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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-display: swap;
  font-weight: 400;
  src: url(/fonts/jetbrains-mono-latin-400-normal-V6pRDFza.woff2)format("woff2");
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,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-display: swap;
  font-weight: 500;
  src: url(/fonts/jetbrains-mono-vietnamese-500-normal-BvH7FW2L.woff2)format("woff2");
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/jetbrains-mono-latin-ext-500-normal-Cut-4mMH.woff2)format("woff2");
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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-display: swap;
  font-weight: 500;
  src: url(/fonts/jetbrains-mono-latin-500-normal-BWZEU5yA.woff2)format("woff2");
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,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-display: swap;
  font-weight: 600;
  src: url(/fonts/jetbrains-mono-vietnamese-600-normal-Dtizs43-.woff2)format("woff2");
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/jetbrains-mono-latin-ext-600-normal-BfB_LPfz.woff2)format("woff2");
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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-display: swap;
  font-weight: 600;
  src: url(/fonts/jetbrains-mono-latin-600-normal-C8RAYTDA.woff2)format("woff2");
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* veritart public — the veritart-public-only tokens (:root) and the [data-font] family switch. The shared
   design tokens come from the engine core (readDesignFoundation() + skin('veritart')), composed ahead of these files. */

:root {
  --color-accent-deep: oklch(55% .15 170);
  --pmap-hue-slate: oklch(66% .03 250);
  --pmap-hue-teal: oklch(70% .09 195);
  --pmap-hue-amber: oklch(74% .1 75);
  --pmap-hue-violet: oklch(66% .11 300);
  --pmap-hue-crimson: oklch(64% .12 20);
  --pmap-hue-blue: oklch(66% .11 255);
  --pmap-hue-orange: oklch(70% .12 50);
  --pmap-hue-green: oklch(70% .1 160);
  --pmap-hue-purple: oklch(64% .11 310);
  --pmap-hue-magenta: oklch(66% .12 350);
  --pmap-edge: oklch(45% .02 250);
  --pmap-edge-active: var(--color-accent);
  --color-scrim: oklch(0% 0 0/.66);
  --tint-accent: oklch(85% .17 170/.08);
  --tint-success: oklch(82% .17 155/.08);
  --tint-warning: oklch(82% .14 85/.08);
  --tint-danger: oklch(70% .2 25/.08);
  --tint-info: oklch(78% .12 220/.08);
  --tint-violet: oklch(78% .15 300/.08);
  --hl-accent-underline: 2px solid var(--color-accent);
  --hl-accent-subtle: oklch(85% .17 170/.1);
  /* F12d fix 2a (rule 7) — the colours the component files once wrote raw. A translucent shade of any of these
     (or of a skin token) is `color-mix(in oklch, var(--…) N%, transparent)`, which computes to the same
     oklch(L C H / N%); tests/colour-literals.test.ts keeps every other file literal-free. */
  --color-sunken: oklch(10% .02 250); /* inset wells: input groups, kbd, code blocks */
  --color-raised-hover: oklch(22% .02 250); /* .btn:hover */
  --color-deep: oklch(8% .02 250); /* the cover-image chip's glass (at 70%) */
  --color-sheen: oklch(100% 0 0); /* the primary button's inset top highlight (at 5%) */
  --color-scanline: oklch(90% .06 220); /* .bg-scanline's rule */
  --color-notice-ink: #9fb3b0; /* the <noscript> notice */
  --glitch-mint: oklch(88% .13 170); /* the home hero's holo-glitch shadow channels */
  --glitch-cyan: oklch(82% .11 220);
  --glitch-violet: oklch(80% .14 300);
  /* F3c (191be928:Q28 b) — THE reading-prose size, one token for article.long p AND li (KI 2642744: li inherited
     the 12px --fs-base while p read --fs-md). --fs-md (12.675px) on phones; --fs-lg (14.625px) from the
     prose-step width up (styles/index.ts PROSE_STEP_MEDIA), the measured smallest width at which every
     article p and li still sets >= 45 characters per line at 14.625px under the 50ch cap. */
  --fs-prose: var(--fs-md);
}

@media (width >= 426px) {
  :root {
    --fs-prose: var(--fs-lg);
  }
}

:root,
[data-font=crucix] {
  --font-code: "JetBrains Mono", ui-monospace, monospace;
}

[data-font=classic] {
  --font-display: "Lexend", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-code: "JetBrains Mono", ui-monospace, monospace;
}

/* veritart public — crucix page chrome: background layers (grid/radial/scanline), mark highlights, filter/kind/status
   chips, section/title/hero heads, group heads, card hover, play buttons, mt-* spacing, public nav links. */

.bg-grid,
.bg-radial,
.bg-scanline {
  pointer-events: none;
  z-index: 0;
  position: fixed;
  inset: 0;
}

.bg-grid {
  background-image: linear-gradient(color-mix(in oklch, var(--color-accent) 3.5%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklch, var(--color-accent) 3.5%, transparent) 1px,transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 30%,black 40%,transparent 100%);
  mask-image: radial-gradient(80% 60% at 50% 30%,black 40%,transparent 100%);
}

.bg-radial {
  background: radial-gradient(640px 420px at 13% -2%,color-mix(in oklch, var(--color-accent) 4%, transparent),transparent 60%),radial-gradient(520px 320px at 92% 4%,color-mix(in oklch, var(--color-info) 3.5%, transparent),transparent 60%),radial-gradient(460px 300px at 78% 0,color-mix(in oklch, var(--violet-300) 2.5%, transparent),transparent 64%);
}

.bg-scanline {
  background: repeating-linear-gradient(transparent 0 2px,color-mix(in oklch, var(--color-scanline) 2.8%, transparent) 2px 3px);
}

mark {
  color: var(--color-text-1);
  border-bottom: var(--hl-accent-underline);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: 0 0;
  border-radius: 0;
  padding: 0 1px;
}





.p-title {
  font-size: clamp(1.75rem, 3.2vw, var(--fs-3xl))!important;
  letter-spacing: var(--tracking-tight)!important;
  font-weight: 500!important;
  line-height: 1.05!important;
}



.filter-bar {
  padding: var(--size-3) 0!important;
  gap: var(--size-3)!important;
}





.avatar,
.avatar-lg,
.badge:before {
  border-radius: 999px!important;
}






.mt-6 {
  margin-top: var(--size-6);
}

.public-nav a {
  color: var(--color-text-3);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  text-decoration: none;
}

/* veritart public — article page layout: two-column grid, sticky aside, TOC items, meta rows, article.long typography,
   hero, share bar, reading progress, tags. */

.article-layout {
  gap: var(--size-7);
  padding: var(--size-7) 0;
  /* minmax(0, 1fr), not 1fr: a `1fr` track floors at its content's min-content width (a long chart label, the
     unsized cover), which grew the article column to 443px on a 360px phone. */
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  display: grid;
}

.article-layout>* {
  min-width: 0;
}

/* F5b — the compact article (THE compact breakpoint, `--compact` = styles/index.ts COMPACT_MEDIA): one column, the
   TOC + meta aside and the share rail hide, and the TOC shows as a native disclosure above the body instead
   (before F5b a reader below 1100 px had no TOC at all). Same chevron idiom as .comments__summary. */
.toc-details {
  display: none;
}

@media (width <= 1100px) {
  .article-layout {
    gap: var(--size-5);
    grid-template-columns: minmax(0, 1fr);
  }
  .aside-left,
  .aside-right {
    display: none;
  }
  .toc-details {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    border-block: 1px solid var(--color-border);
    margin-block: var(--size-5);
    display: block;
  }
}

.toc-details__summary {
  cursor: pointer;
  list-style: none;
  align-items: center;
  gap: var(--size-2);
  min-block-size: 44px;
  margin-bottom: 0;
  display: flex;
}

.toc-details__summary::-webkit-details-marker {
  display: none;
}

.toc-details__summary:before {
  content: "▸";
  color: var(--color-accent-dim);
  transition: transform .2s;
}

.toc-details[open] > .toc-details__summary:before {
  transform: rotate(90deg);
}

.toc-details__list {
  padding-bottom: var(--size-3);
}

/* inside `article.long`, so the prose link look (accent + dashed underline, below) is undone: the items read as
   the aside's do — the same .toc-item colours. */
.toc-details__list .toc-item {
  color: var(--color-text-3);
  border-bottom: 0;
  align-items: center;
  min-block-size: 44px;
  display: flex;
}

.toc-details__list .toc-item.active {
  color: var(--color-accent);
}

.toc-details__list .toc-item:hover {
  color: var(--color-text-1);
}

.aside-sticky {
  top: calc(var(--header-h) + var(--size-5));
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  position: sticky;
}

.toc-item {
  color: var(--color-text-3);
  letter-spacing: var(--tracking-mono);
  transition: color var(--dur-fast) var(--ease-out);
  padding: 4px 0;
  text-decoration: none;
  display: block;
}

.toc-item.active {
  color: var(--color-accent);
}

.toc-item:hover {
  color: var(--color-text-1);
}

.meta-row {
  padding: var(--size-3) 0;
  border-bottom: 1px dashed var(--color-border);
}

.meta-key {
  color: var(--color-text-3);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.meta-val {
  color: var(--color-text-1);
  margin-top: 2px;
}

article.long h1 {
  letter-spacing: -.02em;
  max-width: 20ch;
  font-size: clamp(2.2rem,4vw,3rem);
  font-weight: 500;
  line-height: 1.05;
}

article.long h1 em {
  color: var(--color-accent);
  font-style: normal;
}

article.long h2 {
  margin-top: var(--size-7);
  font-size: var(--fs-xl);
  font-weight: 600;
}

article.long h3 {
  margin-top: var(--size-6);
  font-size: var(--fs-lg);
}

article.long p {
  max-width: none;
  font-size: var(--fs-prose);
  line-height: var(--lh-body);
  color: var(--color-text-2);
  margin-top: var(--size-4);
}

/* Reading measure: prose children of the article body stop at 50ch (F3c, 191be928:Q27 b — was 68ch, which set
   89–102 characters per line at 768 px and up); figures, charts and tables (and a paragraph that only carries an
   image) keep the full column width. */
.article-layout article.long .article-body>:is(p, ul, ol, blockquote, h2, h3, pre):not(:has(>img)) {
  max-inline-size: 50ch;
}

.article-layout article.long img {
  max-width: 100%;
  height: auto;
}

.article-layout article.long svg {
  max-width: 100%;
}

article.long blockquote {
  max-width: none;
  margin: var(--size-6) 0;
  padding: var(--size-5) var(--size-5) var(--size-5) var(--size-7);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-1);
  background: var(--tint-accent);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-text-1);
  font-style: italic;
  position: relative;
  /* the render gate's prose-measure check skips a quote that declares itself a display quote (F3c): its size and
     family match the prose from the --fs-prose step up, so only this declaration can tell the two apart */
  --measure-role: display;
}

article.long blockquote:before {
  content: "“";
  left: var(--size-3);
  top: var(--size-1);
  color: var(--color-accent);
  opacity: .4;
  pointer-events: none;
  font-size: 2.4em;
  line-height: 1;
  position: absolute;
}

article.long blockquote p {
  font-size: inherit;
  color: inherit;
  max-width: none;
  margin: 0;
}

article.long ul,
article.long ol {
  max-width: none;
  color: var(--color-text-2);
  padding-left: var(--size-5);
  margin-top: var(--size-4);
}

article.long li {
  margin-top: var(--size-2);
  font-size: var(--fs-prose);
}

article.long li::marker {
  color: var(--color-accent);
}

article.long strong {
  color: var(--color-text-1);
  font-weight: 700;
}

article.long em {
  color: var(--color-text-1);
  font-style: italic;
}

article.long strong em,
article.long em strong {
  color: var(--color-text-1);
  font-style: italic;
  font-weight: 700;
}

article.long a {
  color: var(--color-accent);
  border-bottom: 1px dashed var(--color-border-strong);
  text-decoration: none;
}

article.long a:hover {
  color: var(--color-accent2);
  border-bottom-color: var(--color-accent2);
}

article.long code {
  font-family: var(--font-mono);
  color: var(--color-accent);
  background: var(--tint-accent);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 0 4px;
  font-size: max(var(--fs-floor), .9em);
}

article.long pre {
  max-width: none;
  margin-top: var(--size-5);
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  padding: var(--size-4);
  font-family: var(--font-code);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  overflow-x: auto;
}

article.long pre code {
  color: var(--color-text-2);
  background: 0 0;
  border: 0;
  padding: 0;
}

article.long hr {
  border: 0;
  border-top: 1px dashed var(--color-border);
  margin: var(--size-6) 0;
}

article.long .lede {
  font-size: var(--fs-lg);
  color: var(--color-text-1);
  max-width: none;
  margin-top: var(--size-6);
  line-height: 1.55;
}

.article-body {
  counter-reset: sec;
}

.article-body h2 {
  counter-increment: sec;
}

.article-body h2:before {
  content: counter(sec, decimal-leading-zero) " · ";
  font-family: var(--font-mono);
  color: var(--color-accent);
  letter-spacing: var(--tracking-mono);
  font-weight: 500;
}

.article-body h2 .heading-permalink {
  display: none;
}

.hero-frame {
  margin-top: var(--size-6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-1);
  position: relative;
  overflow: hidden;
}

.hero-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-frame .caption {
  bottom: var(--size-3);
  left: var(--size-4);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-1);
  padding: 2px var(--size-2);
  border-radius: var(--radius-1);
  -webkit-backdrop-filter: blur(var(--glass-blur-chip));
  backdrop-filter: blur(var(--glass-blur-chip));
  background: color-mix(in oklch, var(--color-deep) 70%, transparent);
  position: absolute;
}

.share-col {
  gap: var(--size-2);
  flex-direction: column;
  display: flex;
}

.share-btn {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  width: 40px;
  height: 40px;
  color: var(--color-text-3);
  background: var(--glass-subtle);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  place-items: center;
  display: grid;
}

.share-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-border-hover);
}

.share-btn.copied {
  color: var(--color-success);
  border-color: var(--color-border-hover);
}

.reading-progress {
  height: 2px;
  z-index: var(--z-sticky);
  pointer-events: none;
  background: 0 0;
  position: fixed;
  inset: 0 0 auto;
}

.reading-progress__bar {
  background: var(--color-accent);
  transform-origin: 0;
  height: 100%;
  transform: scaleX(0);
  box-shadow: var(--glow-accent-sm);
  display: block;
}

.article-nav {
  gap: var(--size-4);
  margin-top: var(--size-7);
  padding-top: var(--size-6);
  border-top: 1px dashed var(--color-border);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.article-nav__link {
  gap: var(--size-2);
  padding: var(--size-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background: var(--glass-subtle);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  flex-direction: column;
  text-decoration: none;
  display: flex;
}

.article-nav__link--next {
  text-align: right;
  align-items: flex-end;
}

.article-nav__link:hover {
  border-color: var(--color-border-hover);
  background: var(--glass-strong);
}

.article-nav__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.article-nav__dir {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
}

.article-nav__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--color-text-1);
  letter-spacing: -.01em;
  line-height: 1.2;
}

.article-nav__link:hover .article-nav__title {
  color: var(--color-accent);
}

@media (width<=640px) {
  .article-nav {
    grid-template-columns: 1fr;
  }
  .article-nav__link--next {
    text-align: left;
    align-items: flex-start;
  }

}







.article-body>p:first-of-type:first-letter {
  float: left;
  font-family: var(--font-display);
  color: var(--color-accent);
  margin: .05em .12em 0 0;
  font-size: 3.1em;
  font-weight: 600;
  line-height: .66;
}

.article-body>p:first-of-type {
  color: var(--color-text-1);
  /* contain the drop cap's float: at the --fs-prose step a one-line opening paragraph is shorter than the 3.1em cap,
     which otherwise spills into paragraph 2 and indents its first line (Q-F3c-2 (a)) */
  display: flow-root;
}

/* No justified body text: every paragraph and list item of the article body starts aligned. */
.article-layout article.long .article-body :is(p, li) {
  text-align: start;
}

.article-body p {
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: break-word;
}

article.long blockquote {
  position: relative;
}

article.long blockquote:before {
  content: "“";
  z-index: 0;
  font-family: var(--font-display);
  color: var(--color-accent);
  opacity: .22;
  pointer-events: none;
  font-size: 3.4em;
  line-height: 1;
  position: absolute;
  top: -.3em;
  left: .12em;
}

article.long blockquote p {
  z-index: 1;
  position: relative;
}

article.long :not(pre)>code {
  white-space: nowrap;
  font-weight: 500;
}

/* veritart public — article body components: code blocks, figures/embeds and the article-* widgets with their
   responsive and keyframe rules. */

.code-block {
  position: relative;
}

.code-copy {
  top: var(--size-2);
  right: var(--size-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-3);
  background: var(--glass-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  padding: 2px var(--size-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  position: absolute;
}

.code-block:hover .code-copy,
.code-copy:focus-visible {
  opacity: 1;
}

.code-copy:hover {
  color: var(--color-accent);
  border-color: var(--color-border-hover);
}

.code-copy.copied {
  color: var(--color-success);
  opacity: 1;
}

.article-body table {
  width: 100%;
  max-width: none;
  margin-top: var(--size-5);
  border-collapse: collapse;
  font-size: var(--fs-sm);
  display: block;
  overflow-x: auto;
}

.article-body th,
.article-body td {
  padding: var(--size-2) var(--size-3);
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.article-body th {
  font-family: var(--font-mono);
  /* F8b: a SHIPPED JetBrains Mono weight — the UA's th bold (700) is not shipped, so it was synthesized. */
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-2);
  background: var(--glass-subtle);
}

.article-body td {
  color: var(--color-text-2);
}

.article-body tbody tr:nth-child(2n) {
  background: var(--glass-subtle);
}

.article-body ul:has(>li input[type=checkbox]) {
  padding-left: var(--size-2);
  list-style: none;
}

.article-body li input[type=checkbox] {
  margin-right: var(--size-2);
  accent-color: var(--color-accent);
}

.article-body del {
  color: var(--color-text-3);
}

.article-body p>img,
.article-body figure img {
  max-width: 100%;
  height: auto;
  margin: var(--size-5) auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  display: block;
}

.article-body figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-3);
  letter-spacing: var(--tracking-mono);
  margin-top: var(--size-2);
  text-align: center;
}

.article-body figure {
  margin: var(--size-5) auto;
}

.article-body figure img {
  margin: 0 auto;
}

article.long hr {
  height: auto;
  margin: var(--size-7) 0;
  text-align: center;
  border: 0;
  line-height: 1;
}

article.long hr:before {
  content: "✦";
  color: var(--color-accent);
  font-size: var(--fs-md);
  opacity: .7;
}

article.long h3 {
  color: var(--color-text-1);
  letter-spacing: -.01em;
}

article.long h4 {
  margin-top: var(--size-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
}

.article-body p.has-runin>strong:first-child {
  color: var(--color-accent);
}

.article-body mark.hl-quote {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-1);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  margin: 0 .02em;
  padding: .06em .22em;
  font-weight: 500;
}

.article-body blockquote:last-of-type {
  text-align: center;
  margin-block: var(--size-8);
  padding: var(--size-5) 0;
  font-style: normal;
  font-size: var(--fs-xl);
  color: var(--color-accent);
  background: 0 0;
  border-left: 0;
}

.article-body blockquote:last-of-type:before {
  display: none;
}

.article-body blockquote:last-of-type p {
  font-size: inherit;
  color: inherit;
}

.article-body>p:last-child:has(>em:only-child) {
  color: var(--color-text-3);
  margin-top: var(--size-6);
}

.article-body>p:last-child:has(>em:only-child) em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-mono);
}

.article-body p.tell-title {
  margin-top: var(--size-7);
  margin-bottom: var(--size-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: -.01em;
  text-indent: 0;
  -webkit-hyphens: none;
  hyphens: none;
  line-height: 1.2;
}

.article-body p.tell-title>strong {
  color: var(--color-text-1);
  font-weight: 600;
}

.article-body p.tell-title:before {
  content: "▸";
  color: var(--color-accent);
  margin-right: var(--size-2);
  vertical-align: .08em;
  font-size: max(var(--fs-floor), .78em);
}

.article-body blockquote.specimen {
  max-width: none;
  margin: var(--size-3) 0 var(--size-5);
  padding: var(--size-4) var(--size-5);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-1);
  background: var(--tint-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-style: normal;
  line-height: var(--lh-snug);
  color: var(--color-text-2);
  text-align: left;
  position: relative;
  --measure-role: display; /* a display quote: the render gate's prose-measure check skips it (F3c) */
}

.article-body blockquote.specimen:before {
  content: "AI SPECIMEN";
  margin: 0 0 var(--size-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent-dim);
  opacity: 1;
  font-weight: 600;
  line-height: 1;
  display: block;
  position: static;
  inset: auto;
}

.article-body blockquote.specimen p {
  max-width: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-hyphens: none;
  hyphens: none;
  margin: 0;
  font-style: normal;
}

@media (prefers-reduced-motion:reduce) {
  * {
    transition: none!important;
    animation: none!important;
  }

}

.article-body .article-chart {
  margin: var(--size-6) 0;
  background: radial-gradient(120% 80% at 0% 0%, var(--tint-accent), transparent 60%), var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  padding: clamp(.9rem,3vw,1.4rem);
}

.article-body .article-chart__head {
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .7rem;
  display: flex;
}

.article-body .article-chart__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: -.01em;
  color: var(--color-text-1);
  margin: 0;
  font-weight: 600;
}

.article-body .article-chart__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-3);
  margin: 0;
}

.article-body .article-chart__legend {
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin: .65rem 0 .2rem;
  display: flex;
}

.article-body .article-chart__key {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-3);
  align-items: center;
  gap: .45rem;
  display: inline-flex;
}

.article-body .article-chart__key:before {
  content: "";
  border-radius: 1px;
  width: .85rem;
  height: .2rem;
}

.article-body .article-chart__key--rise:before {
  background: var(--color-accent);
}

.article-body .article-chart__key--fall:before {
  background: var(--color-danger);
}

.article-body .article-chart__plot {
  aspect-ratio: 96/43;
  width: 100%;
  margin-top: .5rem;
  position: relative;
}

@media (width<=560px) {
  .article-body .article-chart__plot {
    aspect-ratio: 7/5;
  }

}

.article-body .article-chart__svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}



.article-body .article-chart__grid {
  stroke: var(--color-border);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.article-body .article-chart__axis {
  stroke: color-mix(in oklch, var(--color-text-3) 55%, transparent);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.article-body .article-chart__line {
  fill: none;
  stroke-width: 2.25px;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}

.article-body .article-chart__line--rise {
  stroke: var(--color-accent);
}

.article-body .article-chart__line--fall {
  stroke: var(--color-danger);
  filter: drop-shadow(0 0 5px color-mix(in oklch, var(--color-danger) 45%, transparent));
}

.article-body .article-chart__fill-top {
  stop-color: var(--color-accent);
  stop-opacity: .2;
}

.article-body .article-chart__fill-bot {
  stop-color: var(--color-accent);
  stop-opacity: 0;
}

.article-body .article-chart__marker {
  stroke: color-mix(in oklch, var(--color-danger) 60%, transparent);
  stroke-width: 1.5px;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}












.article-body .article-chart__caption {
  margin-top: var(--size-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-align: left;
  color: var(--color-text-2);
  font-style: normal;
  line-height: 1.6;
}

.article-body .article-chart__source {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-3);
  margin-top: .4rem;
  display: block;
}

.article-body .article-chart__data {
  margin-top: var(--size-4);
  border-top: 1px solid var(--color-border);
  padding-top: var(--size-3);
}

.article-body .article-chart__data summary {
  cursor: pointer;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--color-accent-dim);
  align-items: center;
  gap: .5rem;
  list-style: none;
  display: flex;
}

.article-body .article-chart__data summary::-webkit-details-marker {
  display: none;
}

.article-body .article-chart__data summary:before {
  content: "▸";
  transition: transform .2s;
}

.article-body .article-chart__data[open] summary:before {
  transform: rotate(90deg);
}

.article-body .article-chart__data summary:hover {
  color: var(--color-accent);
}

.article-body .article-chart__data summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}

.article-body .article-chart__table-scroll {
  margin-top: var(--size-3);
  overflow-x: auto;
}

.article-body .article-chart__data table {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border-collapse: collapse;
}

.article-body .article-chart__data th,
.article-body .article-chart__data td {
  text-align: right;
  white-space: nowrap;
  padding: .3rem .6rem;
}

.article-body .article-chart__data th[scope=row] {
  text-align: left;
  color: var(--color-text-3);
}

.article-body .article-chart__data thead th {
  color: var(--color-text-2);
}

@media (prefers-reduced-motion:no-preference) {
  .article-body .article-chart__line--rise {
    animation: 1.15s cubic-bezier(.22,1,.36,1) both ac-draw;
  }
  .article-body .article-chart__line--fall {
    animation: .6s cubic-bezier(.33,1,.68,1) 1s both ac-draw;
  }
  .article-body .article-chart__area {
    opacity: 0;
    animation: .9s .45s forwards ac-fade;
  }
  .article-body .article-chart__marker {
    opacity: 0;
    animation: .5s 1.4s forwards ac-fade;
  }

}

@keyframes ac-draw {
  0% {
    stroke-dashoffset: 100px;
  }
  to {
    stroke-dashoffset: 0;
  }

}

@keyframes ac-fade {
  to {
    opacity: 1;
  }

}

.article-body .cite-ref {
  vertical-align: baseline;
  font-size: 100%;
  line-height: inherit;
}

.article-body .cite-ref a {
  font-family: var(--font-mono);
  vertical-align: super;
  color: var(--color-accent);
  letter-spacing: var(--tracking-mono);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  border-bottom: 0;
  border-radius: 3px;
  padding: 0 .12em;
  font-size: max(var(--fs-floor), .68em);
  font-weight: 600;
  line-height: 0;
}

.article-body .cite-ref a:before {
  content: "[";
  opacity: .5;
}

.article-body .cite-ref a:after {
  content: "]";
  opacity: .5;
}

.article-body .cite-ref a:hover {
  color: var(--color-accent2);
  background: var(--tint-accent);
}

.article-body .cite-ref a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.article-body h2.cite-heading:before {
  content: none;
}

.article-body h2.cite-heading {
  margin-top: var(--size-8);
  padding-top: var(--size-5);
  border-top: 1px solid var(--color-border);
  align-items: baseline;
  gap: var(--size-2) var(--size-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-2);
  flex-wrap: wrap;
  font-weight: 600;
  display: flex;
}

.article-body h2.cite-heading .cite-count {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: none;
  color: var(--color-text-3);
  font-weight: 500;
}

.article-body h2.cite-heading .cite-count:before {
  content: "· ";
  color: var(--color-accent);
}

/* TOC / deep-link targets: the TOC scrolls the h2 that owns each (hidden) permalink anchor; the margin keeps the
   heading clear of the sticky header. */
.article-body h2 {
  scroll-margin-top: calc(var(--header-h) + var(--size-5));
}

.article-body ol.ref-list {
  /* citation metadata, not reading prose: the render gate's prose-measure check skips every role but prose (Q-F3c-1) */
  --measure-role: metadata;
  counter-reset: refn;
  margin-top: var(--size-4);
  font-size: var(--fs-sm);
  padding-left: 0;
  list-style: none;
}

.article-body ol.ref-list li {
  counter-increment: refn;
  padding: var(--size-3) var(--size-2) var(--size-3) 3rem;
  /* a reference entry keeps the list's own --fs-sm, not the reading-prose --fs-prose of article.long li (F3c) */
  font-size: inherit;
  border-bottom: 1px dashed var(--color-border);
  line-height: var(--lh-snug);
  color: var(--color-text-2);
  scroll-margin-top: calc(var(--header-h) + var(--size-5));
  /* a reference entry's bare URL is one unbreakable word (438px at 360) — let it wrap */
  overflow-wrap: anywhere;
  transition: background var(--dur-fast) var(--ease-out);
  margin: 0;
  position: relative;
}

.article-body ol.ref-list li:before {
  content: "[" counter(refn) "]";
  left: 0;
  top: var(--size-3);
  text-align: right;
  width: 2.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-accent);
  letter-spacing: var(--tracking-mono);
  font-weight: 600;
  position: absolute;
}

.article-body ol.ref-list li:hover {
  background: var(--glass-subtle);
}

.article-body ol.ref-list li em {
  color: var(--color-text-1);
  font-style: italic;
}

.article-body ol.ref-list li a {
  color: var(--color-accent);
  border-bottom: 1px dashed var(--color-border-strong);
  word-break: break-word;
}

.article-body ol.ref-list li a:hover {
  color: var(--color-accent2);
  border-bottom-color: var(--color-accent2);
}

.article-body ol.ref-list li .ref-back {
  color: var(--color-text-3);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  border-bottom: 0;
  margin-left: .35em;
}

.article-body ol.ref-list li:hover .ref-back,
.article-body ol.ref-list li:focus-within .ref-back,
.article-body ol.ref-list li:target .ref-back {
  opacity: 1;
}

.article-body ol.ref-list li .ref-back:hover {
  color: var(--color-accent);
}

.article-body ol.ref-list li:target {
  background: var(--tint-accent);
  outline: 1px solid var(--color-border-accent);
  outline-offset: -1px;
  border-radius: var(--radius-1);
}

@media (prefers-reduced-motion:no-preference) {
  .article-body ol.ref-list li:target {
    animation: ref-flash 1.5s var(--ease-out);
  }

}

@keyframes ref-flash {
  0% {
    background: color-mix(in oklch, var(--color-accent) 32%, transparent);
  }
  to {
    background: var(--tint-accent);
  }

}

/* C7-BYLINE (79092af3:Q7 a) — the article byline links the persona page /mochi/ (rel="author"). It keeps the
   byline's own colour and reads as a link on hover; on a phone the end-of-article byline is a 44px-tall tap target. */
.byline-link {
  color: inherit;
  text-decoration: none;
}

.byline-link:hover,
.byline-link:focus-visible {
  text-decoration: underline;
}

@media (width<=560px) {
  .byline-link {
    min-height: 44px;
    align-items: center;
    display: inline-flex;
  }
}

/* veritart public — article citations (.cite) and the remaining article-* components, responsive rules and keyframes. */

.cite-pop {
  z-index: var(--z-tooltip);
  gap: 0 var(--size-3);
  max-width: min(360px,92vw);
  padding: var(--size-3) var(--size-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-2);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  pointer-events: none;
  grid-template-columns: auto 1fr;
  display: grid;
  position: fixed;
  transform: translateY(4px);
}

.cite-pop.is-visible {
  opacity: 1;
  transform: none;
}

.cite-pop__n {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-micro);
  color: var(--color-accent);
  letter-spacing: var(--tracking-mono);
}

.cite-pop__t em {
  color: var(--color-text-1);
  font-style: italic;
}

.cite-pop__t a {
  color: var(--color-accent);
  word-break: break-word;
}

@media (prefers-reduced-motion:no-preference) {
  html {
    scroll-behavior: smooth;
  }

}

.article-body .article-chart--bars .article-chart__bars {
  gap: var(--size-3);
  margin-top: var(--size-4);
  flex-direction: column;
  display: flex;
}

.article-body .acb-row {
  align-items: center;
  gap: var(--size-2) var(--size-3);
  grid-template-columns: minmax(8rem,36%) 1fr auto;
  display: grid;
}

.article-body .acb-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  line-height: var(--lh-snug);
  color: var(--color-text-2);
}

.article-body .acb-track {
  background: var(--glass-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  height: .7rem;
  position: relative;
  overflow: hidden;
}





.article-body .acb-val {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-align: right;
  white-space: nowrap;
  min-width: 3.5ch;
  color: var(--color-text-1);
  font-weight: 600;
}

.article-body .acb-val--danger {
  color: var(--color-danger);
}

.article-body .acb-val--accent {
  color: var(--color-accent);
}

.article-body .acb-val--muted {
  color: var(--color-text-3);
}

@media (width<=560px) {
  .article-body .acb-row {
    row-gap: var(--size-1);
    grid-template-columns: 1fr auto;
  }
  .article-body .acb-label {
    grid-column: 1/-1;
  }

}


.article-body .article-chart__line--decline {
  stroke: var(--color-danger);
  filter: drop-shadow(0 0 5px color-mix(in oklch, var(--color-danger) 40%, transparent));
}

.article-body .article-chart__fill-decline-top {
  stop-color: var(--color-danger);
  stop-opacity: .18;
}

.article-body .article-chart__fill-decline-bot {
  stop-color: var(--color-danger);
  stop-opacity: 0;
}

.article-body .article-chart__refline {
  stroke: color-mix(in oklch, var(--color-text-3) 50%, transparent);
  stroke-width: 1px;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}










@media (prefers-reduced-motion:no-preference) {
  .article-body .article-chart__line--decline {
    animation: 1.1s cubic-bezier(.22,1,.36,1) both ac-draw;
  }
  .article-body .article-chart__area--decline {
    opacity: 0;
    animation: .9s .5s forwards ac-fade;
  }

}

.article-body .article-chart__plot--dist {
  aspect-ratio: 96/40;
}

@media (width<=560px) {
  .article-body .article-chart__plot--dist {
    aspect-ratio: 5/4;
  }

}

.article-body .acd-curve {
  fill: none;
  stroke-width: 2.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.article-body .acd-curve--human {
  stroke: var(--color-accent);
}

.article-body .acd-curve--machine {
  stroke: var(--color-danger);
}

.article-body .acd-fill--human {
  fill: color-mix(in oklch, var(--color-accent) 13%, transparent);
}

.article-body .acd-fill--machine {
  fill: color-mix(in oklch, var(--color-danger) 12%, transparent);
}

.article-body .acd-overlap {
  fill: color-mix(in oklch, color-mix(in oklch, var(--color-danger), var(--color-accent)) 30%, transparent);
}






@media (prefers-reduced-motion:no-preference) {
  .article-body .acd-curve {
    animation: 1.2s cubic-bezier(.22,1,.36,1) both ac-draw;
  }
  .article-body .acd-curve--machine {
    animation-delay: .15s;
  }
  .article-body .acd-fill,
  .article-body .acd-overlap {
    opacity: 0;
    animation: .9s .6s forwards ac-fade;
  }

}

.article-body .article-chart--matrix .acm-grid {
  margin-top: var(--size-4);
  border-top: 1px solid var(--color-border);
  grid-template-columns: minmax(6.5rem,.8fr) 1fr 1fr;
  display: grid;
}

.article-body .acm-head {
  padding: var(--size-3) var(--size-3) var(--size-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-3);
  border-bottom: 1px solid var(--color-border);
}

.article-body .acm-label,
.article-body .acm-then,
.article-body .acm-now {
  padding: var(--size-4) var(--size-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  line-height: 1.5;
}

.article-body .acm-label {
  flex-direction: column;
  gap: .15rem;
  display: flex;
}

.article-body .acm-label-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: -.01em;
  color: var(--color-accent);
}

.article-body .acm-gloss {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-3);
}

.article-body .acm-then {
  color: var(--color-text-3);
}

.article-body .acm-now {
  color: var(--color-text-1);
  box-shadow: inset 1px 0 0 color-mix(in oklch, var(--color-accent) 35%, transparent);
}

@media (width<=620px) {
  .article-body .article-chart--matrix .acm-grid {
    border-top: 0;
    grid-template-columns: 1fr;
  }
  .article-body .acm-head {
    display: none;
  }
  .article-body .acm-label {
    padding: var(--size-5) var(--size-3) var(--size-2);
    border-bottom: 0;
  }
  .article-body .acm-then,
  .article-body .acm-now {
    padding: var(--size-1) var(--size-3) var(--size-2);
    box-shadow: none;
  }
  .article-body .acm-now {
    border-bottom: 1px solid var(--color-border);
  }
  .article-body .acm-then:before,
  .article-body .acm-now:before {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin-right: .4rem;
    display: inline;
  }
  .article-body .acm-then:before {
    content: "Then";
    color: var(--color-text-3);
  }
  .article-body .acm-now:before {
    content: "Now";
    color: var(--color-accent);
  }

}

.article-body .article-chart__plot--collapse {
  aspect-ratio: 96/43;
}

@media (width<=560px) {
  .article-body .article-chart__plot--collapse {
    aspect-ratio: 5/4;
  }

}

.article-body .acc-curve {
  fill: none;
  stroke-width: 2.25px;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 100;
  vector-effect: non-scaling-stroke;
}

.article-body .acc-curve--0 {
  stroke: color-mix(in oklch, var(--color-danger) 30%, transparent);
}

.article-body .acc-curve--1 {
  stroke: color-mix(in oklch, var(--color-danger) 52%, transparent);
}

.article-body .acc-curve--2 {
  stroke: color-mix(in oklch, var(--color-danger) 74%, transparent);
}

.article-body .acc-curve--3 {
  stroke: var(--color-danger);
  filter: drop-shadow(0 0 5px color-mix(in oklch, var(--color-danger) 45%, transparent));
}

.article-body .acc-fill--0 {
  fill: color-mix(in oklch, var(--color-danger) 5%, transparent);
}

.article-body .acc-fill--1 {
  fill: color-mix(in oklch, var(--color-danger) 7%, transparent);
}

.article-body .acc-fill--2 {
  fill: color-mix(in oklch, var(--color-danger) 9%, transparent);
}

.article-body .acc-fill--3 {
  fill: color-mix(in oklch, var(--color-danger) 12%, transparent);
}






@media (prefers-reduced-motion:no-preference) {
  .article-body .acc-curve {
    animation: 1.15s cubic-bezier(.22,1,.36,1) both ac-draw;
  }
  .article-body .acc-curve--1 {
    animation-delay: .12s;
  }
  .article-body .acc-curve--2 {
    animation-delay: .24s;
  }
  .article-body .acc-curve--3 {
    animation-delay: .36s;
  }
  .article-body .acc-fill {
    opacity: 0;
    animation: .9s .5s forwards ac-fade;
  }

}

.article-body .article-chart--donut .acp-wrap {
  align-items: center;
  gap: var(--size-5) var(--size-6);
  margin-top: var(--size-4);
  flex-wrap: wrap;
  display: flex;
}

.article-body .acp-plot {
  aspect-ratio: 1;
  flex: none;
  width: clamp(9rem,38%,11.5rem);
  position: relative;
}

.article-body .acp-svg {
  width: 100%;
  height: 100%;
}

.article-body .acp-track {
  stroke: var(--glass-subtle);
}

.article-body .acp-seg {
  stroke-linecap: butt;
}

.article-body .acp-seg--danger {
  stroke: var(--color-danger);
}

.article-body .acp-seg--accent {
  stroke: var(--color-accent);
}

.article-body .acp-seg--muted {
  stroke: color-mix(in oklch, var(--color-text-3) 50%, transparent);
}

.article-body .acp-center {
  text-align: center;
  pointer-events: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.article-body .acp-center-num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-text-1);
}

.article-body .acp-center-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-3);
  max-width: 6.5rem;
  line-height: var(--lh-snug);
  margin-top: .3rem;
}

.article-body .acp-legend {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-body .article-chart--donut .acp-legend {
  align-items: baseline;
  column-gap: var(--size-5);
  row-gap: var(--size-3);
  grid-template-columns: max-content max-content;
  display: grid;
}

.article-body .acp-key {
  display: contents;
}

.article-body .acp-key-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  line-height: var(--lh-snug);
  color: var(--color-text-2);
  align-items: baseline;
  gap: .5rem;
  display: inline-flex;
}

.article-body .acp-key-label:before {
  content: "";
  border-radius: var(--radius-1);
  flex: none;
  width: .6rem;
  height: .6rem;
  transform: translateY(.05rem);
}

.article-body .acp-key--danger .acp-key-label:before {
  background: var(--color-danger);
}

.article-body .acp-key--accent .acp-key-label:before {
  background: var(--color-accent);
}

.article-body .acp-key--muted .acp-key-label:before {
  background: color-mix(in oklch, var(--color-text-3) 50%, transparent);
}

.article-body .acp-key-val {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-1);
  white-space: nowrap;
  justify-self: end;
  font-weight: 600;
}

@keyframes acp-pop {
  0% {
    opacity: 0;
    transform: scale(.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }

}

@media (prefers-reduced-motion:no-preference) {
  .article-body .article-chart--donut .acp-plot {
    animation: .7s cubic-bezier(.22,1,.36,1) both acp-pop;
  }

}

/* veritart public — skip link, public header items, footer. */

.skip-link {
  left: var(--size-3);
  top: var(--size-3);
  z-index: var(--z-toast);
  transition: transform var(--dur-fast) var(--ease-out);
  padding: var(--size-2) var(--size-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text-1);
  background: var(--color-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  position: absolute;
  transform: translateY(-200%);
}

.skip-link:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  transform: translateY(0);
}

.item:focus-visible,
.feature:focus-visible,
.post:focus-visible,
.pillar:focus-visible,
.brand:focus-visible,
.public-nav a:focus-visible,
.filter-bar .badge:focus-visible,
.section-head .right a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-2);
}

.public-shell {
  padding-inline: var(--size-5);
  z-index: 1;
  position: relative;
}

.public-nav {
  gap: var(--size-5);
  align-items: center;
  display: flex;
}

.public-nav a {
  min-height: var(--tap-min);
  color: var(--color-text-3);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  align-items: center;
  text-decoration: none;
  display: inline-flex;
}

.public-nav a:hover {
  color: var(--color-accent);
}

.public-nav a.active {
  color: var(--color-text-1);
}

/* F5a — the compact header (THE compact breakpoint `--compact`, styles/index.ts COMPACT_MEDIA — 1100 px since
   F5b, the same one as the article's one-column layout: the 360/390 phones and the 768 tablet): ONE row, at most 64 px tall,
   and every control in it a >= 44x44 hit box (WCAG 2.5.5; the render gate's coarse-pointer TAP_MIN) grown with
   min-block-size / padding, never a visible box. The six nav links never wrap: the strip scrolls sideways
   inside the header (the page itself never does). At phone widths the search is a 44 px icon box that opens
   over the row on focus. The bar is 60 px here (a 44 px control + 8 px each side), a literal, not a --header-h
   override: that token is the core's (single-source, design.test P7), and the sticky offsets built on it
   (--header-h + --size-5 = 44 + 16 = 60 px) still clear a 60 px bar exactly.
   1440+ is untouched (0 golden diffs). */
@media (width <= 1100px) {
  .public-header {
    height: 60px;
  }
  .public-header .public-shell {
    flex-wrap: nowrap;
    gap: var(--size-3);
  }
  .public-header .brand {
    flex: none;
    min-block-size: 44px;
  }
  .public-nav {
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    flex: 1 1 0;
    gap: 0;
    min-width: 0;
    overflow-x: auto;
    mask-image: linear-gradient(to right, black calc(100% - var(--size-5)), transparent);
  }
  .public-nav::-webkit-scrollbar {
    display: none;
  }
  .public-nav a {
    white-space: nowrap;
    flex: none;
    justify-content: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding-inline: var(--size-2);
  }
  .input-group--header {
    flex: 0 1 13rem;
    min-width: 0;
    height: 44px;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--color-border);
  }
  .input-group--header:focus-within {
    box-shadow: inset 0 0 0 1px var(--color-accent-dim);
  }
}

@media (width<=720px) {
  .public-header {
    position: static;
  }
  .input-group--header {
    flex: none;
    inline-size: 44px;
    padding: 0;
    position: relative;
  }
  .input-group--header svg {
    pointer-events: none;
    position: absolute;
    left: 16px;
  }
  .input-group--header input {
    padding-inline-start: 44px;
  }
  .input-group--header .kbd {
    display: none;
  }
  .input-group--header:focus-within {
    z-index: 1;
    inline-size: auto;
    margin-block: auto;
    position: absolute;
    inset-block: 0;
    inset-inline: var(--size-5);
  }
  .input-group--header:focus-within input {
    padding-inline-start: 36px;
  }
}

.ml-auto {
  margin-left: auto;
}

.public-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--size-8);
  padding-block: var(--size-6);
  background: radial-gradient(60% 130% at 0 100%,color-mix(in oklch, var(--color-accent) 4.5%, transparent),transparent 62%);
}

.footer-brand {
  align-items: center;
  gap: var(--size-3);
  min-width: 0;
  display: inline-flex;
}

.footer-logo {
  flex: none;
  width: 18px;
  height: 18px;
  display: block;
}

@media (width<=640px) {
  .public-footer .public-shell {
    row-gap: var(--size-3);
    flex-wrap: wrap;
  }

}

/* veritart public — archive/listing pages: filters, list + feature + item cards, tiles, pagination, page heads,
   search, empty and error states. */

.archive-hero {
  padding: var(--size-8) 0 var(--size-6);
  border-bottom: 1px solid var(--color-border);
}

.archive-hero .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--size-4);
}

.archive-hero h1 {
  letter-spacing: -.02em;
  max-width: 20ch;
  font-size: clamp(2.4rem,6vw,3.5rem);
  font-weight: 500;
  line-height: 1.05;
}

.archive-hero h1 em {
  color: var(--color-accent);
  font-style: normal;
}

.archive-hero p {
  margin-top: var(--size-4);
  max-width: 64ch;
  color: var(--color-text-2);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}


.filter-bar {
  gap: var(--size-3);
  padding: var(--size-4) 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.filter-bar .badge {
  min-height: var(--tap-min);
}

/* F4 — a finger's hit area (>= 44x44, the render gate's coarse-pointer TAP_MIN); a mouse keeps the compact chips. */
@media (pointer: coarse) {
  .filter-bar .badge {
    min-block-size: 44px;
  }
  .search-form .input-group {
    height: auto;
  }
  .search-form .input-group input {
    block-size: 44px;
  }
}

.sr-only {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

.list-section {
  padding: var(--size-6) 0 0;
}

.list-section+.list-section {
  padding-top: var(--size-7);
}

.list-section__head {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--size-3);
  padding-bottom: var(--size-3);
  border-bottom: 1px solid var(--color-border);
  display: flex;
}

.list-section__head h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
}



.list-section__count {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  font-weight: 400;
}

.feature {
  gap: clamp(var(--size-5), 4vw, var(--size-7));
  padding: var(--size-6) 0 var(--size-7);
  border-bottom: 1px solid var(--color-border);
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  align-items: center;
  text-decoration: none;
  display: grid;
}

.feature-media {
  aspect-ratio: 16/10;
  border-radius: var(--radius-3);
  border: 1px solid var(--color-border);
  background: var(--color-base);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.feature:hover .feature-media {
  border-color: var(--color-border-hover);
  box-shadow: var(--glow-accent-sm);
}

.feature-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-slow) var(--ease-out);
  display: block;
}

.feature:hover .feature-media img {
  transform: scale(1.03);
}

.feature-meta {
  gap: var(--size-3);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.feature-date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-3);
  text-transform: uppercase;
}

.feature-title {
  letter-spacing: -.02em;
  color: var(--color-text-1);
  margin-top: var(--size-4);
  text-wrap: balance;
  transition: color var(--dur-fast) var(--ease-out);
  font-size: clamp(1.7rem,2.6vw,2.6rem);
  font-weight: 500;
  line-height: 1.08;
}

.feature:hover .feature-title {
  color: var(--color-accent);
}

.feature-excerpt {
  margin-top: var(--size-4);
  color: var(--color-text-2);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  text-wrap: pretty;
  max-width: 54ch;
}

.feature-cta {
  margin-top: var(--size-5);
  align-items: center;
  gap: var(--size-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  display: inline-flex;
}

.feature-cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.feature:hover .feature-cta svg {
  transform: translate(4px);
}

.item-list {
  padding: var(--size-3) 0 var(--size-6);
}

.item {
  gap: var(--size-2);
  padding: var(--size-5) 0;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--dur-fast) var(--ease-out);
  grid-template-columns: minmax(0,1fr);
  align-items: start;
  text-decoration: none;
  display: grid;
}

.item:hover {
  background: color-mix(in oklch, var(--color-surface-raised) 30%, transparent);
  text-decoration: none;
}

.item--media {
  column-gap: var(--size-5);
  grid-template-columns: clamp(116px,18vw,168px) minmax(0,1fr);
}

.item-media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-2);
  border: 1px solid var(--color-border);
  transition: border-color var(--dur-fast) var(--ease-out);
  overflow: hidden;
}

.item:hover .item-media {
  border-color: var(--color-border-hover);
}

.item-thumb {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-slow) var(--ease-out);
  display: block;
}

.item:hover .item-thumb {
  transform: scale(1.03);
}

.item-meta {
  gap: var(--size-3);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.item-date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-3);
  text-transform: uppercase;
}

.item-body h3 {
  font-size: var(--fs-lg);
  color: var(--color-text-1);
  letter-spacing: -.01em;
  margin-top: var(--size-3);
  transition: color var(--dur-fast) var(--ease-out);
  font-weight: 500;
  line-height: 1.25;
}

.item:hover .item-body h3 {
  color: var(--color-accent);
}

.item-body>p {
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  margin-top: var(--size-2);
  max-width: 72ch;
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.item-body .badge mark,
.item-body mark {
  background: var(--hl-accent-subtle);
  color: var(--color-accent);
  border-bottom: 0;
  padding: 0 2px;
}

@media (prefers-reduced-motion:no-preference) {
  @keyframes archive-in {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .feature,
  .item-list .item {
    animation: archive-in var(--dur-slow) var(--ease-out) both;
  }
  .item-list .item:nth-child(2) {
    animation-delay: 60ms;
  }
  .item-list .item:nth-child(3) {
    animation-delay: .12s;
  }
  .item-list .item:nth-child(4) {
    animation-delay: .18s;
  }
  .item-list .item:nth-child(n+5) {
    animation-delay: .24s;
  }

}

@media (width>=1000px) {
  .item-list {
    column-gap: clamp(var(--size-6), 4vw, var(--size-8));
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

}

@media (width<=760px) {
  .feature {
    gap: var(--size-4);
    padding: var(--size-5) 0 var(--size-6);
    grid-template-columns: 1fr;
    align-items: start;
  }
  .feature-media {
    aspect-ratio: 16/9;
  }
  .feature-title {
    margin-top: var(--size-3);
  }

}

@media (width<=560px) {
  .item--media {
    row-gap: var(--size-3);
    grid-template-columns: 1fr;
  }
  .item-media {
    aspect-ratio: 16/9;
  }

}








.search-hero {
  padding: var(--size-7) 0 var(--size-5);
}

.search-hero h1 {
  font-size: var(--fs-2xl);
  letter-spacing: -.02em;
  margin-bottom: var(--size-4);
  font-weight: 500;
}

.search-form {
  max-width: 560px;
}

.search-form .input-group {
  height: var(--h-ctrl-md);
}

.search-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-3);
  text-transform: uppercase;
  padding: var(--size-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.empty-state {
  align-items: center;
  gap: var(--size-3);
  padding: var(--size-8) var(--size-5);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-1);
  color: var(--color-text-3);
  margin: var(--size-6) 0;
  font-size: var(--fs-sm);
  flex-direction: column;
  display: flex;
}

.empty-state__icon {
  width: 26px;
  height: 26px;
  color: var(--color-text-mute);
}

.empty-state__msg {
  max-width: 44ch;
  line-height: var(--lh-snug);
  margin: 0;
}

.empty-state__action {
  margin-top: var(--size-2);
}


/* F8b (KI 2026-10-17 404 island): the not-found page spans the shell like every archive hero —
   left-aligned, full width — instead of a centred 284 px column. */
.error-page {
  min-height: 60vh;
  padding: var(--size-8) 0 var(--size-6);
  justify-content: center;
  align-items: flex-start;
  gap: var(--size-4);
  flex-direction: column;
  display: flex;
}

.error-code {
  font-family: var(--font-mono);
  font-size: var(--fs-4xl);
  letter-spacing: -.02em;
  color: var(--color-accent);
  font-weight: 600;
}

.error-msg {
  color: var(--color-text-1);
  letter-spacing: -.02em;
  font-size: clamp(2rem,5vw,3rem);
  font-weight: 500;
  line-height: 1.1;
}

/* veritart public — the compact-width tap floor for buttons and section-head links (the admin/auth form rules had no producer on the public sheet and were deleted, F12b). */

@media (width<=640px) {
  .btn,
  .comment-form__submit {
    min-height: 44px;
  }
  .section-head .right a {
    align-items: center;
    min-height: 44px;
    display: inline-flex;
  }

}

/* veritart public — home page: hero, sections, latest posts, post cards, workshop, pillars. */

.hero-wrap {
  padding: var(--size-8) 0 var(--size-7);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.hero-eyebrow-row {
  align-items: center;
  gap: var(--size-3);
  margin-bottom: var(--size-5);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-3);
  flex-wrap: wrap;
  display: flex;
}

.hero-eyebrow-row .sep {
  color: var(--color-border-strong);
}

.hero-h1 {
  font-family: var(--font-display);
  letter-spacing: -.035em;
  color: var(--color-text-1);
  max-width: 18ch;
  font-size: clamp(2.4rem,6vw,4.2rem);
  font-weight: 500;
  line-height: 1;
}

.hero-h1 em {
  color: var(--color-accent);
  font-style: normal;
}

.hero-intro {
  margin-top: var(--size-5);
  color: var(--color-text-2);
  font-size: var(--fs-md);
  text-wrap: pretty;
  max-width: 56ch;
  line-height: 1.55;
}

.hero-meta-strip {
  margin-top: var(--size-6);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  display: grid;
}

@media (width<=720px) {
  .hero-meta-strip {
    grid-template-columns: repeat(2,1fr);
  }

}

.hero-meta-strip>div {
  padding: var(--size-4) var(--size-4) var(--size-4) 0;
  border-right: 1px solid var(--color-border);
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.hero-meta-strip>div:last-child {
  border-right: 0;
}

/* A lone stat spans the strip rather than sitting in a quarter-width cell (C6-HERO-ZEROS). */
.hero-meta-strip>div:only-child {
  grid-column: 1 / -1;
}

.hero-meta-strip>div:not(:first-child) {
  padding-left: var(--size-4);
}

.hero-meta-strip .k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-3);
}

.hero-meta-strip .v {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--color-text-1);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1;
}

.hero-meta-strip .v .u {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--color-text-3);
  letter-spacing: var(--tracking-mono);
  margin-left: 3px;
}

.section-head {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--size-4);
  margin-bottom: var(--size-6);
  display: flex;
}

.section-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  letter-spacing: -.02em;
  color: var(--color-text-1);
  margin-top: 6px;
  font-weight: 500;
}

.section-head p {
  color: var(--color-text-3);
  font-size: var(--fs-sm);
  max-width: 56ch;
  margin-top: 4px;
}

.section-head .right {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-3);
  white-space: nowrap;
}

.section-head .right a {
  color: var(--color-accent);
  text-decoration: none;
}

.section-head .right a:hover {
  text-decoration: underline;
}

.latest-wrap {
  padding: var(--size-8) 0 var(--size-7);
  border-bottom: 1px solid var(--color-border);
}

.latest-grid {
  gap: var(--size-5);
  grid-template-columns: repeat(3,1fr);
  display: grid;
}

@media (width<=900px) {
  .latest-grid {
    grid-template-columns: 1fr;
  }

}

.post {
  gap: var(--size-3);
  padding: var(--size-5) 0;
  border-top: 1px solid var(--color-border);
  cursor: pointer;
  min-height: 200px;
  transition: border-color var(--dur-base) var(--ease-out);
  flex-direction: column;
  text-decoration: none;
  display: flex;
}

.post .date-row {
  align-items: center;
  gap: var(--size-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-3);
  display: flex;
}

.post .date-row .day {
  color: var(--color-accent);
  font-weight: 500;
}

.post h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: -.015em;
  color: var(--color-text-1);
  max-width: 26ch;
  transition: color var(--dur-fast) var(--ease-out);
  font-weight: 500;
  line-height: 1.15;
}

.post p {
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  max-width: 44ch;
  line-height: 1.55;
}

.post .foot {
  padding-top: var(--size-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-3);
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  display: flex;
}

.post:hover {
  border-top-color: var(--color-border-strong);
}

.post:hover h3 {
  color: var(--color-accent);
}

.post-cover {
  aspect-ratio: 16/9;
  border-radius: var(--radius-2);
  border: 1px solid var(--color-border);
  margin-bottom: var(--size-2);
  display: block;
  overflow: hidden;
}

.post-cover img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-slow) var(--ease-out);
  display: block;
}

.post:hover .post-cover {
  border-color: var(--color-border-hover);
}

.post:hover .post-cover img {
  transform: scale(1.03);
}

.workshop-wrap {
  padding: var(--size-8) 0;
}

.pillars {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  display: grid;
  overflow: hidden;
}

@media (width<=900px) {
  .pillars {
    grid-template-columns: repeat(2,1fr);
  }

}

.pillar {
  padding: var(--size-6);
  border-right: 1px solid var(--color-border);
  background: var(--glass-subtle);
  gap: var(--size-3);
  cursor: pointer;
  min-height: 220px;
  transition: background var(--dur-base) var(--ease-out);
  flex-direction: column;
  text-decoration: none;
  display: flex;
  position: relative;
}

.pillar:last-child {
  border-right: 0;
}

@media (width<=900px) {
  .pillar:nth-child(2) {
    border-right: 0;
  }
  .pillar:first-child,
  .pillar:nth-child(2) {
    border-bottom: 1px solid var(--color-border);
  }

}

.pillar:hover {
  background: var(--glass-strong);
}

.pillar:before {
  content: "";
  background: currentColor;
  width: 40px;
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
}

.p-article {
  color: var(--c-article);
}

.p-prompt {
  color: var(--c-prompt);
}

.p-skill {
  color: var(--c-skill);
}

.p-tool {
  color: var(--c-tool);
}

.pillar .p-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: currentColor;
}

.pillar .p-count {
  font-family: var(--font-display);
  color: var(--color-text-1);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
}

.pillar .p-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--color-text-1);
  letter-spacing: -.015em;
  font-weight: 500;
}

.pillar .p-desc {
  font-size: var(--fs-xs);
  color: var(--color-text-3);
  max-width: 30ch;
  line-height: 1.5;
}

.pillar .p-foot {
  padding-top: var(--size-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-3);
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  display: flex;
}

.pillar .p-foot .arrow {
  color: currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}

.pillar:hover .p-foot .arrow {
  transform: translate(3px);
}

.section-head h2 {
  text-shadow: 0 0 16px color-mix(in oklch, var(--color-accent) 32%, transparent),0 0 32px color-mix(in oklch, var(--color-info) 18%, transparent);
}

.hero-wrap,
.latest-wrap {
  position: relative;
  overflow-x: clip;
}

.hero-wrap:after,
.latest-wrap:after {
  content: "";
  background: linear-gradient(90deg, transparent, var(--color-accent), var(--color-accent2), var(--c-prompt), transparent);
  opacity: .55;
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--color-info) 40%, transparent));
  background-size: 50% 100%;
  width: 400%;
  height: 1px;
  position: absolute;
  bottom: -1px;
  left: 0;
}

@media (prefers-reduced-motion:no-preference) {
  .hero-wrap:after,
  .latest-wrap:after {
    will-change: transform;
    animation: 8s linear infinite holo-edge;
  }
  .hero-wrap.is-offscreen:after,
  .latest-wrap.is-offscreen:after {
    animation-play-state: paused;
  }
  .holo-glitch.is-holo-in {
    animation: .55s steps(2,end) holo-glitch;
  }
  .holo-glitch:hover {
    animation: .4s steps(2,end) holo-glitch;
  }

}

@keyframes holo-glitch {
  0% {
    text-shadow: 0 0 16px color-mix(in oklch, var(--glitch-mint) 45%, transparent);
    transform: translate(0);
  }
  20% {
    text-shadow: -3px 0 color-mix(in oklch, var(--color-danger) 75%, transparent),3px 0 color-mix(in oklch, var(--glitch-cyan) 75%, transparent);
    transform: translate(-2px,1px);
  }
  40% {
    text-shadow: 3px 0 color-mix(in oklch, var(--color-danger) 65%, transparent),-3px 0 color-mix(in oklch, var(--glitch-cyan) 65%, transparent);
    transform: translate(2px,-1px);
  }
  60% {
    text-shadow: -2px 0 color-mix(in oklch, var(--glitch-violet) 65%, transparent),2px 0 color-mix(in oklch, var(--glitch-mint) 65%, transparent);
    transform: translate(-1px);
  }
  to {
    text-shadow: 0 0 16px color-mix(in oklch, var(--glitch-mint) 45%, transparent),0 0 30px color-mix(in oklch, var(--glitch-cyan) 30%, transparent);
    transform: translate(0);
  }

}

/* The holo edge: its host clips a strip four host-widths wide holding two 200%-wide gradient tiles; sliding
   the strip one tile left (-50% of itself) is the old background-position 0 -> 200% cycle, frame for frame, as a
   compositor-only transform. The clip: overflow-x: clip (the strip must not widen the page). The home hosts are
   full-bleed, so that clip is the viewport's own edge; the /lucas/ hosts sit inside the shell's --size-5 gutter,
   so they clip at the gutter (overflow-clip-margin — glows and glitch chroma that overhang into it still paint)
   and a clip-path cuts only the line's own 32px band at the host's edges (21-profile.css). The brand wordmark keeps holo-edge-bg (hover-only:
   its host is an inline span, which cannot clip). */
@keyframes holo-edge {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }

}

@keyframes holo-edge-bg {
  0% {
    background-position: 0 0;
  }
  to {
    background-position: 200% 0;
  }

}

/* veritart public — article comments: list, comment cards, comment form. */

.comment-form {
  gap: var(--size-4);
  margin-block: var(--size-7);
  padding: var(--size-5);
  background: var(--glass-subtle);
  -webkit-backdrop-filter: blur(var(--glass-blur-soft));
  backdrop-filter: blur(var(--glass-blur-soft));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3);
  display: grid;
}

.comment-form__field {
  gap: var(--size-1);
  font-size: var(--fs-sm);
  display: grid;
}

.comment-form__field input,
.comment-form__field textarea {
  width: 100%;
  padding: var(--size-2) var(--size-3);
  background: var(--glass-medium);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  color: var(--color-text-1);
  /* form controls do not inherit font from the page (UA default: Arial 13.3px) — take the site body face at the
     body-copy size, so what a reader types reads like the text around it */
  font-family: inherit;
  font-size: var(--fs-base);
}

.comment-form__field textarea {
  resize: vertical;
  min-height: 6rem;
}

/* the refused-submit reason (the 422 re-render's <p role="alert"> under the title) reads as an error */
.comment-form [role=alert] {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--fs-sm);
}

/* the submit's look is the primary .btn (03-components-primitives.css lists it beside .btn / .btn-primary, KI
   4aac0bd); here only its place in the form grid */
.comment-form__submit {
  justify-self: start;
}

.comments__list {
  gap: var(--size-5);
  padding: 0;
  list-style: none;
  display: grid;
}

.comments__list--nested {
  margin-left: var(--size-5);
  border-left: 1px solid var(--color-border);
  padding-left: var(--size-5);
}

.comment__head {
  gap: var(--size-3);
  margin-bottom: var(--size-2);
  align-items: baseline;
  display: flex;
}

.comment__author a {
  color: var(--color-accent);
  text-decoration: none;
}

.comment__author a:hover {
  color: var(--color-accent-dim);
  text-decoration: underline;
}

.comment__date {
  font-size: var(--fs-xs);
  color: var(--color-text-3);
}

.comment {
  background: var(--glass-subtle);
  -webkit-backdrop-filter: blur(var(--glass-blur-soft));
  backdrop-filter: blur(var(--glass-blur-soft));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  padding: var(--size-4) var(--size-5);
}

.comment__body {
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  line-height: var(--lh-body);
}

.comment__body p {
  margin: 0 0 var(--size-2);
}

.comment__body p:last-child {
  margin-bottom: 0;
}

.comments__heading {
  font-size: var(--fs-lg);
  color: var(--color-text-1);
  margin: 0 0 var(--size-4);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--size-3);
  font-weight: 600;
}

.comments__count {
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  font-weight: 400;
}


.comments__empty {
  color: var(--color-text-3);
  font-size: var(--fs-sm);
  font-style: italic;
}

/* F8a (decision 191be928:Q11 b) — comments collapsed behind a native disclosure: `details.comments` with the
   existing heading as its summary (comments.ts `collapsed`). Same chevron idiom as .article-chart__data. */
.comments__summary {
  cursor: pointer;
  list-style: none;
  align-items: center;
  gap: var(--size-2);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--size-3);
  display: flex;
}

.comments__summary::-webkit-details-marker {
  display: none;
}

.comments__summary:before {
  content: "▸";
  color: var(--color-accent-dim);
  transition: transform .2s;
}

.comments[open] > .comments__summary {
  margin-bottom: var(--size-4);
}

.comments[open] > .comments__summary:before {
  transform: rotate(90deg);
}

/* The heading's top spacing in a long article came from `article.long h2 { margin-top: var(--size-7) }`
   (12-article-layout.css), which the summary heading's `margin: 0` below cancels — so the disclosure itself
   carries it: the closed summary keeps the gap above it (26px) instead of sitting flush on the prev/next nav. */
article.long details.comments {
  margin-top: var(--size-7);
}

.comments__summary .comments__heading {
  margin: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.comments__summary:hover .comments__heading {
  color: var(--color-accent);
}

.comments__summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}

@media (pointer: coarse) {
  .comments__summary,
  .comment-form__field input,
  .comment-form__submit {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comments__summary:before {
    transition: none;
  }
}

/* veritart public — the --color-surface-1 alias crucix references (D84 / Q1a). */

/* D84 / Q1a (operator pick 2026-09-26): crucix references --color-surface-1 but never defined it; alias it to the surface token. */
:root {
  --color-surface-1: var(--color-surface);
}

/* veritart public — the /lucas profile page (trio's crucix profile bundle): hero, cases, shots, skills, proof, spec,
   the pmap node graph, detail panel + glitch transitions, resume, copy. */

/* Measures are written in Be Vietnam Pro's `ch`, not in `ch` (F6a). `ch` is the "0" advance of the FIRST AVAILABLE
   font, so a ch-based max-width is ~11% narrower while the system fallback paints (before the web font swaps in):
   the thesis prose wrapped one line deeper and the swap then moved the system map ~20 px — a load-time layout shift
   of 0.13-0.22 at >= 768 px whose size depended on font-load timing (the render gate saw it either side of 0.1).
   .676em IS Be Vietnam Pro's "0" (676/1000 em at weight 400), so `calc(N * .676em)` is the Nch the layout was designed
   in (68 = --layout-reading's 68ch), whichever face is painting — the final layout is unchanged. */


.profile-hero {
  padding: clamp(var(--size-7), 8vw, calc(var(--size-8) + var(--size-5))) 0 var(--size-7);
  border-bottom: 1px solid var(--color-border);
}

.profile-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  letter-spacing: .02em;
  margin: 0 0 var(--size-3);
}

.profile-hero__title {
  font-size: clamp(var(--fs-2xl), 7vw, var(--fs-3xl));
  letter-spacing: -.03em;
  font-weight: 700;
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0 0 var(--size-4);
}

.profile-hero__cursor {
  color: var(--color-accent);
}

/* the blink is an endless loop: opt-in motion only (reduced motion gets a steady cursor) */
@media (prefers-reduced-motion:no-preference) {
  .profile-hero__cursor {
    animation: 1s steps(2,start) infinite profile-blink;
  }
}

.profile-hero__cursor.is-offscreen {
  animation-play-state: paused;
}

.profile-hero__thesis {
  font-size: var(--fs-xl);
  color: var(--color-text-1);
  max-width: calc(68 * .676em);
  text-wrap: balance;
  margin: 0 0 var(--size-5);
}

.profile-hero__cta {
  gap: var(--size-3);
  flex-wrap: wrap;
  display: flex;
}

@keyframes profile-blink {
  to {
    opacity: 0;
  }

}

.profile-section {
  padding: var(--size-7) 0;
  border-bottom: 1px solid var(--color-border);
}

.profile-section:first-of-type {
  padding-top: var(--size-8);
}

.profile-section__heading {
  font-size: var(--fs-2xl);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.profile-section__lede,
.profile-prose {
  max-width: calc(68 * .676em);
  color: var(--color-text-3);
  line-height: var(--lh-body);
}

.profile-prose strong {
  color: var(--color-text-1);
}

.profile-section__head-row {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--size-4);
  flex-wrap: wrap;
  display: flex;
}

.profile-contact {
  padding-block: var(--size-8);
  border-bottom: 0;
}

.profile-contact .profile-section__heading {
  color: var(--color-accent);
}

.case {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  padding: var(--size-5);
  scroll-margin-top: var(--size-7);
}

.case__title {
  font-size: var(--fs-xl);
  margin: 0 0 var(--size-2);
}

.case__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-2);
  margin: 0 0 var(--size-2);
}

.case__tagline {
  color: var(--color-text-1);
  margin: 0 0 var(--size-3);
}

.case__blurb {
  color: var(--color-text-2);
  max-width: calc(68 * .676em);
}

.case__outcomes {
  color: var(--color-text-2);
  font-size: var(--fs-sm);
  padding-left: var(--size-5);
}

.case__tech,
.case__metrics {
  gap: var(--size-2);
  margin-top: var(--size-3);
  flex-wrap: wrap;
  display: flex;
}

.chip {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-2);
  border: 1px solid var(--color-border);
  padding: var(--size-1) var(--size-3);
  border-radius: 999px;
}

.metric {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-accent);
}

.case__shot {
  margin: 0;
}

.case__shot img {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-3);
  display: block;
}

.case__shot-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--color-text-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: var(--lh-snug);
  margin: var(--size-2) 0 0;
}

.profile-captures .shots {
  gap: var(--size-7);
  margin-top: var(--size-6);
  display: grid;
}

.shot--featured {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
}

.shots__rest {
  gap: var(--size-6);
  grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr));
  min-width: 0;
  display: grid;
}

.shot {
  gap: var(--size-3);
  min-width: 0;
  color: inherit;
  text-decoration: none;
  display: grid;
}

.shot__frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  display: block;
  position: relative;
  overflow: hidden;
}

.shot__frame img {
  width: 100%;
  height: auto;
  display: block;
}

.shots__rest .shot__frame {
  aspect-ratio: 16/10;
}

.shots__rest .shot__frame img {
  object-fit: cover;
  object-position: top center;
  height: 100%;
}

.shot__live {
  top: var(--size-2);
  right: var(--size-2);
  align-items: center;
  gap: var(--size-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--color-text-1);
  background: color-mix(in oklch, var(--color-base) 86%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  padding: 2px var(--size-2);
  pointer-events: none;
  display: inline-flex;
  position: absolute;
}

.shot__live-dot {
  background: var(--color-accent);
  width: 6px;
  height: 6px;
  box-shadow: 0 0 6px color-mix(in oklch, var(--color-accent) 70%, transparent);
  border-radius: 50%;
}

.shot__meta {
  gap: var(--size-1);
  min-width: 0;
  display: grid;
}

.shot__id {
  align-items: center;
  gap: var(--size-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text-1);
  letter-spacing: -.01em;
  transition: color var(--dur-fast) var(--ease-out);
  display: inline-flex;
}

.shot--featured .shot__id {
  font-size: var(--fs-base);
}

.shot__icon {
  color: var(--color-accent-dim);
  flex: none;
}

.shot__note {
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  line-height: var(--lh-snug);
}

.shot:hover .shot__frame,
.shot:focus-within .shot__frame {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-accent) 30%, transparent), var(--shadow-3);
}

.shot:hover .shot__id,
.shot:focus-visible .shot__id {
  color: var(--color-accent);
}

.shot:focus-visible {
  outline: none;
}

.shot:focus-visible .shot__frame {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion:no-preference) {
  .shot:hover .shot__frame,
  .shot:focus-visible .shot__frame {
    transform: translateY(-3px);
  }
  .shot__frame img {
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .shot:hover .shot__frame img,
  .shot:focus-visible .shot__frame img {
    transform: scale(1.025);
  }

}

.skill-grid {
  gap: var(--size-6);
  margin-top: var(--size-5);
  grid-template-columns: repeat(auto-fit,minmax(15rem,1fr));
  display: grid;
}

.skill-grid__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 var(--size-3);
}

.skill-grid__list {
  gap: var(--size-4);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.skill {
  gap: var(--size-1);
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  display: grid;
}

.skill__head {
  align-items: center;
  gap: var(--size-2);
  display: flex;
}

.skill__icon {
  font-size: var(--fs-base);
  color: var(--color-text-3);
  transition: color var(--dur-fast) var(--ease-out);
  flex: none;
}

.skill:hover .skill__icon,
.skill:focus-within .skill__icon {
  color: var(--color-accent);
}

.skill__proof {
  padding-left: calc(var(--fs-base) + var(--size-2));
  font-size: var(--fs-micro);
  line-height: var(--lh-snug);
}

.skill__sep {
  color: var(--color-text-mute);
  margin: 0 var(--size-1);
}

.proof-link {
  color: var(--color-text-3);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
  text-decoration: none;
}

.proof-link:hover,
.proof-link:focus-visible {
  color: var(--color-accent);
}

.proof-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 1px;
}

.spec-list {
  gap: var(--size-7) var(--size-6);
  margin-top: var(--size-6);
  grid-template-columns: repeat(auto-fit,minmax(22rem,1fr));
  display: grid;
}

.spec__head {
  align-items: center;
  gap: var(--size-3);
  margin-bottom: var(--size-3);
  display: flex;
}

.spec__node {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  background: var(--color-elevated);
  width: 1.9rem;
  height: 1.9rem;
  color: var(--color-accent);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.spec__icon {
  width: 1rem;
  height: 1rem;
}

.spec:hover .spec__node,
.spec:focus-within .spec__node {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-accent) 30%, transparent);
}

.spec__title {
  font-size: var(--fs-lg);
  letter-spacing: -.01em;
  line-height: var(--lh-snug);
  text-wrap: balance;
  margin: 0;
}

.spec__blurb {
  color: var(--color-text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  max-width: calc(44 * .676em);
  margin: 0 0 var(--size-4);
}

.spec__proof {
  gap: var(--size-2);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.proof {
  align-items: center;
  gap: var(--size-2);
  padding: var(--size-1) var(--size-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  background: var(--color-elevated);
  color: var(--color-text-2);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  text-decoration: none;
  display: inline-flex;
}

.proof__icon {
  width: .9rem;
  height: .9rem;
  color: var(--color-text-3);
  transition: color var(--dur-fast) var(--ease-out);
  flex: none;
}

.spec:hover .proof {
  border-color: var(--color-border-hover);
}

.proof:hover,
.proof:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-text-1);
  box-shadow: 0 4px 14px -8px color-mix(in oklch, var(--color-accent) 55%, transparent);
  transform: translateY(-1px);
}

.proof:hover .proof__icon,
.proof:focus-visible .proof__icon {
  color: var(--color-accent);
}

.proof:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.pmap {
  margin: var(--size-4) 0 var(--size-2);
  position: relative;
  /* the hub node's pulsing glow (::after, scaled ~1.03) spilled the live map 5-9px past the viewport at 768-2560 */
  overflow-x: clip;
}

.pmap__caption {
  align-items: center;
  gap: var(--size-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--size-3);
  display: inline-flex;
}

.pmap__bands {
  z-index: 1;
  gap: var(--size-3);
  display: grid;
  position: relative;
}

.pmap__band {
  --pmap-key: var(--color-text-3);
  border-inline-start: 2px solid color-mix(in oklch, var(--pmap-key) 55%, transparent);
  padding-inline-start: var(--size-3);
}

.pmap__band[data-hue=slate] {
  --pmap-key: var(--pmap-hue-slate);
}

.pmap__band[data-hue=teal] {
  --pmap-key: var(--pmap-hue-teal);
}

.pmap__band[data-hue=amber] {
  --pmap-key: var(--pmap-hue-amber);
}

.pmap__band[data-hue=violet] {
  --pmap-key: var(--pmap-hue-violet);
}

.pmap__band[data-hue=crimson] {
  --pmap-key: var(--pmap-hue-crimson);
}

.pmap__band[data-hue=blue] {
  --pmap-key: var(--pmap-hue-blue);
}

.pmap__band[data-hue=orange] {
  --pmap-key: var(--pmap-hue-orange);
}

.pmap__band[data-hue=green] {
  --pmap-key: var(--pmap-hue-green);
}

.pmap__band[data-hue=purple] {
  --pmap-key: var(--pmap-hue-purple);
}

.pmap__band[data-hue=magenta] {
  --pmap-key: var(--pmap-hue-magenta);
}

.pmap__band-title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--pmap-key);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 var(--size-2);
}

.pmap__nodes {
  gap: var(--size-2);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.pmap__node {
  align-items: center;
  gap: var(--size-1);
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  padding: var(--size-1) var(--size-3);
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  display: inline-flex;
}

.pmap__node:hover,
.pmap__node.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-accent) 35%, transparent);
}

.pmap__node.is-active {
  background: color-mix(in oklch, var(--color-accent) 12%, var(--color-elevated));
  color: var(--color-text-1);
}

.pmap__node.is-linked {
  border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-border));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-accent) 22%, transparent);
}

.pmap__node:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.pmap__status {
  font-size: var(--fs-base);
  color: var(--color-text-3);
  flex: none;
}

.pmap__node[data-status=built] .pmap__status {
  color: var(--color-accent-dim);
}

.pmap__node[data-status=partial] .pmap__status {
  color: var(--pmap-hue-amber);
}

.pmap__node[data-status=planned] .pmap__status {
  color: var(--color-text-3);
}

.pmap__edges {
  z-index: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.pmap__edge {
  fill: none;
  stroke: var(--pmap-edge);
  stroke-width: 1.5px;
  opacity: .55;
  transition: stroke var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.pmap__edge--active {
  stroke: var(--pmap-edge-active);
  opacity: 1;
  filter: drop-shadow(0 0 3px color-mix(in oklch, var(--color-accent) 60%, transparent));
}

.pmap__arrowhead path {
  fill: var(--pmap-edge);
}

.pmap__arrowhead--active path {
  fill: var(--pmap-edge-active);
}

.pmap__join {
  fill: var(--pmap-edge);
  opacity: .7;
  transition: fill var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.pmap__join--active {
  fill: var(--pmap-edge-active);
  opacity: 1;
  filter: drop-shadow(0 0 3px color-mix(in oklch, var(--color-accent) 60%, transparent));
}

.pmap__edge-pill-bg {
  fill: var(--color-surface);
  stroke: color-mix(in oklch, var(--color-accent) 50%, transparent);
  stroke-width: 1px;
}

.pmap__edge-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  fill: var(--color-accent);
}

.pmap__particle {
  fill: var(--color-accent);
  filter: drop-shadow(0 0 2px var(--color-accent));
}

@media (width<=40rem) {
  .pmap__edges {
    display: none;
  }
  .pmap__node {
    width: 100%;
  }

}

.pmap--hero {
  margin: var(--size-6) 0 var(--size-2);
}

.pmap--hero .pmap__bands {
  gap: var(--size-5);
}

.pmap__node-li {
  display: contents;
}

.pmap__node--project {
  min-width: 12rem;
  max-width: 17rem;
  padding: var(--size-2) var(--size-3);
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
}

.pmap__node--project .pmap__node-label {
  color: var(--color-text-1);
  font-weight: 600;
}

.pmap__node-sub {
  font-size: var(--fs-xs);
  color: var(--color-text-2);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.pmap__node--hub {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-accent) 30%, transparent);
}

.pmap__node--hub .pmap__node-label {
  color: var(--color-accent);
}

.pmap__node-head {
  align-items: center;
  gap: var(--size-2);
  display: inline-flex;
}

.pmap__node-icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-3);
  transition: color var(--dur-fast) var(--ease-out);
  flex: none;
}

.pmap__node--hub .pmap__node-icon {
  color: var(--color-accent);
}

.pmap__node--project {
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.pmap__node--project:hover,
.pmap__node--project:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 8px 22px -12px color-mix(in oklch, var(--color-accent) 50%, transparent);
  transform: translateY(-2px);
}

.pmap__node--project:hover .pmap__node-icon,
.pmap__node--project:focus-visible .pmap__node-icon {
  color: var(--color-accent);
}

.pmap--hero .pmap__edges {
  display: none;
}

.pmap__bands--split {
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: start;
}

.pmap--hero .pmap__bands--split {
  gap: var(--size-6);
}

.pmap__band--side .pmap__band-title {
  font-size: var(--fs-sm);
  letter-spacing: .08em;
}

.pmap__band-lede {
  font-size: var(--fs-xs);
  color: var(--color-text-2);
  line-height: var(--lh-tight);
  margin: 0 0 var(--size-3);
  text-wrap: balance;
  max-width: calc(34 * .676em);
}

.pmap__band--side .pmap__node--project {
  width: 100%;
  min-width: 0;
  max-width: none;
}

@media (width<=52rem) {
  .pmap__bands--split {
    grid-template-columns: 1fr;
  }

}

.detail {
  width: min(94vw,46rem);
  max-width: none;
  height: max-content;
  max-height: 88dvh;
  box-shadow: none;
  color: var(--color-text-1);
  padding: var(--size-6);
  --g-red: color-mix(in oklch, var(--color-danger) 82%, transparent);
  --g-cyan: color-mix(in oklch, var(--color-accent2) 82%, transparent);
  --g-violet: color-mix(in oklch, var(--violet-300) 78%, transparent);
  --g-mint: color-mix(in oklch, var(--color-accent) 78%, transparent);
  background: 0 0;
  border: 0;
  margin: auto;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

.detail[open] {
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out);
}

@starting-style {
  .detail[open] {
    opacity: 0;
  }

}

.detail::backdrop {
  background: var(--color-scrim);
  opacity: 0;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  transition: opacity var(--dur-slow) var(--ease-out), display var(--dur-slow) allow-discrete, overlay var(--dur-slow) allow-discrete;
}

.detail[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .detail[open]::backdrop {
    opacity: 0;
  }

}

.detail__chrome {
  justify-content: space-between;
  align-items: center;
  gap: var(--size-3);
  margin-bottom: var(--size-2);
  display: flex;
}

.detail__grid {
  gap: var(--size-6);
  align-items: start;
  display: grid;
}

.detail[data-cols="2"] {
  width: min(96vw,64rem);
}

.detail[data-cols="2"] .detail__grid {
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
}

.detail__main,
.detail__aside {
  min-width: 0;
}

.detail__aside[hidden] {
  display: none;
}

.detail__map {
  gap: var(--size-3);
  display: grid;
}

.detail__map .pmap {
  margin: 0;
}

.detail__map .pmap__bands {
  gap: var(--size-3);
}

.detail__map .pmap__caption {
  display: none;
}

@media (width<=48rem) {
  .detail[data-cols="2"] {
    width: min(94vw,46rem);
  }
  .detail[data-cols="2"] .detail__grid {
    grid-template-columns: 1fr;
  }

}

.detail__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-accent-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0;
}

.detail__close {
  width: 2rem;
  height: 2rem;
  color: var(--color-text-3);
  cursor: pointer;
  font-size: var(--fs-lg);
  transition: color var(--dur-fast) var(--ease-out);
  background: 0 0;
  border: 0;
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.detail__close:hover {
  color: var(--color-accent);
}

.detail__close:focus-visible {
  color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.detail__title {
  font-size: var(--fs-2xl);
  letter-spacing: -.02em;
  margin: 0 0 var(--size-2);
  text-wrap: balance;
}

.detail__title:focus-visible {
  outline: none;
}

.detail__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-3);
  margin: 0 0 var(--size-4);
}

.detail__body {
  gap: var(--size-4);
  display: grid;
}

.detail__body>* {
  margin: 0;
}

.detail.is-glitch-in :is(.detail__eyebrow,.detail__title,.detail__meta,.detail__body>*) {
  animation: .44s steps(2,end) backwards el-glitch-in;
  animation-delay: calc(var(--i,0) * 30ms);
}

.detail.is-glitch-out :is(.detail__eyebrow,.detail__title,.detail__meta,.detail__body>*) {
  animation: .32s steps(2,end) both el-glitch-out;
  animation-delay: calc(var(--i,0) * 14ms);
}

@keyframes el-glitch-in {
  0% {
    opacity: 0;
    filter: drop-shadow(-6px 0 var(--g-red)) drop-shadow(6px 0 var(--g-cyan));
    transform: translate(-6px);
  }
  16% {
    opacity: 1;
    filter: drop-shadow(6px 0 var(--g-red)) drop-shadow(-6px 0 var(--g-cyan));
    transform: translate(5px);
  }
  46% {
    opacity: 1;
    filter: drop-shadow(-4px 0 var(--g-violet)) drop-shadow(4px 0 var(--g-mint));
    transform: translate(-3px);
  }
  74% {
    opacity: 1;
    filter: drop-shadow(3px 0 var(--g-red)) drop-shadow(-3px 0 var(--g-cyan));
    transform: translate(2px);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }

}

@keyframes el-glitch-out {
  0% {
    opacity: 1;
    filter: none;
    transform: none;
  }
  35% {
    opacity: 1;
    filter: drop-shadow(-5px 0 var(--g-red)) drop-shadow(5px 0 var(--g-cyan));
    transform: translate(5px);
  }
  70% {
    opacity: .5;
    filter: drop-shadow(5px 0 var(--g-red)) drop-shadow(-5px 0 var(--g-cyan));
    transform: translate(-4px);
  }
  to {
    opacity: 0;
    filter: drop-shadow(-3px 0 var(--g-red)) drop-shadow(3px 0 var(--g-cyan));
    transform: translate(4px);
  }

}

.detail.is-glitch-in :is(.detail__aside .pmap__band-title,.detail__aside .pmap__node) {
  animation: .44s steps(2,end) backwards el-node-in;
  animation-delay: calc(var(--i,0) * 14ms);
}

.detail.is-glitch-out :is(.detail__aside .pmap__band-title,.detail__aside .pmap__node) {
  animation: .3s steps(2,end) both el-node-out;
  animation-delay: calc(var(--i,0) * 9ms);
}

@keyframes el-node-in {
  0% {
    opacity: 0;
    filter: drop-shadow(-5px 0 var(--g-red)) drop-shadow(5px 0 var(--g-cyan));
  }
  18% {
    opacity: 1;
    filter: drop-shadow(5px 0 var(--g-red)) drop-shadow(-5px 0 var(--g-cyan));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(-3px 0 var(--g-violet)) drop-shadow(3px 0 var(--g-mint));
  }
  to {
    opacity: 1;
    filter: none;
  }

}

@keyframes el-node-out {
  0% {
    opacity: 1;
    filter: none;
  }
  45% {
    opacity: 1;
    filter: drop-shadow(-5px 0 var(--g-red)) drop-shadow(5px 0 var(--g-cyan));
  }
  to {
    opacity: 0;
    filter: drop-shadow(3px 0 var(--g-red)) drop-shadow(-3px 0 var(--g-cyan));
  }

}

.detail .case__blurb,
.detail .case__outcomes {
  max-width: none;
}

.detail .chip {
  border-color: color-mix(in oklch, var(--color-border) 45%, transparent);
}

.detail__back {
  align-items: center;
  gap: var(--size-1);
  margin-bottom: var(--size-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-3);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
  background: 0 0;
  border: 0;
  padding: 0;
  display: inline-flex;
}

.detail__back:hover,
.detail__back:focus-visible {
  color: var(--color-accent);
}

.detail__back:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.detail__status {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  align-items: center;
  display: inline-flex;
}

.detail__status--built {
  color: var(--color-accent-dim);
}

.detail__status--partial {
  color: var(--pmap-hue-amber);
}

.detail__status--planned {
  color: var(--color-text-3);
}

.detail__section {
  gap: var(--size-2);
  display: grid;
}

.detail__section-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0;
}

.detail__conns {
  gap: var(--size-1);
  flex-direction: column;
  display: flex;
}

.detail__conn {
  align-items: baseline;
  gap: var(--size-2);
  text-align: left;
  width: 100%;
  padding: var(--size-1) 0;
  color: var(--color-text-2);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: color var(--dur-fast) var(--ease-out);
  background: 0 0;
  border: 0;
  display: flex;
}

.detail__conn:hover {
  color: var(--color-accent);
}

.detail__conn:focus-visible {
  color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.detail__conn:hover .detail__conn-label,
.detail__conn:focus-visible .detail__conn-label {
  color: var(--color-accent);
}

.detail__conn-kind {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-accent-dim);
  flex: none;
}

.detail__conn-label {
  color: var(--color-text-1);
  transition: color var(--dur-fast) var(--ease-out);
}

.detail__empty {
  color: var(--color-text-3);
  font-size: var(--fs-sm);
}





.profile-footnote {
  color: var(--color-text-3);
  font-size: var(--fs-sm);
  margin-top: var(--size-4);
}

@media print {
  .public-header,
  footer {
    display: none;
  }

}






@media (prefers-reduced-motion:no-preference) {
  html {
    scroll-behavior: smooth;
  }
  html.motion-armed [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(var(--size-2));
  }

}

[data-reveal] {
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay,0s);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion:no-preference) {
  [data-hero]>* {
    animation: hero-in var(--dur-base) var(--ease-out) both;
  }
  [data-hero]>:first-child {
    animation-delay: 60ms;
  }
  [data-hero]>:nth-child(2) {
    animation-delay: .15s;
  }
  [data-hero]>:nth-child(3) {
    animation-delay: .24s;
  }
  [data-hero]>:nth-child(4) {
    animation-delay: .33s;
  }

}

@keyframes hero-in {
  0% {
    opacity: 0;
    transform: translateY(var(--size-2));
  }
  to {
    opacity: 1;
    transform: none;
  }

}

.case {
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.case:hover {
  transform: translateY(calc(-1 * var(--size-1)));
  border-color: var(--color-accent);
}

.case__icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--color-text-3);
  vertical-align: -.15em;
  transition: color var(--dur-fast) var(--ease-out);
  flex: none;
}

.case:hover .case__icon {
  color: var(--color-accent);
}



.icon {
  vertical-align: -.125em;
}

.scroll-progress {
  background: var(--color-accent);
  transform-origin: 0;
  z-index: 100;
  height: 2px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.section-rail {
  display: none;
}

@media (width>=64rem) {
  .section-rail {
    gap: var(--size-3);
    right: var(--size-5);
    z-index: 50;
    flex-direction: column;
    display: flex;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
  }
  .section-rail__link {
    align-items: center;
    gap: var(--size-2);
    color: var(--color-text-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    display: flex;
  }
  .section-rail__dot {
    width: var(--size-2);
    height: var(--size-2);
    border: 1px solid var(--color-border);
    background: var(--color-base);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    border-radius: 999px;
  }
  .section-rail__label {
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .section-rail__link:hover .section-rail__label,
  .section-rail__link:focus-visible .section-rail__label,
  .section-rail__link[aria-current=true] .section-rail__label {
    opacity: 1;
  }
  .section-rail__link:focus-visible .section-rail__dot,
  .section-rail__link[aria-current=true] .section-rail__dot {
    background: var(--color-accent);
    border-color: var(--color-accent);
  }

}

.copy-email {
  min-width: var(--size-6);
  min-height: var(--size-6);
  color: var(--color-text-3);
  cursor: pointer;
  padding: var(--size-1);
  vertical-align: middle;
  background: 0 0;
  border: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.copy-email:hover {
  color: var(--color-accent);
}

.copy-email:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  color: var(--color-accent);
}

@media (pointer:coarse) {
  .copy-email,
  .detail__close {
    min-width: 44px;
    min-height: 44px;
  }
  /* F4 — the proof chips grow to 44 px; the inline proof links and the contact address keep their line (an inline
     box's vertical padding does not move the line box) and gain an invisible 44 px tall hit area, the links also
     44 px wide (6 px each side, given back by the negative margin so the text does not move). */
  .proof {
    min-block-size: 44px;
  }
  .proof-link,
  .profile-contact a[href^="mailto:"] {
    padding-block: 15px;
  }
  .proof-link {
    margin-inline: -6px;
    padding-inline: 6px;
  }

}

.copy-email__check {
  color: var(--color-success);
  display: none;
}

.copy-email.is-copied .copy-email__copy {
  display: none;
}

.copy-email.is-copied .copy-email__check {
  display: inline;
}

.pmap__node--hub {
  position: relative;
}

@media (prefers-reduced-motion:no-preference) {
  .pmap--live .pmap__node--hub:after {
    content: "";
    border-radius: inherit;
    border: 1px solid var(--color-accent);
    opacity: 0;
    pointer-events: none;
    transform-origin: 50%;
    animation: pmap-hub-pulse 2.8s var(--ease-out) infinite;
    position: absolute;
    inset: -1px;
  }

}

@keyframes pmap-hub-pulse {
  0% {
    opacity: .5;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 0;
    transform: scale(1.06);
  }

}

@media (prefers-reduced-motion:no-preference) {
  .pmap--hero.pmap--live .pmap__node--project {
    animation: pmap-card-in var(--dur-base) var(--ease-out) backwards;
  }
  .pmap--hero.pmap--live .pmap__node-li:first-child .pmap__node--project {
    animation-delay: 60ms;
  }
  .pmap--hero.pmap--live .pmap__node-li:nth-child(2) .pmap__node--project {
    animation-delay: .12s;
  }
  .pmap--hero.pmap--live .pmap__node-li:nth-child(3) .pmap__node--project {
    animation-delay: .18s;
  }
  .pmap--hero.pmap--live .pmap__node-li:nth-child(4) .pmap__node--project {
    animation-delay: .24s;
  }
  .pmap--hero.pmap--live .pmap__node-li:nth-child(5) .pmap__node--project {
    animation-delay: .3s;
  }
  .pmap--hero.pmap--live .pmap__node-li:nth-child(6) .pmap__node--project {
    animation-delay: .36s;
  }
  .pmap--hero.pmap--live .pmap__node-li:nth-child(7) .pmap__node--project {
    animation-delay: .42s;
  }
  .pmap--hero.pmap--live .pmap__node-li:nth-child(8) .pmap__node--project {
    animation-delay: .48s;
  }

}

@keyframes pmap-card-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

}

.profile-hero,
.profile-section {
  border-bottom: 0;
  position: relative;
  overflow-x: clip;
  overflow-clip-margin: var(--size-5);
  clip-path: polygon(-100vmax -100vmax, calc(100% + 100vmax) -100vmax, calc(100% + 100vmax) calc(100% - 16px), 100% calc(100% - 16px),
    100% calc(100% + 16px), calc(100% + 100vmax) calc(100% + 16px), calc(100% + 100vmax) calc(100% + 100vmax), -100vmax calc(100% + 100vmax),
    -100vmax calc(100% + 16px), 0 calc(100% + 16px), 0 calc(100% - 16px), -100vmax calc(100% - 16px));
}

.profile-hero:after,
.profile-section:not(.profile-contact):after {
  content: "";
  background: linear-gradient(90deg, transparent, var(--color-accent), var(--color-accent2), var(--c-prompt), transparent);
  opacity: .55;
  height: 1px;
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--color-accent2) 45%, transparent));
  background-size: 50% 100%;
  width: 400%;
  position: absolute;
  bottom: 0;
  left: 0;
}

@media (prefers-reduced-motion:no-preference) {
  .profile-hero:after,
  .profile-section:not(.profile-contact):after {
    will-change: transform;
    animation: 8s linear infinite holo-edge;
  }
  .profile-hero.is-offscreen:after,
  .profile-section.is-offscreen:after,
  .pmap__node--hub.is-offscreen:after {
    animation-play-state: paused;
  }

}

.profile-section__heading {
  text-shadow: 0 0 16px color-mix(in oklch, var(--color-accent) 38%, transparent), 0 0 34px color-mix(in oklch, var(--color-accent2) 20%, transparent);
}

@media (prefers-reduced-motion:no-preference) {
  [data-reveal].is-revealed .profile-section__heading {
    animation: .46s steps(2,end) .25s both reveal-chroma;
  }

}

@keyframes reveal-chroma {
  0% {
    text-shadow: -6px 0 color-mix(in oklch, var(--color-danger) 88%, transparent), 6px 0 color-mix(in oklch, var(--color-accent2) 88%, transparent);
  }
  32% {
    text-shadow: 5px 0 color-mix(in oklch, var(--color-danger) 72%, transparent), -5px 0 color-mix(in oklch, var(--color-accent2) 72%, transparent);
  }
  60% {
    text-shadow: -3px 0 color-mix(in oklch, var(--violet-300) 68%, transparent), 3px 0 color-mix(in oklch, var(--color-accent) 68%, transparent);
  }
  to {
    text-shadow: 0 0 16px color-mix(in oklch, var(--color-accent) 38%, transparent), 0 0 34px color-mix(in oklch, var(--color-accent2) 20%, transparent);
  }

}

/* veritart public — the /mochi persona page (trio's mochi bundle): sky, persona layout, mx panels. */

.mochi {
  isolation: isolate;
  color: var(--color-text-1);
  position: relative;
}

.mochi__sky {
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(46% 36% at 90% 2%, var(--tint-accent), transparent 70%), radial-gradient(54% 46% at 4% 100%, var(--tint-violet), transparent 72%);
  position: fixed;
  inset: 0;
}

.mochi__shell {
  z-index: 1;
  padding-inline: var(--size-5);
  position: relative;
}

.scroll-progress {
  transform-origin: 0;
  background: var(--color-accent);
  height: 2px;
  z-index: var(--z-sticky);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.mochi-sec {
  padding-block: clamp(var(--size-7), 7vw, var(--size-9));
  border-top: 1px solid var(--color-border);
}

.mochi-sec__head {
  max-width: var(--layout-reading);
  margin-bottom: var(--size-6);
}

.mochi-sec__title {
  font-size: clamp(var(--fs-xl), 4.5vw, var(--fs-3xl));
  letter-spacing: -.03em;
  font-weight: 700;
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0 0 var(--size-3);
  color: var(--color-text-1);
}

.mochi-sec__lede {
  font-size: var(--fs-md);
  color: var(--color-text-2);
  line-height: var(--lh-body);
  text-wrap: pretty;
  max-width: var(--layout-reading);
  margin: 0;
}

.mochi-hero {
  align-items: center;
  gap: clamp(var(--size-6), 5vw, var(--size-9));
  padding-block: clamp(var(--size-8), 9vw, calc(var(--size-9) + var(--size-6)));
  grid-template-columns: 1.35fr .65fr;
  display: grid;
}

.mochi-hero__kind {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  letter-spacing: .02em;
  margin: 0 0 var(--size-4);
}

.mochi-hero__glyph {
  color: var(--color-accent-dim);
}

.icon {
  vertical-align: -.125em;
}

.mochi-hero__name {
  font-size: clamp(var(--fs-3xl), 8vw, var(--fs-4xl));
  letter-spacing: -.04em;
  margin: 0 0 var(--size-4);
  text-wrap: balance;
  color: var(--color-text-1);
  font-weight: 700;
  line-height: .98;
}

.mochi-hero__cursor {
  color: var(--color-accent);
  font-weight: 400;
}

.mochi-hero__tagline {
  font-size: clamp(var(--fs-lg), 2.6vw, var(--fs-2xl));
  color: var(--color-text-1);
  letter-spacing: -.01em;
  margin: 0 0 var(--size-3);
  text-wrap: balance;
  font-weight: 600;
}

.mochi-hero__selfdef {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  margin: 0 0 var(--size-5);
}

.mochi-hero__mode {
  align-items: center;
  gap: var(--size-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: var(--size-2) var(--size-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  background: var(--color-surface);
  margin: 0 0 var(--size-5);
  display: inline-flex;
}

.mochi-hero__mode-dot {
  background: var(--color-accent);
  width: 7px;
  height: 7px;
  box-shadow: 0 0 8px color-mix(in oklch, var(--color-accent) 70%, transparent);
  border-radius: 50%;
  flex: none;
}

.mochi-hero__mode-key {
  color: var(--color-text-3);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--fs-xs);
}

.mochi-hero__mode-val {
  color: var(--color-accent);
  transition: opacity var(--dur-base) var(--ease-out);
  font-weight: 600;
}

.mochi-words {
  gap: var(--size-2);
  margin: 0 0 var(--size-6);
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
  display: flex;
}

.mochi-words__chip {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--color-text-2);
  padding: var(--size-1) var(--size-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
}

.mochi-hero__cta {
  gap: var(--size-3);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.mochi-btn {
  align-items: center;
  gap: var(--size-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: var(--size-3) var(--size-5);
  border-radius: var(--radius-1);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-1);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  background: 0 0;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  position: relative;
}

.mochi-btn--primary {
  background: var(--color-accent);
  color: var(--color-base);
  border-color: var(--color-accent);
}

.mochi-btn--ghost {
  background: var(--color-surface);
}

.mochi-btn:hover {
  transform: translateY(-2px);
}

.mochi-btn--primary:hover {
  background: var(--color-accent-dim);
  border-color: var(--color-accent-dim);
}

.mochi-btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.mochi-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* the copy control's address face reads as the mailto: link it wraps (base `a`: accent; accent-dim + underline under
   the pointer) — the control itself is that link, so the face carries the link look */
.mochi-btn__face--default {
  color: var(--color-accent);
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}

.mochi-btn__face--default:hover {
  color: var(--color-accent-dim);
  text-decoration: underline;
}

.mochi-btn__face--copied {
  color: var(--color-accent);
  display: none;
}

.mochi-btn.is-copied .mochi-btn__face--default {
  display: none;
}

.mochi-btn.is-copied .mochi-btn__face--copied {
  display: inline;
}

@media (width<=640px) {
  .mochi-btn {
    min-height: 40px;
  }

}

.mochi-hero__avatar {
  place-items: center;
  display: grid;
}

.mochi-node {
  width: clamp(132px,17vw,196px);
}

.mochi-node__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.mochi-node__skewer {
  stroke: var(--color-border-strong);
}

.mochi-node__ring {
  fill: var(--color-surface);
  stroke: var(--color-accent-dim);
}

.mochi-node__dot,
.mochi-node__live {
  fill: var(--color-accent);
}

.mochi-node__pulse {
  stroke: var(--color-accent);
  opacity: 0;
}

.mochi-id {
  padding-block: var(--size-6);
  border-top: 1px solid var(--color-border);
}

.mochi-id__grid {
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 1px;
  margin: 0;
  display: grid;
  overflow: hidden;
}

.mochi-id__cell {
  background: var(--color-surface);
  padding: var(--size-4) var(--size-5);
}

.mochi-id__cell--wide {
  grid-column: span 2;
}

.mochi-id__k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-3);
  margin: 0 0 var(--size-1);
}

.mochi-id__v {
  font-size: var(--fs-md);
  color: var(--color-text-1);
  margin: 0;
  font-weight: 600;
}

.mochi-id__handle {
  color: var(--color-accent);
  text-decoration: none;
}

/* F4 — a finger's hit area (>= 44 px, the render gate's coarse-pointer TAP_MIN): the buttons grow to 44 px, the
   inline handle gains invisible vertical padding (an inline box's padding does not move its line). */
@media (pointer: coarse) {
  .mochi-btn {
    min-block-size: 44px;
  }
  .mochi-id__handle {
    padding-block: 15px;
  }
}

.mochi-id__handle:hover {
  text-underline-offset: 3px;
  text-decoration: underline;
}

.mx {
  position: relative;
}

.mx__radio {
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  position: absolute;
}

.mx__tabs {
  gap: var(--size-3);
  margin-bottom: var(--size-6);
  flex-wrap: wrap;
  display: flex;
}

.mx__tab {
  align-items: center;
  gap: var(--size-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: var(--size-2) var(--size-4);
  border-radius: var(--radius-1);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-2);
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
  display: inline-flex;
}

.mx__tab:hover {
  color: var(--color-text-1);
  border-color: var(--mode-accent);
  transform: translateY(-1px);
}

.mx__tab-glyph {
  color: var(--mode-accent);
}

#mx-technical:checked~.mx__tabs [for=mx-technical],
#mx-cute:checked~.mx__tabs [for=mx-cute],
#mx-roast:checked~.mx__tabs [for=mx-roast] {
  color: var(--color-base);
  background: var(--mode-accent);
  border-color: var(--mode-accent);
}

#mx-technical:checked~.mx__tabs [for=mx-technical] .mx__tab-glyph,
#mx-cute:checked~.mx__tabs [for=mx-cute] .mx__tab-glyph,
#mx-roast:checked~.mx__tabs [for=mx-roast] .mx__tab-glyph {
  color: var(--color-base);
}

#mx-technical:focus-visible~.mx__tabs [for=mx-technical],
#mx-cute:focus-visible~.mx__tabs [for=mx-cute],
#mx-roast:focus-visible~.mx__tabs [for=mx-roast] {
  outline: 2px solid var(--mode-accent);
  outline-offset: 3px;
}

.mx__panels {
  position: relative;
}

.mx__panel {
  display: none;
}

#mx-technical:checked~.mx__panels #panel-technical,
#mx-cute:checked~.mx__panels #panel-cute,
#mx-roast:checked~.mx__panels #panel-roast {
  display: block;
}

.mx__panel {
  border: 1px solid var(--mode-accent);
  border-radius: var(--radius-2);
  padding: clamp(var(--size-5), 4vw, var(--size-7));
  background: var(--color-surface);
}

.mx__panel-head {
  align-items: center;
  gap: var(--size-4);
  margin-bottom: var(--size-4);
  display: flex;
}

.mx__panel-glyph {
  border-radius: var(--radius-1);
  width: 44px;
  height: 44px;
  font-size: var(--fs-lg);
  color: var(--mode-accent);
  border: 1px solid var(--mode-accent);
  background: color-mix(in oklch, var(--mode-accent) 12%, transparent);
  flex: none;
  place-items: center;
  display: grid;
}

.mx__panel-id {
  min-width: 0;
}

.mx__panel-title {
  font-size: var(--fs-xl);
  color: var(--color-text-1);
  letter-spacing: -.01em;
  margin: 0;
}

.mx__panel-trigger {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--mode-accent);
  margin: var(--size-1) 0 0;
}


.mx__panel-blurb {
  color: var(--color-text-2);
  line-height: var(--lh-body);
  max-width: var(--layout-reading);
  margin: 0 0 var(--size-5);
}

.mx__samples {
  gap: var(--size-3);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.mx__sample {
  font-size: var(--fs-base);
  color: var(--color-text-1);
  padding: var(--size-3) var(--size-4) var(--size-3) var(--size-6);
  border-radius: var(--radius-1);
  background: var(--color-base);
  border: 1px solid var(--color-border);
  position: relative;
}

.mx__sample-mark {
  left: var(--size-3);
  color: var(--mode-accent);
  font-size: var(--fs-lg);
  position: absolute;
  top: 2px;
}





.mochi-voice__list {
  gap: var(--size-4);
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.mochi-voice__item {
  padding: var(--size-5);
  border-radius: var(--radius-2);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-top: 2px solid var(--voice-hue,var(--color-accent));
}

.mochi-voice__item--vi {
  --voice-hue: var(--pmap-hue-magenta);
}

.mochi-voice__item--en {
  --voice-hue: var(--color-accent);
}

.mochi-voice__text {
  font-size: var(--fs-lg);
  color: var(--color-text-1);
  line-height: var(--lh-snug);
  margin: 0 0 var(--size-3);
  text-wrap: pretty;
}

.mochi-voice__item--vi .mochi-voice__text {
  font-style: italic;
}

.mochi-voice__meta {
  align-items: baseline;
  gap: var(--size-3);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.mochi-voice__lang {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--voice-hue,var(--color-accent));
  flex: none;
}

.mochi-voice__gloss {
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  margin: 0;
}

.mochi-lore__grid {
  gap: var(--size-5);
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  display: grid;
}

.mochi-lore__beat {
  padding: var(--size-6);
  border-radius: var(--radius-2);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--dur-base) var(--ease-out);
}

.mochi-lore__beat:hover {
  border-color: var(--color-border-hover);
}

.mochi-lore__glyph {
  width: 40px;
  height: 40px;
  margin-bottom: var(--size-3);
  font-size: var(--fs-xl);
  border-radius: var(--radius-1);
  border: 1px solid var(--lore-hue);
  color: var(--lore-hue);
  background: color-mix(in oklch, var(--lore-hue) 10%, transparent);
  place-items: center;
  line-height: 1;
  display: inline-grid;
}

.mochi-lore__beat:nth-child(4n+1) {
  --lore-hue: var(--color-accent);
}

.mochi-lore__beat:nth-child(4n+2) {
  --lore-hue: var(--pmap-hue-magenta);
}

.mochi-lore__beat:nth-child(4n+3) {
  --lore-hue: var(--pmap-hue-violet);
}

.mochi-lore__beat:nth-child(4n+4) {
  --lore-hue: var(--pmap-hue-amber);
}

.mochi-lore__title {
  font-size: var(--fs-lg);
  color: var(--color-text-1);
  margin: 0 0 var(--size-2);
}

.mochi-lore__body {
  font-size: var(--fs-base);
  color: var(--color-text-2);
  line-height: var(--lh-body);
  text-wrap: pretty;
  margin: 0;
}

.mochi-term {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  max-width: 760px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.mochi-term__bar {
  align-items: center;
  gap: var(--size-2);
  padding: var(--size-3) var(--size-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
}

.mochi-term__dot {
  background: var(--color-border-strong);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.mochi-term__dot:first-child {
  background: var(--color-accent);
  box-shadow: 0 0 8px color-mix(in oklch, var(--color-accent) 70%, transparent);
}

.mochi-term__path {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-3);
  margin-left: var(--size-2);
}

.mochi-term__body {
  padding: var(--size-5);
  background: var(--color-base);
  gap: var(--size-3);
  margin: 0;
  display: grid;
}

.mochi-term__row {
  gap: var(--size-4);
  grid-template-columns: 116px 1fr;
  align-items: baseline;
  display: grid;
}

.mochi-term__k {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-accent);
}

.mochi-term__k:before {
  content: "› ";
  color: var(--color-accent-deep);
}

.mochi-term__v {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text-1);
  margin: 0;
}

.mochi-contact {
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.mochi-contact__glyph {
  font-size: var(--fs-2xl);
  color: var(--color-accent);
  margin: 0 0 var(--size-3);
}

.mochi-contact__glyph .icon {
  vertical-align: middle;
}

.mochi-contact__title {
  font-size: clamp(var(--fs-xl), 5vw, var(--fs-3xl));
  color: var(--color-text-1);
  letter-spacing: -.03em;
  margin: 0 0 var(--size-3);
  text-wrap: balance;
  overflow-wrap: break-word;
  font-weight: 700;
}

.mochi-contact__sub {
  color: var(--color-text-2);
  margin: 0 auto var(--size-6);
  max-width: 46ch;
}

.mochi-contact__links {
  gap: var(--size-3);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.mochi-contact__home {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-3);
  margin: var(--size-7) 0 0;
}

.mochi-contact__home-link {
  color: var(--color-accent);
  text-decoration: none;
}

.mochi-contact__home-link:hover {
  text-underline-offset: 3px;
  text-decoration: underline;
}

@media (width<=760px) {
  .mochi-hero {
    grid-template-columns: 1fr;
  }
  .mochi-hero__avatar {
    order: -1;
    justify-items: start;
  }
  .mochi-node {
    width: clamp(108px,34vw,150px);
  }
  .mochi-id__cell--wide {
    grid-column: span 1;
  }
  .mochi-term__row {
    gap: var(--size-1);
    grid-template-columns: 1fr;
  }

}

[data-reveal] {
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion:no-preference) {
  html.motion-armed [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(var(--size-4));
  }
  .mx__panel {
    animation: mochi-panel-in var(--dur-base) var(--ease-out);
  }
  @keyframes mochi-panel-in {
    0% {
      opacity: 0;
      transform: translateY(var(--size-2));
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .mochi-hero__cursor {
    animation: 1s steps(2,start) infinite mochi-blink;
  }
  @keyframes mochi-blink {
    to {
      opacity: 0;
    }
  }
  .mochi-node__pulse {
    animation: mochi-node-pulse 2.8s var(--ease-out) infinite;
    transform-box: fill-box;
    transform-origin: 50%;
  }
  .mochi-hero__cursor.is-offscreen,
  .mochi-node__pulse.is-offscreen {
    animation-play-state: paused;
  }
  @keyframes mochi-node-pulse {
    0% {
      opacity: .5;
      transform: scale(1);
    }
    70%,
    to {
      opacity: 0;
      transform: scale(1.28);
    }
  }

}

/* veritart public — CSP-safe replacements for trio's inline style= attributes: reveal delays, mode accents,
   spacing utilities. */

/* inline-style replacements (CSP-safe): trio SSR'd these as style=; the JS reads neither, only CSS does. */
[data-reveal-delay="0"] {
  --reveal-delay: calc(0 * var(--dur-fast));
}

[data-reveal-delay="1"] {
  --reveal-delay: calc(1 * var(--dur-fast));
}

[data-reveal-delay="2"] {
  --reveal-delay: calc(2 * var(--dur-fast));
}

[data-reveal-delay="3"] {
  --reveal-delay: calc(3 * var(--dur-fast));
}

[data-reveal-delay="4"] {
  --reveal-delay: calc(4 * var(--dur-fast));
}

[data-mode-accent="color-accent"] {
  --mode-accent: var(--color-accent);
}

[data-mode-accent="pmap-hue-amber"] {
  --mode-accent: var(--pmap-hue-amber);
}

[data-mode-accent="pmap-hue-magenta"] {
  --mode-accent: var(--pmap-hue-magenta);
}

/* two spacing utilities trio applied via inline style= (CSP-safe as classes) — the rest already exist in crucix */
.mb-4 {
  margin-bottom: var(--size-4);
}

.gap-2 {
  gap: var(--size-2);
}

/* veritart public — article charts: CSP-clean bar fills and the plinth engine chart SVG-<text> labels. */

/* C1 — CSP-clean bar fill: the data-driven width is an SVG <rect> (presentation attr), not an inline
   style. Reuses trio's .acb-track/.acb-label/.acb-val; only the fill + value tone colors are new. */
.acb-track>svg {
  display: block;
  width: 100%;
  height: 100%;
}

.acb-fs--danger {
  fill: var(--color-danger);
}

.acb-fs--accent {
  fill: var(--color-accent);
}

.acb-fs--muted {
  fill: color-mix(in oklch,var(--color-text-3) 50%,transparent);
}

.acb-val--danger {
  color: var(--color-danger);
}

.acb-val--accent {
  color: var(--color-accent);
}

.acb-val--muted {
  color: color-mix(in oklch,var(--color-text-3) 50%,transparent);
}

/* ── plinth engine charts: SVG-<text> overlay labels (CSP-clean; replaces trio's HTML style= overlay).
   Canonical intent lives with packages/engine/src/charts.ts; ships in each consuming site's bundle.
   F12a: the labels sit in the OUTER, viewBox-less svg (user unit = CSS px) at percent anchors, the
   geometry in a nested stretched viewBox svg, so every size below is a RENDERED px at any width. ── */
.article-body .article-chart__svg,
.article-body .article-chart__geom {
  overflow: visible;
}

.article-body .article-chart__plot,
.article-body .article-chart__plot--dist,
.article-body .article-chart__plot--collapse {
  aspect-ratio: 960/430;
}

/* F12a narrow plots (a ~290–490 px plot at a ≤ 560 px viewport): 12 px labels in the same plot box. The
   label svg leaves a 12 px gutter for the y-axis numbers; the axes plots (line, traffic) get a 7/5 box plus .75rem
   below for the stacked x-labels, the dist and collapse plots the taller 5/4 box (their
   geometry stretches, the labels do not); the long labels swap to their narrow form (charts.ts acl--narrow);
   alternate x-labels drop below the first row (1.35em: a full em box clear of it); the dist peak labels step 10 px toward the middle. */
.article-body .acl--narrow {
  display: none;
}

@media (width<=560px) {
  .article-body .acl--wide {
    display: none;
  }
  .article-body .acl--narrow {
    display: inline;
  }
  .article-body .article-chart__plot--axes {
    aspect-ratio: 7/5;
    margin-bottom: .75rem;
  }
  .article-body .article-chart__plot--axes .article-chart__svg {
    inset: 0 0 0 12px;
    width: auto;
  }
  .article-body .article-chart__plot--dist,
  .article-body .article-chart__plot--collapse {
    aspect-ratio: 5/4;
  }
  .article-body .acl-x--alt {
    transform: translateY(1.35em);
  }
  .article-body .acl-d--human {
    transform: translateX(10px);
  }
  .article-body .acl-d--machine {
    transform: translateX(-10px);
  }

}

.article-body .article-chart__svg text {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
}

/* Label sizes are rendered CSS px (F12a): the in-viewBox sizes they replace × 0.912 (viewBox 960 →
   ~876 px desktop plot), raised to the 12 px floor — the desktop look is kept, and 360 no longer reads
   ~4 px. */
.article-body .acl-y,
.article-body .acl-x {
  fill: var(--color-text-3);
}

.article-body .acl-y {
  font-size: 12px;
  text-anchor: end;
  dominant-baseline: central;
}

.article-body .acl-x {
  font-size: 12px;
}

.article-body .acl-x__sub {
  fill: var(--color-text-3);
  font-size: 12px;
}

.article-body .acl-val {
  fill: var(--color-text-1);
  font-weight: 600;
  font-size: 13.7px;
}

.article-body .acl-ref {
  fill: var(--color-text-3);
  font-size: 12px;
}

.article-body .acl-peak {
  fill: var(--color-accent);
  font-weight: 600;
  font-size: 12.8px;
}

.article-body .acl-end {
  fill: var(--color-danger);
  font-weight: 600;
  font-size: 12px;
  dominant-baseline: central;
}

.article-body .acl-crash {
  fill: var(--color-text-2);
  font-size: 12px;
}

.article-body .acl-crash__b {
  fill: var(--color-text-1);
  font-weight: 700;
}

.article-body .acl-crash__sub {
  fill: var(--color-text-3);
}

.article-body .acl-dot--peak {
  fill: var(--color-accent);
  stroke: var(--color-base);
  stroke-width: 1.8;
}

.article-body .acl-dot--end {
  fill: var(--color-danger);
}

.article-body .acl-d {
  font-size: max(12px, calc(var(--fs-xs) * .912));
}

.article-body .acl-d--human {
  fill: var(--color-accent);
}

.article-body .acl-d--machine {
  fill: var(--color-danger);
}

.article-body .acl-d--overlap {
  fill: var(--color-text-1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: 12px;
  dominant-baseline: central;
}

.article-body .acl-d-note {
  fill: var(--color-text-3);
  font-size: 12px;
}

.article-body .acl-c {
  font-size: max(12px, calc(var(--fs-xs) * .912));
  fill: var(--color-text-2);
}

.article-body .acl-c__em {
  fill: var(--color-text-3);
  font-size: 12px;
}

.article-body .acl-c--end {
  fill: var(--color-danger);
}

.article-body .acl-c-note {
  fill: var(--color-text-3);
  font-size: 12px;
}

/* veritart public — header/layout utilities (w-full, ml-auto), comment form title + honeypot, the noscript notice. */

/* header/layout utilities trio expressed as inline styles (CSP moves them to classes) — the missing
   `.w-full` is why `.public-shell` (a flex item of the flex `.public-header`) collapsed to content
   width, so `row-between` could not spread the logo/nav/search across the bar. */
.w-full {
  width: 100%;
}

.ml-auto {
  margin-left: auto;
}

/* COMMENTS — the honeypot field hides via a CLASS (the strict CSP forbids trio's inline style=), and
   the form title sits in veritart's display system. These two rules were missing when veritart wired
   comments; the rest of the comment styling was already present. */
.comment-form__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-text-1);
  margin: 0;
  font-weight: 600;
}

.comment-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Instrument form CSS moved to sites/colorgears.com/public/styles/colorgears-instruments.css —
   colorgears is the only site mounting an instrument. */
/* The <noscript> notice (templates/document.ts) — a class, not an inline style="": the CSP
   (default-src 'self', no 'unsafe-inline') refuses every inline style, so the notice rendered
   unstyled for exactly the no-JS visitors it addresses (R3-T23). */
.nojs-notice {
  padding: 1rem;
  text-align: center;
  color: var(--color-notice-ink);
  font-size: 13px;
}