/* Rock 2000 Analytics — styled with the DATAMetrics Design System.
   Tokens sourced from the "DATAMetrics Design System" Claude Design project
   (tokens/colors.css, typography.css, radii.css, app.css). The system is a
   light identity — no dark mode is defined, so none is shipped. Red is the
   accent and is deliberately never spent on chart series (viz ramp leads
   blue-grey/indigo, red last). */

:root {
  color-scheme: light;

  /* -- DATAMetrics tokens ---------------------------------------------- */
  --dm-indigo: #393858;
  --dm-blue-grey: #647A97;
  --dm-blue-grey-shade: #506178;
  --dm-red: #B12029;
  --dm-red-shade: #901A21;
  --dm-warm-white: #E2DDD4;
  --dm-warm-white-40: #F3F1ED;
  --dm-warm-white-tint-2: #EDEAE5;
  --dm-mid-grey: #A5A3A7;
  --dm-ink-soft: #333333;
  --site-purple: #522D62;
  --site-purple-dark: #3F2B56;
  --site-page-bg: #F8F8F8;
  --site-neutral: #666666;
  --app-hairline: #E4E4E6;
  --app-table-stripe-bg: #FBFAF8;
  --viz-cat-1: #647A97;   /* blue-grey */
  --viz-cat-2: #393858;   /* indigo */
  --viz-cat-3: #A2AFC0;   /* blue-grey tint-2 */
  --viz-cat-4: #88879A;   /* indigo tint-2 */
  --viz-grid: var(--app-hairline);
  --viz-axis: var(--dm-mid-grey);
  --font-core: "Maven Pro", Verdana, sans-serif;
  --radius: 5px;

  /* -- role mapping consumed by pages + chart ---------------------------
     2026 brand colourways: white page plane, indigo headings/inverse. */
  --surface-1: #FFFFFF;
  --page: var(--dm-white, #FFFFFF);
  --ink: var(--dm-ink-soft);
  --ink-2: var(--site-neutral);
  --muted: var(--dm-mid-grey);
  --grid: var(--viz-grid);
  --baseline: var(--viz-axis);
  --border: var(--app-hairline);
  --series-1: var(--viz-cat-1);
  --brand: var(--dm-red);
}

* { box-sizing: border-box; }

/* Line icons (see ICON_PATHS in app.js). Stroke-only on a 24x24 grid, coloured
   by `color` at the call site, so an icon always matches the text it sits with.
   Sized in em by default so inline uses track the surrounding type. */
.ico {
  width: 1.15em; height: 1.15em; flex: 0 0 auto; display: inline-block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.22em;
}

body {
  margin: 0;
  font-family: var(--font-core);
  font-size: 14px;             /* app scale: --app-text-md */
  line-height: 1.45;
  background: var(--page);
  color: var(--ink);
}

/* Inverse header band — 2026 brand identity: indigo, not the legacy purple.
   The bar bleeds full width; its content is constrained to the hero's track
   (1900px cap, 8px outer inset) via responsive padding. */
header.site {
  display: flex; align-items: center; gap: 16px;
  padding: 0 max(24px, calc((100% - 1900px) / 2 + 8px));
  height: 56px;   /* --app-header-height */
  background: var(--dm-indigo);
  color: #fff;
  position: sticky; top: 0; z-index: 5;
}
/* The wordmark and the nav never wrap and never shrink.
   With nine nav items, a search box and the vote button, the bar wants 1301px
   and a 1280px laptop gives it 1280. Flex settled that 21px by shrinking the
   nav, which had nothing stopping its items breaking mid-name, so every one of
   them went to two lines and the wordmark did too: a 21px shortfall rendered as
   a wrecked header. Pinning these two means the shortfall has to come out of
   the search box instead, which can afford it. */
header.site h1 { font-size: 20px; font-weight: 700; margin: 0; white-space: nowrap; flex: 0 0 auto; }
header.site h1 a { color: #fff; text-decoration: none; }
header.site .accent { color: var(--dm-warm-white); font-weight: 500; }
header.site nav { display: flex; gap: 13px; font-size: 14px; font-weight: 500; flex: 0 0 auto; }
header.site nav a { color: rgba(255, 255, 255, 0.85); text-decoration: none; white-space: nowrap; }
header.site nav a:hover { color: #fff; }
header.site .spacer { flex: 1; }
/* the one flexible thing in the bar: it gives ground before anything else does */
header.site input[type="search"] { flex: 0 1 181px; min-width: 96px; }

/* hamburger toggle (injected by app.js) — hidden on desktop */
header.site .nav-toggle {
  display: none;
  font: inherit; font-size: 22px; line-height: 1;
  background: none; border: 0; color: #fff;
  padding: 6px 10px; cursor: pointer; border-radius: var(--radius);
}
.vote-cta .cta-short { display: none; }

main { max-width: 1100px; margin: 0 auto; padding: 20px 24px; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.card h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--dm-indigo); }
.hint { color: var(--ink-2); font-size: 13px; }

.tiles { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tile {
  flex: 1 1 130px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.tile .v { font-size: 24px; font-weight: 700; line-height: 1.35; }
.tile .k { font-size: 11px; color: var(--ink-2); margin-top: 2px;
           text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

/* the .k treatment, for headings that sit outside a tile */
.subhead { font-size: 11px; color: var(--ink-2); text-transform: uppercase;
           letter-spacing: 0.08em; font-weight: 600; margin-bottom: 6px; }

/* breakdown bars: a country or era split reads at a glance as length. The same
   numbers in a column have to be compared by eye, one pair at a time. */
.bars { display: grid; grid-template-columns: auto 1fr auto; gap: 5px 10px; align-items: center; }
.bars .lbl { font-size: 13px; white-space: nowrap; }
.bars .track { background: var(--app-table-stripe-bg); border: 1px solid var(--border);
               border-radius: 3px; height: 10px; overflow: hidden; min-width: 40px; }
.bars .fill { background: var(--series-1); height: 100%; }
.bars .n { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
/* wide tables (compare-by-year) scroll sideways inside their card */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* table toolbar: rows-per-page picker + pager (archive browser) */
.table-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.table-tools .spacer { flex: 1; }
button.ghost:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
#list { scroll-margin-top: 72px; }   /* pager jumps land below the sticky header */
table.data th {
  text-align: left; font-weight: 600; font-size: 13px;
  color: var(--ink);
  background: var(--dm-warm-white-40);   /* app table header band */
  padding: 8px 12px; border-bottom: 1px solid var(--baseline);
}
table.data td { padding: 6px 12px; border-bottom: 1px solid var(--app-hairline); }
table.data tbody tr:nth-child(even) td { background: var(--app-table-stripe-bg); }
table.data tbody tr:hover td { background: var(--dm-warm-white-tint-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data a { color: var(--ink); text-decoration: none; font-weight: 500; }
table.data a:hover { color: var(--dm-red); }

.delta-up { color: #027A48; }      /* --site-success */
.delta-down { color: var(--ink-2); }

select, input[type="search"], button.ghost {
  font: inherit; font-family: var(--font-core); color: var(--ink);
  background: var(--surface-1);
  border: 1px solid var(--dm-mid-grey);
  border-radius: var(--radius);
  padding: 7px 10px;
}
button.ghost { cursor: pointer; border: 2px solid var(--dm-red); font-weight: 500; }
button.ghost:hover { background: var(--dm-red); color: #fff; }

.chart-wrap { position: relative; }
.chart-tooltip {
  position: absolute; pointer-events: none; display: none;
  background: var(--surface-1); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 10px; font-size: 13px;
  box-shadow: 0 4px 14px rgba(40, 40, 41, 0.15);
  white-space: nowrap; z-index: 10;
}
.chart-tooltip .t { color: var(--muted); font-size: 11px; }

nav.crumbs { font-size: 13px; color: var(--ink-2); margin: 0 0 12px; }
nav.crumbs a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
nav.crumbs a:hover { color: var(--dm-red); }
nav.crumbs span { color: var(--ink); font-weight: 600; }

.spotify-btn {
  display: inline-block;
  padding: 8px 14px;
  border: 2px solid #1DB954;          /* Spotify brand green, external-service affordance */
  border-radius: var(--radius);
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px;
  white-space: nowrap;
}
.spotify-btn:hover { background: #1DB954; color: #fff; }

/* translucent surfaces for widgets sitting on the hero backdrop */
#facts .tile, .card.glass { background: rgba(255, 255, 255, 0.90); }

/* backdrop credit badge — pinned to the hero panel's top-right corner */
a.hero-note {
  position: absolute; top: 66px; left: 50%; z-index: 6;
  transform: translateX(calc(min(var(--hero-w, 1900px), 100vw - 16px) / 2 - 36px));
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.9); color: var(--ink-2);
  border: 1px solid var(--dm-mid-grey);
  font-weight: 700; font-size: 14px; text-decoration: none;
}
a.hero-note:hover { color: var(--dm-red); border-color: var(--dm-red); }

/* its hover card — carries links now, so it lingers like the footer card */
.hero-tip {
  position: absolute; z-index: 7;
  top: 100px; left: 50%;
  transform: translateX(calc(min(var(--hero-w, 1900px), 100vw - 16px) / 2 - 100%));
  width: 320px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
  box-shadow: 0 8px 24px rgba(40, 40, 41, 0.22);
  color: var(--ink);
  visibility: hidden; opacity: 0;
  transition: opacity 0.25s ease 1.2s, visibility 0s linear 1.45s;
}
.hero-tip:hover { border-color: var(--dm-red); }
a.hero-note:hover + .hero-tip, .hero-tip:hover, .hero-tip:focus-within {
  visibility: visible; opacity: 1;
  transition-delay: 0s, 0s;
}
.hero-tip a { color: inherit; text-decoration: none; }
.hero-tip .song a:hover, .hero-tip .artist a:hover { color: var(--dm-red); }
.hero-tip .head { display: flex; gap: 10px; align-items: center; }
.hero-tip img { width: 64px; height: 64px; border-radius: var(--radius); object-fit: cover; }
.hero-tip .song { font-weight: 700; font-size: 15px; line-height: 1.3; }
.hero-tip .artist { color: var(--ink-2); font-size: 13px; }
.hero-tip .when { color: var(--dm-red); font-size: 12px; font-weight: 600; margin-top: 2px; }
.hero-tip .stats {
  display: flex; gap: 14px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--app-hairline);
}
.hero-tip .stats .stat { text-align: center; }
.hero-tip .stats a.stat:hover .v { color: var(--dm-red); }
.hero-tip .stats .v { font-weight: 700; font-size: 15px; }
.hero-tip .stats .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.hero-tip .eyebrow {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600; margin-bottom: 8px;
}

/* headline chart carousel */
.caro-head { display: flex; align-items: center; gap: 10px; }
.caro-head h2 { flex: 1; }
.caro-head button {
  font: inherit; cursor: pointer; color: var(--ink);
  background: var(--surface-1); border: 1px solid var(--dm-mid-grey);
  border-radius: var(--radius); padding: 4px 12px; font-weight: 600;
}
.caro-head button:hover { border-color: var(--dm-red); color: var(--dm-red); }
.caro-dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.caro-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dm-mid-grey); opacity: 0.4; cursor: pointer;
}
.caro-dots span.on { background: var(--dm-red); opacity: 1; }

/* number-one lineage strip */
.lineage { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 10px; }
.lineage a {
  flex: 0 0 auto; width: 108px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); padding: 8px;
}
.lineage a:hover { border-color: var(--dm-red); }
.lineage img { width: 92px; height: 92px; border-radius: var(--radius); object-fit: cover; display: block; }
.lineage .yr { font-weight: 700; font-size: 13px; margin-top: 6px; }
.lineage .t { font-size: 11px; color: var(--ink-2); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* site footer — acknowledgements; pinned to the viewport bottom on
   desktop/tablet, normal flow on mobile */
footer.site {
  margin-top: 32px; padding: 20px 24px 28px;
  background: var(--surface-1); border-top: 1px solid var(--border);
  font-size: 13px; color: var(--ink-2);
}
footer.site .inner { max-width: 1100px; margin: 0 auto; }
footer.site a { color: var(--ink); font-weight: 500; text-decoration: none; }
footer.site a:hover { color: var(--dm-red); }
footer.site .row { margin-top: 6px; }
.more-card .dm-mark { height: 16px; display: block; margin-bottom: 8px; }

/* the credits, tucked under a hover reveal (opens upward off the pinned bar) */
.footer-more { position: relative; display: inline-block; margin-left: 10px; }
.footer-more .more-link {
  color: var(--ink-2); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.footer-more .more-card {
  position: absolute; bottom: calc(100% + 10px); right: 0;
  width: 300px; padding: 12px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 -6px 20px rgba(40, 40, 41, 0.18);
  font-size: 12px; line-height: 1.5;
  /* closing grace period: the card lingers ~1.2s after the cursor leaves the
     link so it can travel across the gap; landing on it re-latches the hover
     (visibility:hidden also drops hit-testing once actually closed) */
  visibility: hidden; opacity: 0;
  transition: opacity 0.25s ease 1.2s, visibility 0s linear 1.45s;
}
.footer-more:hover .more-card,
.footer-more:focus-within .more-card {
  visibility: visible; opacity: 1;
  transition-delay: 0s, 0s;
}

/* voting-window call to action (red = the sanctioned accent use) */
a.vote-cta {
  background: var(--dm-red); color: #fff;
  border: 2px solid var(--dm-red); border-radius: var(--radius);
  padding: 6px 14px; font-weight: 500; font-size: 14px; text-decoration: none;
  white-space: nowrap;
  /* inline-flex so the leading icon gets a gap rather than butting the text */
  display: inline-flex; align-items: center; gap: 7px;
}
a.vote-cta:hover { background: var(--dm-red-shade); border-color: var(--dm-red-shade); }

/* blurred artwork hero band (song/artist pages) */
/* framed hero: a rounded panel locked to the content column; the image
   layer inside carries the blur + top-anchored zoom so the panel's
   rounded clip stays crisp */
.hero-blur {
  /* flush against the 56px header — no gap */
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  /* always wider than the content column: content insets 24px each side,
     the halo insets only 8px — so the frame relationship holds at any width.
     Tunables are CSS vars so the ?dev=1 panel can live-adjust them.
     Shipped defaults tuned by David 2026-08-12. */
  width: min(var(--hero-w, 1900px), calc(100% - 16px));
  height: min(var(--hero-h, 600px), 70vh);   /* phones: never swallow the screen */
  border-radius: var(--radius); overflow: hidden;
  opacity: var(--hero-opacity, 0.25);
  pointer-events: none; z-index: -1;
  /* vertical fade (solid to ~50%, gone by bottom) INTERSECTED with soft
     left/right edge fades so the panel has no hard vertical cut-offs */
  -webkit-mask-image:
      linear-gradient(to bottom, black 50%, transparent 100%),
      linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
      linear-gradient(to bottom, black 50%, transparent 100%),
      linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
  mask-composite: intersect;
}
.hero-blur::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center 30%;
  filter: blur(var(--hero-blur, 8px)) saturate(1.1);
  transform: scale(1.15); transform-origin: top center;   /* zoom pinned to top edge */
}

/* dev-only hero tuning panel (?dev=1) */
.hero-dev {
  position: fixed; left: 16px; bottom: 16px; z-index: 50;
  background: var(--surface-1); border: 1px solid var(--dm-mid-grey);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 12px; box-shadow: 0 4px 14px rgba(40, 40, 41, 0.2);
}
.hero-dev label { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.hero-dev input[type=range] { width: 140px; }
.hero-dev .val { width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
body { position: relative; overflow-x: hidden; }

/* staged progress (ballot OCR etc.) — DM red fill on warm-white track */
.dm-progress { display: none; margin: 10px 0; max-width: 420px; }
.dm-progress.active { display: block; }
.dm-progress .track {
  height: 10px; background: var(--dm-warm-white-40);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.dm-progress .fill {
  height: 100%; width: 0%; background: var(--dm-red);
  border-radius: var(--radius); transition: width .3s ease;
}
.dm-progress.indeterminate .fill { width: 30%; animation: dm-slide 1.2s ease-in-out infinite; }
@keyframes dm-slide {
  0% { margin-left: -30%; } 100% { margin-left: 100%; }
}
.dm-progress .lbl { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

.songhead { display: flex; gap: 16px; align-items: center; }
.songhead img { width: 96px; height: 96px; border-radius: var(--radius); object-fit: cover; }
.songhead h2 { margin: 0; font-size: 24px; font-weight: 700; }
.songhead .by { color: var(--ink-2); margin: 2px 0 6px; font-weight: 500; }
.songhead .desc { font-size: 13px; color: var(--ink-2); max-width: 640px; }

/* ==== responsive ============================================================
   This section stays at the END of the file: several overrides below tie
   with base rules on specificity, so source order is what makes them win. */

/* pinned acknowledgement footer — desktop/large-tablet only */
@media (min-width: 1024px) {
  footer.site {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    margin-top: 0; padding: 10px 24px 12px;
  }
  body { padding-bottom: 96px; }        /* clearance so content never hides */
  .hero-dev { bottom: 110px; }          /* dev panel rides above the footer */
}

/* 1024–1199: everything stays inline but tightened */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  header.site { gap: 12px; }
  header.site nav { gap: 12px; font-size: 13px; }
  header.site input[type="search"] { width: 160px; }
  .vote-cta .cta-long { display: none; }
  .vote-cta .cta-short { display: inline; }
}

/* below 1024: nav collapses behind the hamburger; header search (index)
   drops to its own full-width row */
@media (max-width: 1023.98px) {
  header.site { flex-wrap: wrap; height: auto; min-height: 56px; padding: 0 16px; gap: 10px; }
  header.site h1 { font-size: 18px; height: 56px; display: flex; align-items: center; }
  header.site .nav-toggle { display: block; }
  header.site nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--dm-indigo);
    padding: 4px 16px 12px;
    box-shadow: 0 10px 24px rgba(40, 40, 41, 0.35);
  }
  header.site.menu-open nav { display: flex; }
  header.site nav a { padding: 11px 0; font-size: 15px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  header.site nav a:first-child { border-top: 0; }
  header.site input[type="search"] { order: 9; flex: 1 1 100%; margin: -2px 0 10px; }
  .vote-cta { padding: 5px 10px; font-size: 13px; }
  .vote-cta .cta-long { display: none; }
  .vote-cta .cta-short { display: inline; }
  /* the backdrop credit badge is hover-driven and would collide with the
     wrapped header — desktop nicety only */
  a.hero-note, .hero-tip { display: none; }
  main { padding: 16px; }
  /* 16px stops iOS Safari auto-zooming focused fields */
  select, input[type="search"] { font-size: 16px; }
}

/* phones: tighter tables (with low-priority columns already hidden),
   wrapping song header */
@media (max-width: 639.98px) {
  .hide-sm { display: none; }
  table.data { font-size: 13px; }
  table.data th { padding: 8px; }
  table.data td { padding: 6px 8px; overflow-wrap: anywhere; }
  table.data td.num { overflow-wrap: normal; }   /* never split rank numbers */
  #list { scroll-margin-top: 120px; }            /* taller wrapped header */
  .tile .v { font-size: 20px; }
  .songhead { flex-wrap: wrap; }
  .songhead img { width: 72px; height: 72px; }
  .songhead h2 { font-size: 20px; }
}

/* -- affinity: "More like this" ---------------------------------------- */
.affinity { display: flex; flex-direction: column; gap: 2px; }
.aff-row {
  /* wrap is load-bearing, not cosmetic: the Spotify embed and the mobile
     action row both claim `flex: 1 0 100%` to take a line of their own, and
     without it they are forced onto the first line instead -- the row's
     content squashes left and the 80px player spills over the rows below. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: var(--radius);
  border-bottom: 1px solid var(--app-hairline); text-decoration: none; color: inherit;
}
.aff-row:last-child { border-bottom: 0; }
.aff-row:hover { background: var(--app-table-stripe-bg); }
.aff-art {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 4px;
  object-fit: cover; background: var(--dm-warm-white-tint-2);
}
/* stand-in for a track the archive has no cover for */
.art-none { display: flex; align-items: center; justify-content: center;
            color: var(--dm-mid-grey); font-size: 20px; line-height: 1; }
.art-none::after { content: '\266B'; }
.aff-main { min-width: 0; flex: 1; }
.aff-title { font-weight: 600; color: var(--dm-indigo); }
.aff-by { font-size: 13px; color: var(--site-neutral); }
/* The row used to BE the link, which left no legal way to link the artist too
   -- nested <a> is invalid and browsers tear it apart. So the row is a plain
   div, the title's link stretches over the whole of it to keep the card
   clickable, and the artist link is lifted above that hit area. Colours are
   inherited: a name here is a reference, not a call to action. */
.aff-row { position: relative; }
.aff-stretch::after { content: ''; position: absolute; inset: 0; }
.aff-by a { position: relative; z-index: 1; }
.aff-title a, .aff-by a { color: inherit; text-decoration: none; }
.aff-title a:hover, .aff-by a:hover { color: var(--dm-red); }
.aff-why { font-size: 12px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.aff-why span { display: inline-block; margin-right: 10px; white-space: nowrap; }
.aff-why span::before { content: '· '; color: var(--dm-mid-grey); }
/* Corroboration is the scarce thing here, so it gets the badge. Most pairs are
   seen by a single lens; two or more agreeing is worth calling out. */
.aff-lens {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px;
  background: var(--dm-warm-white-tint-2); color: var(--dm-blue-grey-shade);
}
.aff-lens.multi { background: var(--site-purple); color: #fff; }
.aff-new { font-size: 11px; font-weight: 700; color: var(--dm-red);
           border: 1px solid var(--dm-red); border-radius: 999px; padding: 2px 7px; margin-left: 6px; }
@media (max-width: 560px) {
  .aff-why span { display: block; margin: 2px 0; white-space: normal; }
  .aff-lens { display: none; }
}

/* -- six degrees -------------------------------------------------------- */
.deg-pick { display: flex; gap: 16px; align-items: flex-start; margin: 14px 0 4px; }
.deg-slot { flex: 1; min-width: 0; position: relative; }
.deg-slot input {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--border); border-radius: var(--radius); background: #fff;
}
.deg-arrow { align-self: center; color: var(--dm-mid-grey); font-size: 20px; padding-top: 4px; }
.deg-results {
  position: absolute; z-index: 5; left: 0; right: 0; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.deg-results:empty { border: 0; }
.deg-opt {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  font: inherit; background: none; border: 0; cursor: pointer;
}
.deg-opt:hover { background: var(--app-table-stripe-bg); }
.deg-chosen { margin-top: 8px; color: var(--dm-indigo); font-size: 17px; }
.deg-out { margin-top: 18px; }
.deg-count { font-size: 13px; font-weight: 700; color: var(--site-purple); letter-spacing: .04em; text-transform: uppercase; }
.deg-path { list-style: none; margin: 10px 0 0; padding: 0; }
.deg-path li { padding: 0 0 0 22px; border-left: 2px solid var(--app-hairline); }
.deg-path li:last-child { border-left-color: transparent; }
.deg-via { font-size: 13px; color: var(--site-neutral); padding: 6px 0; font-style: italic; }
.deg-node { font-size: 17px; font-weight: 600; color: var(--dm-indigo); padding-bottom: 2px; position: relative; }
.deg-node::before {
  content: ''; position: absolute; left: -28px; top: 8px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--site-purple); box-shadow: 0 0 0 3px var(--site-page-bg);
}
.deg-end {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--site-neutral); border: 1px solid var(--app-hairline);
  border-radius: 999px; padding: 1px 7px; margin-left: 8px; vertical-align: 2px;
}
.deg-none { padding: 12px 0; }

/* opener controls: the shuffle button and the blurb explaining why the
   pairing on screen is worth a look (blank when the pairing is the user's) */
.deg-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.deg-bar .hint { font-style: italic; }

.deg-eg { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); }
.deg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.deg-chip {
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--ink); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px;
}
.deg-chip:hover { border-color: var(--dm-red); color: var(--dm-red); }
@media (max-width: 560px) {
  .deg-pick { flex-direction: column; gap: 10px; }
  .deg-arrow { display: none; }
}

/* -- vote helper -------------------------------------------------------- */
.vh-clock { margin-top: 10px; font-weight: 700; color: var(--dm-red); }
.vh-seedrow { display: flex; gap: 14px; align-items: flex-start; margin: 14px 0 10px; }
.vh-or { align-self: center; color: var(--dm-mid-grey); font-size: 13px; padding-top: 4px; }
.vh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.vh-chip {
  font: inherit; font-size: 14px; cursor: pointer;
  background: var(--dm-warm-white-tint-2); color: var(--dm-indigo);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
}
.vh-chip:hover { background: var(--dm-warm-white); }
.vh-x { margin-left: 7px; color: var(--site-neutral); font-weight: 700; }
.vh-drop { background: none; border: 0; cursor: pointer; font: inherit; }
.vh-go, .vh-more {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  background: var(--site-purple); color: #fff; border: 0;
  border-radius: var(--radius); padding: 10px 18px;
}
.vh-go:disabled { background: var(--dm-mid-grey); cursor: not-allowed; }
.vh-more { background: none; color: var(--site-purple); border: 1px solid var(--border); margin-top: 12px; }
.vh-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.vh-keep, .vh-skip, .vh-play {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: var(--radius); padding: 6px 12px; border: 1px solid var(--border);
}
.vh-keep { background: var(--site-purple); color: #fff; border-color: var(--site-purple); }
.vh-skip { background: none; color: var(--site-neutral); }
.vh-play { background: none; color: var(--dm-blue-grey-shade); }
.vh-rank { font-size: 11px; font-weight: 600; color: var(--site-neutral); margin-left: 8px; }
.vh-count { font-size: 14px; font-weight: 400; color: var(--site-neutral); }
.vh-short { margin: 10px 0 16px; padding-left: 22px; }
.vh-short li { padding: 4px 0; color: var(--dm-indigo); }
@media (max-width: 560px) {
  .vh-seedrow { flex-direction: column; gap: 10px; }
  .vh-or { display: none; }
  .aff-row .vh-actions { flex: 1 0 100%; justify-content: flex-start; margin-top: 8px; }
}

/* ==== about page ============================================================
   The rest of the site is instrumentation: dense cards, tabular numbers, a
   reader who already knows what the Rock 2000 is. This page is the front door
   for one who doesn't, so it runs on a longer measure, bigger type and more
   air, and leads with the one piece of real imagery the archive owns — the
   album art. Same tokens throughout; nothing new is invented here. */

/* This page sits on the site's own 1100px track like every other page; it does
   not set a width of its own. Prose still needs a sane measure, so the width a
   paragraph does not want is given to a heading rail rather than left empty:
   the eyebrow and heading live on the left, the text runs to about 70
   characters on the right, and the two together fill the card. Anything that
   genuinely wants the full width - the artwork wall, the feature grid, the
   growth strip - spans both columns via .about-wide. */
.about-section {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
}
.about-rail { grid-column: 1; }
/* the rail sets headings on a ~14ch measure, so they run a size down from the
   full-width headings elsewhere on the site and wrap on purpose */
.about-rail h2 { margin-bottom: 0; font-size: 20px; line-height: 1.25; }
.about-body { grid-column: 2; min-width: 0; }
.about-wide { grid-column: 1 / -1; min-width: 0; }
/* a wide block following prose needs the gap the prose would have given it */
.about-body + .about-wide, .about-wide + .about-body { margin-top: 18px; }

.about-lede { max-width: 70ch; font-size: 15px; line-height: 1.65; color: var(--ink); }
.about-lede + .about-lede { margin-top: 12px; }
/* Links in prose follow the site's rule, not the browser's: no underline, a
   weight bump to carry the affordance, and red on hover, the same as the
   footer, the crumbs and the tables. They were rendering default blue. */
.about-lede a { color: var(--dm-indigo); font-weight: 600; text-decoration: none; }
.about-lede a:hover { color: var(--dm-red); }
.about h2 { font-size: 22px; }
/* section eyebrow — orients a scroller without another 20px heading */
.about-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dm-red); margin-bottom: 6px;
}

/* -- hero ------------------------------------------------------------------
   The one dark surface on a light site. It sits inside the content column, so
   the blurred now-playing backdrop still haloes around it rather than being
   painted over. */
.about-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--dm-indigo) 0%, var(--site-purple-dark) 62%, var(--site-purple) 100%);
  color: #fff; border: 0; padding: 44px 40px 40px;
}
.about-hero h1 {
  margin: 0; font-size: 46px; line-height: 1.08; font-weight: 700;
  letter-spacing: -0.015em; max-width: 15ch;
}
.about-hero h1 .accent { color: var(--dm-red); }
/* the countdown's name never breaks across two lines */
.about-hero h1 .keep { white-space: nowrap; }
.about-hero p {
  margin: 18px 0 0; max-width: 54ch; font-size: 17px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}
/* the monogram, bled off the right edge as a watermark rather than a logo */
.about-hero .mark {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  width: 320px; opacity: 0.09; pointer-events: none;
}
.about-hero .mark path { fill: #fff; }
/* The one action in the hero. Solid white on the dark panel so it reads as a
   button at a glance, and deliberately NOT red: red means "vote" everywhere
   else on this site, and the header is already spending it on that. */
.about-jump {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  background: #fff; color: var(--dm-indigo);
  padding: 11px 20px; border-radius: var(--radius);
  font-size: 15px; font-weight: 700; text-decoration: none;
  box-shadow: 0 2px 10px rgba(20, 18, 40, 0.28);
}
.about-jump:hover { background: var(--dm-warm-white-40); color: var(--site-purple-dark); }
.about-jump .ico { width: 18px; height: 18px; stroke-width: 2; }
.about-jump:hover .ico { transform: translateX(2px); }
.about-jump .ico { transition: transform 0.15s ease; }

/* The four statements of intent. They sit UNDER the button now and are dressed
   down to match: no fill, a hairline border and quieter text, so they read as
   the reassuring small print they are rather than competing for the click. */
.about-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.about-chips span {
  font-size: 11.5px; font-weight: 500; padding: 4px 11px; border-radius: 999px;
  background: none; border: 1px solid rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.66); letter-spacing: 0.01em;
}

/* -- "where we are right now" timeline -------------------------------------
   Three fixed stages of the season. The live one is filled red; past stages
   go quiet, future ones stay outlined. */
.about-now { display: flex; gap: 0; margin-top: 14px; }
.about-stage { flex: 1; position: relative; padding: 0 14px 0 0; }
.about-stage .dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--dm-mid-grey); background: var(--surface-1);
  position: relative; z-index: 1;
}
/* the connecting rule, drawn from each dot to the next */
.about-stage::after {
  content: ''; position: absolute; left: 14px; right: 0; top: 6px;
  height: 2px; background: var(--border);
}
.about-stage:last-child::after { display: none; }
.about-stage.done .dot { border-color: var(--dm-blue-grey); background: var(--dm-blue-grey); }
.about-stage.done::after { background: var(--dm-blue-grey); }
.about-stage.on .dot {
  border-color: var(--dm-red); background: var(--dm-red);
  box-shadow: 0 0 0 5px rgba(177, 32, 41, 0.16);
}
.about-stage .when {
  margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2);
}
.about-stage.on .when { color: var(--dm-red); }
.about-stage .what { font-size: 15px; font-weight: 600; color: var(--dm-indigo); margin-top: 2px; }
.about-stage .sub { font-size: 13px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }
.about-cta { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.about-cta .hint { margin: 0; }

/* -- list-growth strip -----------------------------------------------------
   One bar per edition. Deliberately unlabelled per bar: the point is the three
   step-ups, not any single year, and the callouts underneath name them. */
.about-growth { display: flex; align-items: flex-end; gap: 3px; height: 92px; margin: 16px 0 8px; }
.about-growth .col { flex: 1; background: var(--viz-cat-3); border-radius: 2px 2px 0 0; position: relative; }
.about-growth .col:hover { background: var(--dm-blue-grey); }
.about-growth .col.tall { background: var(--dm-blue-grey); }
.about-growth .col.tall:hover { background: var(--viz-cat-2); }
.about-growth-axis {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--ink-2); border-top: 1px solid var(--border); padding-top: 5px;
}

/* -- every #1: the artwork wall -------------------------------------------- */
/* six across is not arbitrary: 24 editions divide into four full rows, so the
   wall never ends on a ragged part-row */
.about-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.about-wall a {
  position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius);
  overflow: hidden; background: var(--dm-warm-white-tint-2); text-decoration: none;
  /* several of these covers are genuinely near-black (the Black Album turns up
     four times); without an edge they read as failed image loads */
  box-shadow: inset 0 0 0 1px var(--border);
}
.about-wall img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* year always legible over the art; title only on hover, so the wall reads as
   a mosaic first and a table of contents second */
.about-wall .yr {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px;
  background: linear-gradient(transparent, rgba(30, 30, 45, 0.85));
  color: #fff; font-size: 13px; font-weight: 700;
}
.about-wall .tt {
  position: absolute; inset: 0; padding: 8px;
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(57, 56, 88, 0.93); color: #fff;
  font-size: 11px; line-height: 1.35; text-align: center;
  opacity: 0; transition: opacity 0.18s ease;
}
.about-wall a:hover .tt, .about-wall a:focus-visible .tt { opacity: 1; }
.about-wall .tt b { font-size: 12px; display: block; margin-bottom: 3px; }

/* -- what RA is: feature grid ---------------------------------------------- */
/* four across, two down: eight features split evenly on the full-width track,
   where three would leave an orphan in the last row */
.about-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.about-feature {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; background: var(--surface-1);
}
.about-feature:hover { border-color: var(--dm-red); }
.about-feature .ico { width: 24px; height: 24px; color: var(--dm-blue-grey); }
.about-feature:hover .ico { color: var(--dm-red); }
.about-feature h3 { margin: 8px 0 4px; font-size: 15px; font-weight: 700; color: var(--dm-indigo); }
.about-feature:hover h3 { color: var(--dm-red); }
.about-feature p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* -- provenance + fine print ----------------------------------------------- */
.about-quiet { background: var(--dm-warm-white-40); }
.about-source { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--app-hairline); }
.about-source:last-child { border-bottom: 0; padding-bottom: 0; }
.about-source .n {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: var(--dm-indigo); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.about-source .b { min-width: 0; }
.about-source h3 { margin: 3px 0 3px; font-size: 15px; font-weight: 700; color: var(--dm-indigo); }
.about-source p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.about-source a { color: var(--dm-indigo); font-weight: 600; text-decoration: none; }
.about-source a:hover { color: var(--dm-red); }

/* likewise 2x2 for the four clauses, rather than 3 + a lonely fourth */
.about-print { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; }
.about-print h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--dm-indigo); }
.about-print p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.about-print a { color: var(--dm-indigo); font-weight: 600; text-decoration: none; }
.about-print a:hover { color: var(--dm-red); }

/* sign-off: the one place the parent company puts its name on the page */
.about-signoff { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px;
                 padding-top: 16px; border-top: 1px solid var(--border); }
.about-signoff img { height: 22px; }
.about-signoff .t { font-size: 13px; color: var(--ink-2); max-width: 56ch; line-height: 1.55; }

/* Below ~900px the rail would start eating the measure it exists to protect,
   so it folds back on top of the body and the page returns to a single column. */
@media (max-width: 899.98px) {
  .about-section { grid-template-columns: 1fr; }
  .about-rail, .about-body, .about-wide { grid-column: 1; }
  .about-rail { margin-bottom: 10px; }
  .about-lede { max-width: none; }
  .about-grid, .about-print { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .about-hero { padding: 30px 22px 28px; }
  .about-hero h1 { font-size: 32px; max-width: none; }
  .about-hero p { font-size: 15px; }
  .about-hero .mark { width: 210px; right: -70px; opacity: 0.07; }
  /* the timeline turns vertical: three stages side by side on a phone leave
     ~110px each, which is not enough for a date and a sentence */
  .about-now { flex-direction: column; gap: 16px; }
  .about-stage { padding: 0 0 0 24px; }
  .about-stage .dot { position: absolute; left: 0; top: 3px; }
  .about-stage::after { left: 6px; right: auto; top: 17px; bottom: -16px; width: 2px; height: auto; }
  .about-stage .when { margin-top: 0; }
  .about-growth { height: 68px; }
  .about-wall { grid-template-columns: repeat(4, 1fr); gap: 6px; }
}