@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- Quiet, Thoughtful Editorial Design System --- */
:root {
  /* Tells the browser to render ALL native UI chrome (page scrollbar, date-
     picker popup calendar, select dropdowns, etc.) using its dark palette —
     these are OS-level surfaces the page's own CSS variables can't reach,
     and without this they stay light regardless of [data-theme]. Setting it
     here (inherited) covers every native control in one place instead of
     needing a per-element override each time one shows up unthemed. */
  color-scheme: dark;

  /* Dark Mode Variables (Obsidian Ink & Quiet Terracotta Clay) */
  --bg-primary: hsl(220, 15%, 8%);
  --bg-secondary: hsl(220, 15%, 11%);
  --bg-tertiary: hsl(220, 12%, 14%);
  --text-primary: hsl(30, 15%, 90%);
  --text-secondary: hsl(220, 10%, 72%);
  --text-muted: hsl(220, 8%, 52%);
  
  --accent: hsl(15, 60%, 55%);
  --accent-light: hsl(15, 70%, 62%);
  --accent-dark: hsl(15, 55%, 38%);
  /* Solid-fill button hover: darker than accent-dark, since lightening is
     capped by AA 4.5:1 for the white label (plain --accent falls to ~3.6:1)
     while darkening increases contrast and gives a clearly visible step */
  --accent-hover: hsl(15, 60%, 27%);
  --accent-glow: hsla(15, 60%, 55%, 0.08);
  --success: hsl(150, 45%, 45%);
  
  --border: rgba(255, 255, 255, 0.08);

  /* The pinned header's separation on scroll. A faint black shadow disappears
     against a near-black page, so dark mode leans on a deeper shadow plus a
     brighter hairline; light mode only needs the shadow. */
  --header-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  --header-border-scrolled: rgba(255, 255, 255, 0.16);
  --border-muted: rgba(255, 255, 255, 0.04);
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  
  --shadow-subtle: none;
}

[data-theme="light"] {
  color-scheme: light;

  /* Light Mode Variables (Warm Linen Paper & Deep Crimson Ink) */
  /* Paper tones stay near-neutral — much above ~10% saturation the warm
     hue reads as orange rather than linen. */
  --bg-primary: hsl(40, 20%, 98%);
  --bg-secondary: hsl(40, 14%, 93%);
  --bg-tertiary: hsl(40, 10%, 88%);
  --text-primary: hsl(24, 30%, 10%);
  --text-secondary: hsl(24, 14%, 27%);
  --text-muted: hsl(24, 8%, 40%);

  --accent: hsl(355, 65%, 32%);
  --accent-light: hsl(355, 75%, 42%);
  --accent-dark: hsl(355, 60%, 20%);
  --accent-hover: hsl(355, 60%, 28%);
  --accent-glow: hsla(355, 65%, 32%, 0.06);
  --success: hsl(150, 50%, 25%);

  --border: rgba(0, 0, 0, 0.13);
  --header-shadow: 0 4px 16px rgba(24, 20, 16, 0.16);
  --header-border-scrolled: rgba(0, 0, 0, 0.18);
  --border-muted: rgba(0, 0, 0, 0.06);
}

/* --- Global Resets & Styling --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Firefox's scrollbar theming API — thin track, thumb tinted to the
     page's own border color instead of the OS default. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* WebKit/Blink equivalent of the rule above (Firefox has no ::-webkit-*
   support, hence the separate scrollbar-color declaration there). Applies
   globally — anywhere else on the page that scrolls (code blocks, the
   Hall of Fame carousels, the mobile filter sidebar) picks this up too
   unless it declares its own, more specific override. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 6px;
  border: 2px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-muted);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

/* --- Clean Nav Header --- */
.site-header {
  border-bottom: 1px solid var(--border);
  background-color: var(--bg-primary) !important;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header.scrolled {
  box-shadow: var(--header-shadow);
  border-bottom-color: var(--header-border-scrolled);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.2rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.6rem;
  justify-content: space-between;
  align-items: center;
  /* Anchors the mobile nav-links dropdown (position: absolute) below the
     header row instead of the nearest positioned ancestor further up. */
  position: relative;
}

.logo {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo svg {
  color: var(--accent) !important;
}

.logo span {
  font-weight: 400;
  font-style: italic;
  color: var(--text-primary);
}

.logo span span {
  font-weight: 600;
  font-style: normal;
  color: var(--accent);
}

.nav-links {
  display: flex;
  gap: 2rem;
  margin-left: 3rem;
  margin-right: auto;
}

.nav-link {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0;
  position: relative;
  transition: color 0.2s ease;
}

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

.nav-link.active {
  color: var(--accent);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

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

/* .nav-toggle-btn also carries .btn-icon (equal specificity, single class
   each) — this has to come after the .btn-icon rule above in source order
   to win the cascade and actually hide the button on desktop. */
.nav-toggle-btn {
  display: none;
}

@media (max-width: 680px) {
  .nav-toggle-btn {
    display: flex;
  }
  /* Collapsed into a dropdown panel below the header, toggled by
     .nav-toggle-btn (see public/js/nav-toggle.js) — .nav-open is applied
     to this element directly, not a parent, so the [id="nav-links"] the
     button's aria-controls points at is the same element being shown. */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 1.5rem 1rem;
  }
  .nav-links.nav-open {
    display: flex;
    box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.35);
  }
  .nav-link {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border-muted);
  }
  .nav-link:last-child {
    border-bottom: none;
  }
  .nav-link.active::after {
    display: none;
  }
}

/* --- Flat Editorial Hero Section --- */
.hero-section {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
  padding: 4rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 3.5rem;
}

.hero-content {
  text-align: left;
}

.hero-content h1 {
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  line-height: 1.15;
}

.hero-content h1 span {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}

.hero-content p {
  color: var(--text-secondary);
  font-family: 'Lora', Georgia, serif;
  font-size: 1.15rem;
  margin-bottom: 2rem;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  gap: 1.2rem;
}

.btn-primary {
  /* accent-dark (not accent) so white button text clears WCAG AA 4.5:1 —
     plain --accent only reaches ~3.6:1 against white in dark mode */
  background-color: var(--accent-dark);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  color: #fff !important;
  text-decoration: none !important;
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover {
  border-color: var(--accent);
  background-color: var(--accent-glow);
  color: var(--accent) !important;
  text-decoration: none !important;
}

/* Flat Hero Featured Carousel (Borderless & Simple) */
.hero-carousel {
  position: relative;
  width: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0 1.5rem 2rem;
  border-left: 1px solid var(--border);
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 85%;
  min-height: 280px;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.carousel-slide.active {
  opacity: 1;
  visibility: visible;
}

.carousel-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.carousel-latest-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.carousel-card-title {
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.carousel-card-title a {
  color: var(--text-primary);
}

.carousel-card-title a:hover {
  color: var(--accent-light);
}

.carousel-card-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 0.8rem;
}

.carousel-card-tldr {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
}

.carousel-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-muted);
  padding-top: 0.8rem;
  margin-top: auto;
}

.carousel-author {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
}

.carousel-read-btn {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.carousel-read-btn:hover {
  color: var(--text-primary);
}

.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.8rem;
}

.carousel-control {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.carousel-control:hover {
  color: var(--accent);
}

.carousel-dots {
  display: flex;
  gap: 0.5rem;
}

.carousel-dot {
  /* 10px visible dot inside a 20px hit area (padding + content-box clip).
     Full-opacity text-secondary: the old 55%-opacity text-muted dots were
     nearly invisible against the hero in both themes. */
  width: 20px;
  height: 20px;
  padding: 5px;
  background-clip: content-box;
  border-radius: 50%;
  background-color: var(--text-secondary);
  opacity: 0.8;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.carousel-dot:hover {
  opacity: 1;
}

.carousel-dot.active {
  background-color: var(--accent);
  opacity: 1;
  transform: scale(1.1);
}

@media (max-width: 860px) {
  .hero-section {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 2.5rem 0;
  }
  .hero-content {
    text-align: center;
  }
  .hero-content h1 {
    font-size: 2.6rem;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-carousel {
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 2rem 0 0 0;
    min-height: auto;
  }
}

/* --- Flat Editorial Reading Feed Layout --- */
.feed-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3.5rem;
  align-items: start;
}

.main-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3rem;
  align-items: start;
}

/* Feed page: left filters, center results, right Trending/Hall of Fame. */
.main-layout.feed-3col {
  grid-template-columns: 260px 1fr 300px;
}

/* Grid items default to min-width:auto, so a wide descendant (e.g. the
   horizontally-scrollable category filter) can stretch the whole grid and
   cause page-level horizontal overflow on narrow viewports. */
.papers-grid-container {
  min-width: 0;
}

.feed-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  border-left: 1px solid var(--border);
  padding-left: 2rem;
  /* Balances the left padding now that overflow-y: auto can put a
     scrollbar flush against the right edge. */
  padding-right: 0.6rem;
  min-width: 0;
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.sidebar-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.compact-card-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.compact-card {
  display: block;
  color: inherit;
  text-decoration: none;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}

/* The global `a:hover` rule (element+pseudo-class) outranks a plain
   `.compact-card` selector, so without this override it wins on hover and
   underlines/recolors the WHOLE card link — meta row included. Only the
   title should react; the meta row stays muted. */
.compact-card:hover {
  color: inherit;
  text-decoration: none;
}

.compact-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.compact-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.35rem;
  color: var(--text-primary);
}

.compact-card-star {
  color: var(--accent);
  vertical-align: -1px;
}

.compact-card:hover .compact-card-title {
  color: var(--accent);
  text-decoration: underline;
}

.compact-card-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.compact-card-meta span:last-child {
  white-space: nowrap;
}

.sidebar-view-all {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}

.feed-date-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.feed-date-banner a {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 1150px) {
  .main-layout.feed-3col {
    grid-template-columns: 260px 1fr;
  }
  .feed-sidebar-right {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-right: 0;
    padding-top: 2rem;
    flex-direction: row;
    flex-wrap: wrap;
    /* Once it drops below the papers list as its own full-width row, sticky
       positioning has nothing useful to do — the papers list above it is a
       single, much taller grid row it stays pinned within for, so as that
       row ends and this one begins, both would render pinned to the same
       top:96px position at once. */
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .feed-sidebar-right .sidebar-section {
    flex: 1 1 260px;
  }
}

@media (max-width: 768px) {
  /* .main-layout.feed-3col (two classes) outranks a plain .main-layout
     selector regardless of source order, so without explicitly repeating
     the compound selector here, the 900px breakpoint's `240px 1fr` columns
     keep winning below 768px too — squeezing the content column down to
     whatever's left after a fixed 240px sidebar (as little as ~24px on a
     360px phone) instead of collapsing to a single column. */
  .main-layout, .main-layout.feed-3col, .feed-layout {
    grid-template-columns: 1fr;
  }
  .feed-sidebar-right {
    border-top: 1px solid var(--border);
    padding-top: 2rem;
  }
}

/* Borderless Typographic Cards */
.papers-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.centered-feed {
  grid-template-columns: 1fr !important;
  max-width: 680px;
  margin: 0 auto;
}

.centered-feed .papers-grid-container {
  max-width: 100%;
}

.paper-card {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: default;
  border-radius: var(--radius-sm);
  /* Its own stacking context, so the ::before below (z-index: -1) is scoped
     to sit behind THIS card's content only — not behind unrelated page
     content further up the stacking order. */
  z-index: 0;
}

/* The whole card is a click target (see app.js) with no visible box at
   rest, so hover shows a full-width tint. The tint is an absolutely-
   positioned layer that only animates opacity — animating layout
   properties (padding/margin) instead would shift content on every
   hover/unhover. */
.paper-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.25rem;
  right: -1.25rem;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-sm);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.paper-card:hover::before {
  opacity: 1;
}

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

/* Unified Metadata Row */
.card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}

.card-category {
  font-weight: 700;
  color: var(--text-secondary);
}

.meta-separator {
  color: var(--border);
}

.card-author {
  font-weight: 500;
}

.card-date {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

/* Deliberately minimal — muted, same size as surrounding meta text, no
   accent color or bold weight, so a popular paper doesn't visually shout
   over the rest of the card. */
.card-upvotes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-muted);
}

.card-code-badge {
  color: var(--accent);
  font-weight: 700;
}

/* Card Body Content */
.card-body-main {
  margin-bottom: 1.2rem;
}

.title-row {
  display: flex;
  /* wrap so the stars-badge drops below the title instead of forcing
     horizontal overflow on very narrow (<360px) viewports */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.4rem;
}

.stars-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.stars-badge svg {
  color: var(--accent);
}

.paper-title {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.35;
}

.paper-title a {
  color: var(--text-primary);
  transition: color 0.15s ease;
}

.paper-title a:hover {
  color: var(--accent-light);
}

.paper-subtitle {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 0.2rem;
  margin-bottom: 0.8rem;
}

.paper-summary-text {
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.65;
  margin-top: 0.5rem;
}

/* Card Footer Links Alignment */
.card-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  gap: 0.75rem 1.5rem;
}

.resource-links {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.resource-link {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.15s ease;
}

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

.btn-read-more {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.btn-read-more:hover {
  color: var(--text-primary);
}

/* --- Inline Sponsor Card --- */
.sponsor-inline-card {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3rem 0;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
}

.sponsor-meta {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}

.sponsor-body {
  margin-bottom: 1.2rem;
}

.sponsor-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.sponsor-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.sponsor-footer {
  display: flex;
  align-items: center;
}

.btn-sponsor {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.btn-sponsor:hover {
  color: var(--text-primary);
}

/* --- Dynamic Search Portal (/search) --- */
.filters-sidebar {
  border-right: 1px solid var(--border);
  padding-right: 2rem;
  min-width: 0;
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

/* This is the <details>'s real content, shown/hidden by its actual [open]
   state (set correctly per-viewport by the inline script right after this
   element in feed.js, before first paint) — not by an author CSS override.
   Chrome's native details-collapse runs through an internal
   content-visibility mechanism on non-summary children that a plain
   `display` override doesn't reliably undo, so the [open] attribute itself
   has to be the source of truth. */
.filters-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  /* Small buffer so .filters-sidebar's border-right (and .filters-sidebar's
     bottom edge) doesn't end flush against the last control — same "give it
     room to breathe" treatment as the TOC vertical bars on /hall-of-fame and
     /glossary. */
  padding-bottom: 0.5rem;
}

.filters-sidebar-toggle {
  display: none;
}

/* At this width .feed-sidebar-right (in public/style.css's feed-layout
   rules above) drops into the same grid column as this sidebar, as its own
   full-width row below the papers list. Left sticky here, this sidebar's
   pin (transparent background) would still be active — and visually
   overlapping — right as that row scrolls into the same top:96px band. */
@media (max-width: 1150px) {
  .filters-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 768px) {
  .filters-sidebar {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .filters-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    padding: 0.5rem 0;
    list-style: none;
    /* Stays reachable while scrolled through a long open filter panel, so
       collapsing it doesn't require scrolling all the way back to the top
       of the page first. */
    position: sticky;
    top: 77px;
    z-index: 3;
    background: var(--bg-primary);
  }
  .filters-sidebar-toggle::-webkit-details-marker {
    display: none;
  }
  .filters-toggle-icon {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
  }
  .filters-sidebar[open] .filters-toggle-icon {
    transform: rotate(180deg);
  }
  .filters-sidebar-content {
    padding-top: 1rem;
  }
}

.filter-section {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.filter-section h3,
.filter-section h2 {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.search-wrapper {
  position: relative;
  width: 100%;
}

.search-wrapper input {
  width: 100%;
  padding: 0.6rem 0.8rem 0.6rem 2.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: transparent;
  color: var(--text-primary);
  font-size: 0.88rem;
  outline: none;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s ease;
}

.search-wrapper input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-wrapper svg {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

/* Primary search bar, center column above results — split out from the
   Filters accordion (public/js/search-controls.js still finds #search-input
   by id regardless of where it lives in the DOM, so no JS changes needed).
   Search is the main action; date/topic/resource-type/sort are secondary
   refinements and stay in the Filters accordion. */
.feed-search-primary {
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
}

.feed-search-primary input {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: transparent;
  color: var(--text-primary);
  font-size: 1rem;
  outline: none;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s ease;
}

.feed-search-primary input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.feed-search-primary svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.vertical-categories {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.filter-btn {
  text-align: left;
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 0.4rem 0;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
}

.filter-btn:hover {
  color: var(--accent);
}

.filter-btn.active {
  color: var(--accent);
  font-weight: 600;
}

.filter-select {
  width: 100%;
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

/* Scoped to <select> only — the native browser chevron sits flush against
   the box edge with no breathing room; a custom one lets it sit inset like
   the rest of the control's padding. Doesn't touch the shared class's
   <input type="date"> usage, which has its own native calendar icon that a
   background-image here would visually collide with. */
select.filter-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 12px;
  padding-right: 2rem;
}

.filter-select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.archive-month-list {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.archive-month-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.archive-month-link:hover,
.archive-month-link.active {
  color: var(--accent);
}

.archive-month-count {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.checkbox-container input {
  cursor: pointer;
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

/* --- Editorial Detail Page & Typography --- */
.article-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  transition: color 0.15s ease;
}

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

article {
  padding: 0;
}

article header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
}

article header h1 {
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.article-subtitle {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

.article-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: 'Inter', sans-serif;
}

.article-meta span {
  font-style: normal;
}

.article-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.article-resources {
  margin-top: 1.2rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.resource-btn {
  background-color: transparent;
  border: none;
  color: var(--accent);
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.15s ease;
}

.resource-btn:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.resource-btn.code-btn {
  color: var(--accent);
}

article section {
  margin-bottom: 3.5rem;
}

article h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}

/* Beautiful blockquote styling */
.tldr-lead {
  font-size: 1.25rem;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  line-height: 1.7;
  color: var(--text-primary);
  border-left: 2px solid var(--accent);
  background-color: transparent;
  padding: 0.2rem 0 0.2rem 1.2rem;
  margin: 1.8rem 0;
}

.deep-dive-text {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text-secondary);
}

.deep-dive-text p {
  margin-bottom: 1.6rem;
}

/* Editorial Drop-Cap */
.deep-dive-text p:first-of-type::first-letter {
  font-family: 'Lora', Georgia, serif;
  font-size: 4rem;
  font-weight: 500;
  float: left;
  line-height: 0.8;
  margin-right: 0.5rem;
  margin-top: 0.1rem;
  color: var(--accent);
}

.bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.bullet-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.98rem;
  color: var(--text-secondary);
}

.bullet-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

/* The global `* { margin: 0; padding: 0 }` reset (see top of file) strips the
   native <ul>'s left padding, so a default `list-style: disc` marker (which
   assumes that padding exists to sit inside) renders hanging off the left
   edge instead of indented — hence a plain custom marker, matching
   .bullet-list's pattern, rather than relying on native list markers. */
.takeaways-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.takeaways-list li {
  position: relative;
  padding-left: 1.5rem;
}

.takeaways-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

/* Flat Clean Code Block Window */
.code-window,
.code-wrapper {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 2rem 0;
}

.code-window-header {
  background-color: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  position: relative;
}

.window-dots {
  display: none;
}

.code-window-title {
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Toolbar row above the code panes: language tabs on the left, wrap/copy
   actions on the right. Replaces the old absolutely-positioned Copy button
   now that there can be multiple language panes to switch between. */
.code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
}

.code-tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.code-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.code-tab:hover {
  color: var(--text-secondary);
}

.code-tab.active {
  background-color: var(--bg-secondary);
  border-color: var(--border);
  color: var(--accent);
}

.code-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-copy-code,
.btn-wrap-toggle {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-copy-code:hover,
.btn-wrap-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-copy-code.copied {
  color: var(--success);
  border-color: var(--success);
}

.btn-wrap-toggle.active {
  color: var(--accent);
  border-color: var(--accent);
}

.code-window pre,
.code-wrapper pre {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  max-height: 480px;
  overflow-y: auto;
  /* No Prism stock theme is loaded, so this supplies the baseline layout;
     token colors are mapped to this site's own tokens below. Wrapping is
     the default (line-wrap toggle starts "on"): with no horizontal
     overflow there's also no two-scrollbar white-corner artifact until
     wrap is turned off. */
  padding: 1.25rem 1.5rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.code-wrapper.wrap-off pre {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.code-window pre::-webkit-scrollbar,
.code-wrapper pre::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.code-window pre::-webkit-scrollbar-track,
.code-wrapper pre::-webkit-scrollbar-track {
  background: transparent;
}
.code-window pre::-webkit-scrollbar-thumb,
.code-wrapper pre::-webkit-scrollbar-thumb {
  background-color: var(--border);
}
.code-window pre::-webkit-scrollbar-corner,
.code-wrapper pre::-webkit-scrollbar-corner {
  background: var(--bg-secondary);
}

/* Custom line-number gutter (see the 'complete' hook in renderArticle's
   inline Prism script): each real source line becomes a two-cell flex row
   (number cell + content cell), like a table. The number cell just matches
   whatever height its row ends up being — wrapped or not — with no manual
   position math, and (unlike a single padded span) a wrapped continuation
   never bleeds into the number column, since it's a separate flex sibling. */
.code-wrapper pre.lp-line-numbers code {
  counter-reset: lp-line;
  display: block;
}
.code-wrapper .lp-code-row {
  display: flex;
  align-items: flex-start;
}
.code-wrapper .lp-line-no {
  flex-shrink: 0;
  width: 1.75rem;
  text-align: right;
  padding-right: 0.75rem;
  margin-right: 0.75rem;
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  counter-increment: lp-line;
  user-select: none;
  white-space: nowrap; /* keep two/three-digit line numbers on one line */
  /* Stays put while a no-wrap row scrolls horizontally underneath it. */
  position: sticky;
  left: 0;
  background: var(--bg-secondary);
}
.code-wrapper .lp-line-no::before {
  content: counter(lp-line);
}
.code-wrapper .lp-line-content {
  flex: 1;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.code-wrapper.wrap-off .lp-line-content {
  white-space: pre;
  overflow-wrap: normal;
}
.code-wrapper .lp-nl {
  /* Collapses the trailing newline character to nothing visually (see the
     'complete' hook), instead of it rendering as a blank line under the
     parent's white-space: pre-wrap. */
  white-space: normal;
}

/* Prism syntax colors mapped to the site's own tokens (no stock Prism
   theme is loaded — see renderArticle's extraHead) so the code block
   matches --bg-secondary/--text-primary in both themes rather than a
   hardcoded dark palette that ignores the toggle. `.code-wrapper` is what
   templates.js actually renders; `.code-window` is kept alongside it
   (currently unused markup) so neither silently regresses if reattached. */
.code-window pre,
.code-window code,
.code-wrapper pre,
.code-wrapper code {
  background: transparent !important;
  color: var(--text-primary);
}
.code-window .token.comment,
.code-window .token.prolog,
.code-window .token.doctype,
.code-window .token.cdata,
.code-wrapper .token.comment,
.code-wrapper .token.prolog,
.code-wrapper .token.doctype,
.code-wrapper .token.cdata {
  color: var(--text-muted);
}
.code-window .token.keyword,
.code-window .token.tag,
.code-window .token.selector,
.code-window .token.important,
.code-wrapper .token.keyword,
.code-wrapper .token.tag,
.code-wrapper .token.selector,
.code-wrapper .token.important {
  color: var(--accent-light);
}
.code-window .token.string,
.code-window .token.attr-value,
.code-window .token.char,
.code-window .token.builtin,
.code-window .token.inserted,
.code-window .token.string-interpolation,
.code-wrapper .token.string,
.code-wrapper .token.attr-value,
.code-wrapper .token.char,
.code-wrapper .token.builtin,
.code-wrapper .token.inserted,
.code-wrapper .token.string-interpolation {
  color: var(--success);
}
.code-window .token.interpolation,
.code-wrapper .token.interpolation {
  color: var(--text-primary);
}
.code-window .token.number,
.code-window .token.boolean,
.code-window .token.constant,
.code-window .token.symbol,
.code-wrapper .token.number,
.code-wrapper .token.boolean,
.code-wrapper .token.constant,
.code-wrapper .token.symbol {
  color: var(--accent);
}
.code-window .token.function,
.code-window .token.class-name,
.code-wrapper .token.function,
.code-wrapper .token.class-name {
  color: var(--text-primary);
  font-weight: 600;
}
.code-window .token.operator,
.code-window .token.punctuation,
.code-window .token.property,
.code-wrapper .token.operator,
.code-wrapper .token.punctuation,
.code-wrapper .token.property {
  color: var(--text-secondary);
}
.code-window code,
.code-wrapper code {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
}

/* --- Flat Audio TTS Controller --- */
.tts-player {
  background: transparent;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-radius: 0;
  padding: 1rem 0;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.tts-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.tts-info {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.tts-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}

.tts-controls .btn-icon {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.tts-controls .btn-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.tts-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tts-player.playing .tts-visualizer {
  opacity: 1;
}

.tts-visualizer .bar {
  width: 2px;
  height: 2px;
  background-color: var(--accent);
}

.tts-playback-speed {
  background-color: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.5rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-family: 'Inter', sans-serif;
}

/* --- Flat FAQs --- */
.faq-section {
  margin-top: 3.5rem;
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
}

.faq-item {
  border: none;
  border-bottom: 1px solid var(--border-muted);
  background-color: transparent;
  border-radius: 0;
  margin-bottom: 0;
  padding: 1.2rem 0;
  box-shadow: none;
}

.faq-item summary {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.15s ease;
}

.faq-item summary:hover {
  color: var(--accent);
}

.faq-item summary::after {
  content: "+";
  color: var(--text-muted);
  font-size: 1.2rem;
}

.faq-item[open] summary {
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.faq-item[open] summary::after {
  content: "−";
  color: var(--accent);
}

/* --- Concept Diagram container --- */
.diagram-section {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2rem;
  box-shadow: none;
}

/* --- Glossary Hover Tooltips ---
   The bubble is a pure-CSS ::after reading from data-tooltip. Reveal on
   hover AND focus-within-style :focus (spans get tabindex="0" from
   addTooltips) so keyboard users aren't excluded. Terms with a site-wide
   glossary page render as <a> instead of <span> (see addTooltips) — the
   overrides keep them visually identical to non-link terms, with the
   dashed underline as the only affordance either way. */
.term-tooltip {
  border-bottom: 1px dashed var(--accent);
  cursor: help;
  position: relative;
  font-weight: inherit;
}

a.term-tooltip {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

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

.term-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  /* --tt-shift is set by app.js to clamp the bubble inside the viewport for
     terms near the left/right edges; 0 keeps it centered. */
  transform: translateX(calc(-50% + var(--tt-shift, 0px))) translateY(4px);
  width: max-content;
  max-width: min(320px, 78vw);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 0.65rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  text-align: left;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  border: 1px solid var(--border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  /* display:none (not visibility) so the hidden 320px box takes no layout
     space — visibility:hidden inflated documentElement.scrollWidth and put a
     horizontal scrollbar on /feed at narrow widths. */
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s allow-discrete;
  z-index: 60;
}

/* Small caret under the bubble */
.term-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--border);
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s allow-discrete;
  z-index: 60;
}

.term-tooltip:hover::after,
.term-tooltip:focus::after,
.term-tooltip:hover::before,
.term-tooltip:focus::before {
  display: block;
  opacity: 1;
}
.term-tooltip:hover::after,
.term-tooltip:focus::after {
  transform: translateX(calc(-50% + var(--tt-shift, 0px))) translateY(0);
}
.term-tooltip:hover::before,
.term-tooltip:focus::before {
  transform: translateX(-50%) translateY(0);
}

/* Fade-in from display:none (modern browsers; others show instantly) */
@starting-style {
  .term-tooltip:hover::after,
  .term-tooltip:focus::after,
  .term-tooltip:hover::before,
  .term-tooltip:focus::before {
    opacity: 0;
  }
}

/* Terms near the top of the viewport flip the bubble below the term so the
   definition can't clip off-screen (class set by app.js). */
.term-tooltip.tt-below::after {
  bottom: auto;
  top: calc(100% + 10px);
}
.term-tooltip.tt-below::before {
  bottom: auto;
  top: calc(100% + 4px);
  border-top-color: transparent;
  border-bottom-color: var(--border);
}

.term-tooltip:focus {
  outline: none;
  border-bottom-style: solid;
}

/* --- Footer --- */
footer {
  border-top: 1px solid var(--border);
  margin-top: 8rem;
  background-color: var(--bg-secondary);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 1.5rem 3rem;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
}

/* A genuinely distinct, edge-to-edge bottom bar (one step further on the
   surface ladder) instead of copyright text just trailing off inside the
   same footer background with empty padding beneath it. */
.footer-bottom-bar {
  background-color: var(--bg-tertiary);
  border-top: 1px solid var(--border);
}

.footer-bottom-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
}

.footer-bottom-bar-inner p {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin: 0;
}

.footer-brand-section {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: flex-start;
}

.footer-tagline {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 480px;
}

.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* Newsletter block lives under the brand tagline in the left footer column */
.footer-newsletter {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  max-width: 360px;
}

.footer-newsletter h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.footer-newsletter p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.8rem;
}

.footer-newsletter-btn {
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  max-width: 100%;
  overflow-wrap: break-word;
  white-space: normal;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .footer-links-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: flex-start;
}

.footer-column h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.footer-column a {
  color: var(--text-secondary);
  font-size: 0.85rem;
  transition: color 0.15s ease;
  display: inline-block;
}

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

@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* --- Diagram Zoom Modal --- */
.diagram-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(10, 10, 12, 0.96);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.diagram-modal.active {
  display: flex;
  opacity: 1;
}

.diagram-modal .close-modal {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  font-size: 2.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  z-index: 2010;
  transition: color 0.15s ease;
}

.diagram-modal .close-modal:hover {
  color: var(--accent);
}

.diagram-modal .modal-content {
  width: 90%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  position: relative;
  cursor: grab;
}

.diagram-modal .modal-content:active {
  cursor: grabbing;
}

.modal-zoom-container {
  transition: transform 0.15s ease;
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* The modal clones the already-rendered inline diagram's SVG (see app.js),
   which Mermaid sized in pixels to fit the narrow article column — without
   this override it clones in at that same small fixed size instead of
   filling the much larger modal viewport. */
.modal-zoom-container svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

.diagram-modal .modal-controls {
  position: absolute;
  bottom: 2rem;
  display: flex;
  gap: 1rem;
  z-index: 2010;
}

.btn-modal-action {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-modal-action:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* --- Flat Distillation Showcase --- */
.workflow-section {
  padding: 5rem 0 3.5rem 0;
  border-top: 1px solid var(--border);
  margin-top: 5rem;
}

.section-title {
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.8rem;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: 3.5rem;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
}

.workflow-card {
  background-color: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  box-shadow: none;
}

.workflow-card:hover {
  transform: none;
}

.workflow-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background-color: var(--accent-glow);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.workflow-card h3 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
}

/* --- Quiet Stats Section --- */
.stats-section {
  padding: 3rem 0 5rem 0;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  background-color: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 2.5rem 0;
  box-shadow: none;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stat-number {
  font-family: 'Lora', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
}

.stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.feed-load-more-container {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.feed-load-more-container button {
  padding: 0.6rem 1.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  box-shadow: none;
  background-color: transparent;
}

.feed-load-more-container button:hover {
  background-color: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
  transform: none;
  box-shadow: none;
}

/* --- Newsletter CTA banner (strategic placement below paper lists) --- */
.newsletter-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  margin: 3rem 0;
}

.newsletter-cta-copy {
  min-width: 0;
  max-width: 560px;
}

.newsletter-cta-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.newsletter-cta-copy h3 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.newsletter-cta-copy p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  max-width: 480px;
}

.newsletter-cta-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .newsletter-cta {
    padding: 1.5rem;
    margin: 2rem 0;
  }
  .newsletter-cta-btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }
}

/* --- Homepage Category Filter Bar --- */
.feed-category-filter {
  --topic-underline-offset: 0.8rem;
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.8rem;
  overflow-x: auto;
  scrollbar-width: none;
  /* Pins below the sticky site header once scrolled past, so the field
     filters stay reachable while browsing the whole list. top matches the
     measured header height (~77px) minus 1px so no seam shows between them;
     opaque background + padding-top keep cards from showing through as
     they scroll underneath. z-index stays below the header's 100. */
  position: sticky;
  top: 76px;
  z-index: 50;
  background-color: var(--bg-primary);
  padding-top: 0.8rem;
}
.feed-category-filter::-webkit-scrollbar {
  display: none;
}
.feed-filter-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  padding: 0.2rem 0;
  position: relative;
  transition: color 0.15s ease;
}
.feed-filter-btn:hover {
  color: var(--accent);
}
.feed-filter-btn.active {
  color: var(--accent);
  font-weight: 600;
}
.feed-filter-btn.active::after {
  content: '';
  position: absolute;
  /* Match the filter row's bottom padding so the cue sits immediately above
     its border instead of painting over content scrolling underneath. */
  bottom: calc(-1 * var(--topic-underline-offset));
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent);
}

/* --- Search Results Count --- */
.search-results-count {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

/* --- Interactive Diagram Hint --- */
.diagram-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: -0.5rem;
  margin-bottom: 1.2rem;
  font-family: 'Inter', sans-serif;
}
.diagram-hint svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* --- Button Hover Text Decoration Override --- */
/* --- Extracted inline styles: article page --- */
.article-page-h1 {
  font-size: 2.8rem;
  line-height: 1.15;
  font-weight: 500;
  font-family: 'Lora', Georgia, serif;
  margin-bottom: 0.6rem;
}

.faq-inline-item {
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
}

.faq-inline-question {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.faq-q-number {
  color: var(--accent);
  font-weight: bold;
  font-family: monospace;
}

.faq-inline-answer {
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: 1.8rem;
}

.deep-dive-paragraph-text {
  margin-bottom: 1.2rem;
  line-height: 1.7;
  font-size: 1.02rem;
}

.takeaway-item-inline {
  margin-bottom: 0.95rem;
  font-size: 1.06rem;
  line-height: 1.62;
}

@media (max-width: 768px) {
  .takeaway-item-inline {
    font-size: 1rem;
  }
}

.svg-accent-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.article-audio-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 2rem;
  margin: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.audio-title-text {
  font-size: 0.95rem;
  font-family: sans-serif;
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.audio-subtitle-text {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 0;
}

.audio-speed-control {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.audio-speed-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.audio-speed-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 10px;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  padding: 0.2rem 1.5rem 0.2rem 0.4rem;
  cursor: pointer;
}

.audio-speed-select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.article-audio-element {
  height: 36px;
}

.device-audio-control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

#audio-voice-select {
  max-width: 180px;
}

.device-audio-play-btn {
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
}

.device-audio-play-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--bg-primary);
}

.device-audio-status {
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 3.5rem;
}

.diagram-section-outer {
  margin: 3.5rem 0;
}

.diagram-section-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.mermaid-inline-container {
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.code-section-article {
  margin-top: 3.5rem;
}

.code-section-description {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.faq-section-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

.faq-section-intro {
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

/* --- Extracted inline styles: static pages --- */
.static-page-article {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 2rem;
}

.static-page-header {
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2rem;
}

.static-page-title {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.static-page-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.static-page-section {
  margin-bottom: 3rem;
}

.static-page-highlight-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 2rem;
  border-radius: var(--radius-lg);
}

.static-page-h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.static-page-highlight-title {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--accent);
}

.static-page-items-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.static-page-item {
}

.static-page-item-title {
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.static-page-item-text {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.static-page-paragraph {
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

.static-page-note {
  margin-bottom: 1rem;
}

.static-page-link {
  color: var(--accent);
}

.static-page-bulleted-list {
  margin-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- Glossary index + term pages --- */

/* Wider than the default .static-page-article (800px) so the right-side A-Z
   jump nav has room without squeezing the term list. */
.glossary-index-article {
  max-width: 1000px;
}

.glossary-layout {
  display: grid;
  grid-template-columns: 1fr 60px;
  gap: 2.5rem;
  align-items: start;
}

.glossary-groups {
  min-width: 0;
}

.glossary-toc {
  border-left: 1px solid var(--border);
  padding-left: 1.5rem;
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.glossary-toc-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  transition: color 0.15s ease;
}

.glossary-toc-link:hover {
  color: var(--accent);
  text-decoration: none;
}

.glossary-toc-link.active {
  color: var(--accent);
}

@media (max-width: 900px) {
  .glossary-index-article .static-page-header {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 2rem;
  }
  .glossary-layout {
    grid-template-columns: 1fr;
  }
  .glossary-toc {
    /* Single horizontally-scrollable row (not wrapping to several lines),
       kept sticky at the top so it stays reachable without scrolling back
       up — same pattern as the Hall of Fame TOC and the mobile filters
       toggle on /feed. */
    position: sticky;
    top: 77px;
    z-index: 3;
    background: var(--bg-primary);
    border-left: none;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 1.3rem;
    max-height: none;
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
    margin-bottom: 2rem;
    scrollbar-width: none;
    /* Comes after .glossary-groups in source order but should read as a
       jump nav at the TOP on narrow viewports — flip it visually rather
       than duplicating the markup. */
    order: -1;
  }
  .glossary-toc::-webkit-scrollbar {
    display: none;
  }
}

.glossary-letter-group {
  margin-bottom: 2.5rem;
  /* Matches the sticky site header (+ sticky mobile TOC row) height so the
     anchor-jump lands with the letter heading visible, not hidden under it. */
  scroll-margin-top: 100px;
}

@media (max-width: 900px) {
  .glossary-letter-group {
    /* The mobile .glossary-toc becomes its own sticky row on top of the
       sticky site header, so the jump target needs extra clearance. */
    scroll-margin-top: 150px;
  }
}

.glossary-letter-heading {
  font-size: 1.5rem;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .glossary-letter-heading {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

.glossary-term-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.6rem 2rem;
}

.glossary-term-link {
  color: var(--text-primary);
}

.glossary-term-link:hover {
  color: var(--accent);
}

.glossary-term-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.glossary-paper-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.glossary-paper-item {
  border-left: 2px solid var(--border);
  padding-left: 1.25rem;
}

.glossary-paper-link {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.glossary-paper-link:hover {
  color: var(--accent);
}

.glossary-paper-original {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.2rem;
}

.glossary-paper-tldr {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 0.4rem;
}

/* --- Extracted inline styles: digest page --- */
.digest-article {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 2rem;
}

.digest-header {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.5rem;
}

.digest-title {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

.digest-subtitle {
  color: var(--text-secondary);
}

.digest-divider {
  border-color: var(--border);
  margin-bottom: 2rem;
}

.digest-section-title {
  margin-bottom: 1.5rem;
}

.digest-item {
  margin-bottom: 2rem;
}

.digest-item-title {
  margin-bottom: 0.25rem;
}

.digest-item-link {
  color: var(--accent);
}

.digest-item-original-title {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.digest-item-text {
  color: var(--text-secondary);
  line-height: 1.6;
}

.digest-footer {
  color: var(--text-secondary);
  margin-top: 2rem;
}

.digest-footer-link {
  color: var(--accent);
}

/* --- Extracted inline styles: hall of fame --- */
.hall-of-fame-hero {
  /* .hero-section's 2-column grid (1.1fr 0.9fr) exists for the homepage's
     text+carousel layout — this page's hero only ever has one column of
     content, so without this override it's squeezed into just the 1.1fr
     slot (~55% width) at any viewport above the 860px breakpoint where
     .hero-section collapses to 1fr, including common tablet-landscape
     widths like 1024px. */
  display: block;
  padding: 3rem 0;
  margin-bottom: 2rem;
}

.hall-of-fame-hero-content {
  max-width: 800px;
}

.hall-of-fame-title {
  font-size: 3.5rem;
}

.hall-of-fame-subtitle {
  font-size: 1.15rem;
  margin-top: 1rem;
  margin-bottom: 0;
}

.hall-of-fame-empty {
  text-align: center;
  color: var(--text-secondary);
  margin-top: 2rem;
}

/* --- Hall of Fame: sectioned grid layout --- */
.hof-layout {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 3rem;
  align-items: start;
  margin-top: 1rem;
}

.hof-toc {
  /* Visually on the right (order: 2) while staying first in the DOM, so
     keyboard/screen-reader users reach the section nav before the content
     it jumps to, rather than the reading order matching the visual order. */
  order: 2;
  border-left: 1px solid var(--border);
  padding-left: 1.5rem;
  position: sticky;
  top: 96px;
}

.hof-toc-toggle {
  display: none;
}

.hof-toc-content {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.hof-toc-link {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}

.hof-toc-link:hover {
  color: var(--accent);
  text-decoration: none;
}

.hof-sections {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  min-width: 0;
}

.hof-section {
  scroll-margin-top: 100px;
}

.hof-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.hof-section-title {
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0;
}

.hof-section-timeline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 140px;
}

.hof-timeline-year {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.hof-timeline-track {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
}

.hof-timeline-tick {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.hof-timeline-tick:hover,
.hof-timeline-tick:focus-visible {
  transform: translate(-50%, -50%) scale(1.6);
}

.hof-timeline-tick::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(calc(-50% + var(--hof-tooltip-shift, 0px)));
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.62rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 5;
}

.hof-timeline-tick.hof-tooltip-below::after {
  top: calc(100% + 8px);
  bottom: auto;
}

.hof-timeline-tick:hover::after,
.hof-timeline-tick:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Brief flash so a click's effect is obvious even though the panel was
   already visible before scrolling (e.g. the target is only slightly off
   to the side) — scrollIntoView alone can be an easy-to-miss nudge. */
.hof-panel-highlight {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.hof-carousel-wrapper {
  position: relative;
}

/* Edge fade: hints there's more to scroll toward, without needing the
   arrows to already be visible/hovered. Toggled by hof-carousel.js based on
   actual scroll position, not just "is this side ever scrollable." */
.hof-carousel-wrapper::before,
.hof-carousel-wrapper::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 1rem;
  width: 56px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.hof-carousel-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-primary), transparent);
}

.hof-carousel-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-primary), transparent);
}

.hof-carousel-wrapper.can-scroll-left::before,
.hof-carousel-wrapper.can-scroll-right::after {
  opacity: 1;
}

.hof-carousel-arrow {
  position: absolute;
  /* Center within the card band specifically (top:6px/bottom:1rem match
     .hof-carousel's own padding below), not the wrapper's full height,
     which also includes the scrollbar's reserved space beneath the cards
     and would otherwise pull the buttons visibly below true center. */
  top: 6px;
  bottom: 1rem;
  margin: auto 0;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.hof-carousel-arrow:hover {
  color: var(--accent);
}

.hof-carousel-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.hof-carousel-prev {
  left: -6px;
}

.hof-carousel-next {
  right: -6px;
}

.hof-carousel {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  /* overflow-x: auto forces overflow-y out of 'visible' too (CSS Overflow
     spec), so .hof-panel:hover's translateY(-2px) lift has nowhere to go
     and gets clipped at the top with no padding to absorb it. */
  padding: 6px 0 1rem;
  scroll-snap-type: x proximity;
  scroll-padding-left: 1px;
}

.hof-panel {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.hof-panel:hover {
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-2px);
}

.hof-panel-year {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}

.hof-panel-title {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 0.6rem;
}

.hof-panel-tldr {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .hall-of-fame-hero {
    padding: 2rem 0 1.5rem;
    margin-bottom: 0;
  }
  .hof-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 0;
  }
  .hof-toc {
    /* Mobile adapts the desktop TOC into the same native disclosure pattern
       used by the feed filters instead of squeezing it into a scroll row. */
    order: 0;
    position: static;
    border-left: none;
    border-bottom: 1px solid var(--border);
    padding-left: 0;
    padding-bottom: 0;
  }
  .hof-toc-toggle {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    position: sticky;
    top: 77px;
    z-index: 3;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .hof-toc-toggle::-webkit-details-marker {
    display: none;
  }
  .hof-toc-toggle-icon {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
  }
  .hof-toc[open] .hof-toc-toggle-icon {
    transform: rotate(180deg);
  }
  .hof-toc-content {
    display: grid;
    gap: 0.25rem;
    padding: 0.5rem 0 0.75rem;
  }
  .hof-toc-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .hof-panel {
    flex-basis: 240px;
  }
}

/* --- Extracted inline styles: feed page --- */
.feed-hero {
  padding: 1.5rem 0 0.75rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.resource-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.papers-grid-empty {
  text-align: center;
  color: var(--text-secondary);
}

.sidebar-icon {
  color: var(--accent);
}

/* --- Extracted inline styles: home page --- */
.home-feed-section {
  margin-top: 4rem;
}

.home-feed-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.home-feed-subtitle {
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
}

.carousel-card-tldr-spacing {
  margin-top: 0.5rem;
}

/* --- Extracted inline styles: layout --- */
.logo-svg-accent {
  color: var(--accent) !important;
}

.btn-read-more:hover,
.carousel-read-btn:hover,
.btn-sponsor:hover,
.resource-link:hover,
.resource-btn:hover,
.nav-link:hover {
  text-decoration: none !important;
}

/* --- Touch ergonomics (coarse pointers only; desktop visuals unchanged) ---
   Adversarial mobile review measured most controls at 16-38px; WCAG 2.5.8 and
   platform guidelines want ~44px effective targets. Padding (not font-size)
   does the work so the visual design stays intact. */
@media (pointer: coarse) {
  .feed-filter-btn,
  .filter-btn {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    min-height: 44px;
  }
  .btn-icon {
    min-width: 44px;
    min-height: 44px;
  }
  .carousel-control {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Dots stay visually small; the tappable box grows via padding, with the
     painted dot kept to the content box. */
  .carousel-dot {
    padding: 12px;
    background-clip: content-box;
  }
  footer .footer-column a {
    padding: 0.55rem 0;
    display: inline-block;
  }
  #btn-load-more {
    min-height: 44px;
  }
}

/* --- Reduced motion: collapse transitions/animations for users who opt out.
   (Carousel autoplay is separately disabled in app.js via matchMedia.) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* --- Article h1 scale-down on small phones (was a constant 44.8px) --- */
@media (max-width: 480px) {
  .article-container h1,
  .article-header h1 {
    font-size: clamp(1.7rem, 8.5vw, 2.4rem);
  }
}

/* --- AI-disclosure banner: the single home for "this is AI" honesty AND the
   one primary route to the source paper (replaces the old eyebrow VIEW
   SOURCE pill + duplicate inline verify link). --- */
.ai-disclosure {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
}
.ai-disclosure-text {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
/* At flex-start the icon's own box-top sits flush with the text box-top,
   slightly above the first line's visual center — nudge down to align with
   the first line specifically rather than just the block's top edge. */
.ai-disclosure-text .svg-accent-icon {
  margin-top: 0.15rem;
}
.ai-disclosure-actions {
  display: inline-flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.ai-disclosure-cta {
  font-size: 0.8rem;
  padding: 0.5rem 0.9rem;
  white-space: nowrap;
}

/* --- Keyboard focus rings (filter pills, carousel, load-more, copy, TTS,
   theme toggle) --- */
.filter-btn:focus-visible,
.feed-filter-btn:focus-visible,
.carousel-control:focus-visible,
.carousel-dot:focus-visible,
.btn-icon:focus-visible,
.btn-copy-code:focus-visible,
.btn-read-more:focus-visible,
#btn-load-more:focus-visible,
.tts-player button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- 2026-08 UX consistency and accessibility pass --- */
:root {
  --page-max-width: 1320px;
}

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

/* Off-screen until focused, so the first Tab on any page skips the ~10 header
   and nav links rather than walking a keyboard user through them per page. */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 200;
  transform: translateY(-150%);
  padding: 0.75rem 1.25rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--accent);
  border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  transform: translateY(0);
}

.container,
.header-container,
.footer-container,
.footer-bottom-bar-inner {
  max-width: var(--page-max-width);
}

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Article pages share the site shell while preserving a readable line length. */
.article-page-shell > .back-link {
  width: min(100%, 1080px);
  margin-left: auto;
  margin-right: auto;
}

.article-layout {
  width: min(100%, 1080px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 760px) 220px;
  gap: 4rem;
  align-items: start;
}

.article-container {
  max-width: none;
  min-width: 0;
  width: 100%;
  margin: 0;
}

/* Wrapper so the table of contents and linked concepts share one sticky
   column instead of competing for the same grid slot. */
.article-side-nav {
  order: 2;
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.article-toc {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--border);
}

.article-concepts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.article-concepts .article-toc-title {
  flex-basis: 100%;
  margin-bottom: 0;
}

.article-concept-link {
  display: inline-block;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0.3rem 0.62rem;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

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

.article-toc-title {
  margin-bottom: 0.45rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-toc-link {
  color: var(--text-secondary);
  font-size: 0.84rem;
  line-height: 1.35;
  padding: 0.42rem 0.55rem;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.article-toc-link:hover,
.article-toc-link.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--bg-secondary);
  text-decoration: none;
}

.article-toc-mobile {
  display: none;
}

.article-container section[id] {
  scroll-margin-top: 108px;
}

/* The disclosure remains visible and honest without competing with the title. */
.ai-disclosure {
  margin-top: 1.15rem;
  padding: 0.65rem 0.75rem;
  background: transparent;
  border: 1px solid var(--border);
  border-left-width: 1px;
  border-radius: var(--radius-sm);
}

.ai-disclosure-text {
  font-size: 0.8rem;
  line-height: 1.5;
}

.ai-disclosure-text strong {
  color: var(--text-primary);
}

.ai-disclosure-text a {
  color: var(--accent);
  text-underline-offset: 0.16em;
}

/* Compact audio player: one clear action, with secondary choices tucked away. */
.article-audio-container {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto auto;
  gap: 1rem 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
}

.audio-info,
.audio-primary-controls,
.device-audio-control {
  display: flex;
  align-items: center;
}

.audio-info {
  gap: 0.75rem;
}

.article-audio-container .audio-title-text {
  margin: 0 0 0.12rem;
  padding: 0;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 650;
}

.device-audio-play-btn {
  min-width: 88px;
  min-height: 42px;
  padding: 0.55rem 1rem;
}

.audio-settings {
  position: relative;
  justify-self: end;
}

.audio-settings summary {
  min-height: 42px;
  display: list-item;
  padding: 0.7rem 0;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Expanding settings used to reflow the row and leave the fields floating
   against a bare top border, with a narrow Speed box beside a very wide Voice
   box. Open state is now its own recessed panel on a full-width row, so the
   play button never moves and the two fields read as one group. */
.audio-settings[open] {
  grid-column: 1 / -1;
  justify-self: stretch;
}

.audio-settings summary::marker {
  color: var(--text-muted);
}

.audio-settings[open] summary {
  margin-bottom: 0.55rem;
  color: var(--text-primary);
}

.audio-settings-fields {
  display: grid;
  /* Capped rather than 1fr: letting the voice field take the whole remaining
     row stretched a select to ~570px, which looks accidental next to a 104px
     speed field. */
  grid-template-columns: 6.5rem minmax(0, 22rem);
  justify-content: start;
  align-items: end;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

@media (max-width: 560px) {
  .audio-settings-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.audio-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.audio-speed-select {
  min-height: 38px;
  width: 100%;
  padding: 0.4rem 1.75rem 0.4rem 0.55rem;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
}

/* Device voice names run long ("Microsoft Sean - English (Ireland)"), so this
   fills the remaining column and truncates rather than setting a fixed width
   that is either too wide for short names or too narrow for long ones. */
#audio-voice-select {
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis;
}

.takeaways-list {
  list-style: disc;
  padding-left: 1.35rem;
}

.takeaways-list li {
  padding-left: 0.25rem;
}

.takeaways-list li::before {
  content: none;
}

.takeaways-list li::marker {
  color: var(--accent);
  font-size: 0.85em;
}

.diagram-section {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: auto;
}

.mermaid-inline-container svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.diagram-expand-btn {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}

.diagram-modal .close-modal {
  min-height: 42px;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 650;
}

/* Compact feed introduction and visible overflow cues in both scroll columns. */
.feed-hero {
  padding: 0.25rem 0 0.9rem;
  margin-bottom: 1.25rem;
}

.feed-hero h1 {
  margin-bottom: 0.2rem;
}

.feed-hero p {
  max-width: 760px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.filters-sidebar,
.feed-sidebar-right {
  background:
    linear-gradient(var(--bg-primary) 30%, transparent) center top,
    linear-gradient(transparent, var(--bg-primary) 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.38), transparent) center top,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.38), transparent) center bottom;
  background-repeat: no-repeat;
  background-size: 100% 42px, 100% 42px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}

[data-theme='light'] .filters-sidebar,
[data-theme='light'] .feed-sidebar-right {
  background-image:
    linear-gradient(var(--bg-primary) 30%, transparent),
    linear-gradient(transparent, var(--bg-primary) 70%),
    radial-gradient(farthest-side at 50% 0, rgba(30, 24, 20, 0.18), transparent),
    radial-gradient(farthest-side at 50% 100%, rgba(30, 24, 20, 0.18), transparent);
}

/* Hall of Fame timelines are now legible at a glance and usable by touch. */
.hof-section-timeline {
  min-width: 280px;
}

.hof-timeline-tick {
  width: 32px;
  height: 32px;
  background: transparent;
  transform: translate(-50%, -50%);
}

.hof-timeline-tick::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hof-timeline-tick:hover,
.hof-timeline-tick:focus-visible {
  transform: translate(-50%, -50%);
}

.hof-timeline-tick:hover::before,
.hof-timeline-tick:focus-visible::before {
  transform: translate(-50%, -50%) scale(1.55);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.hof-timeline-tick::after {
  width: 220px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  white-space: normal;
  text-align: left;
  line-height: 1.4;
  font-size: 0.7rem;
  padding: 0.5rem 0.6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

@media (hover: hover) {
  .hof-panel,
  .paper-card,
  .compact-card,
  .article-toc-link,
  .filter-btn,
  .feed-filter-btn {
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
  }
}

@media (max-width: 1150px) {
  .filters-sidebar,
  .feed-sidebar-right {
    background: none;
  }
}

@media (max-width: 1050px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
  }
  .article-side-nav {
    display: none;
  }
  .article-toc-mobile {
    display: block;
    margin: -0.5rem 0 2.5rem;
    border-block: 1px solid var(--border);
  }
  .article-toc-mobile summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .article-toc-mobile nav {
    display: grid;
    gap: 0.25rem;
    padding-bottom: 0.75rem;
  }
}

@media (max-width: 700px) {
  .article-audio-container {
    grid-template-columns: 1fr auto;
  }
  .audio-settings {
    grid-column: 1 / -1;
    justify-self: stretch;
    border-top: 1px solid var(--border);
    padding-top: 0.4rem;
  }
  .audio-settings[open] {
    padding-top: 0.4rem;
  }
  .article-audio-element {
    max-width: 100%;
  }
  .hof-section-timeline {
    width: 100%;
    min-width: 0;
  }
  .main-layout.feed-3col {
    gap: 1.5rem;
  }
  .filters-sidebar {
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 480px) {
  .article-audio-container {
    grid-template-columns: 1fr;
  }
  .audio-primary-controls,
  .audio-settings {
    grid-column: 1;
  }
  .device-audio-play-btn {
    width: 100%;
  }
  .hof-timeline-tick::after {
    width: 180px;
    max-width: calc(100vw - 24px);
  }
}


/* Related concepts on a glossary term page: horizontal chips, since these are
   short noun phrases rather than sentences. */
.glossary-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.glossary-related-link {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

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

/* Homepage topic row: three topics plus a link to the feed, so the row cannot
   overflow. The feed's own row is allowed to scroll horizontally, since
   browsing every topic is that page's purpose. */
.feed-filter-all-link {
  align-self: center;
  margin-left: auto;
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.feed-filter-all-link:hover,
.feed-filter-all-link:focus-visible {
  text-decoration: underline;
}

.feed-layout .feed-category-filter {
  --topic-underline-offset: 0.35rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.35rem;
}

.home-feed-section .feed-category-filter {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* The paper-card hover wash extends 1.25rem beyond its text on each side.
   Give the pinned homepage strip those same painted bounds while preserving
   the existing label alignment. Keep the expansion off narrow layouts where
   the page gutter, rather than the card hover, defines the safe edge. */
@media (min-width: 769px) {
  .home-feed-section .feed-category-filter {
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
  }
}

@media (max-width: 768px) {
  .home-feed-section .feed-category-filter {
    column-gap: 1.25rem;
    row-gap: 0.6rem;
  }
}

@media (max-width: 480px) {
  .home-feed-section .feed-category-filter {
    column-gap: 1rem;
  }
}

@media (pointer: coarse) {
  .feed-filter-all-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Glossary term pages share the article shell, so the back link starts at the
   same x as on every other page and the side column can carry the contents nav
   and related concepts. The term body needs no extra top padding of its own. */
.glossary-term-article {
  padding-top: 0;
}

.glossary-term-article .static-page-header {
  margin-bottom: 1rem;
}