:root {
  --bg-0: #0a0e14;
  --bg-1: #11161f;
  --bg-2: #1a2230;
  --bg-3: #232d3f;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --ink: #e8ecf3;
  --ink-mute: #98a2b3;
  --ink-dim: #6b7589;
  --accent: #ffb547;        /* signal amber */
  --accent-warm: #ff8a3d;
  --cyan: #5ecde5;          /* secondary links/numbers */
  --cyan-dim: #3a8b9b;
  --red: #ff5a5a;
  --green: #4ecf8a;
}

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

html { background: var(--bg-0); -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg-0);
  color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01", "ss02", "kern";
  min-height: 100vh;
}

/* Subtle grid texture in the background — finance-terminal feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* Top status bar — terminal style */
.statusbar {
  position: relative;
  z-index: 10;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  padding: 8px 32px;
  font-family: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  overflow: hidden;
}

.statusbar .live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}
.statusbar .live::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.statusbar .ticker {
  display: flex;
  gap: 24px;
  white-space: nowrap;
}
.statusbar .ticker span b {
  color: var(--ink);
  font-weight: 600;
  margin-left: 6px;
}
.statusbar .ticker .up { color: var(--green); }
.statusbar .ticker .down { color: var(--red); }

/* Masthead */
.masthead {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}
.masthead-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 32px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}

/* LOGO — wordmark + waveform mark */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
}
.logo-mark {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.logo-text {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.logo-text .row1 { color: var(--ink); }
.logo-text .divider {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 400;
  color: var(--ink-dim);
  letter-spacing: 0.3em;
  margin: 1px 0;
}
.logo-text .row2 { color: var(--ink-mute); font-style: italic; font-weight: 400; }

.tagline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-transform: uppercase;
  text-align: right;
  line-height: 1.5;
}
.tagline b { color: var(--accent); font-weight: 500; }

/* Primary nav */
nav.primary {
  position: relative;
  z-index: 9;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
nav.primary ul {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  list-style: none;
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
nav.primary li { }
nav.primary a {
  display: block;
  padding: 14px 16px;
  color: var(--ink-mute);
  text-decoration: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}
nav.primary a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
nav.primary a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Main container */
main {
  position: relative;
  z-index: 5;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}

/* HERO — the lead story */
.hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--line);
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero-tag::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--accent);
}

.hero h1 {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 500;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 22px;
}
.hero h1 a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.hero h1 a:hover { color: var(--accent); }

.hero-dek {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 540px;
  margin-bottom: 28px;
}

.hero-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-dim); }

.hero-img-wrap {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid var(--line);
}
.hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.95);
}
.hero-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(10,14,20,0.4));
  pointer-events: none;
}

/* Section labels */
.section-label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.section-label h2 {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--ink);
  text-transform: uppercase;
}
.section-label .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
}

/* Article grid */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: background 0.18s ease;
}
.card:hover { background: var(--bg-1); }

.card-img {
  aspect-ratio: 16/10;
  background: var(--bg-2);
  overflow: hidden;
  border: 1px solid var(--line);
}
.card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.card:hover .card-img img { transform: scale(1.04); }

.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.card-meta .cat {
  color: var(--accent);
  padding: 3px 8px;
  border: 1px solid rgba(255,181,71,0.25);
  background: rgba(255,181,71,0.04);
}

.card h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.card:hover h3 { color: var(--accent); }

.card-excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
  flex-grow: 1;
}

.card-read {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.card-read::after {
  content: '→';
  transition: transform 0.2s ease;
}
.card:hover .card-read { color: var(--accent); }
.card:hover .card-read::after { transform: translateX(4px); }

/* Sidebar layout for category / archive sections */
.split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
  margin-top: 80px;
}

aside .widget {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-bottom: 40px;
}
aside .widget h4 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
aside ul { list-style: none; }
aside li a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dotted var(--line);
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 14px;
  font-family: 'IBM Plex Sans', sans-serif;
}
aside li a:hover { color: var(--accent); }
aside li a .num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
}

/* Article page */
.article-page {
  max-width: 740px;
  margin: 0 auto;
}
.article-header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.article-header .breadcrumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.article-header .breadcrumb a { color: var(--accent); text-decoration: none; }
.article-header .breadcrumb a:hover { text-decoration: underline; }

.article-header h1 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 24px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

.article-body {
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
}
.article-body p {
  margin-bottom: 1.4em;
}
.article-body p:first-of-type::first-line {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.article-body img {
  max-width: 100%;
  height: auto;
  margin: 32px auto;
  display: block;
  border: 1px solid var(--line);
}
.article-body h2, .article-body h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--ink);
  margin: 2em 0 0.8em;
  letter-spacing: -0.01em;
}
.article-body h2 { font-size: 28px; line-height: 1.2; }
.article-body h3 { font-size: 22px; line-height: 1.25; }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body em { color: var(--ink-mute); font-style: italic; }
.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 24px;
  margin: 28px 0;
  font-family: 'Fraunces', serif;
  font-size: 21px;
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
}
.article-body a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-dim);
}
.article-body a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.article-body ul, .article-body ol {
  margin: 0 0 1.4em 24px;
}
.article-body li { margin-bottom: 8px; }

/* Footer */
footer {
  position: relative;
  z-index: 5;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  padding: 56px 32px 32px;
  margin-top: 96px;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 56px;
}
footer h5 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
footer ul { list-style: none; }
footer li { margin-bottom: 8px; }
footer a {
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s ease;
}
footer a:hover { color: var(--accent); }
footer p { font-size: 14px; color: var(--ink-mute); line-height: 1.6; }
.footer-bottom {
  max-width: 1280px;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* Animations on load */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero, .article-grid, .article-header, .article-body {
  animation: fadeUp 0.6s ease-out both;
}
.article-grid .card:nth-child(1) { animation-delay: 0.05s; }
.article-grid .card:nth-child(2) { animation-delay: 0.10s; }
.article-grid .card:nth-child(3) { animation-delay: 0.15s; }
.article-grid .card:nth-child(4) { animation-delay: 0.20s; }
.article-grid .card:nth-child(5) { animation-delay: 0.25s; }
.article-grid .card:nth-child(6) { animation-delay: 0.30s; }
.article-grid .card { animation: fadeUp 0.6s ease-out both; }

/* Responsive */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .statusbar { padding: 8px 16px; font-size: 10px; }
  .statusbar .ticker { display: none; }
  .masthead-inner { padding: 24px 16px; grid-template-columns: 1fr auto; }
  .tagline { display: none; }
  nav.primary ul { padding: 0 16px; overflow-x: auto; flex-wrap: nowrap; }
  main { padding: 32px 16px 64px; }
}
@media (max-width: 600px) {
  .article-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}

/* ---------------------------------------------------------------------------
   Mobile drawer (Stage 4 — added 2026-05-11)
   Hidden on desktop. Hamburger button + slide-out drawer on narrow viewports.
   ------------------------------------------------------------------------- */

/* Default (desktop): hide all three drawer elements completely */
.menu-toggle,
.mobile-backdrop,
.mobile-drawer {
  display: none;
}

@media (max-width: 980px) {
  /* Show hamburger button, fixed top-left */
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: fixed;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    z-index: 1001;
  }
  .menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    margin: 0 auto;
    transition: transform 0.2s, opacity 0.2s;
  }
  .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Backdrop overlay */
  .mobile-backdrop {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 999;
  }
  .mobile-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer panel — slides in from left */
  .mobile-drawer {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    height: 100vh;
    background: var(--bg-1);
    border-right: 1px solid var(--line);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1000;
    overflow-y: auto;
    padding: 60px 0 20px 0;
  }
  .mobile-drawer.open {
    transform: translateX(0);
  }
  .mobile-drawer ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .mobile-drawer li {
    border-bottom: 1px solid var(--line);
  }
  .mobile-drawer a {
    display: block;
    padding: 14px 24px;
    color: var(--ink);
    text-decoration: none;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    transition: color 0.15s;
  }
  .mobile-drawer a:hover {
    color: var(--accent);
  }
  .mobile-drawer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  /* When drawer is open, hide the desktop primary nav to avoid duplicate nav noise */
  /* (Optional — current behavior keeps both visible, which is fine since drawer covers it) */
}

/* =========================================================================
   SoN Stage 4.1 — Magazine redesign (added 2026-05-11)
   Banner hero, editorial framing, section blocks, latest feed.
   ========================================================================= */

/* ----- Primary nav: stronger typography ----- */
nav.primary {
  position: relative;
  z-index: 9;
  background: var(--bg-0);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
nav.primary ul {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  list-style: none;
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;   /* nav centered, magazine-style */
}
nav.primary a {
  display: block;
  padding: 18px 18px;
  color: var(--ink-mute);
  text-decoration: none;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}
nav.primary a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
nav.primary a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* On homepage, the nav sits directly under the banner — no border-top needed */
nav.primary.primary-on-home {
  border-top: none;
}

/* ----- Inner-page masthead: banner image wordmark ----- */
header.masthead-inner {
  background: var(--bg-1);
  padding: 32px 32px 24px 32px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
header.masthead-inner .masthead-link {
  display: inline-block;
  line-height: 0;
}
header.masthead-inner .masthead-img {
  max-width: 540px;
  width: 70%;
  height: auto;
  display: block;
  margin: 0 auto;
}
header.masthead-inner .masthead-tag {
  margin-top: 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
header.masthead-inner .masthead-tag strong {
  color: var(--accent);
  font-weight: 500;
}

/* ----- HOMEPAGE: full-width banner hero ----- */
.hero-banner {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: var(--bg-0);
  overflow: hidden;
}
.hero-banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: center center;
}
.hero-banner-tag {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero-banner-tag .ed-mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.55);
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.15);
}

/* ----- Editorial statement under banner ----- */
.editorial-statement {
  background: var(--bg-1);
  padding: 48px 32px;
  border-bottom: 1px solid var(--line);
}
.editorial-statement-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.ed-pull {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 16px 0;
  letter-spacing: -0.005em;
}
.ed-pull em {
  font-style: normal;
  color: var(--accent);
}
.ed-sub {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin: 0;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ----- Main wrapper on homepage gets extra breathing room ----- */
main.home-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}

/* ----- Lead well ----- */
.lead-well {
  margin-bottom: 56px;
  padding-bottom: 56px;
  border-bottom: 2px solid var(--line-strong);
}
.lead-well-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.ed-rail-label,
.ed-rail-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ed-rail-label { color: var(--accent); }
.ed-rail-date { color: var(--ink-dim); }

.lead-well-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.lead-well-cat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.lead-well-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(38px, 5.8vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 20px 0;
  transition: color 0.18s;
}
.lead-well-link:hover .lead-well-title {
  color: var(--accent);
}
.lead-well-excerpt {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 720px;
  margin: 0 0 18px 0;
}
.lead-well-readlink {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
}
.lead-well-readlink .arrow {
  display: inline-block;
  transition: transform 0.2s;
}
.lead-well-link:hover .lead-well-readlink .arrow {
  transform: translateX(6px);
}

/* ----- Secondary leads (2 essays under lead) ----- */
.secondary-leads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-bottom: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.sl-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.sl-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.sl-cat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.sl-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}
.sl-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 12px 0;
  transition: color 0.18s;
}
.sl-card:hover .sl-title {
  color: var(--accent);
}
.sl-readlink {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ----- Section divider ----- */
.section-divider {
  position: relative;
  text-align: center;
  margin: 56px 0 40px 0;
}
.section-divider::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.section-divider-text {
  position: relative;
  z-index: 1;
  background: var(--bg-0);
  padding: 0 28px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ----- Section blocks (categorized) ----- */
.section-block {
  margin-bottom: 48px;
}
.section-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.section-block-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.18s;
}
.section-block-title:hover { color: var(--accent); }
.section-block-all {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.18s;
}
.section-block-all:hover { color: var(--accent); }

.section-block-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
}
.sb-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-top: 4px;
}
.sb-card-date {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  margin-bottom: 10px;
}
.sb-card-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
  transition: color 0.18s;
}
.sb-card:hover .sb-card-title { color: var(--accent); }
.sb-card-primary .sb-card-title {
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.012em;
}

/* ----- Latest feed (bottom of homepage) ----- */
.latest-feed {
  margin-top: 24px;
}
.lf-row {
  display: grid;
  grid-template-columns: 100px 130px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px dotted var(--line);
  text-decoration: none;
  color: var(--ink);
  align-items: baseline;
  transition: color 0.15s, padding-left 0.15s;
}
.lf-row:hover {
  color: var(--accent);
  padding-left: 8px;
}
.lf-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}
.lf-cat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
}
.lf-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  line-height: 1.3;
}
.latest-feed-more {
  margin-top: 32px;
  text-align: center;
}
.latest-feed-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid var(--line);
  transition: background 0.15s, color 0.15s;
}
.latest-feed-link:hover {
  background: var(--accent);
  color: var(--bg-0);
}

/* ----- Mobile responsiveness ----- */
@media (max-width: 980px) {
  .hero-banner-img { max-height: 320px; }
  .editorial-statement { padding: 36px 24px; }
  main.home-main { padding: 40px 20px 64px; }
  .lead-well-title { font-size: clamp(30px, 7vw, 40px); }
  .secondary-leads { grid-template-columns: 1fr; gap: 28px; }
  .section-block-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .sb-card-primary .sb-card-title { font-size: 20px; }
  nav.primary ul { padding: 0 16px; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  nav.primary a { padding: 14px 12px; font-size: 12px; white-space: nowrap; }
  header.masthead-inner { padding: 24px 16px 18px 16px; }
  header.masthead-inner .masthead-img { max-width: 380px; width: 88%; }
  .lf-row { grid-template-columns: 90px 1fr; gap: 12px; }
  .lf-cat { display: none; }
}
@media (max-width: 600px) {
  .hero-banner-img { max-height: 220px; }
  .ed-pull { font-size: 18px; }
  .lead-well-excerpt { font-size: 16px; }
}

/* =========================================================================
   SoN Stage 4.2 — Editorial manifesto v2 (added 2026-05-11)
   Bigger, bolder, more color. Friedman / common sense / dynamism pillars.
   ========================================================================= */

/* Override the timid editorial-statement from v1 */
.editorial-statement,
.editorial-statement-inner,
.ed-pull,
.ed-sub { display: none !important; }

/* Manifesto section — the new editorial statement */
.manifesto {
  position: relative;
  background:
    radial-gradient(circle at 15% 30%, rgba(255, 181, 71, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 85% 70%, rgba(255, 119, 51, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  padding: 88px 32px 96px 32px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.manifesto-inner {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* The little "The Editorial Promise" rule above the headline */
.manifesto-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 32px;
}
.manifesto-rule::before,
.manifesto-rule::after {
  content: "";
  flex: 0 0 64px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}
.manifesto-rule span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}

/* HEADLINE — Friedman-style declarative, real size */
.manifesto-headline {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-align: center;
  margin: 0 0 28px 0;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.hl-orange {
  color: var(--accent);
  font-style: italic;
}
.hl-mute {
  color: var(--ink-dim);
  font-style: italic;
}

/* LEDE — the one-sentence positioning under the headline */
.manifesto-lede {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--ink-mute);
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px auto;
  font-style: italic;
}

/* PILLARS GRID */
.manifesto-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 24px;
  background: rgba(255, 255, 255, 0.015);
  border-left: 3px solid var(--accent);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.pillar:hover {
  transform: translateY(-3px);
  background: rgba(255, 181, 71, 0.04);
  border-left-color: #ffd28a;
}
.pillar-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 600;
}
.pillar-body {
  flex: 1;
}
.pillar-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 14px 0;
}
.pillar-body p {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0;
}

/* CODA — closing remarks */
.manifesto-coda {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
.manifesto-coda p {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 24px 0;
}
.manifesto-coda .emph {
  color: var(--accent);
  font-weight: 600;
}
.manifesto-signoff {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase;
  color: var(--ink-dim) !important;
  margin-top: 16px !important;
}
.manifesto-signoff span {
  border: 1px solid var(--line);
  padding: 6px 16px;
  display: inline-block;
}

/* Mobile */
@media (max-width: 980px) {
  .manifesto { padding: 56px 20px 64px 20px; }
  .manifesto-pillars {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pillar { padding: 24px 20px; }
}
@media (max-width: 600px) {
  .manifesto-headline { font-size: 32px; line-height: 1.08; }
  .manifesto-lede { font-size: 16px; margin-bottom: 40px; }
}

/* =========================================================================
   SoN Stage 4.3 — Hybrid palette + magazine articles (2026-05-11)
   Strategy: keep --bg-0 etc dark for masthead/nav/status/footer "chrome",
   introduce --paper-* variables for cream content zones.
   ========================================================================= */

:root {
  /* Cream / warm-paper palette for content zones */
  --paper-0:   #f7f3ec;   /* main page body — warm off-white */
  --paper-1:   #faf6ef;   /* slightly brighter for cards */
  --paper-2:   #efe9df;   /* subtle alt zone */
  --paper-3:   #e6dfd2;   /* edges, dividers */
  --paper-line:        rgba(50, 32, 16, 0.10);
  --paper-line-strong: rgba(50, 32, 16, 0.22);
  --paper-ink:       #1a1814;     /* near-black warm */
  --paper-ink-mute:  #4a443b;     /* warm secondary */
  --paper-ink-dim:   #7a7064;     /* warm tertiary */
  --paper-accent:    #c8531c;     /* deeper orange, readable on cream */
  --paper-accent-soft: rgba(200, 83, 28, 0.10);
}

/* ----- Drop the grid-texture background everywhere; replace with paper grain on body ----- */
body::before { display: none; }

/* Re-paint the global body to paper so any content not in a "chrome" container gets it */
body.is-homepage,
body.is-inner {
  background: var(--paper-0);
  color: var(--paper-ink);
}
/* Paper grain on the body — extremely subtle, warm */
body.is-homepage::after,
body.is-inner::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(180, 130, 70, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(180, 130, 70, 0.03) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

/* ----- Keep masthead / statusbar / nav / footer dark — they're "chrome" ----- */
.statusbar,
header.masthead-inner,
nav.primary,
footer {
  background: var(--bg-1) !important;
}
/* The inner masthead banner image already has its own dark background — fine */
header.masthead-inner { border-bottom: 1px solid var(--line); }

/* The nav border-top/bottom should stay on the dark line color */
nav.primary { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ----- Hero banner stays full-bleed dark (it IS dark — that's the artwork) ----- */
/* Remove the Vol. I overlay tag entirely */
.hero-banner-tag { display: none !important; }

/* ----- MANIFESTO section: repaint to paper, recolor everything ----- */
.manifesto {
  background:
    radial-gradient(circle at 12% 25%, rgba(200, 83, 28, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 88% 75%, rgba(200, 83, 28, 0.04) 0%, transparent 50%),
    var(--paper-0) !important;
  border-bottom: 1px solid var(--paper-line) !important;
  color: var(--paper-ink);
}
.manifesto-rule span { color: var(--paper-accent) !important; }
.manifesto-rule::before,
.manifesto-rule::after { background: var(--paper-accent) !important; }

.manifesto-headline { color: var(--paper-ink) !important; }
.hl-orange { color: var(--paper-accent) !important; }
.hl-mute   { color: var(--paper-ink-dim) !important; }

.manifesto-lede { color: var(--paper-ink-mute) !important; }

.pillar {
  background: var(--paper-1) !important;
  border-left: 3px solid var(--paper-accent) !important;
  border-top: 1px solid var(--paper-line) !important;
  border-right: 1px solid var(--paper-line) !important;
  border-bottom: 1px solid var(--paper-line) !important;
  box-shadow: 0 1px 0 rgba(50, 32, 16, 0.04);
}
.pillar:hover {
  background: var(--paper-2) !important;
  border-left-color: var(--paper-accent) !important;
  box-shadow: 0 4px 16px rgba(50, 32, 16, 0.08);
}
.pillar-num { color: var(--paper-accent) !important; }
.pillar-title { color: var(--paper-ink) !important; }
.pillar-body p { color: var(--paper-ink-mute) !important; }

.manifesto-coda { border-top: 1px solid var(--paper-line) !important; }
.manifesto-coda p { color: var(--paper-ink) !important; }
.manifesto-coda .emph { color: var(--paper-accent) !important; }
.manifesto-signoff { color: var(--paper-ink-dim) !important; }
.manifesto-signoff span { border-color: var(--paper-line) !important; }

/* ----- Homepage main wrapper: paper ----- */
main.home-main {
  background: var(--paper-0);
  color: var(--paper-ink);
  position: relative;
  z-index: 1;
}

/* ----- Lead well repainted ----- */
.lead-well {
  border-bottom: 2px solid var(--paper-line-strong) !important;
}
.ed-rail-label { color: var(--paper-accent) !important; }
.ed-rail-date  { color: var(--paper-ink-dim) !important; }
.lead-well-cat { color: var(--paper-accent) !important; }
.lead-well-title { color: var(--paper-ink) !important; }
.lead-well-link:hover .lead-well-title { color: var(--paper-accent) !important; }
.lead-well-excerpt { color: var(--paper-ink-mute) !important; }
.lead-well-readlink { color: var(--paper-accent) !important; }

/* Secondary leads */
.secondary-leads { border-bottom: 1px solid var(--paper-line) !important; }
.sl-cat   { color: var(--paper-accent) !important; }
.sl-date  { color: var(--paper-ink-dim) !important; }
.sl-title { color: var(--paper-ink) !important; }
.sl-card:hover .sl-title { color: var(--paper-accent) !important; }
.sl-readlink { color: var(--paper-ink-dim) !important; }

/* Section divider */
.section-divider::before { background: var(--paper-line) !important; }
.section-divider-text {
  background: var(--paper-0) !important;
  color: var(--paper-ink-dim) !important;
}

/* Section blocks */
.section-block-head {
  border-bottom: 2px solid var(--paper-ink) !important;
}
.section-block-title { color: var(--paper-ink) !important; }
.section-block-title:hover { color: var(--paper-accent) !important; }
.section-block-all   { color: var(--paper-ink-dim) !important; }
.section-block-all:hover { color: var(--paper-accent) !important; }
.sb-card-date  { color: var(--paper-ink-dim) !important; }
.sb-card-title { color: var(--paper-ink) !important; }
.sb-card:hover .sb-card-title { color: var(--paper-accent) !important; }

/* Latest feed */
.lf-row {
  color: var(--paper-ink) !important;
  border-bottom: 1px dotted var(--paper-line) !important;
}
.lf-row:hover { color: var(--paper-accent) !important; }
.lf-date  { color: var(--paper-ink-dim) !important; }
.lf-cat   { color: var(--paper-accent) !important; }
.latest-feed-link {
  color: var(--paper-accent) !important;
  border: 1px solid var(--paper-line-strong) !important;
}
.latest-feed-link:hover {
  background: var(--paper-accent) !important;
  color: var(--paper-1) !important;
}

/* =========================================================================
   ARTICLE PAGE — magazine-style rebuild
   ========================================================================= */

/* Article page wrapper — narrow column, lots of vertical breathing room */
main:not(.home-main):has(article.article) {
  background: var(--paper-0);
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 32px 96px;
  position: relative;
  z-index: 1;
}
/* fallback for browsers without :has() — apply via body class is safer */
body.is-inner main { background: var(--paper-0); }

article.article {
  max-width: 720px;
  margin: 0 auto;
  color: var(--paper-ink);
  position: relative;
}

/* Article meta strip at top */
.article-meta-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--paper-line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-ink-dim);
}
.article-meta-top .cat-tag {
  color: var(--paper-accent) !important;
  font-weight: 600;
  text-decoration: none;
}
.article-meta-top .cat-tag:hover { color: var(--paper-ink); }
.article-meta-top .dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: var(--paper-ink-dim);
  border-radius: 50%;
}

/* Title — big, confident Fraunces */
.article-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(36px, 5.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--paper-ink);
  margin-bottom: 36px;
  text-align: left;
}

/* Article body — magazine typography */
.article-body {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.7;
  color: var(--paper-ink);
}

/* Strip out the WordPress/Elementor div soup styling — we want raw paragraphs */
.article-body div[class*="elementor"],
.article-body div[data-elementor-type],
.article-body div[data-element_type],
.article-body div.e-con-boxed,
.article-body div.e-con-inner,
.article-body div.e-con,
.article-body div.e-parent {
  all: unset;
  display: block;
}
.article-body .elementor-widget-container { display: block; margin: 0; padding: 0; }

/* Paragraphs */
.article-body p {
  margin: 0 0 1.4em 0;
  font-family: 'Fraunces', serif;
  font-size: 19px;
  line-height: 1.7;
}

/* Lead paragraph (first p) — slightly bigger, with drop cap */
.article-body > p:first-of-type::first-letter,
.article-body > div > p:first-of-type::first-letter,
.article-body div > p:first-of-type::first-letter {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 5.5em;
  line-height: 0.85;
  float: left;
  padding-right: 12px;
  padding-top: 6px;
  color: var(--paper-accent);
}

/* Headings inside body */
.article-body h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--paper-ink);
  margin: 2.2em 0 0.6em 0;
}
.article-body h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--paper-ink);
  margin: 1.8em 0 0.5em 0;
}

/* Block quotes — pull-quote treatment */
.article-body blockquote {
  margin: 2em -32px;
  padding: 28px 32px 28px 56px;
  border-left: 4px solid var(--paper-accent);
  background: var(--paper-1);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--paper-ink);
}
.article-body blockquote p { font-size: 22px; line-height: 1.45; margin: 0; }

/* Emphasis */
.article-body em { font-style: italic; }
.article-body strong { font-weight: 600; color: var(--paper-ink); }

/* Inline links */
.article-body a {
  color: var(--paper-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(200, 83, 28, 0.4);
  transition: text-decoration-color 0.15s;
}
.article-body a:hover { text-decoration-color: var(--paper-accent); }

/* Lists */
.article-body ul, .article-body ol {
  margin: 1.2em 0 1.6em 1.5em;
  padding-left: 0;
}
.article-body li {
  margin-bottom: 0.5em;
  font-size: 19px;
  line-height: 1.65;
}

/* Images — full bleed beyond text column, with caption underneath */
.article-body img,
.article-body figure {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em auto;
  border: 1px solid var(--paper-line);
}
/* Hero image — first image gets wider treatment */
.article-body > div:first-child img,
.article-body > p:first-child img {
  width: calc(100% + 64px);
  max-width: calc(100% + 64px);
  margin-left: -32px;
  margin-right: -32px;
}
.article-body figcaption,
.article-body .wp-caption-text,
.article-body .elementor-image-caption {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-style: italic;
  color: var(--paper-ink-dim);
  text-align: center;
  margin-top: 8px;
}

/* HR rules in body */
.article-body hr {
  border: none;
  border-top: 1px solid var(--paper-line);
  margin: 2.5em auto;
  max-width: 200px;
}

/* Article footer — "end of essay" marker + share/back */
.article-end {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--paper-line);
  text-align: center;
}
.article-end-mark {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--paper-accent);
  letter-spacing: 0.5em;
  display: inline-block;
  padding: 0 12px;
}

/* Related essays — three cards under the article */
.related {
  max-width: 1080px;
  margin: 64px auto 0;
  padding-top: 48px;
  border-top: 1px solid var(--paper-line-strong);
}
.related-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper-accent);
  text-align: center;
  margin-bottom: 32px;
}
.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}
.related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 24px;
  background: var(--paper-1);
  border: 1px solid var(--paper-line);
  transition: background 0.18s, transform 0.18s, border-color 0.18s;
}
.related-card:hover {
  background: var(--paper-2);
  transform: translateY(-2px);
  border-color: var(--paper-line-strong);
}
.related-cat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-accent);
  margin-bottom: 10px;
}
.related-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.28;
  color: var(--paper-ink);
  margin: 0 0 8px 0;
}
.related-card:hover .related-title { color: var(--paper-accent); }
.related-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--paper-ink-dim);
}

/* Prev/Next nav between articles */
.prev-next {
  max-width: 1080px;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.pn-link {
  display: block;
  padding: 24px 28px;
  background: var(--paper-1);
  border: 1px solid var(--paper-line);
  text-decoration: none;
  color: inherit;
  transition: background 0.18s;
}
.pn-link:hover { background: var(--paper-2); }
.pn-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-accent);
  margin-bottom: 8px;
}
.pn-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  color: var(--paper-ink);
}
.pn-link.pn-next { text-align: right; }
.pn-link.pn-disabled { opacity: 0.4; pointer-events: none; }

/* =========================================================================
   ARCHIVE + CATEGORY page paper styling
   ========================================================================= */
body.is-inner main { color: var(--paper-ink); }
body.is-inner main h1 { color: var(--paper-ink) !important; }
body.is-inner main p,
body.is-inner main span,
body.is-inner main h2,
body.is-inner main h3 {
  color: var(--paper-ink);
}

/* Cards in category pages */
.article-grid .card {
  background: var(--paper-1);
  border: 1px solid var(--paper-line);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  display: block;
}
.article-grid .card:hover {
  background: var(--paper-2);
  border-color: var(--paper-line-strong);
  transform: translateY(-2px);
}
.article-grid .card-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.article-grid .card-meta .cat { color: var(--paper-accent); }
.article-grid .card-meta span:not(.cat) { color: var(--paper-ink-dim); }
.article-grid .card h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.28;
  color: var(--paper-ink);
  margin: 0 0 12px 0;
}
.article-grid .card:hover h3 { color: var(--paper-accent); }
.article-grid .card-read {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-ink-dim);
}

/* CSS-var-driven sections that use --ink etc — also work on paper */
body.is-inner [style*="var(--ink)"] {
  /* These were originally set against dark — read by browser as still --ink (light text on dark).
     On paper, that's invisible. Apply a paper override for inline styles using --ink in archive/category pages. */
}

/* Archive page month groupings need paper colors */
body.is-inner main > section a[style*="grid-template-columns"] {
  color: var(--paper-ink) !important;
}

/* =========================================================================
   FOOTER stays dark
   ========================================================================= */
footer {
  background: var(--bg-1) !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--line) !important;
  margin-top: 0 !important;
}
footer * { color: inherit; }
footer a { color: var(--ink) !important; }
footer a:hover { color: var(--accent) !important; }
footer h5 { color: var(--ink-dim) !important; }
footer p { color: var(--ink-dim) !important; }

/* Mobile tweaks */
@media (max-width: 980px) {
  .related-grid { grid-template-columns: 1fr; }
  .prev-next { grid-template-columns: 1fr; }
  .article-body blockquote { margin: 2em 0; padding: 24px 24px 24px 36px; }
  .article-body > div:first-child img,
  .article-body > p:first-child img {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }
}