/* ==========================================================================
   capitalism-101.com styles
   Single source of truth for all design tokens (SITE-SPEC section 4).
   No en dashes or em dashes anywhere, ASCII hyphens only.
   ========================================================================== */

:root {
  /* ---- Core palette (SITE-SPEC section 4) ---- */
  --ink: #1B2A24;        /* Ledger Ink, primary text */
  --paper: #EEF0EA;      /* Cotton-Linen, page background */
  --green: #235E46;      /* Greenback, primary brand, center-band anchor */
  --brass: #B08A3C;      /* Brass Scale, accent, market-side ramp, keylines */
  --fed-blue: #27436B;   /* Federal Blue, state-side ramp */
  --critique: #8A3B34;   /* Ledger Red, critique callouts only */

  /* ---- Derived spectrum ramp, R2 to L4 (SITE-SPEC section 4) ----
     The center band C is greenback with a brass keyline and is the visual
     anchor. There are two bands right of center (R2, R1) and four left of
     center (L1 to L4), so the blue side carries four graded stops. The
     "pale brass" mentioned in the ramp prose has no band between R1 and C,
     so it is not assigned a panel; it is kept as a token for keylines.
     Text color per band is chosen for WCAG AA contrast and verified in QA. */
  --band-r2: color-mix(in srgb, var(--brass) 62%, var(--ink));       /* deep brass */
  --band-r1: var(--brass);                                           /* brass */
  --pale-brass: color-mix(in srgb, var(--brass) 45%, var(--paper));  /* pale brass, keylines */
  --band-c: var(--green);                                            /* greenback, center */
  --band-l1: color-mix(in srgb, var(--fed-blue) 32%, var(--paper));  /* pale federal blue */
  --band-l2: color-mix(in srgb, var(--fed-blue) 72%, var(--paper));  /* mid federal blue, darkened for AA white text */
  --band-l3: var(--fed-blue);                                        /* federal blue */
  --band-l4: color-mix(in srgb, var(--fed-blue) 70%, var(--ink));    /* deep federal blue */

  --band-r2-text: #FFFFFF;
  --band-r1-text: var(--ink);
  --band-c-text: #FFFFFF;
  --band-l1-text: var(--ink);
  --band-l2-text: #FFFFFF;
  --band-l3-text: #FFFFFF;
  --band-l4-text: #FFFFFF;

  /* ---- Surfaces and lines ---- */
  --card-bg: #FFFFFF;
  --line: color-mix(in srgb, var(--ink) 18%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 32%, transparent);
  --muted: color-mix(in srgb, var(--ink) 68%, var(--paper));
  --glass: color-mix(in srgb, var(--paper) 72%, transparent);
  --tint-green: color-mix(in srgb, var(--green) 12%, var(--paper));
  --tint-critique: color-mix(in srgb, var(--critique) 10%, var(--paper));

  /* ---- Typography ---- */
  --font-display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Type scale, disciplined: display for H1 and band names only */
  --size-display: clamp(2.4rem, 5vw, 3.6rem);
  --size-h2: clamp(1.5rem, 2.6vw, 2rem);
  --size-h3: 1.2rem;
  --size-body: 1.05rem;
  --size-small: 0.9rem;
  --size-eyebrow: 0.78rem;

  /* ---- Spacing and shape ---- */
  --gap: 1rem;
  --pad: clamp(1rem, 4vw, 2rem);
  --maxw: 1120px;
  --readw: 68ch;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 6px 24px color-mix(in srgb, var(--ink) 14%, transparent);
  --shadow-soft: 0 2px 10px color-mix(in srgb, var(--ink) 8%, transparent);
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

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

html { scroll-behavior: smooth; }

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

h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; }
h1 { font-family: var(--font-display); font-size: var(--size-display); font-weight: 700; margin: 0 0 0.5em; }
h2 { font-size: var(--size-h2); margin: 0 0 0.5em; }
h3 { font-size: var(--size-h3); margin: 0 0 0.4em; }
p { margin: 0 0 1em; }

a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: color-mix(in srgb, var(--green), var(--ink) 30%); }

img, svg { max-width: 100%; height: auto; }

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

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.readable { max-width: var(--readw); }
main { display: block; }
section.block { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
section.block + section.block { border-top: 1px solid var(--line); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 0.75rem;
  display: block;
}
.eyebrow::before { content: ""; }

.lede { font-size: 1.2rem; color: var(--muted); }
.axis-caption {
  font-size: var(--size-small);
  color: var(--muted);
  font-style: italic;
  border-left: 3px solid var(--brass);
  padding-left: 0.8rem;
  margin: 1rem 0;
}

/* ==========================================================================
   Glassmorphism nav (SITE-SPEC section 4: nav and cards only)
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Greenback bar with a brass scale keyline */
  background: linear-gradient(180deg, var(--green), color-mix(in srgb, var(--green), var(--ink) 24%));
  border-bottom: 2px solid var(--brass);
  box-shadow: 0 3px 16px color-mix(in srgb, var(--ink) 22%, transparent);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 66px;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}
.brand .dot { color: var(--brass); }
.brand:hover { color: #fff; }

.nav-toggle {
  display: none;
  background: color-mix(in srgb, #fff 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brass) 70%, transparent);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-weight: 600;
  color: var(--paper);
  cursor: pointer;
}

/* Top-level bar: the Home link plus the four group triggers */
.nav-links { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.nav-top,
.nav-group__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: 600;
  color: color-mix(in srgb, var(--paper) 90%, transparent);
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.nav-top:hover,
.nav-group__trigger:hover,
.nav-group:hover > .nav-group__trigger {
  background: color-mix(in srgb, #fff 15%, transparent);
  color: #fff;
}
.nav-group__trigger::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.85;
  transition: transform 0.15s ease;
}
.nav-group__trigger[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Current-page cue in brass */
.nav-top[aria-current="page"],
.nav-group.is-active > .nav-group__trigger {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--brass);
}

/* Dropdown menus (glass-family card styling) */
.nav-group { position: relative; }
.nav-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 230px;
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow);
  display: none;
}
/* Transparent bridge across the visual gap so hover does not drop between the
   trigger and the menu. Reaches from the trigger's bottom edge to the card. */
.nav-menu::before {
  content: "";
  position: absolute;
  top: -0.85rem;
  left: 0;
  right: 0;
  height: 1.1rem;
}
.nav-menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--size-small);
  border-radius: 8px;
  white-space: nowrap;
}
.nav-menu a:hover { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.nav-menu a[aria-current="page"] { color: var(--green); font-weight: 700; box-shadow: inset 2px 0 0 var(--brass); }

/* Reveal on click (aria-expanded), and for pointer or keyboard on desktop */
.nav-group__trigger[aria-expanded="true"] + .nav-menu { display: block; }
@media (hover: hover) and (min-width: 901px) {
  .nav-group:hover .nav-menu,
  .nav-group:focus-within .nav-menu { display: block; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: color-mix(in srgb, var(--ink) 94%, var(--green));
  color: color-mix(in srgb, var(--paper) 88%, transparent);
  padding-block: clamp(2rem, 5vw, 3.5rem);
  margin-top: 2rem;
}
.site-footer a { color: color-mix(in srgb, var(--brass) 70%, #ffffff); }
.footer-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-footer h2 { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 70%, transparent); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.3rem; font-size: var(--size-small); }
.sister-link {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.35rem 0.7rem;
  border: 1px dashed color-mix(in srgb, var(--brass) 70%, #ffffff);
  border-radius: 8px;
  font-size: var(--size-small);
}
.footer-fine { font-size: var(--size-small); color: color-mix(in srgb, var(--paper) 60%, transparent); margin-top: 1.5rem; }

/* ==========================================================================
   Buttons and tier doors
   ========================================================================== */

.btn {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  border: 1px solid transparent;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--green), var(--ink) 25%); color: #fff; }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--ink); }

.tier-doors { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tier-door {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brass);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tier-door:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.tier-door .tier-label { font-family: var(--font-mono); font-size: var(--size-small); color: var(--green); letter-spacing: 0.08em; }
.tier-door h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 0.3rem 0; }
.tier-door p { color: var(--muted); margin: 0; }
.tier-door .tier-pages { font-size: var(--size-small); color: var(--muted); margin-top: 0.75rem; }

/* ==========================================================================
   Cards (glassmorphism allowed)
   ========================================================================== */

.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-soft);
}
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ==========================================================================
   Claim Ribbons (SITE-SPEC section 5, three registers)
   ========================================================================== */

.claim { border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.5rem 0; }
.claim .claim-tag {
  display: inline-block;
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.claim p:last-child { margin-bottom: 0; }
/* Darker than --muted so it clears AA on the editorial and contested tints */
.claim .source { font-size: var(--size-small); color: color-mix(in srgb, var(--ink) 82%, var(--paper)); margin-top: 0.5rem; }

/* Register 1: established fact, ink text, brass left rule, source required */
.claim--fact {
  background: var(--card-bg);
  border-left: 4px solid var(--brass);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.claim--fact .claim-tag { color: color-mix(in srgb, var(--brass), var(--ink) 30%); }

/* Register 2: editorial classification, greenback tint, labeled */
.claim--editorial {
  background: var(--tint-green);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
}
.claim--editorial .claim-tag { color: var(--green); }

/* Register 3: contested characterization, ledger-red left rule, labeled */
.claim--contested {
  background: var(--tint-critique);
  border-left: 4px solid var(--critique);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.claim--contested .claim-tag { color: var(--critique); }
.claim--contested .side { margin-bottom: 0.5rem; }
.claim--contested .side strong { color: var(--ink); }

/* ==========================================================================
   Stat Callouts (SITE-SPEC section 5)
   ========================================================================== */

.stat {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stat .figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.stat .label { font-weight: 700; margin: 0.3rem 0 0.4rem; }
.stat .source { font-size: var(--size-small); color: var(--muted); margin: 0; }
.stat .flag { font-size: var(--size-small); color: var(--critique); font-weight: 700; margin: 0.3rem 0 0; }

/* ==========================================================================
   Country Cards (SITE-SPEC section 5)
   ========================================================================== */

.country-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.country-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-soft);
}
.country-card .flag { font-size: 1.5rem; }
.country-card h3 { font-family: var(--font-display); font-size: 1.35rem; margin: 0.2rem 0; }
.country-card .band-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--size-small);
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}
.country-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; margin: 0.8rem 0 0; font-size: var(--size-small); }
.country-card dt { font-weight: 700; color: var(--muted); }
.country-card dd { margin: 0; }
.country-card .score { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ==========================================================================
   Spectrum Band (signature element, SITE-SPEC section 4 and 5)
   ========================================================================== */

.spectrum { }
/* Base (mobile and tablet): single-column stack, no horizontal scroll */
.spectrum-track {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0;
}
.spectrum-panel {
  padding: 1.1rem 1.2rem;
  color: var(--ink);
  width: 100%;
  border-radius: var(--radius);
  overflow-wrap: break-word;
}
.spectrum-panel:last-child { border-right: none; }
.spectrum-panel .code {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.spectrum-panel h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 0.2rem 0 0.6rem; }
.spectrum-panel dl { margin: 0; font-size: var(--size-small); }
.spectrum-panel dt { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; margin-top: 0.6rem; }
.spectrum-panel dd { margin: 0.1rem 0 0; }

.spectrum-panel[data-band="r2"] { background: var(--band-r2); color: var(--band-r2-text); }
.spectrum-panel[data-band="r1"] { background: var(--band-r1); color: var(--band-r1-text); }
.spectrum-panel[data-band="c"]  { background: var(--band-c);  color: var(--band-c-text); }
.spectrum-panel[data-band="l1"] { background: var(--band-l1); color: var(--band-l1-text); }
.spectrum-panel[data-band="l2"] { background: var(--band-l2); color: var(--band-l2-text); }
.spectrum-panel[data-band="l3"] { background: var(--band-l3); color: var(--band-l3-text); }
.spectrum-panel[data-band="l4"] { background: var(--band-l4); color: var(--band-l4-text); }

/* Center panel is the anchor: greenback fill, brass keyline */
.spectrum-panel[data-band="c"] {
  box-shadow: inset 0 0 0 3px var(--brass);
  z-index: 2;
}
.spectrum-panel[data-band="c"] .code::after { content: " (the model)"; font-family: var(--font-body); font-weight: 400; opacity: 0.9; }

/* One orchestrated load moment: center settles, wings fan out */
.spectrum[data-animate="ready"] .spectrum-panel { opacity: 0; transform: translateY(16px); }
.spectrum[data-animate="run"] .spectrum-panel {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.spectrum[data-animate="run"] .spectrum-panel[data-band="c"]  { transition-delay: 0s; }
.spectrum[data-animate="run"] .spectrum-panel[data-band="r1"],
.spectrum[data-animate="run"] .spectrum-panel[data-band="l1"] { transition-delay: 0.18s; }
.spectrum[data-animate="run"] .spectrum-panel[data-band="r2"],
.spectrum[data-animate="run"] .spectrum-panel[data-band="l2"] { transition-delay: 0.34s; }
.spectrum[data-animate="run"] .spectrum-panel[data-band="l3"] { transition-delay: 0.48s; }
.spectrum[data-animate="run"] .spectrum-panel[data-band="l4"] { transition-delay: 0.6s; }

/* Desktop: all seven bands side by side in one frame, no horizontal scroll */
@media (min-width: 1000px) {
  .spectrum-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.16fr repeat(2, 1fr);
    gap: 0;
    align-items: stretch;
    /* break out of the reading column to a wider band, capped inside the viewport */
    width: min(1600px, calc(100vw - 2rem));
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 1.25rem 0;
  }
  .spectrum-panel {
    width: auto;
    border-radius: 0;
    border-right: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
    padding: 1rem 0.85rem;
  }
  .spectrum-panel:last-child { border-right: none; }
  .spectrum-panel h3 { font-size: 1.02rem; margin: 0.15rem 0 0.45rem; }
  .spectrum-panel dl { font-size: 0.76rem; line-height: 1.42; }
  .spectrum-panel dt { font-size: 0.6rem; margin-top: 0.45rem; }
  .spectrum-panel[data-band="l4"] { border-radius: var(--radius) 0 0 var(--radius); }
  .spectrum-panel[data-band="r2"] { border-radius: 0 var(--radius) var(--radius) 0; }
  .spectrum-panel[data-band="c"] { border-radius: 4px; }
}

/* Below desktop: stacked, pinned C intro first, then L4 to R2 */
@media (max-width: 999px) {
  .spectrum-panel[data-band="c"]  { order: 0; }
  .spectrum-panel[data-band="l4"] { order: 1; }
  .spectrum-panel[data-band="l3"] { order: 2; }
  .spectrum-panel[data-band="l2"] { order: 3; }
  .spectrum-panel[data-band="l1"] { order: 4; }
  .spectrum-panel[data-band="r1"] { order: 5; }
  .spectrum-panel[data-band="r2"] { order: 6; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spectrum[data-animate="ready"] .spectrum-panel,
  .spectrum[data-animate="run"] .spectrum-panel {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tier-door { transition: none; }
}

/* ==========================================================================
   Mini spectrum strip (homepage, non-interactive)
   ========================================================================== */

.mini-spectrum { text-decoration: none; color: var(--ink); display: block; }
.mini-strip { display: flex; height: 46px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.mini-seg { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.7rem; }
.mini-seg[data-band="r2"] { background: var(--band-r2); color: var(--band-r2-text); }
.mini-seg[data-band="r1"] { background: var(--band-r1); color: var(--band-r1-text); }
.mini-seg[data-band="c"]  { background: var(--band-c);  color: var(--band-c-text); flex: 1.3; box-shadow: inset 0 0 0 2px var(--brass); }
.mini-seg[data-band="l1"] { background: var(--band-l1); color: var(--band-l1-text); }
.mini-seg[data-band="l2"] { background: var(--band-l2); color: var(--band-l2-text); }
.mini-seg[data-band="l3"] { background: var(--band-l3); color: var(--band-l3-text); }
.mini-seg[data-band="l4"] { background: var(--band-l4); color: var(--band-l4-text); }
.mini-caption { font-size: var(--size-small); color: var(--muted); margin-top: 0.5rem; }

/* ==========================================================================
   Myth cards, timeline, accordions, tables
   ========================================================================== */

.myth-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; box-shadow: var(--shadow-soft); }
.myth-card .myth { font-weight: 700; color: var(--critique); }
.myth-card .reality { margin-top: 0.5rem; }

.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--brass); }
.timeline li { position: relative; padding: 0 0 1.2rem 1.4rem; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 0.35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--green); border: 2px solid var(--paper); }
.timeline .year { font-family: var(--font-mono); font-weight: 600; color: var(--green); }

details.acc { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.6rem; background: var(--card-bg); }
details.acc > summary {
  cursor: pointer;
  padding: 0.85rem 1.1rem;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after { content: "+"; font-family: var(--font-mono); color: var(--green); font-size: 1.2rem; }
details.acc[open] > summary::after { content: "-"; }
details.acc .acc-body { padding: 0 1.1rem 1rem; }
details.acc .acc-body p:last-child { margin-bottom: 0; }
.acc-band { font-family: var(--font-mono); font-size: var(--size-small); color: var(--green); }

.bibliography h3 { font-family: var(--font-display); border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; margin-top: 2rem; }
.bibliography ul { list-style: none; padding: 0; }
.bibliography li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.bibliography .why { color: var(--muted); font-size: var(--size-small); display: block; margin-top: 0.2rem; }

.todo-content {
  border: 2px dashed var(--brass);
  background: color-mix(in srgb, var(--brass) 8%, var(--paper));
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 1rem 0;
}
.todo-content .tag { font-family: var(--font-mono); font-weight: 700; color: color-mix(in srgb, var(--brass), var(--ink) 30%); font-size: var(--size-small); letter-spacing: 0.08em; }

.hero { padding-block: clamp(3rem, 8vw, 6rem); }
.hero h1 { max-width: 16ch; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

.two-col { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.4fr 1fr; } }

.pillar-list { counter-reset: pillar; list-style: none; padding: 0; display: grid; gap: 0.8rem; }
.pillar-list li { position: relative; padding-left: 2.6rem; }
.pillar-list li::before {
  counter-increment: pillar; content: counter(pillar);
  position: absolute; left: 0; top: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600;
}

/* ==========================================================================
   Mobile nav
   ========================================================================== */

@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .site-nav .wrap { position: relative; }
  .nav-links {
    display: none;
    position: absolute;
    top: 66px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.05rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--green), var(--ink) 10%), color-mix(in srgb, var(--green), var(--ink) 26%));
    border-bottom: 2px solid var(--brass);
    padding: 0.5rem var(--pad) 1rem;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-top { width: 100%; }
  .nav-group { width: 100%; }
  /* Group triggers read as section headings on mobile; the whole menu is shown */
  .nav-group__trigger {
    width: 100%;
    justify-content: flex-start;
    color: color-mix(in srgb, var(--brass) 72%, #fff);
    font-size: var(--size-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.85rem 0.85rem 0.3rem;
    pointer-events: none;
  }
  .nav-group__trigger::after { display: none; }
  .nav-menu {
    position: static;
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0 0 0.4rem;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .nav-menu::before { content: none; }
  .nav-menu a { color: color-mix(in srgb, var(--paper) 92%, transparent); padding-left: 1.1rem; }
  .nav-menu a:hover { background: color-mix(in srgb, #fff 12%, transparent); color: #fff; }
  .nav-menu a[aria-current="page"] { color: #fff; box-shadow: inset 2px 0 0 var(--brass); }
  .nav-top[aria-current="page"] { box-shadow: inset 2px 0 0 var(--brass); }
}

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