/* ==========================================================================
   Odisena — Institutional Systems Atlas
   Warm paper / dark ink foundation, one electric signal color, precise grid.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Production-safe font fallbacks (no dependencies, pure CSS).
   If the Fontshare/Google CDN fails, these metric-adjusted system fallbacks
   keep the type hierarchy intact and minimize layout shift (CLS). Each custom
   family has a size/metric-matched local fallback so line lengths stay stable
   whether or not the web font arrives. Web fonts use font-display: swap.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Zodiak Fallback';
  src: local('Georgia'), local('Times New Roman'), local('serif');
  size-adjust: 102%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Satoshi Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial'), local('sans-serif');
  size-adjust: 100%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'JetBrains Mono Fallback';
  src: local('SFMono-Regular'), local('Menlo'), local('Consolas'), local('monospace');
  size-adjust: 100%;
}

:root {
  /* Paper / ink foundation (light) */
  --paper: #f4ede0;        /* warm paper */
  --paper-2: #ece3d3;      /* recessed paper */
  --paper-3: #e3d8c4;      /* card edge / rule tint */
  --ink: #1b1712;          /* dark ink */
  --ink-2: #4a4238;        /* secondary ink */
  --ink-3: #746a5b;        /* muted ink */
  --hairline: #cdbfa6;     /* fine-line diagram stroke */
  --hairline-strong: #b3a58a;

  /* Electric signal — a single accent, used sparingly */
  --signal: #d8461f;       /* warm vermilion */
  --signal-ink: #ffffff;
  --signal-soft: rgba(216, 70, 31, 0.10);

  /* Semantic status hues (kept restrained, mono-adjacent).
     Chips paint on --bg and on --bg-2 (the switcher panel, and a site card
     under hover), so every hue is measured against the darker of the two.
     Hue and saturation are the original palette values; only lightness moved. */
  --st-active: #397046;
  --st-external: #4a4238;
  --st-designed: #2f5f8a;
  --st-built: #5f4a8a;
  --st-proposed: #7d602b;
  /* The restricted chip needs its own hue: it read from --fg-3, which is tuned
     for muted body copy on --bg and lands at 4.17:1 on --bg-2. */
  --st-restricted: #6d6355;

  /* Constellation category accents — the home directory colour-codes each site
     by the category it belongs to. Every accent clears WCAG AA (>= 4.5:1)
     against --bg in this theme, so it can safely carry label text. */
  --acc-studio: #b23c17;
  --acc-record: #1a6b53;
  --acc-build: #1d5d8a;
  --acc-trust: #6a3d9e;
  --acc-command: #5b5346;

  /* Type */
  --font-display: 'Zodiak', 'Zodiak Fallback', 'Georgia', serif;
  --font-body: 'Satoshi', 'Satoshi Fallback', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, 'SFMono-Regular', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.125rem;
  --text-3xl: 3rem;
  --text-hero: clamp(2.75rem, 6.5vw, 5.5rem);

  /* Space */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem;
  --sp-24: 6rem; --sp-32: 8rem;

  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 3px;

  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: var(--paper-3);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --line: var(--hairline);
}

/* Dark mode — dark ink foundation with warm paper accents */
:root[data-theme='dark'] {
  --bg: #14110d;
  --bg-2: #1c1813;
  --bg-3: #26211a;
  --fg: #f4ede0;
  --fg-2: #cabca6;
  --fg-3: #9b8f7c;
  --line: #3a3227;
  --signal: #ff5b2e;
  /* White on the brightened dark-mode signal is only 3.09:1; the ink tone is 6.08:1. */
  --signal-ink: #14110d;
  --signal-soft: rgba(255, 91, 46, 0.14);
  --st-active: #6fbf82;
  --st-external: #cabca6;
  --st-designed: #6fa8dc;
  --st-built: #ab96d9;
  --st-proposed: #d3ad61;
  --st-restricted: #9b8f7c;
  --acc-studio: #ff7a52;
  --acc-record: #5fcba4;
  --acc-build: #74b6ea;
  --acc-trust: #bda2f2;
  --acc-command: #bdb09b;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A theme flip has to land in one frame. Headings and card surfaces read their
   colours straight from the tokens and repaint instantly, so anything that
   eases background or color across the switch is briefly out of step with
   them — the hero H1 spent 400ms as light-on-light and vanished. Components
   keep their hover and focus transitions; this only suppresses them for the
   single frame in which the theme attribute changes. */
:root[data-theme-switching] *,
:root[data-theme-switching] *::before,
:root[data-theme-switching] *::after {
  transition: none !important;
}

/* Paper grain / grid texture — subtle, drawn not imaged */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: 0.10;
}
:root[data-theme='dark'] body::before { opacity: 0.16; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-4);
  color: var(--fg);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p { margin: 0 0 var(--sp-4); max-width: 68ch; }

a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--signal); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Layout primitives */
.shell { position: relative; z-index: 1; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--sp-24) 0; }
.section--tight { padding: var(--sp-16) 0; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Eyebrow / kicker */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.kicker::before {
  content: '';
  width: 22px; height: 1px; background: var(--signal); display: inline-block;
}

/* ---- Header / nav ---- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); height: 64px;
}
.wordmark { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--fg); }
.wordmark .mark { color: var(--fg); flex: none; }
.wordmark__text {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  letter-spacing: -0.01em;
}
.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav a {
  font-size: var(--text-sm); color: var(--fg-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  transition: color 0.2s, background 0.2s;
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--fg); background: var(--bg-3); }
.nav a[aria-current='page'] { box-shadow: inset 0 -2px 0 var(--signal); }

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

.btn {
  font-family: var(--font-body); font-size: var(--text-sm);
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius);
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.btn:hover { border-color: var(--signal); color: var(--signal); }
.btn--signal { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.btn--signal:hover { color: var(--signal-ink); filter: brightness(1.05); }
.btn--icon { padding: var(--sp-2); }

.menu-toggle { display: none; }

/* Focus visibility — universal */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -60px; z-index: 100;
  background: var(--signal); color: var(--signal-ink);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius);
  transition: top 0.2s;
}
.skip-link:focus { top: var(--sp-2); color: var(--signal-ink); }

/* ---- Domain switcher (constellation) ---- */
.switcher-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  opacity: 0; visibility: hidden; transition: opacity 0.25s;
}
.switcher-backdrop[data-open='true'] { opacity: 1; visibility: visible; }
.switcher {
  position: fixed; z-index: 91; top: 0; right: calc(100% - 100vw); height: 100%;
  width: min(460px, 92vw); background: var(--bg-2);
  border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform 0.3s ease;
  overflow-y: auto; padding: var(--sp-8) var(--sp-6);
}
.switcher[data-open='true'] { transform: translateX(0); }
.switcher h2 { font-size: var(--text-xl); }
.switcher__head { display: flex; justify-content: space-between; align-items: start; margin-bottom: var(--sp-2); }
.switcher__list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.switcher__item {
  border-top: 1px solid var(--line); padding: var(--sp-4) 0;
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4);
}
.switcher__item a, .switcher__item span.host { font-family: var(--font-mono); font-size: var(--text-xs); }
.switcher__item .surf-name { font-family: var(--font-display); font-size: var(--text-lg); grid-column: 1; }
.switcher__item .surf-sum { grid-column: 1 / -1; color: var(--fg-3); font-size: var(--text-sm); }
.switcher__item .host { color: var(--fg-3); grid-column: 1; }

/* Status chips */
.chip {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  border: 1px solid currentColor; display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--active { color: var(--st-active); }
.chip--external { color: var(--st-external); }
.chip--designed { color: var(--st-designed); }
.chip--built { color: var(--st-built); }
.chip--proposed { color: var(--st-proposed); }
/* Owner-only operator vestibule: muted, deliberately not a "signal" state. */
.chip--restricted { color: var(--st-restricted); }
/* Work-registry vocabulary: a paused workstream, not an unactivated host. It
   deliberately reuses the reserved-state token rather than minting a new one,
   so the contrast pairing stays the one already verified for both themes. */
.chip--dormant { color: var(--st-proposed); }

/* ---- Hero ---- */
.hero { padding: var(--sp-24) 0 var(--sp-16); position: relative; }
.hero h1 { font-size: var(--text-hero); font-weight: 500; max-width: 16ch; }
.hero__lede { font-size: var(--text-lg); color: var(--fg-2); max-width: 58ch; margin-top: var(--sp-6); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-8);
  padding-top: var(--sp-6); border-top: 1px solid var(--line);
}
.hero__meta .mono { color: var(--fg-3); }

/* ---- Apex search hero — the front door hands the query to search.odisena.com.
   The directory hero below it keeps its full display scale via .hero__title
   (an h2, because the search hero now holds the page's single h1). ---- */
.hero--search { padding-bottom: var(--sp-12); }
.hero--directory { padding-top: var(--sp-16); }
.hero .hero__title { font-size: var(--text-hero); font-weight: 500; max-width: 16ch; }
.apex-search { display: flex; gap: var(--sp-3); max-width: 640px; margin-top: var(--sp-8); }
.apex-search__input {
  flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--fg); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  transition: border-color 0.2s;
}
.apex-search__input:focus { border-color: var(--signal); }
.apex-search__input::placeholder { color: var(--fg-3); }
.apex-search__go { font-size: var(--text-base); white-space: nowrap; }
.apex-search__aion { color: var(--fg-2); max-width: 62ch; margin-top: var(--sp-5); }
.apex-search__note { color: var(--fg-3); font-size: var(--text-xs); margin-top: var(--sp-3); max-width: 72ch; }

/* ---- Cards / grids ---- */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.cell--void { padding: 0; min-height: 0; }
.cell {
  background: var(--bg); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: background 0.2s;
}
a.cell:hover { background: var(--bg-2); }
.cell--restricted { cursor: default; }
.cell__idx { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); }
.cell h3 { margin: 0; }
.cell p { margin: 0; color: var(--fg-2); font-size: var(--text-sm); }
.cell__foot { margin-top: auto; display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); }
.cell__arrow { color: var(--signal); font-family: var(--font-mono); }

/* Feature two-column */
.two-col { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-16); align-items: start; }
.stack > * + * { margin-top: var(--sp-4); }

/* Definition list / spec table */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line); vertical-align: top; font-size: var(--text-sm);
}
.spec th { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg-3); font-weight: 500; width: 34%; }

/* Callout / notice */
.notice {
  border: 1px solid var(--line); border-left: 3px solid var(--signal);
  background: var(--signal-soft); padding: var(--sp-6);
  border-radius: var(--radius); font-size: var(--text-sm);
}
.notice h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; margin-bottom: var(--sp-2); }

/* Loop diagram (RFPA · AVPT) */
.loop-diagram { width: 100%; height: auto; color: var(--fg); }
.loop-diagram .lp-line { stroke: var(--line); stroke-width: 1; fill: none; }
.loop-diagram .lp-arc { stroke: var(--signal); stroke-width: 1.5; fill: none; }
.loop-diagram .lp-node { fill: var(--bg); stroke: var(--fg); stroke-width: 1.2; }
.loop-diagram text { font-family: var(--font-mono); font-size: 11px; fill: var(--fg); }
.loop-diagram .lp-sub { fill: var(--fg-3); font-size: 9px; }

/* Timeline */
.timeline { position: relative; margin-top: var(--sp-8); }
.tl-row {
  display: grid; grid-template-columns: 130px 1fr; gap: var(--sp-6);
  padding: var(--sp-4) 0; border-top: 1px solid var(--line); align-items: baseline;
}
.tl-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); }
.tl-cat { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

/* Catalog work */
.work { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: var(--sp-8); margin-bottom: var(--sp-6); }
.work__head { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; align-items: start; }
.work h3 { margin: 0; }
.work__sub { color: var(--fg-3); font-style: italic; }

/* Chapter bars */
.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; margin-top: var(--sp-4); }
.ch-bar { height: 34px; border-radius: 2px; background: var(--bg-3); border: 1px solid var(--line); position: relative; }
.ch-bar[data-spec='true'] { border-style: dashed; border-color: var(--signal); }
.ch-bar[data-kind='ledger'] { background: var(--fg-3); }
.ch-bar[data-kind='front-matter'], .ch-bar[data-kind='prologue'] { background: var(--signal-soft); }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: var(--sp-16) 0 var(--sp-12); background: var(--bg-2); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-8); }
.footer h4 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); font-weight: 500; margin-bottom: var(--sp-4); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--sp-2); }
.footer a { color: var(--fg-2); font-size: var(--text-sm); }
.footer a:hover { color: var(--signal); }
.footer__base { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--line); }

/* Page intro */
.page-head { padding: var(--sp-16) 0 var(--sp-8); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--text-3xl); max-width: 20ch; }
.page-head .hero__lede { margin-top: var(--sp-4); }
.crumb { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); margin-bottom: var(--sp-4); }
.crumb a { color: var(--fg-3); }
.crumb a:hover { color: var(--signal); }

/* Master vestibule — deliberately sparse */
.vestibule { min-height: 72vh; display: flex; align-items: center; }
.vestibule__inner { max-width: 720px; }
.vestibule .lock {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--fg-3);
  border: 1px solid var(--line); padding: var(--sp-2) var(--sp-4); border-radius: 999px;
}

/* 404 */
.fourohfour { min-height: 70vh; display: flex; align-items: center; }
.fourohfour .wrap { min-width: 0; max-width: 100%; }
.fourohfour__big { font-family: var(--font-mono); font-size: clamp(4rem, 14vw, 9rem); color: var(--signal); line-height: 1; }
/* Robust wrapping: an arbitrarily long unbroken route/proxy token must never
   cause horizontal overflow at any viewport. */
.route-token {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-2);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-2);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Horizontal scroll shell for wide tables on narrow viewports. */
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > .spec { min-width: 560px; }

/* ---- Knowledge repository (/knowledge) ---- */
.k-reserved { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-8); }
.k-method h3 { font-family: var(--font-body); }
.k-archive-link { display: inline-block; margin-left: var(--sp-4); font-size: var(--text-sm); color: var(--fg-3); }
@media (max-width: 900px) { .k-archive-link { display: block; margin-left: 0; margin-top: var(--sp-3); } }

.k-controls {
  position: sticky; top: 64px; z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-6); margin-bottom: var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.k-search { display: flex; flex-direction: column; gap: var(--sp-2); }
.k-search__label { color: var(--fg-3); }
.k-search__input {
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--fg); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); width: 100%;
  transition: border-color 0.2s;
}
.k-search__input:focus { border-color: var(--signal); }
.k-search__input:focus-visible {
  border-color: var(--signal);
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
.k-search__input::placeholder { color: var(--fg-3); }

.k-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.k-filter {
  font-family: var(--font-body); font-size: var(--text-sm); cursor: pointer;
  color: var(--fg-2); background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: var(--sp-2) var(--sp-3);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.k-filter:hover { border-color: var(--signal); color: var(--signal); }
.k-filter[aria-pressed='true'] { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.k-filter__n { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.75; }

.k-controls__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.k-count { margin: 0; color: var(--fg-3); }

.k-empty {
  border: 1px solid var(--line); border-left: 3px solid var(--signal);
  background: var(--signal-soft); border-radius: var(--radius);
  padding: var(--sp-8); text-align: center; margin-bottom: var(--sp-8);
}
.k-empty p { margin: 0 auto var(--sp-4); max-width: 48ch; }

.k-group { margin-bottom: var(--sp-16); }
.k-group[hidden] { display: none; }
.k-group__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  flex-wrap: wrap; border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-6);
}
.k-group__title { margin: 0; font-size: var(--text-2xl); }
.k-group__count { color: var(--fg-3); }
.k-group__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }

.k-entry {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  content-visibility: auto; contain-intrinsic-size: auto 360px;
  /* Grid items default to min-width:auto, which refuses to shrink below their
     content's min-content width; a single long token then widens the 1fr track
     (and every card) past the viewport. Allow the track to shrink to fit. */
  min-width: 0;
}
.k-entry[hidden] { display: none; }
.k-entry__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.k-entry__num { color: var(--signal); font-size: var(--text-sm); }
.k-cat {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-3);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.k-entry__title { margin: 0; font-size: var(--text-lg); }
.k-entry__body { margin: 0; display: grid; gap: var(--sp-1); }
.k-entry__body dt {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3);
  margin-top: var(--sp-2);
}
.k-entry__body dd { margin: 0; color: var(--fg-2); font-size: var(--text-sm); max-width: none; }
.k-entry__sources { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.k-entry__srclabel { display: block; color: var(--fg-3); margin-bottom: var(--sp-2); }
.k-entry__sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.k-entry__sources a {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2);
  overflow-wrap: anywhere; line-height: 1.5;
}
.k-entry__sources a:hover { color: var(--signal); }

/* ---- Home: ownership lockup ---- */
.ownership {
  margin-top: var(--sp-6);
  color: var(--fg-3);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line);
}

/* ---- Home: the site directory ---------------------------------------------
   One card per Odisena site, colour-coded by the constellation category it
   belongs to. `--acc` is set once per card from `data-accent` and then drives
   the rail, the watermark glyph, the index and the arrow, so a card only ever
   names its colour in one place. Accents are AA-legible on --bg in both
   themes; body copy still reads from --fg/--fg-2 so the colour is never the
   only thing carrying meaning — every card also shows a status chip. */
[data-accent='studio'] { --acc: var(--acc-studio); }
[data-accent='record'] { --acc: var(--acc-record); }
[data-accent='build'] { --acc: var(--acc-build); }
[data-accent='trust'] { --acc: var(--acc-trust); }
[data-accent='command'] { --acc: var(--acc-command); }

.site-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.site-legend li {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-2);
  border: 1px solid var(--line); border-radius: 999px; padding: var(--sp-1) var(--sp-3);
}
.site-legend li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--acc); flex: none; }

.site-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--sp-4); margin-top: var(--sp-8);
}
.site-card {
  position: relative; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  /* `translate` (not `transform`) carries the entrance so the hover lift below
     can own `transform` without the filled animation winning the cascade. */
  animation: site-card-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes site-card-in {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}
.site-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--acc);
  transform: scaleY(0.32); transform-origin: 50% 0; transition: transform 0.28s ease;
}
a.site-card:hover, a.site-card:focus-visible {
  transform: translateY(-4px); border-color: var(--acc);
  box-shadow: 0 14px 26px -18px var(--acc); background: var(--bg-2);
}
a.site-card:hover::before, a.site-card:focus-visible::before { transform: scaleY(1); }

.site-card__glyph {
  position: absolute; right: var(--sp-4); top: var(--sp-3);
  font-size: 2.5rem; line-height: 1; color: var(--acc); opacity: 0.16;
  pointer-events: none; transition: transform 0.35s ease, opacity 0.35s ease;
}
a.site-card:hover .site-card__glyph, a.site-card:focus-visible .site-card__glyph {
  opacity: 0.32; transform: rotate(-12deg) scale(1.12);
}
.site-card__idx { color: var(--acc); }
.site-card__name { margin: 0; font-size: var(--text-xl); padding-right: var(--sp-8); }
.site-card__hook { margin: 0; color: var(--fg-2); font-size: var(--text-sm); }
.site-card__note { margin: 0; color: var(--fg-3); font-size: var(--text-sm); font-style: italic; }
.site-card__foot {
  margin-top: auto; padding-top: var(--sp-4); border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
}
.site-card__host {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3);
  letter-spacing: 0.02em; overflow-wrap: anywhere; min-width: 0;
}
.site-card__arrow { margin-left: auto; color: var(--acc); font-family: var(--font-mono); transition: transform 0.22s ease; }
a.site-card:hover .site-card__arrow, a.site-card:focus-visible .site-card__arrow { transform: translateX(4px); }
/* The operator vestibule is named but never sold: no lift, no arrow, no link. */
.site-card--restricted { cursor: default; border-style: dashed; }
.site-card--restricted .site-card__glyph { opacity: 0.1; }

@media (prefers-reduced-motion: reduce) {
  .site-card { animation: none; opacity: 1; translate: none; }
  a.site-card:hover, a.site-card:focus-visible { transform: none; }
  a.site-card:hover .site-card__glyph, a.site-card:focus-visible .site-card__glyph { transform: none; }
  a.site-card:hover .site-card__arrow, a.site-card:focus-visible .site-card__arrow { transform: none; }
}
@media (max-width: 520px) { .site-grid { grid-template-columns: 1fr; } }

/* ---- Home: the record teaser ---- */
.rec-eras { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: var(--sp-8) 0 0; padding: 0; }
.rec-era {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  border: 1px solid var(--line); border-radius: 999px; padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm); color: var(--fg-2);
}
.rec-era__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--signal); }

/* ---- Home: visitor paths ---- */
.paths {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.path-card {
  background: var(--bg); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.path-card__idx { color: var(--fg-3); }
.path-card h3 { margin: 0; font-size: var(--text-lg); }
.path-card p { margin: 0; color: var(--fg-2); font-size: var(--text-sm); }
.path-card__links { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.path-card__links li { font-size: var(--text-sm); }
.path-card__links a { color: var(--fg-2); display: inline-flex; align-items: baseline; gap: var(--sp-2); }
.path-card__links a::before { content: '→'; color: var(--signal); font-family: var(--font-mono); }
.path-card__links a:hover { color: var(--signal); }

/* ---- Home: the web (spiderweb + directory) ---- */
.web { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-16); align-items: start; }
.web__viz { position: sticky; top: 84px; }
.cw { width: 100%; height: auto; }
.cw-trunk { stroke: var(--fg-3); stroke-width: 1; }
.cw-branch { stroke: var(--line); stroke-width: 1; }
.cw-branch--active { stroke: var(--signal); stroke-width: 1.4; }
.cw-leaf { fill: var(--bg); stroke: var(--fg-3); stroke-width: 1.2; }
.cw-leaf--active { fill: var(--signal); stroke: var(--signal); }
.cw-hub { fill: var(--bg); stroke: var(--fg); stroke-width: 1.4; }
.cw-core { fill: var(--fg); }
.cw-core-label { font-family: var(--font-display); font-size: 14px; fill: var(--bg); }
.cw-hub-label { font-family: var(--font-mono); font-size: 10px; fill: var(--fg); text-transform: uppercase; letter-spacing: 0.04em; }
.cw-leaf-label { font-family: var(--font-mono); font-size: 9px; fill: var(--fg-2); }

.cdir__group { margin-bottom: var(--sp-8); }
.cdir__cat { font-size: var(--text-lg); margin-bottom: var(--sp-1); }
.cdir__catsum { margin: 0 0 var(--sp-4); font-size: var(--text-sm); }
.cdir__list { list-style: none; margin: 0; padding: 0; }
.cdir__item { border-top: 1px solid var(--line); padding: var(--sp-3) 0; }
.cdir__row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cdir__name { font-family: var(--font-display); font-size: var(--text-base); }
a.cdir__name:hover { color: var(--signal); }
.cdir__sum { margin: var(--sp-1) 0 0; color: var(--fg-3); font-size: var(--text-sm); }

/* ---- Timeline (/timeline) ---- */
.tl-nav {
  position: sticky; top: 64px; z-index: 20;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-12);
}
.tl-nav__link {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--fg-2); border: 1px solid var(--line);
  border-radius: 999px; padding: var(--sp-1) var(--sp-3);
}
.tl-nav__link:hover { border-color: var(--signal); color: var(--signal); }
.tl-era { scroll-margin-top: 120px; margin-bottom: var(--sp-16); }
.tl-era__head {
  display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: var(--sp-3); margin-bottom: var(--sp-6);
}
.tl-era__head h2 { margin: 0; }
.tl-era__count { color: var(--fg-3); margin-left: auto; }
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-entry {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-6);
  padding: var(--sp-4) 0; border-top: 1px solid var(--line); align-items: baseline;
}
.tl-entry:first-child { border-top: 0; }
.tl-entry__year { color: var(--fg-3); }
.tl-entry__title { font-size: var(--text-lg); margin: 0 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.tl-entry__body p { margin: 0; color: var(--fg-2); font-size: var(--text-sm); }

/* ---- Music archive (/music) ---- */
.mus-meta { display: flex; flex-wrap: wrap; gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line); }
.mus-meta p { margin: 0; }

.mus-featured {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-8);
  align-items: center; margin-top: var(--sp-8);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); padding: var(--sp-6); transition: background 0.2s, border-color 0.2s;
}
.mus-featured:hover { background: var(--bg-2); border-color: var(--signal); }
.mus-featured__covers { display: flex; }
.mus-featured__covers img {
  width: 84px; height: 84px; object-fit: cover; border: 1px solid var(--line);
  border-radius: 2px; background: var(--bg-3);
}
.mus-featured__covers img + img { margin-left: -28px; }
.mus-featured__body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.mus-featured__title { font-family: var(--font-display); font-size: var(--text-xl); }
.mus-featured__lede { color: var(--fg-2); font-size: var(--text-sm); max-width: 68ch; }

.mus { margin-top: var(--sp-8); }
.mus-state {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); padding: var(--sp-12) var(--sp-6); text-align: center;
}
.mus-state[hidden] { display: none; }
.mus-state p { margin: 0 auto var(--sp-3); max-width: 52ch; color: var(--fg-2); font-size: var(--text-sm); }

.mus-player {
  position: sticky; top: 72px; z-index: 20;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-6); margin-bottom: var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.mus-player__now { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.mus-artwork {
  width: 64px; height: 64px; flex: none; border: 1px solid var(--line);
  border-radius: 2px; background: var(--bg-3) center/cover no-repeat;
}
.mus-now { min-width: 0; }
.mus-now p { margin: 0; }
.mus-now__title { font-family: var(--font-display); font-size: var(--text-lg); }
.mus-transport { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.mus-buttons { display: flex; align-items: center; gap: var(--sp-2); }
.mus-btn--play { padding: var(--sp-3); border-color: var(--signal); color: var(--signal); }
.mus-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.mus-seek { display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 260px; min-width: 0; }
.mus-time { flex: none; }
.mus-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: 999px; background: var(--bg-3); cursor: pointer;
  background-image: linear-gradient(to right, var(--signal) var(--mus-progress, 0%), transparent var(--mus-progress, 0%));
}
.mus-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 13px; height: 13px;
  border-radius: 50%; background: var(--signal); border: 0;
}
.mus-range::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--signal); border: 0; }
.mus-status { min-height: 1.2em; margin: 0; }
.mus-player audio { display: none; }

.mus-album { margin-bottom: var(--sp-12); }
.mus-album__head { display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.mus-album__head h3 { margin: 0 0 var(--sp-1); }
.mus-album__head p { margin: 0; }
.mus-album__cover {
  width: 108px; height: 108px; flex: none; border: 1px solid var(--line);
  border-radius: 2px; background: var(--bg-3) center/cover no-repeat;
}
.mus-tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mus-track { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.mus-track__btn {
  flex: 1 1 auto; min-width: 0;
  width: 100%; display: grid; grid-template-columns: 2.5rem 1fr auto;
  align-items: center; gap: var(--sp-4); text-align: left;
  background: transparent; border: 0; cursor: pointer; color: var(--fg);
  font-family: var(--font-body); font-size: var(--text-base);
  padding: var(--sp-3) var(--sp-2); transition: background 0.2s, color 0.2s;
}
.mus-track__btn:hover:not([disabled]) { background: var(--bg-2); color: var(--signal); }
.mus-track__btn[disabled] { cursor: default; color: var(--fg-3); }
.mus-track[aria-current='true'] .mus-track__btn { background: var(--signal-soft); }
.mus-track[aria-current='true'] .mus-track__title { color: var(--signal); }
.mus-track__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mus-track__note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); }
/* Optional external video edition — deliberately quieter than the play control. */
.mus-track__video, .tbe-track__video a {
  white-space: nowrap; font-size: var(--text-xs); color: var(--fg-3);
  border: 1px solid var(--line); border-radius: 999px; padding: var(--sp-1) var(--sp-3);
}
.mus-track__video { flex: none; margin: 0 var(--sp-2) 0 var(--sp-3); }
.tbe-track__video a { display: inline-block; }
.mus-track__video:hover, .mus-track__video:focus-visible,
.tbe-track__video a:hover, .tbe-track__video a:focus-visible { border-color: var(--signal); color: var(--signal); }
.mus-legal { display: block; margin-top: var(--sp-8); max-width: 78ch; text-transform: none; line-height: 1.7; }

/* ---- The Beginning of the End (/music/the-beginning-of-the-end) ---- */
.tbe-taglines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.tbe-taglines li {
  font-family: var(--font-display); font-size: var(--text-lg); color: var(--fg-2);
  border-left: 2px solid var(--signal); padding-left: var(--sp-4);
}
.tbe-release { margin: 0; }
.tbe-release img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.tbe-release figcaption { margin-top: var(--sp-3); }

.tbe-albums { margin-top: var(--sp-8); }
.tbe-album { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: var(--sp-8); margin-bottom: var(--sp-8); }
.tbe-album__head { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-8); align-items: start; }
.tbe-album__cover img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 2px; }
.tbe-album__meta p { margin: 0 0 var(--sp-3); }
.tbe-album__stage { color: var(--fg-3); font-style: italic; }
.tbe-tracks { list-style: none; margin: var(--sp-8) 0 0; padding: 0; border-top: 1px solid var(--line); }
.tbe-track {
  display: grid; grid-template-columns: 2.5rem 1fr auto auto auto; gap: var(--sp-4);
  align-items: baseline; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
}
.tbe-track__title { font-size: var(--text-sm); }
.tbe-track__status { color: var(--fg-3); }
/* Tracks with no video edition ship this cell empty; drop it so the row keeps
   its spacing instead of reserving a gap for a link that does not exist. */
.tbe-track__video:empty { display: none; }
.tbe-track[data-playable='true'] .tbe-track__status a { color: var(--signal); }
.tbe-track__dur { color: var(--fg-3); }

/* ---- Odisena Studios (/studios) ---- */
.grid--5 { grid-template-columns: repeat(5, 1fr); }
.stu-practice .cell__idx { color: var(--signal); }

/* ---- Work and invention registries (/work, /inventions) ---- */
.wr-jump { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: var(--sp-8) 0 0; padding: 0; }
.wr-jump a {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2);
  border: 1px solid var(--line); border-radius: 999px; padding: var(--sp-1) var(--sp-3);
}
.wr-jump a:hover, .wr-jump a:focus-visible { border-color: var(--signal); color: var(--signal); }
.wr-count { color: var(--signal); }
/* Categories are jump targets, so keep the heading clear of the sticky top bar. */
.wr-cat { scroll-margin-top: 96px; }

.wr-gov { list-style: none; margin: var(--sp-8) 0 0; padding: 0; }
.wr-gov__item { border-top: 1px solid var(--line); padding: var(--sp-4) 0; }
.wr-gov__row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.wr-gov__name { font-family: var(--font-display); font-size: var(--text-base); }
.wr-gov__cat { color: var(--fg-3); font-size: var(--text-xs); text-transform: none; }
.wr-gov__sum { margin: var(--sp-1) 0 0; color: var(--fg-3); font-size: var(--text-sm); max-width: 70ch; }

.inv-category { margin-top: var(--sp-2); }
.inv-grid { margin-top: var(--sp-8); }
.inv-card {
  min-width: 0;
}
.inv-card .cell__foot { flex-wrap: wrap; }
.inv-card__category {
  color: var(--fg-3);
  font-size: var(--text-xs);
  text-transform: none;
  flex: 1 1 10rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.inv-provenance { max-width: 70ch; }
.inv-provenance__stamp {
  margin-top: var(--sp-6);
  font-size: var(--text-sm);
  text-transform: none;
}
.inv-actions { margin-top: var(--sp-8); }

@media (max-width: 900px) {
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .tbe-album__head { grid-template-columns: 1fr; gap: var(--sp-6); }
  .tbe-album__cover { max-width: 240px; }
  .mus-featured { grid-template-columns: 1fr; gap: var(--sp-4); }
  .mus-player { position: static; }
}
@media (max-width: 640px) {
  .grid--5 { grid-template-columns: 1fr; }
  .tbe-album { padding: var(--sp-6); }
  .tbe-track { grid-template-columns: 2rem 1fr; }
  .tbe-track__status, .tbe-track__video, .tbe-track__dur { grid-column: 2; }
}

/* Utility */
.muted { color: var(--fg-3); }
.center { text-align: center; }
.flow > * + * { margin-top: var(--sp-6); }
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lead-num { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--signal); line-height: 1; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: var(--sp-8); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .k-group__list { grid-template-columns: 1fr; }
  .web { grid-template-columns: 1fr; gap: var(--sp-8); }
  .web__viz { position: static; }
  .paths { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .nav { display: none; }
  .nav--open {
    display: flex; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--line); padding: var(--sp-2);
  }
  .nav--open a { padding: var(--sp-3) var(--sp-4); }
  .menu-toggle { display: inline-flex; }
  .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .cell--void { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .tl-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .tl-entry { grid-template-columns: 1fr; gap: var(--sp-2); }
  .paths { grid-template-columns: 1fr; }
  .section { padding: var(--sp-16) 0; }
  .hero { padding: var(--sp-16) 0 var(--sp-12); }
  .apex-search { flex-direction: column; }
  .apex-search__go { justify-content: center; }
  .k-controls { position: static; }
  .tl-nav { position: static; }
}

/* ---- Print: hide the decorative spiderweb, keep the semantic directory ---- */
@media print {
  .web__viz { display: none; }
  .web { grid-template-columns: 1fr; }
  .tl-nav { position: static; }
}
/* At very narrow viewports the top bar's space-between row (wordmark + tools)
   overran the content box: with the real web fonts — wider than the local
   size-adjusted fallbacks — the tools cluster pushed past the viewport
   (scrollWidth ~332 at 320px). Tighten the inter-item gap and wordmark size so
   the row fits without hiding controls or masking overflow. */
@media (max-width: 400px) {
  .topbar__inner { gap: var(--sp-3); }
  .wordmark__text { font-size: 1.15rem; }
}