* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts/EB-Garamond/EBGaramond.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts/EB-Garamond/EBGaramond-Italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

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

:root {
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', sans-serif;
  --reading: 'EB Garamond', 'Source Serif 4', Georgia, serif;
  --home-title-size: 1.65rem;
  --home-title-weight: 700;
  --home-title-line: 1.15;
  --home-title-letter: 0;
  --home-title-variation: normal;
  --home-subtitle-size: 1.2rem;
  --home-subtitle-line: 1.35;
  --home-subtitle-weight: 600;
  --home-subtitle-style: normal;
  --home-subtitle-color: var(--ink-light);
  --home-label-family: var(--mono);
  --home-label-size: 1.125rem;
  --home-label-weight: 700;
  --home-label-line: 1.3;
  --home-label-spacing: 0.08em;
  --reading-size: 1.125rem;
  --reading-line: 1.65;
  --reading-list-line: 1.55;
  --reading-work-size: 1.04rem;
  --reading-work-line: 1.45;
}

:root[data-font="current-eb"] {
  --serif: 'Source Serif 4', Georgia, serif;
  --reading: 'EB Garamond', 'Source Serif 4', Georgia, serif;
}

:root[data-font="source-serif"] {
  --serif: 'Source Serif 4', Georgia, serif;
  --reading: 'Source Serif 4', Georgia, serif;
  --home-title-size: 1.72rem;
  --home-subtitle-size: 1.16rem;
  --home-subtitle-line: 1.34;
  --reading-size: 1.0625rem;
  --reading-line: 1.68;
  --reading-list-line: 1.58;
  --reading-work-size: 1rem;
  --reading-work-line: 1.5;
}

:root[data-font="literata"] {
  --serif: 'Literata', Georgia, serif;
  --reading: 'Literata', Georgia, serif;
  --home-title-size: 1.72rem;
  --home-subtitle-size: 1.15rem;
  --home-subtitle-line: 1.34;
  --reading-size: 1.0625rem;
  --reading-line: 1.66;
  --reading-list-line: 1.56;
  --reading-work-size: 1rem;
  --reading-work-line: 1.5;
}

:root[data-font="newsreader"] {
  --serif: 'Newsreader', Georgia, serif;
  --reading: 'Newsreader', Georgia, serif;
  --home-title-size: 1.78rem;
  --home-subtitle-size: 1.18rem;
  --home-subtitle-line: 1.3;
  --reading-size: 1.095rem;
  --reading-line: 1.6;
  --reading-list-line: 1.5;
  --reading-work-size: 1.02rem;
  --reading-work-line: 1.45;
}

:root[data-font="spectral"] {
  --serif: 'Spectral', Georgia, serif;
  --reading: 'Spectral', Georgia, serif;
  --home-title-size: 1.72rem;
  --home-subtitle-size: 1.15rem;
  --home-subtitle-line: 1.33;
  --reading-size: 1.07rem;
  --reading-line: 1.64;
  --reading-list-line: 1.54;
  --reading-work-size: 1rem;
  --reading-work-line: 1.48;
}

:root[data-font="ibm-plex-serif"] {
  --serif: 'IBM Plex Serif', Georgia, serif;
  --reading: 'IBM Plex Serif', Georgia, serif;
  --home-title-size: 1.7rem;
  --home-subtitle-size: 1.13rem;
  --home-subtitle-line: 1.34;
  --reading-size: 1.045rem;
  --reading-line: 1.66;
  --reading-list-line: 1.56;
  --reading-work-size: 0.99rem;
  --reading-work-line: 1.5;
}

:root[data-font="charter-system"] {
  --serif: Charter, 'Bitstream Charter', 'Iowan Old Style', Georgia, serif;
  --reading: Charter, 'Bitstream Charter', 'Iowan Old Style', Georgia, serif;
  --home-title-size: 1.72rem;
  --home-subtitle-size: 1.15rem;
  --home-subtitle-line: 1.34;
  --reading-size: 1.06rem;
  --reading-line: 1.66;
  --reading-list-line: 1.56;
  --reading-work-size: 1rem;
  --reading-work-line: 1.5;
}

:root[data-font="lora"] {
  --serif: 'Lora', Georgia, serif;
  --reading: 'Lora', Georgia, serif;
  --home-title-size: 1.72rem;
  --home-subtitle-size: 1.13rem;
  --home-subtitle-line: 1.34;
  --reading-size: 1.04rem;
  --reading-line: 1.68;
  --reading-list-line: 1.56;
  --reading-work-size: 0.99rem;
  --reading-work-line: 1.5;
}

:root[data-font="crimson-pro"] {
  --serif: 'Crimson Pro', Georgia, serif;
  --reading: 'Crimson Pro', Georgia, serif;
  --home-title-size: 1.82rem;
  --home-subtitle-size: 1.2rem;
  --home-subtitle-line: 1.28;
  --reading-size: 1.14rem;
  --reading-line: 1.58;
  --reading-list-line: 1.48;
  --reading-work-size: 1.06rem;
  --reading-work-line: 1.44;
}

:root[data-font="alegreya"] {
  --serif: 'Alegreya', Georgia, serif;
  --reading: 'Alegreya', Georgia, serif;
  --home-title-size: 1.78rem;
  --home-subtitle-size: 1.18rem;
  --home-subtitle-line: 1.3;
  --reading-size: 1.095rem;
  --reading-line: 1.6;
  --reading-list-line: 1.5;
  --reading-work-size: 1.02rem;
  --reading-work-line: 1.45;
}

:root[data-font="source-atkinson"] {
  --serif: 'Source Serif 4', Georgia, serif;
  --reading: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --home-title-size: 1.74rem;
  --home-subtitle-size: 1.08rem;
  --home-subtitle-line: 1.38;
  --home-subtitle-weight: 500;
  --reading-size: 1rem;
  --reading-line: 1.7;
  --reading-list-line: 1.6;
  --reading-work-size: 0.96rem;
  --reading-work-line: 1.52;
}

:root[data-font="plex-sans"] {
  --serif: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --reading: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --home-title-size: 1.62rem;
  --home-title-line: 1.1;
  --home-subtitle-size: 1.08rem;
  --home-subtitle-line: 1.38;
  --home-subtitle-weight: 500;
  --reading-size: 1rem;
  --reading-line: 1.7;
  --reading-list-line: 1.6;
  --reading-work-size: 0.96rem;
  --reading-work-line: 1.52;
}

:root[data-font="bricolage-eb"] {
  --serif: 'Bricolage Grotesque', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --reading: 'IBM Plex Serif', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --home-title-size: 2.4rem;
  --home-title-weight: 600;
  --home-title-line: 1.05;
  --home-title-letter: -0.02em;
  --home-title-variation: "opsz" 96;
  --home-subtitle-size: 1.12rem;
  --home-subtitle-line: 1.42;
  --home-subtitle-weight: 500;
  --home-subtitle-style: normal;
  --home-subtitle-color: var(--brico-subtitle, #34312d);
  --home-label-size: 0.78rem;
  --home-label-weight: 600;
  --home-label-line: 1.25;
  --home-label-spacing: 0.14em;
  --reading-size: 1rem;
  --reading-line: 1.7;
  --reading-list-line: 1.6;
  --reading-work-size: 0.98rem;
  --reading-work-line: 1.55;
}

:root[data-font="plex-pair"] {
  --serif: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --reading: 'IBM Plex Serif', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --home-title-size: clamp(2.15rem, 5vw, 2.6rem);
  --home-title-weight: 600;
  --home-title-line: 1.05;
  --home-title-letter: -0.02em;
  --home-subtitle-size: clamp(1.2rem, 2vw, 1.4rem);
  --home-subtitle-line: 1.3;
  --home-subtitle-weight: 300;
  --home-subtitle-style: normal;
  --home-label-size: 0.78rem;
  --home-label-weight: 600;
  --home-label-line: 1.25;
  --home-label-spacing: 0.14em;
  --reading-size: 1.0625rem;
  --reading-line: 1.6;
  --reading-list-line: 1.55;
  --reading-work-size: 1rem;
  --reading-work-line: 1.48;
}

body {
  font-family: var(--serif);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "onum" 1, "ss02" 1;
}

/* EB Garamond reading face — scoped to About (home) prose and Shelf voice cards.
   Homepage gets the full optical-size + leading + ligature treatment;
   shelf voice keeps cell-tuned sizing but inherits the face and OT features. */
.page-home .home-section p {
  font-family: var(--reading);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-variant-ligatures: common-ligatures contextual;
}

.page-shelf .cell-note,
.page-shelf .cell-quote,
.page-shelf .cell-blurb {
  font-family: var(--reading);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-variant-ligatures: common-ligatures contextual;
}

a { color: inherit; text-decoration: none; }
a[href^="mailto"] { color: var(--accent); }
a[href^="mailto"]:hover { border-bottom: 1px solid var(--accent); }
::selection { background: var(--accent); color: var(--bg); }

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

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--accent-text);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.85rem;
  transform: translateY(-150%);
  transition: transform 120ms ease;
}
.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: 2px;
}
a:focus-visible {
  outline-offset: 3px;
}

body.menu-open {
  overflow: hidden;
}

img { display: block; }

/* ── site nav ── */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2.5rem;
  border-bottom: 1px solid var(--nav-border);
}

.nav-name {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav-links {
  display: flex;
  gap: 1.25rem;
}

.nav-links a {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-links a.active {
  color: var(--ink);
}

.nav-links {
  gap: 0.45rem;
}

.nav-links .dead {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink-light) 40%, transparent);
  cursor: default;
}

.nav-links > *:not(:last-child)::after {
  content: " / ";
  display: inline-block; /* breaks parent's text-decoration propagation onto the slash */
  margin-left: 0.45rem;
  color: color-mix(in srgb, var(--ink-light) 55%, transparent);
  font-weight: 600;
  letter-spacing: 0.08em;
  pointer-events: none;
  text-decoration: none;
}

/* ── dimmer toggle (TE-style — see also block ~line 548 for full chiclet redesign) ── */

.page {
  max-width: 520px;
  margin: 0;
  padding: 3rem 2.5rem 4rem;
}

/* ── homepage instrument ── */

/* Site accent: Flexoki cyan-600 (Kepano / stephango.com palette).
   One accent tone shared site-wide — mailto, shelf-links hover,
   404 link hover. Warm paper bg + cool cyan accent is the
   signature Flexoki contrast. */
.page-home {
  --home-accent: var(--accent);
}

[data-theme="dark"] .page-home {
  --home-accent: var(--accent);
}

:root[data-font="bricolage-eb"] .page-home {
  --home-accent: var(--brico-link, #2D5184);
}

:root[data-theme="dark"][data-font="bricolage-eb"] .page-home {
  --home-accent: var(--brico-link, #8AA8D8);
}

@media (prefers-color-scheme: dark) {
  :root[data-font="bricolage-eb"]:not([data-theme="light"]) .page-home {
    --home-accent: var(--brico-link, #8AA8D8);
  }
}

.page-home a[href^="mailto"] {
  color: var(--home-accent);
}

.page-home a[href^="mailto"]:hover {
  border-bottom-color: var(--home-accent);
}

/* all body text – uniform */
p {
  margin-bottom: 0.65rem;
}

/* ── stream ──────────────────────────────────── */

.shelf-subtitle {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
  padding: 0.75rem 2rem 0;
}

/* stream list — base declaration, archive-instrument overrides below */
.stream-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── shelf page ────────────────────────── */

.page-shelf {
  max-width: none;
  padding: 0;
  overflow: hidden;
  height: calc(100vh - 46px);
  display: flex;
  flex-direction: column;
}

/* ── responsive ── */

@media (max-width: 600px) {
  .page { padding: 3.5rem 1.25rem 2.5rem; }
}

@media (max-width: 1400px) {
  .shelf-subtitle {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (max-width: 600px) {
  .shelf-subtitle {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ── library layout ────────────────────────── */

.page-shelf .library {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 2.5rem;
  padding: 1rem 1.25rem 3rem;
  max-width: 1600px;
  margin: 0 auto;
}

.page-shelf .shelf-subtitle {
  margin: 0 0 2.5rem 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* Hamburger toggle — mobile only */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 95;
  background: var(--bg);
  border: 1px solid var(--rule);
  color: var(--ink-light);
  font-size: 1.1rem;
  width: 44px;
  height: 44px;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
}

/* Topic index sidebar */
.topic-index {
  position: sticky;
  top: 5rem;
  align-self: start;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  scrollbar-width: none;
}

.topic-index::-webkit-scrollbar { display: none; }

.topic-index a {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-light);
  padding: 0.15rem 0;
  transition: color 120ms ease;
}

.topic-index a:hover {
  color: var(--ink);
}

.topic-index a.active {
  color: var(--accent-text);
  font-weight: 600;
}

/* Central scrolling grid area */
.grid-scroll {
  min-width: 0;
}

.topic-section {
  margin-bottom: 3.5rem;
  scroll-margin-top: 5rem;
}

.section-label {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  border-bottom: 1px solid var(--rule-light);
  padding: 0.2rem 0 0.4rem;
  margin-bottom: 1.25rem;
}

.section-label-name {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}

.section-label-count {
  font-family: var(--serif);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-faint);
}

/* Tablet/mobile overlay pattern lives at the end of this file so it
   wins source-order against the archive-instrument library grid rule. */

/* ── cat switch overlay ──
   Video frame that appears under the dimmer, plays the cat clip,
   and fades out after the theme flips. Manual clicks use the video-ended
   release; loop mode schedules its fade from the music clock so the cat
   follows the note attack and reverb tail.
   position: fixed specifically avoids the .page-shelf overflow:hidden clip trap. */

.cat-switch-frame {
  position: fixed;
  top: 56px;
  right: 2.5rem;
  width: 160px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cat-fade-ms, 150ms) ease;
}

.cat-switch-frame.is-playing {
  opacity: 1;
}

/* Source link wraps the video — only clickable while the cat is on screen.
   Inherits pointer-events from frame when hidden; activates with .is-playing. */
.cat-switch-link {
  display: block;
  cursor: pointer;
  pointer-events: none;
  transition: filter 160ms ease;
}

.cat-switch-frame.is-playing .cat-switch-link {
  pointer-events: auto;
}

.cat-switch-link:hover {
  filter: brightness(1.08);
}

.cat-switch-video {
  display: block;
  width: 100%;
  height: auto;
}

.dimmer[disabled] {
  cursor: wait;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .cat-switch-frame { display: none; }
}

@media (max-width: 640px) {
  .cat-switch-frame {
    width: 120px;
    top: 52px;
    right: 1rem;
  }
}

/* ── archive instrument redesign ────────────────────────── */

:root {
  /* Flexoki light — kepano.dev / stephango.com palette */
  --bg: #FFFCF0;          /* flexoki-paper */
  --ink: #100F0F;         /* flexoki-black */
  --ink-light: #575653;   /* flexoki-700 */
  --ink-faint: #6F6E69;   /* flexoki-600 */
  --ink-muted: #9F9D96;   /* flexoki-400 */
  --rule: #1f1f1f;        /* structural — kept high-contrast */
  --rule-light: #CECDC3;  /* flexoki-200 */
  --accent: #24837B;      /* flexoki-cyan-600 — Kepano action */
  --accent-text: #24837B;
  --section-label: #6F6E69; /* flexoki-base-600 */
  --label-quiet: color-mix(in srgb, var(--section-label) 68%, var(--ink-faint));
  --accent-rest: color-mix(in srgb, var(--accent) 58%, var(--ink-muted));
  --surface-soft: #F2F0E5; /* flexoki-base-50 */
  --nav-border: #DAD8CE;  /* flexoki-150 */
  --trail-ink: #9F9D96;   /* flexoki-base-400 */
  --trail-opacity: 0.46;
  --mono: "IBM Plex Sans", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  /* Flexoki dark */
  --bg: #100F0F;          /* flexoki-black */
  --ink: #CECDC3;         /* flexoki-200 */
  --ink-light: #B7B5AC;   /* flexoki-300 */
  --ink-faint: #878580;   /* flexoki-500 */
  --ink-muted: #575653;   /* flexoki-700 */
  --rule: #d5d1c7;        /* structural — kept high-contrast */
  --rule-light: #343331;  /* flexoki-850 */
  --accent: #3AA99F;      /* flexoki-cyan-400 */
  --accent-text: #3AA99F;
  --section-label: #9F9D96; /* flexoki-base-400 */
  --label-quiet: color-mix(in srgb, var(--section-label) 66%, var(--ink-faint));
  --accent-rest: color-mix(in srgb, var(--accent) 54%, var(--ink-muted));
  --surface-soft: #1C1B1A; /* flexoki-base-950 */
  --nav-border: #343331;  /* flexoki-850 */
  --trail-ink: #878580;   /* flexoki-base-500 */
  --trail-opacity: 0.56;
}

/* Auto-dark for OS-level dark preference, unless user explicitly chose light.
   Mirrors the variable redefinitions only — palette covers ~80% of dark mode.
   The remaining `[data-theme="dark"] .selector` rules (kaomoji eye swap, dimmer
   states, image filter inverts) still require an explicit toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #100F0F;
    --ink: #CECDC3;
    --ink-light: #B7B5AC;
    --ink-faint: #878580;
    --ink-muted: #575653;
    --rule: #d5d1c7;
    --rule-light: #343331;
    --accent: #3AA99F;
    --accent-text: #3AA99F;
    --section-label: #9F9D96;
    --label-quiet: color-mix(in srgb, var(--section-label) 66%, var(--ink-faint));
    --accent-rest: color-mix(in srgb, var(--accent) 54%, var(--ink-muted));
    --surface-soft: #1C1B1A;
    --nav-border: #343331;
    --trail-ink: #878580;
    --trail-opacity: 0.56;
  }
}

/* Flexoki palette drafts. Activate locally with ?palette=soft-cyan, moss,
   blue, or plum. These use Flexoki base ramps instead of pure paper/black
   when Lee wants the site to feel less stark. */
:root[data-palette="soft-cyan"] {
  --bg: #F2F0E5;          /* base-50 */
  --ink: #1C1B1A;         /* base-950 */
  --ink-light: #575653;
  --ink-faint: #6F6E69;
  --ink-muted: #878580;
  --rule: #878580;
  --rule-light: #DAD8CE;
  --accent: #24837B;      /* cyan-600 */
  --accent-text: #24837B;
  --nav-border: #DAD8CE;
  --trail-ink: #9F9D96;
  --trail-opacity: 0.5;
}

:root[data-theme="dark"][data-palette="soft-cyan"] {
  --bg: #1C1B1A;          /* base-950 */
  --ink: #DAD8CE;         /* base-150 */
  --ink-light: #CECDC3;
  --ink-faint: #9F9D96;
  --ink-muted: #6F6E69;
  --rule: #B7B5AC;
  --rule-light: #403E3C;
  --accent: #3AA99F;      /* cyan-400 */
  --accent-text: #3AA99F;
  --nav-border: #403E3C;
  --trail-ink: #878580;
  --trail-opacity: 0.62;
}

:root[data-palette="moss"] {
  --bg: #F2F0E5;
  --ink: #1A1E0C;         /* green-950 */
  --ink-light: #3D4C07;   /* green-800 */
  --ink-faint: #536907;   /* green-700 */
  --ink-muted: #878580;
  --rule: #66800B;
  --rule-light: #CDD597;
  --accent: #66800B;      /* green-600 */
  --accent-text: #66800B;
  --section-label: #24837B; /* cyan-600: keeps labels distinct from action */
  --surface-soft: #EDEECF;
  --nav-border: #CDD597;
  --trail-ink: #A0AF54;   /* green-400 */
  --trail-opacity: 0.34;
}

:root[data-theme="dark"][data-palette="moss"] {
  --bg: #1A1E0C;          /* green-950 */
  --ink: #EDEECF;         /* green-50 */
  --ink-light: #CDD597;
  --ink-faint: #A0AF54;
  --ink-muted: #536907;
  --rule: #A0AF54;
  --rule-light: #313D07;
  --accent: #879A39;      /* green-400 */
  --accent-text: #879A39;
  --section-label: #3AA99F; /* cyan-400 */
  --surface-soft: #252D09;
  --nav-border: #313D07;
  --trail-ink: #A0AF54;
  --trail-opacity: 0.5;
}

:root[data-palette="blue"] {
  --bg: #E1ECEB;          /* blue-50 */
  --ink: #101A24;         /* blue-950 */
  --ink-light: #163B66;
  --ink-faint: #1A4F8C;
  --ink-muted: #878580;
  --rule: #205EA6;
  --rule-light: #ABCFE2;
  --accent: #205EA6;      /* blue-600 */
  --accent-text: #205EA6;
  --nav-border: #ABCFE2;
  --trail-ink: #66A0C8;   /* blue-300 */
  --trail-opacity: 0.38;
}

:root[data-theme="dark"][data-palette="blue"] {
  --bg: #101A24;          /* blue-950 */
  --ink: #E1ECEB;         /* blue-50 */
  --ink-light: #C6DDE8;
  --ink-faint: #92BFDB;
  --ink-muted: #4385BE;
  --rule: #92BFDB;
  --rule-light: #133051;
  --accent: #4385BE;      /* blue-400 */
  --accent-text: #4385BE;
  --nav-border: #133051;
  --trail-ink: #66A0C8;
  --trail-opacity: 0.5;
}

:root[data-palette="plum"] {
  --bg: #F0EAEC;          /* purple-50 */
  --ink: #1A1623;         /* purple-950 */
  --ink-light: #3C2A62;
  --ink-faint: #4F3685;
  --ink-muted: #878580;
  --rule: #5E409D;
  --rule-light: #D3CAE6;
  --accent: #A02F6F;      /* magenta-600 */
  --accent-text: #A02F6F;
  --nav-border: #D3CAE6;
  --trail-ink: #CE5D97;   /* magenta-400 */
  --trail-opacity: 0.32;
}

:root[data-theme="dark"][data-palette="plum"] {
  --bg: #1A1623;          /* purple-950 */
  --ink: #F0EAEC;         /* purple-50 */
  --ink-light: #D3CAE6;
  --ink-faint: #A699D0;
  --ink-muted: #735EB5;
  --rule: #A699D0;
  --rule-light: #31234E;
  --accent: #CE5D97;      /* magenta-400 */
  --accent-text: #CE5D97;
  --nav-border: #31234E;
  --trail-ink: #CE5D97;
  --trail-opacity: 0.48;
}

/* Taste-test palettes for the next color pass. These avoid the green/cyan
   pairing Lee flagged on dark mode while staying inside Flexoki roles. */
:root[data-palette="quiet-ink"] {
  --bg: #FFFCF0;          /* paper */
  --ink: #100F0F;         /* black */
  --ink-light: #575653;   /* base-700 */
  --ink-faint: #6F6E69;   /* base-600 */
  --ink-muted: #878580;   /* base-500 */
  --rule: #575653;
  --rule-light: #DAD8CE;
  --accent: #575653;      /* base-700 */
  --accent-text: #575653;
  --section-label: #6F6E69;
  --surface-soft: #F2F0E5;
  --nav-border: #DAD8CE;
  --trail-ink: #9F9D96;
  --trail-opacity: 0.5;
}

:root[data-theme="dark"][data-palette="quiet-ink"] {
  --bg: #100F0F;
  --ink: #CECDC3;
  --ink-light: #B7B5AC;
  --ink-faint: #9F9D96;
  --ink-muted: #878580;
  --rule: #B7B5AC;
  --rule-light: #343331;
  --accent: #B7B5AC;
  --accent-text: #B7B5AC;
  --section-label: #9F9D96;
  --surface-soft: #1C1B1A;
  --nav-border: #343331;
  --trail-ink: #878580;
  --trail-opacity: 0.62;
}

:root[data-palette="oxide"] {
  --bg: #FFFCF0;
  --ink: #100F0F;
  --ink-light: #575653;
  --ink-faint: #6F6E69;
  --ink-muted: #878580;
  --rule: #8E6B01;        /* yellow-700 */
  --rule-light: #E6E4D9;
  --accent: #BC5215;      /* orange-600 */
  --accent-text: #BC5215;
  --section-label: #8E6B01; /* yellow-700 */
  --surface-soft: #FAEEC6;
  --nav-border: #E6E4D9;
  --trail-ink: #D0A215;   /* yellow-400 */
  --trail-opacity: 0.36;
}

:root[data-theme="dark"][data-palette="oxide"] {
  --bg: #100F0F;
  --ink: #CECDC3;
  --ink-light: #B7B5AC;
  --ink-faint: #9F9D96;
  --ink-muted: #6F6E69;
  --rule: #D0A215;
  --rule-light: #343331;
  --accent: #DA702C;      /* orange-400 */
  --accent-text: #DA702C;
  --section-label: color-mix(in srgb, #D0A215 42%, var(--ink-light));
  --surface-soft: #1C1B1A;
  --nav-border: #343331;
  --trail-ink: #BE9207;   /* yellow-500 */
  --trail-opacity: 0.58;
}

:root[data-palette="clay"] {
  --bg: #FFFCF0;
  --ink: #100F0F;
  --ink-light: #575653;
  --ink-faint: #6F6E69;
  --ink-muted: #878580;
  --rule: #9D4310;        /* orange-700 */
  --rule-light: #E6E4D9;
  --accent: #AF3029;      /* red-600 */
  --accent-text: #AF3029;
  --section-label: #9D4310;
  --surface-soft: #FFE7CE;
  --nav-border: #E6E4D9;
  --trail-ink: #EC8B49;   /* orange-300 */
  --trail-opacity: 0.32;
}

:root[data-theme="dark"][data-palette="clay"] {
  --bg: #100F0F;
  --ink: #CECDC3;
  --ink-light: #B7B5AC;
  --ink-faint: #9F9D96;
  --ink-muted: #6F6E69;
  --rule: #D14D41;
  --rule-light: #343331;
  --accent: #D14D41;      /* red-400 */
  --accent-text: #D14D41;
  --section-label: color-mix(in srgb, #EC8B49 36%, var(--ink-light));
  --surface-soft: #1C1B1A;
  --nav-border: #343331;
  --trail-ink: #DA702C;   /* orange-400 */
  --trail-opacity: 0.5;
}

:root[data-palette="loam"] {
  --bg: #FFFCF0;
  --ink: #100F0F;
  --ink-light: #575653;
  --ink-faint: #6F6E69;
  --ink-muted: #878580;
  --rule: #664D01;        /* yellow-800 */
  --rule-light: #E6E4D9;
  --accent: #BC5215;      /* orange-600 */
  --accent-text: #BC5215;
  --section-label: #664D01;
  --surface-soft: #FAEEC6;
  --nav-border: #E6E4D9;
  --trail-ink: #BE9207;   /* yellow-500 */
  --trail-opacity: 0.34;
}

:root[data-theme="dark"][data-palette="loam"] {
  --bg: #100F0F;
  --ink: #CECDC3;
  --ink-light: #B7B5AC;
  --ink-faint: #9F9D96;
  --ink-muted: #6F6E69;
  --rule: #BE9207;
  --rule-light: #343331;
  --accent: #EC8B49;      /* orange-300 */
  --accent-text: #EC8B49;
  --section-label: color-mix(in srgb, #D0A215 34%, var(--ink-light));
  --surface-soft: #1C1B1A;
  --nav-border: #343331;
  --trail-ink: #AD8301;   /* yellow-600 */
  --trail-opacity: 0.54;
}

:root[data-palette="lichen"] {
  --bg: #FFFCF0;
  --ink: #100F0F;
  --ink-light: #575653;
  --ink-faint: #6F6E69;
  --ink-muted: #878580;
  --rule: #536907;        /* green-700 */
  --rule-light: #E6E4D9;
  --accent: #BC5215;      /* orange-600 */
  --accent-text: #BC5215;
  --section-label: #536907;
  --surface-soft: #EDEECF;
  --nav-border: #E6E4D9;
  --trail-ink: #A0AF54;   /* green-300 */
  --trail-opacity: 0.3;
}

:root[data-theme="dark"][data-palette="lichen"] {
  --bg: #100F0F;
  --ink: #CECDC3;
  --ink-light: #B7B5AC;
  --ink-faint: #9F9D96;
  --ink-muted: #6F6E69;
  --rule: #879A39;
  --rule-light: #343331;
  --accent: #EC8B49;      /* orange-300 */
  --accent-text: #EC8B49;
  --section-label: color-mix(in srgb, #A0AF54 24%, var(--ink-light));
  --surface-soft: #1C1B1A;
  --nav-border: #343331;
  --trail-ink: #879A39;   /* green-400 */
  --trail-opacity: 0.46;
}

:root[data-palette="basalt"] {
  --bg: #FFFCF0;
  --ink: #100F0F;
  --ink-light: #575653;
  --ink-faint: #6F6E69;
  --ink-muted: #878580;
  --rule: #6F6E69;
  --rule-light: #DAD8CE;
  --accent: #BC5215;      /* orange-600 */
  --accent-text: #BC5215;
  --section-label: #6F6E69;
  --surface-soft: #F2F0E5;
  --nav-border: #DAD8CE;
  --trail-ink: #878580;
  --trail-opacity: 0.44;
}

:root[data-theme="dark"][data-palette="basalt"] {
  --bg: #100F0F;
  --ink: #CECDC3;
  --ink-light: #B7B5AC;
  --ink-faint: #9F9D96;
  --ink-muted: #6F6E69;
  --rule: #9F9D96;
  --rule-light: #343331;
  --accent: #DA702C;      /* orange-400 */
  --accent-text: #DA702C;
  --section-label: #9F9D96;
  --surface-soft: #1C1B1A;
  --nav-border: #343331;
  --trail-ink: #6F6E69;
  --trail-opacity: 0.6;
}

:root[data-palette="sage"] {
  --bg: #FFFCF0;
  --ink: #100F0F;
  --ink-light: #575653;
  --ink-faint: #6F6E69;
  --ink-muted: #878580;
  --rule: #6F6E69;
  --rule-light: #DAD8CE;
  --accent: #205EA6;      /* blue-600 */
  --accent-text: #205EA6;
  --section-label: #536907; /* green-700 */
  --surface-soft: #F2F0E5;
  --nav-border: #DAD8CE;
  --trail-ink: #879A39;   /* green-400 */
  --trail-opacity: 0.34;
}

:root[data-theme="dark"][data-palette="sage"] {
  --bg: #100F0F;
  --ink: #CECDC3;
  --ink-light: #B7B5AC;
  --ink-faint: #9F9D96;
  --ink-muted: #6F6E69;
  --rule: #9F9D96;
  --rule-light: #343331;
  --accent: #92BFDB;      /* blue-300 */
  --accent-text: #92BFDB;
  --section-label: color-mix(in srgb, #A0AF54 22%, var(--ink-light));
  --surface-soft: #1C1B1A;
  --nav-border: #343331;
  --trail-ink: #879A39;
  --trail-opacity: 0.46;
}

:root[data-palette="stone"] {
  --bg: #F2F0E5;          /* base-50 */
  --ink: #100F0F;
  --ink-light: #575653;
  --ink-faint: #6F6E69;
  --ink-muted: #878580;
  --rule: #6F6E69;
  --rule-light: #CECDC3;
  --accent: #575653;      /* base-700 */
  --accent-text: #575653;
  --section-label: #6F6E69;
  --surface-soft: #E6E4D9;
  --nav-border: #CECDC3;
  --trail-ink: #66800B;   /* green-600 */
  --trail-opacity: 0.24;
}

:root[data-theme="dark"][data-palette="stone"] {
  --bg: #1C1B1A;          /* base-950 */
  --ink: #DAD8CE;
  --ink-light: #CECDC3;
  --ink-faint: #9F9D96;
  --ink-muted: #6F6E69;
  --rule: #9F9D96;
  --rule-light: #403E3C;
  --accent: #CECDC3;      /* base-200 */
  --accent-text: #CECDC3;
  --section-label: #9F9D96;
  --surface-soft: #100F0F;
  --nav-border: #403E3C;
  --trail-ink: #879A39;
  --trail-opacity: 0.34;
}

:root[data-palette="fern"] {
  --bg: #FFFCF0;
  --ink: #100F0F;
  --ink-light: #575653;
  --ink-faint: #6F6E69;
  --ink-muted: #878580;
  --rule: #536907;        /* green-700 */
  --rule-light: #DAD8CE;
  --accent: #5E409D;      /* purple-600 */
  --accent-text: #5E409D;
  --section-label: #536907;
  --surface-soft: #EDEECF;
  --nav-border: #DAD8CE;
  --trail-ink: #879A39;   /* green-400 */
  --trail-opacity: 0.32;
}

:root[data-theme="dark"][data-palette="fern"] {
  --bg: #100F0F;
  --ink: #CECDC3;
  --ink-light: #B7B5AC;
  --ink-faint: #9F9D96;
  --ink-muted: #6F6E69;
  --rule: #879A39;
  --rule-light: #343331;
  --accent: #A699D0;      /* purple-300 */
  --accent-text: #A699D0;
  --section-label: color-mix(in srgb, #A0AF54 24%, var(--ink-light));
  --surface-soft: #1C1B1A;
  --nav-border: #343331;
  --trail-ink: #879A39;
  --trail-opacity: 0.44;
}

:root[data-palette="berry"] {
  --bg: #FFFCF0;
  --ink: #100F0F;
  --ink-light: #575653;
  --ink-faint: #6F6E69;
  --ink-muted: #878580;
  --rule: #6F6E69;
  --rule-light: #DAD8CE;
  --accent: #A02F6F;      /* magenta-600 */
  --accent-text: #A02F6F;
  --section-label: #536907; /* green-700 */
  --surface-soft: #F2F0E5;
  --nav-border: #DAD8CE;
  --trail-ink: #879A39;   /* green-400 */
  --trail-opacity: 0.28;
}

:root[data-theme="dark"][data-palette="berry"] {
  --bg: #100F0F;
  --ink: #CECDC3;
  --ink-light: #B7B5AC;
  --ink-faint: #9F9D96;
  --ink-muted: #6F6E69;
  --rule: #9F9D96;
  --rule-light: #343331;
  --accent: #CE5D97;      /* magenta-400 */
  --accent-text: #CE5D97;
  --section-label: color-mix(in srgb, #A0AF54 22%, var(--ink-light));
  --surface-soft: #1C1B1A;
  --nav-border: #343331;
  --trail-ink: #879A39;
  --trail-opacity: 0.4;
}

:root[data-palette="blueprint"] {
  --bg: #FFFCF0;
  --ink: #100F0F;
  --ink-light: #575653;
  --ink-faint: #6F6E69;
  --ink-muted: #878580;
  --rule: #5E409D;        /* purple-600 */
  --rule-light: #DAD8CE;
  --accent: #205EA6;      /* blue-600 */
  --accent-text: #205EA6;
  --section-label: #5E409D; /* purple-600 */
  --surface-soft: #E1ECEB;
  --nav-border: #DAD8CE;
  --trail-ink: #66A0C8;   /* blue-300 */
  --trail-opacity: 0.38;
}

:root[data-theme="dark"][data-palette="blueprint"] {
  --bg: #100F0F;
  --ink: #CECDC3;
  --ink-light: #B7B5AC;
  --ink-faint: #9F9D96;
  --ink-muted: #6F6E69;
  --rule: #8B7EC8;
  --rule-light: #343331;
  --accent: #4385BE;      /* blue-400 */
  --accent-text: #4385BE;
  --section-label: color-mix(in srgb, #8B7EC8 44%, var(--ink-light));
  --surface-soft: #1C1B1A;
  --nav-border: #343331;
  --trail-ink: #4385BE;
  --trail-opacity: 0.56;
}

:root[data-palette="mulberry"] {
  --bg: #FFFCF0;
  --ink: #100F0F;
  --ink-light: #575653;
  --ink-faint: #6F6E69;
  --ink-muted: #878580;
  --rule: #735EB5;        /* purple-500 */
  --rule-light: #DAD8CE;
  --accent: #A02F6F;      /* magenta-600 */
  --accent-text: #A02F6F;
  --section-label: #735EB5; /* purple-500 */
  --surface-soft: #FEE4E5;
  --nav-border: #DAD8CE;
  --trail-ink: #CE5D97;   /* magenta-400 */
  --trail-opacity: 0.32;
}

:root[data-theme="dark"][data-palette="mulberry"] {
  --bg: #100F0F;
  --ink: #CECDC3;
  --ink-light: #B7B5AC;
  --ink-faint: #9F9D96;
  --ink-muted: #6F6E69;
  --rule: #CE5D97;
  --rule-light: #343331;
  --accent: #CE5D97;      /* magenta-400 */
  --accent-text: #CE5D97;
  --section-label: color-mix(in srgb, #8B7EC8 42%, var(--ink-light));
  --surface-soft: #1C1B1A;
  --nav-border: #343331;
  --trail-ink: #CE5D97;
  --trail-opacity: 0.5;
}

/* Radix + OKLCH color-lab palettes. Preview only: these do not affect the
   default site unless a URL explicitly sets ?palette=... */
:root[data-palette="radix-sage-ink"] {
  --bg: #fbfdfc;          /* radix sage-1 */
  --ink: #1a211e;         /* radix sage-12 */
  --ink-light: #5f6563;   /* radix sage-11 */
  --ink-faint: #7c8481;   /* radix sage-10 */
  --ink-muted: #868e8b;   /* radix sage-9 */
  --rule: #5f6563;
  --rule-light: #d7dad9;  /* radix sage-6 */
  --accent: #5753c6;      /* radix iris-11 */
  --accent-text: #5753c6;
  --section-label: #5f6563;
  --surface-soft: #f7f9f8; /* radix sage-2 */
  --nav-border: #d7dad9;
  --trail-ink: #868e8b;
  --trail-opacity: 0.42;
}

:root[data-theme="dark"][data-palette="radix-sage-ink"] {
  --bg: #101211;          /* radix sage-1 dark */
  --ink: #eceeed;         /* radix sage-12 dark */
  --ink-light: #adb5b2;   /* radix sage-11 dark */
  --ink-faint: #717d79;   /* radix sage-10 dark */
  --ink-muted: #63706b;   /* radix sage-9 dark */
  --rule: #adb5b2;
  --rule-light: #373b39;  /* radix sage-6 dark */
  --accent: #b1a9ff;      /* radix iris-11 dark */
  --accent-text: #b1a9ff;
  --section-label: #adb5b2;
  --surface-soft: #171918; /* radix sage-2 dark */
  --nav-border: #373b39;
  --trail-ink: #63706b;
  --trail-opacity: 0.62;
}

:root[data-palette="radix-sand-bronze"] {
  --bg: #fdfdfc;          /* radix sand-1 */
  --ink: #21201c;         /* radix sand-12 */
  --ink-light: #63635e;   /* radix sand-11 */
  --ink-faint: #82827c;   /* radix sand-10 */
  --ink-muted: #8d8d86;   /* radix sand-9 */
  --rule: #63635e;
  --rule-light: #dad9d6;  /* radix sand-6 */
  --accent: #7d5e54;      /* radix bronze-11 */
  --accent-text: #7d5e54;
  --section-label: #63635e;
  --surface-soft: #f9f9f8; /* radix sand-2 */
  --nav-border: #dad9d6;
  --trail-ink: #a18072;   /* radix bronze-9 */
  --trail-opacity: 0.34;
}

:root[data-theme="dark"][data-palette="radix-sand-bronze"] {
  --bg: #111110;          /* radix sand-1 dark */
  --ink: #eeeeec;         /* radix sand-12 dark */
  --ink-light: #b5b3ad;   /* radix sand-11 dark */
  --ink-faint: #7c7b74;   /* radix sand-10 dark */
  --ink-muted: #6f6d66;   /* radix sand-9 dark */
  --rule: #b5b3ad;
  --rule-light: #3b3a37;  /* radix sand-6 dark */
  --accent: #d4b3a5;      /* radix bronze-11 dark */
  --accent-text: #d4b3a5;
  --section-label: #b5b3ad;
  --surface-soft: #191918; /* radix sand-2 dark */
  --nav-border: #3b3a37;
  --trail-ink: #a18072;   /* radix bronze-9 dark */
  --trail-opacity: 0.58;
}

:root[data-palette="radix-slate-jade"] {
  --bg: #fcfcfd;          /* radix slate-1 */
  --ink: #1c2024;         /* radix slate-12 */
  --ink-light: #60646c;   /* radix slate-11 */
  --ink-faint: #80838d;   /* radix slate-10 */
  --ink-muted: #8b8d98;   /* radix slate-9 */
  --rule: #60646c;
  --rule-light: #d9d9e0;  /* radix slate-6 */
  --accent: #0d74ce;      /* radix blue-11 */
  --accent-text: #0d74ce;
  --section-label: #60646c;
  --surface-soft: #f9f9fb; /* radix slate-2 */
  --nav-border: #d9d9e0;
  --trail-ink: #29a383;   /* radix jade-9 */
  --trail-opacity: 0.3;
}

:root[data-theme="dark"][data-palette="radix-slate-jade"] {
  --bg: #111113;          /* radix slate-1 dark */
  --ink: #edeef0;         /* radix slate-12 dark */
  --ink-light: #b0b4ba;   /* radix slate-11 dark */
  --ink-faint: #777b84;   /* radix slate-10 dark */
  --ink-muted: #696e77;   /* radix slate-9 dark */
  --rule: #b0b4ba;
  --rule-light: #363a3f;  /* radix slate-6 dark */
  --accent: #70b8ff;      /* radix blue-11 dark */
  --accent-text: #70b8ff;
  --section-label: #b0b4ba;
  --surface-soft: #18191b; /* radix slate-2 dark */
  --nav-border: #363a3f;
  --trail-ink: #29a383;   /* radix jade-9 dark */
  --trail-opacity: 0.46;
}

:root[data-palette="oklch-sand-moss"] {
  --bg: #fffaf0;
  --ink: #171511;
  --ink-light: #5f5b52;
  --ink-faint: #66615a;
  --ink-muted: #858073;
  --rule: #66615a;
  --rule-light: #d8d0bd;
  --accent: #5f6a3b;
  --accent-text: #5f6a3b;
  --section-label: #66615a;
  --surface-soft: #f5ecdc;
  --nav-border: #d8d0bd;
  --trail-ink: #81916a;
  --trail-opacity: 0.34;
}

:root[data-theme="dark"][data-palette="oklch-sand-moss"] {
  --bg: #10110e;
  --ink: #eee9dd;
  --ink-light: #cbc4b6;
  --ink-faint: #aca69a;
  --ink-muted: #908a7e;
  --rule: #aca69a;
  --rule-light: #333329;
  --accent: #c2b98c;
  --accent-text: #c2b98c;
  --section-label: #aca69a;
  --surface-soft: #191a15;
  --nav-border: #333329;
  --trail-ink: #78866a;
  --trail-opacity: 0.56;
}

:root[data-palette="oklch-graphite-moss"] {
  --bg: #fffdf4;
  --ink: #171715;
  --ink-light: #5f5e58;
  --ink-faint: #62615c;
  --ink-muted: #858177;
  --rule: #62615c;
  --rule-light: #d9d3c4;
  --accent: #2f6388;
  --accent-text: #2f6388;
  --section-label: #62615c;
  --surface-soft: #f5f1e5;
  --nav-border: #d9d3c4;
  --trail-ink: #7f8f78;
  --trail-opacity: 0.36;
}

:root[data-theme="dark"][data-palette="oklch-graphite-moss"] {
  --bg: #111211;
  --ink: #e8e5dc;
  --ink-light: #c5c0b5;
  --ink-faint: #aaa89f;
  --ink-muted: #8d887d;
  --rule: #aaa89f;
  --rule-light: #333530;
  --accent: #8db8c0;
  --accent-text: #8db8c0;
  --section-label: #aaa89f;
  --surface-soft: #181a18;
  --nav-border: #333530;
  --trail-ink: #6f806a;
  --trail-opacity: 0.56;
}

:root[data-palette="oklch-paper-water"] {
  --bg: #fffaf0;
  --ink: #161511;
  --ink-light: #5f5b52;
  --ink-faint: #66615a;
  --ink-muted: #868074;
  --rule: #66615a;
  --rule-light: #ddd3bf;
  --accent: #195d75;
  --accent-text: #195d75;
  --section-label: #66615a;
  --surface-soft: #f5ecdc;
  --nav-border: #ddd3bf;
  --trail-ink: #8c8f7a;
  --trail-opacity: 0.32;
}

:root[data-theme="dark"][data-palette="oklch-paper-water"] {
  --bg: #11110f;
  --ink: #eee9df;
  --ink-light: #cbc4b8;
  --ink-faint: #aca69b;
  --ink-muted: #908a80;
  --rule: #aca69b;
  --rule-light: #34322c;
  --accent: #86b9c8;
  --accent-text: #86b9c8;
  --section-label: #aca69b;
  --surface-soft: #1a1915;
  --nav-border: #34322c;
  --trail-ink: #767a66;
  --trail-opacity: 0.52;
}

:root[data-palette="oklch-lichen-ink"] {
  --bg: #fbfbf2;
  --ink: #171811;
  --ink-light: #5f6058;
  --ink-faint: #64635d;
  --ink-muted: #85887b;
  --rule: #64635d;
  --rule-light: #d7d8c9;
  --accent: #4b6471;
  --accent-text: #4b6471;
  --section-label: #64635d;
  --surface-soft: #f1f1e4;
  --nav-border: #d7d8c9;
  --trail-ink: #88936f;
  --trail-opacity: 0.34;
}

:root[data-theme="dark"][data-palette="oklch-lichen-ink"] {
  --bg: #111210;
  --ink: #ebe8dc;
  --ink-light: #c5c2b5;
  --ink-faint: #a8a59c;
  --ink-muted: #898b7d;
  --rule: #a8a59c;
  --rule-light: #33352f;
  --accent: #a2bcc4;
  --accent-text: #a2bcc4;
  --section-label: #a8a59c;
  --surface-soft: #181a17;
  --nav-border: #33352f;
  --trail-ink: #707a5f;
  --trail-opacity: 0.56;
}

:root[data-palette="oklch-night-garden"] {
  --bg: #fdfaf1;
  --ink: #171612;
  --ink-light: #615d54;
  --ink-faint: #66615a;
  --ink-muted: #858075;
  --rule: #66615a;
  --rule-light: #d8d1c0;
  --accent: #325f70;
  --accent-text: #325f70;
  --section-label: #66615a;
  --surface-soft: #f4efe2;
  --nav-border: #d8d1c0;
  --trail-ink: #858d75;
  --trail-opacity: 0.34;
}

:root[data-theme="dark"][data-palette="oklch-night-garden"] {
  --bg: #0f1110;
  --ink: #ece8dc;
  --ink-light: #c8c2b6;
  --ink-faint: #aaa69a;
  --ink-muted: #8d887f;
  --rule: #aaa69a;
  --rule-light: #30342e;
  --accent: #9fb7bd;
  --accent-text: #9fb7bd;
  --section-label: #aaa69a;
  --surface-soft: #171a18;
  --nav-border: #30342e;
  --trail-ink: #71806f;
  --trail-opacity: 0.62;
}

:root[data-palette="oklch-lichen-stone"] {
  --bg: #fbfaf0;
  --ink: #171713;
  --ink-light: #5f5e58;
  --ink-faint: #66635a;
  --ink-muted: #858177;
  --rule: #66635a;
  --rule-light: #d6d2c2;
  --accent: #44685f;
  --accent-text: #44685f;
  --section-label: #66635a;
  --surface-soft: #f1efe3;
  --nav-border: #d6d2c2;
  --trail-ink: #7d8a67;
  --trail-opacity: 0.36;
}

:root[data-theme="dark"][data-palette="oklch-lichen-stone"] {
  --bg: #101211;
  --ink: #ebe7dc;
  --ink-light: #c7c1b6;
  --ink-faint: #aaa59a;
  --ink-muted: #8d887d;
  --rule: #aaa59a;
  --rule-light: #30342f;
  --accent: #9abeb2;
  --accent-text: #9abeb2;
  --section-label: #aaa59a;
  --surface-soft: #171a18;
  --nav-border: #30342f;
  --trail-ink: #758466;
  --trail-opacity: 0.58;
}

:root[data-palette="oklch-fern-shade"] {
  --bg: #fffaf0;
  --ink: #151711;
  --ink-light: #5f5c53;
  --ink-faint: #625f56;
  --ink-muted: #858075;
  --rule: #625f56;
  --rule-light: #d8d0bd;
  --accent: #3f6f45;
  --accent-text: #3f6f45;
  --section-label: #625f56;
  --surface-soft: #f4eedf;
  --nav-border: #d8d0bd;
  --trail-ink: #617a52;
  --trail-opacity: 0.36;
}

:root[data-theme="dark"][data-palette="oklch-fern-shade"] {
  --bg: #0f120f;
  --ink: #ece8dc;
  --ink-light: #c8c3b7;
  --ink-faint: #aaa69a;
  --ink-muted: #8e887d;
  --rule: #aaa69a;
  --rule-light: #30362e;
  --accent: #9fc59a;
  --accent-text: #9fc59a;
  --section-label: #aaa69a;
  --surface-soft: #171b16;
  --nav-border: #30362e;
  --trail-ink: #68815b;
  --trail-opacity: 0.58;
}

:root[data-palette="oklch-juniper-blue"] {
  --bg: #fbfbf4;
  --ink: #141715;
  --ink-light: #5d605b;
  --ink-faint: #62635d;
  --ink-muted: #80867f;
  --rule: #62635d;
  --rule-light: #d2d8d0;
  --accent: #2f6672;
  --accent-text: #2f6672;
  --section-label: #62635d;
  --surface-soft: #f0f2ea;
  --nav-border: #d2d8d0;
  --trail-ink: #57766b;
  --trail-opacity: 0.38;
}

:root[data-theme="dark"][data-palette="oklch-juniper-blue"] {
  --bg: #0e1211;
  --ink: #e9e8df;
  --ink-light: #c4c3ba;
  --ink-faint: #a8a69d;
  --ink-muted: #878d86;
  --rule: #a8a69d;
  --rule-light: #2d3633;
  --accent: #8bbcc7;
  --accent-text: #8bbcc7;
  --section-label: #a8a69d;
  --surface-soft: #151b19;
  --nav-border: #2d3633;
  --trail-ink: #5f7f73;
  --trail-opacity: 0.6;
}

:root[data-palette="oklch-moss-bark"] {
  --bg: #fbf8eb;
  --ink: #1a1711;
  --ink-light: #5f594c;
  --ink-faint: #655f51;
  --ink-muted: #858071;
  --rule: #655f51;
  --rule-light: #d5cdb8;
  --accent: #59643a;
  --accent-text: #59643a;
  --section-label: #655f51;
  --surface-soft: #f1ead9;
  --nav-border: #d5cdb8;
  --trail-ink: #75855b;
  --trail-opacity: 0.38;
}

:root[data-theme="dark"][data-palette="oklch-moss-bark"] {
  --bg: #11100d;
  --ink: #eee8da;
  --ink-light: #c9c0b1;
  --ink-faint: #aca499;
  --ink-muted: #908879;
  --rule: #aca499;
  --rule-light: #343125;
  --accent: #c0bd82;
  --accent-text: #c0bd82;
  --section-label: #aca499;
  --surface-soft: #1a1811;
  --nav-border: #343125;
  --trail-ink: #75855b;
  --trail-opacity: 0.58;
}

:root[data-palette="oklch-wetland-reed"] {
  --bg: #fff9ec;
  --ink: #171511;
  --ink-light: #615b50;
  --ink-faint: #686153;
  --ink-muted: #878073;
  --rule: #686153;
  --rule-light: #d9cfba;
  --accent: #4f6b4d;
  --accent-text: #4f6b4d;
  --section-label: #686153;
  --surface-soft: #f4ecd9;
  --nav-border: #d9cfba;
  --trail-ink: #8a8965;
  --trail-opacity: 0.34;
}

:root[data-theme="dark"][data-palette="oklch-wetland-reed"] {
  --bg: #11110e;
  --ink: #eee8da;
  --ink-light: #cbc2b4;
  --ink-faint: #aca498;
  --ink-muted: #918a7c;
  --rule: #aca498;
  --rule-light: #343228;
  --accent: #abbf8b;
  --accent-text: #abbf8b;
  --section-label: #aca498;
  --surface-soft: #1a1914;
  --nav-border: #343228;
  --trail-ink: #858764;
  --trail-opacity: 0.56;
}

@supports (color: oklch(50% 0.05 120)) {
  :root[data-palette="oklch-sand-moss"] {
    --bg: oklch(98% 0.025 87);
    --ink: oklch(18% 0.013 84);
    --ink-light: oklch(43% 0.017 82);
    --ink-faint: oklch(45% 0.014 82);
    --ink-muted: oklch(60% 0.023 82);
    --rule: oklch(45% 0.014 82);
    --rule-light: oklch(83% 0.037 84);
    --accent: oklch(43% 0.055 122);
    --accent-text: oklch(43% 0.055 122);
    --section-label: oklch(45% 0.014 82);
    --surface-soft: oklch(94% 0.03 86);
    --nav-border: oklch(83% 0.037 84);
    --trail-ink: oklch(60% 0.055 128);
  }

  :root[data-theme="dark"][data-palette="oklch-sand-moss"] {
    --bg: oklch(16% 0.014 112);
    --ink: oklch(92% 0.022 84);
    --ink-light: oklch(80% 0.024 84);
    --ink-faint: oklch(70% 0.019 84);
    --ink-muted: oklch(59% 0.018 84);
    --rule: oklch(70% 0.019 84);
    --rule-light: oklch(27% 0.024 112);
    --accent: oklch(76% 0.047 112);
    --accent-text: oklch(76% 0.047 112);
    --section-label: oklch(70% 0.019 84);
    --surface-soft: oklch(21% 0.016 112);
    --nav-border: oklch(27% 0.024 112);
    --trail-ink: oklch(58% 0.045 128);
  }

  :root[data-palette="oklch-graphite-moss"] {
    --bg: oklch(99% 0.016 91);
    --ink: oklch(19% 0.01 95);
    --ink-light: oklch(44% 0.012 95);
    --ink-faint: oklch(45% 0.011 95);
    --ink-muted: oklch(60% 0.018 95);
    --rule: oklch(45% 0.011 95);
    --rule-light: oklch(84% 0.026 92);
    --accent: oklch(45% 0.072 228);
    --accent-text: oklch(45% 0.072 228);
    --section-label: oklch(45% 0.011 95);
    --surface-soft: oklch(95% 0.022 91);
    --nav-border: oklch(84% 0.026 92);
    --trail-ink: oklch(58% 0.045 145);
  }

  :root[data-theme="dark"][data-palette="oklch-graphite-moss"] {
    --bg: oklch(17% 0.009 145);
    --ink: oklch(90% 0.017 92);
    --ink-light: oklch(79% 0.018 92);
    --ink-faint: oklch(70% 0.016 92);
    --ink-muted: oklch(58% 0.014 92);
    --rule: oklch(70% 0.016 92);
    --rule-light: oklch(28% 0.015 145);
    --accent: oklch(74% 0.05 210);
    --accent-text: oklch(74% 0.05 210);
    --section-label: oklch(70% 0.016 92);
    --surface-soft: oklch(21% 0.012 145);
    --nav-border: oklch(28% 0.015 145);
    --trail-ink: oklch(56% 0.04 145);
  }

  :root[data-palette="oklch-paper-water"] {
    --bg: oklch(98% 0.025 87);
    --ink: oklch(18% 0.012 84);
    --ink-light: oklch(43% 0.018 82);
    --ink-faint: oklch(45% 0.014 82);
    --ink-muted: oklch(60% 0.023 82);
    --rule: oklch(45% 0.014 82);
    --rule-light: oklch(84% 0.038 84);
    --accent: oklch(41% 0.075 224);
    --accent-text: oklch(41% 0.075 224);
    --section-label: oklch(45% 0.014 82);
    --surface-soft: oklch(94% 0.03 86);
    --nav-border: oklch(84% 0.038 84);
    --trail-ink: oklch(61% 0.04 118);
  }

  :root[data-theme="dark"][data-palette="oklch-paper-water"] {
    --bg: oklch(17% 0.012 84);
    --ink: oklch(92% 0.022 84);
    --ink-light: oklch(80% 0.024 84);
    --ink-faint: oklch(70% 0.019 84);
    --ink-muted: oklch(59% 0.018 84);
    --rule: oklch(70% 0.019 84);
    --rule-light: oklch(28% 0.024 84);
    --accent: oklch(74% 0.057 224);
    --accent-text: oklch(74% 0.057 224);
    --section-label: oklch(70% 0.019 84);
    --surface-soft: oklch(21% 0.014 84);
    --nav-border: oklch(28% 0.024 84);
    --trail-ink: oklch(55% 0.036 118);
  }

  :root[data-palette="oklch-lichen-ink"] {
    --bg: oklch(98% 0.018 108);
    --ink: oklch(19% 0.018 112);
    --ink-light: oklch(44% 0.015 110);
    --ink-faint: oklch(45% 0.012 95);
    --ink-muted: oklch(61% 0.023 110);
    --rule: oklch(45% 0.012 95);
    --rule-light: oklch(85% 0.03 110);
    --accent: oklch(47% 0.043 220);
    --accent-text: oklch(47% 0.043 220);
    --section-label: oklch(45% 0.012 95);
    --surface-soft: oklch(94% 0.022 108);
    --nav-border: oklch(85% 0.03 110);
    --trail-ink: oklch(61% 0.05 125);
  }

  :root[data-theme="dark"][data-palette="oklch-lichen-ink"] {
    --bg: oklch(17% 0.012 125);
    --ink: oklch(91% 0.02 92);
    --ink-light: oklch(79% 0.02 92);
    --ink-faint: oklch(70% 0.017 92);
    --ink-muted: oklch(58% 0.016 92);
    --rule: oklch(70% 0.017 92);
    --rule-light: oklch(28% 0.018 125);
    --accent: oklch(75% 0.038 220);
    --accent-text: oklch(75% 0.038 220);
    --section-label: oklch(70% 0.017 92);
    --surface-soft: oklch(21% 0.014 125);
    --nav-border: oklch(28% 0.018 125);
    --trail-ink: oklch(55% 0.044 125);
  }

  :root[data-palette="oklch-night-garden"] {
    --bg: oklch(98% 0.024 87);
    --ink: oklch(19% 0.013 90);
    --ink-light: oklch(44% 0.017 86);
    --ink-faint: oklch(45% 0.014 86);
    --ink-muted: oklch(60% 0.023 86);
    --rule: oklch(45% 0.014 86);
    --rule-light: oklch(83% 0.035 86);
    --accent: oklch(43% 0.055 218);
    --accent-text: oklch(43% 0.055 218);
    --section-label: oklch(45% 0.014 86);
    --surface-soft: oklch(94% 0.03 87);
    --nav-border: oklch(83% 0.035 86);
    --trail-ink: oklch(60% 0.04 115);
  }

  :root[data-theme="dark"][data-palette="oklch-night-garden"] {
    --bg: oklch(16% 0.013 145);
    --ink: oklch(91% 0.022 88);
    --ink-light: oklch(79% 0.024 88);
    --ink-faint: oklch(70% 0.02 88);
    --ink-muted: oklch(58% 0.017 88);
    --rule: oklch(70% 0.02 88);
    --rule-light: oklch(27% 0.022 145);
    --accent: oklch(75% 0.035 220);
    --accent-text: oklch(75% 0.035 220);
    --section-label: oklch(70% 0.02 88);
    --surface-soft: oklch(21% 0.016 145);
    --nav-border: oklch(27% 0.022 145);
    --trail-ink: oklch(56% 0.045 135);
  }

  :root[data-palette="oklch-lichen-stone"] {
    --bg: oklch(98% 0.018 96);
    --ink: oklch(18% 0.012 104);
    --ink-light: oklch(44% 0.012 96);
    --ink-faint: oklch(45% 0.014 92);
    --ink-muted: oklch(60% 0.018 96);
    --rule: oklch(45% 0.014 92);
    --rule-light: oklch(84% 0.029 94);
    --accent: oklch(43% 0.045 168);
    --accent-text: oklch(43% 0.045 168);
    --section-label: oklch(45% 0.014 92);
    --surface-soft: oklch(94% 0.023 96);
    --nav-border: oklch(84% 0.029 94);
    --trail-ink: oklch(60% 0.048 125);
  }

  :root[data-theme="dark"][data-palette="oklch-lichen-stone"] {
    --bg: oklch(16% 0.012 155);
    --ink: oklch(91% 0.022 88);
    --ink-light: oklch(79% 0.023 88);
    --ink-faint: oklch(70% 0.018 88);
    --ink-muted: oklch(58% 0.016 88);
    --rule: oklch(70% 0.018 88);
    --rule-light: oklch(27% 0.02 155);
    --accent: oklch(74% 0.04 168);
    --accent-text: oklch(74% 0.04 168);
    --section-label: oklch(70% 0.018 88);
    --surface-soft: oklch(21% 0.015 155);
    --nav-border: oklch(27% 0.02 155);
    --trail-ink: oklch(57% 0.042 125);
  }

  :root[data-palette="oklch-fern-shade"] {
    --bg: oklch(98% 0.025 87);
    --ink: oklch(18% 0.018 120);
    --ink-light: oklch(43% 0.017 82);
    --ink-faint: oklch(44% 0.014 82);
    --ink-muted: oklch(60% 0.023 82);
    --rule: oklch(44% 0.014 82);
    --rule-light: oklch(83% 0.037 84);
    --accent: oklch(45% 0.075 145);
    --accent-text: oklch(45% 0.075 145);
    --section-label: oklch(44% 0.014 82);
    --surface-soft: oklch(94% 0.03 86);
    --nav-border: oklch(83% 0.037 84);
    --trail-ink: oklch(52% 0.065 135);
  }

  :root[data-theme="dark"][data-palette="oklch-fern-shade"] {
    --bg: oklch(16% 0.016 135);
    --ink: oklch(91% 0.022 88);
    --ink-light: oklch(80% 0.024 88);
    --ink-faint: oklch(70% 0.02 88);
    --ink-muted: oklch(58% 0.017 88);
    --rule: oklch(70% 0.02 88);
    --rule-light: oklch(28% 0.023 135);
    --accent: oklch(76% 0.06 145);
    --accent-text: oklch(76% 0.06 145);
    --section-label: oklch(70% 0.02 88);
    --surface-soft: oklch(21% 0.018 135);
    --nav-border: oklch(28% 0.023 135);
    --trail-ink: oklch(55% 0.055 135);
  }

  :root[data-palette="oklch-juniper-blue"] {
    --bg: oklch(98% 0.014 110);
    --ink: oklch(18% 0.012 165);
    --ink-light: oklch(44% 0.014 150);
    --ink-faint: oklch(45% 0.012 100);
    --ink-muted: oklch(60% 0.018 140);
    --rule: oklch(45% 0.012 100);
    --rule-light: oklch(84% 0.025 130);
    --accent: oklch(43% 0.06 195);
    --accent-text: oklch(43% 0.06 195);
    --section-label: oklch(45% 0.012 100);
    --surface-soft: oklch(94% 0.018 115);
    --nav-border: oklch(84% 0.025 130);
    --trail-ink: oklch(51% 0.045 165);
  }

  :root[data-theme="dark"][data-palette="oklch-juniper-blue"] {
    --bg: oklch(15% 0.014 175);
    --ink: oklch(91% 0.017 100);
    --ink-light: oklch(79% 0.018 100);
    --ink-faint: oklch(70% 0.016 100);
    --ink-muted: oklch(58% 0.015 140);
    --rule: oklch(70% 0.016 100);
    --rule-light: oklch(28% 0.022 175);
    --accent: oklch(74% 0.052 195);
    --accent-text: oklch(74% 0.052 195);
    --section-label: oklch(70% 0.016 100);
    --surface-soft: oklch(20% 0.017 175);
    --nav-border: oklch(28% 0.022 175);
    --trail-ink: oklch(55% 0.045 165);
  }

  :root[data-palette="oklch-moss-bark"] {
    --bg: oklch(97% 0.031 84);
    --ink: oklch(18% 0.018 70);
    --ink-light: oklch(42% 0.02 75);
    --ink-faint: oklch(44% 0.017 76);
    --ink-muted: oklch(59% 0.022 78);
    --rule: oklch(44% 0.017 76);
    --rule-light: oklch(82% 0.038 82);
    --accent: oklch(44% 0.052 118);
    --accent-text: oklch(44% 0.052 118);
    --section-label: oklch(44% 0.017 76);
    --surface-soft: oklch(93% 0.04 84);
    --nav-border: oklch(82% 0.038 82);
    --trail-ink: oklch(57% 0.055 122);
  }

  :root[data-theme="dark"][data-palette="oklch-moss-bark"] {
    --bg: oklch(16% 0.018 80);
    --ink: oklch(92% 0.024 82);
    --ink-light: oklch(79% 0.025 82);
    --ink-faint: oklch(70% 0.02 82);
    --ink-muted: oklch(59% 0.018 82);
    --rule: oklch(70% 0.02 82);
    --rule-light: oklch(27% 0.028 80);
    --accent: oklch(76% 0.05 112);
    --accent-text: oklch(76% 0.05 112);
    --section-label: oklch(70% 0.02 82);
    --surface-soft: oklch(21% 0.023 80);
    --nav-border: oklch(27% 0.028 80);
    --trail-ink: oklch(56% 0.052 122);
  }

  :root[data-palette="oklch-wetland-reed"] {
    --bg: oklch(98% 0.029 84);
    --ink: oklch(18% 0.014 80);
    --ink-light: oklch(43% 0.019 78);
    --ink-faint: oklch(45% 0.017 76);
    --ink-muted: oklch(60% 0.023 78);
    --rule: oklch(45% 0.017 76);
    --rule-light: oklch(83% 0.039 82);
    --accent: oklch(45% 0.058 135);
    --accent-text: oklch(45% 0.058 135);
    --section-label: oklch(45% 0.017 76);
    --surface-soft: oklch(94% 0.035 84);
    --nav-border: oklch(83% 0.039 82);
    --trail-ink: oklch(60% 0.045 105);
  }

  :root[data-theme="dark"][data-palette="oklch-wetland-reed"] {
    --bg: oklch(16% 0.014 92);
    --ink: oklch(92% 0.024 82);
    --ink-light: oklch(80% 0.024 82);
    --ink-faint: oklch(70% 0.02 82);
    --ink-muted: oklch(59% 0.018 82);
    --rule: oklch(70% 0.02 82);
    --rule-light: oklch(27% 0.023 92);
    --accent: oklch(76% 0.055 125);
    --accent-text: oklch(76% 0.055 125);
    --section-label: oklch(70% 0.02 82);
    --surface-soft: oklch(21% 0.017 92);
    --nav-border: oklch(27% 0.023 92);
    --trail-ink: oklch(58% 0.043 105);
  }
}

/* Brico-specific color candidates. Preview with:
   /type/bricolage/?palette=brico-granite-fern&theme=light
   They keep links blue-ish for web legibility and reserve organic color for
   the trail/rules/low-volume atmosphere. */
:root[data-palette="brico-granite-fern"] {
  --bg: #F4F2EC;
  --ink: #161616;
  --ink-light: #4E4B45;
  --ink-faint: #69665F;
  --ink-muted: #928E84;
  --rule: #69665F;
  --rule-light: #CAC5B8;
  --accent: #2D5184;
  --accent-text: #2D5184;
  --section-label: #69665F;
  --label-quiet: #827E73;
  --accent-rest: #526985;
  --surface-soft: #ECE8DD;
  --nav-border: #CAC5B8;
  --trail-ink: #748064;
  --trail-opacity: 0.4;
  --brico-link: #2D5184;
  --brico-subtitle: #3A3A3A;
  --brico-aside: #6D6960;
}

:root[data-theme="dark"][data-palette="brico-granite-fern"] {
  --bg: #121315;
  --ink: #D6D2C7;
  --ink-light: #BDB8AB;
  --ink-faint: #928E84;
  --ink-muted: #67655F;
  --rule: #9E998C;
  --rule-light: #343538;
  --accent: #88A6CC;
  --accent-text: #88A6CC;
  --section-label: #AAA396;
  --label-quiet: #938D82;
  --accent-rest: #7789A0;
  --surface-soft: #191A1C;
  --nav-border: #343538;
  --trail-ink: #72836C;
  --trail-opacity: 0.62;
  --brico-link: #88A6CC;
  --brico-subtitle: #BDB8AB;
  --brico-aside: #928E84;
}

:root[data-palette="brico-sand-moss-blue"] {
  --bg: #F6F1E7;
  --ink: #191612;
  --ink-light: #4D473E;
  --ink-faint: #6B655A;
  --ink-muted: #948D80;
  --rule: #716B5E;
  --rule-light: #D2CABD;
  --accent: #315A7D;
  --accent-text: #315A7D;
  --section-label: #6B655A;
  --label-quiet: #837B6D;
  --accent-rest: #5A7281;
  --surface-soft: #EDE5D8;
  --nav-border: #D2CABD;
  --trail-ink: #6A7D63;
  --trail-opacity: 0.4;
  --brico-link: #315A7D;
  --brico-subtitle: #3C382F;
  --brico-aside: #706859;
}

:root[data-theme="dark"][data-palette="brico-sand-moss-blue"] {
  --bg: #14120F;
  --ink: #DED6C6;
  --ink-light: #C1B7A6;
  --ink-faint: #998F7E;
  --ink-muted: #6E665A;
  --rule: #AAA08D;
  --rule-light: #38332D;
  --accent: #89A6C3;
  --accent-text: #89A6C3;
  --section-label: #AEA390;
  --label-quiet: #988E7D;
  --accent-rest: #748A9C;
  --surface-soft: #1C1915;
  --nav-border: #38332D;
  --trail-ink: #6A7D63;
  --trail-opacity: 0.62;
  --brico-link: #89A6C3;
  --brico-subtitle: #C1B7A6;
  --brico-aside: #998F7E;
}

:root[data-palette="brico-ink-water"] {
  --bg: #F7F6EF;
  --ink: #141516;
  --ink-light: #474A4B;
  --ink-faint: #626668;
  --ink-muted: #8D9290;
  --rule: #626668;
  --rule-light: #CCD0CC;
  --accent: #285F7C;
  --accent-text: #285F7C;
  --section-label: #626668;
  --label-quiet: #7A7F7D;
  --accent-rest: #577783;
  --surface-soft: #EEEDE6;
  --nav-border: #CCD0CC;
  --trail-ink: #607972;
  --trail-opacity: 0.38;
  --brico-link: #285F7C;
  --brico-subtitle: #393C3E;
  --brico-aside: #666A6A;
}

:root[data-theme="dark"][data-palette="brico-ink-water"] {
  --bg: #101214;
  --ink: #D8D6CD;
  --ink-light: #BFBCB1;
  --ink-faint: #96958B;
  --ink-muted: #676A66;
  --rule: #A2A096;
  --rule-light: #303437;
  --accent: #8FB5C4;
  --accent-text: #8FB5C4;
  --section-label: #AAA79D;
  --label-quiet: #939188;
  --accent-rest: #78979F;
  --surface-soft: #171A1C;
  --nav-border: #303437;
  --trail-ink: #667F78;
  --trail-opacity: 0.62;
  --brico-link: #8FB5C4;
  --brico-subtitle: #BFBCB1;
  --brico-aside: #96958B;
}

:root[data-palette="brico-lichen-slate"] {
  --bg: #F1F0E8;
  --ink: #151714;
  --ink-light: #4A4C46;
  --ink-faint: #666A60;
  --ink-muted: #8D9187;
  --rule: #666A60;
  --rule-light: #C9CCC1;
  --accent: #345D77;
  --accent-text: #345D77;
  --section-label: #666A60;
  --label-quiet: #7D8175;
  --accent-rest: #5B7480;
  --surface-soft: #E8E7DE;
  --nav-border: #C9CCC1;
  --trail-ink: #75816D;
  --trail-opacity: 0.42;
  --brico-link: #345D77;
  --brico-subtitle: #383B35;
  --brico-aside: #686D61;
}

:root[data-theme="dark"][data-palette="brico-lichen-slate"] {
  --bg: #111412;
  --ink: #D5D4C8;
  --ink-light: #BCBBB0;
  --ink-faint: #939489;
  --ink-muted: #656961;
  --rule: #A0A095;
  --rule-light: #313630;
  --accent: #88A9BC;
  --accent-text: #88A9BC;
  --section-label: #A8A89B;
  --label-quiet: #929286;
  --accent-rest: #748D9A;
  --surface-soft: #171B18;
  --nav-border: #313630;
  --trail-ink: #718169;
  --trail-opacity: 0.64;
  --brico-link: #88A9BC;
  --brico-subtitle: #BCBBB0;
  --brico-aside: #939489;
}

@media (prefers-color-scheme: dark) {
  :root[data-palette="brico-granite-fern"]:not([data-theme="light"]) {
    --bg: #121315;
    --ink: #D6D2C7;
    --ink-light: #BDB8AB;
    --ink-faint: #928E84;
    --ink-muted: #67655F;
    --rule: #9E998C;
    --rule-light: #343538;
    --accent: #88A6CC;
    --accent-text: #88A6CC;
    --section-label: #AAA396;
    --label-quiet: #938D82;
    --accent-rest: #7789A0;
    --surface-soft: #191A1C;
    --nav-border: #343538;
    --trail-ink: #72836C;
    --trail-opacity: 0.62;
    --brico-link: #88A6CC;
    --brico-subtitle: #BDB8AB;
    --brico-aside: #928E84;
  }

  :root[data-palette="brico-sand-moss-blue"]:not([data-theme="light"]) {
    --bg: #14120F;
    --ink: #DED6C6;
    --ink-light: #C1B7A6;
    --ink-faint: #998F7E;
    --ink-muted: #6E665A;
    --rule: #AAA08D;
    --rule-light: #38332D;
    --accent: #89A6C3;
    --accent-text: #89A6C3;
    --section-label: #AEA390;
    --label-quiet: #988E7D;
    --accent-rest: #748A9C;
    --surface-soft: #1C1915;
    --nav-border: #38332D;
    --trail-ink: #6A7D63;
    --trail-opacity: 0.62;
    --brico-link: #89A6C3;
    --brico-subtitle: #C1B7A6;
    --brico-aside: #998F7E;
  }

  :root[data-palette="brico-ink-water"]:not([data-theme="light"]) {
    --bg: #101214;
    --ink: #D8D6CD;
    --ink-light: #BFBCB1;
    --ink-faint: #96958B;
    --ink-muted: #676A66;
    --rule: #A2A096;
    --rule-light: #303437;
    --accent: #8FB5C4;
    --accent-text: #8FB5C4;
    --section-label: #AAA79D;
    --label-quiet: #939188;
    --accent-rest: #78979F;
    --surface-soft: #171A1C;
    --nav-border: #303437;
    --trail-ink: #667F78;
    --trail-opacity: 0.62;
    --brico-link: #8FB5C4;
    --brico-subtitle: #BFBCB1;
    --brico-aside: #96958B;
  }

  :root[data-palette="brico-lichen-slate"]:not([data-theme="light"]) {
    --bg: #111412;
    --ink: #D5D4C8;
    --ink-light: #BCBBB0;
    --ink-faint: #939489;
    --ink-muted: #656961;
    --rule: #A0A095;
    --rule-light: #313630;
    --accent: #88A9BC;
    --accent-text: #88A9BC;
    --section-label: #A8A89B;
    --label-quiet: #929286;
    --accent-rest: #748D9A;
    --surface-soft: #171B18;
    --nav-border: #313630;
    --trail-ink: #718169;
    --trail-opacity: 0.64;
    --brico-link: #88A9BC;
    --brico-subtitle: #BCBBB0;
    --brico-aside: #939489;
  }
}

body {
  background: var(--bg);
  color: var(--ink);
}

.site-nav {
  min-height: 46px;
  padding: 0.6rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  backdrop-filter: blur(6px);
}

.nav-name,
.nav-links a {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.nav-name {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  gap: 0.15rem;
  font-size: 0.95rem;
}

.nav-name-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-faint);
}

.nav-links a {
  color: var(--ink-light);
  padding-bottom: 0.08rem;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.nav-links a.active,
.nav-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink);
}

/* DIMMER — TE faceplate sibling of .loop-tally
   Same polymer/shadow/bevel vocabulary as the LOOP keycap so the two read as
   one instrument panel. Continuous L↔R slug (continuous-feeling slide) vs
   LOOP's binary punch-out — affordance shape ↔ degrees of freedom. */
.dimmer {
  width: auto;
  height: auto;
  padding: 4px 6px 5px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-light);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  line-height: 1;
}

.dimmer::after { content: none; }

.dimmer-icons {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/* Sun/moon — geometric monochrome SVG. currentColor inherits from the span,
   so the rules below drive both fill (sun disc, moon body) and stroke (sun
   radial ticks). Active = full ink; inactive = ~50% mix. */
.dimmer-sun,
.dimmer-moon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  transition: color 160ms ease;
}

.dimmer-sun svg,
.dimmer-moon svg {
  display: block;
}

:root .dimmer-sun {
  color: var(--ink);
}

[data-theme="dark"] .dimmer-sun {
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}

[data-theme="dark"] .dimmer-moon {
  color: var(--ink);
}

.dimmer:hover .dimmer-sun,
.dimmer:hover .dimmer-moon {
  color: var(--ink);
}

/* Track — milled cavity. Cavity floor darkens toward center via radial
   gradient; top wall throws shadow, bottom wall catches light. */
.dimmer-track {
  position: relative;
  display: block;
  width: 32px;
  height: 13px;
  border-radius: 6.5px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%,
      color-mix(in srgb, #000 30%, var(--bg)) 0%,
      color-mix(in srgb, #000 16%, var(--bg)) 70%,
      color-mix(in srgb, var(--ink) 14%, var(--bg)) 100%);
  box-shadow:
    inset 0 1.5px 2px color-mix(in srgb, #000 42%, transparent),
    inset 0 -0.5px 0 color-mix(in srgb, var(--bg) 70%, transparent),
    inset 1px 0 0 color-mix(in srgb, #000 18%, transparent),
    inset -1px 0 0 color-mix(in srgb, #000 18%, transparent),
    0 0.5px 0 color-mix(in srgb, var(--bg) 75%, transparent);
  transition: box-shadow 90ms ease-out;
}

/* Slug — sibling part to .loop-tally keycap. Same crown highlight, same
   6-layer bevel. Travels L↔R; bounce on slide makes the loop tick visible. */
.dimmer-knob {
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 13px;
  height: 10px;
  border-radius: 3px;
  background:
    radial-gradient(ellipse 130% 70% at 50% -10%,
      color-mix(in srgb, var(--bg) 55%, var(--ink-light)) 0%,
      color-mix(in srgb, var(--ink) 22%, var(--bg)) 55%,
      color-mix(in srgb, var(--ink) 38%, var(--bg)) 100%);
  box-shadow:
    inset 0 0.5px 0 color-mix(in srgb, var(--bg) 75%, transparent),
    inset 0 -0.5px 0 color-mix(in srgb, #000 38%, transparent),
    inset 0.5px 0 0 color-mix(in srgb, var(--bg) 22%, transparent),
    inset -0.5px 0 0 color-mix(in srgb, #000 22%, transparent),
    0 1px 0 color-mix(in srgb, #000 32%, transparent),
    0 1.5px 2px color-mix(in srgb, #000 22%, transparent);
  transition:
    left 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 70ms cubic-bezier(0.7, 0, 0.3, 1),
    box-shadow 70ms cubic-bezier(0.7, 0, 0.3, 1);
}

[data-theme="dark"] .dimmer-knob {
  left: calc(100% - 14.5px);
}

/* Press — slug travels 0.5px down into its track; bevel inverts. Same
   timing/bezier as LOOP key so both controls feel like the same product. */
.dimmer:active .dimmer-knob {
  transform: translateY(0.5px);
  box-shadow:
    inset 0 1px 1.5px color-mix(in srgb, #000 45%, transparent),
    inset 0 -0.5px 0 color-mix(in srgb, var(--bg) 30%, transparent),
    inset 0.5px 0 0 color-mix(in srgb, #000 12%, transparent),
    inset -0.5px 0 0 color-mix(in srgb, var(--bg) 12%, transparent),
    0 0 0 color-mix(in srgb, #000 0%, transparent),
    0 0 0 color-mix(in srgb, #000 0%, transparent);
}

/* Track deepens on press to sell the slug-pushed-in feel */
.dimmer:active .dimmer-track {
  box-shadow:
    inset 0 2.5px 3px color-mix(in srgb, #000 55%, transparent),
    inset 0 -0.5px 0 color-mix(in srgb, var(--bg) 55%, transparent),
    inset 1px 0 0 color-mix(in srgb, #000 28%, transparent),
    inset -1px 0 0 color-mix(in srgb, #000 28%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .dimmer-knob,
  .dimmer-track,
  .dimmer:active .dimmer-knob {
    transition: none;
    transform: none;
  }
}

/* LOOP button — TE punch-out tally
   Different physical shape from .dimmer on purpose: dimmer = continuous slug-in-track,
   loop = binary punch-out with tally LED. Affordance shape matches degrees of freedom. */
.loop-tally {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 8px 5px;
  border: 0;
  border-radius: 2.5px;
  /* Polymer keycap — radial highlight at top fakes the molded crown.
     Surface tints toward ink in both themes so the key reads as a discrete
     hardware control floating above the page. */
  background:
    radial-gradient(ellipse 130% 70% at 50% -10%,
      color-mix(in srgb, var(--bg) 55%, var(--ink-light)) 0%,
      color-mix(in srgb, var(--ink) 22%, var(--bg)) 55%,
      color-mix(in srgb, var(--ink) 38%, var(--bg)) 100%);
  /* Layered bevel — top hairline crown, bottom edge shadow, side chamfers,
     baseplate drop. Reads as a real injection-molded chiclet from across the room. */
  box-shadow:
    inset 0 0.5px 0 color-mix(in srgb, var(--bg) 75%, transparent),
    inset 0 -0.5px 0 color-mix(in srgb, #000 38%, transparent),
    inset 0.5px 0 0 color-mix(in srgb, var(--bg) 22%, transparent),
    inset -0.5px 0 0 color-mix(in srgb, #000 22%, transparent),
    0 1px 0 color-mix(in srgb, #000 28%, transparent),
    0 1.5px 2px color-mix(in srgb, #000 18%, transparent);
  cursor: pointer;
  font-family: var(--mono);
  line-height: 1;
  transition:
    transform 70ms cubic-bezier(0.7, 0, 0.3, 1),
    box-shadow 70ms cubic-bezier(0.7, 0, 0.3, 1);
}

/* LED in a recessed well — single element, two states.
   Off: only inset shadow (dark dot in a pit).
   Armed: outset bloom appears (lens powered on) plus hot center highlight. */
.loop-tally-led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, #000 70%, var(--ink));
  box-shadow:
    inset 0 0.5px 1px color-mix(in srgb, #000 80%, transparent),
    0 0.5px 0 color-mix(in srgb, var(--bg) 50%, transparent);
  transition: background 100ms ease, box-shadow 200ms ease;
}

/* Engraved label — printed-on-plastic feel via 0.5px highlight beneath each
   glyph (south-edge highlight = debossed; north-edge would be embossed). */
.loop-tally-label {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  text-shadow: 0 0.5px 0 color-mix(in srgb, var(--bg) 65%, transparent);
}

.loop-tally:hover .loop-tally-label {
  color: var(--ink);
}

/* Press — keycap travels 1px down into its well; bevel inverts (top edge
   becomes shadow, baseplate drop collapses). Snap timing 70ms with sharp
   bezier ends — no spring. */
.loop-tally:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 1.5px color-mix(in srgb, #000 45%, transparent),
    inset 0 -0.5px 0 color-mix(in srgb, var(--bg) 30%, transparent),
    inset 0.5px 0 0 color-mix(in srgb, #000 12%, transparent),
    inset -0.5px 0 0 color-mix(in srgb, var(--bg) 12%, transparent),
    0 0 0 color-mix(in srgb, #000 0%, transparent),
    0 0 0 color-mix(in srgb, #000 0%, transparent);
}

/* Armed — LED lens lights warm orange (Flexoki). Hot center, tight bloom,
   then a softer outer halo. Three concentric shadows = real lit-LED depth. */
.loop-tally.is-armed .loop-tally-led {
  background: #DA702C;
  box-shadow:
    inset 0 0.5px 0.5px color-mix(in srgb, #FFE9C8 70%, transparent),
    0 0 0 0.5px color-mix(in srgb, #DA702C 95%, transparent),
    0 0 2.5px #DA702C,
    0 0 6px color-mix(in srgb, #DA702C 55%, transparent);
}

.loop-tally.is-armed .loop-tally-label {
  color: var(--ink);
}

/* Dark theme — amber lens (Flexoki yellow-600), reads cleaner on black bg */
[data-theme="dark"] .loop-tally.is-armed .loop-tally-led {
  background: #D0A215;
  box-shadow:
    inset 0 0.5px 0.5px color-mix(in srgb, #FFE9C8 60%, transparent),
    0 0 0 0.5px color-mix(in srgb, #D0A215 95%, transparent),
    0 0 2.5px #D0A215,
    0 0 6px color-mix(in srgb, #D0A215 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .loop-tally,
  .loop-tally-led {
    transition: none;
  }
}

/* THEME LOCK — appears only when LOOP is armed (sibling combinator on .is-armed).
   Same TE keycap vocabulary, smaller footprint. Locked-state lights the icon
   accent like the LOOP LED does when armed. */
.theme-lock {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 2.5px;
  background:
    radial-gradient(ellipse 130% 70% at 50% -10%,
      color-mix(in srgb, var(--bg) 55%, var(--ink-light)) 0%,
      color-mix(in srgb, var(--ink) 22%, var(--bg)) 55%,
      color-mix(in srgb, var(--ink) 38%, var(--bg)) 100%);
  box-shadow:
    inset 0 0.5px 0 color-mix(in srgb, var(--bg) 75%, transparent),
    inset 0 -0.5px 0 color-mix(in srgb, #000 38%, transparent),
    inset 0.5px 0 0 color-mix(in srgb, var(--bg) 22%, transparent),
    inset -0.5px 0 0 color-mix(in srgb, #000 22%, transparent),
    0 1px 0 color-mix(in srgb, #000 32%, transparent),
    0 1.5px 2px color-mix(in srgb, #000 22%, transparent);
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  cursor: pointer;
  transition:
    transform 70ms cubic-bezier(0.7, 0, 0.3, 1),
    box-shadow 70ms cubic-bezier(0.7, 0, 0.3, 1),
    color 140ms ease;
}

/* Reveal when adjacent LOOP key is armed */
.loop-tally.is-armed ~ .theme-lock {
  display: inline-flex;
}

.theme-lock:hover {
  color: var(--ink);
}

.theme-lock:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 1.5px color-mix(in srgb, #000 45%, transparent),
    inset 0 -0.5px 0 color-mix(in srgb, var(--bg) 30%, transparent),
    inset 0.5px 0 0 color-mix(in srgb, #000 12%, transparent),
    inset -0.5px 0 0 color-mix(in srgb, var(--bg) 12%, transparent),
    0 0 0 color-mix(in srgb, #000 0%, transparent),
    0 0 0 color-mix(in srgb, #000 0%, transparent);
}

.theme-lock.is-locked {
  color: #DA702C;
}

[data-theme="dark"] .theme-lock.is-locked {
  color: #D0A215;
}

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

.page {
  max-width: none;
  min-height: calc(100vh - 46px);
  padding: 2.25rem 1.75rem 3rem;
}

.archive-console {
  border: 1px solid var(--rule);
  background: var(--surface-soft);
}

.console-bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding: 0.55rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.console-kicker,
.console-status {
  margin: 0;
}

/* Shelf page title — "Shelf" is the page name and carries primary weight;
   "Things on my desk." is the dek beneath. Title-first grammar, not the
   LABEL-value grammar used on metadata surfaces elsewhere. */
.page-shelf .console-kicker {
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.console-status {
  color: var(--ink-faint);
  text-align: right;
}

.page-home,
.page-error {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
}

.home-console {
  min-height: 0;
}

.home-hero {
  display: block;
  padding: 1.1rem 1.15rem;
  border-bottom: 1px solid var(--rule);
}

.home-identity {
  margin: 0 0 2rem;
}

.home-title {
  font-family: var(--serif);
  font-size: var(--home-title-size);
  font-weight: var(--home-title-weight);
  line-height: var(--home-title-line);
  letter-spacing: var(--home-title-letter);
  font-variation-settings: var(--home-title-variation);
  margin: 0;
  white-space: nowrap;
}

.home-subtitle {
  font-family: var(--reading);
  font-size: var(--home-subtitle-size);
  font-weight: var(--home-subtitle-weight);
  font-style: var(--home-subtitle-style);
  line-height: var(--home-subtitle-line);
  margin: 0.35rem 0 0;
  color: var(--home-subtitle-color);
}

.home-tagline {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--section-label);
  margin: 0.3rem 0 0;
}

.console-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 0;
}

.console-pane {
  padding: 1rem 1.15rem 1.1rem;
  border-right: 0;
  border-bottom: 1px solid var(--rule);
}

.console-grid .console-pane:last-child {
  border-bottom: 0;
}

.console-pane h2,
.rail-label,
.section-label-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.console-pane h2 {
  margin: 0 0 0.55rem;
  color: var(--section-label);
}

.console-pane p {
  max-width: 52rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

.console-list {
  list-style: disc outside;
  margin: 0;
  padding-left: 1.1rem;
}

.console-list li {
  padding: 0.18rem 0;
  line-height: 1.45;
}

.console-list li::marker {
  color: var(--ink-muted);
}

/* Plain about-page layout — no boxes, no section dividers, just type + rabbit. */
.home-plain {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
}


.home-plain .home-section {
  margin: 1.6rem 0;
}

.home-plain .home-section h2 {
  font-family: var(--home-label-family);
  font-size: var(--home-label-size);
  font-weight: var(--home-label-weight);
  letter-spacing: var(--home-label-spacing);
  line-height: var(--home-label-line);
  text-transform: uppercase;
  margin: 0 0 0.62rem;
  color: var(--section-label);
}

/* About-page reading scale — unify p and li on EB Garamond at one size.
   Without the family override on li, the cascade hands li to --serif
   (Source Serif 4, taller x-height) while p gets --reading (EB Garamond,
   smaller x-height) — same px size, two visual sizes. The font-family
   line on .home-plain .home-section is the actual fix; the size bump
   is the readability bump. */
.home-plain .home-section {
  font-family: var(--reading);
}

.home-plain .home-section p {
  margin: 0;
  font-size: var(--reading-size);
  line-height: var(--reading-line);
  max-width: 52rem;
}

.home-plain .home-intro p + p {
  margin-top: 0.35rem;
}

.home-plain .home-section ul {
  list-style: disc outside;
  margin: 0;
  padding-left: 1.25rem;
}

.home-plain .home-section li {
  padding: 0.18rem 0;
  font-size: var(--reading-size);
  line-height: var(--reading-list-line);
}

.home-plain .home-section li::marker {
  color: var(--ink-muted);
}

:root[data-font="bricolage-eb"] .home-identity {
  margin-bottom: 1.7rem;
}

:root[data-font="bricolage-eb"] .home-plain {
  max-width: 700px;
}

:root[data-font="bricolage-eb"] .home-subtitle {
  max-width: 38rem;
}

:root[data-font="bricolage-eb"] .home-plain .home-section p {
  max-width: 42.5rem;
}

:root[data-font="bricolage-eb"] .home-plain .home-intro p + p {
  margin-top: 0.64rem;
}

:root[data-font="bricolage-eb"] .home-plain .home-lede {
  color: color-mix(in srgb, var(--ink) 92%, var(--bg));
}

:root[data-font="bricolage-eb"] .home-plain .home-aside {
  font-family: var(--reading);
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.48;
  color: color-mix(in srgb, var(--ink) 72%, var(--bg));
}

:root[data-font="bricolage-eb"] .home-plain .home-intro .home-aside {
  margin-top: 1rem;
}

:root[data-font="bricolage-eb"] .home-plain .home-intro .home-aside + .home-aside {
  margin-top: 0.1rem;
}

:root[data-font="bricolage-eb"] .home-plain .home-meta {
  display: grid;
  gap: 0.42rem;
  max-width: 42.5rem;
  margin-top: 1.05rem;
  padding-left: 0.85rem;
  border-left: 2px solid color-mix(in srgb, var(--section-label) 42%, transparent);
  font-family: var(--reading);
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--ink) 74%, var(--bg));
}

:root[data-font="bricolage-eb"] .home-plain .home-work {
  margin-top: 1.75rem;
  margin-bottom: 1.95rem;
}

:root[data-theme="dark"][data-font="bricolage-eb"] {
  --home-subtitle-color: var(--brico-subtitle, color-mix(in srgb, var(--ink-light) 82%, var(--bg)));
}

:root[data-theme="dark"][data-font="bricolage-eb"] .home-plain .home-aside {
  color: color-mix(in srgb, var(--ink) 72%, var(--bg));
}

:root[data-theme="dark"][data-font="bricolage-eb"] .home-plain .home-meta {
  border-left-color: color-mix(in srgb, var(--section-label) 42%, transparent);
  color: color-mix(in srgb, var(--ink) 74%, var(--bg));
}

@media (prefers-color-scheme: dark) {
  :root[data-font="bricolage-eb"]:not([data-theme="light"]) {
    --home-subtitle-color: var(--brico-subtitle, color-mix(in srgb, var(--ink-light) 82%, var(--bg)));
  }

  :root[data-font="bricolage-eb"]:not([data-theme="light"]) .home-plain .home-aside {
    color: color-mix(in srgb, var(--ink) 72%, var(--bg));
  }

  :root[data-font="bricolage-eb"]:not([data-theme="light"]) .home-plain .home-meta {
    border-left-color: color-mix(in srgb, var(--section-label) 42%, transparent);
    color: color-mix(in srgb, var(--ink) 74%, var(--bg));
  }
}

.theme-preview {
  max-width: 980px;
  margin: 0 auto;
  padding: 3rem 1.5rem 7rem;
}

.theme-preview-head {
  max-width: 42rem;
  margin-bottom: 2rem;
}

.theme-preview-head h1 {
  margin: 0 0 0.35rem;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1;
}

.theme-preview-head p,
.theme-card p {
  margin: 0;
  font-family: var(--reading);
  font-size: 1.125rem;
  line-height: 1.55;
}

.theme-preview-head p + p {
  margin-top: 0.5rem;
}

.theme-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.theme-card {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  min-height: 15rem;
  padding: 1rem;
  border: 1px solid var(--rule-light);
  background: color-mix(in srgb, var(--bg) 92%, var(--ink) 8%);
}

.theme-card h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-card-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 2rem;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}

.theme-card-swatches span {
  display: block;
}

.theme-card-links {
  display: flex;
  gap: 0.8rem;
  align-self: end;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.theme-card-links a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

.theme-card-links a:hover {
  border-bottom-color: transparent;
}

.theme-card--current {
  background: #FFFCF0;
  color: #100F0F;
}

.theme-card--current .theme-card-links a {
  color: #24837B;
  border-bottom-color: #24837B;
}

.theme-card--soft {
  background: #F2F0E5;
  color: #1C1B1A;
}

.theme-card--soft .theme-card-links a {
  color: #24837B;
  border-bottom-color: #24837B;
}

.theme-card--moss {
  background: #F2F0E5;
  color: #1A1E0C;
}

.theme-card--moss .theme-card-links a {
  color: #66800B;
  border-bottom-color: #66800B;
}

.theme-card--blue {
  background: #E1ECEB;
  color: #101A24;
}

.theme-card--blue .theme-card-links a {
  color: #205EA6;
  border-bottom-color: #205EA6;
}

.theme-card--plum {
  background: #F0EAEC;
  color: #1A1623;
}

.theme-card--plum .theme-card-links a {
  color: #A02F6F;
  border-bottom-color: #A02F6F;
}

.theme-card .theme-card-links a:hover {
  border-bottom-color: transparent;
}

.home-work-details {
  padding-top: 0;
}

.home-work-details summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  list-style: none;
  color: var(--section-label);
}

.home-work-details summary::-webkit-details-marker {
  display: none;
}

.home-work-details summary::marker {
  content: "";
}

.home-work-details summary:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 4px;
  border-radius: 2px;
}

.home-work-title {
  font-family: var(--home-label-family);
  font-size: var(--home-label-size);
  font-weight: var(--home-label-weight);
  letter-spacing: var(--home-label-spacing);
  line-height: var(--home-label-line);
  text-transform: uppercase;
  color: var(--section-label);
}

.home-work-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--reading);
  font-size: 0.96rem;
  font-style: normal;
  color: var(--accent-rest);
  transition: color 140ms ease;
}

.home-work-cue::before {
  content: "+";
  min-width: 0.65em;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--home-accent);
}

.home-work-details[open] .home-work-cue::before {
  content: "-";
}

.home-work-details summary:hover .home-work-cue,
.home-work-details summary:focus-visible .home-work-cue {
  color: var(--home-accent);
}

.home-work-cue-open {
  display: none;
}

.home-work-details[open] .home-work-cue-closed {
  display: none;
}

.home-work-details[open] .home-work-cue-open {
  display: inline;
}

.home-work-details[open] ul {
  margin-top: 0.65rem;
}

.home-plain .home-section.home-work li {
  font-size: var(--reading-work-size);
  line-height: var(--reading-work-line);
  padding: 0.08rem 0;
}

:root[data-font="bricolage-eb"] .home-work-details summary {
  gap: 0.58rem;
}

:root[data-font="bricolage-eb"] .home-work-title {
  font-size: var(--home-label-size);
  letter-spacing: var(--home-label-spacing);
  color: var(--section-label);
}

:root[data-font="bricolage-eb"] .home-work-cue {
  gap: 0.28rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

:root[data-font="bricolage-eb"] .home-work-cue::before {
  font-size: 1em;
}

/* About-page hare: parked. Asset at img/rabbits/hare-engraved.png stays
   on disk for when the rabbit motif returns refined. */

/* About-page subdivider — quiet horizontal rule between body and nav links.
   Matches the structural --rule-light color used elsewhere on the site. */
.home-plain .home-divider {
  border: none;
  border-top: 1px solid var(--rule-light);
  margin: 2.4rem 0 1.8rem;
  width: 100%;
}

/* Consulting page — running prose. Inherits .home-plain typography
   and width; adds comfortable paragraph spacing for sustained reading. */
.home-plain .consulting-prose p + p {
  margin-top: 1.05rem;
}

.home-plain .consulting-contact {
  margin-top: 1.6rem;
}

/* Consulting page picks up the site accent so mailto + prose links
   read as links rather than plain text (the global a-rule strips
   color and underline by default). */
.page-consulting {
  --home-accent: var(--accent);
}

[data-theme="dark"] .page-consulting {
  --home-accent: var(--accent);
}

/* Persistent thin underline on prose links — running text needs a
   non-hover signal that "in good hands" is a link. Mailto follows the
   site convention (hover-only underline). */
.home-plain .consulting-prose a:not([href^="mailto"]) {
  color: var(--home-accent);
  border-bottom: 1px solid var(--home-accent);
}

.home-plain .consulting-prose a:not([href^="mailto"]):hover {
  border-bottom-color: transparent;
}

.page-consulting a[href^="mailto"] {
  color: var(--home-accent);
}

.page-consulting a[href^="mailto"]:hover {
  border-bottom-color: var(--home-accent);
}

/* About-page nav-link list — descriptive phrase + colon + linked target.
   Slightly tighter line-height than body prose to read as a list, not paragraphs. */
.home-plain .home-nav {
  border-top: 1px solid var(--rule-light);
  padding-top: 1.55rem;
}

.home-plain .home-nav p {
  margin: 0.35rem 0;
  line-height: 1.5;
}

.home-plain .home-nav a {
  color: var(--home-accent);
}

.home-plain .home-nav a:hover {
  border-bottom: 1px solid var(--home-accent);
}

/* Disabled affordances on the homepage nav (Consulting, Stream until those
   pages exist). Read as links — same accent color as live ones — but the
   dotted underline + not-allowed cursor flag them as not-yet. The hover
   tooltip ("in progress – pardon the dust") still fires from the title attr. */
.home-plain .home-nav .dead {
  color: var(--home-accent);
  text-decoration: underline dotted;
  text-underline-offset: 0.18em;
  cursor: not-allowed;
}

:root[data-font="bricolage-eb"] .home-plain .home-nav h2,
:root[data-font="bricolage-eb"] .home-plain .home-contact h2 {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.55rem;
}

:root[data-font="bricolage-eb"] .home-plain .home-nav p,
:root[data-font="bricolage-eb"] .home-plain .home-contact p {
  font-size: 0.98rem;
  line-height: 1.55;
}

:root[data-font="bricolage-eb"] .home-plain .home-section li strong {
  font-weight: 600;
}

:root[data-font="bricolage-eb"] .home-plain .home-nav a,
:root[data-font="bricolage-eb"] .home-plain .home-contact a {
  color: var(--home-accent);
  border-bottom: 1px solid var(--home-accent);
}

:root[data-font="bricolage-eb"] .home-plain .home-nav a:hover,
:root[data-font="bricolage-eb"] .home-plain .home-contact a:hover {
  border-bottom-color: transparent;
}

:root[data-font="bricolage-eb"] .home-plain .home-nav .dead {
  color: var(--home-accent);
  text-decoration-color: var(--home-accent);
}

/* About-page trail band — burrow → dotted path → leaping hare. It acts as
   the footer-ish divider before the lower nav/contact block. */
.home-trail-band {
  position: fixed;
  left: 0;
  bottom: clamp(3rem, 6.5vh, 4.75rem);
  z-index: 1;
  width: 100vw;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

.home-trail-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--trail-ink);
  opacity: var(--trail-opacity);
  -webkit-mask: url("/img/rabbits/about-trail.png") center / 100% auto no-repeat;
  mask: url("/img/rabbits/about-trail.png") center / 100% auto no-repeat;
}

.home-trail-band + .home-nav {
  margin-top: clamp(3.25rem, 4.6vh, 4rem);
}

.home-trail-band img {
  display: block;
  width: 100%;
  height: auto;
  /* Source PNG is alpha-encoded AND cropped tight to the ink bbox
     (2172×156, aspect ~13.9:1), so width:100% + height:auto gives the
     band's height directly from the image's natural proportions —
     no object-fit gymnastics, no transparent padding. */
  opacity: 0;
}

.home-fixed-dust {
  position: fixed;
  right: clamp(0.9rem, 2vw, 1.5rem);
  bottom: clamp(0.7rem, 1.8vh, 1.1rem);
  z-index: 21;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  max-width: min(32rem, calc(100vw - 2rem));
  font-family: var(--mono);
  font-size: clamp(0.92rem, 0.84rem + 0.25vw, 1.06rem);
  line-height: 1.35;
  text-align: right;
  color: var(--ink-muted);
  opacity: 0.74;
  pointer-events: none;
  user-select: none;
}

.home-fixed-dust .kao {
  font-size: 1.12em;
  letter-spacing: 0.02em;
}

.home-fixed-dust .kao--night {
  display: none;
}

[data-theme="dark"] .home-fixed-dust {
  opacity: 0.76;
}

[data-theme="dark"] .home-fixed-dust .kao--day {
  display: none;
}

[data-theme="dark"] .home-fixed-dust .kao--night {
  display: inline;
}

.site-colophon {
  position: fixed;
  left: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(0.8rem, 2vh, 1.2rem);
  z-index: 21;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  max-width: min(36rem, calc(100vw - 2rem));
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--ink-muted);
  opacity: 0.7;
  pointer-events: auto;
  user-select: none;
}

.site-colophon a {
  color: inherit;
}

.site-colophon a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.site-colophon span {
  white-space: nowrap;
}

.site-colophon .colophon-fleuron {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.45em;
  line-height: 0.8;
  vertical-align: -0.18em;
  font-style: normal;
  color: var(--ink-muted);
  margin-left: 0.15em;
}

.page-shelf {
  height: auto;
  min-height: calc(100vh - 46px);
  overflow: visible;
  display: block;
}

.shelf-console-head {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1500px;
  margin: 2.75rem auto 0;
  border: 1px solid var(--rule);
  border-bottom: 0;
  padding: 0.7rem 0.85rem 1rem;
  position: relative;
  background: var(--surface-soft);
}

.shelf-console-head .shelf-subtitle {
  margin: 0.15rem 0 0;
  padding: 0;
  font-family: var(--serif);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-faint);
  letter-spacing: 0;
}

.page-shelf .library {
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  max-width: 1500px;
  padding: 0;
  border: 1px solid var(--rule);
  margin: 0 auto;
  background: var(--surface-soft);
}

.topic-index {
  top: 1rem;
  max-height: calc(100vh - 2rem);
  border-right: 1px solid var(--rule);
  padding: 0.75rem;
  gap: 0;
}

.rail-label {
  margin: 0 0 0.5rem;
  color: var(--section-label);
}

.topic-index a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 0.38rem 0.45rem;
  border-top: 1px solid var(--rule-light);
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--ink-light);
}

.topic-index a b {
  font: inherit;
  color: var(--ink-muted);
}

.topic-index a.active {
  background: var(--section-label);
  color: var(--bg);
  font-weight: 700;
}

.topic-index a.active b {
  color: var(--bg);
}

.grid-scroll {
  padding: 0;
}

.topic-section {
  margin: 0;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 4.75rem;
}

.topic-section:first-child {
  margin-top: 2.5rem;
}

.topic-section:last-child {
  border-bottom: 0;
}

/* Full inverted section headers — white on black bar, all 17 sections.
   Leaping rabbit left-marks each topic as a lead-in motif (directional,
   "entering the warren for this topic"). Sitting rabbit lives on the
   page header above (stationary, book-frontispiece mark). */
.section-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  margin: 0;
  padding: 0.6rem 0.9rem;
  background: var(--ink);
  color: var(--bg);
  border-bottom: 0;
  align-items: center;
}

.section-label-mark {
  width: 44px;
  height: auto;
  flex-shrink: 0;
  display: block;
  transform: translateY(-2px);
  /* Engraved PNG is black-on-transparent. Section bar is dark in light theme,
     so invert to render the rabbit in cream. Dark theme flips bar to cream
     so we drop the invert. */
  filter: invert(1);
}

[data-theme="dark"] .section-label-mark {
  filter: none;
}

.section-label-name {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
}

.section-label-count {
  color: color-mix(in srgb, var(--bg) 70%, var(--ink) 30%);
}

/* Shelf page-header mark — keep the engraving below native size so it
   stays crisp, with its ground line landing on the console rule. */
.shelf-head-mark {
  position: absolute;
  top: 0;
  left: 0.85rem;
  width: auto;
  height: 48px;
  transform: translateY(-100%);
  opacity: 0.66;
  pointer-events: none;
}

[data-theme="dark"] .shelf-head-mark {
  filter: invert(1);
  opacity: 0.76;
}

/* Shelf grid — Are.na-grammar, image-forward + archival metadata.
   Covers display at native aspect (object-fit: contain inside min-height
   frame so masonry is orderly). Text under each cover is metadata only:
   type, title, author, dek. Blurb/quote/note stay in HTML for detail
   views + screen readers but don't render at grid scale. */
.grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: start;
  gap: 1.25rem 0.75rem;
  margin: 0;
  padding: 0.9rem 0.8rem 1.2rem;
}

.grid li {
  list-style: none;
  display: flex;
  flex-direction: column;
  border: 0;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  cursor: default;
  position: relative;
}

.grid li .cell-cover {
  display: grid;
  place-items: end center;
  width: 100%;
  min-height: 6.5rem;
  background: transparent;
  border: 0;
  overflow: visible;
  margin-bottom: 0.4rem;
}

.grid li .cell-cover img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 1px 0 0 var(--rule-light);
}

.grid li .cell-cover a {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.grid li .cell-type {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--label-quiet);
  line-height: 1.2;
  margin-bottom: 0.18rem;
}

.grid li .cell-title {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.22;
  color: var(--ink);
  cursor: default;
}

.grid li a.cell-title {
  text-decoration: none;
  cursor: pointer;
}

.grid li a.cell-title:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

[data-theme="dark"] .grid li a.cell-title:hover {
  color: var(--accent);
}

.grid li .cell-author {
  font-family: var(--mono);
  font-size: 0.58rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ink-light);
  margin-top: 0.14rem;
}

.grid li .cell-dek {
  font-family: var(--mono);
  font-size: 0.6rem;
  line-height: 1.35;
  color: var(--ink-faint);
  font-style: normal;
  margin-top: 0.05rem;
}

/* Voice — note / quote / blurb — wrapped in `.cell-voice`, rendered
   as an always-visible ghost-card attached under the cell meta.
   A subtle top rule separates it from the type/title/author block
   so the annotation reads as a distinct layer, not a run-on. */
.grid li .cell-voice {
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--rule-light);
}

.grid li .cell-note,
.grid li .cell-quote,
.grid li .cell-blurb {
  margin: 0.35rem 0 0;
  font-family: var(--serif);
  font-size: 0.7rem;
  line-height: 1.38;
}

.grid li .cell-voice > :first-child { margin-top: 0; }

.grid li .cell-note {
  font-style: italic;
  color: var(--ink-light);
}

.grid li .cell-quote {
  font-style: italic;
  color: var(--ink-light);
}
.grid li .cell-quote::before { content: '\201C'; }
.grid li .cell-quote::after  { content: '\201D'; }

.grid li .cell-blurb {
  color: var(--ink-faint);
}

/* Related links — primary residual affordance now that voice is
   hover-gated. Larger, readable, ambient muted at rest; card-hover
   blooms the whole stack to mustard; a direct link-hover gets the
   punchier treatment (weight + thicker underline). */
.cell-links {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.cell-links li {
  list-style: none;
  display: block;
  line-height: 1.35;
}

.cell-links a {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, font-weight 160ms ease, border-bottom-width 160ms ease;
}

.grid li:hover .cell-links a {
  color: var(--accent-rest);
}

[data-theme="dark"] .grid li:hover .cell-links a {
  color: var(--accent-rest);
}

.grid li .cell-links a:hover {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
}

[data-theme="dark"] .grid li .cell-links a:hover {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

/* Shelf hover spotlight — when any cell is hovered or keyboard-focused,
   the others soften and desaturate slightly. Hover-pointer only, so touch
   devices don't get stuck states; transition disabled for reduced-motion. */
@media (hover: hover) {
  .grid li {
    transition: filter 220ms ease, opacity 220ms ease;
  }
  .grid-scroll:has(.grid li:hover, .grid li:focus-visible) .grid li:not(:hover):not(:focus-visible) {
    filter: blur(0.5px) saturate(0.6);
    opacity: 0.75;
  }
}

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

.page-error {
  max-width: 980px;
}

.page-stream {
  height: calc(100vh - 46px);
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0.85rem 1.25rem 1.25rem;
  overflow: hidden;
}

.page-stream + .site-colophon {
  display: none;
}

.stream-console {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  background: var(--surface-soft);
}

[data-theme="dark"] .stream-console {
  background: var(--surface-soft);
}

.stream-head {
  flex: 0 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  padding: 0.72rem 0.85rem 0.8rem;
  border-bottom: 1px solid var(--rule);
}

.page-stream .console-kicker {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
}

.stream-subtitle {
  margin: 0.28rem 0 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--section-label);
}

.stream-columns {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  border-top: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 1.68rem,
      color-mix(in srgb, var(--rule-light) 36%, transparent) 1.68rem,
      color-mix(in srgb, var(--rule-light) 36%, transparent) calc(1.68rem + 1px)
    );
}

.stream-column {
  flex: 0 0 calc(100% / 5);
  min-width: 14rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--rule);
  scroll-snap-align: start;
  background: color-mix(in srgb, var(--surface-soft) 80%, transparent);
}

.stream-column:last-child {
  border-right: 0;
}

.stream-column-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.6rem;
  padding: 0.58rem 0.7rem 0.48rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-soft);
}

[data-theme="dark"] .stream-column-head {
  background: var(--surface-soft);
}

.stream-column-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--section-label);
}

.stream-column-count {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.stream-list {
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: 0;
}

.stream-entry {
  margin: 0;
  border-bottom: 1px solid var(--rule-light);
}

.stream-entry-link {
  display: block;
  padding: 0.72rem 0.72rem 0.8rem;
}

.stream-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.48rem;
  align-items: baseline;
  margin-bottom: 0.28rem;
}

.stream-type,
.stream-source,
.stream-date {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--label-quiet);
}

.stream-source,
.stream-date {
  color: var(--ink-muted);
}

.stream-author,
.stream-title,
.stream-masthead,
.stream-dek {
  display: block;
}

.stream-author {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.stream-title {
  margin-top: 0.08rem;
  font-family: var(--serif);
  font-size: 1.04rem;
  font-weight: 520;
  line-height: 1.24;
  color: var(--ink);
}

.stream-dek {
  margin-top: 0.35rem;
  font-family: var(--serif);
  font-size: 0.78rem;
  line-height: 1.38;
  color: var(--ink-light);
}

.stream-masthead {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2vw, 2.05rem);
  font-weight: 620;
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.stream-list--feed .stream-entry-link {
  padding-top: 0.9rem;
  padding-bottom: 1rem;
}

.stream-entry-link:hover .stream-title,
.stream-entry-link:hover .stream-masthead {
  color: var(--accent-text);
}

.stream-entry-link:hover .stream-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

@media (max-width: 1360px) {
  .stream-column {
    flex-basis: calc(100% / 4);
  }
}

@media (max-width: 1080px) {
  .stream-column {
    flex-basis: calc(100% / 3);
  }
}

@media (max-width: 820px) {
  .stream-column {
    flex-basis: calc(100% / 2);
  }

  .stream-head {
    align-items: start;
  }

  .page-stream .console-kicker {
    font-size: 1.45rem;
  }
}

@media (max-width: 620px) {
  .site-nav {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    width: 100vw;
    max-width: 100vw;
  }

  .nav-right {
    min-width: 0;
    margin-left: 1.2rem;
    gap: 0.45rem;
  }

  .nav-links {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.14rem 0.32rem;
    max-width: none;
  }

  .nav-name,
  .nav-links a,
  .nav-links .dead {
    font-size: 0.68rem;
  }

  .nav-links .dead {
    display: none;
  }

  .dimmer {
    display: none;
  }

  .nav-links > *::after {
    content: none !important;
  }

  .page-stream {
    height: calc(100vh - 46px);
    padding: 0.65rem 0.65rem 0.8rem;
  }

  .stream-console {
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
  }

  .stream-head {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 0.7rem;
  }

  .stream-head .console-status {
    text-align: left;
  }

  .stream-columns {
    scroll-snap-type: x mandatory;
  }

  .stream-column {
    flex-basis: 100%;
    min-width: 0;
  }

  .stream-column:last-child {
    border-right: 1px solid var(--rule);
  }

  .stream-entry-link {
    padding: 0.82rem 0.78rem 0.9rem;
  }

  .stream-title {
    font-size: 1.12rem;
  }
}

.error-body {
  padding: 2rem 1.35rem 2.5rem;
}

.error-body h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
}

.error-body p {
  max-width: 38rem;
  font-size: 1.1rem;
}

.error-body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  color: var(--ink);
  transition: color 120ms ease;
}

.error-body a:hover {
  color: var(--accent);
}

[data-theme="dark"] .error-body a:hover {
  color: var(--accent);
}

@media (max-width: 1200px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .console-grid {
    grid-template-columns: 1fr;
  }

  .console-pane,
  .console-pane:nth-child(2n) {
    border-right: 0;
  }

  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 500px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.6rem; }
}

@media (max-width: 767px) {
  .site-nav,
  .page {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .home-hero {
    padding: 1rem 0.9rem;
  }

  .console-grid {
    display: block;
  }

  .console-pane {
    padding: 1rem;
  }

  .shelf-console-head {
    display: block;
    margin-top: 2.75rem;
  }

  .topic-index {
    border: 1px solid var(--rule);
    border-top: 0;
    padding: 4rem 1rem 2rem;
  }

  .grid li .cell-link {
    padding: 0.75rem;
  }

  .site-colophon {
    left: 1rem;
    bottom: 0.75rem;
    gap: 0.15rem 0.55rem;
    max-width: 9.5rem;
    font-size: 0.62rem;
  }

  .home-fixed-dust {
    font-size: 0.86rem;
  }
}

.shelf-console-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 18rem) auto;
  gap: 1rem;
  align-items: center;
}

@media (max-width: 767px) {
  .shelf-console-head {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

/* ── Responsive sidebar overlay (tablet + below) ────────────────
   Must come after archive-instrument's .page-shelf .library rule
   so source order wins at equal specificity. */
@media (max-width: 1200px) {
  .sidebar-toggle {
    display: block;
    top: 3.5rem;
  }

  .page-shelf .library {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 1rem 1.25rem 3rem;
  }

  .topic-index {
    position: fixed;
    top: 0;
    left: 0;
    width: min(22rem, 88%);
    height: 100vh;
    max-height: none;
    background: var(--bg);
    padding: 4rem 1.5rem 2rem;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: 2px 0 12px -6px rgba(0, 0, 0, 0.12);
    -webkit-mask-image: none;
            mask-image: none;
    border-right: 0;
  }

  .topic-index.open {
    transform: translateX(0);
  }

  .topic-index a {
    font-size: 0.92rem;
    padding: 0.4rem 0 0.4rem 1.2rem;
  }
}