/* Newspaper blog — Minutoid */
/* ============================================================
   DESIGN TOKENS — The Control Panel
   ============================================================
   Every color in the entire UI is controlled from here.
   Change a variable and it updates everywhere instantly.

   DARK MODE is the DEFAULT (values in :root).
   Light mode overrides are in [data-theme="light"].
   ============================================================ */

:root {
  /* ---------- Core palette (DARK — default) ---------- */
  --paper:        #1a1816;       /* main background               */
  --paper-deep:   #141210;       /* deeper background accent       */
  --paper-mid:    #221f1b;       /* mid-tone for gradients         */
  --paper-shadow: #0d0c0a;       /* box-shadow tint                */
  --ink:          #e8e0d0;       /* primary text                   */
  --ink-soft:     #b5a998;       /* secondary text                 */
  --ink-faint:    #7a7068;       /* tertiary / muted text          */
  --rule:         #3a3530;       /* borders and dividers           */
  --accent:       #c0392b;       /* red accent — kickers, links    */
  --accent-hover: #e74c3c;       /* accent on hover                */
  --shadow:       rgba(0, 0, 0, 0.35);
  --card-hover:   rgba(192, 57, 43, 0.06);
  --grain-opacity: 0.12;         /* paper texture intensity         */
  --vignette-opacity: 1;         /* edge darkening                  */
  --theme-transition: background 300ms ease, color 300ms ease,
                      border-color 300ms ease, box-shadow 300ms ease;
}

/* ---------- Light theme overrides ---------- */
[data-theme="light"] {
  --paper:        #f4ede0;
  --paper-deep:   #ebe2cf;
  --paper-mid:    #efe5cf;
  --paper-shadow: #d8cfbe;
  --ink:          #16140f;
  --ink-soft:     #3a342a;
  --ink-faint:    #6b6357;
  --rule:         #1a1812;
  --accent:       #8a1c13;
  --accent-hover: #a52218;
  --shadow:       rgba(20, 14, 0, 0.18);
  --card-hover:   rgba(138, 28, 19, 0.04);
  --grain-opacity: 0.35;
  --vignette-opacity: 1;
}

* { box-sizing: border-box; }

/* ---------- Accessibility: skip-to-content link ---------- */
/* Visually hidden until keyboard-focused, then it slides into view —
   the first Tab on any page jumps past the masthead to the content. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 1000;
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 4px 4px;
  font-family: 'Special Elite', monospace;
  font-size: 13px;
  text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }
/* The skip target shouldn't show a focus ring when reached programmatically. */
#main:focus { outline: none; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(ellipse at 20% 10%, var(--paper-mid) 0%, var(--paper) 40%, var(--paper-deep) 100%);
  color: var(--ink);
  font-family: 'Crimson Text', 'Times New Roman', serif;
  min-height: 100vh;
  overflow-x: hidden;
  transition: var(--theme-transition);
}

body::before {
  /* paper grain */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.5  0 0 0 0 0.4  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 1;
}

body::after {
  /* faint vignette / fold shadow */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.06), transparent 8%, transparent 92%, rgba(0,0,0,0.06)),
    linear-gradient(180deg, rgba(0,0,0,0.05), transparent 6%, transparent 94%, rgba(0,0,0,0.05));
}

#root { position: relative; z-index: 3; }

/* ---------- Typography ---------- */
.serif-display { font-family: 'Playfair Display', 'Times New Roman', serif; }
.serif-body { font-family: 'Crimson Text', 'Times New Roman', serif; }
.mono-small { font-family: 'Special Elite', 'Courier New', monospace; }

/* ---------- Front Page Layout ---------- */
.paper {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 48px 80px;
  position: relative;
}

.masthead {
  text-align: center;
  border-bottom: 3px double var(--rule);
  padding-bottom: 14px;
  margin-bottom: 8px;
  position: relative;
}
.masthead .top-rule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
}
.masthead h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(56px, 9vw, 124px);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 0.95;
  text-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.masthead .latin {
  font-style: italic;
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 6px;
  letter-spacing: 0.12em;
}
.masthead .strap {
  display: flex;
  justify-content: space-between;
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  margin-top: 12px;
}
.masthead .strap .center { color: var(--accent); font-weight: bold; }

/* Front page section labels */
.section-strap {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 2px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 6px 0;
  margin: 28px 0 18px;
  display: flex;
  justify-content: space-between;
}
.section-strap .label { font-weight: bold; }
.section-strap .ornament { letter-spacing: 0.4em; }

/* Card grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.card {
  padding: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background 160ms ease, transform 160ms ease;
}
.card:nth-child(3n) { border-right: none; }
.card:nth-last-child(-n+3) { border-bottom: none; }
.card:hover {
  background: var(--card-hover);
}

/* The button that wraps each card's clickable surface.  Stripped
   of its native button look so it visually matches the original
   <article onClick> design while remaining a real, focusable
   interactive element for screen readers and keyboard users. */
.card-button {
  display: block;
  width: 100%;
  padding: 22px 20px 24px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: none;   /* the card is now an <a> link */
}
.card-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

/* Scroll-lock applied to <body> when the article modal is open. */
body.scroll-locked {
  overflow: hidden;
}
.card .kicker {
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.card h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.08;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.card .deck {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.card .meta {
  font-family: 'Special Elite', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--ink-faint);
  padding-top: 8px;
}
.card .read-more {
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 10px;
  opacity: 0;
  transition: opacity 160ms ease;
}
.card:hover .read-more { opacity: 1; }

/* Featured card spans two columns at top */
.card.featured {
  grid-column: span 2;
  border-bottom: 2px solid var(--rule);
  padding: 28px 28px 32px;
}
.card.featured h2 { font-size: 44px; line-height: 1.02; }
.card.featured .deck { font-size: 19px; line-height: 1.45; }
.card.tall {
  grid-row: span 1;
  border-bottom: 2px solid var(--rule);
}

.footer-strap {
  margin-top: 44px;
  padding-top: 14px;
  border-top: 3px double var(--rule);
  display: flex;
  justify-content: space-between;
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Article View ---------- */
.article-stage {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--paper);
  overflow: hidden;
  pointer-events: none;
}
.article-stage.open { pointer-events: auto; }

.article-page {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% 0%, var(--paper-mid) 0%, var(--paper) 40%, var(--paper-deep) 100%);
  padding: 56px 48px 120px;
  display: flex;
  justify-content: center;
}
.article-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.5  0 0 0 0 0.4  0 0 0 0.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.article-inner {
  width: 100%;
  max-width: 720px;
  position: relative;
  z-index: 1;
}

.article-head {
  text-align: center;
  border-bottom: 3px double var(--rule);
  padding-bottom: 24px;
  margin-bottom: 32px;
}
.article-head .return-strap {
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
}
.article-head .kicker {
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.article-head h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.04;
  margin: 0 0 16px;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.article-head .deck {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.article-head .byline {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.article-head .byline span { display: inline-flex; gap: 16px; }
.article-head .byline .sep { color: var(--ink-faint); }
.article-head .byline .byline-link { color: var(--accent); text-decoration: none; }
.article-head .byline .byline-link:hover { color: var(--accent-hover); }

.article-body p {
  font-family: 'Crimson Text', serif;
  font-size: 19px;
  line-height: 1.65;
  margin: 0 0 18px;
  text-align: justify;
  hyphens: auto;
  color: var(--ink);
  text-wrap: pretty;
}
.article-body p:first-of-type::first-letter {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 78px;
  float: left;
  line-height: 0.85;
  padding: 6px 10px 0 0;
  margin-top: 4px;
  color: var(--ink);
}

.pull-quote {
  margin: 36px -24px;
  padding: 24px 28px;
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
  text-wrap: balance;
  position: relative;
}
.pull-quote::before, .pull-quote::after {
  content: "\201C";
  font-size: 60px;
  font-family: 'Playfair Display', serif;
  color: var(--accent);
  line-height: 0;
  position: relative;
  top: 18px;
  margin: 0 6px;
}
.pull-quote::after { content: "\201D"; }

.article-end {
  text-align: center;
  margin: 40px 0 0;
  font-family: 'Special Elite', monospace;
  font-size: 14px;
  letter-spacing: 0.5em;
  color: var(--ink-faint);
}

/* ---------- Controls (close, next) ---------- */
.btn-close {
  position: fixed;
  top: 22px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  z-index: 100;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, transform 140ms ease;
  box-shadow: 0 2px 0 var(--paper-shadow);
}
.btn-close:hover { background: var(--ink); color: var(--paper); transform: rotate(90deg); }

.btn-next {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 64px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Special Elite', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  gap: 6px;
  box-shadow: -3px 3px 0 var(--paper-shadow);
  transition: transform 140ms ease, background 140ms ease;
}
.btn-next:hover {
  transform: translateY(-50%) translateX(-3px);
  background: var(--paper-mid);
}
.btn-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn-next .arrow {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.btn-next .label { font-size: 8px; }

/* Previous article button (mirrors btn-next on the left side) */
.btn-prev {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 64px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Special Elite', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  gap: 6px;
  box-shadow: 3px 3px 0 var(--paper-shadow);
  transition: transform 140ms ease, background 140ms ease;
}
.btn-prev:hover {
  transform: translateY(-50%) translateX(3px);
  background: var(--paper-mid);
}
.btn-prev .arrow {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.btn-prev .label { font-size: 8px; }

/* Loading skeleton shimmer animation */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Page-turn: real 3D paper flip ---------- */
.article-stage {
  perspective: 2400px;
  perspective-origin: 50% 50%;
}

/* Each page is a 3D-positioned plane that rotates around its left edge (next)
   or right edge (prev). The OUTGOING page does the visible flip — the next page
   is already in place underneath. */
.article-page {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, box-shadow, filter;
  transform-origin: left center;
}

/* While a turn is in progress, the outgoing page sits above the incoming one. */
.article-page.is-turning { z-index: 5; }
.article-page.is-beneath { z-index: 1; }

/* NEXT (turn forward): outgoing page lifts off its LEFT spine and rotates -180° toward the viewer. */
@keyframes pageTurnForward {
  0% {
    transform: rotateY(0deg);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    filter: brightness(1);
  }
  15% {
    box-shadow:
      -2px 0 18px rgba(20,14,0,0.20),
      0 30px 50px -20px rgba(20,14,0,0.30);
    filter: brightness(1.02);
  }
  50% {
    transform: rotateY(-92deg);
    box-shadow:
      -8px 0 60px rgba(20,14,0,0.45),
      0 60px 80px -30px rgba(20,14,0,0.40);
    filter: brightness(0.86);
  }
  85% {
    filter: brightness(0.78);
  }
  100% {
    transform: rotateY(-178deg);
    box-shadow:
      -2px 0 24px rgba(20,14,0,0.30),
      0 40px 60px -25px rgba(20,14,0,0.30);
    filter: brightness(0.7);
  }
}

/* PREV (turn back): outgoing page rotates around its RIGHT edge, sweeping rightward. */
@keyframes pageTurnBackward {
  0% {
    transform: rotateY(0deg);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    filter: brightness(1);
  }
  15% {
    box-shadow:
      2px 0 18px rgba(20,14,0,0.20),
      0 30px 50px -20px rgba(20,14,0,0.30);
    filter: brightness(1.02);
  }
  50% {
    transform: rotateY(92deg);
    box-shadow:
      8px 0 60px rgba(20,14,0,0.45),
      0 60px 80px -30px rgba(20,14,0,0.40);
    filter: brightness(0.86);
  }
  100% {
    transform: rotateY(178deg);
    box-shadow:
      2px 0 24px rgba(20,14,0,0.30),
      0 40px 60px -25px rgba(20,14,0,0.30);
    filter: brightness(0.7);
  }
}

/* Curl/gradient overlay that tracks the fold — gives the paper a 'lit' edge */
.page-curl {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.32) 0%,
      rgba(0,0,0,0.10) 12%,
      rgba(255,255,255,0.0) 30%,
      rgba(255,255,255,0.0) 70%,
      rgba(0,0,0,0.10) 88%,
      rgba(0,0,0,0.32) 100%);
}
.is-turning .page-curl {
  animation: curlFade 720ms ease-in-out both;
}
@keyframes curlFade {
  0%   { opacity: 0; }
  35%  { opacity: 0.9; }
  65%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* Direction modifiers */
.page-turn-forward {
  transform-origin: left center;
  animation: pageTurnForward 720ms cubic-bezier(.55,.05,.45,.95) both;
}
.page-turn-backward {
  transform-origin: right center;
  animation: pageTurnBackward 720ms cubic-bezier(.55,.05,.45,.95) both;
}

/* The incoming page does a tiny lift to feel grounded */
@keyframes pageSettle {
  0%   { filter: brightness(0.94); }
  60%  { filter: brightness(0.98); }
  100% { filter: brightness(1); }
}
.page-settle { animation: pageSettle 720ms ease-out both; }

/* fade in/out for opening/closing the article overlay */
@keyframes openIn {
  0% { opacity: 0; transform: scale(0.985); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes openOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.99); }
}
.stage-opening { animation: openIn 360ms ease both; }
.stage-closing { animation: openOut 280ms ease both; }

/* crinkle paper jolt — applied briefly on transition */
@keyframes crinkle {
  0%   { transform: translate(0,0) rotate(0); }
  20%  { transform: translate(-1px, 0.5px) rotate(-0.08deg); }
  40%  { transform: translate(1px, -0.5px) rotate(0.06deg); }
  60%  { transform: translate(-0.5px, 0.4px) rotate(-0.04deg); }
  80%  { transform: translate(0.5px, -0.2px) rotate(0.03deg); }
  100% { transform: translate(0,0) rotate(0); }
}
.stage-shake { animation: crinkle 460ms ease-in-out; }

/* progress dots */
.page-progress {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 100;
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  align-items: center;
  background: var(--paper);
  padding: 8px 16px;
  border: 1px solid var(--ink);
  box-shadow: 0 2px 0 var(--paper-shadow);
}
.page-progress .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper-shadow);
  border: 1px solid var(--ink-faint);
}
.page-progress .dot.active { background: var(--accent); border-color: var(--accent); }

/* ---------- Theme Toggle ---------- */
.theme-toggle {
  position: fixed;
  top: 22px;
  left: 24px;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 18px;
  cursor: pointer;
  z-index: 200;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, color 200ms ease,
              transform 200ms ease, border-color 200ms ease;
  box-shadow: 0 2px 8px var(--shadow);
  line-height: 1;
}
.theme-toggle:hover {
  background: var(--ink);
  color: var(--paper);
  transform: rotate(25deg) scale(1.08);
  border-color: var(--ink);
}

/* Smooth transitions for all themed elements */
.paper, .card, .masthead, .section-strap, .footer-strap,
.article-stage, .article-page, .article-inner,
.btn-close, .btn-next, .btn-prev, .page-progress,
.pull-quote, .article-body p, .card h2, .card .deck,
.card .meta, .card .kicker, .card .read-more {
  transition: var(--theme-transition);
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card:nth-child(3n) { border-right: 1px solid var(--rule); }
  .card:nth-child(2n) { border-right: none; }
  .card.featured { grid-column: span 2; }
  .paper { padding: 24px 20px 60px; }
  .masthead h1 { font-size: 64px; }
  .article-page { padding: 64px 20px 100px; }
  .pull-quote { margin: 28px 0; font-size: 22px; }

  /* WCAG 2.2 — 2.5.8 Target Size (Minimum). The paging controls were
     vertically-centred bars pinned to the screen edges; on a narrow
     viewport the article text spans nearly edge-to-edge, so they sat ON
     TOP of the words (the audit's mobile-overlap bug). Dock them to the
     bottom corners as >=44px icon buttons, clear of the text column. */
  .btn-prev, .btn-next {
    top: auto;
    bottom: 14px;
    left: auto;
    right: auto;
    transform: none;
    width: 48px;
    height: 48px;
  }
  .btn-prev { left: 14px; }
  .btn-next { right: 14px; }
  .btn-prev:hover, .btn-next:hover { transform: none; }
  .btn-prev .label, .btn-next .label { display: none; }  /* icon-only on mobile */
  .btn-prev .arrow, .btn-next .arrow { font-size: 24px; }
  /* Keep the toggle a comfortable target too (>=24px required, 40 given). */
  .theme-toggle { top: 14px; left: 14px; width: 40px; height: 40px; font-size: 16px; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .card { border-right: none !important; }
  .card.featured h2 { font-size: 32px; }
}

/* ============================================================
   SSR ARTICLE PAGE (server-rendered, crawlable standalone page)
   ============================================================
   Reuses the typographic classes (.article-head, .article-body,
   .pull-quote, .article-end) but provides its own simple,
   statically-positioned page shell instead of the modal stage.
   ============================================================ */
.ssr-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 120px;
}
.ssr-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 16px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.ssr-topbar a { color: var(--accent); text-decoration: none; }
.ssr-topbar a:hover { color: var(--accent-hover); }

/* Block elements that real Markdown can now produce. */
.article-body h2,
.article-body h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.15;
  margin: 32px 0 12px;
  color: var(--ink);
}
.article-body h2 { font-size: 30px; }
.article-body h3 { font-size: 24px; }
.article-body a { color: var(--accent); text-decoration: underline; }
.article-body a:hover { color: var(--accent-hover); }
.article-body ul,
.article-body ol {
  font-family: 'Crimson Text', serif;
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  padding-left: 1.4em;
  margin: 0 0 18px;
}
.article-body li { margin-bottom: 8px; }
.article-body blockquote {
  margin: 24px 0;
  padding: 4px 20px;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
}
.article-body code {
  font-family: 'Special Elite', monospace;
  font-size: 0.85em;
  background: var(--paper-mid);
  padding: 1px 5px;
  border-radius: 3px;
}
.article-body pre {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  margin: 0 0 18px;
}
.article-body pre code { background: none; padding: 0; }
.article-body img { max-width: 100%; height: auto; }

/* ============================================================
   TAGS, SEARCH, LISTING NOTES & PAGINATION
   ============================================================ */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.tag {
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 12px;
  transition: var(--theme-transition);
}
.tag:hover { color: var(--accent); border-color: var(--accent); }

.search-form { margin: 0; }
.search-form input {
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  padding: 6px 12px;
  width: 220px;
  max-width: 50vw;
}
.search-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.listing-note {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  margin: 18px 0 0;
}
.empty-note { text-align: center; color: var(--ink-soft); padding: 48px 0; }
.empty-note a { color: var(--accent); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 36px 0 8px;
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pagination a { color: var(--accent); text-decoration: none; }
.pagination a:hover { color: var(--accent-hover); }
.pagination .disabled { color: var(--ink-faint); }
.pagination .page-count { color: var(--ink-soft); }

/* ---------- Related articles (foot of an article) ---------- */
.related {
  max-width: 720px;
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 3px double var(--rule);
}
.related-title {
  font-family: 'Special Elite', monospace;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin: 0 0 20px;
}
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.related-list a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 14px 16px;
  transition: var(--theme-transition);
}
.related-list a:hover { border-color: var(--accent); }
.related-kicker {
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.related-headline {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink);
}
.related-meta { font-size: 12px; color: var(--ink-faint); }

/* ---------- Comments ---------- */
.comments {
  max-width: 720px;
  margin: 48px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.comments-title {
  font-family: 'Special Elite', monospace;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.comment { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.comment-author {
  font-family: 'Special Elite', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.comment-body {
  font-family: 'Crimson Text', serif;
  font-size: 17px;
  line-height: 1.55;
  margin: 6px 0 0;
  color: var(--ink);
}
.comment-empty { color: var(--ink-faint); font-style: italic; }

.comment-form { display: flex; flex-direction: column; gap: 10px; }
.comment-auth-row { display: flex; gap: 10px; flex-wrap: wrap; }
.comment-form input,
.comment-form textarea {
  font-family: 'Crimson Text', serif;
  font-size: 16px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  padding: 8px 12px;
}
.comment-auth-row input { flex: 1; min-width: 160px; }
.comment-form input:focus,
.comment-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.comment-form-foot { display: flex; align-items: center; gap: 14px; }
.comment-form button {
  font-family: 'Special Elite', monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 9px 18px;
  cursor: pointer;
}
.comment-form button:hover { background: var(--accent-hover); }
.comment-status { font-size: 13px; color: var(--ink-soft); }
.comment-note { font-size: 12px; color: var(--ink-faint); margin: 2px 0 0; }