/* ═══════════════════════════════════════════════════════════════════════════
   Caractacus Hub — shared stylesheet
   Two themes: "lamp" (dark, warm) and "bench" (light, paper).
   No pure black, no pure white. Every text pairing verified to WCAG AA.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --header-h: 58px;
  --measure: 44rem;
  --radius: 3px;
  --step: 0.75rem;
}

html[data-theme="lamp"] {
  --bg:        #15120E;
  --surface:   #1D1913;
  --surface-2: #262019;
  --text:      #E2DACD;
  --muted:     #A79C8B;
  --dim:       #918675;
  --accent:    #C4A05A;   /* brass */
  --accent-2:  #6FAF9E;   /* verdigris */
  --warn:      #D08359;   /* rust */
  --border:    rgba(226,218,205,0.11);
  --rule:      rgba(226,218,205,0.18);
  --shadow:    0 1px 3px rgba(0,0,0,0.5);
  --plate-invert: 1;
  --plate-bg:  #0F0D0A;
  --sel:       rgba(196,160,90,0.25);
  --mark:      rgba(196,160,90,0.32);
}

html[data-theme="bench"] {
  --bg:        #E9E4D8;
  --surface:   #F4F0E7;
  --surface-2: #DED8C9;
  --text:      #241F18;
  --muted:     #57503F;
  --dim:       #6A6252;
  --accent:    #75590F;
  --accent-2:  #2A6153;
  --warn:      #8E4222;
  --border:    rgba(36,31,24,0.15);
  --rule:      rgba(36,31,24,0.24);
  --shadow:    0 1px 3px rgba(36,31,24,0.10);
  --plate-invert: 0;
  --plate-bg:  #F7F4EC;
  --sel:       rgba(117,89,15,0.20);
  --mark:      rgba(117,89,15,0.26);
}

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

html {
  font-size: 17px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  line-height: 1.68;
  min-height: 100dvh;
  transition: background 0.2s ease, color 0.2s ease;
}

::selection { background: var(--sel); }

/* ── Skip link ───────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  background: var(--accent); color: var(--bg);
  padding: 0.6rem 1rem; font-family: 'Archivo', sans-serif; font-size: 0.85rem;
}
.skip-link:focus { left: 0; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; gap: 0.5rem;
  height: var(--header-h);
  max-width: 68rem; margin: 0 auto; padding: 0 0.9rem;
}
.header-title {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
  color: var(--text); margin-right: auto; line-height: 1.15;
  text-decoration: none;
}
.header-title span {
  display: block;
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim);
}

.icon-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.icon-btn:hover { color: var(--text); background: var(--surface-2); }
.icon-btn svg { width: 19px; height: 19px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Headings get tabindex="-1" so they can receive focus after an anchor jump.
   That is for screen readers, not a visual state, so suppress the ring. */
[tabindex="-1"]:focus { outline: none; }

/* ── Reading progress ────────────────────────────────────────────────────── */
.progress {
  position: fixed; top: var(--header-h); left: 0; z-index: 99;
  height: 2px; width: 0;
  background: var(--accent);
  transition: width .08s linear;
}

/* ── Drawer ──────────────────────────────────────────────────────────────── */
.drawer {
  position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 98;
  width: min(340px, 86vw);
  background: var(--surface);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer.open { transform: none; }
.drawer-overlay {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 97;
  background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity .26s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.search-bar { padding: 0.9rem; border-bottom: 1px solid var(--border); }
.search-bar input {
  width: 100%; padding: 0.55rem 0.7rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: 'Archivo', sans-serif; font-size: 0.85rem;
}
.search-bar input::placeholder { color: var(--dim); }
.search-status {
  display: block; margin-top: 0.45rem;
  font-family: 'Archivo', sans-serif; font-size: 0.7rem; color: var(--dim);
}

.nav-section { border-bottom: 1px solid var(--border); }
.nav-chapter-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; padding: 0.62rem 0.9rem;
  background: none; border: none; border-left: 2px solid transparent;
  color: var(--text); cursor: pointer; text-align: left;
  font-family: 'Archivo', sans-serif; font-size: 0.82rem; font-weight: 500; line-height: 1.35;
  transition: background .14s, border-color .14s;
}
.nav-chapter-btn:hover { background: var(--surface-2); border-left-color: var(--accent); }
.nav-chapter-btn .chevron { width: 13px; height: 13px; flex-shrink: 0; color: var(--dim); transition: transform .2s; }
.nav-chapter-btn[aria-expanded="true"] .chevron { transform: rotate(90deg); color: var(--accent); }

.nav-sections { display: none; padding-bottom: 0.4rem; }
.nav-chapter-btn[aria-expanded="true"] + .nav-sections { display: block; }
.nav-section-link {
  display: block; padding: 0.3rem 0.9rem 0.3rem 1.7rem;
  color: var(--muted); text-decoration: none;
  font-family: 'Archivo', sans-serif; font-size: 0.76rem; line-height: 1.45;
  border-left: 2px solid transparent;
  transition: color .14s, border-color .14s;
}
.nav-section-link:hover { color: var(--text); border-left-color: var(--rule); }
.nav-section-link.current { color: var(--accent); border-left-color: var(--accent); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
main { max-width: var(--measure); margin: 0 auto; padding: 0 1.1rem 5rem; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  margin: 0 -1.1rem 0;
  padding: 3.4rem 1.4rem 2.6rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.hero-inner { max-width: var(--measure); margin: 0 auto; }
.hero-eyebrow {
  font-family: 'Archivo', sans-serif; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.9rem;
}
.hero h1 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600; font-size: clamp(2.1rem, 7vw, 3.1rem);
  line-height: 1.04; letter-spacing: -0.03em; color: var(--text);
  margin-bottom: 0.7rem;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub { color: var(--muted); font-size: 1rem; max-width: 34rem; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-top: 1.6rem; padding-top: 1.3rem;
  border-top: 1px solid var(--border);
}
.hero-meta div { line-height: 1.25; }
.hero-meta dt {
  font-family: 'Archivo', sans-serif; font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 0.2rem;
}
.hero-meta dd {
  font-family: 'Archivo', sans-serif; font-size: 1.05rem; font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums;
}

.hero-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1.5rem; }
.hero-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 0.63rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 2px;
  padding: 0.22rem 0.5rem;
}

/* ── Contents ────────────────────────────────────────────────────────────── */
.contents { margin: 2.6rem 0 3rem; }
.contents h2 {
  font-family: 'Archivo', sans-serif; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
  padding-bottom: 0.6rem; margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--rule);
}
.toc-row {
  display: grid; grid-template-columns: 2.4rem 1fr auto;
  align-items: baseline; gap: 0.7rem;
  padding: 0.6rem 0.3rem; border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text);
  transition: background .14s;
}
.toc-row:hover { background: var(--surface); }
.toc-num {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.toc-title { font-family: 'Archivo', sans-serif; font-size: 0.92rem; font-weight: 500; line-height: 1.3; }
.toc-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
  color: var(--dim); white-space: nowrap;
}
@media (max-width: 560px) {
  .toc-row { grid-template-columns: 2rem 1fr; }
  .toc-meta { grid-column: 2; }
}

.toolbar {
  display: flex; gap: 0.5rem; align-items: center;
  margin: 1.6rem 0 0.4rem;
}
.toolbar button {
  font-family: 'Archivo', sans-serif; font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--muted); padding: 0.32rem 0.65rem; cursor: pointer;
  transition: color .14s, border-color .14s;
}
.toolbar button:hover { color: var(--text); border-color: var(--rule); }

/* ── Part divider ────────────────────────────────────────────────────────── */
.part-divider {
  display: flex; align-items: baseline; gap: 0.9rem;
  margin: 3.4rem 0 1.5rem; padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--accent);
}
.part-num {
  font-family: 'Archivo', sans-serif; font-size: 1.5rem; font-weight: 600;
  color: var(--accent); line-height: 1;
}
.part-title {
  font-family: 'Archivo', sans-serif; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}

/* ── Chapters ────────────────────────────────────────────────────────────── */
.chapter { margin-bottom: 0.4rem; scroll-margin-top: calc(var(--header-h) + 12px); }
.chapter-header { margin: 0; }
.chapter-toggle-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  width: 100%; padding: 0.85rem 0.9rem;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 2px solid var(--accent-2); border-radius: var(--radius);
  color: var(--text); cursor: pointer; text-align: left;
  transition: background .14s;
}
.chapter-toggle-btn:hover { background: var(--surface-2); }
.chapter-title {
  font-family: 'Archivo', sans-serif; font-size: 1rem; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.3;
}
.chapter-chevron {
  width: 16px; height: 16px; flex-shrink: 0; color: var(--accent);
  transition: transform .22s;
}
.chapter-toggle-btn[aria-expanded="false"] .chapter-chevron { transform: rotate(-90deg); }

.chapter-body { padding: 1.3rem 0.15rem 0.4rem; }
.chapter-body[hidden] { display: none; }

/* ── Prose ───────────────────────────────────────────────────────────────── */
.section-heading {
  font-family: 'Archivo', sans-serif; font-size: 1.02rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text);
  margin: 2.2rem 0 0.55rem; padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: calc(var(--header-h) + 14px);
}
.chapter-body > .section-heading:first-child { margin-top: 0; }
.subsection-heading {
  font-family: 'Archivo', sans-serif; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.03em; color: var(--accent);
  margin: 1.4rem 0 0.4rem;
  scroll-margin-top: calc(var(--header-h) + 14px);
}
.section-intro {
  color: var(--muted); font-size: 0.95rem; font-style: italic;
  margin-bottom: 1.25rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
p { margin-bottom: 0.95rem; }
strong { font-weight: 600; color: var(--text); }
em { font-style: italic; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
code {
  font-family: 'JetBrains Mono', monospace; font-size: 0.85em;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px;
  padding: 0.1em 0.35em; color: var(--accent-2);
}

ul, ol { margin: 0 0 1rem 1.15rem; }
li { margin-bottom: 0.35rem; }
li::marker { color: var(--accent); }

mark.hit { background: var(--mark); color: var(--text); border-radius: 2px; padding: 0 1px; }

/* ── Callouts ────────────────────────────────────────────────────────────── */
/* .warning-block / .tip-block are an older handbook's alternate names for
   the same warning/note pattern (never had distinct styling of their own —
   they shared this exact box treatment, just with a label paragraph instead
   of an inline strong prefix), so they share these rules rather than getting
   duplicate near-identical ones. */
.note, .warning, .formula, .warning-block, .tip-block {
  padding: 0.8rem 0.95rem; margin: 1.1rem 0;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 2px solid var(--accent-2); border-radius: var(--radius);
  font-size: 0.94rem;
}
.warning, .warning-block { border-left-color: var(--warn); }
.formula {
  border-left-color: var(--accent);
  font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; line-height: 1.6;
}

/* Label paragraph (wlabel/tlabel/nlabel) preceding a callout's body text. */
.wlabel, .tlabel, .nlabel {
  font-family: 'Archivo', sans-serif; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--warn); margin-bottom: 0.3rem;
}
.note .tlabel, .note .nlabel, .tip-block .tlabel, .tip-block .nlabel {
  color: var(--accent-2);
}

/* ── Procedure card ──────────────────────────────────────────────────────── */
.proc-box {
  margin: 1.4rem 0; padding: 1rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 2px solid var(--accent); border-radius: var(--radius);
}
.proc-title {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 0.98rem;
  color: var(--text); margin-bottom: 0.6rem;
}
.proc-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.35rem 1.2rem; margin-bottom: 0.9rem; padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.proc-meta-item { font-size: 0.85rem; color: var(--muted); }
.proc-meta-item strong { color: var(--text); }
.proc-box > ol:last-child, .proc-box > ul:last-child, .proc-box > p:last-child { margin-bottom: 0; }

/* ── Command reference block ────────────────────────────────────────────── */
.cmd-block {
  margin: 0 0 1rem; padding: 0.9rem 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 2px solid var(--accent); border-radius: var(--radius);
}
.cmd-name {
  font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; font-weight: 600;
  color: var(--accent); margin-bottom: 0.35rem;
}
.cmd-desc { font-size: 0.87rem; color: var(--muted); margin-bottom: 0.6rem; }
.cmd-section {
  font-family: 'Archivo', sans-serif; font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2);
  margin: 0.6rem 0 0.3rem;
}
.cmd-flags { font-size: 0.82rem; color: var(--muted); margin: 0.5rem 0 0; }
.cmd-block pre {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.65rem 0.85rem; margin: 0.2rem 0 0; overflow-x: auto;
  font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text); line-height: 1.55;
}
.cmd-block code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }

/* Code blocks outside a .cmd-block (decision trees, formulas) need the same
   treatment, or a long line widens the whole page on a phone. */
.chapter-body pre {
  max-width: 100%; overflow-x: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.65rem 0.85rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;
  color: var(--text); line-height: 1.55;
}
.chapter-body pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
.cmd-block { min-width: 0; max-width: 100%; }
.cmd-name { overflow-wrap: anywhere; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 1.2rem 0; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
th, td {
  padding: 0.5rem 0.65rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
th {
  font-family: 'Archivo', sans-serif; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); background: var(--surface);
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
tbody tr:hover { background: var(--surface); }

/* ── Glossary ────────────────────────────────────────────────────────────── */
.glossary-entry { padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.glossary-term {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 0.9rem;
  color: var(--accent); display: block; margin-bottom: 0.1rem;
}
.glossary-def { font-size: 0.92rem; color: var(--text); }

/* ── Case study ──────────────────────────────────────────────────────────── */
.case-study {
  margin: 1.6rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.case-study-header {
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-left: 2px solid var(--accent-2);
  font-family: 'Archivo', sans-serif; font-size: 0.95rem; font-weight: 600;
  color: var(--text);
}
.case-study-header small {
  display: block;
  font-family: 'JetBrains Mono', monospace; font-size: 0.63rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 0.25rem;
}
.case-study-body { padding: 1.1rem 1rem; }
.case-study-body > *:first-child { margin-top: 0; }

/* ── Cost summary ────────────────────────────────────────────────────────── */
.cost-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.5rem;
  margin: 0.85rem 0;
}
.cost-card {
  padding: 0.65rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.cost-card .label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.63rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim);
}
.cost-card .value {
  font-family: 'Archivo', sans-serif; font-size: 1.1rem; font-weight: 600;
  color: var(--accent); margin-top: 0.15rem;
}

/* ── Troubleshooting cards ───────────────────────────────────────────────── */
.troubleshoot-item {
  margin-bottom: 0.65rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.troubleshoot-symptom {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 0.9rem;
  color: var(--text); margin-bottom: 0.35rem;
}
.troubleshoot-meta { display: flex; flex-direction: column; gap: 0.2rem; }
.troubleshoot-cause, .troubleshoot-fix { font-size: 0.86rem; color: var(--muted); }
.troubleshoot-fix { color: var(--text); }
.troubleshoot-cause span, .troubleshoot-fix span {
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
  margin-right: 0.3rem;
}

/* ── Plates (the signature element) ──────────────────────────────────────── */
.plate { margin: 1.8rem 0; }
.plate-frame {
  background: var(--plate-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.1rem;
  /* NB: not a centred grid. place-items:center shrink-wraps the image to zero
     width before it loads, which defeats aspect-ratio and causes layout shift. */
  display: block; text-align: center;
}
.plate-frame picture { display: block; }
.plate img {
  display: block; margin: 0 auto;
  width: 100%; height: auto;
  /* --ar is set inline from the intrinsic dimensions, so the box is reserved
     before the image loads. Without it the page reflows and anchors miss. */
  aspect-ratio: var(--ar, 4/3);
  object-fit: contain;
  max-width: min(100%, calc(58vh * var(--ar, 1.33)));
  filter: invert(var(--plate-invert));
  opacity: 0.94;
}
.plate figcaption {
  display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem;
  margin-top: 0.6rem; padding-left: 0.1rem;
}
.plate-no {
  grid-row: 1 / span 2;
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
  border-right: 1px solid var(--rule); padding-right: 0.75rem;
  align-self: start; padding-top: 0.15rem;
}
.plate-cap { font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
.plate-credit {
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem;
  color: var(--dim); letter-spacing: 0.03em;
}

/* ── Chapter navigation ──────────────────────────────────────────────────── */
.chapnav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 2.4rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.chapnav-link {
  max-width: 47%; text-decoration: none; color: var(--text);
  font-family: 'Archivo', sans-serif; font-size: 0.78rem; font-weight: 500; line-height: 1.3;
}
.chapnav-next { text-align: right; }
.chapnav-link span {
  display: block;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 0.15rem;
}
.chapnav-link:hover { color: var(--accent); }

/* ── Back to top ─────────────────────────────────────────────────────────── */
.back-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 50%;
  color: var(--muted); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .2s, color .14s;
  box-shadow: var(--shadow);
}
.back-top.visible { opacity: 1; pointer-events: auto; }
.back-top:hover { color: var(--accent); }
.back-top svg { width: 16px; height: 16px; }

.site-footer {
  max-width: var(--measure); margin: 0 auto; padding: 2.5rem 1.1rem 3rem;
  border-top: 1px solid var(--border);
  font-family: 'Archivo', sans-serif; font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.site-footer a { color: var(--dim); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

/* ── Landing hero (hub home + index pages) ──────────────────────────────── */
.landing-header {
  padding: 3rem 1.1rem 2.2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.landing-header-inner { max-width: var(--measure); margin: 0 auto; }
.landing-eyebrow {
  font-family: 'Archivo', sans-serif; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.9rem;
}
.landing-header h1 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600; font-size: clamp(2rem, 7vw, 2.9rem);
  line-height: 1.05; letter-spacing: -0.03em; color: var(--text);
  margin-bottom: 0.7rem;
}
.landing-tagline { color: var(--muted); font-size: 1rem; max-width: 34rem; }

.back-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: 'Archivo', sans-serif; font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim); text-decoration: none; margin-bottom: 1.3rem;
  transition: color 0.15s;
}
.back-link svg { width: 12px; height: 12px; }
.back-link:hover { color: var(--accent); }

/* ── Card list (hub home + guides index) ────────────────────────────────── */
.card-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; margin: 2.4rem 0 3rem; }
.card-group {
  margin: 2.4rem 0 0;
  border-bottom: 1px solid var(--border);
}
.card-group-btn {
  width: 100%; display: flex; align-items: center; gap: 0.45rem;
  padding: 0.2rem 0 0.6rem;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: 'Archivo', sans-serif; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  transition: color 0.15s;
}
.card-group-btn:hover { color: var(--text); }
.card-group-chevron {
  width: 11px; height: 11px; flex-shrink: 0; color: var(--dim);
  transition: transform 0.2s, color 0.15s;
}
.card-group-btn:hover .card-group-chevron { color: var(--accent); }
.card-group-btn[aria-expanded="false"] .card-group-chevron { transform: rotate(-90deg); }
.card-group + .card-list { margin: 0.9rem 0 0; }
.card-list[hidden] { display: none; }
.card-list:last-child { margin-bottom: 3rem; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 2px solid var(--card-accent, var(--accent)); border-radius: var(--radius);
  transition: background 0.15s, box-shadow 0.15s;
}
.card:hover, .card:focus-within { background: var(--surface-2); box-shadow: var(--shadow); }
.card.dim { opacity: 0.55; }
.card.dim:hover, .card.dim:focus-within { opacity: 0.8; }
.card-aside { flex-shrink: 0; display: flex; align-items: center; }
.badge {
  font-family: 'Archivo', sans-serif; font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--dim);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 2px;
  padding: 0.2rem 0.45rem;
}
.card-link {
  display: grid; grid-template-columns: 1.7rem 1fr auto; align-items: center; gap: 1rem;
  padding: 1.15rem 1.1rem; text-decoration: none; color: inherit; min-height: 72px;
}
.card-icon { color: var(--card-accent, var(--accent)); width: 1.4rem; height: 1.4rem; opacity: 0.85; flex-shrink: 0; transition: opacity 0.15s; }
.card:hover .card-icon, .card:focus-within .card-icon { opacity: 1; }
.card-name {
  font-family: 'Archivo', sans-serif; font-size: 0.98rem; font-weight: 600;
  color: var(--text); line-height: 1.25; margin-bottom: 0.25rem; letter-spacing: -0.01em;
}
.card-desc { font-size: 0.83rem; color: var(--muted); line-height: 1.5; }
.card-arrow { color: var(--card-accent, var(--accent)); opacity: 0.35; width: 0.9rem; height: 0.9rem; flex-shrink: 0; transition: opacity 0.15s, transform 0.15s; }
.card:hover .card-arrow, .card:focus-within .card-arrow { opacity: 1; transform: translateX(3px); }

.landing-footer {
  max-width: var(--measure); margin: 0 auto; padding: 1.5rem 1.1rem 3rem;
  text-align: center;
  font-family: 'Archivo', sans-serif; font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
}

@media (min-width: 480px) {
  .card-link { grid-template-columns: 1.9rem 1fr auto; gap: 1.1rem; padding: 1.3rem 1.3rem; }
  .card-icon { width: 1.55rem; height: 1.55rem; }
  .card-name { font-size: 1.04rem; }
  .card-desc { font-size: 0.87rem; }
}

/* ── Wider screens ───────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  html { font-size: 18px; }
  .hero { padding: 4.2rem 1.4rem 3rem; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  /* Neutralise the palette before anything else. Both themes set these tokens,
     and in "lamp" they are light values meant for a dark ground — printed on
     white paper, every heading and rule coloured with them comes out almost
     invisible. Printing is monochrome by intent, so the reader gets the same
     page whichever theme they happen to be using. */
  html, html[data-theme="lamp"], html[data-theme="bench"] {
    --bg:        #fff;
    --surface:   #fff;
    --surface-2: #fff;
    --text:      #000;
    --muted:     #333;
    --dim:       #555;
    --accent:    #000;
    --accent-2:  #000;
    --warn:      #000;
    --border:    #ccc;
    --rule:      #999;
    --shadow:    none;
    --plate-invert: 0;
    --plate-bg:  #fff;
    --sel:       transparent;
    --mark:      #eee;
  }
  html { font-size: 11pt; background: #fff; }
  body { background: #fff; color: #000; line-height: 1.45; }
  .site-header, .drawer, .drawer-overlay, .back-top, .progress,
  .toolbar, .chapnav, .skip-link, .site-footer { display: none !important; }
  main { max-width: none; padding: 0; }
  .hero { background: none; border-bottom: 2pt solid #000; margin: 0; padding: 0 0 0.6cm; }
  .hero h1 em { color: #000; }
  .contents { break-after: page; }
  .chapter-body { display: block !important; padding: 0; }
  .chapter-toggle-btn { background: none; border: none; border-left: 3pt solid #000;
                        padding: 0.2cm 0 0.2cm 0.3cm; break-after: avoid; }
  .chapter-chevron { display: none; }
  .chapter { break-before: page; }
  .section-heading, .subsection-heading { break-after: avoid; color: #000; }
  .plate { break-inside: avoid; }
  .plate-frame { background: none; border: 1pt solid #999; }
  .plate img { filter: none; max-height: 9cm; }
  table { break-inside: auto; font-size: 9pt; }
  tr, .note, .warning, .formula, .glossary-entry,
  .case-study, .troubleshoot-item { break-inside: avoid; }
  thead { display: table-header-group; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}

/* Long inline code such as URLs and paths may break anywhere rather than
   push a paragraph past the edge of a phone screen. */
.chapter-body p code, .chapter-body li code, .chapter-body td code { overflow-wrap: anywhere; }