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

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--text-tertiary);
  outline-offset: 2px;
}

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.5rem 1rem;
  background: var(--surface);
  color: var(--text);
  font-size: var(--size-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.skip-to-content:focus {
  left: 1rem;
  top: 1rem;
}

/*
 * Design principles applied:
 *
 * Robin Williams' CRAP:
 *   Contrast  — issue number is the strongest element; title is bold; date/snippet recede
 *   Repetition — 4px spacing unit, consistent type scale, same card rhythm throughout
 *   Alignment — everything left-aligned on a single edge; no mixed centering
 *   Proximity — number+date grouped as metadata; title stands alone; snippet separate
 *
 * Edward Tufte:
 *   Data-ink ratio — no decorative borders on results; whitespace separates, not chrome
 *   Small multiples — results are a tight repeating unit for fast scanning
 *   Layering — typography weight creates depth, not boxes or backgrounds
 */

/*
 * Typography: rationalised system.
 *
 * 5 sizes (1.5× ratio): sm / base / lg / xl / hero
 * 4 weights: 300 (light) / 400 (regular) / 600 (emphasis) / 700 (title)
 * 2 trackings: -0.02em (large text) / +0.02em (small text)
 * 3 line-heights: 1 (display) / 1.4 (UI) / 1.8 (reading)
 * 3 fonts: Lora (wordmark) / Literata (reading) / DM Sans (everything else)
 * Mono only for: issue numbers (#82) and code syntax (before:YYYY-MM-DD)
 */
:root {
  --bg: #fafaf9;
  --surface: #ffffff;
  --text: #1c1917;
  --text-secondary: #57534e;
  --text-tertiary: #736b66;
  --border: #e7e5e4;
  --accent: #1c1917;
  --accent-line: #d6d3d1;
  --accent-hover: #b45309;
  --tag-bg: #f5f5f4;
  --highlight: #fef08a;
  --radius-sm: 3px;
  --radius: 6px;
  --radius-pill: 999px;        /* chip primitive — distinct from corner radii */
  --max-width: 640px;

  /* Type scale — 1.5× ratio, 5 steps */
  --size-sm: 0.8125rem;  /* 13px — all small text (was 11px, raised for accessibility) */
  --size-base: 1rem;     /* 16px — body, titles, input */
  --size-lg: 1.5rem;     /* 24px — headings, wordmark */
  --size-xl: 2.25rem;    /* 36px — issue title max */
  --size-hero: 4rem;     /* 64px — issue number hero */

  /* Fonts */
  --font-body: 'Literata', 'Georgia', serif;
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, monospace;

  /* Line heights */
  --lh-display: 1;
  --lh-ui: 1.4;
  --lh-reading: 1.8;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-open: 0.02em;

  /*
   * Breakpoints (CSS custom properties can't be referenced inside @media,
   * so this is a documentation token — the values must be repeated in
   * @media queries below):
   *   --bp-mobile-portrait:  640px (max)  — handheld portrait
   *   --bp-tablet:           900px (min)  — issue-page side panel appears
   *   --bp-mobile-landscape: 920px (max)  — handheld landscape
   */

  /* Section colors — oklch(65% 0.08 H), varying only hue */
  --section-lead-essay: oklch(65% 0.08 60);
  --section-signposts: oklch(65% 0.08 240);
  --section-lens: oklch(65% 0.08 160);
  --section-book: oklch(65% 0.08 300);
  --section-postcard: oklch(65% 0.08 340);
  --section-worth-your-time: oklch(65% 0.08 200);
  --section-fluxers: oklch(65% 0.08 30);
  --section-other: var(--text-tertiary);
}

body {
  font-family: var(--font);
  font-size: var(--size-base);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Landing quote — compact, supporting element below the header.
 * Smaller than before: the search result is the main content. */
.landing-quote {
  margin-bottom: 1rem;
  padding: 0.75rem 0;
  text-align: center;
  animation: fade-in 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.landing-quote blockquote {
  font-family: var(--font-body);
  font-size: var(--size-base);
  font-style: italic;
  color: var(--text-secondary);
  line-height: var(--lh-reading);
  border: none;
  padding: 0;
  margin: 0 auto 0.375rem;
  max-width: 50ch;
  text-wrap: pretty;
}

.landing-quote-source {
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  text-decoration: none;
  letter-spacing: var(--tracking-open);
}

.landing-quote-source:hover {
  color: var(--accent);
}

/* Empty state — clear hierarchy: heading → guidance */

/* Header — left-aligned per CRAP alignment principle */
.header {
  margin-bottom: 2rem;
}

.logo {
  font-family: 'Lora', var(--font-body);
  font-size: var(--size-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}

.logo-link {
  text-decoration: none;
  color: inherit;
}

.tagline {
  color: var(--text-tertiary);
  font-size: var(--size-sm);
  margin-top: 0.125rem;
  text-wrap: pretty;
}

/* Search Box */
.search-box {
  margin-bottom: 1.5rem;
  position: relative;
}

.search-input-wrapper {
  position: relative;
}

#search-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  /* Reserve space for both the clear (✕) and submit buttons on the right. */
  padding-right: 5.25rem;
  font-family: var(--font);
  font-size: var(--size-base);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

#search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(28, 25, 23, 0.06);
  transform: scaleX(1.01);
}

/* No focus jiggle under a soft keyboard on small devices. */
@media (hover: none) and (pointer: coarse) {
  #search-input:focus {
    transform: none;
  }
}

#search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

#search-input::placeholder {
  color: var(--text-tertiary);
  font-size: var(--size-sm);
}

.search-clear {
  position: absolute;
  right: 2.25rem;
  top: 50%;
  /* Keep the interactive target at its full 44×44 size at all times. */
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  /* 44×44 hit area around the 16×16 icon: WCAG 2.5.5 / Apple HIG. */
  min-width: 44px;
  min-height: 44px;
  padding: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  /* visibility flips after the fade completes on exit; instantly on enter. */
  transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1),
              color 0.15s,
              visibility 0s linear 0.2s;
}

.search-clear svg {
  transform: scale(0.85);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.search-clear.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1),
              color 0.15s,
              visibility 0s linear 0s;
}

.search-clear.is-visible svg {
  transform: scale(1);
}

.search-clear:hover,
.search-clear:focus-visible,
.search-clear:active {
  color: var(--accent);
}

.search-btn {
  position: absolute;
  right: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 0.375rem;
  display: flex;
  align-items: center;
  transition: color 0.15s, transform 0.1s;
}

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

.search-btn:active {
  transform: translateY(-50%) scale(0.96);
}

/* Example queries — clickable landing invitations */
.example-queries {
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.example-queries-label {
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  margin-right: 0.125rem;
}

.example-query {
  font-size: var(--size-sm);
  color: var(--text-secondary);
  background: var(--tag-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
  line-height: var(--lh-ui);
}

.example-query:hover,
.example-query:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.example-query:active {
  transform: scale(0.96);
}

.example-sep {
  color: var(--text-tertiary);
  font-size: var(--size-sm);
  user-select: none;
}

/* Refine hints — shown after results appear */
.refine-hints {
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.refine-label {
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  margin-right: 0.125rem;
}

.refine-suggestion {
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.0625rem 0.375rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
}

.refine-suggestion:hover,
.refine-suggestion:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.refine-suggestion:active {
  transform: scale(0.96);
}

/* Sub-row beneath the search input: holds example queries OR refine hints, plus the ? icon */
.search-sub-row {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  margin-top: 0.5rem;
  position: relative;
}

/* Search tips — single ? icon, always right-aligned in the sub-row */
.search-tips {
  margin-left: auto;
  flex-shrink: 0;
}

.search-tips-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: var(--size-sm);
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill); /* equal width/height — renders as a circle */
  color: var(--text-tertiary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  position: relative;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

/* Extend hit area to ~40×40 without changing visible size. */
.search-tips-trigger::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.search-tips-trigger::-webkit-details-marker {
  display: none;
}

.search-tips-trigger:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.search-tips[open] .search-tips-trigger {
  background: var(--tag-bg);
  border-color: var(--text-tertiary);
}

/* Tips panel: renders inline below the sub-row, full width, with smooth reveal */
.search-tips-panel {
  margin-top: 0.375rem;
  padding: 0.5rem 0.625rem;
  background: var(--tag-bg);
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
  /* Full width: break out of the flex item and span the search-sub-row */
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
  animation: tips-reveal 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tips-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* (position: relative is on .search-sub-row above for panel anchoring) */

.tips-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tip-row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.tip-row dt {
  flex-shrink: 0;
}

.tip-row dt code {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-open);
}

.tip-row dd {
  color: var(--text-tertiary);
  font-size: var(--size-sm);
}

/* Autocomplete */
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Layered shadow for natural depth — adapts to any background */
  box-shadow:
    0 1px 2px rgba(28, 25, 23, 0.04),
    0 4px 12px rgba(28, 25, 23, 0.06),
    0 16px 32px rgba(28, 25, 23, 0.04);
  z-index: 100;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 0.125rem;
}

.autocomplete-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--size-sm);
}

.autocomplete-item:hover,
.autocomplete-item.active {
  background: var(--tag-bg);
}

/* Filter chips — container only; the chips inside are the shared .chip
 * primitive defined in the topics block below. */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

/* Results meta */
/* results-meta removed — count lives in density panel header */

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

/*
 * Density strip — SVG area silhouette with year ticks + landmark annotations
 * Option 2: year ticks rise into the silhouette; years as primary axis;
 * landmark labels below as a second row.
 */
.density-strip {
  margin-bottom: 0.75rem;
  contain: layout style;
}

.density-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.125rem 0.125rem 0 0.5rem;
}

.density-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.125rem 0;
}

.density-result-count {
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.density-svg {
  width: 100%;
  display: block;
}

/* Section-colored bars — same oklch palette as result card stripes */
.density-bar {
  opacity: 0.55;
  animation: density-reveal 0.4s ease-out;
}

.density-section-lead_essay { fill: var(--section-lead-essay); }
.density-section-signposts { fill: var(--section-signposts); }
.density-section-lens { fill: var(--section-lens); }
.density-section-book { fill: var(--section-book); }
.density-section-postcard { fill: var(--section-postcard); }
.density-section-worth_your_time { fill: var(--section-worth-your-time); }
.density-section-fluxers { fill: var(--section-fluxers); }
.density-section-title_summary { fill: var(--section-lead-essay); }
.density-section-other { fill: var(--section-other); }

/* Year labels rendered inside the SVG at baseline */
.density-year-text {
  font-size: 12px;
  font-family: var(--font);
  fill: var(--text-tertiary);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

/* Y-axis scale labels (max and 0) */
.density-axis-label {
  font-size: 12px;
  font-family: var(--font);
  fill: var(--text-tertiary);
  text-anchor: start;
  font-variant-numeric: tabular-nums;
}

.density-axis-line {
  stroke: var(--text-tertiary);
  stroke-width: 0.5;
}

.density-axis-tick {
  stroke: var(--text-tertiary);
  stroke-width: 0.75;
}

/* Tooltip hit areas — invisible rects that show native tooltips */
.density-tooltip-area {
  fill: transparent;
  cursor: pointer;
}

.density-tooltip-area:hover ~ .density-bar {
  opacity: 0.8;
}

@keyframes density-reveal {
  from { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
  to { opacity: 0.55; transform: scaleY(1); }
}

.density-baseline {
  stroke: var(--text-tertiary);
  stroke-width: 0.5;
}

/* density-tick and density-mark-line removed — no longer generated */

.density-mark-line {
  stroke: var(--text-secondary);
  stroke-width: 1;
}

/* Legacy label divs removed — labels now rendered inside SVG */

/*
 * Result list — Tufte "small multiples"
 * No card borders. Whitespace and a thin separator create rhythm.
 * Each result is a scannable unit: number+date / title / snippet
 *
 * CSS containment: results region is layout-independent so browser
 * can optimize rendering and avoid full-page reflows when results populate.
 */
.results {
  display: flex;
  flex-direction: column;
  contain: layout style;
}

.result-card {
  padding: 0.75rem 0 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  animation: result-enter 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/*
 * Section-type color stripes — harmonious muted palette.
 * All derived from oklch(65% 0.08 H) — same lightness and chroma,
 * varying only hue. Low chroma keeps them subtle at 3px width.
 */
.result-card[data-section="lead_essay"] { border-left-color: var(--section-lead-essay); }
.result-card[data-section="signposts"] { border-left-color: var(--section-signposts); }
.result-card[data-section="lens"] { border-left-color: var(--section-lens); }
.result-card[data-section="book"] { border-left-color: var(--section-book); }
.result-card[data-section="postcard"] { border-left-color: var(--section-postcard); }
.result-card[data-section="worth_your_time"] { border-left-color: var(--section-worth-your-time); }
.result-card[data-section="fluxers"] { border-left-color: var(--section-fluxers); }

/* Staggered entrance — each card enters 40ms after the previous */
.result-card:nth-child(1) { animation-delay: 0ms; }
.result-card:nth-child(2) { animation-delay: 40ms; }
.result-card:nth-child(3) { animation-delay: 80ms; }
.result-card:nth-child(4) { animation-delay: 120ms; }
.result-card:nth-child(5) { animation-delay: 160ms; }
.result-card:nth-child(n+6) { animation-delay: 200ms; }

@keyframes result-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-card:last-child {
  border-bottom: none;
}

.result-card a {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.15s ease;
}

.result-card a:hover {
  transform: translateY(-1px);
}

/*
 * Confidence tiers — Robin Williams: if things are different, make them
 * REALLY different. High-confidence results get full weight; low-confidence
 * results visually recede so the eye gravitates to strong matches.
 */
.result-card.confidence-high .result-title {
  font-weight: 700;
}

.result-card.confidence-low {
  opacity: 0.6;
}

.result-card.confidence-low .result-title {
  font-weight: 400;
}

/* Metadata line: issue number and date on the same row — Tufte layering */
.result-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.125rem;
}

.result-number {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: var(--tracking-tight);
}

.result-date {
  font-size: var(--size-sm);
  font-weight: 300;
  font-variant-numeric: oldstyle-nums;
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-open);
}

.result-section {
  font-size: var(--size-sm);
  font-weight: 300;
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-open);
}

.result-semantic {
  font-size: var(--size-sm);
  color: var(--accent);
  opacity: 0.6;
  letter-spacing: var(--tracking-open);
}

/* Section facets */
.section-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
  contain: layout style;
}

.facet {
  font-size: var(--size-sm);
  color: var(--text-secondary);
  background: var(--tag-bg);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
}

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

.facet:active {
  transform: scale(0.96);
}

.facet-count {
  color: var(--text-tertiary);
}

/* Title — strongest contrast via weight ratio */
.result-title {
  font-size: var(--size-base);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  line-height: var(--lh-ui);
  margin-bottom: 0.125rem;
  text-wrap: balance;
}

.result-card a:hover .result-title {
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
}

/* Snippet — recedes behind title, per Tufte layering */
.result-snippet {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  color: var(--text-secondary);
  line-height: var(--lh-reading);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

.result-snippet mark {
  background: var(--highlight);
  color: var(--text);
  padding: 0.05em 0.15em;
  border-radius: var(--radius-sm);
}

/*
 * Eyebrow — small uppercased section label sitting above grouped content.
 * Shared between issue-page topics, recurring themes, drift, adjacent.
 * Tracks with --tracking-open (the system's small-text tracking value);
 * the existing `2 trackings` rule is preserved.
 */
.eyebrow {
  font-family: var(--font);
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-open);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 0.5rem 0;
}

/*
 * Chip — pill-shaped link primitive used for topics on result cards,
 * the issue side panel, the landing themes strip, and adjacent topics
 * on /topics/:keyword. One class, four placements; modifiers may
 * decorate (e.g. .chip-burst) but the base shape is invariant.
 */
.chip {
  display: inline-block;
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  background: var(--tag-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.125rem 0.625rem;
  text-decoration: none;
  line-height: 1.6;
}

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

/* Group containers for chip rows. */
.result-topics,
.issue-topics-chips,
.topic-adjacent-chips {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.recurring-themes-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.theme-freq {
  margin-left: 0.25rem;
  color: var(--text-tertiary);
  opacity: 0.7;
}

/* Issue page: topics side panel + mobile collapse.
 * 900px is the tablet breakpoint — see :root for the documented scale. */
.issue-body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .issue-body-grid {
    /* Keep the article on the same 640px content measure as the rest of
     * the app; let the topics rail sit beside it instead of stealing width. */
    width: calc(var(--max-width) + 2rem + 16rem);
    grid-template-columns: minmax(0, var(--max-width)) 16rem;
    gap: 2rem;
    margin-right: calc(-1 * (16rem + 2rem));
  }
  .issue-topics-mobile-host { display: none; }
}

@media (max-width: 899px) {
  .issue-topics-side-host { display: none; }
}

.issue-topics-panel {
  position: sticky;
  top: 1rem;
  align-self: start;
  border-left: 1px solid var(--border);
  padding-left: 1rem;
}

.issue-topics-mobile {
  margin: 0.75rem 0;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.issue-topics-mobile > summary {
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.issue-related-issues {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.related-issue-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.related-issue-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--size-sm);
}

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

.related-overlap {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--size-sm);
}

/* Recurring themes strip on landing */
.recurring-themes {
  margin: 1.5rem 0;
}

/* /topics page */
.topics-index {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.5rem 1.5rem;
}

.topics-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px dotted var(--border);
  padding: 0.25rem 0;
}

.topics-row-link {
  font-family: var(--font-body);
  color: var(--text);
  text-decoration: none;
}

.topics-row-link:hover { color: var(--accent); }

.topics-row-freq {
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--text-tertiary);
}

.topics-detail-meta {
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  margin: 0 0 0.75rem 0;
}

.topics-search-link {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--accent);
}

.topic-issues-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.topic-issue-row a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}

.topic-issue-row a:hover { background: var(--tag-bg); }

.topic-issue-number {
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  min-width: 3rem;
}

.topic-issue-date {
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  min-width: 6rem;
}

.topic-issue-title {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  color: var(--text);
}

/* Topic detail: sparkline + adjacent topics */
.topic-sparkline-host {
  margin: 0.5rem 0 1rem 0;
  max-width: 100%;
}

.topic-sparkline {
  width: 100%;
  max-width: 320px;
  height: 36px;
  display: block;
}

.sparkline-path {
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
}

.sparkline-dot {
  fill: var(--accent);
}

.topic-adjacent {
  margin: 1rem 0 1.5rem 0;
}

/*
 * Topics index — confidence tiers mirror the result-card pattern:
 * high gets bold, low gets lighter weight + opacity, medium is the
 * default. One mechanism for one concept.
 */
.topics-row.confidence-high .topics-row-link {
  font-weight: 700;
}
.topics-row.confidence-low {
  opacity: 0.6;
}
.topics-row.confidence-low .topics-row-link {
  font-weight: 400;
}

.topics-row-burst {
  font-size: var(--size-sm);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: var(--tracking-open);
  text-transform: uppercase;
  margin-left: 0.375rem;
}

.topic-sparkline-caption {
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  margin: 0.25rem 0 0 0;
}

/* Terminology drift */
.topic-drift {
  margin: 1rem 0 1.5rem 0;
}

.topic-drift-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.topic-drift-bucket {
  display: grid;
  grid-template-columns: 5rem 1fr;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.25rem 0;
  border-bottom: 1px dotted var(--border);
}

.topic-drift-quarter {
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--text-tertiary);
}

.topic-drift-words {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  gap: 0.375rem;
}

.topic-drift-word-text {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  color: var(--text);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
  margin-top: 0.5rem;
}

.page-btn {
  font-family: var(--font);
  font-size: var(--size-sm);
  color: var(--accent);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, transform 0.1s;
}

.page-btn:hover,
.page-btn:focus-visible {
  border-color: var(--accent);
}

.page-btn:active {
  transform: scale(0.96);
}

.page-info {
  font-size: var(--size-sm);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.btn-secondary {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--size-sm);
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-secondary:active {
  transform: scale(0.96);
}

/* Issue section landing page */
.issue-header {
  margin-bottom: 1.5rem;
  position: relative;
}

.issue-nav-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 0.75rem;
}

.issue-nav-top .nav-link:last-child {
  text-align: right;
}

.nav-link {
  font-size: var(--size-sm);
  color: var(--accent);
  text-decoration: none;
  letter-spacing: var(--tracking-open);
}

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

.issue-meta-line {
  font-size: var(--size-sm);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-open);
}

/* Oversized issue number — the page's identity */
.issue-number-hero {
  font-family: var(--font);
  font-size: var(--size-hero);
  font-weight: 300;
  color: var(--border);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  margin-top: 0.25rem;
  margin-bottom: -0.25rem;
}

.issue-page-title {
  font-size: clamp(var(--size-lg), 3vw, var(--size-xl));
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 0.5rem;
  text-wrap: balance;
}

.issue-page-quote {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-style: italic;
  color: var(--text-secondary);
  line-height: var(--lh-reading);
  border-left: 2px solid var(--text-tertiary);
  padding-left: 0.75rem;
  margin: 0 0 1rem;
  text-wrap: pretty;
}

.section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.section-tab {
  font-family: var(--font);
  font-size: var(--size-sm);
  position: relative;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.section-tab:hover,
.section-tab:focus-visible {
  background: var(--tag-bg);
}

.section-tab:active {
  transform: scale(0.96);
}

.section-tab::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0.25rem;
  right: 0.25rem;
  height: 2px;
  border-radius: var(--radius-sm); /* clamps to half the 2px height */
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-tab.active {
  font-weight: 600;
  color: var(--text);
}

.section-tab.active::after {
  transform: scaleX(1);
}

.section-content {
  margin-bottom: 2rem;
  animation: section-fade 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes section-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-heading {
  font-size: var(--size-lg);
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-wrap: balance;
}

.section-body {
  font-family: var(--font-body);
  line-height: var(--lh-reading);
  font-size: var(--size-base);
  max-width: 60ch;
  text-wrap: pretty;
}

.section-body p { margin-bottom: 0.875rem; }
.section-body blockquote {
  border-left: 2px solid var(--text-tertiary);
  padding-left: 1rem;
  color: var(--text-secondary);
  margin: 1rem 0;
  font-style: italic;
}
.section-body a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 2px;
}
.section-body a:hover { text-decoration-color: var(--accent-hover); }
.section-body ul, .section-body ol { margin: 0.875rem 0; padding-left: 1.25rem; }
.section-body li { margin-bottom: 0.25rem; }

.issue-footer-actions {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 1rem;
}

/* Empty state — clear hierarchy */
.empty-state {
  padding: 2rem 0;
  color: var(--text-secondary);
}

.empty-heading {
  font-size: var(--size-base);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
  text-wrap: balance;
}

/* .empty-guidance removed — element no longer exists */

/* Loading — spinner is hidden for 200ms so fast loads never flash it.
 * Uses CSS animation-delay rather than JS timeout for simplicity. */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3rem;
  color: var(--text-tertiary);
  font-size: var(--size-sm);
  opacity: 0;
  animation: loading-appear 0.15s ease-out 200ms forwards;
}

@keyframes loading-appear {
  to { opacity: 1; }
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--text-secondary);
  border-radius: var(--radius-pill); /* equal width/height — renders as a circle */
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Footer */
.footer {
  margin-top: auto;
  padding-top: 2rem;
  text-align: center;
  font-size: var(--size-sm);
  color: var(--text-tertiary);
}

.footer a {
  color: var(--text-secondary);
  text-decoration: none;
}

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

.footer-built {
  margin-top: 0.125rem;
  font-size: var(--size-sm);
}

.footer-built a {
  color: var(--text-tertiary);
}

.footer-built a:hover {
  color: var(--accent);
}

/* Responsive */
/* Mobile portrait: compact examples, hide density strip */
@media (max-width: 640px) and (orientation: portrait) {
  .container {
    padding: 1.5rem 1rem;
  }

  .example-queries {
    gap: 0.25rem;
  }

  .example-sep {
    display: none;
  }

  .search-tips-panel {
    font-size: var(--size-sm);
  }

  .tip-row {
    flex-direction: column;
    gap: 0.125rem;
  }

  .example-query { padding: 0.375rem 0.625rem; }
  .refine-suggestion { padding: 0.25rem 0.5rem; }
  .section-tab { padding: 0.5rem 0.75rem; }

  /* Space the clear and submit buttons further apart for thumb taps. */
  .search-clear { right: 2.75rem; }
  #search-input { padding-right: 5.5rem; }
}

/* Mobile landscape: compact examples */
@media (max-width: 920px) and (orientation: landscape) {
  .example-sep {
    display: none;
  }
}