/* Bring Back Records — editorial, modeled on reference attachments */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&display=swap');

:root {
  --paper: #f3ede1;
  --paper-2: #ebe3d2;
  --ink: #17130f;
  --ink-2: #3a322a;
  --ink-mute: #8a8072;
  --rule: #d8d0bd;
  --accent: oklch(0.62 0.19 28); /* vermillion default */

  --serif: 'DM Serif Display', 'Playfair Display', Georgia, serif;
  --body-serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  /* --mono is for DATA a reader compares character by character: matrix and
     runout strings, catalogue numbers, chart figures, runtimes, years, section
     numerals. It is NOT for captions. Uppercase monospace labels ("MINT",
     "HOLY GRAIL", "FORMAT") were spread across the album page and were the real
     source of the "too many fonts / disjointed" reaction — four families is a
     normal editorial system; mono set on every label is not. Labels use --sans. */
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --content-w: 1240px;
  --nav-h: 64px;
  /* Height of the album-page breadcrumb bar (.album-crumbs), which sticks
     directly below the nav. Anything else on that page that sticks has to clear
     BOTH bars, and the numbers were previously guessed per rule — the dossier
     section labels used top:80px, which is less than nav-h alone plus the crumb
     bar, so the 60px Roman numeral pinned 36px underneath it and lost its top
     half. Measured, not estimated: the bar is two stacked lines (a 9px eyebrow
     and a 14px italic title) inside 4px + 9px of padding, top and bottom, plus
     its 1px rule. Overridden below wherever those type sizes change, and set to
     zero where the bar stops being sticky. */
  --crumb-h: 53px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--paper); }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  font-size: 16px;
}
body.grain::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.015) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: 0.6;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); }

/* ======= Top nav ======= */
.topnav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 16px 40px;
  display: flex; justify-content: space-between; align-items: center;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topnav .brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}
.topnav .brand .brand-name {
  white-space: nowrap;
  font-family: var(--serif); font-weight: 400;
  font-size: 22px; letter-spacing: -0.01em; line-height: 1;
}
.topnav .brand .brand-art {
  font-style: italic; font-weight: 400;
  margin-right: 3px; color: color-mix(in oklab, var(--ink) 58%, transparent);
}
.topnav .brand .brand-mark {
  height: 24px; width: auto; display: block; flex: none;
}
.topnav.topnav--linksonly { justify-content: flex-end; }
.topnav .links {
  display: flex; gap: 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
/* Brand stays whole; links may shrink their own gaps before anything clips. */
.topnav .brand { flex: 0 0 auto; }
.topnav .links a { opacity: 0.75; transition: opacity 0.15s, color 0.15s; }
.topnav .links a:hover { opacity: 1; color: var(--accent); }
.topnav .links a.active { opacity: 1; }
body[data-dark] .topnav { color: var(--paper); }

/* ======= Stage (home) ======= */
.stage { position: relative; width: 100%; min-height: 100vh; }

/* Variant A — Spotlight */
.variant-a {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  height: 100%;
  padding: 96px 56px 64px;
  gap: 56px;
  align-items: center;
}
.va-left { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 20px 0 40px; }
.va-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
}
.va-rank {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(140px, 14vw, 240px);
  line-height: 0.82;
  letter-spacing: -0.06em;
  margin: 0;
  color: var(--ink);
}
.va-rank em { font-style: normal; color: var(--accent); }
.va-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin: 14px 0 0;
}
.va-artist {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 24px);
  margin-top: 16px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.va-meta-row {
  display: flex; gap: 44px;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-2); flex-wrap: wrap;
}
.va-meta-row b {
  display: block; color: var(--ink-mute); font-weight: 400;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 4px;
}
.va-pull {
  font-family: var(--body-serif);
  font-size: 20px; line-height: 1.4;
  max-width: 44ch;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  text-wrap: pretty;
}
.va-right { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.va-cover {
  width: min(500px, 42vw); aspect-ratio: 1/1;
  box-shadow: 0 40px 80px -20px rgba(23,19,15,0.35), 0 8px 24px -8px rgba(23,19,15,0.2);
  position: relative;
}
.va-cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 40%);
}
.va-cta {
  position: absolute; bottom: 32px; right: 32px;
  background: var(--ink); color: var(--paper);
  padding: 16px 24px 14px;
  border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background 0.2s, transform 0.2s;
}
.va-cta:hover { background: var(--accent); transform: translateY(-2px); }

/* Variant B — Typographic */
.variant-b {
  position: relative; width: 100%; height: 100%;
  background: var(--ink); color: var(--paper);
  overflow: hidden;
}
.vb-top {
  position: absolute; top: 80px; left: 56px; right: 56px; z-index: 4;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.7;
}
.vb-giant {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 900;
  font-size: 84vh; line-height: 0.78;
  letter-spacing: -0.08em;
  color: var(--paper);
  user-select: none;
}
.vb-cover {
  position: absolute;
  top: 12%; bottom: 12%;
  left: 30%; right: 30%;
  z-index: 2;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,0.6);
}
.vb-giant-fg {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  font-family: var(--sans); font-weight: 900;
  font-size: 84vh; line-height: 0.78;
  letter-spacing: -0.08em;
  color: transparent;
  -webkit-text-stroke: 2px var(--paper);
  mix-blend-mode: difference;
}
.vb-meta {
  position: absolute; bottom: 56px; left: 56px; right: 56px; z-index: 4;
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  gap: 30px; flex-wrap: wrap;
}
.vb-meta .title {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 400; text-transform: none;
  letter-spacing: -0.01em; line-height: 1;
}
.vb-meta .artist {
  font-family: var(--sans); font-weight: 600;
  font-size: 13px; margin-bottom: 6px; opacity: 0.7;
}

/* Variant C — Archive drawer */
.variant-c {
  position: relative; width: 100%; height: 100%;
  display: grid; grid-template-columns: 1fr 1.1fr;
  padding: 96px 56px 56px;
  gap: 56px;
}
.vc-index { height: 100%; overflow-y: auto; padding-right: 24px; }
.vc-index::-webkit-scrollbar { width: 4px; }
.vc-index::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 4px; }
.vc-index-head {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
  margin-bottom: 6px;
}
.vc-row {
  display: grid; grid-template-columns: 48px 1fr 60px;
  gap: 20px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: color 0.15s, padding-left 0.15s;
}
.vc-row:hover, .vc-row.active { color: var(--accent); padding-left: 8px; }
.vc-row .n { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.vc-row.active .n, .vc-row:hover .n { color: var(--accent); }
.vc-row .t-title {
  font-family: var(--serif); font-style: italic;
  font-weight: 400; font-size: 19px; letter-spacing: -0.01em;
  line-height: 1.1; margin-bottom: 2px;
}
.vc-row .t-artist {
  font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute);
}
.vc-row .y { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); text-align: right; }

.vc-preview {
  display: flex; flex-direction: column; gap: 24px;
  align-items: flex-start; justify-content: center; height: 100%;
}
.vc-cover { width: min(420px, 34vw); aspect-ratio: 1/1; box-shadow: 0 30px 60px -20px rgba(23,19,15,0.35); }
.vc-info { max-width: 42ch; }
.vc-info .kicker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 8px;
}
.vc-info h2 {
  font-family: var(--serif); font-style: italic;
  font-weight: 400; font-size: 44px; line-height: 1;
  margin: 0 0 8px; letter-spacing: -0.02em;
}
.vc-info .artist {
  font-family: var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 13px; margin-bottom: 14px;
}
.vc-info p {
  font-family: var(--body-serif); font-size: 17px;
  line-height: 1.55; color: var(--ink-2); margin: 0 0 16px;
}
.vc-read {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding-bottom: 3px; border-bottom: 1.5px solid var(--ink);
}
.vc-read:hover { color: var(--accent); border-color: var(--accent); }

/* Variant toggle */
.variant-toggle {
  position: fixed; bottom: 28px; left: 28px;
  display: flex; gap: 8px; align-items: center; z-index: 60;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.variant-toggle .v-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid currentColor;
  cursor: pointer; padding: 0;
  transition: background 0.2s;
}
.variant-toggle .v-dot.active { background: currentColor; }
body[data-variant="b"] .variant-toggle,
body[data-variant="b"] .shuffle-btn { color: var(--paper); }

.shuffle-btn {
  position: fixed; bottom: 28px; right: 28px; z-index: 60;
  background: transparent; border: 1px solid currentColor;
  padding: 10px 16px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.shuffle-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.stage > section { animation: fadein 0.5s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ======= Countdown (list) page ======= */
/* padding-top clears the fixed nav so the price ticker (first child) sits flush
   under it; safe-area term keeps it clear of the taller nav on notched iOS. */
.countdown-page { min-height: 100vh; padding-top: calc(66px + max(0px, env(safe-area-inset-top, 0px) - 12px)); }
.countdown-page > .hd-ticker { margin-top: -5px; border-top: none; }
@media (max-width: 640px) { .countdown-page > .hd-ticker { margin-top: -2px; } }
.page-head {
  padding: 48px 56px 40px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 48px;
  border-bottom: 1px solid var(--rule);
}
.page-head h1 {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 128px);
  line-height: 0.88; letter-spacing: -0.03em; margin: 0;
  text-wrap: balance;
}
.page-head h1 em { font-style: normal; font-family: var(--sans); font-weight: 900; color: var(--accent); }
.page-head .lede {
  font-family: var(--body-serif); font-size: 17px;
  line-height: 1.5; max-width: 42ch; color: var(--ink-2); margin: 0;
  text-wrap: pretty;
}

.toolbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 14px 56px;
  display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.toolbar-group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar-group > label { color: var(--ink-mute); margin-right: 2px; }
.chip {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 6px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.toolbar .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.toolbar-btn {
  background: var(--ink); color: var(--paper);
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  display: inline-flex; gap: 8px; align-items: center;
}
.toolbar-btn:hover { background: var(--accent); }
.toolbar-btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.toolbar-btn.ghost:hover { background: var(--ink); color: var(--paper); }
.count-label { color: var(--ink-mute); font-family: var(--mono); }
.count-label b { color: var(--ink); font-weight: 500; }

.list { padding: 0 56px 160px; max-width: var(--content-w); margin: 0 auto; }
.entry {
  display: grid;
  grid-template-columns: 110px 180px 1fr 240px 40px;
  gap: 30px; align-items: start;
  padding: 34px 0; border-bottom: 1px solid var(--rule);
  transition: background 0.2s;
}
.entry:hover { background: linear-gradient(90deg, transparent, rgba(23,19,15,0.02) 30%, rgba(23,19,15,0.02) 70%, transparent); }
.entry .rank-num {
  font-family: var(--sans); font-weight: 900;
  font-size: 88px; line-height: 0.85;
  letter-spacing: -0.06em; margin: 0; color: var(--ink);
}
.entry.top3 .rank-num { color: var(--accent); }
.entry .cover-slot {
  width: 180px; height: 180px;
  box-shadow: 0 12px 24px -8px rgba(23,19,15,0.3);
  cursor: pointer;
  transition: transform 0.2s;
}
/* The Sleeve renders with an inline pixel size (180px). Force its root to fill
   the slot instead, so the mobile slot width (120px) governs and the cover
   can't overflow onto the rank/title. */
.entry .cover-slot > div { width: 100% !important; height: 100% !important; }
.entry .cover-slot:hover { transform: translateY(-3px); }
.entry .info .kicker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 8px;
}
.entry .info h3 {
  font-family: var(--serif); font-style: italic;
  font-weight: 400; font-size: 40px; line-height: 1;
  letter-spacing: -0.02em; margin: 0 0 6px;
  text-wrap: balance;
  cursor: pointer;
}
.entry .info h3:hover { color: var(--accent); }
.entry .info .artist-line {
  font-family: var(--sans); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 16px;
}
.entry .info .blurb {
  font-family: var(--body-serif); font-size: 16px; line-height: 1.5;
  color: var(--ink-2); max-width: 54ch; margin: 0 0 14px;
  text-wrap: pretty;
}
.entry .info .meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 14px;
}
.entry .info .meta span::before { content: "·"; margin-right: 16px; opacity: 0.4; }
.entry .info .meta span:first-child::before { content: ""; margin: 0; }
.entry .side {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-mute);
  border-left: 1px solid var(--rule); padding-left: 22px;
}
.entry .side b {
  display: block; font-weight: 400; font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 3px;
}
.entry .side p {
  margin: 0 0 10px; color: var(--ink-2); font-size: 12px;
  line-height: 1.4; letter-spacing: 0; font-family: var(--sans);
}
.entry .heard-col { display: flex; flex-direction: column; align-items: center; padding-top: 2px; }
.heard-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.heard-btn:hover { background: rgba(23,19,15,0.08); }
.heard-btn.on { background: var(--ink); color: var(--paper); }
.heard-btn svg { width: 14px; height: 14px; opacity: 0; transition: opacity 0.15s; }
.heard-btn.on svg { opacity: 1; }
.heard-label {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 8px;
  writing-mode: vertical-rl; text-orientation: mixed;
}
.read-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-bottom: 2px; border-bottom: 1px solid var(--ink);
}
.read-more.coming { color: var(--ink-mute); border-bottom-color: var(--rule); cursor: default; }
.read-more:not(.coming):hover { color: var(--accent); border-bottom-color: var(--accent); }

.progress {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%); z-index: 50;
  background: var(--ink); color: var(--paper);
  padding: 10px 18px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; gap: 14px; align-items: center;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.4);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Fade the fixed pill out over the footer so it never covers the footer
   content (incl. the affiliate disclosure) — most visible on mobile. */
.progress--hidden {
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(12px);
}
.progress .bar { width: 140px; height: 4px; background: rgba(243,237,225,0.2); border-radius: 2px; overflow: hidden; }
.progress .bar > span { display: block; height: 100%; background: var(--accent); width: 0; transition: width 0.3s; }
.progress button { border: 1px solid rgba(243,237,225,0.3); color: var(--paper); padding: 4px 8px; border-radius: 999px; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; }
.progress button:hover { border-color: var(--paper); }

/* ======= Album essay page ======= */
.album-page { min-height: 100vh; padding-top: var(--nav-h); }
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 2px; background: transparent; }
.scroll-progress > span { display: block; height: 100%; background: var(--accent); transition: width 0.1s linear; }

.hero {
  position: relative;
  padding: 56px 56px 8px;
  display: grid; grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 56px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.hero-num {
  position: absolute; right: -30px; bottom: -40px;
  font-family: var(--sans); font-weight: 900;
  font-size: min(52vh, 420px); line-height: 0.78;
  letter-spacing: -0.09em; color: var(--ink);
  opacity: 0.035; z-index: 0;
  pointer-events: none; user-select: none;
}
.hero > *:not(.hero-num) { position: relative; z-index: 1; }
.hero .rank-line {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 20px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.hero .rank-line .pill {
  background: var(--accent); color: #fff;
  padding: 4px 10px; border-radius: 999px; font-weight: 600;
}
.hero h1 {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 6.5vw, 104px);
  line-height: 0.92; letter-spacing: -0.03em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.hero .artist {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: 0.03em; text-transform: uppercase;
  margin-bottom: 24px;
}
.hero .dek {
  font-family: var(--body-serif);
  font-size: 21px; line-height: 1.45;
  color: var(--ink-2); max-width: 48ch; margin: 0 0 40px;
  text-wrap: pretty;
}
.hero .hero-meta {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px 40px; max-width: 520px;
  padding-top: 20px; border-top: 1px solid var(--rule);
}
.hero .hero-meta .cell { font-family: var(--sans); font-size: 14px; font-weight: 500; }
.hero .hero-meta .cell b {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 6px; font-weight: 400;
}
.cover-stack { position: relative; display: flex; justify-content: center; align-items: center; }
.cover-stack .cover-main {
  width: min(460px, 38vw); aspect-ratio: 1/1;
  box-shadow: 0 40px 80px -20px rgba(23,19,15,0.4), 0 12px 32px -8px rgba(23,19,15,0.25);
  position: relative; z-index: 2;
}
.cover-stack .vinyl {
  position: absolute; width: min(460px, 38vw); aspect-ratio: 1/1;
  border-radius: 50%;
  background: radial-gradient(circle at center, #2a2520 0%, #1a1612 6%, #0a0806 6.5%, #0a0806 26%, #1a1612 27%, #1a1612 40%, #0a0806 41%, #0a0806 62%, #1a1612 63%, #1a1612 100%);
  right: -28%; z-index: 1;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
  transition: right 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.cover-stack .vinyl::before { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: var(--accent); }
.cover-stack .vinyl::after { content: ""; position: absolute; inset: 49%; border-radius: 50%; background: #0a0806; }
.cover-stack:hover .vinyl { right: -38%; }

.essay { max-width: 1200px; margin: 0 auto; padding: 0 56px; }
.chapter {
  padding: 88px 0; border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 200px 1fr; gap: 64px; align-items: start;
}
.chapter:last-of-type { border-bottom: none; }
.chapter-label {
  position: sticky; top: 80px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute);
}
.chapter-label .chno {
  font-family: var(--sans); font-weight: 900;
  font-size: 60px; letter-spacing: -0.04em; color: var(--ink);
  display: block; line-height: 1; margin-bottom: 8px;
}
.chapter-body h2 {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1; letter-spacing: -0.02em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.chapter-body p {
  font-family: var(--body-serif); font-size: 19px; line-height: 1.6;
  color: var(--ink); margin: 0 0 22px; max-width: 64ch;
  text-wrap: pretty;
}
.chapter-body p.lede { font-size: 24px; line-height: 1.45; font-weight: 500; }
.chapter-body p:first-of-type::first-letter {
  font-family: var(--serif); font-weight: 400;
  font-size: 4.2em; float: left;
  line-height: 0.85; padding: 6px 12px 0 0;
  color: var(--accent);
}
.pull {
  margin: 36px 0 36px -32px;
  padding: 0 0 0 24px;
  border-left: 3px solid var(--accent);
  font-family: var(--serif); font-style: italic;
  font-size: 30px; line-height: 1.2; color: var(--ink);
  max-width: 32ch; font-weight: 400;
}
.pull footer {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 10px; font-style: normal;
}
.figure {
  margin: 40px 0; padding: 26px;
  background: var(--paper-2); border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  color: var(--ink-2);
}
.figure h4 {
  margin: 0 0 12px; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
}
.figure ul { margin: 0; padding: 0; list-style: none; }
.figure li {
  display: grid; grid-template-columns: 220px 1fr 180px;
  gap: 16px; padding: 10px 0;
  border-bottom: 1px dotted rgba(23,19,15,0.15);
  align-items: baseline;
}
.figure li:last-child { border-bottom: none; }
.figure li b { font-weight: 600; color: var(--ink); font-family: var(--sans); font-size: 13px; letter-spacing: 0.01em; }
.figure li span:last-child { color: var(--ink-mute); text-align: right; }

.tracklist-essay {
  margin: 40px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.tracklist-essay h4 {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute); margin: 24px 0 16px; font-weight: 500;
}
.tracklist-essay ol { margin: 0 0 24px; padding: 0; list-style: none; }
.tracklist-essay li {
  padding: 14px 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 44px 1fr auto;
  gap: 24px; align-items: baseline;
  cursor: pointer;
  transition: padding-left 0.15s, color 0.15s;
}
.tracklist-essay li:hover { padding-left: 8px; color: var(--accent); }
.tracklist-essay .tnum { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.tracklist-essay .tname { font-family: var(--serif); font-style: italic; font-size: 22px; font-weight: 400; }
.tracklist-essay .tlen { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.tracklist-essay .tnote {
  grid-column: 2 / -1;
  font-family: var(--body-serif); font-size: 15px; line-height: 1.5;
  color: var(--ink-2); max-width: 60ch;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding-top 0.25s ease;
  padding-top: 0;
}
.tracklist-essay li.open { color: var(--ink); padding-left: 8px; }
.tracklist-essay li.open .tname { color: var(--accent); }
.tracklist-essay li.open .tnote { max-height: 200px; opacity: 1; padding-top: 8px; }

.lyric {
  margin: 48px 0; padding: 52px 40px;
  background: var(--ink); color: var(--paper);
  text-align: center;
  font-family: var(--serif); font-style: italic;
  font-size: 30px; line-height: 1.3;
  position: relative;
}
.lyric::before, .lyric::after {
  content: '"'; position: absolute;
  font-family: var(--serif); font-size: 120px; line-height: 1;
  color: var(--accent); opacity: 0.5;
}
.lyric::before { top: 10px; left: 20px; }
.lyric::after { bottom: -30px; right: 20px; }
.lyric footer {
  font-family: var(--mono); font-style: normal; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: 24px; color: rgba(243,237,225,0.6);
}
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--ink); margin: 40px 0;
}
.stats .stat { background: var(--paper); padding: 32px 24px; }
.stats .stat b {
  display: block; font-family: var(--sans); font-weight: 900;
  font-size: 52px; line-height: 1; letter-spacing: -0.03em;
  color: var(--accent); margin-bottom: 10px;
}
.stats .stat span {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); line-height: 1.5; display: block;
}

.endnote {
  padding: 80px 56px 120px; text-align: center;
  background: var(--paper-2); border-top: 1px solid var(--rule);
}
.endnote .kicker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 16px;
}
.endnote h3 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 40px; margin: 0 0 16px;
}
.endnote h3 em { font-style: italic; }
.endnote p {
  font-family: var(--body-serif); font-size: 18px;
  color: var(--ink-2); max-width: 48ch;
  margin: 0 auto 32px; line-height: 1.5;
}
.endnote .cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  padding: 16px 26px; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
}
.endnote .cta:hover { background: var(--accent); }

/* ======= 12-section dossier ======= */
.tagline-block { margin: 30px 0 36px; padding: 20px 0 0; border-top: 1px solid var(--rule); max-width: 52ch; }
.tagline-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px;
}
.tagline {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.1vw, 30px); line-height: 1.28;
  margin: 0; color: var(--ink); text-wrap: pretty;
}

.verify-pill {
  display: inline-block; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(217, 119, 87, 0.14); color: var(--accent);
  padding: 2px 6px; border-radius: 3px; margin: 0 2px;
  vertical-align: 2px; font-weight: 600;
  border: 1px solid rgba(217, 119, 87, 0.35);
  cursor: help;
}

.dossier { max-width: 1200px; margin: 0 auto; padding: 0 56px; }
.dsection {
  padding: 50px 0; border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 200px 1fr; gap: 64px; align-items: start;
  /* Jump targets have to clear the crumb bar too, or the anchor lands the
     numeral and heading behind it — the same miscount as the sticky offset
     above. The mobile override below deliberately uses a much smaller value;
     see the note there. */
  scroll-margin-top: calc(var(--nav-h) + var(--crumb-h) + 16px);
}
.dossier > .dsection:first-child { padding-top: 44px; }
.dsection:last-of-type { border-bottom: none; }
.dsection-label {
  /* Clears the nav AND the breadcrumb bar stacked under it, plus a gap. A flat
     80px pinned the label behind the crumb bar and sheared the top of the
     numeral off. */
  position: sticky; top: calc(var(--nav-h) + var(--crumb-h) + 16px);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute);
}
.dsection-label .chno {
  font-family: var(--sans); font-weight: 900;
  font-size: 60px; letter-spacing: -0.04em; color: var(--ink);
  display: block; line-height: 1; margin-bottom: 8px;
}
.dsection-body > h2 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1; letter-spacing: -0.02em;
  margin: 0 0 32px; text-wrap: balance;
}
.sub-h {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute); margin: 36px 0 14px; font-weight: 500;
}
.sub-h .arr { color: var(--accent); margin-left: 6px; }

/* Key stats */
.keystats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--ink);
}
.keystats > div {
  display: grid; grid-template-columns: 150px 1fr;
  gap: 24px; padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.keystats > div:nth-child(odd) { padding-right: 28px; border-right: 1px solid var(--rule); }
.keystats > div:nth-child(even) { padding-left: 28px; }
.keystats dt {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0;
}
.keystats dd {
  margin: 0; font-family: var(--sans); font-size: 14px;
  font-weight: 500; line-height: 1.4; color: var(--ink);
}

/* Long-form essay */
.dek-large {
  font-family: var(--body-serif); font-style: italic;
  font-size: 23px; line-height: 1.45; color: var(--ink-2);
  max-width: 52ch; margin: 0 0 40px; font-weight: 400;
  padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  text-wrap: pretty;
}
.longform p {
  font-family: var(--body-serif); font-size: 19px; line-height: 1.6;
  color: var(--ink); margin: 0 0 22px; max-width: 64ch;
  text-wrap: pretty;
}
.longform p.lede { font-size: 22px; line-height: 1.5; }
.longform p:first-of-type::first-letter {
  font-family: var(--serif); font-weight: 400;
  font-size: 4.2em; float: left;
  line-height: 0.85; padding: 6px 12px 0 0;
  color: var(--accent);
}
.longform .pullable {
  display: block; margin: 28px -28px; padding: 24px 28px;
  font-family: var(--serif); font-style: italic;
  font-size: 28px; line-height: 1.25; color: var(--ink);
  border-top: 2px solid var(--accent); border-bottom: 1px solid var(--rule);
  font-weight: 400;
}
.longform em { font-family: var(--body-serif); font-style: italic; }

/* Tracks grid */
.tracks-grid { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.tracks-grid > li { border-bottom: 1px solid var(--rule); }
.tracks-grid > li > header {
  display: grid; grid-template-columns: 44px 1.4fr 1fr 60px;
  gap: 20px; padding: 18px 0; align-items: baseline;
  cursor: pointer; transition: padding-left 0.15s, color 0.15s;
}
.tracks-grid > li > header:hover { padding-left: 8px; color: var(--accent); }
.tracks-grid .tnum { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.tracks-grid .tname { font-family: var(--serif); font-style: italic; font-size: 24px; font-weight: 400; line-height: 1; }
.tracks-grid .tcreds { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; }
.tracks-grid .tlen { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); text-align: right; }
.tracks-grid .tbody {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
  padding: 0 0 0 64px;
}
.tracks-grid > li.open .tbody {
  max-height: 600px; opacity: 1; padding: 0 0 22px 64px;
}
.tracks-grid > li.open .tname { color: var(--accent); }
.tracks-grid .tnote {
  font-family: var(--body-serif); font-size: 17px; line-height: 1.55;
  color: var(--ink); margin: 0 0 14px; max-width: 62ch;
}
.tracks-grid .tlisten {
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  color: var(--ink-2); margin: 0; padding: 12px 16px;
  background: var(--paper-2); border-left: 2px solid var(--accent);
}
.tracks-grid .tlisten b {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 500; color: var(--accent);
}
.tracks-grid .tstamp {
  display: inline-block; font-family: var(--mono); font-weight: 600;
  background: var(--ink); color: var(--paper); padding: 2px 7px;
  border-radius: 3px; margin: 0 6px; font-size: 12px;
}

/* --- Hero "skip to guide" CTA ----------------------------------- */
.hero-jumps {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  margin: 22px 0 4px;
}
.hero-jump-cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); cursor: pointer;
  padding: 10px 18px 10px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.hero-jump-cta:hover { background: var(--accent); border-color: var(--accent); }
.hero-jump-cta:active { transform: translateY(1px); }
.hero-jump-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--paper); color: var(--ink);
}
.hero-jump-meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  opacity: 0.6; padding-left: 10px; margin-left: 6px;
  border-left: 1px solid color-mix(in oklab, var(--paper) 30%, transparent);
  text-transform: none; letter-spacing: 0.04em;
}
.hero-jump-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 500;
  color: var(--ink-mute); text-decoration: none; cursor: pointer;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.hero-jump-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- Floating dossier section nav ------------------------------- */
.dossier-nav {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%) translateX(8px);
  z-index: 80;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px 0 12px;
  display: flex; flex-direction: column;
  width: 60px;
  overflow: hidden;
  font-family: var(--mono);
  opacity: 0;
  pointer-events: none;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease,
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dossier-nav.visible {
  opacity: 1; pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.dossier-nav.expanded {
  width: 280px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
}
.dn-eyebrow {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 0 16px 8px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 6px;
  opacity: 0;
  transition: opacity 0.2s ease 0.05s;
  white-space: nowrap;
}
.dossier-nav.expanded .dn-eyebrow { opacity: 1; }
.dn-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 14px 7px 16px;
  text-decoration: none;
  color: var(--ink-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.dn-item:hover { color: var(--ink); }
.dn-item.active { color: var(--accent); }
.dn-tick {
  position: absolute; left: 0; top: 50%;
  width: 0; height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: width 0.2s ease, background 0.15s;
  opacity: 0.5;
}
.dn-item.active .dn-tick { width: 7px; opacity: 1; }
.dossier-nav.expanded .dn-tick { width: 0 !important; }
.dn-numeral {
  font-family: var(--serif); font-style: italic;
  font-size: 15px;
  width: 26px; text-align: center; flex-shrink: 0;
  line-height: 1;
}
.dn-label {
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.dossier-nav.expanded .dn-label { opacity: 1; transform: none; }
.dn-item.active .dn-numeral { color: var(--accent); }

/* Hide nav on small/mid screens — the CTA is enough on mobile */
@media (max-width: 1180px) {
  .dossier-nav { display: none; }
}

/* ===== Album page breadcrumb — back to The Hundred ===== */
.album-crumbs {
  position: sticky;
  top: var(--nav-h);
  z-index: 48;
  display: flex; align-items: center;
  gap: 18px;
  padding: 9px 32px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.crumb-back {
  display: inline-flex; align-items: center; gap: 12px;
  background: transparent; border: 0; padding: 4px 10px 4px 6px;
  margin-left: -6px;
  cursor: pointer; color: var(--ink);
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.crumb-back:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--accent); }
.crumb-back svg {
  flex-shrink: 0;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.crumb-back:hover svg { transform: translateX(-3px); color: var(--accent); }
.crumb-back-text {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px;
  line-height: 1;
}
.crumb-back-eyebrow {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
}
.crumb-back-title {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; line-height: 1.1;
  color: var(--ink); font-weight: 400;
}
.crumb-current {
  display: inline-flex; align-items: baseline;
  gap: 10px; flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crumb-rank {
  font-weight: 600; color: var(--ink);
  letter-spacing: 0.04em;
}
.crumb-sep { opacity: 0.4; }
.crumb-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 14px; color: var(--ink);
  letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.crumb-home {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--rule);
  padding: 6px 12px; cursor: pointer;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-mute);
  border-radius: 999px; flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.crumb-home:hover { color: var(--ink); border-color: var(--ink); }
.crumb-home svg { opacity: 0.7; }

@media (max-width: 880px) {
  .album-crumbs { padding: 12px 18px; gap: 12px; }
  .crumb-back-title { font-size: 13px; }
  .crumb-current { display: none; } /* fall back to just back + home on tablet/mobile */
}
@media (max-width: 480px) {
  .album-crumbs { padding: 11px 14px; gap: 8px; }
  .crumb-back { padding: 4px 6px 4px 4px; }
  .crumb-back-eyebrow { font-size: 8px; letter-spacing: 0.16em; }
  .crumb-back-title { font-size: 12px; }
  .crumb-home span { display: none; }
  .crumb-home { padding: 6px 8px; }
}

/* ===== Essay Reader (text-to-speech for the essay) ===== */
.essay-reader {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--ink);
  background: var(--paper);
  margin: 0 0 28px;
  font-family: var(--sans);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.essay-reader.is-active {
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.25);
}
.er-main {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
}
.er-play {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.er-play:hover { background: var(--accent); border-color: var(--accent); }
.er-play:active { transform: scale(0.95); }
.er-play.on { background: var(--accent); border-color: var(--accent); }
.er-info { flex: 1; min-width: 0; }
.er-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; color: var(--accent);
  margin-bottom: 3px;
}
.essay-reader.is-active .er-label { color: var(--accent); }
.er-meta {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--ink-2);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.er-meta b { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 13px; color: var(--ink); }
.er-q {
  display: inline-block; margin-left: 6px;
  font-family: var(--mono); font-style: normal;
  font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600;
  padding: 2px 6px 1px; border-radius: 999px;
  vertical-align: 1px;
}
.er-q.q-neural { background: var(--accent); color: var(--paper); }
.er-q.q-enhanced { background: var(--ink); color: var(--paper); }
.er-q.q-natural { background: color-mix(in oklab, var(--ink) 14%, transparent); color: var(--ink); }
.er-q.q-standard, .er-q.q-basic {
  background: color-mix(in oklab, var(--ink) 6%, transparent);
  color: var(--ink-mute);
  border: 1px dashed var(--rule);
  padding: 1px 5px 0;
}
.er-field-hint {
  font-family: var(--serif); font-style: italic; font-size: 11px;
  letter-spacing: 0; text-transform: none; color: var(--ink-mute);
  font-weight: 400;
}
.er-controls {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.er-ctl {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent;
  color: var(--ink-2); cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.er-ctl:hover:not(:disabled) { background: var(--paper-2, #f5f1e9); color: var(--ink); }
.er-ctl:disabled { opacity: 0.3; cursor: not-allowed; }
.er-ctl.on, .er-cog.on {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.er-progress {
  height: 2px; background: var(--rule);
  position: relative; overflow: hidden;
}
.er-progress span {
  display: block; height: 100%;
  background: var(--accent);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Interactive scrubber — replaces the static progress bar.
   Lets the listener jump straight to any paragraph. */
.er-scrub {
  position: relative;
  padding: 8px 16px 10px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  outline: none;
}
.er-scrub:focus-visible .er-scrub-thumb { transform: translate(-50%, -50%) scale(1.4); }
.er-scrub-track {
  position: relative;
  height: 4px;
  background: var(--rule);
  border-radius: 999px;
  overflow: visible;
  transition: height 0.15s;
}
.er-scrub:hover .er-scrub-track,
.er-scrub:focus-visible .er-scrub-track { height: 6px; }
.er-scrub-fill {
  display: block;
  position: absolute; inset: 0 auto 0 0;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.er-scrub-thumb {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transform: translate(-50%, -50%);
  transition: transform 0.15s, width 0.15s, height 0.15s;
  pointer-events: none;
}
.er-scrub:hover .er-scrub-thumb { transform: translate(-50%, -50%) scale(1.25); }
.er-scrub:active .er-scrub-thumb { transform: translate(-50%, -50%) scale(1.4); }
.er-scrub-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.er-settings {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--rule);
  background: color-mix(in oklab, var(--paper) 96%, var(--ink) 4%);
}
.er-field {
  display: flex; flex-direction: column; gap: 6px;
}
.er-field-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
}
.er-field-label b {
  color: var(--ink); font-weight: 600; font-family: var(--mono);
  letter-spacing: 0.04em; text-transform: none;
}
.er-field select {
  font-family: var(--sans); font-size: 13px;
  padding: 6px 10px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 0;
  cursor: pointer;
}
.er-field select:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.er-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.er-disclosure {
  grid-column: 1 / -1;
  font-family: var(--serif); font-style: italic; font-size: 12px;
  color: var(--ink-mute); border-top: 1px dotted var(--rule);
  padding-top: 10px;
}
.er-disclosure em { color: var(--ink); }
.essay-reader.unsupported { background: var(--paper-2, #f5f1e9); }
.essay-reader.unsupported .er-icon {
  width: 38px; height: 38px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-mute); color: var(--paper);
}

/* ===== Azure Speech settings section ===== */
.er-azure {
  grid-column: 1 / -1;
  border: 1px solid var(--rule);
  background: var(--paper);
  margin-top: 4px;
}
.er-azure > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  transition: background 0.15s;
}
.er-azure > summary::-webkit-details-marker { display: none; }
.er-azure > summary:hover { background: color-mix(in oklab, var(--ink) 3%, transparent); }
.er-azure[open] > summary { border-bottom: 1px solid var(--rule); }
.er-azure-summary-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
  color: var(--ink);
}
.er-azure-summary-label svg {
  color: var(--accent);
}
.er-azure-summary-meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.er-azure-on { color: var(--accent); }
.er-azure-off { color: var(--ink-mute); }
.er-azure-body {
  padding: 14px 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.er-azure-help {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
  margin: 0;
}
.er-azure-help a {
  color: var(--accent); border-bottom: 1px solid currentColor; text-decoration: none;
  font-style: normal; font-weight: 500;
}
.er-azure-help a:hover { color: var(--ink); }
.er-azure-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  cursor: pointer; color: var(--ink);
  text-transform: uppercase; font-weight: 600;
  padding: 6px 0;
}
.er-azure-toggle input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--accent);
}
.er-azure-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.er-azure input[type="password"],
.er-azure select {
  font-family: var(--mono); font-size: 12px;
  padding: 7px 10px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 0;
}
.er-azure input[type="password"]:focus,
.er-azure select:focus {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.er-azure-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 4px;
}
.er-azure-test {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
  padding: 8px 16px; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); cursor: pointer;
  border-radius: 999px; transition: background 0.15s;
}
.er-azure-test:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.er-azure-test:disabled { opacity: 0.4; cursor: not-allowed; }
.er-azure-msg {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  font-weight: 500;
}
.er-azure-msg.ok { color: var(--accent); }
.er-azure-msg.err { color: #c44; }
.er-azure-foot {
  font-family: var(--serif); font-style: italic; font-size: 11px;
  color: var(--ink-mute); line-height: 1.5; margin: 0;
  padding-top: 8px; border-top: 1px dotted var(--rule);
}

@media (max-width: 640px) {
  .er-azure-row { grid-template-columns: 1fr; }
}

/* Highlight currently-spoken paragraph */
.dek-large.is-reading,
.longform p.is-reading {
  position: relative;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -16px;
  margin-right: -16px;
  border-radius: 2px;
  transition: background 0.4s ease;
}
.dek-large.is-reading::before,
.longform p.is-reading::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px; background: var(--accent);
}

@media (max-width: 640px) {
  .er-main { padding: 12px 12px; gap: 10px; flex-wrap: wrap; }
  .er-play { width: 38px; height: 38px; }
  .er-info { flex: 1 1 0; min-width: 0; }
  /* Let the meta line wrap on small screens instead of forcing the bar
     wider than the viewport. */
  .er-meta {
    font-size: 12px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.4;
  }
  .er-q { display: inline-block; margin-top: 2px; }
  .er-ctl { width: 28px; height: 28px; }
  .er-settings { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
}

/* --- Track playback (Track-by-track section) ---------------------- */
.tracks-tools {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 0 16px; border-top: 1px solid var(--rule);
  margin-top: -1px;
}
.tracks-playall {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); cursor: pointer;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.tracks-playall:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.tracks-playall-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--paper); color: var(--ink);
}
.tracks-tools-note {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.tracks-tools-note em { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 13px; }

.tracks-grid > li { position: relative; }
.tracks-grid > li > header { position: relative; }

.tplay {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: 999px; padding: 0; cursor: pointer;
  color: var(--ink); transition: background 0.15s, border-color 0.15s, color 0.15s;
  align-self: center;
  margin: -8px 0;
}
.tplay-num {
  font-family: var(--mono); font-size: 12px; color: var(--ink-mute);
  transition: opacity 0.15s;
}
.tplay-icon {
  position: absolute; inset: 0;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
}
.tracks-grid > li > header:hover .tplay,
.tplay.on {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.tracks-grid > li > header:hover .tplay .tplay-num,
.tplay.on .tplay-num { opacity: 0; }
.tracks-grid > li > header:hover .tplay .tplay-icon,
.tplay.on .tplay-icon { opacity: 1; }
.tplay.on { background: var(--accent); border-color: var(--accent); }

.tlen-playing {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.tlen-elapsed { color: var(--accent); font-weight: 600; }
.tlen-sep { color: var(--ink-mute); }
.tlen-total { color: var(--ink-mute); }
.tlen-tag {
  display: inline-block; margin-left: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
  color: var(--ink-mute); padding: 2px 6px;
  border: 1px solid var(--rule); border-radius: 999px;
  vertical-align: 1px;
}
.tlen-tag.warn { color: #b65c2a; border-color: color-mix(in oklab, #b65c2a 50%, transparent); }

.tplay-spinner {
  display: block; width: 12px; height: 12px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: tplay-spin 0.7s linear infinite;
}
@keyframes tplay-spin {
  to { transform: rotate(360deg); }
}

.tprog {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: transparent; overflow: hidden; pointer-events: none;
}
.tprog-fill {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transition: width 0.95s linear;
}
.tracks-grid > li.is-playing { background: color-mix(in oklab, var(--accent) 4%, transparent); }
.tracks-grid > li.is-playing .tname { color: var(--accent); }

.tlisten-links {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 14px 0 6px;
}
.tlisten-links-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 500; color: var(--ink-mute);
  margin-right: 4px;
}
.tlisten-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  color: var(--ink); text-decoration: none;
  padding: 5px 10px; border: 1px solid var(--rule);
  border-radius: 999px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tlisten-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tlisten-link::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-mute);
}
.tlisten-link.sp::before { background: #1DB954; }
.tlisten-link.am::before { background: #FA243C; }
.tlisten-link.yt::before { background: #FF0000; }
.tlisten-link.tl::before { background: #000; box-shadow: inset 0 0 0 1px var(--ink-mute); }


/* Dossier grid */
.dossier-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0; border: 1px solid var(--ink); margin-bottom: 12px;
}
.d-block { padding: 22px 26px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.d-block:nth-child(2n) { border-right: none; }
.d-block:nth-last-child(-n+2) { border-bottom: none; }
.d-block h3 {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 10px; font-weight: 600;
}
.d-block p {
  font-family: var(--body-serif); font-size: 15px; line-height: 1.55;
  color: var(--ink-2); margin: 0;
}

.personnel-list { list-style: none; margin: 0 0 16px; padding: 0; }
.personnel-list li {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px;
  padding: 12px 0; border-bottom: 1px dotted var(--rule);
  align-items: baseline;
}
.personnel-list li:last-child { border-bottom: none; }
.pname { font-family: var(--sans); font-size: 14px; font-weight: 600; }
.prole { font-family: var(--body-serif); font-size: 15px; color: var(--ink-2); line-height: 1.45; }

.myths { list-style: none; margin: 0; padding: 0; }
.myth {
  display: grid; grid-template-columns: 110px 1fr; gap: 22px;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
  align-items: start;
}
.myth:last-child { border-bottom: none; }
.myth-status {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 3px; text-align: center;
  font-weight: 600; line-height: 1.2;
}
.myth.status-verified .myth-status { background: #2d5d3a; color: #fff; }
.myth.status-false .myth-status { background: #7a2424; color: #fff; }
.myth.status-disputed .myth-status,
.myth.status-verified-but-contextually-inflated .myth-status { background: #a56300; color: #fff; }
.myth-claim { font-family: var(--serif); font-style: italic; font-size: 19px;
  line-height: 1.3; margin: 0 0 8px; color: var(--ink); }
.myth-detail { font-family: var(--body-serif); font-size: 15px; line-height: 1.5;
  color: var(--ink-2); margin: 0; }

/* Influence web */
.influence-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.infl { list-style: none; margin: 0; padding: 0; }
.infl li {
  padding: 14px 0; border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 4px;
}
.infl li:last-child { border-bottom: 1px solid var(--rule); }
.infl-title {
  font-family: var(--serif); font-style: italic; font-size: 18px;
  font-weight: 400; line-height: 1.2; color: var(--ink);
}
.infl-how {
  font-family: var(--body-serif); font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
}

/* Collector */
.holy-grail {
  padding: 22px 26px; background: var(--ink); color: var(--paper);
  margin-bottom: 18px;
}
.hg-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px; font-weight: 600;
}
.hg-detail {
  font-family: var(--body-serif); font-size: 16px; line-height: 1.55;
  margin: 0; color: var(--paper);
}
.values-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--ink); margin-bottom: 0;
}
.values-strip > div { background: var(--paper-2); padding: 22px; text-align: center; }
.values-strip b {
  display: block; font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 10px; font-weight: 500;
}
.values-strip span {
  font-family: var(--sans); font-weight: 800; font-size: 20px;
  color: var(--accent); letter-spacing: -0.01em;
}
.avoid-list {
  list-style: none; margin: 0 0 22px; padding: 0;
}
.avoid-list li {
  padding: 12px 0 12px 34px; border-bottom: 1px solid var(--rule);
  font-family: var(--body-serif); font-size: 15px; line-height: 1.5;
  color: var(--ink-2); position: relative;
}
.avoid-list li::before {
  content: "✗"; position: absolute; left: 0; top: 10px;
  font-family: var(--sans); font-weight: 700; color: #7a2424;
  font-size: 16px;
}
.reissue-note {
  padding: 22px 26px; background: var(--paper-2); border: 1px solid var(--rule);
}
.ri-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px;
}
.reissue-note p {
  font-family: var(--body-serif); font-size: 16px; line-height: 1.55;
  color: var(--ink); margin: 0;
}

/* Charts */
.charts-table { width: 100%; border-collapse: collapse; margin: 0 0 22px; }
.charts-table th {
  text-align: left; padding: 12px 12px 12px 0;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute);
  border-bottom: 1px solid var(--ink);
}
.charts-table td {
  padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 14px; vertical-align: top;
}
.charts-table td:first-child { font-weight: 600; }
.charts-footer {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  padding: 22px; background: var(--paper-2); border: 1px solid var(--rule);
}
.charts-footer b {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px; font-weight: 600;
}
.charts-footer p {
  font-family: var(--body-serif); font-size: 15px; line-height: 1.55;
  color: var(--ink-2); margin: 0;
}

/* Timeline / cultural */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 110px; top: 0; bottom: 0;
  width: 1px; background: var(--rule);
}
.timeline li {
  display: grid; grid-template-columns: 90px 1fr; gap: 44px;
  padding: 16px 0 20px; position: relative; align-items: start;
}
.timeline li::before {
  content: ""; position: absolute; left: 106px; top: 20px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--paper);
}
.tl-date {
  font-family: var(--sans); font-weight: 800; font-size: 24px;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1;
}
.timeline p {
  font-family: var(--body-serif); font-size: 16px; line-height: 1.55;
  color: var(--ink); margin: 0; padding-top: 3px;
}

/* Today */
.today-block {
  font-family: var(--body-serif); font-size: 20px; line-height: 1.55;
  color: var(--ink); max-width: 60ch; margin: 0;
  padding: 28px; background: var(--paper-2); border-left: 3px solid var(--accent);
  text-wrap: pretty;
}

/* Recs */
.recs-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.rec { padding: 14px 0; border-top: 1px solid var(--rule); }
.rec:last-child { border-bottom: 1px solid var(--rule); }
.rec-title {
  font-family: var(--serif); font-style: italic; font-size: 17px;
  font-weight: 400; line-height: 1.2; margin-bottom: 4px;
}
.rec-why {
  font-family: var(--body-serif); font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
}

/* Discussion prompts */
.prompts { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.prompts li {
  display: grid; grid-template-columns: 60px 1fr; gap: 22px;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.prompts li:last-child { border-bottom: none; }
.pnum {
  font-family: var(--sans); font-weight: 900; font-size: 22px;
  color: var(--accent); letter-spacing: -0.01em;
}
.prompts p {
  font-family: var(--serif); font-style: italic; font-size: 22px;
  line-height: 1.3; color: var(--ink); margin: 0; font-weight: 400;
  text-wrap: pretty;
}

/* Tweaks panel */
.tweaks {
  position: fixed; bottom: 84px; right: 28px; z-index: 70;
  width: 280px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 18px;
  font-family: var(--sans);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.2);
}
.tweaks h4 {
  margin: 0 0 14px; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}
.t-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.t-row > label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.t-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.t-opts button {
  flex: 1; border: 1px solid var(--ink);
  padding: 8px 10px; font-family: var(--sans);
  font-size: 12px; font-weight: 500; border-radius: 2px;
}
.t-opts button.active { background: var(--ink); color: var(--paper); }

/* ======= Scorecards — cultural momentum + collector heat ======= */
.signals {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule);
  align-items: stretch;
}
.scorecard {
  background: var(--paper);
  border: 1px solid var(--ink);
  position: relative;
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.scorecard .sc-head { flex: 1 0 auto; }
.scorecard .sc-sub {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.scorecard.dir-up { border-left: 4px solid var(--accent); }
.scorecard.dir-down { border-left: 4px solid #7a2424; }
.scorecard.dir-flat { border-left: 4px solid var(--ink-mute); }
.sc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.15s;
}
.sc-head:hover { background: var(--paper-2); }
.sc-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 190px; }
.sc-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}

/* Info icon + tooltip on scorecards */
.sc-info {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  color: var(--ink-mute);
  cursor: help;
  border-radius: 50%;
  transition: color 0.15s;
}
.sc-info:hover, .sc-info:focus-visible { color: var(--accent); outline: none; }
.sc-info svg { display: block; }
.sc-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 280px;
  padding: 12px 14px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 50;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}
.sc-tip::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
.sc-info:hover .sc-tip,
.sc-info:focus-visible .sc-tip,
.sc-info:focus-within .sc-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sc-tip-title {
  display: block;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}
.sc-tip-body {
  display: block;
  font-family: var(--body-serif);
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--paper);
}
/* Flip tooltip to the left on the right-hand card to avoid clipping */
.sc-heat .sc-tip { left: auto; right: -8px; transform: translateX(0) translateY(4px); }
.sc-heat .sc-tip::after { left: auto; right: 14px; transform: none; }
.sc-heat .sc-info:hover .sc-tip,
.sc-heat .sc-info:focus-visible .sc-tip,
.sc-heat .sc-info:focus-within .sc-tip {
  transform: translateX(0) translateY(0);
}
.sc-sub {
  font-family: var(--body-serif); font-style: italic;
  font-size: 11px; color: var(--ink-mute);
}
.sc-val-wrap {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 3px; min-width: 120px;
  flex: 0 0 auto; margin-left: auto;
}
.sc-val {
  font-family: var(--sans); font-weight: 900;
  font-size: 24px; line-height: 1; letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.dir-down .sc-val { color: #7a2424; }
.dir-flat .sc-val { color: var(--ink); }

.sc-heat-meter {
  width: 140px; height: 6px; background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 3px; overflow: hidden;
}
.sc-heat-fill {
  height: 100%;
  background: linear-gradient(90deg, #3a6fa5 0%, #d97757 55%, #c2410c 85%, #7a2424 100%);
  transition: width 0.5s;
}
.sc-heat-row {
  display: flex; align-items: baseline; gap: 8px; justify-content: flex-end;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sc-score {
  font-family: var(--sans); font-weight: 900;
  font-size: 18px; letter-spacing: -0.02em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.sc-score-max { font-size: 11px; color: var(--ink-mute); font-weight: 500; }
.sc-badge {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
  background: var(--accent); color: #fff;
  padding: 2px 7px; border-radius: 3px;
}
.sc-delta { font-weight: 700; color: var(--accent); font-size: 11px; }

.sc-chev {
  flex: 0 0 auto;
  color: var(--ink-mute);
  transition: transform 0.2s;
}
.sc-chev.is-open { transform: rotate(180deg); color: var(--accent); }
.sc-drawer {
  padding: 0 16px 14px;
  border-top: 1px dotted var(--rule);
  padding-top: 12px;
  animation: sc-open 0.2s ease-out;
}
@keyframes sc-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.sc-detail {
  font-family: var(--body-serif); font-size: 14px; line-height: 1.5;
  color: var(--ink-2); margin: 0 0 8px;
}
.sc-source {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0;
}
.sc-source b { color: var(--ink); font-weight: 600; letter-spacing: 0.18em; }

@media (max-width: 700px) {
  .signals { grid-template-columns: 1fr; }
  .sc-val { font-size: 26px; }
  .sc-heat-meter { width: 110px; }
}

/* ======= Track rating — per-track stars + community avg ======= */
.trate {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; margin-top: 16px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  flex-wrap: wrap;
}
.trate-stars { display: flex; gap: 1px; }
.trate-star {
  background: none; border: none; padding: 2px 3px; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--rule);
  transition: color 0.1s, transform 0.1s;
}
.trate-star:hover { transform: scale(1.15); }
.trate-star.on { color: var(--accent); }
.trate-avg {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-mute); margin-left: auto;
}
.trate-avg b {
  font-family: var(--sans); font-size: 17px; font-weight: 800;
  color: var(--ink); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.trate-count { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }

.ledger { margin: 0 0 30px; }
.ledger-controls {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.ledger-filters, .ledger-sort { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ledger-sort > span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute); margin-right: 6px;
}
.lf, .ls {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 11px; border: 1px solid var(--rule);
  border-radius: 999px; background: transparent; color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}
.lf:hover, .ls:hover { border-color: var(--ink); }
.lf.active, .ls.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.ledger-grid {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 0;
  border: 1px solid var(--ink); background: var(--paper);
}
.ledger-list {
  list-style: none; margin: 0; padding: 0;
  border-right: 1px solid var(--ink);
  max-height: 560px; overflow-y: auto;
}
.ledger-list::-webkit-scrollbar { width: 6px; }
.ledger-list::-webkit-scrollbar-thumb { background: var(--ink-mute); }
.lrow {
  padding: 14px 18px; border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: background 0.15s, padding-left 0.15s;
  position: relative;
}
.lrow:hover { background: rgba(217, 119, 87, 0.06); padding-left: 24px; }
.lrow.active {
  background: var(--paper-2); padding-left: 22px;
  border-left: 4px solid var(--accent);
}
.lrow.v-avoid { opacity: 0.7; }
.lrow-top {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 5px;
}
.lrow-year { font-weight: 600; color: var(--ink); }
.lrow-country {
  background: var(--ink); color: var(--paper);
  padding: 2px 7px; border-radius: 3px; font-size: 9px;
  font-family: var(--sans); font-weight: 600;
}
.lrow-verdict {
  padding: 2px 7px; border-radius: 3px; font-weight: 700; font-size: 9px;
  font-family: var(--sans);
}
.lrow-verdict.v-buy { background: #2d5d3a; color: #fff; }
.lrow-verdict.v-avoid { background: #7a2424; color: #fff; }
.lrow-rating { color: var(--accent); font-size: 13px; letter-spacing: 0; margin-left: auto; }
.lrow-rating .o { color: var(--rule); }
.lrow-title {
  font-family: var(--serif); font-style: italic; font-size: 17px;
  line-height: 1.2; font-weight: 400; color: var(--ink);
}
.lrow.active .lrow-title { color: var(--accent); }
.lrow-rank {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 4px;
}

.ledger-detail { padding: 26px 28px; max-height: 560px; overflow-y: auto; }
.ld-rank {
  display: inline-block; font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--accent); color: #fff;
  padding: 4px 10px; border-radius: 3px; margin-bottom: 12px; font-weight: 600;
}
.ld-top h3 {
  font-family: var(--serif); font-style: italic;
  font-size: 24px; line-height: 1.15; margin: 0 0 14px;
  font-weight: 400; color: var(--ink);
}
.ld-meta {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.ld-meta > span {
  font-family: var(--sans); font-size: 13px; display: grid;
  grid-template-columns: 80px 1fr; gap: 14px; align-items: baseline;
}
.ld-meta b {
  font-family: var(--sans); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 500;
}
.ld-meta code { font-family: var(--mono); font-size: 12px; color: var(--ink); background: var(--paper-2); padding: 1px 6px; border-radius: 2px; }

.ld-marks { margin-bottom: 16px; }
.ld-marks h4, .ld-bars h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 8px; font-weight: 500;
}
.ld-marks ul { margin: 0; padding: 0; list-style: none; }
.ld-marks li {
  padding: 4px 0 4px 18px; font-family: var(--sans); font-size: 13px;
  color: var(--ink); position: relative; line-height: 1.4;
}
.ld-marks li::before {
  content: "✓"; position: absolute; left: 0; top: 4px;
  color: var(--accent); font-weight: 700;
}

.ld-bars { margin-bottom: 20px; }
.bar-row {
  display: grid; grid-template-columns: 120px 1fr 30px;
  gap: 12px; align-items: center; margin-bottom: 8px;
}
.bar-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.bar-track {
  height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden;
  border: 1px solid var(--rule);
}
.bar-track > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #b39c6e 0%, var(--accent) 100%);
  transition: width 0.4s;
}
.bar-pct { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); text-align: right; }

.ld-values {
  display: flex; gap: 2px; background: var(--ink);
  margin: 0 -28px 16px; padding: 0;
}
.ld-values .ldv { flex: 1; background: var(--paper-2); padding: 12px; text-align: center; }
/* Stated absence, not a gap. Deliberately quiet — it is a note about what we do not
   know, so it should not read with the weight of a price. */
.ld-values-none { background: transparent; }
.ldv-none {
  flex: 1; background: var(--paper-2); padding: 10px 12px; text-align: center;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-mute); font-style: italic;
}
.ldv-k { display: block; font-family: var(--sans); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px; }
.ldv-v { display: block; font-family: var(--sans); font-weight: 800;
  font-size: 17px; color: var(--accent); }

/* ---- live vs editorial pressing values (components/DossierValues.jsx) ------
   A live, market-sourced figure earns a quiet marker. An editorial figure is
   shown completely unmarked: the fallback must not look like a downgrade, and a
   grade with neither value renders no cell at all. */
.ld-values { flex-wrap: wrap; }
.ld-values .ldv.ldv-live { position: relative; }
.ld-values .ldv.ldv-live::after {
  content: ""; position: absolute; top: 7px; right: 7px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0.55;
}
.ldv-provenance {
  flex-basis: 100%; margin: 0; background: var(--paper-2);
  padding: 8px 12px; font-family: var(--sans); font-size: 11px;
  color: var(--ink-mute); display: flex; align-items: center; gap: 7px;
}
.ldv-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ink-mute); }
.ldv-dot.conf-high { background: #2d5d3a; }
.ldv-dot.conf-medium { background: #a56300; }
.ldv-dot.conf-low { background: var(--ink-mute); }
/* A modelled figure — cheapest listing x a condition multiplier, not a guide price.
   The tilde is the whole signal: quiet enough not to shout on a page of numbers,
   present enough that a reader deciding what to pay can see it is an estimate. */
.ldv-approx {
  font-family: var(--sans); font-size: 0.75em; margin-left: 2px;
  color: var(--ink-mute); text-decoration: none; border: 0; cursor: help;
}
.ld-values .ldv.ldv-est .ldv-v { color: var(--ink-mute); }
/* Headline strip: same rule — live gets a marker, editorial stays plain. */
.values-strip > div.vs-live { position: relative; }
.values-strip > div.vs-live::after {
  content: ""; position: absolute; top: 10px; right: 10px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0.55;
}

.ld-note {
  font-family: var(--body-serif); font-style: italic;
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
  margin: 0; padding-top: 12px; border-top: 1px dotted var(--rule);
}

/* Affiliate cards */
.affiliates { margin-top: 28px; }
.aff-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px; flex-wrap: wrap; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.aff-head h4 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 26px; margin: 0; color: var(--ink);
}
.aff-disclose {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.aff-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.aff-card {
  background: var(--paper-2); border: 1px solid var(--ink);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
  position: relative; transition: transform 0.2s, background 0.2s;
  cursor: pointer; color: var(--ink);
}
.aff-card:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.aff-tag {
  position: absolute; top: -10px; left: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; background: var(--accent); color: #fff;
  padding: 4px 8px; font-weight: 700;
}
.aff-label {
  font-family: var(--serif); font-style: italic; font-size: 19px;
  line-height: 1.15; font-weight: 400; margin-top: 8px;
}
.aff-vendor {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.7;
}
.aff-price {
  font-family: var(--sans); font-weight: 800; font-size: 22px;
  letter-spacing: -0.01em; margin-top: 4px;
}
.aff-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 700; margin-top: 6px;
  padding-top: 8px; border-top: 1px solid currentColor;
}

/* ======= Charts visual ======= */
.charts-visual { margin: 0; }
.cv-bars { margin-bottom: 40px; }
.cv-bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin-bottom: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute);
}
.cv-bar-head > span:first-child { color: var(--ink); font-weight: 600; }
.cv-bar {
  display: grid; grid-template-columns: 36px 100px 1fr 110px;
  gap: 14px; align-items: center; padding: 12px 0;
  border-bottom: 1px dotted var(--rule);
}
.cv-flag { font-size: 24px; line-height: 1; }
.cv-market { font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; }
.cv-bar-track {
  position: relative; height: 36px; background: var(--paper-2);
  border: 1px solid var(--rule);
  display: flex; align-items: center;
}
.cv-bar-fill {
  height: 100%; background: linear-gradient(90deg, #b39c6e 0%, var(--accent) 100%);
  animation: bar-grow 0.8s ease-out;
  transform-origin: left;
}
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cv-peak {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-weight: 800; font-size: 16px;
  color: var(--ink); letter-spacing: -0.02em;
}
.cv-cert {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); text-align: right;
}

.cv-sparkline { margin-bottom: 40px; padding: 24px; background: var(--paper-2); border: 1px solid var(--rule); }
.cv-spark-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; margin-bottom: 14px; color: var(--ink-mute);
  gap: 12px; flex-wrap: wrap;
}
.cv-spark-head > span:first-child { color: var(--ink); font-weight: 600; }
.cv-spark-peak { color: var(--accent); font-weight: 700; }
.spark-svg { width: 100%; height: 160px; color: var(--ink); display: block; }

.cv-milestones { margin-bottom: 28px; }
.cv-milestones-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-weight: 500;
}
.cv-ml { list-style: none; margin: 0; padding: 0; position: relative; }
.cv-ml::before {
  content: ""; position: absolute; left: 90px; top: 10px; bottom: 10px;
  width: 2px; background: var(--rule);
}
.cv-ml li {
  display: grid; grid-template-columns: 90px 24px 1fr;
  gap: 10px; align-items: center; padding: 10px 0;
}
.ml-year { font-family: var(--sans); font-weight: 800; font-size: 18px;
  letter-spacing: -0.02em; color: var(--ink); }
.ml-dot { width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--paper); justify-self: center; z-index: 1; }
.ml-event { font-family: var(--body-serif); font-size: 15px; line-height: 1.45; color: var(--ink-2); }

.cv-footer {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  padding: 22px; background: var(--ink); color: var(--paper);
}
.cv-footer b {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px; font-weight: 600;
}
.cv-footer p {
  font-family: var(--body-serif); font-size: 15px; line-height: 1.55;
  color: var(--paper); margin: 0;
}

/* ======= Scenes (making-of illustrations) ======= */
.scenes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  background: var(--ink); margin: 0 0 32px; border: 1px solid var(--ink);
}
.scene { background: var(--paper); display: flex; flex-direction: column; }
.scene-art {
  aspect-ratio: 400 / 260; width: 100%; overflow: hidden; line-height: 0;
}
.scene-art svg { width: 100%; height: 100%; display: block; }
.scene-body { padding: 22px 24px 26px; }
.scene-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px; font-weight: 600;
}
.scene-body h3 {
  font-family: var(--serif); font-style: italic; font-size: 24px;
  line-height: 1.15; margin: 0 0 10px; font-weight: 400; color: var(--ink);
}
.scene-body p {
  font-family: var(--body-serif); font-size: 15px; line-height: 1.55;
  color: var(--ink-2); margin: 0;
}

/* ======= Comments + ratings ======= */
.comments { margin: 0; }
.comments-top {
  display: grid; grid-template-columns: 180px 1fr 1fr; gap: 28px;
  padding: 24px 26px; border: 1px solid var(--ink);
  background: var(--paper-2); margin-bottom: 28px;
}
.rating-aggregate { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ra-big {
  font-family: var(--sans); font-weight: 900; font-size: 72px;
  line-height: 0.85; letter-spacing: -0.04em; color: var(--accent);
}
.ra-stars { font-size: 20px; letter-spacing: 2px; color: var(--rule); margin-bottom: 3px; }
.ra-stars .ra-star.on { color: var(--accent); }
.ra-stars .ra-star.half {
  background: linear-gradient(90deg, var(--accent) 50%, var(--rule) 50%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ra-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); }

.rating-dist { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.rd-row { display: grid; grid-template-columns: 30px 1fr 30px; gap: 10px; align-items: center; }
.rd-stars { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); }
.rd-bar {
  height: 6px; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 3px; overflow: hidden;
}
.rd-bar > span { display: block; height: 100%; background: var(--accent); transition: width 0.4s; }
.rd-count { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); text-align: right; }

.rating-you { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding-left: 28px; border-left: 1px solid var(--rule); }
.ry-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute); }
.ry-stars { display: flex; gap: 2px; }
.ry-star {
  font-size: 28px; line-height: 1; color: var(--rule);
  background: none; border: none; padding: 2px; cursor: pointer;
  transition: transform 0.1s, color 0.1s;
}
.ry-star:hover { transform: scale(1.15); }
.ry-star.on { color: var(--accent); }
.ry-note { font-family: var(--body-serif); font-size: 13px;
  font-style: italic; color: var(--ink-2); }

.comments-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; border-bottom: 1px solid var(--ink); margin-bottom: 18px;
  flex-wrap: wrap; gap: 12px;
}
.comments-head h4 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 28px; margin: 0;
}
.comments-head span { font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }

.comments-list { list-style: none; margin: 0 0 32px; padding: 0; }
.c {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.c.staff { padding: 22px 20px; background: var(--paper-2); border: 1px solid var(--accent); margin-bottom: 6px; }
.c-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 13px;
  color: var(--paper);
}
.c-top {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; margin-bottom: 6px;
}
.c-name { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--ink); }
.c-handle { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.c-when { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute); margin-left: auto; }
.c-stars { color: var(--accent); letter-spacing: 1px; font-size: 13px; }
.c-stars .o { color: var(--rule); }
.c-staff {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
  background: var(--accent); color: #fff; padding: 2px 7px; font-weight: 700;
}
.c p {
  font-family: var(--body-serif); font-size: 16px; line-height: 1.55;
  color: var(--ink); margin: 0 0 10px;
}
.c-actions { display: flex; gap: 12px; }
.c-like, .c-reply {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 4px 8px; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; transition: color 0.15s, border-color 0.15s;
}
.c-like:hover, .c-reply:hover { color: var(--accent); border-color: var(--accent); }
.c-like.on { color: var(--accent); border-color: var(--accent); }

.comment-form {
  padding: 22px 24px; border: 1px solid var(--ink);
  display: flex; flex-direction: column; gap: 12px;
}
.comment-form h5 {
  font-family: var(--serif); font-style: italic; font-size: 22px;
  margin: 0; font-weight: 400;
}
.cf-rating { display: flex; gap: 4px; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); }
.cf-rating > span { margin-right: 6px; }
.cf-star { font-size: 22px; line-height: 1; color: var(--rule);
  background: none; border: none; padding: 2px; cursor: pointer; transition: color 0.15s, transform 0.1s; }
.cf-star.on { color: var(--accent); }
.cf-star:hover { transform: scale(1.15); }
.cf-name, .cf-body {
  font-family: var(--sans); font-size: 14px;
  border: 1px solid var(--rule); border-radius: 0;
  padding: 10px 12px; background: var(--paper);
  color: var(--ink); width: 100%;
  resize: vertical;
}
.cf-body { font-family: var(--body-serif); font-size: 16px; line-height: 1.5; }
.cf-name:focus, .cf-body:focus { outline: none; border-color: var(--accent); }
.cf-actions {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.cf-note { font-family: var(--body-serif); font-style: italic; font-size: 13px; color: var(--ink-mute); }
.cf-submit {
  background: var(--ink); color: var(--paper);
  padding: 10px 20px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
  transition: background 0.15s;
}
.cf-submit:hover { background: var(--accent); }
.cf-submit:disabled { background: var(--rule); color: var(--ink-mute); cursor: not-allowed; }

.comments-empty { text-align: center; padding: 30px 22px; border: 1px dashed var(--rule); border-radius: 12px; margin: 4px 0 20px; color: var(--ink-mute); }
.comments-empty svg { color: var(--accent); opacity: 0.8; }
.comments-empty p { font-family: var(--body-serif); font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 420px; margin: 12px auto 18px; }
.comments-empty-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--paper);
  padding: 11px 20px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; transition: background 0.15s;
}
.comments-empty-cta:hover { background: var(--accent); }

/* Responsive overrides for WGO enhancements */
@media (max-width: 900px) {
  .ledger-grid { grid-template-columns: 1fr; }
  .ledger-list { max-height: 300px; border-right: none; border-bottom: 1px solid var(--ink); }
  .ledger-detail { max-height: none; }
  .ld-values { margin: 0 -28px 16px; }
  .scenes { grid-template-columns: 1fr; }
  .cv-bar { grid-template-columns: 28px 70px 1fr 80px; gap: 8px; }
  .cv-flag { font-size: 20px; }
  .cv-market { font-size: 11px; }
  .cv-peak { font-size: 14px; right: 8px; }
  .cv-footer { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .comments-top { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .rating-you { padding-left: 0; border-left: none; padding-top: 18px; border-top: 1px solid var(--rule); }
  .cv-ml::before { left: 56px; }
  .cv-ml li { grid-template-columns: 56px 16px 1fr; gap: 6px; }
  .ml-year { font-size: 14px; }
  .aff-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 100px 1fr 26px; gap: 8px; }
}

@media (max-width: 1100px) {
  .entry { grid-template-columns: 70px 140px 1fr 40px; }
  .entry .side { display: none; }
  .entry .cover-slot { width: 140px; height: 140px; }
  .entry .rank-num { font-size: 64px; }
}
@media (max-width: 900px) {
  html { height: auto; overflow-x: hidden; overflow-x: clip; }
  body { height: auto; overflow-x: visible; }
  .variant-a, .variant-c { grid-template-columns: 1fr; padding: 96px 20px 24px; height: auto; min-height: 100vh; overflow-y: auto; }  .variant-a .va-rank { font-size: 26vw; }
  .vc-preview .vc-cover { width: 80vw; }
  .page-head { padding: 40px 20px 24px; grid-template-columns: 1fr; }
  .toolbar { padding: 12px 20px; gap: 14px; }
  .list { padding: 0 20px 160px; }
  .entry { grid-template-columns: auto 100px 1fr; gap: 16px; padding: 22px 0; align-items: start; }
  .entry .heard-col { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
  .heard-label { writing-mode: horizontal-tb; margin: 0; }
  .entry .cover-slot { width: 100px; height: 100px; }
  .entry .rank-num { font-size: 42px; line-height: 0.95; padding-right: 4px; }
  .entry .info h3 { font-size: 26px; }
  .entry .info { min-width: 0; }
  /* Was 100px of top padding, set when the affiliate strip sat between the crumbs
     bar and the hero and needed clearing. The strip is gone (see
     window.BBR_COMMERCE_ENABLED), so that padding became raw whitespace between the
     nav and the cover — the reported "big gap". The sticky crumbs bar already
     separates the two; 40px is breathing room, 100px was a hole. */
  .hero { grid-template-columns: 1fr; padding: 40px 20px 60px; gap: 40px; min-height: auto; }
  .cover-stack .cover-main, .cover-stack .vinyl { width: 80vw; }
  .essay { padding: 0 20px; }
  .chapter { grid-template-columns: 1fr; gap: 24px; padding: 60px 0; }
  .chapter-label { position: static; }
  .pull { margin-left: 0; font-size: 22px; }
  .stats { grid-template-columns: 1fr; }
  .lyric { font-size: 20px; padding: 40px 20px; }
  .endnote { padding: 60px 20px; }
  .figure li { grid-template-columns: 1fr; }
  .dossier { padding: 0 20px; }
  .dsection { grid-template-columns: 1fr; gap: 24px; padding: 56px 0; }
  .dsection-label { position: static; }
  .keystats { grid-template-columns: 1fr; }
  .keystats > div { grid-template-columns: 130px 1fr; padding-right: 0 !important; padding-left: 0 !important; border-right: none !important; }
  .dossier-grid { grid-template-columns: 1fr; }
  .d-block { border-right: none !important; }
  .d-block:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
  .tracks-grid > li > header { grid-template-columns: 44px 1fr auto; }
  .tracks-grid .tcreds { grid-column: 2 / -1; font-size: 10px; padding-top: 2px; }
  .tracks-grid .tbody { padding-left: 56px; }
  .tracks-grid > li.open .tbody { padding-left: 56px; }
  .influence-cols, .recs-cols, .charts-footer { grid-template-columns: 1fr; gap: 24px; }
  .values-strip { grid-template-columns: 1fr; }
  .myth { grid-template-columns: 1fr; gap: 10px; }
  .myth-status { justify-self: start; }
  .personnel-list li { grid-template-columns: 1fr; gap: 4px; }
  /* Stack the date above the event below desktop so long month-name dates
     ("February 16, 2011") never collide with the dot, rule, or event text.
     The rule becomes a thin left rail and the dot sits on it. */
  .timeline::before { left: 4px; }
  .timeline li {
    display: block; grid-template-columns: none; gap: 0;
    padding: 14px 0 18px 26px;
  }
  .timeline li::before { left: 0; top: 18px; }
  .tl-date {
    display: block; font-size: 13px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-mute); line-height: 1.2; margin-bottom: 5px;
  }
  .timeline p { padding-top: 0; }
  .today-block { font-size: 17px; padding: 20px; }
  .prompts li { grid-template-columns: 40px 1fr; gap: 14px; }
  .prompts p { font-size: 18px; }
  .longform .pullable { margin: 28px 0; font-size: 22px; }
}


/* =================================================================
   MAGAZINE HOMEPAGE (variant d)
   ================================================================= */
.mag {
  max-width: none;
  padding-top: 80px;
  color: var(--ink);
}
.mag section { padding: 0 56px; }
.mag h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; margin: 0; }

/* Masthead ---------------------------------------------------------- */
.mag-masthead {
  padding: 40px 56px 48px !important;
  border-bottom: 1px solid var(--rule);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%),
    var(--paper);
}
.mm-date {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 22px;
}
.mm-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.92; letter-spacing: -0.035em;
  display: flex; justify-content: center; align-items: baseline; gap: 0.2em;
  flex-wrap: wrap;
  color: var(--ink);
}
.mm-stroke {
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
  font-style: italic;
}
.mm-mark { font-style: normal; color: var(--accent); }
.mm-tag {
  margin-top: 24px;
  font-family: var(--body-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-2);
  max-width: 640px;
  margin-left: auto; margin-right: auto;
  line-height: 1.5;
}

/* 1. Hero cover ----------------------------------------------------- */
.hero-cover {
  padding: 72px 56px !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}
.hc-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
}
.hc-pulse { position: relative; display: inline-block; width: 8px; height: 8px; }
.hc-pulse i {
  position: absolute; inset: 0; border-radius: 50%; background: var(--accent);
  animation: hc-pulse 1.6s ease-in-out infinite;
}
@keyframes hc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,87,0.55); }
  50% { box-shadow: 0 0 0 6px rgba(217,119,87,0); }
}
.hc-rank-row {
  display: flex; align-items: baseline; gap: 24px;
  margin-bottom: 20px;
}
.hc-rank { display: flex; flex-direction: column; }
.hc-rank-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hc-rank-n {
  font-family: var(--serif); font-size: 56px; line-height: 0.9;
  letter-spacing: -0.02em; color: var(--accent);
}
.hc-meta-stack {
  display: flex; flex-direction: column;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
  gap: 4px;
  padding-top: 14px;
  border-left: 1px solid var(--rule); padding-left: 16px;
}
.hc-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(52px, 6.2vw, 96px);
  line-height: 0.98; letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.hc-artist {
  font-family: var(--body-serif); font-style: italic;
  font-size: 22px; color: var(--ink-2);
  margin-bottom: 32px;
}
.hc-summary {
  font-family: var(--body-serif);
  font-size: 22px; line-height: 1.45;
  color: var(--ink); max-width: 540px;
  margin: 0 0 28px;
  position: relative;
}
.hc-quote {
  font-family: var(--serif); font-style: italic;
  color: var(--accent); font-size: 44px;
  line-height: 0; vertical-align: -0.3em;
  margin: 0 2px;
}
.hc-quote-r { vertical-align: -0.5em; }
.hc-byline {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 36px;
}
.hc-sep { margin: 0 10px; opacity: 0.5; }
.hc-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  transition: transform 0.15s, background 0.15s;
}
.hc-cta:hover { background: var(--accent); transform: translateY(-1px); }

.hc-right { position: relative; display: flex; justify-content: center; }
.hc-cover-wrap {
  position: relative; width: min(520px, 80%);
  aspect-ratio: 1/1;
}
.hc-vinyl {
  position: absolute; left: 46%; top: 0; width: 92%; height: 100%;
  background:
    radial-gradient(circle at center, #1a1511 0 14%, #0a0806 14% 15%, #1a1511 15% 50%,
      #241d17 50% 60%, #1a1511 60% 100%);
  border-radius: 50%;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: transform 0.6s ease;
}
.hc-vinyl::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle at center, rgba(255,255,255,0.015) 0 2px, transparent 2px 3px);
}
.hero-cover:hover .hc-vinyl { transform: translateX(14%); }
.hc-cover {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  box-shadow: 0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
}
.hc-stamp {
  position: absolute; top: -18px; right: -18px;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--accent); color: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--mono); z-index: 3;
  transform: rotate(8deg);
  box-shadow: 0 8px 24px rgba(217,119,87,0.4);
}
.hc-stamp .s1 { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.hc-stamp .s2 { font-family: var(--serif); font-size: 36px; line-height: 1; }

/* 2. Teaser --------------------------------------------------------- */
.teaser {
  padding: 80px 56px !important;
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.t-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 24px;
}
.t-dek {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1.08; letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 480px;
}
.t-body {
  font-family: var(--body-serif);
  font-size: 20px; line-height: 1.6;
  color: var(--ink);
  margin: 0;
  columns: 2;
  column-gap: 40px;
  column-rule: 1px solid var(--rule);
}
.t-body .dropcap {
  font-family: var(--serif);
  float: left;
  font-size: 68px; line-height: 0.82;
  padding: 6px 10px 0 0;
  color: var(--accent);
}
.t-footer {
  margin-top: 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute);
}
.t-more {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 600;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.t-read-time { letter-spacing: 0.14em; }

/* Generic section head -------------------------------------------- */
.r-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 40px; gap: 40px;
}
.r-head h2 {
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1;
  letter-spacing: -0.022em;
}
.r-sub {
  font-family: var(--body-serif); font-style: italic;
  font-size: 18px; line-height: 1.4;
  color: var(--ink-2);
  max-width: 520px;
  margin: 12px 0 0;
}
.r-legend {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
  letter-spacing: 0.1em;
  flex-wrap: wrap;
}
.r-legend span + span { margin-right: 16px; }
.r-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.r-dot-live { background: var(--accent); }
.r-dot-soon { background: var(--rule); border: 1px solid var(--ink-mute); }

/* 3. Ranked grid --------------------------------------------------- */
.ranked { padding: 96px 56px !important; border-bottom: 1px solid var(--rule); }
.r-filters {
  display: flex; align-items: center; gap: 32px;
  padding: 20px 24px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.rf-group { display: flex; align-items: center; gap: 12px; }
.rf-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.rf-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.rf-pill {
  padding: 6px 12px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: all 0.12s;
}
.rf-pill:hover { border-color: var(--rule); }
.rf-pill.active {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}
.rf-select {
  font-family: var(--sans); font-size: 13px;
  padding: 6px 28px 6px 10px;
  background: var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2317130f' stroke-width='1.5'><path d='M3 5l3 3 3-3'/></svg>") no-repeat right 8px center;
  background-size: 12px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  appearance: none;
  cursor: pointer;
}
.rf-count {
  margin-left: auto;
  font-family: var(--mono); font-size: 12px; color: var(--ink-mute);
  letter-spacing: 0.1em;
}
.rf-count b { color: var(--ink); font-weight: 600; }

.r-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px 28px;
}
.r-tile {
  display: flex; flex-direction: column;
  text-align: left;
  transition: transform 0.18s;
  position: relative;
}
.r-tile:hover { transform: translateY(-4px); }
.rt-rank {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--ink-mute);
  margin-bottom: 10px;
}
.rt-cover {
  aspect-ratio: 1/1; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  margin-bottom: 14px;
}
.rt-cover > * { width: 100% !important; height: 100% !important; }
.rt-body { display: flex; flex-direction: column; gap: 4px; }
.rt-title {
  font-family: var(--serif); font-size: 22px; line-height: 1.08;
  letter-spacing: -0.01em; color: var(--ink);
}
.rt-artist {
  font-family: var(--body-serif); font-style: italic;
  font-size: 14px; color: var(--ink-2);
  margin-bottom: 10px;
}
.rt-score-row {
  display: flex; align-items: center; gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
.rt-score {
  font-family: var(--serif);
  font-size: 26px; line-height: 1; color: var(--accent);
  letter-spacing: -0.01em;
}
.rt-radar {
  color: var(--ink-2); opacity: 0.85;
}
.rt-status {
  margin-left: auto;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.rts-live { background: var(--ink); color: var(--paper); }
.rts-soon { color: var(--ink-mute); border: 1px solid var(--rule); }
.r-tile.soon { opacity: 0.86; }
.r-tile.soon:hover { opacity: 1; }

/* 4. Reading paths ------------------------------------------------- */
.paths { padding: 96px 56px !important; border-bottom: 1px solid var(--rule); }
.p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.p-card {
  padding: 40px 36px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.p-card:nth-child(2) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.p-card:nth-child(2) .p-n, .p-card:nth-child(2) .p-kick { color: rgba(243,237,225,0.6); }
.p-card:nth-child(2) .p-blurb { color: rgba(243,237,225,0.82); }
.p-card:nth-child(2) .p-cta { color: var(--accent); }
.p-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,0.08); }
.p-n {
  font-family: var(--serif); font-size: 56px; line-height: 0.9;
  color: var(--accent); letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.p-kick {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 10px;
}
.p-label {
  font-family: var(--serif); font-weight: 400;
  font-size: 30px; line-height: 1.08; letter-spacing: -0.015em;
  margin: 0 0 18px;
}
.p-blurb {
  font-family: var(--body-serif); font-size: 16px;
  line-height: 1.55; color: var(--ink-2);
  margin: 0 0 28px;
  flex: 1;
}
.p-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: currentColor; opacity: 0.7;
  margin-bottom: 18px;
}
.p-sep { margin: 0 10px; }
.p-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding: 4px 0;
  align-self: flex-start;
}

/* 5. Archive ------------------------------------------------------- */
.archive { padding: 96px 56px !important; border-bottom: 1px solid var(--rule); }
.a-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.a-card {
  display: flex; flex-direction: column; gap: 20px;
  cursor: pointer;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
  transition: transform 0.18s;
}
.a-card:hover { transform: translateY(-3px); }
.a-hook {
  font-family: var(--serif); font-weight: 400;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.012em;
  color: var(--ink);
}
.a-meta { display: flex; align-items: center; gap: 14px; }
.a-cover { width: 72px; height: 72px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.a-cover > * { width: 100% !important; height: 100% !important; }
.a-title {
  font-family: var(--serif); font-size: 18px;
  letter-spacing: -0.01em; color: var(--ink);
}
.a-artist {
  font-family: var(--body-serif); font-style: italic;
  font-size: 13px; color: var(--ink-mute);
}
.a-teaser {
  font-family: var(--body-serif); font-size: 15px;
  line-height: 1.55; color: var(--ink-2);
  margin: 0;
}
.a-date {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
  padding-top: 12px; border-top: 1px solid var(--rule);
}

/* 6. Podcast ------------------------------------------------------- */
.pod {
  padding: 80px 56px !important;
  background: #0f0d0b;
  color: var(--paper);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}
.pod-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  color: rgba(243,237,225,0.65);
  margin-bottom: 24px;
}
.pod-live { position: relative; display: inline-block; width: 8px; height: 8px; }
.pod-live i {
  position: absolute; inset: 0; border-radius: 50%; background: #8ccf7f;
  animation: hc-pulse 1.6s ease-in-out infinite;
}
.pod-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 4.4vw, 68px);
  line-height: 1; letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--paper);
}
.pod-sub {
  font-family: var(--body-serif); font-size: 18px;
  line-height: 1.55; color: rgba(243,237,225,0.82);
  max-width: 540px;
  margin: 0 0 32px;
}
.pod-sub em { color: var(--accent); font-style: italic; }
.pod-hosts { display: flex; gap: 32px; margin-bottom: 36px; }
.pod-host { display: flex; gap: 12px; align-items: center; }
.pod-host-av {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 20px; color: white;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
.pod-host-name { font-family: var(--sans); font-weight: 600; font-size: 15px; }
.pod-host-sub { font-family: var(--body-serif); font-style: italic; font-size: 13px; color: rgba(243,237,225,0.6); }
.pod-subs { display: flex; gap: 10px; flex-wrap: wrap; }
.pod-sub-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  font-family: var(--sans); font-weight: 500; font-size: 13px;
  border: 1px solid rgba(243,237,225,0.18);
  color: var(--paper);
  transition: background 0.15s, border-color 0.15s;
}
.pod-sub-btn:hover { background: rgba(243,237,225,0.08); border-color: rgba(243,237,225,0.35); }
.pod-sub-apple svg { color: #a78bfa; }
.pod-sub-spotify svg { color: #8ccf7f; }

.pod-right {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 24px; align-items: center;
  padding: 24px;
  background: rgba(243,237,225,0.04);
  border: 1px solid rgba(243,237,225,0.1);
  border-radius: 8px;
}
.pod-art { grid-column: 1 / 3; display: flex; align-items: center; gap: 16px; }
.pod-cover { width: 120px; height: 120px; box-shadow: 0 12px 28px rgba(0,0,0,0.5); flex-shrink: 0; }
.pod-cover > * { width: 100% !important; height: 100% !important; }
.pod-waves {
  flex: 1; display: flex; align-items: center; gap: 2px; height: 72px;
}
.pod-waves span {
  flex: 1; background: var(--accent);
  border-radius: 2px; min-height: 4px;
  transition: opacity 0.1s;
}
.pod-play {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
  grid-column: 3;
}
.pod-play:hover { transform: scale(1.05); }
.pod-time {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.1em; color: rgba(243,237,225,0.7);
  grid-column: 4;
  display: flex; flex-direction: column; gap: 2px;
  text-align: right;
}
.pod-slash { opacity: 0.4; }

/* 7. Collector's desk --------------------------------------------- */
.desk { padding: 96px 56px !important; border-bottom: 1px solid var(--rule); }
.desk-head-right {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
  padding-left: 14px; border-left: 2px solid var(--accent);
}
.desk-grid {
  display: grid; grid-template-columns: 300px 1fr;
  gap: 56px; align-items: start;
}
.desk-cover-col { position: sticky; top: 100px; }
.desk-label-top {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 10px;
}
.desk-cover {
  width: 100%; aspect-ratio: 1/1;
  box-shadow: 0 30px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.08);
  position: relative;
}
.desk-rumours-art {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, #d4a574 0%, #a87547 40%, #6b4628 80%),
    #6b4628;
  overflow: hidden;
}
.desk-rumours-art::before {
  content: ""; position: absolute;
  left: 30%; top: 28%; width: 42%; height: 48%;
  background: radial-gradient(circle at 50% 40%, #1f1510 0%, #0a0706 60%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 52% 52% 48% 48%;
  filter: blur(0.5px);
}
.desk-rumours-art::after {
  content: "rumours";
  position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-style: italic;
  font-size: 28px; color: rgba(255,235,200,0.9);
  letter-spacing: -0.01em;
}

.desk-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.desk-title {
  font-family: var(--serif); font-weight: 400;
  font-size: 44px; line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.desk-title em { font-style: italic; }
.desk-intro {
  font-family: var(--body-serif); font-size: 19px; line-height: 1.55;
  color: var(--ink-2); max-width: 640px;
  margin: 0 0 40px;
}

.desk-ident {
  padding: 24px 28px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  margin-bottom: 36px;
}
.desk-ident-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
.desk-dl { margin: 0; }
.desk-dl > div {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 20px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}
.desk-dl > div:first-child { border-top: none; padding-top: 0; }
.desk-dl dt {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute);
}
.desk-dl dd {
  margin: 0;
  font-family: var(--body-serif);
  font-size: 15px; line-height: 1.5;
  color: var(--ink);
}
.desk-dl dd code {
  font-family: var(--mono); font-size: 13px;
  background: var(--paper); padding: 2px 6px; border-radius: 2px;
  color: var(--accent);
}

.desk-values {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.desk-val {
  padding: 20px; border: 1px solid var(--rule);
  background: var(--paper);
}
.desk-val.featured { border-color: var(--accent); background: var(--paper-2); position: relative; }
.desk-val.featured::before {
  content: "Sweet spot"; position: absolute; top: -10px; left: 16px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--accent); color: var(--paper);
  padding: 3px 8px; border-radius: 2px;
}
.dv-grade {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 10px;
}
.dv-price {
  font-family: var(--serif); font-size: 32px; line-height: 1;
  letter-spacing: -0.01em; color: var(--ink);
  margin-bottom: 12px;
}
.dv-note {
  font-family: var(--body-serif); font-style: italic;
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
}

.desk-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 20px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
  letter-spacing: 0.1em;
  flex-wrap: wrap; gap: 16px;
}
.desk-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  color: var(--accent); letter-spacing: 0.02em;
  border-bottom: 1px solid var(--accent);
  padding: 4px 0;
  text-transform: none;
}

/* 8. Newsletter --------------------------------------------------- */
.news {
  padding: 96px 56px !important;
  background: var(--accent);
  color: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.news-inner {
  max-width: 720px; margin: 0 auto; text-align: center;
}
.news-kicker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.75; margin-bottom: 18px;
}
.news h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 20px;
  color: var(--paper);
}
.news-body {
  font-family: var(--body-serif); font-size: 19px;
  line-height: 1.55; color: rgba(243,237,225,0.92);
  margin: 0 auto 36px; max-width: 580px;
}
.news-form {
  display: flex; gap: 0;
  max-width: 480px; margin: 0 auto 18px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  overflow: hidden;
}
.news-form input {
  flex: 1;
  padding: 14px 18px;
  background: transparent;
  border: none; outline: none;
  font-family: var(--sans); font-size: 15px;
  color: var(--paper);
}
.news-form input::placeholder { color: rgba(243,237,225,0.55); }
.news-form button {
  padding: 14px 24px;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  letter-spacing: 0.02em;
}
.news-thanks {
  font-family: var(--body-serif); font-size: 18px; font-style: italic;
  margin: 0 auto 18px;
  padding: 14px 28px;
  background: rgba(255,255,255,0.12);
  border-radius: 6px;
  display: inline-flex; gap: 12px;
}
.news-fine {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(243,237,225,0.6);
}

/* 9. Manifesto ---------------------------------------------------- */
.manifesto { padding: 112px 56px !important; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.m-inner { max-width: 880px; margin: 0 auto; }
.m-kicker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 24px; text-align: center;
}
.m-body {
  font-family: var(--body-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.48;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.m-body em { color: var(--accent); font-style: italic; }
.m-sig {
  margin-top: 40px;
  font-family: var(--body-serif); font-style: italic;
  font-size: 17px; color: var(--ink-mute);
  text-align: right;
}

/* 10. Footer ------------------------------------------------------ */
.foot {
  padding: 64px 56px 40px !important;
  background: var(--ink);
  color: var(--paper);
}
.foot-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(243,237,225,0.14);
}
.foot-lockup {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.foot-mark {
  height: 34px; width: auto; display: block; flex: none;
}
.foot-brand {
  font-family: var(--serif); font-size: 28px;
  letter-spacing: -0.015em; line-height: 1;
}
.foot-brand .brand-art {
  font-style: italic; font-weight: 400; margin-right: 3px;
  color: color-mix(in oklab, var(--paper) 58%, transparent);
}
.foot-tag {
  font-family: var(--body-serif); font-style: italic;
  font-size: 15px; line-height: 1.5;
  color: rgba(243,237,225,0.7);
  max-width: 320px;
}
.foot-h {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(243,237,225,0.5);
  margin-bottom: 16px;
}
.foot a {
  display: block;
  font-family: var(--sans); font-size: 14px;
  color: rgba(243,237,225,0.85);
  padding: 5px 0;
  cursor: pointer;
  transition: color 0.15s;
}
.foot a:hover { color: var(--accent); }
.foot-bottom {
  padding-top: 24px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(243,237,225,0.5);
  flex-wrap: wrap; gap: 16px;
}

/* Responsive tweaks ---------------------------------------------- */
@media (max-width: 980px) {
  .mag section { padding: 60px 28px !important; }
  .mag-masthead { padding: 28px 28px 36px !important; }
  .hero-cover, .teaser, .pod { grid-template-columns: 1fr; gap: 48px; }
  .p-grid, .a-grid { grid-template-columns: 1fr; }
  .desk-grid { grid-template-columns: 1fr; }
  .desk-cover-col { position: static; max-width: 280px; }
  .desk-values { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .t-body { columns: 1; }
}

/* ============================================================
   WGO COVER — recreation hotspots
   ============================================================ */
.wgo-cover { position: relative; }
.wgo-cover-disclosure {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(232, 200, 150, 0.45);
  pointer-events: none;
}
.wgo-hot {
  position: absolute; margin: -15px 0 0 -15px;
  width: 30px; height: 30px;
  background: none; border: none; padding: 0;
  cursor: pointer; z-index: 5;
}
.wgo-hot-dot {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.4), 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.15s;
}
.wgo-hot:hover .wgo-hot-dot { transform: scale(1.15); }
.wgo-hot.is-active .wgo-hot-dot {
  background: #fff; color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent), 0 4px 12px rgba(0,0,0,0.5);
}
.wgo-hot-callout {
  position: absolute; left: 36px; top: 50%; transform: translateY(-50%);
  width: 230px; padding: 12px 14px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  z-index: 10;
  text-align: left;
}
.wgo-hot-title {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px; font-weight: 700;
}
.wgo-hot-body {
  display: block; font-family: var(--body-serif); font-size: 12px; line-height: 1.5;
}

/* ============================================================
   ABOUT THE COVER — section layout
   ============================================================ */
.cover-about {
  display: grid; grid-template-columns: 420px 1fr; gap: 48px;
  align-items: start; margin-top: 8px;
}
.cover-about-art {
  /* Same stacked chrome as .dsection-label — 100px cleared the nav but not the
     crumb bar, so the pinned sleeve sat 16px under it. */
  position: sticky; top: calc(var(--nav-h) + var(--crumb-h) + 16px);
  display: flex; justify-content: center;
}
.cover-credits {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px;
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.cover-credits b {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 600; margin-bottom: 4px;
}
.cover-credits span {
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink);
}
.cover-story-lede {
  font-family: var(--body-serif); font-size: 19px; line-height: 1.5;
  color: var(--ink); margin: 0 0 16px; font-style: italic;
  text-wrap: pretty;
}
.cover-story-p {
  font-family: var(--body-serif); font-size: 16px; line-height: 1.65;
  color: var(--ink); margin: 0 0 14px; text-wrap: pretty;
}
.cover-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 8px 12px; border: 1px dashed var(--rule);
  margin-top: 12px;
}
.cover-callout-active {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px;
  margin-top: 20px; padding: 18px 20px;
  background: var(--paper-2); border-left: 4px solid var(--accent);
}
.cover-callout-num {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-weight: 700; font-size: 14px;
}
.cover-callout-title {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 6px;
}
.cover-callout-active p {
  margin: 0; font-family: var(--body-serif); font-size: 14px; line-height: 1.55;
}

/* ============================================================
   MAKING-OF GALLERY — large + 2-stack
   ============================================================ */
.mk-gallery {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 16px; margin: 8px 0 16px;
}
.mk-gallery--solo {
  grid-template-columns: 1fr;
}
.mk-gallery--solo .mk-frame-large { aspect-ratio: 16 / 9; }
.mk-frame {
  position: relative; display: block;
  width: 100%; padding: 0; border: none;
  background: var(--ink);
  cursor: zoom-in; overflow: hidden;
  text-align: left;
  box-shadow: 0 18px 36px -16px rgba(23,19,15,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mk-frame:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -16px rgba(23,19,15,0.5); }
.mk-frame-large { aspect-ratio: 4 / 5; }
.mk-stack { display: flex; flex-direction: column; gap: 16px; }
.mk-stack .mk-frame { aspect-ratio: 5 / 3; flex: 1; }
.ga-art { position: absolute; inset: 0; }
.ga-art svg { width: 100%; height: 100%; display: block; }
/* Thumbnail photos — `cover` to fill the frame consistently regardless of source aspect. */
.ga-art.ga-photo img { object-position: center; }
/* Lightbox photos — show the FULL image (no crop) on a dark backdrop so users
   can actually read the source. Overrides the inline objectFit set in JSX. */
.mk-lightbox-art .ga-art.ga-photo img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 8px;
  background: var(--ink);
}
.mk-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  padding: 14px 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0) 100%);
  color: #f5e3c0;
}
.mk-cap-num {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  font-weight: 700; color: var(--accent);
  grid-row: 1 / 3; align-self: center;
}
.mk-cap-title {
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  color: #fff; line-height: 1.3;
}
.mk-cap-credit {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  color: rgba(245, 227, 192, 0.65);
}

/* Lightbox */
.mk-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,8,6,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  animation: mkFade 0.2s ease-out;
}
@keyframes mkFade { from { opacity: 0; } to { opacity: 1; } }
.mk-lightbox-inner {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 0;
  max-width: 1200px; width: 100%; max-height: 88vh;
  background: var(--paper);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
}
.mk-lightbox-art { position: relative; min-height: 480px; background: var(--ink); }
.mk-lightbox-meta { padding: 36px 36px 32px; overflow-y: auto; }
.mk-lightbox-meta .mk-cap-num {
  display: inline-block; margin-bottom: 12px; color: var(--accent);
}
.mk-lightbox-meta h4 {
  font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.15;
  margin: 0 0 14px; font-weight: 400; color: var(--ink); text-wrap: balance;
}
.mk-lightbox-meta p {
  font-family: var(--body-serif); font-size: 15px; line-height: 1.6; color: var(--ink);
  margin: 0 0 18px; text-wrap: pretty;
}
.mk-credit-row {
  font-family: var(--sans); font-size: 13px; color: var(--ink-mute);
  margin-bottom: 8px; padding-top: 12px; border-top: 1px solid var(--rule);
}
.mk-credit-row b {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
  margin-right: 8px;
}
.mk-close {
  position: fixed; top: 24px; right: 32px;
  background: none; border: none; color: #fff;
  font-size: 36px; line-height: 1; cursor: pointer;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1001;
}
.mk-close:hover { color: var(--accent); }

/* ============================================================
   STICKY BUY RAIL — floating right rail
   ============================================================ */
.buyrail {
  position: fixed; right: 24px; bottom: 24px;
  width: 320px; max-width: calc(100vw - 48px);
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 24px 60px -12px rgba(23,19,15,0.45), 0 8px 20px -8px rgba(23,19,15,0.25);
  padding: 20px 22px 18px;
  z-index: 90;
  opacity: 0; transform: translateY(20px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.buyrail.is-visible {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.buyrail-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-mute);
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.buyrail-close:hover { background: var(--paper-2); color: var(--ink); }
.buyrail-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 700; color: var(--accent);
  margin-bottom: 10px;
}
.buyrail-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); animation: bpulse 1.8s ease-in-out infinite;
}
@keyframes bpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 119, 87, 0); }
}
.buyrail-title {
  font-family: var(--serif); font-style: italic;
  font-size: 22px; line-height: 1.1; font-weight: 400;
  color: var(--ink); margin-bottom: 2px;
  text-wrap: balance;
}
.buyrail-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 14px;
}
.buyrail-primary {
  display: block; padding: 14px 16px; margin-bottom: 10px;
  background: var(--ink); color: var(--paper);
  text-decoration: none;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.buyrail-primary:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.buyrail-prim-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.buyrail-format {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  color: var(--paper);
}
.buyrail-price {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--accent);
}
.buyrail-primary:hover .buyrail-price { color: #fff; }
.buyrail-vendor {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--paper); font-weight: 600;
}
.buyrail-vendor svg { color: currentColor; }
.buyrail-note {
  font-family: var(--body-serif); font-style: italic; font-size: 11px;
  color: rgba(245, 239, 230, 0.75);
  margin-top: 8px; line-height: 1.4;
}
.buyrail-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 600;
}
.buyrail-toggle:hover { color: var(--ink); }
.buyrail-more {
  border-top: 1px solid var(--rule);
  margin-top: 4px; padding-top: 8px;
}
.buyrail-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 10px; align-items: baseline;
  padding: 8px 4px; text-decoration: none;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.buyrail-row:last-child { border-bottom: none; }
.buyrail-row:hover .buyrail-row-fmt { color: var(--accent); }
.buyrail-row-fmt {
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink);
}
.buyrail-row-price {
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink);
}
.buyrail-row-cta {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 600;
}
.buyrail-disclose {
  font-family: var(--body-serif); font-style: italic; font-size: 10px;
  line-height: 1.45; color: var(--ink-mute);
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 1100px) {
  .buyrail { width: 280px; right: 16px; bottom: 16px; padding: 16px 18px 14px; }
  .cover-about { grid-template-columns: 1fr; gap: 28px; }
  .cover-about-art { position: static; }
}
@media (max-width: 720px) {
  .buyrail { left: 12px; right: 12px; width: auto; bottom: 12px; }
  .mk-gallery { grid-template-columns: 1fr; }
  .mk-frame-large { aspect-ratio: 4 / 3; }
  .mk-lightbox-inner { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .mk-lightbox-art { min-height: 280px; }
  .mk-lightbox-meta { padding: 24px; }
  .mk-lightbox { padding: 12px; }
}



/* =================================================================
   MANIFESTO HOMEPAGE (variant e)
   Editorial, opinionated, paper-and-ink, mostly typography.
   ================================================================= */
.manifesto-home {
  max-width: none;
  padding-top: 80px;
  color: var(--ink);
  background: var(--paper);
}
.manifesto-home .mf-section { padding: 0 56px; }
.manifesto-home h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; margin: 0; }

/* shared section rule */
.mf-section-rule {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  padding: 64px 0 28px;
  border-top: 1px solid var(--rule);
}
.mf-section-num { font-weight: 600; color: var(--ink); }
.mf-section-label::before { content: "— "; }

.mf-h2 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.04;
  text-wrap: balance;
  margin-bottom: 28px;
}

/* ---- 1. Hero ---------------------------------------------------- */
.mf-hero {
  padding: 36px 56px 56px;
  position: relative;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  isolation: isolate;
}

/* Giant typographic watermark — Roman numeral / Roman C for "100" */
.mf-hero-watermark {
  position: absolute;
  right: -4vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(380px, 56vw, 820px);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: var(--accent);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.mf-hero > *:not(.mf-hero-watermark) { position: relative; z-index: 1; }

.mf-hero-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap; gap: 16px;
}
.mf-mast { display: flex; align-items: center; gap: 14px; color: var(--ink); font-weight: 600; }
.mf-mast-dot {
  width: 9px; height: 9px; background: var(--accent); border-radius: 50%;
}
.mf-mast-sep { width: 1px; height: 14px; background: var(--rule); display: inline-block; }
.mf-hero-counter {
  display: flex; align-items: center; gap: 14px;
}
.mf-cycle-btn {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); padding: 6px 12px;
  border: 1px solid var(--ink); border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.mf-cycle-btn:hover { background: var(--ink); color: var(--paper); }

/* Kinetic ticker — drawn from the actual ranking data */
.mf-hero-ticker {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.mf-hero-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: mf-ticker 60s linear infinite;
  will-change: transform;
}
.mf-hero-ticker:hover .mf-hero-ticker-track { animation-play-state: paused; }
@keyframes mf-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.mf-hero-ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 0 28px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.mf-hero-ticker-rank {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 600;
}
.mf-hero-ticker-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  font-weight: 400;
}
.mf-hero-ticker-artist {
  font-weight: 600;
  color: var(--ink);
}
.mf-hero-ticker-sep {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--rule);
  margin-left: 12px;
}

/* "Reading this week" rail — its own row at the bottom of the hero */
.mf-hero-now {
  margin-top: 6px;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
  box-shadow: 0 1px 0 rgba(23,19,15,0.04);
}
.mf-hero-now:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.mf-hero-now-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  flex-shrink: 0;
}
.mf-hero-now-pulse::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: mf-pulse 1.8s ease-out infinite;
}
@keyframes mf-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.6); opacity: 0; }
}
.mf-hero-now-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mf-hero-now-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  border-left: 1px solid var(--rule);
  padding-left: 12px;
}
.mf-hero-now-arrow {
  font-size: 14px;
  color: var(--ink-mute);
  transition: transform 0.2s, color 0.2s;
}
.mf-hero-now:hover .mf-hero-now-arrow { transform: translateX(3px); color: var(--accent); }

/* CTA underline draw on hover */
.mf-hero-cta-label { position: relative; }

.mf-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
  color: var(--ink);
}

.mf-hero-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px; align-items: end;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  margin: 0;
}
.mf-hero-sub {
  font-family: var(--body-serif);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.45; max-width: 50ch;
  color: var(--ink-2); margin: 0;
  text-wrap: pretty;
}
.mf-hero-cta {
  background: var(--ink); color: var(--paper);
  padding: 18px 28px; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 12px;
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}
.mf-hero-cta:hover { background: var(--accent); transform: translateY(-2px); }

.mf-hero-footnote {
  margin-top: 56px;
  padding-top: 18px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  border-top: 1px dashed var(--rule);
  max-width: 70ch;
}
.mf-hero-footnote kbd {
  font-family: var(--mono); font-size: 10px;
  background: var(--paper-2); padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--rule);
}

/* ---- 2. Premise ------------------------------------------------- */
.mf-premise-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 80px;
  padding-bottom: 96px;
  align-items: start;
}
.mf-premise .mf-h2 {
  margin: 0;
  text-wrap: balance;
}
.mf-premise-body {
  font-family: var(--body-serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 56ch;
}
.mf-premise-body p { margin: 0 0 18px; text-wrap: pretty; }
.mf-premise-body p:first-child::first-letter {
  font-family: var(--serif); font-style: italic;
  font-size: 64px; line-height: 0.85;
  float: left; padding: 6px 10px 0 0;
  color: var(--accent);
}
.mf-premise-final {
  font-family: var(--serif); font-style: italic;
  font-size: 24px; line-height: 1.35;
  color: var(--ink) !important;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  margin-top: 28px !important;
}

/* ---- 3. Methodology --------------------------------------------- */
.mf-method {
  background: var(--ink);
  color: var(--paper);
  margin-top: 24px;
  padding-bottom: 96px;
}
.mf-method .mf-section-rule {
  border-top-color: rgba(243, 237, 225, 0.15);
  color: rgba(243, 237, 225, 0.55);
}
.mf-method .mf-section-num { color: var(--paper); }
.mf-method .mf-h2-method {
  color: var(--paper);
  max-width: 22ch;
  margin-bottom: 56px;
  text-wrap: balance;
}
.mf-method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(243, 237, 225, 0.18);
  border-left: 1px solid rgba(243, 237, 225, 0.18);
  margin-bottom: 64px;
}
.mf-dim {
  padding: 28px 28px 32px;
  border-right: 1px solid rgba(243, 237, 225, 0.18);
  border-bottom: 1px solid rgba(243, 237, 225, 0.18);
}
.mf-dim-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 14px;
}
.mf-dim-num {
  font-family: var(--mono); font-size: 11px;
  color: var(--accent); letter-spacing: 0.16em;
}
.mf-dim-label {
  font-family: var(--sans); font-weight: 700;
  font-size: 22px; letter-spacing: -0.01em;
  color: var(--paper);
}
.mf-dim-note {
  font-family: var(--body-serif);
  font-size: 16px; line-height: 1.55;
  color: rgba(243, 237, 225, 0.78);
  margin: 0;
  text-wrap: pretty;
}

.mf-method-prose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 80px;
  max-width: 1100px;
}
.mf-method-block { padding-right: 0; }
.mf-block-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.mf-method-block p {
  font-family: var(--body-serif);
  font-size: 17px; line-height: 1.6;
  color: rgba(243, 237, 225, 0.86);
  margin: 0;
  text-wrap: pretty;
}

/* ---- 4. Proof --------------------------------------------------- */
.mf-proof {
  padding-bottom: 96px;
}
.mf-h2-proof {
  max-width: 22ch;
  margin-bottom: 48px;
}
.mf-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.mf-proof-card {
  display: flex; flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.mf-proof-card.is-live::before {
  content: "Live";
  position: absolute; top: 14px; right: 14px; z-index: 4;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.mf-proof-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.mf-proof-rank {
  position: absolute; bottom: 12px; left: 14px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.4);
  padding: 4px 10px; border-radius: 4px;
  backdrop-filter: blur(4px);
}
.mf-proof-body {
  padding: 24px 28px 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.mf-proof-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.mf-proof-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px; line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.mf-proof-itit { font-style: italic; }
.mf-proof-art { font-style: normal; color: var(--ink-mute); }
.mf-proof-meta {
  display: flex; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.mf-proof-meta b { color: var(--ink); font-weight: 600; }
.mf-dot { color: var(--rule); }

.mf-proof-pull {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: 21px; line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 6px 0 4px;
  text-wrap: pretty;
  border-left: 2px solid var(--accent);
  padding-left: 14px;
}
.mf-proof-text {
  font-family: var(--body-serif);
  font-size: 15.5px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}
.mf-proof-cta {
  margin-top: 8px;
  align-self: flex-start;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 3px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: color 0.2s, border-color 0.2s;
}
.mf-proof-cta:hover { color: var(--accent); border-color: var(--accent); }

/* Proof sleeves (CSS-only mini cover art) ------------------------- */
.mf-sleeve {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
}
/* portrait — WGO-ish */
.mfs-rain {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    105deg,
    transparent 0 6px,
    rgba(255,255,255,0.05) 6px 7px,
    transparent 7px 14px
  );
  mix-blend-mode: overlay;
}
.mfs-portrait { position: relative; padding: 16% 12%; text-align: left; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.mfs-mast {
  font-family: var(--sans); font-weight: 900;
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing: 0.06em;
  line-height: 1;
}
.mfs-script {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.mfs-collar {
  position: absolute; bottom: 14%; left: 12%; right: 50%;
  height: 18%;
  clip-path: polygon(0 100%, 0 30%, 30% 0%, 70% 0%, 100% 30%, 100% 100%);
  opacity: 0.35;
}

/* minimal — Tago Mago-ish */
.mfs-min { position: relative; padding: 16% 12%; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.mfs-min-band {
  width: 100%; height: 18%;
  margin-top: -8%;
}
.mfs-min-title {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-top: 14%;
}
.mfs-min-artist {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 10px;
}
.mfs-min-year {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em;
  margin-top: auto;
  opacity: 0.6;
}

/* bold — Loveless-ish */
.mfs-bold { position: relative; padding: 14% 12%; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.mfs-bold-blot {
  position: absolute; inset: 8% 8% 38% 8%;
  filter: blur(18px);
  opacity: 0.7;
}
.mfs-bold-title {
  position: relative;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
}
.mfs-bold-artist {
  position: relative;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(13px, 1.4vw, 17px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 12px;
  opacity: 0.85;
}

/* ---- 5. Top 10 -------------------------------------------------- */
.mf-top10 {
  padding-bottom: 96px;
}
.mf-top10-head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px; align-items: end;
  margin-bottom: 40px;
}
.mf-top10-sub {
  font-family: var(--body-serif);
  font-size: 17px; line-height: 1.55;
  color: var(--ink-2); margin: 0;
  max-width: 44ch;
  text-wrap: pretty;
}
.mf-top10-list {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--ink);
}
.mf-top10-row {
  display: grid;
  grid-template-columns: 56px 64px 1fr 80px 110px 90px 30px;
  gap: 24px; align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.15s, padding-left 0.15s;
}
.mf-top10-row:hover {
  padding-left: 14px;
  background: var(--paper-2);
}
.mf-top10-row:hover .mf-t10-rank,
.mf-top10-row:hover .mf-t10-arrow {
  color: var(--accent);
}
.mf-t10-rank {
  font-family: var(--sans); font-weight: 900;
  font-size: 36px; letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color 0.15s;
}
.mf-t10-title {
  display: flex; flex-direction: column; gap: 3px;
}
.mf-t10-tname {
  font-family: var(--serif); font-style: italic;
  font-size: 26px; line-height: 1;
  letter-spacing: -0.02em;
}
.mf-t10-tartist {
  font-family: var(--sans); font-weight: 600;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.mf-t10-year {
  font-family: var(--mono); font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.mf-t10-genre {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.mf-t10-score {
  font-family: var(--sans); font-weight: 800;
  font-size: 20px; letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mf-t10-arrow {
  color: var(--ink-mute);
  transition: color 0.15s;
}
.mf-top10-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 32px;
  flex-wrap: wrap; gap: 24px;
}
.mf-top10-cta {
  background: var(--ink); color: var(--paper);
  padding: 16px 26px; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 12px;
  transition: background 0.2s, transform 0.2s;
}
.mf-top10-cta:hover { background: var(--accent); transform: translateY(-2px); }
.mf-top10-note {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  max-width: 60ch;
  text-align: right;
}

/* ---- 6. Contract ------------------------------------------------ */
.mf-contract {
  background: var(--paper-2);
  margin-top: 24px;
  padding-bottom: 96px;
}
.mf-h2-contract {
  max-width: 26ch;
  margin-bottom: 48px;
}
.mf-contract-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
}
.mf-contract-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 36px; align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}
.mf-c-num {
  font-family: var(--sans); font-weight: 900;
  font-size: 56px; letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mf-c-label {
  font-family: var(--serif); font-style: italic;
  font-weight: 400; font-size: 32px;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.05;
  text-wrap: balance;
}
.mf-c-text {
  font-family: var(--body-serif);
  font-size: 17px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0; max-width: 70ch;
  text-wrap: pretty;
}
.mf-contract-pact {
  margin-top: 36px;
  display: flex; align-items: center; gap: 22px;
}
.mf-pact-rule { flex: 1; height: 1px; background: var(--ink); }
.mf-pact-line {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); margin: 0;
}

/* ---- 7. Newsletter ---------------------------------------------- */
.mf-newsletter {
  padding-bottom: 96px;
}
.mf-newsletter-card {
  border: 1px solid var(--ink);
  padding: 64px 56px 56px;
  background: var(--paper);
  display: flex; flex-direction: column;
  gap: 28px;
}
.mf-h2-newsletter {
  max-width: 22ch;
  margin: 0;
}
.mf-newsletter-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  max-width: 640px;
}
.mf-newsletter-input {
  font-family: var(--serif); font-style: italic;
  font-size: 28px; line-height: 1;
  letter-spacing: -0.02em;
  background: transparent; color: var(--ink);
  border: none;
  border-bottom: 2px solid var(--ink);
  padding: 14px 0;
  outline: none;
  width: 100%;
  font-weight: 400;
}
.mf-newsletter-input::placeholder { color: var(--ink-mute); }
.mf-newsletter-input:focus { border-bottom-color: var(--accent); }
.mf-newsletter-submit {
  background: var(--ink); color: var(--paper);
  padding: 16px 28px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background 0.2s;
  white-space: nowrap;
  margin-left: 24px;
  align-self: end;
}
.mf-newsletter-submit:hover { background: var(--accent); }
.mf-newsletter-thanks {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--body-serif); font-size: 18px;
  color: var(--ink); margin: 16px 0;
  border-top: 1px solid var(--rule); padding-top: 24px;
  max-width: 640px;
}
.mf-thanks-tick {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  flex-shrink: 0;
}
.mf-newsletter-foot {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  border-top: 1px dashed var(--rule);
  padding-top: 18px;
}

/* ---- 8. Sign-off ------------------------------------------------ */
.mf-signoff {
  padding: 80px 56px 120px;
  background: var(--ink);
  color: var(--paper);
}
.mf-signoff-rule {
  width: 100%; height: 1px;
  background: rgba(243, 237, 225, 0.18);
  margin-bottom: 56px;
}
.mf-signoff-line {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--paper);
  max-width: 28ch;
  margin: 0 0 64px;
  text-wrap: balance;
}
.mf-signoff-byline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 80px;
  border-top: 1px solid rgba(243, 237, 225, 0.18);
  padding-top: 32px;
}
.mf-by-block { display: flex; flex-direction: column; gap: 8px; }
.mf-by-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(243, 237, 225, 0.55);
}
.mf-by-name {
  font-family: var(--serif); font-style: italic;
  font-size: 22px; letter-spacing: -0.01em;
  color: var(--paper);
  line-height: 1.2;
  text-wrap: pretty;
}
.mf-signoff-mast {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
  color: var(--paper);
  text-align: center;
  border-top: 1px solid rgba(243, 237, 225, 0.18);
  padding-top: 64px;
}
.mf-mast-art {
  font-family: var(--mono); text-transform: uppercase; font-weight: 500;
  font-size: clamp(11px, 1.3vw, 15px); letter-spacing: 0.62em;
  padding-left: 0.62em;
  color: color-mix(in oklab, var(--paper) 52%, transparent);
  margin-bottom: clamp(10px, 1.6vw, 22px);
}
.mf-mast-word {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(66px, 16.5vw, 232px); line-height: 0.82;
  letter-spacing: -0.025em;
}
.mf-mast-hy { color: var(--accent); font-style: italic; }
.mf-mast-strap {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(17px, 2.5vw, 31px); letter-spacing: 0.01em;
  color: color-mix(in oklab, var(--paper) 70%, transparent);
  margin-top: clamp(16px, 2.2vw, 30px);
}
.mf-amp { color: var(--accent); margin: 0 8px; font-weight: 400; }

/* hide global shuffle/variant toggles' shuffle button on this variant */
body[data-variant="e"] .shuffle-btn { display: none; }
body[data-variant="e"] .variant-toggle { color: var(--ink); }

/* Long-form variants need the page to scroll, not the stage to clip ----- */
/* overflow-y must stay visible on the body — setting it to auto makes the
   body a scroll container, which silently breaks position:sticky on all
   descendants (e.g. the mobile section dropdown). The document scrolls
   natively without it. */
body[data-variant="d"], body[data-variant="e"] { height: auto; overflow-y: visible; }
body[data-variant="d"] .stage,
body[data-variant="e"] .stage { height: auto; overflow: visible; }

/* Responsive ------------------------------------------------------ */
@media (max-width: 1100px) {
  .mf-method-grid { grid-template-columns: repeat(2, 1fr); }
  .mf-proof-grid { grid-template-columns: 1fr; }
  .mf-method-prose { grid-template-columns: 1fr; gap: 32px; }
}
/* Belt-and-suspenders: keep the kinetic ticker from blowing horizontal scroll */
@media (max-width: 900px) {
  .mf-hero, .mf-hero-ticker { overflow: hidden; max-width: 100vw; }
}
@media (max-width: 900px) {
  .manifesto-home .mf-section { padding: 0 24px; }
  .mf-hero { padding: 48px 24px 64px; }
  .mf-hero-foot { grid-template-columns: 1fr; gap: 24px; }
  .mf-premise-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 64px; }
  .mf-method-grid { grid-template-columns: 1fr; }
  .mf-top10-head { grid-template-columns: 1fr; gap: 20px; }
  .mf-top10-row { grid-template-columns: 36px 48px minmax(0, 1fr) 56px 18px; gap: 10px; padding: 18px 0; }
  .mf-t10-genre, .mf-t10-score { display: none; }
  .mf-t10-rank { font-size: 26px; }
  .mf-t10-tname { font-size: 20px; }
  .mf-top10-foot { flex-direction: column; align-items: flex-start; }
  .mf-top10-note { text-align: left; }
  .mf-contract-row { grid-template-columns: 60px 1fr; gap: 18px; }
  .mf-c-num { font-size: 36px; }
  .mf-c-label { font-size: 22px; }
  .mf-newsletter-card { padding: 36px 28px; }
  .mf-newsletter-form { grid-template-columns: 1fr; gap: 18px; }
  .mf-newsletter-submit { margin-left: 0; align-self: flex-start; }
  .mf-newsletter-input { font-size: 22px; }
  .mf-signoff { padding: 56px 24px 80px; }
  .mf-signoff-byline { grid-template-columns: 1fr; gap: 22px; }
  .mf-hero-meta { font-size: 10px; }
  .mf-mast-sep { display: none; }
}


/* ======= Affiliate strip — top of every album page ======= */
.aff-strip {
  position: relative;
  background: color-mix(in oklab, var(--accent) 9%, #efe6d4);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  animation: affSlideDown 0.5s cubic-bezier(0.2,0.8,0.2,1) both;
}
@keyframes affSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.aff-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 56px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.aff-strip-lede {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 280px;
}
.aff-strip-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.aff-strip-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.aff-strip-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}
.aff-strip-retailers {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.aff-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.aff-chip:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.35);
}
.aff-chip-name { font-weight: 700; }
.aff-chip-meta {
  color: var(--ink-mute);
  font-size: 11px;
}
.aff-chip-meta::before {
  content: "·";
  margin-right: 6px;
  color: var(--rule);
}
.aff-chip-price {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  padding-left: 6px;
  border-left: 1px solid var(--rule);
  margin-left: 2px;
}
.aff-chip svg { color: var(--ink-mute); transition: transform 0.15s, color 0.15s; }
.aff-chip:hover svg { color: var(--accent); transform: translate(1px, -1px); }

@media (max-width: 880px) {
  .aff-strip-inner { padding: 10px 20px; gap: 14px; }
  .aff-chip-meta { display: none; }
}


/* =========================================================================
   MOBILE — comprehensive fixes for ≤ 640 px (iPhone-class viewports)
   Targets overflow + oversized type that the wider breakpoints miss.
   ========================================================================= */
@media (max-width: 640px) {
  /* Horizontal-overflow protection on html only. On the BODY, any non-visible
     overflow (hidden OR clip) makes it a scroll container and breaks
     position:sticky descendants in Safari/iOS — so body stays visible. */
  html { overflow-x: hidden; overflow-x: clip; }
  body { overflow-x: visible; }

  /* --- Top nav ------------------------------------------------------ */
  .topnav {
    padding: 12px 18px;
    padding-top: max(12px, env(safe-area-inset-top, 12px));
  }
  .topnav .brand { font-size: 13px; gap: 8px; }
  .topnav .brand .brand-name { font-size: 18px; }
  .topnav .brand .brand-mark { height: 20px; }
  .topnav .links { gap: 16px; font-size: 10px; letter-spacing: 0.12em; }

  /* --- Floating UI -------------------------------------------------- */
  .variant-toggle { bottom: 16px; left: 16px; font-size: 10px; }
  .shuffle-btn { bottom: 16px; right: 16px; padding: 8px 12px; font-size: 10px; }
  .tweaks { left: 12px; right: 12px; width: auto; bottom: 80px; }

  /* --- Variant A / C home ------------------------------------------- */
  .variant-a, .variant-c { padding: 88px 20px 32px; gap: 32px; }
  .va-left { padding: 0; gap: 24px; }
  .va-eyebrow { font-size: 10px; gap: 12px; }
  .va-cover, .vc-cover { width: 100%; max-width: 360px; }
  .va-cta { bottom: 20px; right: 20px; padding: 12px 18px 10px; font-size: 12px; }
  .va-meta-row { gap: 22px; font-size: 11px; }
  .va-pull { font-size: 16px; padding-top: 14px; }

  .vc-index { padding-right: 12px; max-height: 320px; }
  .vc-row { grid-template-columns: 36px 1fr 50px; gap: 12px; padding: 10px 0; }
  .vc-row .t-title { font-size: 16px; }
  .vc-row .t-artist { font-size: 10px; }
  .vc-info h2 { font-size: 32px; }
  .vc-info p { font-size: 15px; }

  /* --- Variant B (typographic) ------------------------------------- */
  .vb-top, .vb-meta { left: 20px; right: 20px; }
  .vb-top { top: 64px; font-size: 10px; letter-spacing: 0.16em; }
  .vb-meta { bottom: 28px; font-size: 11px; gap: 16px; }
  .vb-meta .title { font-size: 26px; }
  .vb-giant, .vb-giant-fg { font-size: 56vh; }
  .vb-cover { left: 12%; right: 12%; top: 22%; bottom: 30%; }

  /* --- List page ---------------------------------------------------- */
  .page-head { padding: 28px 20px 24px; grid-template-columns: 1fr; gap: 18px; }
  .page-head h1 { font-size: clamp(40px, 11vw, 56px); }
  .page-head .lede { font-size: 15px; }

  .toolbar { position: static; top: auto; padding: 12px 20px; gap: 12px; font-size: 10px; }
  .toolbar-group { gap: 6px; }
  .toolbar .right { gap: 6px; }
  .chip { padding: 5px 9px; font-size: 10px; }
  .toolbar-btn { padding: 7px 11px; font-size: 10px; }
  .count-label { font-size: 10px; }

  /* Toolbar fully stacks on mobile so every control is on-screen (was forcing
     a horizontal scroll for the filters and jump pills). */
  .tb-row--main { flex-direction: column; align-items: stretch; gap: 12px; }
  .tb-row--main .search-field { max-width: none; flex: 1 1 auto; }
  .tb-row--main .search-field:focus-within { max-width: none; }
  .tb-row--main .lp-filters { width: 100%; }
  .tb-row--main .lp-filters .mc-select { flex: 1 1 0; min-width: 0; }
  .tb-row--main .lp-filters .mc-select select { width: 100%; }
  .tb-row--main .right { margin-left: 0; justify-content: space-between; width: 100%; }
  /* Jump pills wrap onto multiple rows instead of scrolling off-screen. */
  .tb-row--jump { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tb-row--jump .range-pills { flex-wrap: wrap; overflow-x: visible; width: 100%; }

  .list { padding: 0 20px 120px; }
  .entry {
    grid-template-columns: auto 1fr 36px;
    grid-template-areas:
      "rank cover heard"
      "info info info";
    column-gap: 16px;
    row-gap: 14px;
    padding: 26px 0;
    align-items: start;
  }
  .entry .rank-num { grid-area: rank; font-size: 44px; line-height: 0.9; align-self: center; margin: 0; padding-right: 2px; }
  .entry .cover-slot { grid-area: cover; width: 120px; height: 120px; justify-self: start; }
  .entry .heard-col { grid-area: heard; align-self: start; flex-direction: column; gap: 4px; }
  .entry .info { grid-area: info; min-width: 0; }
  .entry .info h3 { font-size: 24px; line-height: 1.08; }
  .entry .info .artist-line { font-size: 11px; margin-bottom: 10px; }
  .entry .info .blurb { font-size: 14px; max-width: none; line-height: 1.5; }
  .entry .info .meta { font-size: 10px; gap: 10px; }
  .entry .info .meta span::before { margin-right: 10px; }
  .entry .info .kicker { font-size: 10px; }
  .read-more { font-size: 10px; }
  .heard-label { display: none; }

  .progress { bottom: 14px; padding: 8px 14px; font-size: 10px; gap: 10px; }
  .progress .bar { width: 90px; }

  /* --- Album page hero --------------------------------------------- */
  .hero {
    grid-template-columns: 1fr;
    /* 80px top became a gap once the affiliate strip above it was withdrawn; see
       the 900px block. On a phone that was a fifth of the viewport before the
       cover appeared. */
    padding: 28px 20px 32px;
    gap: 28px;
    display: flex; flex-direction: column;
  }
  /* Cover leads on mobile (was appearing below the text + scorecards because
     it's last in source order). order:-1 lifts it to the top. */
  .hero > .cover-stack { order: -1; }
  .hero > div:not(.cover-stack):not(.hero-num) { order: 0; }
  .hero .rank-line { font-size: 10px; gap: 10px; letter-spacing: 0.18em; margin-bottom: 12px; }
  .hero h1 { font-size: clamp(40px, 11vw, 60px); margin-bottom: 10px; }
  .hero .artist { font-size: 14px; margin-bottom: 16px; }
  .hero .dek { font-size: 17px; margin-bottom: 24px; }
  .hero .hero-meta {
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    padding-top: 16px;
    max-width: none;
  }
  .hero .hero-meta .cell { font-size: 13px; }
  .hero-num { font-size: min(40vh, 280px); right: -20px; bottom: -30px; opacity: 0.04; }

  .cover-stack {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 8px 0;
    overflow: visible;
  }
  .cover-stack .vinyl { display: none; }
  .cover-stack .cover-main {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    height: auto;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
  }
  /* The Sleeve/cover fills its square container directly; force its root to
     100% so it neither overflows nor leaves a gap (replaces an old zoom:0.6
     hack that shrank the art inside a full-size box, leaving a large void). */
  .cover-stack .cover-main > div {
    width: 100% !important; height: 100% !important; zoom: 1;
  }

  /* Same trick wherever a Sleeve is dropped at a fixed inline size and the
     CSS slot is narrower than the inline pixel size. */
  .hc-cover { zoom: 0.6; overflow: hidden; }
  .pod-cover { zoom: 0.6; overflow: hidden; }

  /* About-the-cover: 420×420 inline WGOCover, sticky column — shrink + center */
  .cover-about-art {
    position: static;
    max-width: 280px;
    margin: 0 auto 6px;
    overflow: hidden;
    min-width: 0;
  }
  .cover-about-art .wgo-cover { zoom: 0.65; }
  .cover-about { min-width: 0; }
  .cover-about-body { min-width: 0; display: flex; flex-direction: column; }
  /* On mobile the numbered dots act as a selector and the note appears
     directly under the image, so it's obvious the dot changed the copy.
     order pulls the hint + active note to the top of the body column. */
  .cover-about-body .cover-hint { order: -2; margin-top: 0; margin-bottom: 14px; }
  .cover-about-body .cover-callout-active { order: -1; margin-top: 0; margin-bottom: 22px; scroll-margin-top: 90px; }
  .cover-about-body .cover-credits { order: 0; }
  .cover-credits { grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  .cover-story-lede { font-size: 17px; }
  .cover-story-p { font-size: 15px; }

  /* Making-of: lightbox + frames already collapse at 720, but tighten caption */
  .mk-cap { padding: 10px 12px; }
  .mk-cap-title { font-size: 13px; }
  .mk-frame-large { aspect-ratio: 4 / 3; }

  /* tagline */
  .tagline-block { margin: 18px 0 24px; padding-top: 14px; }
  .tagline { font-size: 18px; }
  .tagline-label { font-size: 9px; }

  /* signals (scorecards) — already collapse at 700, tighten more */
  .signals { gap: 10px; margin-top: 16px; padding-top: 16px; }
  .sc-head { gap: 8px 10px; padding: 12px 14px; }
  .sc-val-wrap { min-width: 90px; }
  .sc-val { font-size: 24px; }
  .sc-score { font-size: 19px; }
  .sc-heat-meter { width: 90px; }
  .sc-tip { width: 240px; }
  .sc-heat .sc-tip { right: -4px; }

  /* --- Essay / Dossier wrappers ------------------------------------ */
  .essay, .dossier { padding: 0 20px; }

  .chapter, .dsection {
    /* minmax(0, 1fr) lets the track shrink below its content's intrinsic
       min-size — without this, any wide unbreakable child (e.g. an
       essay-reader bar with nowrap meta text) bursts the grid wider than
       the viewport. */
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 48px 0;
    min-width: 0;
    /* The section box top sits ~115px above its heading (top padding + the
       stacked numeral/eyebrow label). A large scroll-margin would land that
       empty box top below the bars, leaving the heading mid-screen. A small
       margin lets the padding tuck under the bars so the heading lands just
       below them. */
    scroll-margin-top: 8px;
  }
  /* Hotspot callouts on desktop sit to the right of the dot (left:36px,
     width:230px). On a phone that pushes off-screen, and because the callout
     is nested inside the absolutely-positioned dot button, normal repositioning
     anchors to the tiny dot. So on mobile we lift it out with position:fixed
     and show it as a bottom sheet — always fully visible, never clipped. */
  .wgo-hot .wgo-hot-callout {
    position: fixed;
    left: 12px; right: 12px; bottom: 16px; top: auto;
    width: auto; max-width: none; transform: none;
    z-index: 1200;
    padding: 16px 18px;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
  }
  .wgo-hot-callout .wgo-hot-body { font-size: 14px; }
  /* Reset max-widths inherited from the desktop reading measure so long-form
     paragraphs don't keep a wide intrinsic size on mobile. */
  .longform, .longform p, .longform p.lede,
  .chapter-body, .chapter-body p, .chapter-body p.lede,
  .dek-large {
    max-width: 100%;
    min-width: 0;
  }
  .chapter-label, .dsection-label {
    position: static;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    font-size: 10px; line-height: 1.3;
  }
  .chapter-label .chno, .dsection-label .chno {
    font-size: 36px; margin-bottom: 2px; display: block; line-height: 0.9;
  }

  .chapter-body h2, .dsection-body > h2 {
    font-size: clamp(28px, 8.5vw, 40px);
    margin-bottom: 18px;
  }
  .chapter-body p, .longform p {
    font-size: 16px; line-height: 1.6; margin-bottom: 16px;
  }
  .chapter-body p.lede, .longform p.lede { font-size: 18px; }
  .chapter-body p:first-of-type::first-letter,
  .longform p:first-of-type::first-letter { font-size: 3.2em; padding: 4px 8px 0 0; }

  .dek-large { font-size: 18px; padding: 16px 0; margin-bottom: 28px; }

  /* Pull quotes — kill negative margin that overflowed */
  .pull, .longform .pullable {
    margin-left: 0; margin-right: 0;
    font-size: 22px;
    padding: 16px 0 16px 18px;
  }
  .longform .pullable { padding: 18px 0; }

  .sub-h { margin: 24px 0 10px; font-size: 9px; }

  /* --- Figure (deep dive sidebar boxes) ---------------------------- */
  .figure { padding: 18px; margin: 26px 0; }
  .figure li {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0;
  }
  .figure li span:last-child { text-align: left; }

  /* --- Tracks / tracklist ------------------------------------------ */
  .tracks-grid > li > header {
    grid-template-columns: 40px 1fr 60px;
    gap: 12px;
    padding: 14px 0;
  }
  .tracks-grid .tname { font-size: 18px; }
  .tracks-grid .tcreds { display: none; }
  .tracks-grid > li.open .tbody, .tracks-grid .tbody { padding-left: 52px; }
  .tracks-grid > li.open .tbody { padding-bottom: 18px; }
  .tracks-grid .tnote { font-size: 15px; }
  .tracks-grid .tlisten { font-size: 13px; padding: 10px 12px; }
  .tplay { width: 32px; height: 32px; }
  .tlisten-links { gap: 6px; margin-top: 10px; }
  .tlisten-link { font-size: 10px; padding: 4px 8px; }
  .tracks-tools { padding: 10px 0 12px; gap: 12px; }
  .tracks-playall { font-size: 10px; padding: 7px 12px 7px 8px; }

  .tracklist-essay li { grid-template-columns: 30px 1fr auto; gap: 14px; padding: 12px 0; }
  .tracklist-essay .tname { font-size: 18px; }

  /* --- Lyric block ------------------------------------------------- */
  .lyric { padding: 36px 22px; font-size: 22px; margin: 32px 0; }
  .lyric::before, .lyric::after { font-size: 72px; }
  .lyric::before { top: 4px; left: 8px; }
  .lyric::after { bottom: -18px; right: 8px; }

  /* --- Stats / values strip ---------------------------------------- */
  .stats { grid-template-columns: 1fr; margin: 28px 0; }
  .stats .stat { padding: 22px 18px; border-bottom: 1px solid var(--rule); }
  .stats .stat b { font-size: 38px; }

  .values-strip { grid-template-columns: 1fr; }
  .values-strip > div { padding: 16px; border-bottom: 1px solid var(--rule); }

  /* --- Keystats / dossier grid ------------------------------------- */
  .keystats { grid-template-columns: 1fr; }
  .keystats > div {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0 !important;
    border-right: none !important;
    border-left: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .keystats dd { font-size: 14px; }

  .dossier-grid { grid-template-columns: 1fr; }
  .d-block {
    border-right: none !important;
    border-bottom: 1px solid var(--rule);
    padding: 18px 20px;
  }
  .d-block:last-child { border-bottom: none; }
  .d-block p { font-size: 14px; }

  /* --- Personnel / myths / influence / recs ------------------------ */
  .personnel-list li { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
  .pname { font-size: 13px; }
  .prole { font-size: 14px; }

  .myth { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  .myth-status { justify-self: start; padding: 4px 8px; }
  .myth-claim { font-size: 17px; }
  .myth-detail { font-size: 14px; }

  .influence-cols { grid-template-columns: 1fr; gap: 24px; }
  .infl-title { font-size: 16px; }
  .infl-how { font-size: 13px; }

  .recs-cols { grid-template-columns: 1fr; gap: 18px; }
  .rec-title { font-size: 16px; }
  .rec-why { font-size: 13px; }

  /* --- Holy grail / charts ----------------------------------------- */
  .holy-grail { padding: 18px 20px; }
  .hg-detail { font-size: 15px; }
  .reissue-note { padding: 18px 20px; }
  .reissue-note p { font-size: 14px; }

  .charts-table { font-size: 12px; }
  .charts-table th, .charts-table td { padding-right: 6px; font-size: 12px; }
  .charts-footer { grid-template-columns: 1fr; gap: 18px; padding: 18px; }

  /* --- Timeline (stacked layout inherited from the <=900px block; only
     the type sizes change here) ------------------------------------- */
  .tl-date { font-size: 12px; }
  .timeline p { font-size: 14px; }

  /* --- Today block ------------------------------------------------- */
  .today-block { font-size: 16px; padding: 20px; }

  /* --- Prompts ----------------------------------------------------- */
  .prompts li { grid-template-columns: 36px 1fr; gap: 14px; padding: 16px 0; }
  .pnum { font-size: 18px; }
  .prompts p { font-size: 17px; }

  /* --- Endnote ----------------------------------------------------- */
  .endnote { padding: 56px 20px 80px; }
  .endnote h3 { font-size: 28px; }
  .endnote p { font-size: 16px; }
  .endnote .cta { padding: 14px 20px; font-size: 13px; }

  /* --- Per-track rating widget ------------------------------------- */
  .trate { gap: 10px; padding: 10px 12px; }
  .trate-star { font-size: 20px; padding: 2px 2px; }
  .trate-avg b { font-size: 15px; }

  /* --- Ledger ------------------------------------------------------ */
  .ledger-controls { gap: 12px; }
  .ledger-filters, .ledger-sort { gap: 4px; }
  .lf, .ls { padding: 6px 9px; font-size: 10px; }
  .ledger-grid { grid-template-columns: 1fr; }

  /* --- Magazine home + manifesto small tightening ------------------ */
  .mag section { padding: 48px 20px !important; }
  .mag-masthead { padding: 22px 20px 28px !important; }
  .ranked, .paths, .archive, .desk, .news, .manifesto, .pod, .foot, .teaser, .hero-cover {
    padding-left: 20px !important; padding-right: 20px !important;
  }
  .teaser { padding-top: 56px !important; padding-bottom: 56px !important; gap: 28px; }
  .t-body { font-size: 17px; }
  .ranked, .paths, .archive, .desk { padding-top: 64px !important; padding-bottom: 64px !important; }
  .news { padding-top: 64px !important; padding-bottom: 64px !important; }
  .manifesto { padding-top: 72px !important; padding-bottom: 72px !important; }
  .pod { padding-top: 56px !important; padding-bottom: 56px !important; gap: 36px; }
  .pod-right { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .pod-art { grid-column: 1; }
  .pod-cover { width: 88px; height: 88px; }
  .pod-play { grid-column: 1; justify-self: start; width: 56px; height: 56px; }
  .pod-time { grid-column: 1; text-align: left; }
  .pod-hosts { gap: 18px; flex-wrap: wrap; }
  .pod-title { font-size: clamp(32px, 9vw, 44px); }
  .pod-sub { font-size: 16px; }

  .r-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
  .r-head h2 { font-size: clamp(30px, 8vw, 42px); }
  .r-grid { grid-template-columns: 1fr; gap: 28px; }
  .r-filters { padding: 14px 16px; gap: 18px; }

  .p-grid, .a-grid { grid-template-columns: 1fr; gap: 22px; }
  .p-card { padding: 28px 22px; }
  .p-label { font-size: 24px; }
  .p-n { font-size: 44px; }

  .desk-grid { grid-template-columns: 1fr; gap: 32px; }
  .desk-cover-col { position: static; max-width: 220px; }
  .desk-title { font-size: 32px; }
  .desk-intro { font-size: 16px; }
  .desk-values { grid-template-columns: 1fr; gap: 12px; }
  .desk-dl > div { grid-template-columns: 1fr; gap: 4px; padding: 8px 0; }

  .news h2 { font-size: clamp(28px, 8vw, 40px); }
  .news-body { font-size: 16px; }
  .news-form { flex-direction: column; background: transparent; border: none; gap: 8px; }
  .news-form input { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); padding: 12px 14px; border-radius: 6px; }
  .news-form button { border-radius: 6px; padding: 12px 18px; }

  .manifesto { padding-left: 20px !important; padding-right: 20px !important; }
  .m-body { font-size: clamp(18px, 4.8vw, 22px); }

  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 28px; }
  .foot-bottom { font-size: 10px; gap: 10px; }
  .foot-brand { font-size: 22px; }

  /* --- Hero-cover (magazine home hero) ----------------------------- */
  .hero-cover { padding-top: 56px !important; padding-bottom: 56px !important; gap: 32px; }
  .hc-stamp { width: 72px; height: 72px; top: -10px; right: -10px; }
  .hc-stamp .s2 { font-size: 26px; }

  /* --- Manifesto homepage extra mobile tightening ------------------ */
  /* 64px clears the fixed nav on non-notch devices. On iOS (viewport-fit=cover)
     the nav grows by the safe-area inset (.topnav padding-top: max(12px, inset)),
     so add that delta here — otherwise the first child (the price ticker) hides
     BEHIND the nav and reads as "removed" on mobile. Mirrors the crumb-bar fix. */
  .manifesto-home { padding-top: calc(64px + max(0px, env(safe-area-inset-top, 0px) - 12px)); }
  .manifesto-home .mf-section { padding: 0 20px; }
  .mf-hero { padding: 28px 20px 48px; gap: 18px; }
  .mf-section-rule { padding: 40px 0 20px; font-size: 10px; }
  .mf-h2 { font-size: clamp(30px, 8vw, 44px); margin-bottom: 20px; }
  .mf-hero-meta { font-size: 10px; gap: 10px; padding-bottom: 10px; }
  .mf-headline { font-size: clamp(24px, 7vw, 36px); }
  .mf-hero-sub { font-size: 15px; }
  .mf-hero-cta { padding: 14px 20px; font-size: 12px; }
  .mf-hero-footnote { margin-top: 32px; font-size: 10px; }
  .mf-hero-now { padding: 8px 12px; font-size: 11px; gap: 8px; }
  .mf-hero-now-title { padding-left: 8px; font-size: 12px; }
  .mf-hero-now-label { font-size: 9px; }
  .mf-premise-grid { gap: 24px; padding-bottom: 48px; }
  .mf-premise-body { font-size: 16px; }
  .mf-premise-final { font-size: 19px; padding-top: 16px; margin-top: 18px !important; }
  .mf-method { padding-bottom: 64px; }
  .mf-dim { padding: 22px; }
  .mf-dim-label { font-size: 18px; }
  .mf-dim-note { font-size: 14px; }
  .mf-method-block p { font-size: 15px; }
  .mf-proof { padding-bottom: 64px; }
  .mf-h2-proof { margin-bottom: 28px; }
  .mf-proof-body { padding: 18px 20px 22px; gap: 10px; }
  .mf-proof-title { font-size: 24px; }
  .mf-proof-pull { font-size: 17px; padding-left: 12px; }
  .mf-proof-text { font-size: 14px; }
  .mf-top10 { padding-bottom: 64px; }

  /* --- Affiliate strip ------------------------------------------------ */
  .aff-strip-inner {
    padding: 10px 14px 12px;
    gap: 8px;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .aff-strip-lede {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .aff-strip-eyebrow { font-size: 9px; letter-spacing: 0.18em; }
  .aff-strip-title {
    font-size: 11px;
    line-height: 1.3;
    color: var(--ink-mute);
  }
  .aff-strip-title em { color: var(--ink); font-weight: 500; }
  .aff-strip-disclosure { display: none; }
  .aff-strip-retailers {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    overflow: visible;
    margin: 0;
    padding: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .aff-strip-retailers::-webkit-scrollbar { display: none; }
  .aff-chip {
    width: 100%;
    padding: 7px 10px;
    gap: 4px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .aff-chip-name { font-size: 11px; flex-shrink: 0; }
  .aff-chip-price { font-size: 10px; margin-left: auto; }
  .aff-chip svg { flex-shrink: 0; }

  /* --- Buy rail — keep the rail small + low on small screens -------- */
  .buyrail { left: 8px; right: 8px; width: auto; bottom: 8px; padding: 14px 16px; }
  .buyrail-title { font-size: 18px; }
  .buyrail-primary { padding: 12px 14px; }
}

/* --- Extra narrow (≤ 380) — squeeze stubborn pieces ------------------- */
@media (max-width: 380px) {
  .topnav { padding: 10px 14px; }
  .topnav .brand { font-size: 12px; }
  .topnav .brand .brand-name { font-size: 16px; }
  .topnav .brand .brand-mark { height: 18px; }
  .topnav .links { gap: 12px; font-size: 9px; }
  .hero h1 { font-size: 38px; }
  .page-head h1 { font-size: 40px; }
  .entry .info h3 { font-size: 22px; }
  .entry .rank-num { font-size: 38px; }
  .entry .cover-slot { width: 108px; height: 108px; }
  .chapter-body h2, .dsection-body > h2 { font-size: 26px; }
  .vc-info h2 { font-size: 26px; }
  .mf-headline { font-size: 24px; }
}


/* ============================================================
   Home — Cover wall mosaic (new dynamic section between hero
   and premise). Pure imagery, no body copy.
   ============================================================ */
.mf-cover-wall {
  padding: 0 56px 60px;
  margin-top: -8px;
}
.mf-cw-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  padding: 48px 0 28px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
}
.mf-cw-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.mf-cw-h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0;
  max-width: 22ch;
  color: var(--ink);
  text-wrap: balance;
}
.mf-cw-h2 em {
  font-style: italic;
  color: var(--accent);
}
.mf-cw-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 36px;
  text-align: right;
}
.mf-cw-stat-val {
  font-family: var(--sans);
  font-weight: 900;
  font-size: 38px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.mf-cw-stat-lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 8px;
}
.mf-cw-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
}
.mf-cw-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0a0806;
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  animation: mfCwFade 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes mfCwFade {
  to { opacity: 1; transform: translateY(0); }
}
.mf-cw-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.02);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s;
}
.mf-cw-tile:hover img,
.mf-cw-tile:focus-visible img {
  transform: scale(1.08);
  filter: saturate(1.15) contrast(1.05);
}
.mf-cw-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.92) 0%, rgba(10, 8, 6, 0.65) 55%, transparent 100%);
  color: var(--paper);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.25s;
  pointer-events: none;
}
.mf-cw-tile:hover .mf-cw-overlay,
.mf-cw-tile:focus-visible .mf-cw-overlay {
  opacity: 1;
  transform: translateY(0);
}
.mf-cw-tile-rank {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243, 237, 225, 0.7);
}
.mf-cw-tile-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.1;
  color: var(--paper);
  letter-spacing: -0.01em;
  margin-top: 2px;
  text-wrap: balance;
}
.mf-cw-tile-art {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 237, 225, 0.65);
  margin-top: 2px;
}
.mf-cw-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.mf-cw-foot-text {
  font-family: var(--body-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 64ch;
  text-wrap: pretty;
}
.mf-cw-foot-mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   Home — Top 10 row cover thumbnail
   ============================================================ */
.mf-t10-cover {
  width: 64px;
  height: 64px;
  overflow: hidden;
  background: #0a0806;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 14px -8px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}
.mf-t10-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mf-top10-row:hover .mf-t10-cover img {
  transform: scale(1.06);
}

/* ============================================================
   Cover wall — responsive
   ============================================================ */
@media (max-width: 1180px) {
  .mf-cw-grid { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 900px) {
  .mf-cover-wall { padding: 0 32px 48px; }
  .mf-cw-banner { grid-template-columns: 1fr; gap: 24px; }
  .mf-cw-stats { justify-content: flex-start; text-align: left; gap: 26px; }
  .mf-cw-grid { grid-template-columns: repeat(6, 1fr); }
  .mf-cw-stat-val { font-size: 30px; }
}
@media (max-width: 600px) {
  .mf-cover-wall { padding: 0 20px 36px; }
  .mf-cw-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .mf-cw-h2 { font-size: 30px; }
  .mf-t10-cover { width: 52px; height: 52px; }
}


/* ============================================================
   PlaceInHistory (II½) — section styles
   ============================================================ */
.pih { display: flex; flex-direction: column; gap: 36px; }

.pih-opening {
  font-family: var(--body-serif);
  font-size: 19px; line-height: 1.55;
  color: var(--ink); margin: 0;
  max-width: 64ch;
  text-wrap: pretty;
}
.pih-opening::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.6em;
  line-height: 0.85;
  float: left;
  padding: 8px 12px 0 0;
  color: var(--accent);
}

/* Numbered context cards — desktop: 2-up grid; mobile: vertical timeline */
.pih-context {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.pih-context-rail { display: none; } /* desktop: not used */

.pih-card {
  position: relative;
  padding: 22px 26px 26px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  background: var(--paper);
  transition: background 0.2s;
}
.pih-card:hover { background: rgba(255,255,255,0.4); }

.pih-card-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  padding-top: 4px;
  line-height: 1;
}

.pih-card-date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}

.pih-card-event {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}

.pih-card-relevance {
  font-family: var(--body-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

/* Closing — so-what tied back to album */
.pih-closing {
  position: relative;
  padding: 24px 28px 26px;
  background: var(--ink);
  color: var(--paper);
}
.pih-closing-rule {
  position: absolute;
  top: 0; left: 28px;
  width: 44px; height: 3px;
  background: var(--accent);
}
.pih-closing-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243,237,225,0.65);
  margin-bottom: 12px;
  padding-top: 6px;
}
.pih-closing-body {
  font-family: var(--body-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--paper);
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}

/* ============================================================
   WhoDidItBetter (V½) — section styles
   ============================================================ */
.wdib { display: flex; flex-direction: column; gap: 24px; }

.wdib-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.wdib-head-lede {
  font-family: var(--body-serif);
  font-size: 17px;
  color: var(--ink);
}
.wdib-head-lede strong { font-weight: 700; color: var(--accent); }
.wdib-head-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.wdib-head-of { color: var(--ink-2); }

.wdib-tally {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wdib-tally-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
}
.wdib-tally-dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.wdib-tally-pill.v-better .wdib-tally-dot   { background: oklch(0.55 0.16 145); }
.wdib-tally-pill.v-different .wdib-tally-dot { background: oklch(0.62 0.14 70); }
.wdib-tally-pill.v-lesser .wdib-tally-dot   { background: oklch(0.55 0.18 25); }

/* Cards */
.wdib-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }

.wdib-item {
  border-top: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.15s;
}
.wdib-item:last-child { border-bottom: 1px solid var(--rule); }
.wdib-item:hover { background: rgba(255,255,255,0.4); }

.wdib-item-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 4px;
  cursor: pointer;
}

.wdib-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.wdib-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 4px;
}
.wdib-meta-sep { color: var(--rule); padding: 0 2px; }
.wdib-meta-artist {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.wdib-meta-year { color: var(--ink-mute); }

.wdib-verdict-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background: transparent;
  white-space: nowrap;
}
.wdib-item.v-better   .wdib-verdict-badge { color: oklch(0.45 0.14 145); background: oklch(0.95 0.04 145); border-color: oklch(0.55 0.16 145); }
.wdib-item.v-different .wdib-verdict-badge { color: oklch(0.42 0.10 70);  background: oklch(0.94 0.04 70);  border-color: oklch(0.62 0.14 70); }
.wdib-item.v-lesser   .wdib-verdict-badge { color: oklch(0.42 0.16 25);  background: oklch(0.94 0.03 25);  border-color: oklch(0.55 0.18 25); }

.wdib-verdict-chev {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 20px;
  color: var(--ink-mute);
  width: 16px;
  text-align: center;
  line-height: 1;
}

/* Location line inside expanded body (e.g. "On Mother's Milk, 1989") */
.wdib-item-where {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin: 0 0 10px;
  padding-left: 4px;
}
.wdib-item-where em {
  font-style: italic;
  color: var(--ink-2);
  font-family: var(--body-serif);
  font-size: 13px;
  letter-spacing: 0;
}

.wdib-item-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.wdib-item.open .wdib-item-body { grid-template-rows: 1fr; }
.wdib-item-body-inner {
  overflow: hidden;
  min-height: 0;
}
.wdib-item.open .wdib-item-body-inner {
  padding-bottom: 18px;
}

.wdib-item-body p {
  font-family: var(--body-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 10px;
  max-width: 64ch;
  text-wrap: pretty;
  padding-left: 4px;
}

.wdib-item-links {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  padding-left: 4px;
}
.wdib-item-links-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  margin-right: 4px;
}
.wdib-link {
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.wdib-link:hover { color: var(--accent); border-color: var(--accent); }
.wdib-link-sep { color: var(--ink-mute); }

/* WDIB — per-cover Listen rows (Original / Cover × Spotify/Apple/YouTube/Tidal) */
.wdib-listen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  margin-left: 4px;
  background: rgba(255,255,255,0.45);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.wdib-listen-row {
  display: grid;
  grid-template-columns: 64px auto;
  gap: 14px;
  align-items: center;
}
.wdib-listen-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Inline play button — mirrors track-by-track .tplay aesthetic, condensed */
.wdib-play {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.wdib-play:hover { background: var(--accent); border-color: var(--accent); }
.wdib-play.on { background: var(--accent); border-color: var(--accent); }

/* Compact icon-only variant — used in the WDIB row header */
.wdib-play.wdib-play--compact {
  padding: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  justify-content: center;
}
.wdib-play.wdib-play--compact .wdib-play-icon {
  width: 100%; height: 100%;
  background: transparent;
}
.wdib-play.wdib-play--compact .wdib-play-icon svg {
  width: 12px; height: 12px;
}
.wdib-play.disabled {
  background: transparent;
  color: var(--ink-mute);
  border-color: var(--rule);
  cursor: not-allowed;
}
.wdib-play.disabled:hover { background: transparent; border-color: var(--rule); }
.wdib-play-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
}
.wdib-play.disabled .wdib-play-icon { background: transparent; }
.wdib-play-spinner {
  width: 9px; height: 9px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: wdib-spin 0.7s linear infinite;
}
@keyframes wdib-spin { to { transform: rotate(360deg); } }

.wdib-listen-svcs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.wdib-svc {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wdib-svc:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wdib-svc.sp:hover { background: #1DB954; border-color: #1DB954; color: #fff; }
.wdib-svc.am:hover { background: #FA243C; border-color: #FA243C; color: #fff; }
.wdib-svc.yt:hover { background: #FF0000; border-color: #FF0000; color: #fff; }
.wdib-svc.tl:hover { background: #000; border-color: #000; color: #fff; }

/* ============================================================
   Mobile — PIH + WDIB
   ============================================================ */
@media (max-width: 760px) {
  .pih-opening { font-size: 16.5px; }
  .pih-opening::first-letter { font-size: 2.2em; padding: 6px 10px 0 0; }

  /* Context cards become a single-column vertical timeline */
  .pih-context {
    grid-template-columns: 1fr;
    border-left: none;
    border-top: none;
    padding-left: 22px;
  }
  .pih-context-rail {
    display: block;
    position: absolute;
    left: 7px; top: 14px; bottom: 14px;
    width: 1px; background: var(--rule);
  }
  .pih-card {
    grid-template-columns: 1fr;
    padding: 16px 0 22px 8px;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    background: transparent;
  }
  .pih-card:last-child { border-bottom: none; }
  .pih-card:hover { background: transparent; }
  .pih-card-num {
    position: absolute;
    left: -22px; top: 18px;
    background: var(--paper);
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    font-size: 9px;
    letter-spacing: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
  }
  .pih-card-event { font-size: 19px; }
  .pih-card-relevance { font-size: 14px; }

  .pih-closing { padding: 20px 18px 22px; }
  .pih-closing-rule { left: 18px; }
  .pih-closing-body { font-size: 15.5px; }

  /* WDIB mobile */
  .wdib-head { flex-direction: column; align-items: flex-start; }
  .wdib-item-head {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "play name chev"
      "play meta badge";
    gap: 6px 12px;
    padding: 12px 4px;
  }
  .wdib-play--compact { grid-area: play; }
  .wdib-name { grid-area: name; font-size: 16px; }
  .wdib-meta { grid-area: meta; margin-left: 0; }
  .wdib-verdict-badge { grid-area: badge; justify-self: start; font-size: 9px; padding: 4px 8px; }
  .wdib-verdict-chev { grid-area: chev; }
  .wdib-item-body p { font-size: 15px; }
}

/* ============================================================
   HOMEPAGE REVISION — May 2026 feedback pass
   Hero simplification, promoted "this week", relocated ticker,
   worked-example scorecard, commerce thread, interactive top-10.
   ============================================================ */

/* 1. Hero — dynamic editorial front page --------------------------- */
.mf-hero2 {
  position: relative;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 40px 56px 48px;
  overflow: hidden;
}
.mf-hero2-watermark {
  position: absolute;
  top: -0.32em; right: -0.04em;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(280px, 40vw, 620px);
  line-height: 0.8; color: var(--ink);
  opacity: 0.035; pointer-events: none; z-index: 0;
  user-select: none;
}
.mf-hero2-meta {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 30px;
  border-bottom: 1px solid var(--ink);
}
.mf-hero2-counter {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
  white-space: nowrap;
}
.mf-hero2-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.3fr 0.9fr;
  gap: 56px; align-items: start;
}
.mf-hero2-lead { display: flex; flex-direction: column; min-width: 0; }
.mf-hero2-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 22px;
  animation: mf-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.mf-hero2-headline {
  margin: 0; max-width: 18ch;
  display: flex; flex-direction: column; gap: 12px;
  text-wrap: balance;
  animation: mf-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s both;
}
.mf-hero2-hl-lead {
  font-family: var(--sans); font-weight: 900; font-style: normal;
  font-size: clamp(34px, 4vw, 60px); line-height: 0.95;
  color: var(--ink); letter-spacing: -0.03em;
}
.mf-hero2-hl-rest {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(21px, 2.05vw, 31px); line-height: 1.14;
  color: var(--ink-2); max-width: 22ch;
}
.mf-hero2-foot {
  margin-top: 38px; padding-top: 0;
  display: flex; flex-direction: column; gap: 24px;
  align-items: flex-start;
  animation: mf-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s both;
}
.mf-hero2-sub {
  font-family: var(--body-serif);
  font-size: clamp(16px, 1.35vw, 20px); line-height: 1.5;
  color: var(--ink-2); margin: 0; max-width: 52ch; text-wrap: pretty;
}
.mf-hero2-cta {
  background: var(--ink); color: var(--paper);
  padding: 17px 28px; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 12px;
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.mf-hero2-cta:hover { background: var(--accent); transform: translateY(-2px); }
.mf-hero2-cta svg { transition: transform 0.2s; }
.mf-hero2-cta:hover svg { transform: translateX(4px); }

/* The live feature — this week's deep dive as a vinyl spread */
.mf-hero2-feature {
  display: flex;
  animation: mf-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s both;
}
.mf-feat {
  display: flex; flex-direction: column;
  width: 100%; text-align: left;
  background: var(--ink); color: var(--paper);
  padding: 22px 26px 26px; cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mf-feat:hover { transform: translateY(-3px); }
.mf-feat-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(243, 237, 225, 0.7); margin-bottom: 6px;
}
.mf-feat-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); position: relative; flex-shrink: 0;
}
.mf-feat-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--accent); animation: mf-pulse 2s ease-out infinite;
}
.mf-feat-disc {
  position: relative;
  width: 100%; aspect-ratio: 1.32 / 1;
  margin: 14px 0 22px;
}
.mf-feat-vinyl {
  position: absolute; top: 50%; left: 24%;
  width: 76%; height: auto; aspect-ratio: 1 / 1;
  transform: translateY(-50%) rotate(0deg);
  border-radius: 50%; z-index: 1;
  background:
    repeating-radial-gradient(circle at center, #1c1c1c 0 1.5px, #0a0a0a 1.5px 4px),
    radial-gradient(circle at center, #161616 0 40%, #0c0c0c 40% 100%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(243,237,225,0.08);
  animation: mf-spin 11s linear infinite;
  transition: left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mf-feat-vinyl::before {
  content: ""; position: absolute; inset: 33%;
  border-radius: 50%; background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}
.mf-feat-vinyl::after {
  content: ""; position: absolute; inset: 46.5%;
  border-radius: 50%; background: #0a0a0a;
}
.mf-feat:hover .mf-feat-vinyl { left: 30%; animation-duration: 3.6s; }
.mf-feat-sleeve {
  position: absolute; top: 0; left: 0;
  height: 100%; aspect-ratio: 1 / 1; z-index: 2;
  border: 1px solid rgba(243, 237, 225, 0.16);
  overflow: hidden; background: #050505;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.mf-feat-sleeve img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-feat-rank {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--paper);
  background: rgba(10, 8, 6, 0.78); padding: 4px 9px;
  backdrop-filter: blur(2px);
}
.mf-feat-meta { margin-top: auto; }
.mf-feat-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 2.4vw, 36px); line-height: 1.02;
  letter-spacing: -0.01em; margin: 0; color: var(--paper);
}
.mf-feat-artist {
  font-family: var(--sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(243, 237, 225, 0.6); margin: 9px 0 12px;
}
.mf-feat-dek {
  font-family: var(--body-serif); font-size: 15.5px; line-height: 1.5;
  color: rgba(243, 237, 225, 0.82); margin: 0 0 16px; text-wrap: pretty;
}
.mf-feat-read {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.03em; color: var(--paper);
  padding-bottom: 2px; border-bottom: 1.5px solid rgba(243, 237, 225, 0.5);
}
.mf-feat:hover .mf-feat-read { color: var(--accent); border-color: var(--accent); }
.mf-feat:hover .mf-feat-read svg { transform: translateX(3px); }
.mf-feat-read svg { transition: transform 0.2s; }

@keyframes mf-spin { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes mf-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mf-feat-vinyl { animation: none; }
  .mf-hero2-eyebrow, .mf-hero2-headline, .mf-hero2-foot, .mf-hero2-feature { animation: none; }
}

/* 1b. Relocated kinetic ticker — ambient divider ------------------- */
.mf-ticker-divider {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  margin: 8px 0 0;
}
.mf-ticker-divider .mf-hero-ticker { padding: 14px 0; margin: 0; }

/* 4 (cover wall). Live / Coming progress indicators ---------------- */
.mf-cw-tile { position: relative; }
.mf-cw-tile.is-coming img { filter: grayscale(0.55) brightness(0.92); }
.mf-cw-tile.is-coming:hover img { filter: none; }
.mf-cw-status {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(10, 8, 6, 0.72);
  padding: 3px 7px 3px 6px; border-radius: 999px;
  backdrop-filter: blur(2px);
}
.mf-cw-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-mute); flex-shrink: 0;
}
.mf-cw-status.is-live .mf-cw-status-dot,
.mf-cw-status-dot.is-live {
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: mf-cw-livepulse 2.4s ease-out infinite;
}
@keyframes mf-cw-livepulse {
  0% { box-shadow: 0 0 0 0 rgba(217,119,87,0.6); }
  70%, 100% { box-shadow: 0 0 0 5px rgba(217,119,87,0); }
}
.mf-cw-legend {
  display: inline-flex; gap: 16px; margin: 0 8px;
  vertical-align: middle;
}
.mf-cw-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute);
}
.mf-cw-legend .mf-cw-status-dot { width: 7px; height: 7px; }

/* 3 (premise). Thesis pulled up as a standalone callout ------------ */
.mf-premise-thesis {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2.3vw, 28px); line-height: 1.3;
  color: var(--ink); margin: 0 0 26px;
  padding-left: 22px; border-left: 3px solid var(--accent);
  text-wrap: pretty;
}
/* drop cap belongs to the first argument paragraph now, not the thesis */
.mf-premise-thesis::first-letter { all: unset; }
.mf-premise-thesis + p::first-letter {
  font-family: var(--serif); font-style: italic;
  font-size: 64px; line-height: 0.85;
  float: left; padding: 6px 10px 0 0; color: var(--accent);
}

/* 4 (methodology). Worked-example scorecard ------------------------ */
.mf-worked { margin: 0 0 64px; }
.mf-worked-cap {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.mf-worked-card {
  border: 1px solid rgba(243, 237, 225, 0.28);
  background: rgba(243, 237, 225, 0.04);
  max-width: 760px;
}
.mf-worked-head {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 18px; align-items: center; width: 100%; text-align: left;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(243, 237, 225, 0.18);
  cursor: pointer; transition: background 0.18s;
}
.mf-worked-head:hover { background: rgba(243, 237, 225, 0.06); }
.mf-worked-cover {
  width: 56px; height: 56px; overflow: hidden;
  border: 1px solid rgba(243,237,225,0.3); background: #0a0a0a;
}
.mf-worked-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-worked-kicker {
  display: block;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(243,237,225,0.6); margin-bottom: 5px;
}
.mf-worked-title {
  font-family: var(--serif); font-style: italic;
  font-size: 24px; line-height: 1.05; color: var(--paper);
}
.mf-worked-artist { color: rgba(243,237,225,0.7); }
.mf-worked-composite { text-align: right; }
.mf-worked-comp-num {
  display: block; font-family: var(--sans); font-weight: 900;
  font-size: 34px; line-height: 1; color: var(--accent);
}
.mf-worked-comp-lbl {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(243,237,225,0.55);
}
.mf-worked-rows { padding: 14px 24px 18px; }
.mf-worked-row {
  display: grid; grid-template-columns: 130px 1fr 44px;
  gap: 18px; align-items: center; padding: 7px 0;
}
.mf-worked-dim {
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.01em; color: var(--paper);
}
.mf-worked-meter {
  height: 7px; border-radius: 4px;
  background: rgba(243,237,225,0.14); overflow: hidden;
}
.mf-worked-fill {
  display: block; height: 100%;
  background: var(--accent); border-radius: 4px;
}
.mf-worked-score {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--accent); text-align: right;
}
.mf-worked-foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 24px; border-top: 1px solid rgba(243,237,225,0.18);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em;
  color: rgba(243,237,225,0.6);
}
.mf-worked-link { color: var(--accent); white-space: nowrap; }
.mf-worked-head:hover ~ .mf-worked-foot .mf-worked-link { text-decoration: underline; }

/* 5 (proof). Commerce thread — "Own it on vinyl" link -------------- */
.mf-proof-actions {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start;
}
.mf-proof-actions .mf-proof-cta { margin-top: 0; }
.mf-proof-vinyl {
  font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.02em; color: var(--accent);
  cursor: pointer; transition: opacity 0.15s;
}
.mf-proof-vinyl:hover { opacity: 0.7; text-decoration: underline; }

/* 6 (top-10). Vinyl availability ----------------------------------- */
.mf-top10-row {
  grid-template-columns: 48px 64px 1fr 72px 104px 78px 92px 28px;
}
.mf-t10-vinyl { display: flex; align-items: center; }
.mf-t10-vinyl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 4px 9px 4px 7px;
}
.mf-t10-vinyl-badge svg { color: var(--accent); flex-shrink: 0; }

/* 7 (newsletter). Two-promise framing ----------------------------- */
.mf-nl-promises {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  margin: 28px 0 4px; max-width: 760px;
}
.mf-nl-promises-single { grid-template-columns: 1fr; max-width: 560px; }
.mf-nl-promise {
  padding-top: 16px; border-top: 2px solid var(--ink);
}
.mf-nl-promise-tag {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.mf-nl-promise-text {
  font-family: var(--body-serif); font-size: 16px; line-height: 1.5;
  color: var(--ink-2); text-wrap: pretty;
}

/* 8 (sign-off). Forward path -------------------------------------- */
.mf-signoff-cta-wrap { display: flex; justify-content: center; margin: 8px 0 40px; }
.mf-signoff-cta {
  background: var(--ink); color: var(--paper);
  padding: 18px 32px; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  letter-spacing: 0.03em;
  display: inline-flex; align-items: center; gap: 12px;
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.mf-signoff-cta:hover { background: var(--accent); transform: translateY(-2px); }
.mf-signoff-cta svg { transition: transform 0.2s; }
.mf-signoff-cta:hover svg { transform: translateX(4px); }
.mf-signoff-mast--link {
  cursor: pointer;
  background: none; border: none;
  border-top: 1px solid rgba(243, 237, 225, 0.18);
  transition: color 0.2s;
}
.mf-signoff-mast--link:hover .mf-mast-word { color: var(--accent); }

/* Responsive ------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1180px) {
  /* Tablet band: drop the two widest low-priority columns so the title
     track keeps room — prevents 3-line title wrap / tall rows. */
  .mf-top10-row {
    grid-template-columns: 42px 58px minmax(0, 1fr) 60px 84px 26px;
    column-gap: 16px;
  }
  .mf-t10-genre, .mf-t10-score { display: none; }
}
@media (max-width: 980px) {
  .mf-hero2-grid { grid-template-columns: 1fr; gap: 38px; }
  .mf-hero2-feature { max-width: 460px; }
  .mf-hero2-foot { padding-top: 28px; }
}
@media (max-width: 900px) {
  .mf-hero2 { padding: 28px 24px 36px; }
  .mf-hero2-meta { margin-bottom: 24px; padding-bottom: 16px; }
  .mf-hero2-counter { font-size: 10px; }
  .mf-feat-dek { font-size: 15px; }
  .mf-worked-head { grid-template-columns: 48px 1fr auto; gap: 14px; padding: 16px; }
  .mf-worked-title { font-size: 19px; }
  .mf-worked-comp-num { font-size: 26px; }
  .mf-worked-row { grid-template-columns: 96px 1fr 38px; gap: 12px; }
  .mf-worked-dim { font-size: 12px; }
  .mf-nl-promises { grid-template-columns: 1fr; gap: 18px; }
  .mf-top10-row {
    grid-template-columns: 40px 48px minmax(0,1fr) 18px !important;
    gap: 12px;
  }
  .mf-t10-year, .mf-t10-vinyl { display: none; }
  .mf-premise-thesis { font-size: 20px; padding-left: 16px; }
}

/* ============================================================
   List page improvements — search, jump pills, vinyl commerce,
   expandable blurbs, editorial interjections, directional progress
   ============================================================ */

/* Toolbar becomes a compact stack of rows */
.toolbar { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
.tb-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.tb-row--main { gap: 14px; }
.tb-row .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.lp-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Search — minimal, ink underline, expands on focus */
.search-field {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 240px; max-width: 320px;
  border-bottom: 1px solid var(--rule);
  padding: 5px 2px; color: var(--ink-mute);
  transition: border-color 0.2s, max-width 0.25s ease, color 0.2s;
}
.search-field:focus-within { border-bottom-color: var(--ink); max-width: 460px; color: var(--ink); }
.search-ico { flex: none; opacity: 0.7; }
.search-input {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink); text-transform: none;
}
.search-input::placeholder { color: var(--ink-mute); text-transform: none; letter-spacing: 0.04em; }
.search-input:focus { outline: none; }
.search-clear {
  flex: none; border: none; background: transparent; color: var(--ink-mute);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.search-clear:hover { color: var(--ink); }

/* Jump-to-range pills — always a single scrollable row */
.tb-row--jump { gap: 14px; flex-wrap: nowrap; }
.tb-row--jump > label { color: var(--ink-mute); flex: none; }
.range-pills {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: nowrap; overflow-x: auto; min-width: 0;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 2px;
}
.range-pills::-webkit-scrollbar { display: none; }
.range-pill { white-space: nowrap; flex: none; }
.range-pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Vinyl commerce row in the side-stats column */
.entry .side .vinyl-buy {
  display: block; text-decoration: none; cursor: pointer;
  margin-bottom: 4px;
}
.entry .side .vinyl-buy b {
  display: flex; align-items: center; gap: 6px;
  font-weight: 400; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px;
}
.entry .side .vinyl-buy b svg { color: var(--ink-mute); transition: color 0.15s; }
.entry .side .vinyl-buy .vb-price {
  display: inline-block; font-family: var(--sans); font-size: 12px;
  font-weight: 600; color: var(--accent); letter-spacing: 0;
  border-bottom: 1px solid transparent; transition: border-color 0.15s;
}
.entry .side .vinyl-buy:hover .vb-price { border-bottom-color: var(--accent); }
.entry .side .vinyl-buy:hover b svg { color: var(--accent); }

/* Inline vinyl link — shown in the info actions on narrow screens only */
.info-actions { display: flex; gap: 20px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.info-len { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; }
.vinyl-buy.inline {
  display: none; align-items: center; gap: 7px; text-decoration: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute);
}
.vinyl-buy.inline svg { color: var(--ink-mute); }
.vinyl-buy.inline .vb-price {
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0; text-transform: none; color: var(--accent);
}

/* Own it / Wishlist actions */
.own-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.own-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.own-btn svg { width: 13px; height: 13px; flex: none; }
.own-btn:hover { border-color: var(--ink); }
.own-btn.own.active {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.own-btn.own.active:hover { background: var(--ink); }
.own-btn.wish:hover { color: var(--accent); border-color: var(--accent); }
.own-btn.wish.active { color: var(--accent); border-color: var(--accent); }
.own-btn.wish.active svg { fill: var(--accent); stroke: var(--accent); }

/* Expandable blurb */
.blurb-wrap { margin: 0 0 6px; max-width: 54ch; }
.entry .info .blurb {
  margin: 0; max-height: 999px;
  overflow: hidden; transition: max-height 0.35s ease;
}
.entry .info .blurb.clipped {
  max-height: 3em; /* ~2 lines at line-height 1.5 */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.entry .info .blurb.open { max-height: 40em; }
.blurb-toggle {
  margin-top: 4px; border: none; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); padding: 2px 0;
}
.blurb-toggle:hover { color: var(--accent); }

/* Editorial interjections between rank tiers */
.interjection {
  display: flex; align-items: center; gap: 22px;
  padding: 26px 0; margin: 0;
}
.interjection::before, .interjection::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--rule);
}
.interjection > span {
  flex: 0 1 auto; text-align: center; text-wrap: balance;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); max-width: 60ch;
}

/* Directional progress bar */
.progress { flex-wrap: wrap; max-width: min(92vw, 720px); justify-content: center; }
.progress .next-unheard {
  border: none; background: transparent; color: var(--paper);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0; cursor: pointer; opacity: 0.75;
  transition: opacity 0.15s, color 0.15s;
  border-left: 1px solid rgba(243,237,225,0.25); padding-left: 14px;
}
.progress .next-unheard b { font-weight: 600; color: var(--paper); }
.progress button.next-unheard:hover { opacity: 1; color: var(--accent); }
.progress button.next-unheard:hover b { color: var(--accent); }
.progress .next-unheard.done { cursor: default; opacity: 0.75; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  /* Side column is hidden at this width — surface the buy link inline instead */
  .vinyl-buy.inline { display: inline-flex; }
}
@media (max-width: 900px) {
  .toolbar { padding: 10px 20px; gap: 10px; }
  .tb-row { gap: 12px; }
  .lp-filters { flex: 1 1 auto; }
  .lp-filters .mc-select { flex: 1 1 0; }
  .lp-filters .mc-select select { width: 100%; }
  .search-field { max-width: none; flex-basis: 100%; }
  .search-field:focus-within { max-width: none; }
  .interjection { padding: 20px 0; gap: 14px; }
  .interjection > span { font-size: 10px; letter-spacing: 0.12em; }
  .progress { gap: 10px 12px; padding: 10px 16px; }
  .progress .next-unheard { border-left: none; padding-left: 0; }
}

/* ============================================================
   Album deep-dive enhancements
   ============================================================ */

/* Hero — reading time + listen CTA */
.hero-readtime {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
  margin: 4px 0 2px;
}
.hero-readtime svg { color: var(--accent); }
.hero-readtime .hrt-sep { opacity: 0.5; }
.hero-jump-link.hero-listen {
  border-bottom: none; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--ink); color: var(--ink); cursor: pointer;
  background: transparent; text-transform: none; letter-spacing: 0.04em;
}
.hero-jump-link.hero-listen svg { color: var(--accent); }
.hero-jump-link.hero-listen:hover { background: var(--ink); color: var(--paper); }
.hero-jump-link.hero-listen:hover svg { color: var(--paper); }

/* Breadcrumb prev / next arrows */
.crumb-seq { display: inline-flex; gap: 6px; align-items: center; margin-left: 6px; }
.crumb-arrow {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  border-radius: 999px; padding: 4px 9px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.crumb-arrow:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.crumb-arrow:disabled { opacity: 0.32; cursor: default; }

/* Sticky buy bar (appears once the affiliate strip scrolls away) */
.buybar {
  position: fixed; z-index: 70;
  right: 20px; bottom: 20px; width: 340px; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  padding: 10px 12px; border-radius: 12px;
  box-shadow: 0 18px 44px -16px rgba(0,0,0,0.55);
  transform: translateY(140%); opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2,0.85,0.25,1), opacity 0.3s;
  pointer-events: none;
}
.buybar.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.buybar-cover { width: 36px; height: 36px; flex: none; overflow: hidden; border-radius: 3px; }
.buybar-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.buybar-title {
  font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buybar-sub {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(243,237,225,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buybar-cta {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  background: var(--accent); color: #fff; text-decoration: none;
  padding: 8px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.buybar-cta:hover { filter: brightness(1.08); }
.buybar-price { font-weight: 700; }
.buybar-x {
  flex: none; border: none; background: transparent; color: rgba(243,237,225,0.6);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.buybar-x:hover { color: var(--paper); }

/* Add-mode: the same floating bar, carrying <TodayAdd/> instead of a retailer CTA
   (components/AlbumExtras.jsx). The bar is a tight horizontal strip on a dark
   ground, so the add component's note is suppressed here — it has room to speak on
   /today and on the album page body, not in 36px of chrome. */
.buybar--add .tda { flex: 0 0 auto; margin-top: 0; gap: 0; }
.buybar--add .tda-note { display: none; }
.buybar--add .tda-err { display: none; }
.buybar--add .tda-btn {
  background: var(--accent); border-color: var(--accent); color: #fff;
  min-height: 36px; padding: 8px 14px; white-space: nowrap;
}
.buybar--add .tda-btn:hover { border-color: var(--accent); color: #fff; filter: brightness(1.08); }
.buybar--add .tda--done { color: var(--paper); margin-top: 0; white-space: nowrap; }
.buybar--add .tda--done .tda-note { display: inline; opacity: .6; }
/* The recommendation card with no page to link to — a card, not a link. */
.rec-note { cursor: default; }

/* Mobile dossier pill nav (sticky, < 1180px) */
.mdnav { display: none; }
@media (max-width: 1180px) {
  .mdnav {
    display: block; position: sticky; top: calc(var(--nav-h) + 46px); z-index: 38;
    background: color-mix(in oklab, var(--paper) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
  }
  .mdnav.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .mdnav-rail {
    display: flex; gap: 8px; align-items: center;
    overflow-x: auto; scrollbar-width: none;
    padding: 9px 18px;
  }
  .mdnav-rail::-webkit-scrollbar { display: none; }
  .mdnav-pill { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 6px; }
  .mdnav-num {
    font-weight: 700; color: var(--ink-mute); text-transform: lowercase;
    font-size: 10px; letter-spacing: 0.04em;
  }
  .mdnav-pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .mdnav-pill.active .mdnav-num { color: rgba(243,237,225,0.7); }
}

/* Mobile sticky section dropdown (< 768px) */
.mtoc { display: none; }
@media (max-width: 768px) {
  .mtoc {
    display: block;
    position: sticky;
    top: calc(var(--nav-h) + max(0px, env(safe-area-inset-top, 0px) - 12px));
    z-index: 44;
    margin: 0 0 8px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: color-mix(in oklab, var(--paper) 94%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
  }
  .mtoc-toggle {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: transparent; border: none; cursor: pointer;
    padding: 11px 20px; text-align: left;
  }
  .mtoc-eyebrow {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-mute); flex: none;
  }
  .mtoc-current {
    flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 9px;
    font-family: var(--body-serif); font-size: 15px; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mtoc-current-num {
    font-family: var(--mono); font-size: 10px; color: var(--accent);
    letter-spacing: 0.06em; flex: none;
  }
  .mtoc-chev { flex: none; transition: transform 0.25s; color: var(--accent); }
  .mtoc.open .mtoc-chev { transform: rotate(180deg); }
  .mtoc-list {
    max-height: 0; overflow: hidden; transition: max-height 0.32s ease;
    background: var(--paper);
  }
  .mtoc.open .mtoc-list {
    max-height: min(62vh, 540px); overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--rule);
  }
  .mtoc-list-head {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-mute);
    padding: 12px 20px 8px;
  }
  .mtoc-item {
    display: flex; align-items: baseline; gap: 14px; width: 100%;
    background: transparent; border: none; border-top: 1px solid var(--rule);
    padding: 13px 20px; text-align: left; cursor: pointer;
  }
  .mtoc-item.active { background: var(--paper-2); }
  .mtoc-num {
    font-family: var(--mono); font-size: 10px; color: var(--accent);
    min-width: 34px; letter-spacing: 0.06em; flex: none;
  }
  .mtoc-item.active .mtoc-num { font-weight: 700; }
  .mtoc-label { font-family: var(--body-serif); font-size: 16px; color: var(--ink); }
  .mtoc-item.active .mtoc-label { font-weight: 600; }
}

/* Actionable recommendations */
a.rec.rec-link { display: block; text-decoration: none; cursor: pointer; color: inherit; transition: padding-left 0.15s; }
a.rec.rec-link:hover { padding-left: 6px; }
a.rec.rec-link:hover .rec-title { color: var(--accent); }
.rec-action {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); transition: color 0.15s, gap 0.15s;
}
.rec-action.onsite { color: var(--accent); }
a.rec.rec-link:hover .rec-action { gap: 9px; color: var(--accent); }

/* Discussion prompt → comment link */
.prompt-body { display: block; }
.prompt-share {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  padding: 7px 13px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.prompt-share:hover { border-color: var(--accent); color: var(--accent); }

/* Previous-in-the-countdown block */
.endnote-prev {
  display: inline-flex; flex-direction: column; gap: 3px; align-items: center;
  margin: 0 auto 40px; padding-bottom: 26px; cursor: pointer;
  border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit;
}
.endnote-prev .ep-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute); transition: color 0.15s;
}
.endnote-prev .ep-title { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink); }
.endnote-prev .ep-title em { font-style: italic; }
.endnote-prev .ep-artist { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.endnote-prev:hover .ep-eyebrow, .endnote-prev:hover .ep-title { color: var(--accent); }

/* Essay sticky mini-player */
.essay-mini {
  position: fixed; z-index: 72;
  left: 50%; bottom: 18px; transform: translateX(-50%);
  width: 480px; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  padding: 10px 12px; border-radius: 12px;
  box-shadow: 0 18px 44px -16px rgba(0,0,0,0.55);
  animation: emSlideUp 0.35s cubic-bezier(0.2,0.85,0.25,1) both;
}
@keyframes emSlideUp { from { opacity: 0; transform: translate(-50%, 120%); } to { opacity: 1; transform: translate(-50%, 0); } }
.em-cover { width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 3px; }
.em-play {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--accent); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.em-play:hover { filter: brightness(1.08); }
.em-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.em-title {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: rgba(243,237,225,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.em-title b { color: var(--paper); font-weight: 600; }
.em-scrub { position: relative; height: 14px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.em-scrub::before {
  content: ""; position: absolute; left: 0; right: 0; height: 3px;
  background: rgba(243,237,225,0.22); border-radius: 2px;
}
.em-fill { position: absolute; left: 0; height: 3px; background: var(--accent); border-radius: 2px; }
.em-thumb {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.em-count {
  flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  color: rgba(243,237,225,0.7);
}
.em-x {
  flex: none; border: none; background: transparent; color: rgba(243,237,225,0.6);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.em-x:hover { color: var(--paper); }

@media (max-width: 768px) {
  .buybar { left: 8px; right: 8px; width: auto; bottom: 8px; }
  .essay-mini { left: 8px; right: 8px; bottom: 66px; width: auto; max-width: none; transform: none; }
  @keyframes emSlideUp { from { opacity: 0; transform: translateY(120%); } to { opacity: 1; transform: translateY(0); } }
  .em-title { font-size: 9px; }
}

/* Responsive nav height (the top nav shrinks on small screens) */
@media (max-width: 640px) { :root { --nav-h: 56px; } }
@media (max-width: 380px) { :root { --nav-h: 50px; } }
/* Responsive crumb-bar height, tracking the two rules below that change its
   type: at 1024px the back-link title drops to 13px, and at 760px the bar stops
   being sticky altogether, so nothing below it has any bar to clear. */
@media (max-width: 1024px) { :root { --crumb-h: 52px; } }
@media (max-width: 760px)  { :root { --crumb-h: 0px; } }
/* The mobile nav adds the safe-area inset (notch / Dynamic Island) to its
   height via padding-top: max(12px, env(safe-area-inset-top)). The sticky
   crumb bar sticks at top:var(--nav-h) and so slid UNDER the nav, overlapping
   it. Add the same inset to the crumb bar's offset so it sits just below. */
@media (max-width: 760px) {
  /* On mobile the breadcrumb is static (not sticky). When sticky, it pinned
     under the nav and painted over the affiliate buy strip that follows it in
     the document, reading as an overlap. Static lets both sit in normal flow. */
  .album-crumbs { position: static; top: auto; }
}

/* Six-dimension scoring card (hero zone, between metadata grid and scorecards) */
.scorebreak {
  margin-top: 22px;
  border: 1px solid var(--ink);
  border-left: 4px solid var(--accent);
  background: var(--paper);
}
.scorebreak .sb-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px 9px; border-bottom: 1px solid var(--rule);
}
.scorebreak .sb-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
}
.scorebreak .sb-how {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); background: none; border: none; cursor: pointer; white-space: nowrap;
}
.scorebreak .sb-how:hover { color: var(--accent); }
.sb-rows { padding: 9px 16px 11px; }
.sb-row {
  display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 14px;
  padding: 5px 0;
}
.sb-dim {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
}
.sb-meter {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: color-mix(in oklab, var(--ink) 11%, transparent);
}
.sb-fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.sb-score {
  font-family: var(--sans); font-weight: 800; font-size: 16px; line-height: 1;
  color: var(--accent); text-align: right; font-variant-numeric: tabular-nums;
}
.sb-composite {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 16px; border-top: 1px solid var(--ink);
  background: var(--paper-2);
}
.sb-comp-num {
  font-family: var(--sans); font-weight: 900; font-size: 38px; line-height: 0.85;
  letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.sb-comp-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb-comp-lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink);
}
.sb-comp-note {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.03em;
  color: var(--ink-mute); line-height: 1.35;
}
@media (max-width: 480px) {
  .sb-row { grid-template-columns: 82px 1fr 36px; gap: 10px; }
  .sb-comp-num { font-size: 32px; }
}

/* ============================================================
   iPad / tablet range fixes (768–1180px)
   Addresses: list-row overlap, homepage proof openers stacking
   with oversized covers, and album cover sizing on tablet.
   Appended block — does not modify existing rules.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1180px) {
  /* --- 1–100 list: stop the fixed 5-col grid from overlapping.
         Drop the wide 'side' column, give the cover a sane fixed
         width, let the title take the remaining space. --- */
  .entry {
    grid-template-columns: 84px 132px minmax(0, 1fr) 40px;
    gap: 22px;
  }
  .entry .side { display: none; }
  .entry .cover-slot { width: 132px; height: 132px; }
  .entry .rank-num { font-size: 64px; }
  .entry .info { min-width: 0; }
  .entry .info h3 { font-size: 30px; }

  /* --- Homepage 'proof' openers: keep them side-by-side instead
         of collapsing to one full-width column (which blew the
         square covers up to full-screen). Three across still fits
         on landscape; portrait gets a comfortable two-up. --- */
  .mf-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  /* Portrait iPad: two openers per row reads better than three. */
  .mf-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Album page cover on small screens: keep it compact and at the
       top of the about block rather than ballooning. The single-column
       stack already puts the art first; this just caps its size so it
       reads as a slick thumbnail, not a full-bleed image. --- */
@media (max-width: 760px) {
  .cover-about-art { max-width: 200px; margin: 0 auto 4px; }
  .cover-about-art .wgo-cover { zoom: 1; }
}

/* ===========================================================================
   Mobile navigation: burger toggle + dropdown panel
   The .nav-burger button existed in markup with no CSS, so on mobile the full
   links crammed across the top and there was no working menu. This hides the
   burger on desktop, shows it on mobile, and turns .links into a dropdown.
   =========================================================================== */

/* Burger hidden on desktop by default */
.nav-burger {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 9px;
  flex-direction: column; justify-content: center; gap: 5px;
}
.nav-burger span {
  display: block; height: 2px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
body[data-dark] .nav-burger span { background: var(--paper); }

@media (max-width: 960px) {
  /* Show the burger, hide the inline links until opened.
     Raised from 820px now there are more nav links (added Leaderboards). */
  .nav-burger { display: flex; }

  .topnav .links {
    position: fixed;
    top: 0; right: 0;
    width: min(82vw, 320px);
    height: 100vh; height: 100dvh;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start;
    gap: 4px;
    padding: calc(env(safe-area-inset-top, 16px) + 72px) 28px 40px;
    background: var(--paper);
    border-left: 1px solid var(--rule);
    box-shadow: -20px 0 60px -20px rgba(0,0,0,0.4);
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    font-size: 15px !important;
    letter-spacing: 0.04em !important;
    z-index: 60;
  }
  body[data-dark] .topnav .links { background: var(--ink); border-left-color: rgba(243,237,225,0.18); }

  .topnav .links--open { transform: translateX(0); }

  /* Each link becomes a full-width row */
  .topnav .links a {
    width: 100%; padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    opacity: 1; font-family: var(--sans); font-weight: 500;
  }
  body[data-dark] .topnav .links a { border-bottom-color: rgba(243,237,225,0.14); }

  .topnav .links .nav-signin,
  .topnav .links .account-menu { margin-top: 18px; width: 100%; }

  /* Account menu inside the mobile panel: render the dropdown inline as
     full-width rows instead of an absolute popover (which clipped/overlapped
     against the narrow slide-in panel). */
  .topnav .links .nav-acct { display: block; width: 100%; }
  .topnav .links .nav-avatar { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .topnav .links .nav-menu {
    position: static; width: 100%; border: 0; box-shadow: none;
    background: transparent; animation: none; margin-top: 4px;
  }
  body[data-dark] .topnav .links .nav-menu { background: transparent; }
  .topnav .links .nav-menu-head { padding: 10px 0; }
  .topnav .links .nav-menu a { padding: 12px 0; }

  /* Burger morphs into an X when open */
  .nav-burger { position: relative; z-index: 65; }
  .topnav--open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topnav--open .nav-burger span:nth-child(2) { opacity: 0; }
  .topnav--open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Dim the page behind the open menu */
  .topnav--open::after {
    content: ""; position: fixed; inset: 0; z-index: 55;
    background: rgba(23,19,15,0.4);
  }
}

/* nav: 6 links (Home, List, Deep Dives, My Collection, Leaderboards, Help) +
   Sign in. Tighten progressively on mid-desktop widths so nothing clips off the
   right edge before the burger takes over at 960px. */
@media (min-width: 1101px) and (max-width: 1320px) { .topnav .links { gap: 16px; } }
@media (min-width: 961px) and (max-width: 1100px) {
  .topnav { padding: 16px 24px; }
  .topnav .links { gap: 13px; letter-spacing: 0.1em; }
}

/* ======================================================================
   Dual-identity homepage (HomeManifesto v2) — mobile-first.
   Hero: mobile stacks Collection-over-Canon with the connective line
   between; desktop is a true 50/50 grid with the connective spanning below.
   ====================================================================== */

/* auth-resolving skeleton */
.home-skeleton { max-width: 1200px; margin: 0 auto; padding: 96px 18px 60px; }
.home-skel-hero { height: 320px; border-radius: 14px; background: var(--rule); opacity: .4; margin-bottom: 18px; }
.home-skel-band { height: 120px; border-radius: 12px; background: var(--rule); opacity: .3; margin-bottom: 14px; }

/* shared homepage bits */
.hd-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 8px; }
.hd-h { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.08; margin: 12px 0 10px; letter-spacing: -0.01em; }
.hd-sub { color: var(--ink-mute); font-size: 15px; line-height: 1.5; margin: 0 0 18px; max-width: 42ch; }
.hd-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 22px; border: 1px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer; }
.hd-cta-accent { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hd-arrow { flex: none; }
.hd-section-head { text-align: center; max-width: 56ch; margin: 0 auto 22px; }
.hd-section-h { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 8px 0 6px; }
.hd-section-sub { color: var(--ink-mute); font-size: 15px; line-height: 1.5; }
.hd-muted { color: var(--ink-mute); font-size: 13px; padding: 8px 0; }
.cur { color: var(--ink-mute); margin-right: .05em; }

/* ---- 50/50 hero ---- */
.hd-hero { display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 58px) 18px 28px; }
.hd-half { padding: 26px 2px; }
.hd-half-canon { border-top: 1px solid var(--rule); }
.hd-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.hd-wall img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--rule); }
.hd-dash { margin-top: 18px; border: 1px solid var(--rule); border-radius: 12px; padding: 18px; background: #fff; }
.hd-dash-val { font-family: var(--sans); font-weight: 900; font-size: 40px; letter-spacing: -0.03em; line-height: 1; }
.hd-dash-cap { font-size: 12px; color: var(--ink-mute); margin: 4px 0 14px; }
.hd-dash-grid { display: grid; grid-template-columns: repeat(25, 1fr); gap: 3px; margin-bottom: 6px; }
.hd-dash-grid span { aspect-ratio: 1; background: var(--rule); border-radius: 1px; }
.hd-dash-grid span.on { background: var(--accent); }
.hd-connect { text-align: center; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink); padding: 18px 8px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: color-mix(in oklab, var(--accent) 6%, transparent); }

@media (min-width: 900px) {
  .hd-hero { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "canon collection" "connect connect"; column-gap: 56px; max-width: 1200px; margin: 0 auto; padding: 124px 56px 8px; }
  .hd-half-canon { grid-area: canon; border-top: 0; border-right: 1px solid var(--rule); padding-right: 56px; }
  .hd-half-collection { grid-area: collection; }
  .hd-connect { grid-area: connect; margin-top: 28px; font-size: 19px; }
  .hd-h { font-size: 36px; }
  .hd-cta { width: auto; }
}

/* ---- this week's deep dive ---- */
.hd-deepdive { max-width: 1000px; margin: 0 auto; padding: 36px 18px; }
.hd-dd-card { display: flex; flex-direction: column; gap: 16px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 18px; cursor: pointer; }
.hd-dd-art { position: relative; }
.hd-dd-art img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--rule); }
.hd-dd-rank { position: absolute; top: 10px; left: 10px; font-family: var(--mono); font-size: 11px; background: rgba(0,0,0,.7); color: #fff; padding: 3px 7px; border-radius: 6px; }
.hd-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: hdpulse 2s infinite; }
@keyframes hdpulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.hd-dd-title { font-family: var(--serif); font-size: 26px; margin: 8px 0 2px; font-weight: 400; }
.hd-dd-artist { color: var(--ink-mute); font-size: 14px; }
.hd-dd-dek { font-size: 15px; line-height: 1.55; margin: 12px 0; }
.hd-dd-read { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 14px; }
@media (min-width: 720px) { .hd-dd-card { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 28px; padding: 24px; } }

/* ---- collector showcase ---- */
.hd-showcase { max-width: 1100px; margin: 0 auto; padding: 40px 18px; }
.hd-showcase-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.hd-show-card { border: 1px solid var(--rule); border-radius: 12px; padding: 18px; background: #fff; }
.hd-show-k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; }
.hd-show-cap { font-size: 12px; color: var(--ink-mute); margin-top: 10px; }
.hd-show-val { font-family: var(--sans); font-weight: 900; font-size: 34px; letter-spacing: -0.03em; margin-top: 12px; }
.hd-100grid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.hd-100grid span { aspect-ratio: 1; background: var(--rule); border-radius: 1px; }
.hd-100grid span.on { background: var(--accent); }
.hd-spark { width: 100%; height: 56px; display: block; }
.hd-lb-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.hd-lb-row:first-of-type { border-top: 0; }
.hd-lb-rank { width: 20px; font-weight: 700; color: var(--ink-mute); }
.hd-lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-lb-val { font-weight: 600; }
.hd-cta-center { display: flex; width: auto; margin: 26px auto 0; max-width: 320px; }
@media (min-width: 640px) { .hd-showcase-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .hd-100grid { grid-template-columns: repeat(12, 1fr); } }

/* ---- community ---- */
.hd-community { max-width: 1000px; margin: 0 auto; padding: 40px 18px; }
.hd-comm-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.hd-comm-card { border: 1px solid var(--rule); border-radius: 12px; padding: 18px; background: #fff; }
.hd-comm-num { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.hd-comm-k { font-family: var(--serif); font-size: 18px; margin: 6px 0 6px; }
.hd-comm-d { font-size: 14px; color: var(--ink-mute); line-height: 1.5; margin: 0; }
.hd-comm-ctas, .hd-closing-ctas, .hd-snap-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
@media (min-width: 640px) {
  .hd-comm-grid { grid-template-columns: repeat(3, 1fr); }
  .hd-comm-ctas, .hd-closing-ctas, .hd-snap-actions { flex-direction: row; justify-content: center; }
  .hd-comm-ctas .hd-cta, .hd-closing-ctas .hd-cta, .hd-snap-actions .hd-cta { width: auto; }
}

/* ---- logged-in: snapshot ---- */
.hd-snapshot { max-width: 1000px; margin: 0 auto; padding: 104px 18px 24px; }
.hd-snap-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.hd-snap-stat { border: 1px solid var(--rule); border-radius: 12px; padding: 16px; background: #fff; text-align: center; }
.hd-snap-v { font-family: var(--sans); font-weight: 900; font-size: 30px; letter-spacing: -0.02em; line-height: 1; }
.hd-snap-v small { font-size: 14px; font-weight: 600; color: var(--ink-mute); }
.hd-snap-k { font-size: 11px; color: var(--ink-mute); margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; }
.hd-snap-bar { height: 8px; background: var(--rule); border-radius: 6px; overflow: hidden; }
.hd-snap-bar span { display: block; height: 100%; background: var(--accent); }
@media (max-width: 480px) { .hd-snap-v { font-size: 22px; } .hd-snap-row { gap: 6px; } .hd-snap-stat { padding: 12px 8px; } }

/* ---- logged-in: leaderboard movement ---- */
.hd-movement { max-width: 1000px; margin: 0 auto; padding: 16px 18px 28px; }
.hd-move-line { font-size: 18px; margin: 8px 0 16px; }
.hd-move-line b { font-weight: 700; }

/* ---- logged-in: gaps ---- */
.hd-gaps { max-width: 1100px; margin: 0 auto; padding: 24px 18px 44px; }
.hd-gaps-strip { display: flex; gap: 10px; overflow-x: auto; padding: 14px 0 6px; -webkit-overflow-scrolling: touch; }
.hd-gap { flex: none; width: 120px; text-decoration: none; color: inherit; }
.hd-gap img { width: 120px; height: 120px; object-fit: cover; border-radius: 6px; background: var(--rule); }
.hd-gap-rank { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-mute); margin-top: 4px; text-align: center; }
/* #2: larger covers in a single horizontal-scrolling row at every width (the
   12 gaps overflow and scroll rather than wrapping/cramming onto the page). */

/* ---- closing ---- */
.hd-closing { max-width: 900px; margin: 0 auto; padding: 20px 18px 70px; text-align: center; }
.hd-connect-closing { border: 0; background: none; font-size: 22px; margin-bottom: 8px; }

/* ======================================================================
   Homepage v2 — visual polish: reveal, dark collection panel, motion, depth
   ====================================================================== */

/* scroll-reveal */
.hd-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.hd-reveal.in { opacity: 1; transform: none; }

/* richer type + connective */
.hd-h { font-size: 32px; }
@media (min-width: 900px) { .hd-h { font-size: 40px; } }
.hd-connect { font-size: 18px; letter-spacing: .01em; background: color-mix(in oklab, var(--accent) 9%, transparent); }
.hd-connect::before, .hd-connect::after { content: "\2014"; color: var(--accent); margin: 0 12px; opacity: .6; }

/* --- the dark, premium Collection panel (distinct from the light Canon) --- */
.hd-half-collection { background: radial-gradient(120% 140% at 80% 0%, #241d15 0%, #14110d 60%); color: #f3ede1; border-radius: 18px; padding: 30px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.hd-half-collection .hd-eyebrow { color: color-mix(in oklab, var(--accent) 65%, #f3ede1); }
.hd-half-collection .hd-sub { color: rgba(243,237,225,.72); }
.hd-half-collection .hd-cta-accent { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 24px color-mix(in oklab, var(--accent) 45%, transparent); }
.hd-dash { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.hd-dash-val { color: #fff; text-shadow: 0 0 26px color-mix(in oklab, var(--accent) 55%, transparent); }
.hd-dash-cap { color: rgba(243,237,225,.55); }
.hd-dash-grid span { background: rgba(255,255,255,.1); }
.hd-dash-grid span.on { background: var(--accent); box-shadow: 0 0 7px color-mix(in oklab, var(--accent) 70%, transparent); }
@media (min-width: 900px) { .hd-half-canon { border-right: 0; padding-right: 40px; } }

/* staggered dot fill (gated on reveal) */
.hd-dash-grid span, .hd-100grid span { opacity: 0; }
.in .hd-dash-grid span, .in .hd-100grid span { animation: hd-pop .45s ease forwards; }
@keyframes hd-pop { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: scale(1); } }

/* value spark wipes in on reveal */
.hd-spark { clip-path: inset(0 100% 0 0); }
.in .hd-spark { animation: hd-wipe 1s .15s forwards; }
@keyframes hd-wipe { to { clip-path: inset(0 0 0 0); } }

/* spinning vinyl behind the deep-dive cover */
.hd-dd-card { overflow: hidden; }
.hd-dd-art { position: relative; }
.hd-dd-vinyl { position: absolute; top: 7%; left: 9%; width: 86%; height: 86%; border-radius: 50%; background: repeating-radial-gradient(circle at center, #1a1a1a 0 2px, #0c0c0c 2px 4px); box-shadow: 0 10px 30px rgba(0,0,0,.45); transform: translateX(0) rotate(0deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); z-index: 0; }
.hd-dd-vinyl::after { content: ""; position: absolute; inset: 41%; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px #0c0c0c; }
.hd-dd-art img { position: relative; z-index: 1; }
.in .hd-dd-vinyl { transform: translateX(26%) rotate(0deg); }
.hd-dd-card:hover .hd-dd-vinyl { transform: translateX(40%) rotate(160deg); }

/* depth + hover micro-interactions */
.hd-dd-card, .hd-show-card, .hd-comm-card, .hd-snap-stat { box-shadow: 0 1px 0 rgba(0,0,0,.02); transition: transform .25s ease, box-shadow .25s ease; }
.hd-dd-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0,0,0,.14); }
.hd-show-card:hover, .hd-comm-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.09); }
.hd-cta { transition: transform .16s ease, box-shadow .2s ease, background .16s ease, color .16s ease; }
.hd-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.hd-arrow { transition: transform .18s ease; }
.hd-cta:hover .hd-arrow, .hd-dd-card:hover .hd-dd-read .hd-arrow { transform: translateX(4px); }
.hd-wall img, .hd-gap img, .hd-dd-art img, .hd-100grid span { transition: transform .3s ease; }
.hd-wall img:hover, .hd-gap:hover img { transform: scale(1.06); }
.hd-100grid span.on:hover { transform: scale(1.5); }
.hd-comm-num { font-size: 22px; font-weight: 700; }

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hd-reveal, .hd-reveal.in { opacity: 1; transform: none; transition: none; }
  .hd-dash-grid span, .hd-100grid span { opacity: 1; animation: none; }
  .hd-spark { clip-path: none; animation: none; }
  .hd-dd-vinyl, .hd-cta, .hd-dd-card, .hd-show-card, .hd-comm-card { transition: none; }
  .in .hd-dd-vinyl { transform: translateX(26%); }
}

/* deep-dive vinyl: peek LEFT so it never overlaps the copy (copy is right on
   desktop / below on mobile). The disc gets a dedicated lane to the left of
   the cover (card padding-left on desktop, narrower centred art on mobile) so
   it pops fully into view without being clipped or running off-screen. */
.in .hd-dd-vinyl { transform: translateX(-20%) rotate(0deg); }
.hd-dd-card:hover .hd-dd-vinyl { transform: translateX(-28%) rotate(160deg); }
@media (prefers-reduced-motion: reduce) { .in .hd-dd-vinyl { transform: translateX(-20%); } }
/* desktop: open a lane to the left of the art column for the peeking disc */
@media (min-width: 720px) {
  .hd-dd-card { padding-left: 64px; }
}
/* mobile: stacked art is large — narrow + centre it so the disc has room
   inside the card, and keep the peek modest */
@media (max-width: 719px) {
  .hd-dd-art { max-width: 232px; margin: 0 auto; }
  .hd-dd-vinyl { width: 76%; height: 76%; }
  .in .hd-dd-vinyl { transform: translateX(-16%) rotate(0deg); }
  .hd-dd-card:hover .hd-dd-vinyl { transform: translateX(-22%) rotate(160deg); }
}

/* ======================================================================
   Homepage v2 — editorial bigging-up + richer collector showcase visuals
   ====================================================================== */

/* editorial stats band */
.hd-edstats { max-width: 1000px; margin: 0 auto; padding: 38px 18px; text-align: center; }
.hd-edstats-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 24px 0; }
.hd-edstat-n { font-family: var(--serif); font-size: clamp(32px, 8vw, 54px); line-height: 1; letter-spacing: -0.02em; }
.hd-edstat-sm { font-size: .4em; color: var(--ink-mute); }
.hd-edstat-k { font-size: 11px; color: var(--ink-mute); margin-top: 8px; text-transform: uppercase; letter-spacing: .08em; }
.hd-edstats-line { max-width: 62ch; margin: 18px auto 0; color: var(--ink-mute); font-size: 16px; line-height: 1.6; font-style: italic; font-family: var(--serif); }

/* deep-dive archive rail */
.hd-archive { max-width: 1200px; margin: 0 auto; padding: 28px 0 28px 18px; }
.hd-arch-head { padding-right: 18px; margin-bottom: 14px; }
.hd-arch-rail { display: flex; gap: 14px; overflow-x: auto; padding: 6px 18px 16px 0; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.hd-arch-cover { flex: none; width: 150px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; scroll-snap-align: start; }
.hd-arch-cover img { width: 150px; height: 150px; object-fit: cover; border-radius: 8px; background: var(--rule); box-shadow: 0 8px 22px rgba(0,0,0,.12); transition: transform .3s ease; }
.hd-arch-cover:hover img { transform: translateY(-5px) scale(1.02); }
.hd-arch-rank { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-mute); margin-top: 8px; }
.hd-arch-title { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* prominent weekly signup band */
.hd-signup { max-width: 1100px; margin: 0 auto; padding: 16px 18px 42px; }
.hd-signup-inner { background: radial-gradient(120% 160% at 0% 0%, #241d15, #14110d); color: #f3ede1; border-radius: 18px; padding: 30px 24px; display: grid; gap: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.hd-signup-h { font-family: var(--serif); font-weight: 400; font-size: 27px; margin: 8px 0; line-height: 1.1; }
.hd-signup-sub { color: rgba(243,237,225,.72); font-size: 15px; line-height: 1.5; margin: 0; }
.hd-signup .hd-eyebrow { color: color-mix(in oklab, var(--accent) 65%, #f3ede1); }
@media (min-width: 760px) { .hd-signup-inner { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 38px 42px; } }

/* progress ring */
.hd-ring-wrap { text-align: center; }
.hd-ring { width: 150px; height: 150px; }
.hd-ring-bg { fill: none; stroke: var(--rule); stroke-width: 10; }
.hd-ring-fg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; stroke-dashoffset: var(--c); transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1) .15s; }
.in .hd-ring-fg { stroke-dashoffset: var(--target); }
.hd-ring-num { fill: var(--ink); font-family: var(--sans); font-weight: 900; font-size: 34px; text-anchor: middle; }
.hd-ring-den { fill: var(--ink-mute); font-size: 11px; text-anchor: middle; }
.hd-ring-sub { font-size: 12px; color: var(--ink-mute); margin-top: 8px; }

/* rich value chart */
.hd-chart { position: relative; margin-top: 12px; }
.hd-chart-svg { width: 100%; height: 96px; display: block; }
.hd-chart-grid { stroke: var(--rule); stroke-width: 1; }
.hd-chart-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent); transform: translate(-50%, -50%); }
.hd-chart-delta { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 600; color: oklch(0.5 0.13 150); background: color-mix(in oklab, oklch(0.5 0.13 150) 13%, transparent); padding: 3px 9px; border-radius: 20px; }

/* leaderboard podium */
.hd-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-top: 10px; }
.hd-pod { flex: 1; min-width: 0; text-align: center; }
.hd-pod-medal { width: 30px; height: 30px; border-radius: 50%; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; }
.hd-pod-1 .hd-pod-medal { background: #caa53d; } .hd-pod-2 .hd-pod-medal { background: #9a9a9a; } .hd-pod-3 .hd-pod-medal { background: #a0673a; }
.hd-pod-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-pod-val { font-weight: 700; font-size: 13px; }
.hd-pod-bar { margin-top: 6px; border-radius: 6px 6px 0 0; background: linear-gradient(var(--accent), color-mix(in oklab, var(--accent) 35%, var(--paper))); }
.hd-pod-1 .hd-pod-bar { height: 56px; } .hd-pod-2 .hd-pod-bar { height: 38px; } .hd-pod-3 .hd-pod-bar { height: 24px; }

/* genre donut */
.hd-donut-wrap { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.hd-donut { width: 112px; height: 112px; flex: none; }
.hd-donut-track { fill: none; stroke: var(--rule); stroke-width: 13; }
.hd-donut-seg { fill: none; stroke-width: 13; }
.hd-donut-mid { fill: var(--ink); font-family: var(--sans); font-weight: 900; font-size: 26px; text-anchor: middle; }
.hd-donut-legend { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.hd-donut-legend span { display: flex; align-items: center; gap: 8px; }
.hd-donut-legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* community visual proof cards */
.hd-proof { text-align: left; }
.hd-proof-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.hd-cmt { display: flex; gap: 10px; }
.hd-cmt-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.hd-cmt-name { font-weight: 600; font-size: 13px; }
.hd-cmt-txt { font-size: 14px; line-height: 1.45; margin: 3px 0 0; }
.hd-cmt-foot { display: flex; gap: 12px; font-size: 12px; color: var(--ink-mute); margin-top: 14px; }
.hd-cmt-reply { color: var(--accent); }
.hd-nom { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-top: 12px; }
.hd-nom-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-nom-v { color: oklch(0.5 0.13 150); font-weight: 700; flex: none; }
.hd-nom-bar { height: 6px; background: var(--rule); border-radius: 6px; overflow: hidden; margin-top: 5px; }
.hd-nom-bar span { display: block; height: 100%; background: var(--accent); }
.hd-mini-lb { display: flex; flex-direction: column; gap: 9px; }
.hd-mini-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.hd-mini-row b { margin-left: auto; }
.hd-mini-m { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.hd-mini-m.m1 { background: #caa53d; } .hd-mini-m.m2 { background: #9a9a9a; } .hd-mini-m.m3 { background: #a0673a; }
.hd-mini-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* showcase: 2x2 on desktop, centred visual cards */
@media (min-width: 640px) { .hd-showcase-grid { grid-template-columns: repeat(2, 1fr); } }
.hd-show-center { display: flex; flex-direction: column; align-items: center; }
.hd-show-center .hd-show-k { align-self: flex-start; }

/* ===== Collection hero panel — richer mini dashboard (dark bg) ===== */
.hd-dash-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hd-dash-delta { font-size: 12px; font-weight: 700; color: #7CFC9B; background: rgba(124,252,155,.14); padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.hd-hspark { position: relative; margin: 14px 0 16px; }
.hd-hspark svg { width: 100%; height: 52px; display: block; clip-path: inset(0 100% 0 0); }
.in .hd-hspark svg { animation: hd-wipe 1.1s .2s forwards; }
.hd-hspark-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); transform: translate(-50%, -50%); opacity: 0; }
.in .hd-hspark-dot { animation: hd-fadein .4s 1.1s forwards; }
@keyframes hd-fadein { to { opacity: 1; } }
.hd-dash-prog-row { display: flex; justify-content: space-between; font-size: 12px; color: rgba(243,237,225,.6); margin-bottom: 6px; }
.hd-dash-bar { height: 8px; background: rgba(255,255,255,.1); border-radius: 6px; overflow: hidden; }
.hd-dash-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 6px; box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 60%, transparent); transition: width 1.1s cubic-bezier(.2,.7,.2,1) .3s; }
.in .hd-dash-bar i { width: var(--w); }
.hd-gbars { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.hd-gbar { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; }
.hd-gbar-l { font-size: 11px; color: rgba(243,237,225,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-gbar-t { height: 6px; background: rgba(255,255,255,.1); border-radius: 5px; overflow: hidden; }
.hd-gbar-t i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 70%, #f3ede1), var(--accent)); border-radius: 5px; transition: width .9s cubic-bezier(.2,.7,.2,1) .35s; }
.in .hd-gbar-t i { width: var(--w); }
@media (prefers-reduced-motion: reduce) {
  .hd-hspark svg { clip-path: none; animation: none; }
  .hd-hspark-dot { opacity: 1; animation: none; }
  .hd-dash-bar i, .hd-gbar-t i { transition: none; width: var(--w); }
}

/* slim the weekly-signup banner (was bulky) */
.hd-signup { padding: 8px 18px 30px; }
.hd-signup-inner { padding: 22px 22px; }
@media (min-width: 760px) { .hd-signup-inner { padding: 26px 38px; } }
.hd-signup-h { font-size: 23px; margin: 4px 0 6px; }
.hd-signup-sub { font-size: 14px; }

/* logged-out My Collection: dynamic preview dashboard (dark, reuses hd-dash bits) */
.mkt-dash { background: radial-gradient(120% 150% at 80% 0%, #241d15, #14110d); color: #f3ede1; border-radius: 16px; padding: 22px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.mkt-dash-foot { display: block; width: 100%; margin-top: 16px; padding: 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.04); color: #f3ede1; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.mkt-dash-foot:hover { background: rgba(255,255,255,.1); }

/* ===== Homepage collector showcase — live leaderboard feature ===== */
/* Three shelf-metric cards in a row, then the leaderboard as a full-width
   feature so the competitive hook reads loud and clear. */
.hd-showcase-grid.hd-showcase-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .hd-showcase-grid.hd-showcase-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.hd-lbfeat {
  margin-top: 14px; border-radius: 16px; padding: 22px 22px 24px; color: #f3ede1;
  background: radial-gradient(150% 170% at 0% 0%, #241d15 0%, #14110d 62%);
  box-shadow: 0 22px 50px -30px rgba(0,0,0,.55);
}
.hd-lbfeat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.hd-lbfeat-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in oklab, var(--accent) 70%, #f3ede1); display: inline-flex; align-items: center; gap: 7px; }
.hd-lbfeat-h { font-family: var(--serif); font-weight: 400; font-size: 23px; letter-spacing: -.01em; margin: 7px 0 0; color: #f3ede1; }
.hd-lbfeat-cta {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  padding: 10px 16px; border-radius: 10px; border: 0;
  background: var(--accent); color: #fff;
  box-shadow: 0 8px 22px color-mix(in oklab, var(--accent) 45%, transparent);
  transition: transform .16s ease, box-shadow .2s ease;
}
.hd-lbfeat-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in oklab, var(--accent) 55%, transparent); }
.hd-lbfeat-rows { display: flex; flex-direction: column; gap: 8px; }
.hd-lbfeat-row {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
  text-align: left; padding: 9px 12px; border-radius: 10px; border: 0;
  background: color-mix(in oklab, #f3ede1 5%, transparent);
  transition: background .15s ease;
}
.hd-lbfeat-row:hover { background: color-mix(in oklab, #f3ede1 10%, transparent); }
.hd-lbfeat-rank {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
  background: rgba(243,237,225,.14); color: #f3ede1;
}
.hd-lbfeat-rank.r0 { background: #caa53d; color: #1a1a1a; }
.hd-lbfeat-rank.r1 { background: #c9c9c9; color: #1a1a1a; }
.hd-lbfeat-rank.r2 { background: #b87a45; color: #1a1a1a; }
.hd-lbfeat-name { flex: 0 0 30%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.hd-lbfeat-bar { flex: 1; height: 8px; border-radius: 6px; background: rgba(243,237,225,.1); overflow: hidden; }
.hd-lbfeat-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 55%, #2a2016), var(--accent)); animation: hdlbbar .9s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes hdlbbar { from { width: 0 !important; } }
.hd-lbfeat-val { flex: none; font-family: var(--sans); font-weight: 800; font-size: 14px; letter-spacing: -.02em; min-width: 64px; text-align: right; }
.hd-lbfeat .hd-muted { color: rgba(243,237,225,.6); padding: 6px 2px; }
@media (max-width: 520px) {
  .hd-lbfeat-cta { width: 100%; justify-content: center; }
  .hd-lbfeat-name { flex-basis: 38%; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-lbfeat-bar i { animation: none; }
}

/* ======================================================================
   Logged-in collector dashboard — command center + live standings
   A premium dark surface for the member home: greeting, value curve, canon
   ring, genre blend, highlight stats, then the live leaderboard standings.
   ====================================================================== */
.cm-hero, .cm-board {
  position: relative; max-width: 1100px; margin: 0 auto; overflow: hidden;
}
/* Hero: a light, paper-toned panel with a warm accent corner glow — keeps the
   dashboard bright and lively (the page now alternates light hero / dark board). */
.cm-hero {
  margin-top: 96px; border-radius: 20px; padding: 30px 28px 26px;
  color: var(--ink);
  background: radial-gradient(135% 150% at 100% 0%, color-mix(in oklab, var(--accent) 11%, #fffdf8) 0%, #fbf8f1 58%);
  border: 1px solid color-mix(in oklab, var(--rule) 85%, transparent);
  box-shadow: 0 20px 50px -34px rgba(23,19,15,.4);
}
.cm-board {
  margin-top: 18px; border-radius: 18px; padding: 26px 26px 28px;
  color: #f3ede1;
  background: radial-gradient(140% 170% at 0% 0%, #2a2118 0%, #16120d 60%);
  box-shadow: 0 24px 56px -34px rgba(0,0,0,.55);
}
@media (max-width: 720px) {
  .cm-hero { margin: 16px 12px 0; padding: 24px 18px 20px; border-radius: 16px; }
  .cm-board { margin: 14px 12px 0; padding: 22px 18px 22px; border-radius: 16px; }
}

/* ambient accent glow in the top-right of each panel */
.cm-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 120% at 100% 0%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 46%); }
/* hero already carries a warm corner in its own background — keep the overlay subtle */
.cm-hero .cm-glow { background: radial-gradient(120% 130% at 100% 0%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 52%); }

.cm-eyebrow { position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
.cm-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); animation: cm-pulse 2s infinite; }
@keyframes cm-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.cm-hero-top { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cm-hello { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.04; margin: 9px 0 0; letter-spacing: -.01em; }
.cm-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.cm-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 13px; font-weight: 700; padding: 11px 17px; border-radius: 11px; border: 0; cursor: pointer; transition: transform .16s ease, box-shadow .2s ease, background .15s ease; }
.cm-btn .hd-arrow { width: 15px; height: 15px; }
.cm-btn-accent { background: var(--accent); color: #fff; box-shadow: 0 10px 26px -8px color-mix(in oklab, var(--accent) 60%, transparent); }
.cm-btn-accent:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px color-mix(in oklab, var(--accent) 70%, transparent); }
.cm-btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--rule); }
.cm-btn-ghost:hover { background: var(--paper-2); }
/* dark board keeps the translucent-on-dark ghost button */
.cm-board .cm-btn-ghost { background: rgba(243,237,225,.07); color: #f3ede1; border: 1px solid rgba(243,237,225,.16); }
.cm-board .cm-btn-ghost:hover { background: rgba(243,237,225,.14); }

.cm-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .cm-grid { grid-template-columns: 1.3fr 1fr 1.15fr; } }
.cm-card { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 18px 18px 16px; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(23,19,15,.02); }
.cm-card-k { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-mute); margin-bottom: 10px; }
.cm-card-ring, .cm-card-donut { align-items: center; }
.cm-card-ring .cm-card-k, .cm-card-donut .cm-card-k { align-self: flex-start; }

.cm-value-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cm-value { font-family: var(--sans); font-weight: 900; font-size: clamp(34px, 6vw, 46px); letter-spacing: -.03em; line-height: 1; }
.cm-value .cur { color: var(--ink-mute); font-size: .56em; font-weight: 800; margin-right: 2px; }
.cm-delta { font-size: 12px; font-weight: 700; color: oklch(0.5 0.13 150); background: color-mix(in oklab, oklch(0.5 0.13 150) 13%, transparent); padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.cm-delta small { opacity: .7; font-weight: 600; }
.cm-value-foot { font-size: 11.5px; color: var(--ink-mute); margin-top: auto; padding-top: 12px; }

.cm-spark { position: relative; margin: 14px 0 4px; }
.cm-spark svg { width: 100%; height: 60px; display: block; clip-path: inset(0 100% 0 0); }
.in .cm-spark svg { animation: hd-wipe 1.1s .2s forwards; }
.cm-spark-flat { height: 60px; margin: 14px 0 4px; border-bottom: 2px dashed var(--rule); }
.cm-spark-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 60%, transparent); transform: translate(-50%, -50%); opacity: 0; }
.in .cm-spark-dot { animation: hd-fadein .4s 1.1s forwards; }

/* progress ring on the light card — uses the default ink palette, just resized */
.cm-hero .hd-ring { width: 132px; height: 132px; }

/* genre donut */
.cm-donut-wrap { display: flex; align-items: center; gap: 16px; width: 100%; }
.cm-donut { width: 108px; height: 108px; flex: none; }
.cm-donut-track { fill: none; stroke: var(--rule); stroke-width: 13; }
.cm-donut-seg { fill: none; stroke-width: 13; }
.cm-donut-mid { fill: var(--ink); font-family: var(--sans); font-weight: 900; font-size: 24px; text-anchor: middle; }
.cm-donut-sub { fill: var(--ink-mute); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; }
.cm-donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; min-width: 0; flex: 1; }
.cm-donut-legend span { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.cm-donut-legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.cm-donut-legend b { margin-left: auto; font-weight: 700; color: var(--ink); }

/* highlight stats row */
.cm-highlights { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 760px) { .cm-highlights { grid-template-columns: repeat(4, 1fr); } }
.cm-hi { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 13px 14px; min-width: 0; }
.cm-hi-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); }
.cm-hi-v { font-family: var(--sans); font-weight: 800; font-size: 22px; letter-spacing: -.02em; margin-top: 5px; line-height: 1.12; }
.cm-hi-v-sm { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-hi-meta { font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-hi-jewel { border-color: color-mix(in oklab, var(--accent) 38%, var(--rule)); background: color-mix(in oklab, var(--accent) 7%, #fff); }

/* empty / onboarding state */
.cm-hero-empty { text-align: center; padding: 40px 26px; }
.cm-empty-inner { position: relative; max-width: 640px; margin: 0 auto; }
.cm-empty-sub { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; margin: 12px auto 22px; max-width: 56ch; }
.cm-hero-empty .cm-actions { justify-content: center; margin-bottom: 26px; }
.cm-empty-steps { display: grid; gap: 12px; text-align: left; }
@media (min-width: 680px) { .cm-empty-steps { grid-template-columns: repeat(3, 1fr); } }
.cm-step { display: flex; gap: 11px; align-items: flex-start; background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 13px; }
.cm-step-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.cm-step b { display: block; font-size: 13.5px; }
.cm-step span { display: block; font-size: 12px; color: var(--ink-mute); margin-top: 2px; line-height: 1.4; }

/* ===== live standings board ===== */
.cm-board-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cm-eyebrow-live { color: color-mix(in oklab, var(--accent) 72%, #f3ede1); }
.cm-board-h { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 8px 0 0; }
.cm-muted { color: rgba(243,237,225,.6); font-size: 14px; padding: 8px 2px; }
.cm-board-empty { position: relative; text-align: center; padding: 12px 0 4px; }
.cm-board-empty p { color: rgba(243,237,225,.8); font-size: 15px; margin: 0 0 14px; }

.cm-board-stat { position: relative; display: flex; align-items: center; gap: 16px; padding: 4px 2px 18px; }
.cm-rank-chip { display: flex; align-items: baseline; gap: 1px; font-family: var(--sans); font-weight: 900; line-height: 1; }
.cm-rank-hash { font-size: 22px; opacity: .5; }
.cm-rank-n { font-size: 52px; letter-spacing: -.04em; }
.cm-rank-of { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(243,237,225,.55); }
.cm-rank-climb { font-size: 16px; margin-top: 3px; }
.cm-rank-climb b { color: color-mix(in oklab, var(--accent) 78%, #f3ede1); font-weight: 700; }
.cm-rank-top { color: #f3ede1; }

.cm-board-rows { position: relative; display: flex; flex-direction: column; gap: 7px; }
.cm-row { display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; text-align: left; padding: 10px 12px; border-radius: 11px; border: 1px solid transparent; background: rgba(243,237,225,.04); transition: background .15s ease; }
.cm-row:hover { background: rgba(243,237,225,.09); }
.cm-row.is-me { background: color-mix(in oklab, var(--accent) 18%, transparent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.cm-row-rank { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; background: rgba(243,237,225,.12); color: #f3ede1; }
.cm-row-rank.m0 { background: #caa53d; color: #1a1a1a; }
.cm-row-rank.m1 { background: #c9c9c9; color: #1a1a1a; }
.cm-row-rank.m2 { background: #b87a45; color: #1a1a1a; }
.cm-row-name { flex: 0 0 26%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.cm-row.is-me .cm-row-name { color: #fff; }
.cm-row-bar { flex: 1; height: 8px; border-radius: 6px; background: rgba(243,237,225,.1); overflow: hidden; }
.cm-row-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 55%, #2a2016), var(--accent)); animation: hdlbbar .9s cubic-bezier(.2,.7,.2,1) backwards; }
.cm-row-val { flex: none; font-family: var(--sans); font-weight: 800; font-size: 14px; min-width: 70px; text-align: right; letter-spacing: -.02em; }
@media (max-width: 520px) {
  .cm-row-name { flex-basis: 32%; }
  .cm-board-head .cm-btn, .cm-hero-top .cm-actions { width: 100%; }
  .cm-board-head .cm-btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-spark svg { clip-path: none; animation: none; }
  .cm-spark-dot { opacity: 1; animation: none; }
  .cm-row-bar i { animation: none; }
  .cm-pulse { animation: none; }
}

/* =============================================================
   Scene dossier image — credit-caption containment fix
   The scene credit caption (.scene-photo > span) is
   position:absolute; bottom:0. With no positioned ancestor it
   escaped to the initial containing block and rendered as a
   full-viewport-width bar (its gradient) with the credit text
   pinned to the left edge, one viewport-height down. Give
   .scene-art the positioning context and let the photo fill the
   400/260 aspect box so the caption sits on its own image
   (clipped by .scene-art's overflow:hidden). Shared: canon + dives.
   ============================================================= */
.scene-art { position: relative; }
.scene-art .scene-photo { position: absolute; inset: 0; }

/* ===========================================================
   Your-collection hero dash: feature-set detail upgrade.
   Adds a per-record mover row, a Collection DNA label + era/
   span note, and a leaderboard rank chip to the existing
   animated hd-dash, on the same dark hero surface and the same
   .in-triggered motion vocabulary. Append-only.
   =========================================================== */
.hd-dash-delta small { font-weight: 600; opacity: .7; font-size: 10px; }

/* biggest mover row (the per-record pulse) */
.hd-dash-mover {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0 16px; padding: 10px; border-radius: 9px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
}
.hd-dash-mover-cv {
  width: 34px; height: 34px; flex: none; border-radius: 4px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #241d18, #4a3b31);
}
.hd-dash-mover-cv::after {
  content: ""; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #0d0d0d 22%, #2c2c2c 24%, #2c2c2c 48%, #555 50%);
}
.hd-dash-mover-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hd-dash-mover-k { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: rgba(243,237,225,.5); }
.hd-dash-mover-t { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-dash-mover-move { font-family: var(--sans); font-weight: 800; font-size: 14px; color: #7CFC9B; white-space: nowrap; }

/* Collection DNA label + era/span read under the genre bars */
.hd-dash-dna-k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(243,237,225,.5); margin-bottom: 9px; }
.hd-dash-dna-note { font-size: 11px; color: rgba(243,237,225,.62); margin-top: 11px; letter-spacing: .01em; }

/* leaderboard rank chip */
.hd-dash-rank {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: rgba(243,237,225,.78);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  padding: 5px 11px; border-radius: 20px;
}

/* share the hd-dash in-view motion vocabulary (staggered rise), motion-safe */
.hd-dash-mover, .hd-dash-dna-k, .hd-dash-dna-note, .hd-dash-rank { opacity: 0; }
.in .hd-dash-mover  { animation: hd-rise .5s cubic-bezier(.2,.7,.2,1) .55s forwards; }
.in .hd-dash-dna-k  { animation: hd-rise .5s cubic-bezier(.2,.7,.2,1) .7s forwards; }
.in .hd-dash-dna-note { animation: hd-rise .5s cubic-bezier(.2,.7,.2,1) 1.15s forwards; }
.in .hd-dash-rank   { animation: hd-rise .5s cubic-bezier(.2,.7,.2,1) 1.3s forwards; }
@keyframes hd-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hd-dash-mover, .hd-dash-dna-k, .hd-dash-dna-note, .hd-dash-rank { opacity: 1; animation: none; }
}

/* ===========================================================
   Solo collector-terminal hero. The canon half was removed, so
   the terminal is now the whole hero. Mobile keeps the existing
   stacked dark card (copy then live dash). Desktop promotes it
   to a centered dark card split into copy + dash side by side.
   Append-only; scoped to .hd-hero-solo so nothing else shifts.
   =========================================================== */
@media (min-width: 900px) {
  .hd-hero-solo {
    grid-template-columns: 1fr;
    grid-template-areas: "collection";
    max-width: 1060px;
    padding-top: 112px;
    padding-bottom: 24px;
  }
  .hd-hero-solo .hd-half-collection {
    grid-area: collection;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
    gap: 48px;
    padding: 46px 48px;
  }
  .hd-hero-solo .hd-terminal-copy { align-self: center; }
  .hd-hero-solo .hd-terminal-copy .hd-h { font-size: 44px; line-height: 1.03; }
  .hd-hero-solo .hd-terminal-copy .hd-sub { max-width: 36ch; }
  .hd-hero-solo .hd-dash { margin-top: 0; }
}

/* ===========================================================
   Homepage terminal hero, v2. A price ticker under the nav, a
   warm (not black) hero with real album-cover imagery, and the
   live dash promoted to a standout dark terminal panel that
   floats over a fan of covers. Scoped to the terminal hero.
   =========================================================== */

/* ---- price ticker directly below the fixed nav ------------------------- */
.hd-ticker {
  position: relative; z-index: 1;
  margin-top: -19px; /* tuck flush under the fixed nav so the nav's bottom border is the SINGLE divider (no top border here, no gap) */
  border-bottom: 1px solid var(--rule);
  background: color-mix(in oklab, var(--accent) 5%, var(--paper));
  overflow: hidden; white-space: nowrap;
}
.hd-ticker-track {
  display: inline-block; padding: 8px 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-2);
  animation: hd-ticker 44s linear infinite; will-change: transform;
}
.hd-tk { margin: 0 20px; }
.hd-tk-sym { color: var(--ink); font-weight: 600; }
.hd-ticker .up { color: #1f7a44; }
.hd-ticker .down { color: var(--accent); }
@keyframes hd-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hd-ticker-track { animation: none; } }
/* mobile: .manifesto-home padding-top (64px) is ~= the nav height (65px), so a
   tiny positive nudge sits the ticker flush without overlapping the nav */
@media (max-width: 640px) {
  .hd-ticker { margin-top: 0; }
  /* Smaller, tighter tape on phones — it's an ambient strip, not a headline. */
  .hd-ticker-track { font-size: 9px; letter-spacing: .03em; padding: 5px 0; }
  .hd-tk { margin: 0 12px; }
}

/* ---- warm hero shell (drops the harsh black) --------------------------- */
.hd-hero-terminal {
  position: relative; overflow: hidden;
  padding-top: 26px; padding-bottom: 30px;
  background:
    radial-gradient(120% 88% at 90% -12%, color-mix(in oklab, var(--accent) 18%, var(--paper)) 0%, transparent 56%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.hd-hero-terminal .hd-terminal-inner { position: relative; z-index: 1; }
.hd-hero-terminal .hd-eyebrow { color: var(--accent); }
.hd-hero-terminal .hd-h { color: var(--ink); }
.hd-hero-terminal .hd-sub { color: var(--ink-2); }
.hd-hero-terminal .hd-cta-accent {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 12px 28px color-mix(in oklab, var(--accent) 42%, transparent);
}
.hd-terminal-note { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--ink-mute); margin-top: 12px; }

/* ---- stage: album-cover fan + the terminal dash ------------------------ */
.hd-terminal-stage { position: relative; margin-top: 22px; }
.hd-cover-fan { display: none; }

/* the dash becomes a self-contained dark terminal panel that pops on paper */
.hd-hero-terminal .hd-dash {
  position: relative; z-index: 2; border-radius: 16px; padding: 20px;
  background: linear-gradient(180deg, #241b12 0%, #16100a 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 70px rgba(23,19,15,.34);
}
/* (removed the vermillion top accent line on the dash) */
/* real cover art in the mover row */
.hd-dash-mover-cv { object-fit: cover; background: #241d18; }
.hd-dash-mover-cv::after { content: none; }

@media (min-width: 900px) {
  .hd-hero-terminal { padding-top: 40px; }
  .hd-hero-terminal .hd-terminal-inner {
    display: grid; grid-template-columns: 1.04fr 0.96fr; align-items: center;
    gap: 56px; max-width: 1080px; margin: 0 auto;
  }
  .hd-hero-terminal .hd-terminal-copy { align-self: center; }
  .hd-terminal-stage { margin-top: 0; }

  /* cover fan: three real covers, tilted, peeking around the dash */
  .hd-cover-fan { display: block; position: absolute; inset: -22px -18px -22px -26px; z-index: 0; pointer-events: none; }
  .hd-cover-fan img {
    position: absolute; width: 172px; aspect-ratio: 1; object-fit: cover; border-radius: 9px;
    box-shadow: 0 22px 50px rgba(23,19,15,.30); transform: rotate(var(--r));
    animation: hd-float 7.5s ease-in-out infinite;
  }
  .hd-cover-fan img:nth-child(1) { --r: -9deg; left: -14px; top: 6px; }
  .hd-cover-fan img:nth-child(2) { --r: 7deg; right: -10px; top: -10px; animation-delay: -2.4s; }
  .hd-cover-fan img:nth-child(3) { --r: -3deg; left: 46px; bottom: -18px; animation-delay: -4.8s; }
}
@keyframes hd-float { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-9px) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .hd-cover-fan img { animation: none; } }

/* ===========================================================
   Canon introduction band. A prominent, verbose header for the
   Lead-In 100, placed below this week's deep dive. Reinstates
   the canon pitch that left the hero when the terminal took over.
   =========================================================== */
.hd-canon-intro { padding: 54px 24px 50px; border-bottom: 1px solid var(--rule); text-align: center; background: var(--paper); }
.hd-canon-inner { max-width: 780px; margin: 0 auto; }
.hd-canon-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.hd-canon-h { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; font-size: 33px; line-height: 1.08; color: var(--ink); margin: 0 0 20px; }
.hd-canon-lede { font-family: var(--body-serif); font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0 auto 16px; max-width: 60ch; }
.hd-canon-intro .hd-cta-accent { background: var(--accent); border-color: var(--accent); color: #fff; margin-top: 10px; }
@media (min-width: 900px) {
  .hd-canon-intro { padding: 76px 56px 70px; }
  .hd-canon-h { font-size: 50px; line-height: 1.04; }
  .hd-canon-lede { font-size: 19px; }
}

/* Ranked-list add failure toast. The collection add is a real network write, so
   a failure has to be visible rather than closing the sheet silently. */
.lp-add-err {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 10000;
  display: flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 14px; border-radius: 10px;
  background: oklch(0.42 0.12 28); color: oklch(0.98 0.01 90);
  font-size: 14px; line-height: 1.45; box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}
.lp-add-err button {
  flex: none; min-width: 44px; min-height: 44px;
  background: none; border: 0; color: inherit; font-size: 22px; line-height: 1; cursor: pointer;
}

/* ===========================================================================
   Nav accessibility. The top-level items and the account menu were href-less
   <a> and clickable <div>s: unfocusable, announced as plain text, and with no
   pointer cursor. They are now real links and buttons, which needs the element
   defaults neutralised and proper focus + touch affordances.
   =========================================================================== */
.topnav .brand,
.topnav .links a { cursor: pointer; text-decoration: none; color: inherit; }

/* 11px uppercase with no padding gave ~11px tall targets. Pad to a comfortable
   hit area without moving the visual baseline (the flex row centres them). */
.topnav .links a { padding: 10px 2px; }

/* The account trigger is a <button> now — strip the UA chrome. */
.topnav .nav-avatar {
  background: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
}
/* Sign out is a <button> so it can be reached by keyboard; match the sibling links. */
.nav-menu .signout {
  background: none; border: 0; font: inherit; color: inherit; cursor: pointer;
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 9px;
}

/* Visible keyboard focus. Without this the new focusability would be invisible. */
.topnav .brand:focus-visible,
.topnav .links a:focus-visible,
.topnav .nav-avatar:focus-visible,
.topnav .nav-burger:focus-visible,
.nav-menu a:focus-visible,
.nav-menu .signout:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
  opacity: 1;
}

/* Touch: the nav collapses into a sheet, so give every row a real 44px target. */
@media (max-width: 860px) {
  .topnav .links a { padding: 14px 0; min-height: 44px; display: flex; align-items: center; }
  .topnav .nav-burger { min-width: 44px; min-height: 44px; }
  .nav-menu .signout { min-height: 44px; }
}

/* Two-step remove on a collection card. The trash icon used to delete on one tap
   with no confirmation and no undo; this is the confirm state that replaces it.
   Lives in styles.css (not collection.css) purely to avoid a merge collision. */
.mc-confirm { display: inline-flex; gap: 6px; align-items: center; }
.mc-confirm button {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 9px; min-height: 34px; border-radius: 6px; cursor: pointer; border: 1px solid transparent;
}
.mc-confirm-yes {
  background: oklch(0.48 0.15 28); color: oklch(0.98 0.01 90); border-color: oklch(0.42 0.15 28);
}
.mc-confirm-no {
  background: var(--paper, #f3ede1); color: var(--ink, #17130f); border-color: var(--rule, #d8d0bd);
}
.mc-confirm button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The actions row is opacity:0 until hover, so a card mid-confirmation must stay
   visible or the choice disappears under the pointer. */
.mc-card .mc-card-actions:has(.mc-confirm) { opacity: 1; }

/* REL-01 — Remove/Keep overlapped the card's own content on the confirmation.
   .mc-card-actions is position:absolute top-right and .mc-card-top reserves a
   fixed 76px for it, which is sized for the COLLAPSED cluster (two 26px icons +
   an 18px gap, plus the 44px hit pseudo overhanging ~9px). Mid-confirmation the
   cluster becomes two text buttons ~114px wide, so it ran 32px over the M/M
   condition chip at every width — the collision QA logged. Dropping the details
   icon (in the JSX) narrows it, and the reserve widens to match only while
   confirming, so the common state keeps its roomy title column. */
.mc-card-confirming .mc-card-top { padding-right: 126px; }
/* Belt and braces: give the confirm pair an opaque backing so that if a very
   long title still reaches under it, the choice stays legible rather than
   sitting on top of text. */
.mc-confirm {
  background: var(--paper, #f3ede1);
  border-radius: 8px;
  box-shadow: 0 0 0 4px var(--paper, #f3ede1);
}
/* The chip is only in the way while the cluster is expanded, and only on the
   narrowest cards where 126px of reserve leaves the title nothing. Below 420px
   the condition chip steps out of the band for the duration of the confirm. */
@media (max-width: 420px) {
  .mc-card-confirming .mc-card-top { padding-right: 0; }
  .mc-card-confirming .mc-cond { visibility: hidden; }
}

/* ---- TodayCard: Album of the Day + visit streak (components/TodayCard.jsx) ----
   Sits above the homepage manifesto. Album of the Day ran as email-only from July
   with no in-app surface at all; this is the daily reason to open the site, and the
   streak is the only thing in the product that rewards a visit rather than a
   purchase. Muted greys use --ink-2, not --ink-mute: at 3.33:1 on paper the latter
   fails WCAG AA for body text. */
/* Clears the fixed .topnav (position:fixed, 77px, z-index 50). As the first
   element on the homepage the card sat underneath it, hiding the kicker and the
   title. Same construction as .countdown-page: nav height plus the notched-iOS
   safe-area term. */
.td { border-bottom: 1px solid var(--rule); background: var(--paper-2);
  padding-top: calc(66px + max(0px, env(safe-area-inset-top, 0px) - 12px)); }
/* Third column is the streak badge (auto, so it collapses to nothing when there is
   no streak to show and the card keeps its original two-column proportions). */
.td-inner { max-width: var(--content-w); margin: 0 auto; padding: 22px 40px;
  display: grid; grid-template-columns: 128px 1fr auto; gap: 26px; align-items: start; }
.td-media img { display: block; width: 128px; height: 128px; object-fit: cover;
  border: 1px solid var(--rule); background: var(--paper); }
.td-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }

/* The visit streak. Previously a mono fragment appended to the kicker, i.e. the
   smallest type on the card — for the one mechanic here that rewards showing up.
   Now a bordered block with the count set in the display serif, so it carries
   without competing with the album title beside it. */
.td-streak { align-self: center; text-align: center; min-width: 150px; padding: 15px 18px;
  border: 1px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 7%, var(--paper)); }
.td-streak-n { font-family: var(--serif); font-weight: 400; font-size: 42px; line-height: 1;
  letter-spacing: -0.02em; color: var(--accent); }
.td-streak-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-2); margin-top: 7px; }
.td-streak-nudge { font-family: var(--mono); font-size: 10px; line-height: 1.45;
  letter-spacing: 0.02em; color: var(--ink-2); margin-top: 10px; max-width: 17ch;
  margin-left: auto; margin-right: auto; }

/* Signed-out: an offer, not an achievement. Muted rule border and flat paper
   instead of the accent border + accent tint, and no numeral at all, so an earned
   streak stays the thing that looks earned. */
.td-streak--invite { border-color: var(--rule); background: var(--paper); }
.td-streak--invite .td-streak-l { margin-top: 0; color: var(--ink); }
.td-streak--invite .td-streak-nudge { max-width: 19ch; }
.td-streak-cta { margin-top: 11px; padding: 8px 13px; min-height: 44px; cursor: pointer;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; }
.td-streak-cta:hover { background: var(--ink); color: var(--paper); }
.td-h { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.08; letter-spacing: -0.01em; margin: 0; }
.td-rank { font-family: var(--mono); font-size: 0.6em; letter-spacing: 0.04em;
  color: var(--ink-2); vertical-align: 0.25em; margin-right: 4px; }
.td-artist { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2); margin-top: 6px; }
.td-hook { font-family: var(--body-serif); font-size: 15.5px; line-height: 1.5;
  color: var(--ink-2); margin: 12px 0 0; max-width: 62ch; }
.td-cta { display: inline-block; margin-top: 14px; padding: 10px 18px; min-height: 44px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
.td-cta:hover { background: var(--accent); border-color: var(--accent); }
.td-fine { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-2); margin-top: 10px; opacity: 0.75; }
@media (max-width: 720px) {
  .td-inner { grid-template-columns: 84px 1fr; gap: 16px; padding: 18px 20px; }
  .td-media img { width: 84px; height: 84px; }
  /* Two columns at this width, so the badge takes its own full-width row under the
     card rather than squeezing the title into a sliver. Laid out on one line —
     count, label, nudge — because a 150px-tall block stacked here would push the
     CTA below the fold on a phone. */
  .td-streak { grid-column: 1 / -1; min-width: 0; padding: 12px 14px;
    display: flex; align-items: center; gap: 12px; text-align: left; }
  .td-streak-n { font-size: 30px; }
  .td-streak-l { margin-top: 0; }
  .td-streak-nudge { margin: 0 0 0 auto; max-width: 20ch; text-align: right; }
  /* The invite has no numeral to anchor a three-part row, and its button must not
     be squeezed against the copy, so it wraps: label + sentence on one line, the
     button on its own beneath, left-aligned with the rest of the card. */
  .td-streak--invite { flex-wrap: wrap; }
  .td-streak--invite .td-streak-nudge { max-width: 26ch; }
  .td-streak-cta { margin-top: 2px; flex: 0 0 auto; }
}

/* ===========================================================
   /today — the daily destination (components/TodayPage.jsx)
   Shares the TodayCard vocabulary but laid out as a page, not a strip.
   =========================================================== */
.tdp { padding-top: calc(66px + max(0px, env(safe-area-inset-top, 0px) - 12px)); }
.tdp-inner { max-width: var(--content-w); margin: 0 auto; padding: 30px 40px 64px; }
.tdp-crumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 22px; }
.tdp-crumb a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); }
.tdp-crumb a:hover { color: var(--accent); }
.tdp-head { border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
.tdp-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); }
.tdp-date { color: var(--ink-2); }
.tdp-title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 46px);
  line-height: 1.04; letter-spacing: -0.015em; margin: 12px 0 0; max-width: 24ch; }
.tdp-standfirst { font-family: var(--body-serif); font-size: 17px; line-height: 1.55;
  color: var(--ink-2); margin: 14px 0 0; max-width: 62ch; }

.tdp-pick { display: grid; grid-template-columns: 320px 1fr; gap: 44px;
  align-items: start; padding: 34px 0; border-bottom: 1px solid var(--rule); }
.tdp-cover img { display: block; width: 320px; height: 320px; object-fit: cover;
  border: 1px solid var(--rule); background: var(--paper-2); }
.tdp-rank { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2); }
.tdp-album { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.06; letter-spacing: -0.015em; margin: 8px 0 0; }
.tdp-artist { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2); margin-top: 8px; }
.tdp-hook { font-family: var(--body-serif); font-size: 16.5px; line-height: 1.55;
  color: var(--ink-2); margin: 16px 0 0; max-width: 58ch; }
.tdp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tdp-cta, .tdp-cta2 { padding: 12px 20px; min-height: 44px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; }
.tdp-cta { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.tdp-cta:hover { background: var(--accent); border-color: var(--accent); }
.tdp-cta2 { border: 1px solid var(--rule); background: transparent; color: var(--ink); }
.tdp-cta2:hover { border-color: var(--ink); }
.tdp-streak { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--ink-2); margin-top: 18px; }

.tdp-recent { padding-top: 30px; }
.tdp-recent-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 400; margin: 0 0 16px; }
.tdp-recent-list { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tdp-recent-list a { display: block; text-decoration: none; color: inherit; }
.tdp-recent-list img { display: block; width: 64px; height: 64px; object-fit: cover;
  border: 1px solid var(--rule); background: var(--paper-2); margin-bottom: 10px; }
.tdp-recent-when { display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.tdp-recent-title { display: block; font-family: var(--serif); font-size: 17px;
  line-height: 1.2; margin-top: 4px; }
.tdp-recent-list a:hover .tdp-recent-title { color: var(--accent); }
.tdp-recent-artist { display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; }

@media (max-width: 900px) {
  .tdp-pick { grid-template-columns: 1fr; gap: 24px; }
  .tdp-cover img { width: 100%; height: auto; max-width: 320px; aspect-ratio: 1; }
  .tdp-recent-list { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 720px) {
  .tdp-inner { padding: 22px 20px 48px; }
}

/* ===========================================================
   PushOptIn (components/PushOptIn.jsx) — the notification ask.
   Two variants: a dismissible card on /today, a row in account settings.
   =========================================================== */
.po-card { display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  justify-content: space-between; margin: 26px 0 0; padding: 16px 18px;
  border: 1px solid var(--rule); background: var(--paper-2); border-radius: 10px; }
.po-card-text { flex: 1 1 300px; }
.po-card-h { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); }
.po-card-sub { font-family: var(--body-serif); font-size: 15px; line-height: 1.5;
  color: var(--ink-2); margin: 8px 0 0; max-width: 56ch; }
.po-card-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.po-row { display: flex; gap: 18px; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.po-row-text { flex: 1 1 280px; }
.po-row-h { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink); }
.po-row-sub { font-family: var(--body-serif); font-size: 14.5px; line-height: 1.5;
  color: var(--ink-2); margin-top: 6px; max-width: 60ch; }

.po-btn { padding: 11px 18px; min-height: 44px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; }
.po-btn:hover { background: var(--accent); border-color: var(--accent); }
.po-btn--off { background: transparent; color: var(--ink); border-color: var(--rule); }
.po-btn--off:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.po-skip { padding: 11px 12px; min-height: 44px; cursor: pointer; background: none;
  border: 0; color: var(--ink-2); text-decoration: underline;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; }
.po-err { font-family: var(--mono); font-size: 11.5px; line-height: 1.45;
  color: #a8422a; margin-top: 8px; }

/* ===========================================================
   TodayCard → ticker seam.
   .manifesto-home carries padding-top purely to clear the fixed nav (80px on
   desktop, ~64px on mobile), because it used to be the first thing on the page.
   The Album of the Day card now sits above it and does that job itself (.td has
   its own calc(66px + safe-area) padding-top), so that clearance became dead
   paper: 61px of it on desktop, 64px on mobile, between the bottom of the card
   and the ticker tape.
   .hd-ticker is designed to tuck flush under whatever border is above it —
   margin-top: -19px on desktop, 0 on mobile — so the divider above it is a
   single rule and not a rule plus a gap. That border is now the card's
   border-bottom, so these values exactly cancel the tuck and restore the
   intended seam.
   Scoped to the sibling combinator on purpose: on any page where the card is
   absent (it renders only on the home route, and only once TodayCard.jsx has
   loaded) .manifesto-home keeps its nav clearance and the ticker does not end
   up behind the nav.
   =========================================================== */
.td ~ .stage .manifesto-home { padding-top: 19px; }
@media (max-width: 640px) {
  .td ~ .stage .manifesto-home { padding-top: 0; }
}

/* ===========================================================
   TodayAdd (components/TodayCard.jsx) — one-tap "add today's record".
   The ask that belongs on the Album of the Day surface: a guest can add 25
   records before an account is needed and they migrate on signup, so this
   costs nothing and feeds activation. It replaced a third email field.
   =========================================================== */
.tda { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.tda--compact { margin-top: 10px; }
.tda-btn { padding: 10px 16px; min-height: 44px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; }
.tda-btn:hover { border-color: var(--accent); color: var(--accent); }
.tda-btn[disabled] { opacity: 0.6; cursor: default; }
.tda-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em;
  color: var(--ink-2); }
.tda-err { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: #a8422a; }
.tda--done { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em;
  color: var(--ink-2); align-items: baseline; }
.tda-tick { color: #2f7d4f; font-weight: 700; }

/* ---- sticky add bar, /today, mobile only (components/TodayPage.jsx) --------
   The inline add sits 1.32 screens down at 375x812, so on a phone the page's one
   action needed a scroll. This pins it. Mobile only by deliberate choice: on a
   desktop viewport the inline button is already reachable and a permanently
   pinned bar would be intrusive, so the rule lives entirely inside the 640px
   media query below and desktop is untouched.
   Mirrors .frb (collection.css): same fixed footprint, same accent top rule, same
   safe-area padding for the iPhone home indicator, same slide-in. */
@media (max-width: 640px) {
  .tsb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--ink); border-top: 2px solid var(--accent);
    box-shadow: 0 -10px 30px -18px rgba(0,0,0,.7);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: tsb-in .3s cubic-bezier(.2,.8,.2,1); }
  .tsb-in { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
  .tsb-cover { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 3px;
    object-fit: cover; background: var(--rule); }
  /* The button carries the bar; its note drops underneath as one quiet line. */
  .tsb .tda { flex: 1 1 auto; margin-top: 0; gap: 2px 10px; min-width: 0; }
  .tsb .tda-btn { flex: 1 1 100%; width: 100%; justify-content: center;
    background: var(--accent); border-color: var(--accent); color: #fff; }
  .tsb .tda-btn:hover { border-color: var(--accent); color: #fff; }
  .tsb .tda-note, .tsb .tda-err { flex: 1 1 100%; color: var(--paper);
    opacity: .62; font-size: 10px; line-height: 1.35; }
  /* The ✓ receipt after adding from the bar — legible on the dark ground. */
  .tsb .tda--done { color: var(--paper); margin-top: 0; }
  .tsb .tda--done .tda-note { opacity: .62; }
  /* Lift the floating feedback launcher clear of the bar, exactly as .frb does. */
  body.tsb-active .fbw { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes tsb-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .tsb { animation: none; }
}

/* ===========================================================
   End-of-essay daily-email capture (components/AlbumPage.jsx).
   One ask, for the one email with reach. Replaces the mid-essay weekly pitch
   and the dwell popup, which between them converted 0 of 59 shows.
   =========================================================== */
.ap-daily-signup { max-width: 1200px; margin: 0 auto; padding: 0 56px 8px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: center; }
.ap-daily-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); }
.ap-daily-h { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.14; letter-spacing: -0.01em; margin: 8px 0 0; }
.ap-daily-sub { font-family: var(--body-serif); font-size: 15px; line-height: 1.5;
  color: var(--ink-2); margin: 10px 0 0; max-width: 54ch; }
@media (max-width: 900px) {
  .ap-daily-signup { grid-template-columns: 1fr; gap: 18px; padding: 0 20px 8px; }
}