/* ───────────── MIKA'S BLOG — DESIGN SYSTEM ───────────── */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  --ink:        #0B0B0F;
  --ink-2:      #16161C;
  --steel:      #7A7E89;
  --steel-soft: #BFC2CA;
  --steel-2:    #4A4D55;
  --signal:     #FF3B1F;
  --paper:      #F4F4F0;
  --paper-2:    #ECECE6;
  --paper-3:    #E2E1D9;
  --line:       rgba(11,11,15,0.14);
  --line-soft:  rgba(11,11,15,0.07);
  --line-strong:rgba(11,11,15,0.85);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--signal); }
img { display: block; max-width: 100%; }

.page {
  width: 1440px;
  margin: 0 auto;
  background: var(--paper);
}

/* ── NAV ────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
  padding: 0 40px;
  display: grid;
  grid-template-columns: 260px 1fr auto;
  align-items: center;
  height: 64px;
  gap: 32px;
}
.nav .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.nav .brand .slash {
  display: inline-block;
  width: 5px; height: 22px;
  background: var(--signal);
  transform: skewX(-12deg);
  margin: 0 2px;
}
.nav .links {
  display: flex; gap: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav .links a {
  padding: 8px 14px;
  color: var(--ink);
  position: relative;
}
.nav .links a:hover { color: var(--signal); }
.nav .links a.active { color: var(--signal); }
.nav .links a.active::before {
  content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; background: var(--signal); border-radius: 50%;
}
.nav .links a.active { padding-left: 22px; }

.nav .end {
  display: flex; align-items: center; gap: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}
.nav .end .search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--ink);
  cursor: pointer;
  color: var(--ink);
  background: var(--paper);
}
.nav .end .search:hover { background: var(--ink); color: var(--paper); }
.nav .end .search .key {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: 0.6;
}
.nav .end .rec {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--signal);
}
.nav .end .rec .dot {
  width: 7px; height: 7px; background: var(--signal); border-radius: 50%;
  animation: blink 1.6s infinite;
}
@keyframes blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.2; }
}

/* ── BREADCRUMB / EYEBROW BAR ───────────────────────── */
.eyebrow-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 40px;
  border-bottom: 1px solid var(--line);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}
.eyebrow-bar b { color: var(--ink); font-weight: 600; }
.eyebrow-bar .sig { color: var(--signal); }

/* ── FOOTER ────────────────────────────────────────── */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: 64px 40px 28px;
  border-top: 1.5px solid var(--ink);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(244,244,240,0.14);
}
.footer .f-brand .mark {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 64px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--paper);
}
.footer .f-brand .mark em { color: var(--signal); font-style: normal; }
.footer .f-brand p {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(244,244,240,0.7);
  max-width: 32ch;
}
.footer .col h4 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
  margin: 0 0 16px;
}
.footer .col a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  color: rgba(244,244,240,0.85);
  font-family: "IBM Plex Sans", sans-serif;
}
.footer .col a:hover { color: var(--signal); }
.footer .now {
  background: rgba(244,244,240,0.06);
  padding: 18px;
  border: 1px solid rgba(244,244,240,0.12);
}
.footer .now .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  display: flex; align-items: center; gap: 8px;
}
.footer .now .lbl .dot {
  width: 6px; height: 6px; background: var(--signal); border-radius: 50%;
  animation: blink 1.6s infinite;
}
.footer .now .track {
  margin-top: 12px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.footer .now .artist {
  font-size: 12px;
  color: rgba(244,244,240,0.6);
  margin-top: 4px;
}
.footer .now .bars {
  margin-top: 12px;
  display: flex; gap: 3px; align-items: flex-end; height: 18px;
}
.footer .now .bars span {
  flex: 1; background: var(--signal); display: inline-block;
  animation: eq 0.9s ease-in-out infinite alternate;
}
.footer .now .bars span:nth-child(1) { animation-delay: -0.2s; }
.footer .now .bars span:nth-child(2) { animation-delay: -0.5s; }
.footer .now .bars span:nth-child(3) { animation-delay: -0.1s; }
.footer .now .bars span:nth-child(4) { animation-delay: -0.4s; }
.footer .now .bars span:nth-child(5) { animation-delay: -0.3s; }
.footer .now .bars span:nth-child(6) { animation-delay: -0.6s; }
.footer .now .bars span:nth-child(7) { animation-delay: 0s; }
.footer .now .bars span:nth-child(8) { animation-delay: -0.4s; }
@keyframes eq {
  0% { height: 10%; }
  100% { height: 100%; }
}
.footer-bottom {
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,244,240,0.55);
}
.footer-bottom .center {
  font-family: "Bricolage Grotesque", sans-serif;
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 16px;
  color: rgba(244,244,240,0.7);
}
.footer-bottom .right { text-align: right; }

/* ── BUTTONS / CHIPS ────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.btn.signal { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.btn.signal:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
a.chip, button.chip, .chip.clickable {
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.165, 0.84, 0.44, 1),
              background 0.18s ease,
              color 0.18s ease,
              border-color 0.18s ease,
              box-shadow 0.18s ease;
}
a.chip:hover, button.chip:hover, .chip.clickable:hover {
  background: var(--signal) !important;
  border-color: var(--signal) !important;
  color: var(--ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(255, 59, 31, 0.3);
}
.chip.fill { background: var(--ink); color: var(--paper); }
.chip.sig { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.chip.steel { color: var(--steel); border-color: var(--line); }

/* ── POST CARD ──────────────────────────────────────── */
.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border-top: 1.5px solid var(--ink);
  padding-top: 16px;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s ease;
}
.card:hover { color: var(--ink); }
.card:hover .card-title { color: var(--signal); }
.card .card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: var(--paper-2);
}
.card .card-meta {
  display: flex; gap: 10px; align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
.card .card-meta .cat { color: var(--signal); font-weight: 600; }
.card .card-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.card .card-title em { font-style: italic; font-weight: 500; }
.card .card-deck {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--steel-2);
  max-width: 38ch;
}

/* ── ART PLACEHOLDER VISUALS ─────────────────────────
   Topic-specific abstract visuals built from CSS/SVG so
   the prototype stands alone without external images. */

.art {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  display: block;
}

/* TECH — gridded sensor / circuit field */
.art-tech {
  background: var(--ink);
  background-image:
    linear-gradient(rgba(255,59,31,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,59,31,0.18) 1px, transparent 1px),
    linear-gradient(rgba(244,244,240,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,244,240,0.08) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
  background-position: 0 0, 0 0, 0 0, 0 0;
}
.art-tech::after {
  content: attr(data-badge); position: absolute; right: 18px; bottom: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: rgba(255,59,31,0.7);
  letter-spacing: 0.18em;
}
.art-tech::before {
  content: ""; position: absolute; left: 20%; top: 20%;
  width: 60%; height: 60%;
  border: 1.5px solid var(--signal);
  background:
    linear-gradient(135deg, transparent 48%, rgba(255,59,31,0.4) 49%, rgba(255,59,31,0.4) 51%, transparent 52%);
}

/* CAMERAS — aperture & focus marks */
.art-cameras {
  background: var(--ink-2);
}
.art-cameras::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 26%, rgba(244,244,240,0.06) 27%, rgba(244,244,240,0.06) 28%, transparent 29%),
    radial-gradient(circle at 50% 50%, transparent 36%, rgba(244,244,240,0.08) 37%, rgba(244,244,240,0.08) 38%, transparent 39%),
    radial-gradient(circle at 50% 50%, transparent 46%, rgba(255,59,31,0.4) 47%, rgba(255,59,31,0.4) 48%, transparent 49%);
}
.art-cameras::after {
  content: attr(data-badge);
  position: absolute; left: 18px; bottom: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: rgba(244,244,240,0.85);
  letter-spacing: 0.14em;
}

/* MEDIA — SMPTE color bars */
.art-media {
  background: var(--ink);
  background-image: linear-gradient(
    to right,
    #BFC2CA 0%, #BFC2CA 14.28%,
    #C8B850 14.28%, #C8B850 28.57%,
    #4FB3C2 28.57%, #4FB3C2 42.85%,
    #4AA84A 42.85%, #4AA84A 57.14%,
    #BD4FB3 57.14%, #BD4FB3 71.43%,
    #C04A4A 71.43%, #C04A4A 85.71%,
    #3F4FBF 85.71%, #3F4FBF 100%
  );
}
.art-media::after {
  content: attr(data-badge);
  position: absolute; right: 16px; bottom: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: rgba(11,11,15,0.85);
  letter-spacing: 0.14em;
  background: rgba(244,244,240,0.85);
  padding: 4px 8px;
}

/* INNOVATION — blueprint */
.art-innovation {
  background: #1B3A52;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}
.art-innovation::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 60%; height: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(244,244,240,0.6);
  background:
    linear-gradient(to right, transparent 32%, rgba(244,244,240,0.4) 33%, transparent 34%),
    linear-gradient(to bottom, transparent 50%, rgba(244,244,240,0.4) 51%, transparent 52%);
}
.art-innovation::after {
  content: attr(data-badge);
  position: absolute; right: 18px; top: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: rgba(244,244,240,0.7);
  letter-spacing: 0.18em;
}

/* ART — halftone field */
.art-art {
  background: var(--signal);
  background-image: radial-gradient(circle, rgba(11,11,15,0.85) 22%, transparent 24%);
  background-size: 14px 14px;
  background-position: 0 0;
}
.art-art::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; right: 0;
  background-image: radial-gradient(circle, rgba(244,244,240,0.95) 28%, transparent 30%);
  background-size: 24px 24px;
}
.art-art::after {
  content: attr(data-badge);
  position: absolute; left: 18px; bottom: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--ink);
  letter-spacing: 0.18em;
  background: var(--paper);
  padding: 4px 8px;
}

/* MUSIC — EQ / waveform */
.art-music {
  background: var(--ink);
  display: flex; align-items: center; padding: 0 5%;
}
.art-music::before {
  content: ""; flex: 1; height: 60%;
  background:
    repeating-linear-gradient(
      to right,
      var(--signal) 0 3px,
      transparent 3px 8px
    );
  -webkit-mask: linear-gradient(to bottom, transparent 0, transparent 8%, #000 30%, #000 70%, transparent 92%, transparent 100%),
                radial-gradient(ellipse at center, #000 30%, transparent 90%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  mask: linear-gradient(to bottom, transparent 0, transparent 8%, #000 30%, #000 70%, transparent 92%, transparent 100%),
        radial-gradient(ellipse at center, #000 30%, transparent 90%);
}
.art-music::after {
  content: attr(data-badge);
  position: absolute; right: 16px; bottom: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: rgba(244,244,240,0.85);
  letter-spacing: 0.14em;
}

/* Variants for hero (larger) */
.art.hero { aspect-ratio: 16 / 10; }
.art.square { aspect-ratio: 1 / 1; }

/* Topic accent strip on cards */
.card .topic-bar {
  height: 6px;
  background: var(--ink);
}
.card[data-topic="technology"] .topic-bar { background: var(--signal); }
.card[data-topic="cameras"]    .topic-bar { background: #4FB3C2; }
.card[data-topic="media"]      .topic-bar { background: #C8B850; }
.card[data-topic="innovation"] .topic-bar { background: #1B3A52; }
.card[data-topic="art"]        .topic-bar { background: #BD4FB3; }
.card[data-topic="music"]      .topic-bar { background: #4AA84A; }

/* ── SECTION TITLES ─────────────────────────────────── */
.section-title {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: end;
  gap: 20px;
  padding: 64px 40px 20px;
  border-bottom: 1.5px solid var(--ink);
}
.section-title h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
}
.section-title h2 em { font-style: italic; font-weight: 500; color: var(--steel); }
.section-title .pre {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
  padding-bottom: 8px;
}
.section-title .count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  padding-bottom: 8px;
}
.section-title .view-all {
  padding-bottom: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.section-title .view-all:hover { color: var(--signal); }

.section-body { padding: 40px; }

/* ── UTILITY ────────────────────────────────────────── */
.sig { color: var(--signal); }
.mono { font-family: "JetBrains Mono", monospace; }
.display { font-family: "Bricolage Grotesque", sans-serif; }
/* ============ Home.html ============ */
/* ── HOME-ONLY ──────────────────────────────────────── */

  /* MASTHEAD */
  .masthead {
    padding: 32px 40px 0;
  }
  .masthead .word-row {
    display: flex; align-items: flex-end; gap: 22px;
    justify-content: space-between;
  }
  .masthead .wordmark {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 200px;
    line-height: 0.82;
    letter-spacing: -0.055em;
    color: var(--ink);
    display: flex; align-items: flex-end; gap: 20px;
    flex: 1; flex-wrap: nowrap; white-space: nowrap;
  }
  .masthead .wordmark .apos { color: var(--signal); }
  .masthead .wordmark .slash {
    width: 16px; height: 140px;
    background: var(--signal);
    transform: skewX(-12deg);
    margin: 0 -2px 14px;
  }
  .masthead .issue-card {
    border: 1.5px solid var(--ink);
    padding: 16px 18px;
    min-width: 240px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
    line-height: 1.6;
    margin-bottom: 6px;
  }
  .issue-card .num {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .issue-card .num em { font-style: italic; color: var(--signal); font-weight: 500; }
  .issue-card .row { display: flex; justify-content: space-between; }
  .issue-card .row b { color: var(--ink); font-weight: 600; }

  /* TICKER */
  .ticker-wrap {
    margin-top: 22px;
    border-top: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    position: relative;
  }
  .ticker {
    display: flex;
    gap: 0;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    animation: tick 60s linear infinite;
    padding: 16px 0;
  }
  .ticker-wrap:hover .ticker {
    animation-play-state: paused;
  }
  .ticker span {
    padding: 0 28px;
    display: inline-flex; align-items: center; gap: 24px;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.22s ease;
  }
  .ticker span:hover {
    color: var(--signal);
    transform: skewX(-8deg) scale(1.04);
  }
  .ticker span::after {
    content: "●";
    color: var(--signal);
    font-size: 12px;
    margin-left: 24px;
    display: inline-block;
    transform: skewX(0) scale(1);
    transition: transform 0.22s ease, color 0.22s ease;
  }
  .ticker span:hover::after {
    color: var(--paper);
    transform: skewX(8deg) scale(0.95);
  }
  @keyframes tick {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* HERO FEATURED */
  .hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
    border-bottom: 1.5px solid var(--ink);
  }
  .hero .h-image {
    border-right: 1.5px solid var(--ink);
    position: relative;
    overflow: hidden;
  }
  .hero .h-image .art { height: 100%; min-height: 540px; }
  .hero .h-text {
    padding: 40px 44px 36px;
    display: flex; flex-direction: column;
    gap: 24px;
    position: relative;
  }
  .hero .meta-top {
    display: flex; align-items: center; gap: 14px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--steel);
  }
  .hero .meta-top .cat {
    background: var(--signal); color: var(--ink);
    padding: 5px 10px; font-weight: 600;
  }
  .hero h1 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 92px;
    line-height: 0.92;
    letter-spacing: -0.04em;
    margin: 0;
    color: var(--ink);
  }
  .hero h1 em { font-style: italic; font-weight: 500; color: var(--signal); }
  .hero .deck {
    font-size: 19px;
    line-height: 1.45;
    color: var(--ink-2);
    max-width: 38ch;
    margin: 0;
  }
  .hero .byline {
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
  }
  .hero .byline .who {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
  }
  .hero .byline .who b { color: var(--ink); font-weight: 600; }
  .hero .h-text::before {
    content: attr(data-featured-label);
    position: absolute; top: 0; right: 44px;
    background: var(--signal);
    color: var(--ink);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    padding: 6px 12px;
  }

  /* LATEST GRID */
  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }
  .grid-3 .card .card-title { font-size: 26px; }

  /* TOPIC SECTION */
  .topic-section {
    border-bottom: 1.5px solid var(--ink);
  }
  .topic-strip {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 0;
  }
  .topic-side {
    padding: 40px 32px 40px 40px;
    border-right: 1.5px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    display: flex; flex-direction: column;
    gap: 18px;
    min-height: 460px;
  }
  .topic-side .lab {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--signal);
    font-weight: 600;
  }
  .topic-side .topic-name {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 88px;
    line-height: 0.85;
    letter-spacing: -0.04em;
    margin: 0;
  }
  .topic-side p {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(244,244,240,0.75);
    max-width: 28ch;
    margin: 0;
  }
  .topic-side .stats {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(244,244,240,0.15);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244,244,240,0.6);
  }
  .topic-side .stats b { color: var(--paper); font-weight: 600; }
  .topic-side .see {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--signal);
    color: var(--ink);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    align-self: flex-start;
  }
  .topic-side .see:hover { background: var(--paper); color: var(--ink); }

  .topic-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .topic-cards .tcard {
    padding: 24px 24px 28px;
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 14px;
    color: var(--ink);
    background: var(--paper);
  }
  .topic-cards .tcard:last-child { border-right: 0; }
  .topic-cards .tcard:hover { background: var(--paper-2); }
  .topic-cards .tcard:hover h3 { color: var(--signal); }
  .topic-cards .tcard .tc-image {
    aspect-ratio: 5 / 3;
    overflow: hidden;
    position: relative;
  }
  .topic-cards .tcard h3 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
  }
  .topic-cards .tcard .tc-meta {
    margin-top: auto;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel);
    display: flex; justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  /* ARCHIVE LIST PREVIEW */
  .from-archive .list-row {
    display: grid;
    grid-template-columns: 110px 130px 1fr auto auto;
    align-items: center;
    gap: 24px;
    padding: 22px 40px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
  }
  .from-archive .list-row:hover { background: var(--paper-2); }
  .from-archive .list-row:hover .lr-title { color: var(--signal); }
  .from-archive .list-row .lr-date {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--steel);
  }
  .from-archive .list-row .lr-cat {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--signal);
    font-weight: 600;
  }
  .from-archive .list-row .lr-title {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .from-archive .list-row .lr-title em { font-style: italic; font-weight: 500; }
  .from-archive .list-row .lr-time {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--steel);
  }
  .from-archive .list-row .lr-arrow {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 22px;
    color: var(--steel);
    display: inline-block;
    transition: transform 0.22s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.22s ease;
  }
  .from-archive .list-row:hover .lr-arrow {
    color: var(--signal);
    transform: translateX(4px);
  }

  /* NEWSLETTER */
  .newsletter {
    background: var(--ink);
    color: var(--paper);
    padding: 80px 40px;
    border-bottom: 1.5px solid var(--ink);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .newsletter .nl-head h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 72px;
    line-height: 0.95;
    letter-spacing: -0.035em;
    margin: 0 0 18px;
    color: var(--paper);
  }
  .newsletter .nl-head h2 em { font-style: italic; font-weight: 500; color: var(--signal); }
  .newsletter .nl-head p {
    color: rgba(244,244,240,0.7);
    max-width: 40ch;
    line-height: 1.5;
    font-size: 16px;
    margin: 0;
  }
  .newsletter .nl-form {
    display: flex; flex-direction: column; gap: 14px;
  }
  .newsletter .nl-form .field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    border: 1.5px solid var(--paper);
  }
  .newsletter .nl-form input {
    background: transparent;
    border: 0; outline: 0;
    padding: 18px 20px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    color: var(--paper);
  }
  .newsletter .nl-form input::placeholder { color: rgba(244,244,240,0.4); }
  .newsletter .nl-form button {
    border: 0; background: var(--signal); color: var(--ink);
    padding: 0 28px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
  }
  .newsletter .nl-form .note {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244,244,240,0.55);
  }
  .newsletter .nl-form .note .sig { color: var(--signal); }

/* ============ Archive.html ============ */
.archive-head {
    padding: 48px 40px 32px;
    border-bottom: 1.5px solid var(--ink);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: end;
  }
  .archive-head h1 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 156px;
    line-height: 0.85;
    letter-spacing: -0.045em;
    margin: 0;
  }
  .archive-head h1 em { font-style: italic; font-weight: 500; color: var(--signal); }
  .archive-head .meta {
    text-align: right;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--steel);
    line-height: 1.8;
    padding-bottom: 14px;
  }
  .archive-head .meta b { color: var(--ink); font-weight: 600; }
  .archive-head .meta .big {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 48px;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: none;
    display: block;
    margin-top: 6px;
  }

  /* FILTER BAR */
  .filters {
    padding: 20px 40px;
    border-bottom: 1.5px solid var(--ink);
    background: var(--paper-2);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    position: sticky; top: 64px;
    z-index: 20;
  }
  .filters .label {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--signal);
    font-weight: 600;
  }
  .filters .chips {
    display: flex; gap: 6px; flex-wrap: wrap;
  }
  .filters .chips .chip {
    cursor: pointer;
  }
  .filters .chips .chip.fill { cursor: default; }
  .filters .sort {
    display: flex; align-items: center; gap: 14px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
  }
  .filters .sort select {
    border: 1px solid var(--ink);
    background: var(--paper);
    padding: 6px 10px;
    font-family: inherit;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
  }
  .filters .sort .view {
    display: inline-flex; border: 1px solid var(--ink);
  }
  .filters .sort .view span {
    padding: 6px 10px; cursor: pointer;
  }
  .filters .sort .view span.active { background: var(--ink); color: var(--paper); }

  /* YEAR LABELS */
  .year-band {
    padding: 28px 40px 12px;
    border-bottom: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .year-band h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 64px;
    line-height: 1;
    letter-spacing: -0.04em;
    margin: 0;
  }
  .year-band h2 em { font-style: italic; font-weight: 500; color: var(--steel); }
  .year-band .count {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--steel);
  }
  .year-band .count b { color: var(--signal); font-weight: 600; }

  /* LIST */
  .list .row {
    display: grid;
    grid-template-columns: 60px 110px 130px 1fr 80px 90px 24px;
    gap: 20px;
    align-items: center;
    padding: 18px 40px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    transition: background 0.12s ease;
  }
  .list .row:hover { background: var(--ink); color: var(--paper); }
  .list .row:hover .r-num { color: var(--signal); }
  .list .row:hover .r-cat { color: var(--signal); }
  .list .row:hover .r-time { color: rgba(244,244,240,0.6); }
  .list .row:hover .r-date { color: rgba(244,244,240,0.6); }
  .list .row:hover .r-arrow { color: var(--signal); }

  .list .r-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--steel);
    letter-spacing: 0.08em;
  }
  .list .r-date {
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    color: var(--steel);
    letter-spacing: 0.08em;
  }
  .list .r-cat {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--signal);
    font-weight: 600;
  }
  .list .r-title {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }
  .list .r-title em { font-style: italic; font-weight: 500; }
  .list .r-time {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--steel);
    letter-spacing: 0.08em;
  }
  .list .r-reads {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--steel);
    letter-spacing: 0.08em;
    text-align: right;
  }
  .list .r-arrow {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--steel);
    display: inline-block;
    transition: transform 0.22s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.22s ease;
  }
  .list .row:hover .r-arrow {
    color: var(--signal);
    transform: translateX(4px);
  }

  /* TAGGED row for featured items */
  .list .row.featured {
    background: var(--paper-2);
  }
  .list .row.featured .r-num::after {
    content: "  ●";
    color: var(--signal);
  }

  /* PAGINATION */
  .pagination {
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    border-top: 1.5px solid var(--ink);
  }
  .pagination .pages {
    display: flex; gap: 0;
  }
  .pagination .pages a {
    padding: 12px 18px;
    border: 1px solid var(--ink);
    margin-left: -1px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--ink);
    letter-spacing: 0.1em;
  }
  .pagination .pages a:hover { background: var(--ink); color: var(--paper); }
  .pagination .pages a.active { background: var(--signal); border-color: var(--signal); color: var(--ink); }
  .pagination .left, .pagination .right {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--steel);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .pagination .right { text-align: right; }

/* ============ Post.html ============ */
/* ── POST-ONLY ──────────────────────────────────────── */
  .post-head {
    padding: 56px 40px 32px;
    border-bottom: 1.5px solid var(--ink);
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .post-head .crumbs {
    display: flex; align-items: center; gap: 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--steel);
  }
  .post-head .crumbs a { color: var(--steel); }
  .post-head .crumbs a:hover { color: var(--signal); }
  .post-head .crumbs .cat {
    background: var(--signal); color: var(--ink);
    padding: 5px 10px; font-weight: 600;
  }

  .post-head h1 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 132px;
    line-height: 0.9;
    letter-spacing: -0.045em;
    margin: 8px 0 0;
    max-width: 16ch;
  }
  .post-head h1 em { font-style: italic; font-weight: 500; color: var(--signal); }

  .post-head .deck {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 26px;
    line-height: 1.35;
    color: var(--ink-2);
    max-width: 60ch;
    margin: 8px 0 0;
    font-weight: 400;
  }
  .post-head .deck em { color: var(--signal); font-style: italic; }

  .post-head .byline-row {
    margin-top: 16px;
    padding-top: 24px;
    border-top: 1.5px solid var(--ink);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel);
  }
  .post-head .byline-row .k { color: var(--steel); margin-bottom: 6px; display: block; font-size: 10px;}
  .post-head .byline-row .v {
    color: var(--ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 600;
    font-size: 17px;
    text-transform: none;
    letter-spacing: -0.01em;
  }
  .post-head .byline-row .v.mono {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* HERO IMAGE */
  .post-hero {
    border-bottom: 1.5px solid var(--ink);
  }
  .post-hero .art {
    aspect-ratio: 16 / 9;
  }
  .post-hero .caption {
    padding: 14px 40px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel);
  }
  .post-hero .caption b { color: var(--ink); font-weight: 600; }

  /* BODY */
  .post-body {
    padding: 72px 40px 40px;
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    gap: 56px;
    align-items: start;
  }
  .post-body .gutter-left {
    position: sticky; top: 80px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
  }
  .post-body .gutter-left .toc-title {
    color: var(--signal);
    font-weight: 600;
    margin-bottom: 14px;
  }
  .post-body .gutter-left ol {
    list-style: none; padding: 0; margin: 0;
    counter-reset: toc;
    display: flex; flex-direction: column; gap: 10px;
  }
  .post-body .gutter-left ol li {
    counter-increment: toc;
    display: grid; grid-template-columns: 28px 1fr;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    border-left: 0 solid transparent;
    color: var(--ink);
    font-size: 11.5px;
    transition: padding-left 0.22s cubic-bezier(0.165, 0.84, 0.44, 1),
                border-left 0.22s ease,
                color 0.22s ease;
  }
  .post-body .gutter-left ol li::before {
    content: "0" counter(toc);
    color: var(--steel);
  }
  .post-body .gutter-left ol li.active {
    color: var(--signal);
    border-left: 2px solid var(--signal);
    padding-left: 6px;
  }
  .post-body .gutter-left ol li.active::before { color: var(--signal); }

  .post-body .gutter-right {
    position: sticky; top: 80px;
    display: flex; flex-direction: column; gap: 20px;
  }
  .gutter-right .share-card,
  .gutter-right .meta-card {
    border: 1px solid var(--ink);
    padding: 16px;
  }
  .gutter-right .share-card .lbl,
  .gutter-right .meta-card .lbl {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--signal);
    font-weight: 600;
    margin-bottom: 12px;
  }
  .gutter-right .share-card a {
    display: flex; justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .gutter-right .share-card a:hover { color: var(--signal); }

  .gutter-right .meta-card .row {
    display: flex; justify-content: space-between;
    padding: 6px 0;
    border-top: 1px solid var(--line);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--steel);
  }
  .gutter-right .meta-card .row b { color: var(--ink); font-weight: 600; }

  /* PROSE */
  .prose {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink);
    max-width: 64ch;
  }
  .prose > p:first-child::first-letter {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    color: var(--signal);
    font-size: 96px;
    line-height: 0.85;
    float: left;
    margin: 6px 14px 0 -4px;
    letter-spacing: -0.04em;
  }
  .prose > p:first-child::first-line {
    font-weight: 500;
  }
  .prose p { margin: 0 0 22px; }
  .prose a { color: var(--ink); border-bottom: 1.5px solid var(--signal); padding-bottom: 1px; }
  .prose a:hover { color: var(--signal); }
  .prose em { color: var(--signal); font-style: italic; }
  .prose strong { font-weight: 600; }

  .prose h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 56px 0 22px;
    color: var(--ink);
  }
  .prose h2 em { color: var(--signal); font-style: italic; font-weight: 500; }
  .prose h2 .num {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--signal);
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 600;
  }

  .pull-quote {
    margin: 48px -40px 48px;
    padding: 56px 40px;
    background: var(--ink);
    color: var(--paper);
    position: relative;
  }
  .pull-quote .mark {
    position: absolute; top: 14px; left: 40px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 92px;
    line-height: 0.6;
    color: var(--signal);
  }
  .pull-quote .q {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    max-width: 24ch;
    padding-top: 30px;
  }
  .pull-quote .q em { font-weight: 700; font-style: italic; color: var(--signal); }
  .pull-quote .who {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--signal);
  }

  .inline-fig {
    margin: 44px 0;
    border-top: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    padding: 18px 0;
  }
  .inline-fig .art { aspect-ratio: 16 / 9; }
  .inline-fig figcaption {
    margin-top: 14px;
    display: flex; justify-content: space-between;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel);
  }
  .inline-fig figcaption b { color: var(--ink); font-weight: 600; }

  .two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 44px 0;
  }
  .two-up figure { margin: 0; border: 1.5px solid var(--ink); padding: 12px; }
  .two-up .art { aspect-ratio: 4 / 5; }
  .two-up figcaption {
    margin-top: 10px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel);
  }
  .two-up figcaption b { color: var(--ink); font-weight: 600; }

  /* TAGS / END */
  .post-end {
    border-top: 1.5px solid var(--ink);
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
  }
  .post-end .tags { display: flex; gap: 8px; flex-wrap: wrap; }
  .post-end .actions { display: flex; gap: 12px; }

  .author-card {
    border-top: 1.5px solid var(--ink);
    padding: 40px;
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 28px;
    align-items: center;
  }
  .author-card .avatar {
    width: 120px; height: 120px;
    background: var(--ink);
    color: var(--paper);
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 64px;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: -0.04em;
  }
  .author-card .avatar em { color: var(--signal); font-style: normal; }
  .author-card .who h3 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
  }
  .author-card .who p {
    margin: 0;
    color: var(--steel-2);
    font-size: 15px;
    line-height: 1.5;
    max-width: 56ch;
  }

  /* RELATED */
  .related-grid {
    padding: 0 40px 64px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }

/* ============ About.html ============ */
.about-hero {
    padding: 64px 40px 48px;
    border-bottom: 1.5px solid var(--ink);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
  }
  .about-hero h1 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 156px;
    line-height: 0.88;
    letter-spacing: -0.045em;
    margin: 0;
  }
  .about-hero h1 em { font-style: italic; font-weight: 500; color: var(--signal); }
  .about-hero .intro {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 26px;
    line-height: 1.35;
    color: var(--ink-2);
    max-width: 32ch;
  }
  .about-hero .intro em { color: var(--signal); font-style: italic; }

  /* PORTRAIT BLOCK */
  .portrait {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 0;
    border-bottom: 1.5px solid var(--ink);
  }
  .portrait .pic {
    aspect-ratio: 4 / 5;
    background: var(--ink);
    border-right: 1.5px solid var(--ink);
    position: relative;
    overflow: hidden;
  }
  .portrait .pic::before {
    /* abstract self-portrait — duotone halftone shape */
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 50% 38%, var(--paper) 0, var(--paper) 24%, transparent 25%),
      radial-gradient(circle at 50% 78%, var(--paper) 0, var(--paper) 36%, transparent 37%),
      var(--ink);
  }
  .portrait .pic::after {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,59,31,0.4) 18%, transparent 20%);
    background-size: 10px 10px;
    mix-blend-mode: screen;
  }
  .portrait .pic .frame-meta {
    position: absolute; bottom: 18px; left: 18px; right: 18px;
    display: flex; justify-content: space-between;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244,244,240,0.7);
    z-index: 2;
  }
  .portrait .pic .frame-meta b { color: var(--paper); font-weight: 600; }
  .portrait .pic .sig-mark {
    position: absolute; top: 18px; left: 18px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 72px;
    color: var(--signal);
    line-height: 1;
    z-index: 2;
  }

  .portrait .bio {
    padding: 48px 48px 40px;
    display: flex; flex-direction: column;
    gap: 22px;
  }
  .portrait .bio .lbl {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--signal);
    font-weight: 600;
  }
  .portrait .bio h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 64px;
    line-height: 0.95;
    letter-spacing: -0.035em;
    margin: 0;
  }
  .portrait .bio h2 em { font-style: italic; font-weight: 500; color: var(--signal); }
  .portrait .bio p {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
    max-width: 56ch;
  }
  .portrait .bio p em { color: var(--signal); font-style: italic; }
  .portrait .bio p a { color: var(--ink); border-bottom: 1.5px solid var(--signal); }

  /* WHAT I WRITE ABOUT */
  .topic-blocks {
    border-bottom: 1.5px solid var(--ink);
  }
  .topic-blocks .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .topic-blocks .block {
    padding: 40px 32px;
    border-right: 1.5px solid var(--ink);
    border-top: 1.5px solid var(--ink);
    display: flex; flex-direction: column;
    gap: 18px;
    min-height: 320px;
    position: relative;
    background: var(--paper);
    transition: background-color 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .topic-blocks .block:not([style*="background"]):hover {
    background: var(--paper-2);
  }
  .topic-blocks .block a.see {
    transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
                background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
  }
  .topic-blocks .block a.see:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 59, 31, 0.25);
    background: var(--signal) !important;
    border-color: var(--signal) !important;
    color: var(--ink) !important;
  }
  .topic-blocks .block:nth-child(3n) { border-right: 0; }
  .topic-blocks .block:nth-child(1), .topic-blocks .block:nth-child(2), .topic-blocks .block:nth-child(3) {
    border-top: 0;
  }
  .topic-blocks .block .num {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--signal);
    font-weight: 600;
  }
  .topic-blocks .block h3 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0;
  }
  .topic-blocks .block h3 em { font-style: italic; font-weight: 500; color: var(--steel); }
  .topic-blocks .block p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--steel-2);
    margin: 0;
    max-width: 32ch;
  }
  .topic-blocks .block .row {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
  }
  .topic-blocks .block .row b { color: var(--ink); font-weight: 600; }
  .topic-blocks .block .row a { color: var(--ink); }
  .topic-blocks .block .row a:hover { color: var(--signal); }

  /* WHAT I'M ON ABOUT (manifesto) */
  .manifesto {
    background: var(--ink);
    color: var(--paper);
    padding: 80px 40px;
    border-bottom: 1.5px solid var(--ink);
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 56px;
  }
  .manifesto .lbl {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--signal);
    font-weight: 600;
  }
  .manifesto h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 80px;
    line-height: 0.95;
    letter-spacing: -0.035em;
    margin: 8px 0 0;
    max-width: 14ch;
  }
  .manifesto h2 em { font-style: italic; font-weight: 500; color: var(--signal); }
  .manifesto .principles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
  .manifesto .principles .p {
    display: flex; flex-direction: column; gap: 14px;
  }
  .manifesto .principles .p .pn {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 64px;
    color: var(--signal);
    line-height: 1;
  }
  .manifesto .principles .p h3 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
  }
  .manifesto .principles .p p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(244,244,240,0.75);
  }

  /* COLOPHON / TOOLS */
  .colophon {
    padding: 56px 40px;
    border-bottom: 1.5px solid var(--ink);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
  .colophon h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 64px;
    line-height: 0.95;
    letter-spacing: -0.035em;
    margin: 0 0 24px;
  }
  .colophon h2 em { font-style: italic; font-weight: 500; color: var(--signal); }
  .colophon .list-pairs {
    display: grid;
    gap: 0;
  }
  .colophon .list-pairs .pair {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    align-items: center;
  }
  .colophon .list-pairs .pair:last-child { border-bottom: 1px solid var(--line); }
  .colophon .list-pairs .k {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--steel);
  }
  .colophon .list-pairs .v {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.015em;
  }
  .colophon .list-pairs .v em { font-style: italic; font-weight: 500; color: var(--signal); }
  .colophon .list-pairs .badge {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
  }

  /* CONTACT */
  .contact-band {
    padding: 80px 40px;
    background: var(--signal);
    color: var(--ink);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
  }
  .contact-band h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 96px;
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin: 0;
  }
  .contact-band h2 em { font-style: italic; font-weight: 500; }
  .contact-band .channels {
    display: flex; flex-direction: column; gap: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: right;
  }
  .contact-band .channels a {
    color: var(--ink);
    padding: 8px 14px;
    border: 1.5px solid var(--ink);
    display: inline-flex; gap: 14px; justify-content: space-between; min-width: 240px;
  }
  .contact-band .channels a:hover { background: var(--ink); color: var(--signal); }


/* ───────────────────────────────────────────────────────
   RESPONSIVE LAYER + ADMIN-RENDERED CONTENT STYLES
   added on top of the original fixed-1440 mockup
   ─────────────────────────────────────────────────────── */

html, body { width: 100%; }
body { overflow-x: hidden; }

.page {
  width: 100%;
  max-width: 1440px;
}

/* Hamburger drawer (mobile nav) */
.nav-toggle { display: none; }
.nav-burger { display: none; }

/* Reading progress (post page) - ruler style */
.reading-progress {
  height: 4px;
  background: var(--paper-2);
  position: sticky;
  top: 64px;
  z-index: 40;
  border-bottom: 1.5px solid var(--ink);
  overflow: visible;
}
.reading-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0px, var(--ink) 1px, transparent 1px, transparent 8px);
  opacity: 0.18;
  pointer-events: none;
}
.reading-progress > span {
  display: block;
  height: 100%;
  /* No CSS transition — updated frame-synchronously via rAF for real-time scroll tracking */
  background: linear-gradient(90deg, var(--signal) 0%, #ff6b4a 100%);
  width: 0;
  will-change: width;
  transform: translateZ(0); /* GPU-composited layer */
}

/* User-uploaded prose: figures, images, captions, marks, pull-quotes, drop-cap */
.prose figure {
  margin: 44px 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding: 18px 0;
}
.prose figure img {
  width: 100%;
  height: auto;
  display: block;
}
.prose figure[data-align="left"] {
  float: left; width: 50%; margin: 12px 28px 20px 0;
  border-left: 0; border-right: 0;
}
.prose figure[data-align="center"] {
  margin-left: auto; margin-right: auto; max-width: 80%;
}
.prose figure[data-align="full"] {
  margin-left: -40px; margin-right: -40px;
  max-width: none;
  padding: 0;
  border: 0;
}
.prose figure[data-align="full"] img,
.prose figure[data-align="full"] .art {
  width: 100%;
}
.prose figure figcaption {
  margin-top: 14px;
  padding: 0 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
.prose mark {
  background: linear-gradient(180deg, transparent 55%, rgba(255,59,31,0.35) 55%);
  color: inherit;
  padding: 0 2px;
}
.prose aside.pull-quote {
  margin: 48px -40px;
  padding: 48px 40px;
  background: var(--ink);
  color: var(--paper);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  border-left: 6px solid var(--signal);
}
.prose aside.pull-quote em { font-weight: 700; color: var(--signal); }
.prose blockquote {
  margin: 28px 0;
  padding: 8px 22px;
  border-left: 3px solid var(--signal);
  font-style: italic;
  color: var(--ink-2);
}
.prose ul, .prose ol {
  padding-left: 22px;
  margin: 0 0 22px;
  line-height: 1.65;
}
.prose ul li, .prose ol li { margin: 6px 0; }
.prose .drop-cap {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  color: var(--signal);
  font-size: 96px;
  line-height: 0.85;
  float: left;
  margin: 6px 14px 0 -4px;
  letter-spacing: -0.04em;
}
.prose code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 1px 6px;
  border: 1px solid var(--line);
}
.prose pre {
  background: var(--ink);
  color: var(--paper);
  padding: 22px 24px;
  overflow-x: auto;
  margin: 28px 0;
  border-left: 4px solid var(--signal);
  font-family: "JetBrains Mono", monospace;
  font-size: 13.5px;
  line-height: 1.6;
}
.prose pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}
.prose h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 40px 0 16px;
}
.prose h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 32px 0 12px;
}

/* When a drop-cap is used, kill the automatic ::first-letter */
.prose > p:first-child:has(.drop-cap)::first-letter {
  all: unset;
}

/* Fluid type for huge display elements */
.masthead .wordmark { font-size: clamp(64px, 14vw, 200px) !important; line-height: 0.82; }
.masthead .wordmark .slash { height: clamp(48px, 9.5vw, 140px) !important; width: clamp(8px, 1.1vw, 16px) !important; }
.hero h1 { font-size: clamp(40px, 6.6vw, 92px) !important; }
.post-head h1 { font-size: clamp(40px, 9vw, 132px) !important; }
.archive-head h1 { font-size: clamp(52px, 11vw, 156px) !important; }
.about-hero h1 { font-size: clamp(52px, 11vw, 156px) !important; }
.topic-side .topic-name { font-size: clamp(52px, 7vw, 88px) !important; }
.newsletter .nl-head h2 { font-size: clamp(38px, 6vw, 72px) !important; }
.section-title h2 { font-size: clamp(28px, 4vw, 48px) !important; }
.year-band h2 { font-size: clamp(40px, 5.5vw, 64px) !important; }
.portrait .bio h2 { font-size: clamp(36px, 5vw, 64px) !important; }

/* ── ≤ 1100px: collapse hero, stack topic strips ───── */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr !important; }
  .hero .h-image { border-right: 0; border-bottom: 1.5px solid var(--ink); }
  .hero .h-image .art { min-height: 360px; }
  .topic-strip { grid-template-columns: 1fr !important; }
  .topic-side { border-right: 0 !important; min-height: auto; }
  .topic-cards { grid-template-columns: repeat(2, 1fr) !important; border-right: 0 !important; }
  .topic-cards .tcard:nth-child(2) { border-right: 0; }
  .topic-cards .tcard:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .newsletter { grid-template-columns: 1fr; padding: 56px 32px; gap: 32px; }
  .post-body { grid-template-columns: 1fr !important; gap: 24px !important; padding: 48px 32px !important; }
  .post-body .gutter-left, .post-body .gutter-right { position: static; display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer .now { grid-column: 1 / -1; }
  .related-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .post-head .byline-row { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .about-hero { grid-template-columns: 1fr; }
  .portrait { grid-template-columns: 1fr !important; }
  .portrait .pic { border-right: 0; border-bottom: 1.5px solid var(--ink); }
  .topic-blocks .grid { grid-template-columns: repeat(2, 1fr) !important; }
  .topic-blocks .block:nth-child(3n) { border-right: 1.5px solid var(--ink); }
  .topic-blocks .block:nth-child(2n) { border-right: 0 !important; }
  .archive-head { grid-template-columns: 1fr; gap: 16px; }
  .archive-head .meta { text-align: left; }
  /* Cameras strip: DOM order is cards-first for desktop right-side panel,
     but on mobile the sidebar (title) must appear above the cards */
  .topic-strip .topic-side { order: -1; }
  /* Nav: collapse to hamburger at this same 1100px breakpoint */
  .nav {
    grid-template-columns: 1fr auto;
    padding: 0 20px;
  }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--ink);
    background: var(--paper);
    cursor: pointer;
    font-family: "JetBrains Mono", monospace;
    font-size: 18px;
    color: var(--ink);
  }
  .nav .end { display: none; }
  .nav .links {
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1.5px solid var(--ink);
    flex-direction: column;
    padding: 12px 20px;
    gap: 0;
    z-index: 30;
  }
  .nav .links a { padding: 14px 12px; border-bottom: 1px solid var(--line); }
  .nav .links a.active { padding-left: 22px; }
  .nav-toggle:checked ~ .links { display: flex; }
  .eyebrow-bar { padding: 12px 20px; font-size: 9.5px; gap: 12px; flex-wrap: wrap; }
}

/* ── ≤ 720px: archive list stacks, post inner padding ─ */
@media (max-width: 720px) {
  .masthead { padding: 20px 20px 0; }
  .masthead .word-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .masthead .issue-card { width: 100%; min-width: 0; }
  .section-title { grid-template-columns: 1fr; padding: 36px 20px 16px; gap: 8px; }
  .section-title .view-all, .section-title .count { padding-bottom: 0; }
  .section-body { padding: 24px 20px; }
  .grid-3 { grid-template-columns: 1fr; gap: 28px; }
  .topic-cards { grid-template-columns: 1fr !important; }
  .topic-cards .tcard { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .topic-cards .tcard:last-child { border-bottom: 0; }
  .from-archive .list-row {
    grid-template-columns: 1fr;
    grid-row-gap: 6px;
    padding: 18px 20px;
  }
  .from-archive .list-row .lr-arrow,
  .from-archive .list-row .lr-time { display: none; }
  .list .row {
    grid-template-columns: 1fr;
    padding: 16px 20px;
    gap: 6px;
  }
  .list .row .r-num, .list .row .r-arrow, .list .row .r-reads { display: none; }
  .post-head { padding: 32px 20px 24px; gap: 18px; }
  .post-head .byline-row { grid-template-columns: 1fr 1fr !important; padding-top: 18px; }
  .post-body { padding: 32px 20px !important; }
  .prose { font-size: 17px; }
  .prose aside.pull-quote { margin: 32px -20px; padding: 32px 20px; }
  .prose figure[data-align="full"] { margin-left: -20px; margin-right: -20px; }
  .prose figure[data-align="left"] { float: none; width: 100%; margin: 24px 0; }
  .footer { padding: 48px 20px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; }
  .footer-bottom { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .footer-bottom .right, .footer-bottom .center { text-align: left; }
  .pull-quote { margin: 32px -20px !important; padding: 32px 20px !important; }
  .pull-quote .q { font-size: 28px !important; padding-top: 18px !important; }
  .post-end { grid-template-columns: 1fr; padding: 28px 20px; gap: 16px; }
  .author-card { grid-template-columns: 80px 1fr; padding: 28px 20px; gap: 18px; }
  .author-card .actions { grid-column: 1 / -1; }
  .author-card .avatar { width: 80px; height: 80px; font-size: 42px; }
  .related-grid { grid-template-columns: 1fr !important; padding: 0 20px 48px; gap: 28px; }
  .archive-head { padding: 32px 20px 24px; }
  .filters { padding: 14px 20px; grid-template-columns: 1fr; gap: 10px; }
  .filters .sort { flex-wrap: wrap; gap: 8px; }
  .year-band { padding: 22px 20px 10px; }
  .pagination { grid-template-columns: 1fr; padding: 28px 20px; gap: 12px; }
  .pagination .left, .pagination .right { text-align: left; }
  .about-hero { padding: 36px 20px 28px; gap: 20px; }
  .portrait .bio { padding: 28px 20px; }
  .topic-blocks .grid { grid-template-columns: 1fr !important; }
  .topic-blocks .block { border-right: 0 !important; min-height: auto; padding: 28px 20px; }
  .newsletter { padding: 40px 20px; }
  .hero .h-text { padding: 28px 20px; gap: 18px; }
  .hero .h-text::before { right: 20px; }
  /* On mobile ensure cameras topic-side (title panel) stays above cards */
  .topic-strip .topic-side { order: -1; }
}

@media (max-width: 480px) {
  .ticker { font-size: 16px; padding: 12px 0; }
  .eyebrow-bar { font-size: 9px; }
}

/* ── 404 ───────────────────────────────────────────── */
.notfound {
  padding: 80px 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: center;
  min-height: 50vh;
}
.notfound .notfound-code {
  text-align: center;
}
.notfound .nf-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 8px;
}
.notfound h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(80px, 18vw, 200px);
  margin: 0;
  letter-spacing: -0.05em;
  line-height: 0.85;
}
.notfound h1 em { color: var(--signal); font-style: italic; font-weight: 500; }
.notfound .notfound-body {
  max-width: 48ch;
}
.notfound .nf-lead {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.notfound .nf-hint {
  color: var(--steel-2);
  margin: 0 0 24px;
  line-height: 1.5;
}
.notfound .nf-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .notfound { grid-template-columns: 1fr; text-align: center; padding: 48px 20px; gap: 24px; }
  .notfound .nf-actions { justify-content: center; }
  .notfound .notfound-body { max-width: none; }
}

/* ── Posted image (when post has an uploaded cover) ── */
.post-hero img.cover {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-image img,
.tc-image img,
.h-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.card-image img,
.tc-image img {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card:hover .card-image img,
.tcard:hover .tc-image img {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .card-image img, .tc-image img {
    transition: none;
    transform: none !important;
  }
}

/* Pin post-body columns so the layout doesn't reflow when the TOC is empty */
.post-body > .gutter-left  { grid-column: 1; }
.post-body > .prose        { grid-column: 2; }
.post-body > .gutter-right { grid-column: 3; }
@media (max-width: 1100px) {
  .post-body > .gutter-left,
  .post-body > .prose,
  .post-body > .gutter-right { grid-column: auto; }
}

/* Admin strip on post pages (replaces old draft-banner) */
.admin-strip {
  background: var(--ink);
  color: var(--paper);
  padding: 10px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--ink);
  position: sticky;
  top: 64px;
  z-index: 35;
}
.admin-strip.is-draft { background: var(--signal); color: var(--ink); }
.admin-strip .dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--signal);
  border-radius: 50%;
  margin-right: 10px;
  animation: blink 1.6s infinite;
}
.admin-strip.is-draft .dot { background: var(--ink); }
.admin-strip b { font-weight: 700; }
.admin-strip .right { display: inline-flex; gap: 10px; }
.admin-strip a {
  color: inherit;
  border: 1.5px solid currentColor;
  padding: 6px 12px;
  text-decoration: none;
  white-space: nowrap;
}
.admin-strip a:hover { background: currentColor; }
.admin-strip a:hover * { color: var(--ink); }
.admin-strip a.primary {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--ink);
}
.admin-strip.is-draft a.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--signal);
}
.admin-strip a.primary:hover { background: var(--paper); border-color: var(--paper); }
@media (max-width: 720px) {
  .admin-strip { padding: 10px 20px; font-size: 10px; flex-wrap: wrap; gap: 8px; }
  .admin-strip .right { width: 100%; }
}

/* When TOC is empty, collapse the left gutter so prose stays centered */
.post-body.no-toc {
  grid-template-columns: 1fr 220px !important;
}
.post-body.no-toc > .prose { grid-column: 1; }
.post-body.no-toc > .gutter-right { grid-column: 2; }
@media (max-width: 1100px) {
  .post-body.no-toc { grid-template-columns: 1fr !important; }
  .post-body.no-toc > .prose,
  .post-body.no-toc > .gutter-right { grid-column: auto; }
}

/* ──────────────────────────────────────────────────────
   POLISH PASS · phase 1
   bug fix + visual polish + reading basics
   ────────────────────────────────────────────────────── */

/* §1 — Cameras-dot overflow: contain the topic-name to the panel */
.topic-side { container-type: inline-size; }
.topic-side .topic-name {
  font-size: clamp(44px, min(7vw, 13cqi), 72px) !important;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* §2 — Scroll reveal (CSS half) */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* §2 — Card lift + smoother title transition */
.card, .tcard {
  transition: transform 0.18s ease, background 0.18s ease;
}
.card:hover, .tcard:hover { transform: translateY(-2px); }
.card .card-title,
.tcard h3,
.list-row .lr-title,
.list .row .r-title {
  transition: color 0.18s ease;
}

/* §2 — Page fade-in */
@keyframes mb-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  body { animation: mb-page-in 220ms ease-out both; }
}

/* §2 — Visible focus ring for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* §2 — Animated underline sweep on prose links */
.prose a {
  background-image: linear-gradient(var(--signal), var(--signal));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
  transition: background-size 0.18s ease, color 0.18s ease;
  padding-bottom: 1px;
  border-bottom: 0 !important;
}
.prose a:hover {
  color: var(--signal);
  background-size: 100% 2px;
}

/* §2 — "Read" state on archive rows + cards */
.is-read { opacity: 0.55; }
.is-read::after {
  content: "✓ read";
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-left: 8px;
  white-space: nowrap;
}
.list-row.is-read::after,
.list .row.is-read::after {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
}
.list-row, .list .row { position: relative; }
.card.is-read .card-title::after,
.tcard.is-read h3::after { /* keep cards subtler — no extra chip, just dim */
  content: "";
}

/* §3 — Hanging punctuation in prose */
.prose p, .prose blockquote { hanging-punctuation: first last; }

/* §3 — Code-block copy button wrapper */
.code-wrap { position: relative; }
.code-wrap pre { margin: 28px 0; }
.code-wrap .code-copy {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(244,244,240,0.08);
  color: var(--paper);
  border: 1px solid rgba(244,244,240,0.2);
  padding: 4px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.code-wrap .code-copy:hover { background: var(--signal); color: var(--ink); border-color: var(--signal); }

/* §3 — Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(11,11,15,0);
  backdrop-filter: blur(0px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), backdrop-filter 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.3s;
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: rgba(11,11,15,0.94);
  backdrop-filter: blur(6px);
}
.lightbox figure {
  margin: 0;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lightbox.open figure {
  transform: scale(1);
}
.lightbox img {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.lightbox figcaption {
  color: rgba(244,244,240,0.8);
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  max-width: 60ch;
}
.lightbox .lb-close {
  position: absolute;
  top: 24px; right: 24px;
  width: 44px; height: 44px;
  background: transparent;
  border: 1.5px solid var(--paper);
  color: var(--paper);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox .lb-close:hover { background: var(--signal); border-color: var(--signal); color: var(--ink); }

/* §3 — Better drop-cap interaction: suppress auto-first-letter if explicit drop-cap is present */
.prose > p:first-child:has(.drop-cap)::first-letter { all: unset; font-weight: inherit; }

/* §4 — Search palette */
.palette {
  position: fixed; inset: 0;
  background: rgba(11,11,15,0);
  backdrop-filter: blur(0px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), backdrop-filter 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.3s;
}
.palette.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: rgba(11,11,15,0.6);
  backdrop-filter: blur(4px);
}
.palette-modal {
  width: min(640px, 92vw);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.palette.open .palette-modal {
  transform: scale(1);
}
.palette-suggestions {
  padding: 14px 24px;
  border-bottom: 1.5px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--paper-2);
}
.palette-suggestions-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  width: 100%;
  margin-bottom: 6px;
  font-weight: 600;
}
.palette-input {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper);
  padding: 22px 24px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  outline: 0;
}
.palette-input::placeholder { color: var(--steel); }
.palette-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 50vh;
  overflow-y: auto;
}
.palette-results mark {
  background: var(--signal);
  color: var(--ink);
  font-weight: inherit;
  padding: 0 2px;
}
.palette-results li {
  display: grid;
  grid-template-columns: 90px 1fr;
  grid-column-gap: 14px;
  align-items: baseline;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.palette-results li:hover, .palette-results li.active {
  background: var(--ink);
  color: var(--paper);
}
.palette-results li:hover .pr-cat, .palette-results li.active .pr-cat { color: var(--signal); }
.palette-results .pr-cat {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
  grid-row: 1 / 3;
}
.palette-results .pr-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.palette-results .pr-deck {
  font-size: 12.5px;
  color: inherit;
  opacity: 0.7;
  line-height: 1.4;
  margin-top: 2px;
}
.palette-hint {
  padding: 10px 24px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}

/* Make the nav search badge feel clickable */
.nav .end .search { cursor: pointer; }

/* ──────────────────────────────────────────────────────
   §6 — DARK MODE
   The tokens are inverted; signal-orange holds across both.
   ────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --ink:        #F4F4F0;
  --ink-2:      #E2E1D9;
  --steel:      #8E9098;
  --steel-soft: #4A4D55;
  --steel-2:    #BFC2CA;
  --signal:     #FF5A3F;   /* a hair lighter for dark bg contrast */
  --paper:      #0B0B0F;
  --paper-2:    #16161C;
  --paper-3:    #1F1F26;
  --line:       rgba(244,244,240,0.16);
  --line-soft:  rgba(244,244,240,0.08);
  --line-strong:rgba(244,244,240,0.85);
}
:root[data-theme="dark"] body {
  background: var(--paper);
  color: var(--ink);
}
body, .nav, .footer, .eyebrow-bar, .ticker-wrap, .admin-strip, .toolbar, .toolbar button, .pull-quote, .prose code, .prose pre, input, textarea, select {
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

/* Component overrides for dark mode — footer stays inverted (now light) */
:root[data-theme="dark"] .footer {
  background: var(--paper-2);
  color: var(--ink);
  border-top-color: var(--line);
}
:root[data-theme="dark"] .footer .col a { color: rgba(244,244,240,0.85); }
:root[data-theme="dark"] .footer .now {
  background: rgba(244,244,240,0.04);
  border-color: var(--line);
}
:root[data-theme="dark"] .ticker-wrap {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line);
}
:root[data-theme="dark"] .topic-side {
  background: var(--paper-2);
}
:root[data-theme="dark"] .topic-side p { color: rgba(244,244,240,0.7); }
:root[data-theme="dark"] .topic-side .stats { color: rgba(244,244,240,0.55); }
:root[data-theme="dark"] .newsletter {
  background: var(--paper-2);
}
:root[data-theme="dark"] .newsletter .nl-head p,
:root[data-theme="dark"] .newsletter .nl-form .note { color: rgba(244,244,240,0.65); }
:root[data-theme="dark"] .nav { background: var(--paper); border-bottom-color: var(--line); }
:root[data-theme="dark"] .eyebrow-bar { border-bottom-color: var(--line); }
:root[data-theme="dark"] .from-archive .list-row { border-bottom-color: var(--line); }
:root[data-theme="dark"] .from-archive .list-row:hover { background: var(--paper-2); }
:root[data-theme="dark"] .filters { background: var(--paper-2); }
:root[data-theme="dark"] .meta-panel { background: var(--paper-2); }
:root[data-theme="dark"] .nav .end .search { background: var(--paper); }
:root[data-theme="dark"] .toolbar { background: var(--paper); border-color: var(--line); }
:root[data-theme="dark"] .toolbar button { background: var(--paper); }
:root[data-theme="dark"] .pull-quote { background: var(--paper-2); color: var(--ink); }
:root[data-theme="dark"] .prose aside.pull-quote { background: var(--paper-2); color: var(--ink); }
:root[data-theme="dark"] .prose pre { background: var(--paper-2); }
:root[data-theme="dark"] .prose code {
  background: var(--paper-2);
  border-color: var(--line);
}
:root[data-theme="dark"] .pull-quote .mark { color: var(--signal); }
:root[data-theme="dark"] .author-card .avatar { background: var(--paper-2); color: var(--ink); }
:root[data-theme="dark"] .admin-strip { background: var(--paper-2); color: var(--ink); }
:root[data-theme="dark"] .admin-strip.is-draft { background: var(--signal); color: var(--paper); }
:root[data-theme="dark"] .admin-strip.is-draft .dot { background: var(--paper); }

/* Theme toggle button */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover { background: var(--ink); color: var(--paper); }
.theme-toggle .sun, .theme-toggle .moon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms ease, opacity 220ms ease;
}
:root[data-theme="light"] .theme-toggle .moon,
:root:not([data-theme="dark"]) .theme-toggle .moon { transform: translateY(110%) rotate(90deg); opacity: 0; }
:root[data-theme="dark"] .theme-toggle .sun { transform: translateY(-110%) rotate(90deg); opacity: 0; }
@media (max-width: 900px) {
  .theme-toggle { display: none; }
}

/* §3 — Time-left floating chip */
.time-left {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 100;
  animation: mb-page-in 220ms ease-out both;
}
.time-left .tl-min, .time-left .tl-pct { color: var(--signal); font-weight: 600; }
:root[data-theme="dark"] .time-left { background: var(--paper-2); color: var(--ink); border-color: var(--line); }
@media (max-width: 720px) {
  .time-left { right: 12px; bottom: 12px; font-size: 10px; padding: 8px 12px; }
}

/* §7 — Hero rotator (grid-stack: every slide occupies the same cell, container
   sizes to the tallest so rotation never causes a height jump) */
.hero-rotator {
  display: grid;
  grid-template-areas: "stack";
  grid-template-columns: minmax(0, 1fr);
  isolation: isolate;
}
.hero-rotator .hero-slide {
  grid-area: stack;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 600ms ease;
}
.hero-rotator .hero-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.hero-rotator .hero-slide .h-image {
  border-right: 1.5px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.hero-rotator .hero-slide .h-image .art { height: 100%; min-height: 540px; }
.hero-rotator .hero-slide .h-text {
  padding: 40px 44px 36px;
  display: flex; flex-direction: column;
  gap: 24px;
  position: relative;
}
.hero-rotator .hero-slide .h-text::before {
  content: attr(data-featured-label);
  position: absolute; top: 0; right: 44px;
  background: var(--signal);
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  padding: 6px 12px;
}
.hero-rotator .hero-dots {
  grid-area: stack;
  align-self: end;
  justify-self: end;
  margin: 0 32px 24px 0;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.hero-rotator .hero-dot {
  width: 24px; height: 4px;
  background: rgba(11,11,15,0.2);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 220ms ease, transform 220ms ease;
}
.hero-rotator .hero-dot:hover { background: var(--ink); }
.hero-rotator .hero-dot.active { background: var(--signal); transform: scaleY(1.6); }
:root[data-theme="dark"] .hero-rotator .hero-dot { background: rgba(244,244,240,0.25); }
:root[data-theme="dark"] .hero-rotator .hero-dot:hover { background: var(--ink); }
@media (max-width: 1100px) {
  .hero-rotator .hero-slide { grid-template-columns: 1fr; }
  .hero-rotator .hero-slide .h-image { border-right: 0; border-bottom: 1.5px solid var(--ink); }
  .hero-rotator .hero-slide .h-image .art { min-height: 360px; }
}

/* §8 — Reactions */
.reactions {
  border-top: 1.5px solid var(--ink);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.reactions .rx-pre {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
}
.reactions .rx-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.reactions .rx-btn {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  padding: 12px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.reactions .rx-btn:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); }
.reactions .rx-btn .rx-count {
  background: var(--paper-2);
  color: var(--ink);
  padding: 2px 8px;
  font-weight: 600;
  min-width: 22px;
  text-align: center;
}
.reactions .rx-btn:hover .rx-count { background: var(--signal); color: var(--ink); }
.reactions .rx-btn.voted {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--ink);
  cursor: default;
}
.reactions .rx-btn.voted .rx-count { background: var(--ink); color: var(--signal); }
@media (max-width: 720px) {
  .reactions { padding: 32px 20px; }
  .reactions .rx-btn { padding: 10px 14px; font-size: 10.5px; }
}

/* ──────────────────────────────────────────────────────
   §8 — Music player widget (replaces static "now playing")
   ────────────────────────────────────────────────────── */
.music-player.mp-hidden { display: none !important; }

/* Header row */
.music-player .mp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.music-player .mp-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.music-player .mp-track-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,244,240,0.45);
}
.music-player .mp-close {
  background: transparent;
  border: 0;
  color: rgba(244,244,240,0.55);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s ease;
}
.music-player .mp-close:hover { color: var(--signal); }
.music-player .mp-status {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Now-playing row: cover art + track info */
.music-player .mp-now {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.music-player .mp-cover {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(244,244,240,0.08);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(244,244,240,0.15);
  opacity: 0;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}
.music-player .mp-info {
  min-width: 0;
}

/* Progress bar + timestamps */
.music-player .mp-progress {
  margin-top: 4px;
  height: 3px;
  background: rgba(244,244,240,0.14);
  cursor: pointer;
  position: relative;
  transition: height 0.15s ease;
}
.music-player .mp-progress:hover { height: 5px; }
.music-player .mp-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--signal);
  transition: width 0.25s linear;
  pointer-events: none;
}
.music-player .mp-time-current,
.music-player .mp-time-total {
  position: absolute;
  top: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: rgba(244,244,240,0.4);
  pointer-events: none;
}
.music-player .mp-time-current { left: 0; }
.music-player .mp-time-total   { right: 0; }

/* Controls row */
.music-player .mp-controls {
  margin-top: 20px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.music-player .mp-btn {
  background: transparent;
  border: 1px solid rgba(244,244,240,0.18);
  color: var(--paper);
  width: 28px; height: 28px;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.music-player .mp-btn:hover { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.music-player .mp-btn.active { background: rgba(255,59,31,0.25); border-color: var(--signal); color: var(--signal); }
.music-player .mp-play { width: 34px; height: 34px; font-size: 13px; }

/* Volume slider fills remaining space */
.music-player .mp-volume {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(244,244,240,0.14);
  height: 3px;
  flex: 1;
  min-width: 40px;
  outline: 0;
  margin: 0 4px;
  cursor: pointer;
  border-radius: 0;
}
.music-player .mp-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--signal);
  width: 11px; height: 11px;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
}
.music-player .mp-volume::-moz-range-thumb {
  background: var(--signal);
  width: 11px; height: 11px;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
}

/* Track dot navigation */
.music-player .mp-track-dots {
  display: flex;
  gap: 5px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.music-player .mp-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(244,244,240,0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.music-player .mp-dot:hover { background: rgba(244,244,240,0.6); transform: scale(1.3); }
.music-player .mp-dot.active { background: var(--signal); transform: scale(1.15); }

/* EQ bars: animate only when playing */
.music-player .bars { margin-top: 12px; }
.music-player.is-paused .bars span {
  animation-play-state: paused;
  height: 25% !important;
  opacity: 0.35;
}
.music-player.is-playing .bars span {
  animation-play-state: running;
  opacity: 1;
}

/* Dark mode overrides (footer is always dark, so most styles inherit fine) */
:root[data-theme="dark"] .music-player .mp-btn {
  border-color: var(--line);
  color: var(--ink);
}

/* Settings page: file-upload action row */
.settings-form .sf-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ──────────────────────────────────────────────────────
   §13 — Global toast notifications
   ────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 84px;
  right: 24px;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(420px, 92vw);
}
.toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 220ms ease, transform 220ms ease;
  cursor: pointer;
}
.toast.is-shown { opacity: 1; transform: translateX(0); }
.toast-ok { border-color: var(--signal); }
.toast-ok::before { content: "✓"; color: var(--signal); font-size: 14px; }
.toast-err { border-color: var(--signal); background: var(--signal); color: var(--ink); }
.toast-err::before { content: "✗"; font-size: 14px; }
.toast-info::before { content: "●"; color: var(--signal); font-size: 14px; }
.toast .toast-action {
  margin-left: 8px;
  background: var(--signal);
  color: var(--ink);
  border: 0;
  padding: 4px 10px;
  font: inherit;
  cursor: pointer;
}
.toast .toast-action:hover { background: var(--paper); }
@media (max-width: 720px) {
  .toast-container { right: 12px; top: 72px; }
  .toast { font-size: 10px; padding: 10px 14px; }
}

/* ──────────────────────────────────────────────────────
   §15 — Final polish + accessibility
   ────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--ink);
  color: var(--signal);
  padding: 12px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 2000;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* Newsletter thank-you state */
.nl-thanks {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--signal);
  padding: 18px 20px;
  border: 1.5px solid var(--signal);
}

/* Reactions buttons reach ~44px touch target */
@media (max-width: 720px) {
  .reactions .rx-btn { min-height: 44px; }
  .hero-rotator .hero-dot { height: 12px; }
  .feature-toggle { width: 32px; height: 32px; }
  .theme-toggle { width: 36px; height: 36px; }
}

/* Higher-contrast focus on dark mode */
:root[data-theme="dark"] a:focus-visible,
:root[data-theme="dark"] button:focus-visible,
:root[data-theme="dark"] input:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* Editor: cover preview better collapse */
#f-cover-preview { max-height: 220px; object-fit: cover; }

/* Reduced motion: kill animations across the board */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .ticker { animation: none !important; }
}

/* ──────────────────────────────────────────────────────
   §16/1 — Selection, caret, micro-states
   ────────────────────────────────────────────────────── */

/* Text selection — always signal-orange, always dark text on top */
::selection { background: var(--signal); color: #0B0B0F; text-shadow: none; }
::-moz-selection { background: var(--signal); color: #0B0B0F; text-shadow: none; }

/* Caret in inputs / textareas / TipTap editor */
input, textarea, [contenteditable] { caret-color: var(--signal); }

/* Disabled buttons — same across the site */
button:disabled, .btn:disabled, [aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tactile press response on the main interactive elements */
.btn:active, .chip:active, .rx-btn:active, .feature-toggle:active,
.theme-toggle:active, .mp-btn:active, .nav-burger:active,
.toolbar button:active, .palette-results li:active,
.hero-dot:active {
  transform: scale(0.97);
}

/* Loading dot — a CSS-only pulsing brand-color indicator */
.loading-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--signal);
  margin: 6px;
  vertical-align: middle;
  animation: mb-pulse 1s ease-in-out infinite alternate;
}
.loading-dot::after {
  content: " loading…";
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-left: 12px;
}
@keyframes mb-pulse {
  from { transform: scale(0.7); opacity: 0.55; }
  to   { transform: scale(1.2); opacity: 1; }
}

/* Brand-tinted scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--steel);
  border: 2px solid var(--paper);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--signal); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { border-color: var(--paper); }

/* Skip-link revealed only for keyboard users */
.skip-link { top: -100px; }
.skip-link:focus, .skip-link:focus-visible { top: 0; }

/* ──────────────────────────────────────────────────────
   §16/2 — Drawer slide, reading-progress stacking, print
   ────────────────────────────────────────────────────── */

/* Smooth mobile drawer */
@media (max-width: 900px) {
  .nav .links {
    display: flex !important;
    transform: translateY(-110%);
    transition: transform 220ms ease, opacity 220ms ease;
    opacity: 0;
    pointer-events: none;
  }
  .nav-toggle:checked ~ .links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* Reading-progress top offset — accounts for the sticky admin strip when present */
.admin-strip + .reading-progress {
  top: 102px;
}
@media (max-width: 720px) {
  .admin-strip + .reading-progress {
    top: 140px;
  }
}

/* ── Print stylesheet ───────────────────────────────── */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .nav, .footer, .eyebrow-bar, .ticker-wrap, .reading-progress,
  .post-hero, .post-end, .reactions, .related, .author-card,
  .admin-strip, .time-left, .music-player, .toast-container,
  .hero-rotator { display: none !important; }
  .page { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  .post-head { padding: 0 0 16pt !important; border-bottom: 1pt solid #000 !important; }
  .post-head h1 { font-size: 28pt !important; color: #000 !important; }
  .post-head h1 em { color: #000 !important; font-style: italic; }
  .post-head .deck { font-size: 13pt !important; color: #333 !important; }
  .post-head .byline-row { grid-template-columns: repeat(3, 1fr) !important; gap: 12pt !important; padding-top: 12pt !important; }
  .post-body { padding: 16pt 0 !important; grid-template-columns: 1fr !important; }
  .post-body .gutter-left, .post-body .gutter-right { display: none !important; }
  .prose { font-size: 11pt !important; line-height: 1.55 !important; color: #000 !important; max-width: none !important; }
  .prose h2 { font-size: 18pt !important; color: #000 !important; page-break-after: avoid; }
  .prose em { color: #000 !important; font-style: italic; }
  .prose a { color: #000 !important; text-decoration: underline; background: none !important; border-bottom: 0 !important; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .prose figure { page-break-inside: avoid; border: 0 !important; padding: 0 !important; }
  .prose figure[data-align="full"] { margin: 12pt 0 !important; }
  .prose mark { background: #ffe5d8 !important; color: #000 !important; }
  .prose aside.pull-quote { background: none !important; color: #000 !important; border-left: 2pt solid #000 !important; padding: 8pt 12pt !important; margin: 12pt 0 !important; }
  .prose pre { background: #f4f4f0 !important; color: #000 !important; border-left: 2pt solid #000 !important; }
  .prose .drop-cap { color: #000 !important; }
  /* hide art badges in print */
  .art, .art-tech, .art-cameras, .art-media, .art-innovation, .art-art, .art-music { display: none !important; }
}

/* ──────────────────────────────────────────────────────
   §16/3 — Mobile theme toggle + music reflow
   ────────────────────────────────────────────────────── */

/* Default: hide the in-drawer toggle on desktop */
.theme-toggle-mobile { display: none !important; }
.theme-toggle-mobile .tt-label {
  display: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .theme-toggle-mobile {
    display: inline-flex !important;
    width: auto;
    height: auto;
    padding: 14px 12px;
    gap: 10px;
    border: 0;
    border-top: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    justify-content: flex-start;
    margin-top: 4px;
  }
  .theme-toggle-mobile .tt-label { display: inline; }
  .theme-toggle-mobile .sun, .theme-toggle-mobile .moon {
    position: static;
    inset: auto;
    display: inline-block;
    transform: none !important;
    opacity: 1 !important;
    width: 18px;
    text-align: center;
  }
  :root[data-theme="dark"] .theme-toggle-mobile .sun,
  :root:not([data-theme="dark"]) .theme-toggle-mobile .moon { display: none; }
}

/* Music player — controls wrap below ~420px so the volume slider gets its own row */
@media (max-width: 460px) {
  .music-player .mp-controls {
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto;
    gap: 8px;
  }
  .music-player .mp-volume {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* ──────────────────────────────────────────────────────
   §16/4 — Dark-mode contrast fixes for "always-dark" UI
   These elements were originally `background: var(--ink); color: var(--paper)`.
   In dark mode the page becomes dark, so we keep them slightly darker (paper-2)
   but flip their text back to the light side (var(--ink) which is now light).
   ────────────────────────────────────────────────────── */

:root[data-theme="dark"] .footer .f-brand .mark {
  color: var(--ink);
}
:root[data-theme="dark"] .footer .f-brand .mark em {
  color: var(--signal);
}

:root[data-theme="dark"] .topic-side {
  color: var(--ink);
}
:root[data-theme="dark"] .topic-side .stats b {
  color: var(--ink);
}

:root[data-theme="dark"] .newsletter {
  color: var(--ink);
}
:root[data-theme="dark"] .newsletter .nl-head h2 {
  color: var(--ink);
}
:root[data-theme="dark"] .newsletter .nl-form .field {
  border-color: var(--ink);
}
:root[data-theme="dark"] .newsletter .nl-form input {
  color: var(--ink);
}
:root[data-theme="dark"] .newsletter .nl-form input::placeholder {
  color: rgba(244,244,240,0.4);
}

/* Hero "FEATURED" chip stays orange-on-dark in both themes */
:root[data-theme="dark"] .hero .h-text::before {
  background: var(--signal);
  color: #0B0B0F;
}

/* Topic-side "See all →" button — orange chip; in dark mode keep dark text */
:root[data-theme="dark"] .topic-side .see {
  color: #0B0B0F;
}

/* Post-hero caption block (lives below .post-hero) inherits page colors —
   verify the b stays light. */
:root[data-theme="dark"] .post-hero .caption b {
  color: var(--ink);
}

/* ──────────────────────────────────────────────────────
   §17/2e — Public prose: embedded audio + video
   ────────────────────────────────────────────────────── */
.prose figure[data-type="audio"],
.prose figure[data-type="video"] {
  margin: 36px 0;
  padding: 18px;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper-2);
}
.prose figure[data-type="audio"] audio {
  width: 100%;
  display: block;
}
.prose figure[data-type="video"] video {
  width: 100%;
  height: auto;
  max-height: 70vh;
  display: block;
  background: #000;
  object-fit: contain;
}
.prose figure[data-type="audio"] figcaption,
.prose figure[data-type="video"] figcaption {
  margin-top: 12px;
  padding: 0 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
:root[data-theme="dark"] .prose figure[data-type="audio"],
:root[data-theme="dark"] .prose figure[data-type="video"] {
  background: var(--paper-2);
  border-color: var(--line);
}
/* Focus rings for native media controls */
.prose audio:focus, .prose video:focus { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ──────────────────────────────────────────────────────
   §17/3 — Techy accents (restrained, on-brand)
   Each effect respects prefers-reduced-motion.
   ────────────────────────────────────────────────────── */

/* (a) Section headline underscore — draws in on first reveal */
.section-title h2 { position: relative; }
.section-title h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: var(--signal);
  transition: width 600ms ease-out 100ms;
}
.section-title.is-revealed h2::after { width: 28px; }
@media (prefers-reduced-motion: reduce) {
  .section-title h2::after { transition: none; width: 28px; }
}

/* (b) Slash shimmer on first paint */
@keyframes mb-slash-sheen {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.nav .brand .slash,
.masthead .wordmark .slash {
  background-image: linear-gradient(
    100deg,
    var(--signal) 0%,
    var(--signal) 35%,
    rgba(255,255,255,0.85) 50%,
    var(--signal) 65%,
    var(--signal) 100%
  );
  background-size: 200% 100%;
  background-position: 200% 0;
  animation: mb-slash-sheen 1.4s ease-out 0.2s 1;
}
@media (prefers-reduced-motion: reduce) {
  .nav .brand .slash, .masthead .wordmark .slash { animation: none; background: var(--signal); }
}

/* (c) Card image hover — subtle CRT scanline overlay */
.card .card-image, .tcard .tc-image { position: relative; isolation: isolate; }
.card .card-image::before,
.tcard .tc-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,0) 2px,
    rgba(255,255,255,0.05) 2px,
    rgba(255,255,255,0.05) 3px
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
  z-index: 2;
}
.card:hover .card-image::before,
.tcard:hover .tc-image::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .card .card-image::before, .tcard .tc-image::before { transition: none; }
}

/* (d) Reading-progress "tape head" leading-edge indicator */
.reading-progress > span { position: relative; }
.reading-progress > span::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--signal);
  /* Hide tape head at 0% (bar has no width yet) */
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: none;
}
/* Show tape head only when bar has some progress */
.reading-progress > span.is-reading::after {
  opacity: 1;
  animation: tapeHeadPulse 1.8s infinite ease-in-out;
}
@keyframes tapeHeadPulse {
  0%   { box-shadow: 0 0 4px var(--signal), 0 0 0 0px rgba(255, 59, 31, 0.45); }
  70%  { box-shadow: 0 0 10px var(--signal), 0 0 0 7px rgba(255, 59, 31, 0); }
  100% { box-shadow: 0 0 4px var(--signal), 0 0 0 0px rgba(255, 59, 31, 0); }
}
/* Reduced motion: keep the dot visible but stop pulsing */
@media (prefers-reduced-motion: reduce) {
  .reading-progress > span.is-reading::after {
    animation: none;
    opacity: 1;
    box-shadow: 0 0 5px var(--signal);
  }
}

/* (e) Reactions button — scanner sweep on hover & bounce on click */
.reactions .rx-btn { position: relative; overflow: hidden; }
.reactions .rx-btn::before {
  content: "";
  position: absolute;
  left: -20%;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255,59,31,0.85);
  opacity: 0;
  transition: left 600ms ease-out, opacity 200ms;
}
.reactions .rx-btn:hover::before {
  left: 100%;
  opacity: 1;
}
@keyframes rxBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.15) rotate(-3deg); }
  50% { transform: scale(0.92) rotate(2deg); }
  75% { transform: scale(1.04) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.reactions .rx-btn.bounce-pop {
  animation: rxBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@media (prefers-reduced-motion: reduce) {
  .reactions .rx-btn::before { display: none; }
}

/* (f) EQ bars — staggered phase already exists; slow randomization handled by existing rules */

/* ──────────────────────────────────────────────────────
   §19 — Aspect-ratio fixes + responsive corrections
   ────────────────────────────────────────────────────── */

/* Hero rotator dots: move out of slide-content area to a quiet strip
   below the slides. Stops the collision with the "Read the essay" button. */
.hero-rotator { row-gap: 0; }
.hero-rotator .hero-dots {
  grid-area: stack;
  align-self: end;
  justify-self: start;
  margin: 0;
  padding: 12px 32px;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  width: 100%;
  justify-content: flex-end;
  pointer-events: auto;
}
:root[data-theme="dark"] .hero-rotator .hero-dots { background: var(--paper-2); border-color: var(--line); }
@media (max-width: 720px) {
  .hero-rotator .hero-dots { padding: 10px 20px; justify-content: center; }
}

/* Masthead break earlier — issue-card collides with the wordmark below ~1100px */
@media (max-width: 1100px) {
  .masthead { padding: 32px 32px 0; }
  .masthead .word-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .masthead .issue-card { width: 100%; min-width: 0; }
  .masthead .issue-card .num { font-size: 36px; }
}

/* Post-hero bleeds to the viewport edge — no awkward paper-strip beside the art.
   We negate the `.page` horizontal padding using a calc so the figure
   reaches the viewport edges regardless of clamp() width. */
.post-hero {
  margin-left: calc(-1 * clamp(16px, 4vw, 40px));
  margin-right: calc(-1 * clamp(16px, 4vw, 40px));
}
.post-hero .caption {
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
}
/* Match `.eyebrow-bar` and other full-bleed strips on the post page so they
   align visually with the hero. */

/* Archive list: medium widths get a denser layout, narrow stacks. */
@media (max-width: 1100px) and (min-width: 721px) {
  .list .row {
    grid-template-columns: 48px 100px 110px 1fr 60px 24px !important;
    gap: 16px !important;
    padding: 16px 24px !important;
  }
  .list .r-num { font-size: 10.5px; }
  .list .r-title { font-size: 20px; line-height: 1.18; }
  .list .row .r-reads { display: none; }
}

/* Hero image min-height responsive — 540px is too tall at narrow widths */
@media (max-width: 900px) {
  .hero-rotator .hero-slide .h-image .art { min-height: 320px; }
}
@media (max-width: 560px) {
  .hero-rotator .hero-slide .h-image .art { min-height: 240px; }
  .hero-rotator .hero-slide .h-text { padding: 24px 20px; }
  .hero-rotator .hero-slide .h-text::before { right: 20px; }
}

/* Archive head: at narrow widths reduce h1 further */
@media (max-width: 560px) {
  .archive-head { padding: 24px 20px; }
  .archive-head h1 { font-size: clamp(40px, 13vw, 64px) !important; line-height: 0.9; }
  .archive-head .meta .big { font-size: 32px; }
}

/* ──────────────────────────────────────────────────────
   §19/2 — More small animations
   ────────────────────────────────────────────────────── */

/* List row hover: brand-color signal pip sliding in on the left */
.list .row { position: relative; }
.list .row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--signal);
  transition: width 220ms ease-out;
}
.list .row:hover::before { width: 3px; }
.from-archive .list-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--signal);
  transition: width 220ms ease-out;
}
.from-archive .list-row:hover::before { width: 3px; }

/* Tag chips: small color sweep on hover */
.post-end .tags a.chip,
.post-end .tags .chip {
  transition: background 180ms ease, color 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.post-end .tags a.chip:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--ink);
  transform: translateY(-1px);
}

/* Music widget "now playing" track title — soft pulse when audio is playing */
@keyframes mb-track-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.music-player.is-playing .mp-status {
  animation: mb-track-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .music-player.is-playing .mp-status { animation: none; }
}

/* Feature toggle star: subtle rotation on hover */
.feature-toggle { transition: all 0.18s ease; }
.feature-toggle:hover { transform: rotate(72deg) scale(1.05); }
.feature-toggle.is-featured:hover { transform: rotate(-72deg) scale(1.05); }

/* Stat tiles in admin dashboard: number pops on hover */
.admin-stats .stat .n { transition: transform 220ms ease; }
.admin-stats .stat:hover .n { transform: translateY(-2px); }

/* Section reveal underscore: extend slightly on hover of the parent section */
.section-title:hover h2::after { width: 48px; transition: width 260ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .list .row::before, .from-archive .list-row::before,
  .post-end .tags a.chip, .feature-toggle, .admin-stats .stat .n {
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────────────
   §20 — Article sign-off block (foot of every post)
   Stands apart from the page rhythm with a deliberate
   color flip, a portrait, and a clear CTA pair.
   ────────────────────────────────────────────────────── */
.signoff {
  background: var(--ink);
  color: var(--paper);
  margin: 56px 0 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.signoff::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 6px;
  height: 100%;
  background: var(--signal);
  z-index: 1;
}
.signoff::after {
  /* faint scanning grid overlay for the techy editorial feel */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,59,31,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,59,31,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}
.signoff-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  padding: 48px clamp(24px, 5vw, 64px);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.signoff-portrait {
  width: 200px;
  height: 200px;
  border: 1.5px solid var(--paper);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.signoff-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.signoff-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 96px;
  letter-spacing: -0.04em;
  color: var(--paper);
  background: linear-gradient(135deg, var(--ink-2) 0%, var(--ink) 100%);
}
.signoff-initial em {
  color: var(--signal);
  font-style: normal;
  margin-left: 4px;
}
.signoff-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
  margin-bottom: 14px;
}
.signoff-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: var(--paper);
}
.signoff-text {
  margin: 0 0 22px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(244,244,240,0.82);
  max-width: 56ch;
}
.signoff-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.signoff-actions .btn {
  border-color: var(--paper);
  color: var(--paper);
  background: transparent;
}
.signoff-actions .btn:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.signoff-actions .btn.solid {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--ink);
}
.signoff-actions .btn.solid:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* Responsive */
@media (max-width: 720px) {
  .signoff { margin: 40px 0 0; }
  .signoff-inner {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 36px 20px;
    gap: 24px;
  }
  .signoff-portrait {
    width: 120px;
    height: 120px;
  }
  .signoff-initial { font-size: 60px; }
  .signoff::after { background-size: 32px 32px; }
}

/* Dark-mode tweak: ink-on-ink would lose contrast, so use paper-2 strip */
:root[data-theme="dark"] .signoff {
  background: var(--paper-2);
  color: var(--ink);
}
:root[data-theme="dark"] .signoff-title { color: var(--ink); }
:root[data-theme="dark"] .signoff-text { color: rgba(244,244,240,0.8); }
:root[data-theme="dark"] .signoff-portrait { border-color: var(--ink); }
:root[data-theme="dark"] .signoff-actions .btn {
  border-color: var(--ink); color: var(--ink);
}
:root[data-theme="dark"] .signoff-actions .btn:hover {
  background: var(--ink); color: var(--paper-2);
}
:root[data-theme="dark"] .signoff-actions .btn.solid {
  background: var(--signal); border-color: var(--signal); color: #0B0B0F;
}

/* The old `.author-card` block is replaced — but if anything references it,
   suppress to avoid double rendering. */
.author-card { display: none; }

/* ── SENSORY & VISUAL UPGRADES ────────────────────────── */

/* CSS Cassette Tape */
.music-player .mp-cassette {
  margin: 12px 0;
  width: 100%;
  height: 64px;
  background: #1c1c22;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  position: relative;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 2px 2px 0px var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
:root[data-theme="dark"] .music-player .mp-cassette {
  background: var(--paper-2);
  border-color: var(--line);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 2px 2px 0px var(--line);
}
.music-player .cassette-body {
  width: 90%;
  height: 80%;
  background: #2a2b30;
  border-radius: 3px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
:root[data-theme="dark"] .music-player .cassette-body {
  background: var(--paper-3);
}
.music-player .cassette-label {
  width: 85%;
  height: 75%;
  background: #ecece6;
  border: 1px solid var(--ink);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  position: relative;
}
.music-player .cassette-window {
  width: 60%;
  height: 20px;
  background: rgba(11,11,15,0.85);
  border: 1px solid var(--ink);
  border-radius: 2px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}
.music-player .reel {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ecece6;
  border: 1.5px dashed var(--ink);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.music-player .spokes {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(11,11,15,0.85);
  position: relative;
}
.music-player .spokes::before,
.music-player .spokes::after {
  content: "";
  position: absolute;
  background: #ecece6;
}
.music-player .spokes::before {
  top: 0; bottom: 0; left: 3px; right: 3px;
}
.music-player .spokes::after {
  left: 0; right: 0; top: 3px; bottom: 3px;
}
.music-player .cassette-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--ink);
}

/* Cassette Spool Reel Spin animations */
@keyframes cassetteSpin {
  100% { transform: rotate(360deg); }
}
.music-player.is-playing .reel {
  animation: cassetteSpin 5s linear infinite;
}
.music-player.is-paused .reel {
  animation-play-state: paused;
}

/* SVG Halftone Grid Filter Hover Accents */
.card:hover .card-image img,
.tcard:hover .tc-image img,
.portrait .pic:hover::before {
  filter: url(#halftone) grayscale(0.2);
}

/* Keyboard Shortcuts Modal */
.shortcuts-modal {
  position: fixed; inset: 0;
  background: rgba(11,11,15,0);
  backdrop-filter: blur(0px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), backdrop-filter 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.3s;
}
.shortcuts-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: rgba(11,11,15,0.7);
  backdrop-filter: blur(4px);
}
.shortcuts-content {
  width: min(440px, 92vw);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0px var(--ink);
  padding: 30px;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.shortcuts-modal.open .shortcuts-content {
  transform: scale(1);
}
.shortcuts-close {
  position: absolute;
  top: 16px; right: 16px;
  background: transparent;
  border: 0;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
}
.shortcuts-close:hover {
  color: var(--signal);
}
.shortcuts-content h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 10px;
}
.shortcuts-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--ink);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 6px;
}
.shortcut-row:last-child {
  border-bottom: 0;
}
.shortcut-row kbd {
  background: var(--paper-2);
  border: 1px solid var(--ink);
  border-radius: 3px;
  box-shadow: 1px 1px 0px var(--ink);
  padding: 2px 6px;
  font-size: 11px;
}
.shortcuts-footer {
  margin-top: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
}

/* ──────────────────────────────────────────────────────
   §20 — BACK TO TOP BUTTON
   ────────────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 200;
  width: 44px;
  height: 44px;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
              background 0.18s ease, color 0.18s ease;
  box-shadow: 3px 3px 0 var(--signal);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--signal);
  color: var(--ink);
  border-color: var(--signal);
  box-shadow: 3px 3px 0 var(--ink);
}
@media (max-width: 720px) {
  .back-to-top { bottom: 16px; left: 16px; width: 38px; height: 38px; font-size: 16px; }
}

/* ──────────────────────────────────────────────────────
   §21 — LAZY LOAD IMAGE FADE-IN
   ────────────────────────────────────────────────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.5s ease;
}
img[loading="lazy"].is-loaded,
img.is-loaded {
  opacity: 1;
}

/* ──────────────────────────────────────────────────────
   §22 — STAGGERED REVEAL ANIMATIONS
   ────────────────────────────────────────────────────── */
.reveal-stagger {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  will-change: opacity, transform;
}
.reveal-stagger.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Each child in a grid gets a stagger delay */
.grid-3 .reveal-stagger:nth-child(1) { transition-delay: 0ms; }
.grid-3 .reveal-stagger:nth-child(2) { transition-delay: 80ms; }
.grid-3 .reveal-stagger:nth-child(3) { transition-delay: 160ms; }
.grid-3 .reveal-stagger:nth-child(4) { transition-delay: 240ms; }
.grid-3 .reveal-stagger:nth-child(5) { transition-delay: 320ms; }
.grid-3 .reveal-stagger:nth-child(6) { transition-delay: 400ms; }
.topic-cards .reveal-stagger:nth-child(1) { transition-delay: 0ms; }
.topic-cards .reveal-stagger:nth-child(2) { transition-delay: 100ms; }
.topic-cards .reveal-stagger:nth-child(3) { transition-delay: 200ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal-stagger { opacity: 1; transform: none; transition: none; }
}

/* ──────────────────────────────────────────────────────
   §23 — "NEW" BADGE FOR RECENT POSTS
   ────────────────────────────────────────────────────── */
.badge-new {
  display: inline-block;
  padding: 2px 6px;
  margin-left: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--signal);
  color: var(--ink);
  vertical-align: middle;
  animation: mb-pulse-subtle 2s ease-in-out infinite alternate;
}
@keyframes mb-pulse-subtle {
  from { opacity: 1; }
  to   { opacity: 0.7; }
}

/* ──────────────────────────────────────────────────────
   §24 — IMPROVED CARD INTERACTION STATES
   ────────────────────────────────────────────────────── */

/* Arrow indicator on cards when hovered */
.card::after {
  content: "→";
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--signal);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  padding: 8px 12px;
}
.card { position: relative; }
.card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* Subtle border glow on reaction button focus */
.rx-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 59, 31, 0.35);
}

/* ──────────────────────────────────────────────────────
   §25 — FOOTER NEWSLETTER MICRO-INTERACTIONS
   ────────────────────────────────────────────────────── */
.newsletter .nl-form button {
  transition: background 0.18s ease, transform 0.18s ease;
}
.newsletter .nl-form button:hover {
  transform: translateX(2px);
}
.newsletter .nl-form button:active {
  transform: translateX(0) scale(0.97);
}

/* ──────────────────────────────────────────────────────
   §26 — LINK HOVER ARROW FOR EXTERNAL LINKS
   ────────────────────────────────────────────────────── */
.footer .col a {
  transition: color 0.18s ease, padding-left 0.22s ease;
}
.footer .col a:hover {
  padding-left: 6px;
}

/* ──────────────────────────────────────────────────────
   §27 — IMPROVED ARCHIVE LIST HOVER
   ────────────────────────────────────────────────────── */
.list .row {
  transition: background 0.12s ease, transform 0.12s ease;
}
.list .row:hover {
  transform: translateX(3px);
}
.from-archive .list-row {
  transition: background 0.12s ease, transform 0.12s ease;
}
.from-archive .list-row:hover {
  transform: translateX(3px);
}

/* ──────────────────────────────────────────────────────
   §28 — SMOOTH SCROLL ANCHOR HIGHLIGHT
   ────────────────────────────────────────────────────── */
.prose h2:target {
  animation: heading-flash 1.2s ease-out;
}
@keyframes heading-flash {
  0% { border-left: 4px solid var(--signal); padding-left: 16px; background: rgba(255, 59, 31, 0.06); }
  100% { border-left: 0px solid transparent; padding-left: 0; background: transparent; }
}

/* ──────────────────────────────────────────────────────
   §29 — IMPROVED PRINT STYLES
   ────────────────────────────────────────────────────── */
@media print {
  .back-to-top, .time-left, .toast-container,
  .music-player, .reactions, .admin-strip,
  .palette, .lightbox, .shortcuts-modal { display: none !important; }
  .prose a { color: var(--ink) !important; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: var(--steel); }
}

/* ──────────────────────────────────────────────────────
   §30 — ADAPTIVE GRID & EMPTY-STATE (Phase 22)
   Graceful degradation when post count < 3, and a
   polished "coming soon" state for a fresh blog.
   ────────────────────────────────────────────────────── */

/* Adaptive grid: 1 or 2 posts get wider columns */
.grid-3[data-count="1"] {
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}
.grid-3[data-count="2"] {
  grid-template-columns: repeat(2, 1fr);
}

/* Larger card titles when only 1-2 cards show */
.grid-3[data-count="1"] .card-title,
.grid-3[data-count="2"] .card-title {
  font-size: 32px;
}
.grid-3[data-count="1"] .card-deck,
.grid-3[data-count="2"] .card-deck {
  font-size: 16px;
  -webkit-line-clamp: 4;
}

/* ── Empty state ─────────────────────────────────────── */
.empty-state {
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper);
  padding: 100px 40px 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 540px;
}
.empty-state-inner {
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.es-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
}
.es-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 88px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
}
.es-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--signal);
}
.es-body {
  font-size: 18px;
  line-height: 1.55;
  color: var(--steel-2);
  max-width: 44ch;
  margin: 0;
}
.es-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.es-field {
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1.5px solid var(--ink);
  max-width: 440px;
}
.es-field input {
  background: transparent;
  border: 0;
  outline: 0;
  padding: 16px 18px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  color: var(--ink);
}
.es-field input::placeholder { color: var(--steel); }
.es-field button {
  border: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease;
  white-space: nowrap;
}
.es-field button:hover { background: var(--signal); color: var(--ink); }

/* Dark mode overrides for empty state */
[data-theme="dark"] .empty-state { background: var(--paper); }
[data-theme="dark"] .es-title { color: var(--paper); }
[data-theme="dark"] .es-field { border-color: rgba(244,244,240,0.25); }
[data-theme="dark"] .es-field input { color: var(--paper); }
[data-theme="dark"] .es-field button { background: var(--paper); color: var(--ink); }
[data-theme="dark"] .es-field button:hover { background: var(--signal); }

/* ── Responsive: empty state & adaptive grid on mobile ─ */
@media (max-width: 720px) {
  .es-title { font-size: 52px; }
  .es-field { grid-template-columns: 1fr; max-width: 100%; }
  .es-field button { padding: 14px 18px; }
  .grid-3[data-count="1"],
  .grid-3[data-count="2"] {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────
   §31 — READING PROGRESS BAR MOBILE & POLISH (Phase 24)
   ────────────────────────────────────────────────────── */

/* Slightly taller bar on mobile for better visibility on small screens */
@media (max-width: 720px) {
  .reading-progress {
    height: 3px;
    /* Ensure tape-head dot never clips on narrow viewports */
    overflow: visible;
  }
  .reading-progress > span::after {
    width: 8px;
    height: 8px;
    right: -3px;
  }
}

/* Dark mode: keep the gradient punchy on dark backgrounds */
[data-theme="dark"] .reading-progress {
  background: var(--ink-2);
  border-bottom-color: rgba(244,244,240,0.12);
}
[data-theme="dark"] .reading-progress::after {
  background-image: repeating-linear-gradient(90deg, rgba(244,244,240,0.3) 0px, rgba(244,244,240,0.3) 1px, transparent 1px, transparent 8px);
  opacity: 0.2;
}
[data-theme="dark"] .reading-progress > span {
  background: linear-gradient(90deg, var(--signal) 0%, #ff8060 100%);
}

/* ──────────────────────────────────────────────────────
   §32 — Legal pages (Privacy Policy · Impressum)
   ────────────────────────────────────────────────────── */
.legal-page {
  min-height: 60vh;
  padding: 80px 0 120px;
}
.legal-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 40px;
}
.legal-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
  margin-bottom: 16px;
}
.legal-page h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 12px;
  color: var(--ink);
}
.legal-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--steel);
  letter-spacing: 0.06em;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1.5px solid var(--ink);
  line-height: 1.7;
}
.legal-sub a { color: var(--signal); }
.legal-section {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.legal-section:last-child { border-bottom: none; }
.legal-section h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink);
  text-transform: uppercase;
}
.legal-section h3 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
  margin: 28px 0 8px;
}
.legal-section p,
.legal-section li {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  max-width: 65ch;
}
.legal-section ul {
  padding-left: 20px;
  margin: 12px 0;
}
.legal-section li { margin-bottom: 6px; }
.legal-section address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
}
.legal-section a { color: var(--signal); text-decoration: underline; }
.legal-section strong { font-weight: 600; }
@media (max-width: 720px) {
  .legal-inner { padding: 0 20px; }
  .legal-page { padding: 48px 0 80px; }
}

/* Newsletter consent checkbox */
.nl-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--steel);
  cursor: pointer;
  margin: 8px 0 4px;
  max-width: 480px;
}
.nl-consent input[type=checkbox] {
  margin-top: 2px;
  accent-color: var(--signal);
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}
.nl-consent a { color: var(--signal); text-decoration: underline; }

/* ──────────────────────────────────────────────────────
   §33 — Story Log / Wire Feed (Short-form notes)
   ────────────────────────────────────────────────────── */
.wire-section {
  padding: 80px 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper-2);
}
.wire-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
}
.wire-side {
  position: sticky;
  top: 120px;
  align-self: start;
}
.wire-header {
  margin-bottom: 24px;
}
.wire-header h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 8px 0 0;
}
.wire-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--steel);
}
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--signal);
  border: 1px solid var(--signal);
  padding: 3px 8px 2px;
  text-transform: uppercase;
}
.ping-dot {
  width: 6px;
  height: 6px;
  background-color: var(--signal);
  border-radius: 50%;
  animation: pulse-ring 1.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.5; }
}
.wire-feed {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.wire-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.wire-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--signal);
}
.wc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 10px;
}
.wc-kind {
  font-weight: 600;
  color: var(--signal);
}
.wc-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.wc-link:hover {
  opacity: 1;
}
.wc-body {
  font-size: 15px;
  line-height: 1.7;
}
.wc-body p {
  margin-bottom: 12px;
}
.wc-body p:last-child {
  margin-bottom: 0;
}
.wc-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
  margin-top: 8px;
}
.wc-share-btn {
  background: none;
  border: 1px solid var(--ink);
  padding: 4px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.wc-share-btn:hover {
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 860px) {
  .wire-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .wire-side {
    position: static;
  }
  .wire-section {
    padding: 60px 0;
  }
}

/* ──────────────────────────────────────────────────────
   §34 — Bookmarks ("Saved Essays")
   ────────────────────────────────────────────────────── */
.bookmark-btn {
  background: none;
  border: none;
  padding: 8px 0;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 12px;
  width: 100%;
}
.bookmark-btn span:last-child {
  font-size: 14px;
  color: var(--steel);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bookmark-btn:hover span:last-child {
  transform: scale(1.2);
}
.bookmark-btn.is-saved span:last-child {
  color: var(--signal);
}

/* ──────────────────────────────────────────────────────
   §35 — Premium Halftone Raster & Volt Glowing Auras
   ────────────────────────────────────────────────────── */
/* The Halftone dot mesh overlay on hover */
.card-image, .tc-image, .post-hero {
  position: relative;
  overflow: hidden;
}
.card-image::after, .tc-image::after, .post-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--ink) 25%, transparent 25%);
  background-size: 4px 4px;
  opacity: 0;
  mix-blend-mode: color-burn;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 2;
}
.card:hover .card-image::after,
.tcard:hover .tc-image::after,
.post-hero:hover::after {
  opacity: 0.18;
}
[data-theme="dark"] .card-image::after,
[data-theme="dark"] .tc-image::after,
[data-theme="dark"] .post-hero::after {
  background-image: radial-gradient(var(--paper) 25%, transparent 25%);
  mix-blend-mode: overlay;
}
[data-theme="dark"] .card:hover .card-image::after,
[data-theme="dark"] .tcard:hover .tc-image::after,
[data-theme="dark"] .post-hero:hover::after {
  opacity: 0.12;
}

/* Volt/Signal Glowing border-radius outlines on focus/hover */
.card, .tcard, .wire-card, .btn, .chip, .filters input, .filters button {
  outline: none;
}
.card:focus-within, .tcard:focus-within {
  border-color: var(--signal);
  box-shadow: 0 0 12px rgba(255, 59, 31, 0.25);
}
[data-theme="dark"] .card:focus-within,
[data-theme="dark"] .tcard:focus-within {
  box-shadow: 0 0 16px rgba(255, 59, 31, 0.35);
}

/* Micro zoom transitions for premium feel */
.card-image img, .tc-image img, .post-hero img.cover {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover .card-image img,
.tcard:hover .tc-image img,
.post-hero:hover img.cover {
  transform: scale(1.025);
}