/* Make Money Not Drama — site layer over the Nocturne design system.
   Every colour, font, radius and shadow comes from nocturne.css tokens.
   Three page shapes from the design canvas:
     The Register   → /ideas/ and every idea page
     The Front Page → / , category pages, the two index pages
     The Plot       → /plot/ and the collection pages
*/

:root {
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --wrap: 1180px;
  --wrap-narrow: 860px;
}

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }
a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent-200); }
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 40px, var(--wrap-narrow)); }
.plain { list-style: none; margin: 0; padding: 0; }
/* Visually hidden, and pinned to the viewport on purpose: the plot's dots are
   labels for these shared radios, and a focused input that sits in the page
   flow would make the browser scroll to it on every tap. Fixed means it is
   always already in view, so tapping a dot never moves the page. */
.vh {
  position: fixed; top: 0; left: 0; width: 1px; height: 1px;
  margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--color-surface); color: var(--color-text); padding: 8px 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.skip:focus { left: 20px; }

/* ── shared type atoms ─────────────────────────────────────────────── */
.kicker {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-neutral-500); margin: 0;
}
.kicker--accent { color: var(--color-accent-300); }
.kicker a { color: inherit; }
.kicker a:hover { color: var(--color-accent-200); }
.eyebrow {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-500); margin: 0;
}
.label {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-500); font-weight: 400; margin: 0;
}
.mono { font-family: var(--mono); }
.lede { font-size: 14.5px; line-height: 1.6; color: var(--color-neutral-400); text-wrap: pretty; margin: 0; }
.dates { font-family: var(--mono); font-size: 11.5px; color: var(--color-neutral-500); }
.crumbs { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-500); margin: 0 0 10px; }
.crumbs a { color: var(--color-neutral-500); }
.crumbs a:hover { color: var(--color-accent-300); }

/* The band scales as a notation line — the chips became this. */
.notation {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-family: var(--mono); font-size: 11.5px; color: var(--color-neutral-400);
  margin: 0; padding: 0; list-style: none;
}
.notation > span + span::before {
  content: "/"; color: var(--color-neutral-700); margin-right: 10px;
}
.notation--boxed {
  padding: 10px 0; margin-bottom: 18px;
  border-top: 1px solid var(--color-neutral-800);
  border-bottom: 1px solid var(--color-neutral-800);
  gap: 6px 12px;
}
.receipts { font-family: var(--mono); color: var(--color-accent-300); }

/* ── header: compact bar (Register + Plot pages) ───────────────────── */
.site-head { border-bottom: 1px solid var(--color-neutral-800); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; flex-wrap: wrap; }
.wordmark { font-family: var(--font-heading); font-size: 15px; letter-spacing: -0.01em; color: var(--color-text); white-space: nowrap; }
.wordmark:hover { color: var(--color-text); }
.wordmark b { font-weight: 600; }
.site-nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 12.5px; }
.site-nav a { color: var(--color-neutral-400); }
.site-nav a:hover { color: var(--color-accent-300); }
.site-nav a[aria-current] { color: var(--color-text); }

/* ── header: masthead (The Front Page) ──────────────────────────────── */
.masthead__top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 26px 0 14px; border-bottom: 3px double var(--color-neutral-700); flex-wrap: wrap;
}
.masthead__name { font-family: var(--font-heading); font-size: 30px; letter-spacing: -0.03em; line-height: 1; color: var(--color-text); }
.masthead__name:hover { color: var(--color-text); }
.masthead__name b { font-weight: 600; }
.masthead .site-nav {
  gap: 20px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-500); padding-bottom: 4px;
}
.masthead .site-nav a { color: var(--color-neutral-500); }
.masthead .site-nav a:hover, .masthead .site-nav a[aria-current] { color: var(--color-accent-300); }
.dateline { border-bottom: 1px solid var(--color-neutral-800); }
.dateline .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 9px 0; font-size: 11.5px; color: var(--color-neutral-500); }

/* ── THE FRONT PAGE — homepage ─────────────────────────────────────── */
/* Main story in column one, secondary stories under it, the rail running the
   full height beside both — the broadsheet's own arrangement. */
.front { display: grid; grid-template-columns: 2.1fr 1fr; gap: 0 34px; padding: 30px 0 0; align-items: start; }
.front__hero { grid-column: 1; grid-row: 1; }
.front__rail { grid-column: 2; grid-row: 1 / span 2; }
.front__secondary { grid-column: 1; grid-row: 2; margin-top: 30px; padding-top: 18px; border-top: 3px double var(--color-neutral-700); }
.front__secondary .strip__cols { gap: 22px; }
.front__hero h1 {
  font-size: 52px; line-height: 1.02; margin: 0 0 16px;
  letter-spacing: -0.035em; max-width: 22ch;
}
.front__hero h1 a { color: var(--color-text); }
.front__hero h1 a:hover { color: var(--color-accent-200); }
.front__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; font-size: 14px; line-height: 1.68; color: var(--color-neutral-300); }
.front__cols p { margin: 0 0 14px; text-wrap: pretty; }
.front__cols p:last-child { margin: 0; }
.front__cols > div + div { border-left: 1px solid var(--color-neutral-800); padding-left: 30px; }
.dropcap {
  float: left; font-family: var(--font-heading); font-size: 44px; line-height: 0.82;
  padding: 4px 8px 0 0; color: var(--color-text);
}
.front__rail { border-left: 1px solid var(--color-neutral-800); padding-left: 30px; display: flex; flex-direction: column; gap: 20px; }
.rail__head { padding-bottom: 8px; border-bottom: 1px solid var(--color-neutral-700); }
.rail__item { display: flex; flex-direction: column; gap: 5px; padding-bottom: 16px; border-bottom: 1px solid var(--color-neutral-900); }
.rail__item a { font-family: var(--font-heading); font-size: 17px; line-height: 1.22; letter-spacing: -0.015em; color: var(--color-text); }
.rail__item a:hover { color: var(--color-accent-200); }
.rail__item .kicker { font-size: 10.5px; letter-spacing: 0.12em; }

.strip { margin-top: 34px; padding-top: 18px; border-top: 3px double var(--color-neutral-700); }
.strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.strip__head h2 { font-size: 19px; letter-spacing: -0.015em; margin: 0; }
.strip__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.strip__col { border-top: 1px solid var(--color-neutral-800); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.strip__col--accent { border-top-color: var(--color-accent-700); }
.strip__count { font-family: var(--mono); font-size: 11px; color: var(--color-accent-300); }
.strip__col a.strip__title { font-family: var(--font-heading); font-size: 16px; line-height: 1.25; color: var(--color-text); letter-spacing: -0.015em; }
.strip__col a.strip__title:hover { color: var(--color-accent-200); }
.strip__col p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--color-neutral-500); text-wrap: pretty; }
.strip__cols--3 { grid-template-columns: repeat(3, 1fr); }
.strip__col .notation { font-size: 11px; }

/* ── THE REGISTER — catalogue ──────────────────────────────────────── */
.page-head { padding: 30px 0 22px; max-width: 720px; }
.page-head h1 { font-size: 27px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.02em; }
.page-head .lede { font-size: 13.5px; }

.catalog { display: grid; grid-template-columns: 214px 1fr; gap: 0; counter-reset: shown; align-items: start; }
.filters {
  border-right: 1px solid var(--color-neutral-800); padding: 4px 20px 30px 0;
  position: sticky; top: 0; max-height: 100vh; overflow-y: auto; scrollbar-width: thin;
}
.filters__body { display: flex; flex-direction: column; gap: 26px; }
.filters__summary { display: none; }
.fgroup { display: flex; flex-direction: column; gap: 9px; border: 0; margin: 0; padding: 0; min-width: 0; }
.fgroup legend { padding: 0; }
.fgroup__rows { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.frow {
  display: flex; justify-content: space-between; gap: 10px; cursor: pointer;
  color: var(--color-neutral-300); border-radius: var(--radius-sm);
}
.frow span:last-child { color: var(--color-neutral-500); font-family: var(--mono); font-size: 11.5px; }
.frow:hover { color: var(--color-accent-200); }
.frow input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.frow:has(input:checked) { color: var(--color-accent-300); }
.frow[data-zero] { color: var(--color-neutral-600); }
.frow:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ftoggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-neutral-400); cursor: pointer; }
.ftoggle input { accent-color: var(--color-accent); margin: 0; }
.filters .btn { align-self: flex-start; font-size: 12.5px; }
.filters__fallback { display: none; font-size: 12.5px; color: var(--color-neutral-400); }
@supports not selector(:has(a)) {
  .filters__body, .sortbar__opts { display: none; }
  .filters__fallback { display: block; }
}

.results { padding: 4px 0 30px 26px; min-width: 0; }
.sortbar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-bottom: 9px; border-bottom: 1px solid var(--color-neutral-700); flex-wrap: wrap;
}
.sortbar__opts { display: flex; gap: 14px; font-size: 11.5px; color: var(--color-neutral-500); }
.sortbar__opts label { cursor: pointer; }
.sortbar__opts label:hover { color: var(--color-accent-200); }
.sortbar__opts label:has(input:checked) { color: var(--color-accent-300); }
.sortbar__opts label:has(input:checked)::after { content: " \2191"; }
.sortbar__opts input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sortbar__opts label:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cap { display: none; }
.count::after { content: counter(shown); }

.reg__cols, .reg__row {
  display: grid; grid-template-columns: minmax(0,1fr) 96px 88px 96px 104px 76px; gap: 0 14px;
}
.reg__cols {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-500); padding: 10px 0 8px;
}
.reg { display: flex; flex-direction: column; }
.reg__row {
  padding: 11px 0; border-top: 1px solid var(--color-neutral-900); align-items: baseline;
  order: var(--o-featured, 0); counter-increment: shown;
}
.reg__row:hover { background: var(--color-accent-900); }
.reg__idea { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.reg__idea a { font-size: 14px; color: var(--color-text); letter-spacing: -0.005em; }
.reg__idea a:hover { color: var(--color-accent-200); }
.reg__idea span { font-size: 11.5px; color: var(--color-neutral-500); }
.reg__row > div:not(.reg__idea) { font-size: 12px; font-family: var(--mono); color: var(--color-neutral-300); }
.reg__row > div:last-child { color: var(--color-neutral-500); }
.reg__row--dead .reg__idea a { color: var(--color-neutral-400); text-decoration: line-through; text-decoration-color: var(--color-accent-600); }
.reg__flag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-300); }
.reg__foot { padding-top: 16px; border-top: 1px solid var(--color-neutral-700); margin-top: 4px; font-size: 12.5px; color: var(--color-neutral-500); }

/* ── THE REGISTER — idea page ──────────────────────────────────────── */
.idea { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 40px; padding: 30px 0 40px; align-items: start; }
.idea__main { min-width: 0; }
.idea__main h1 { font-size: 30px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.02em; }
.idea__lede { margin: 0 0 26px; font-size: 15px; line-height: 1.65; color: var(--color-neutral-300); max-width: 60ch; text-wrap: pretty; }
.facts {
  border-top: 1px solid var(--color-neutral-700); padding-top: 18px;
  display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 14px 24px; font-size: 13.5px;
}
.facts dt { color: var(--color-neutral-500); }
.facts dd { margin: 0; color: var(--color-neutral-200); line-height: 1.6; max-width: 58ch; }
.idea__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; border-left: 1px solid var(--color-neutral-800); padding-left: 24px; }
.ratings { display: flex; flex-direction: column; gap: 13px; font-size: 13px; margin: 0; }
.rating { display: flex; flex-direction: column; gap: 5px; }
.rating > span:first-child { color: var(--color-neutral-500); font-size: 11.5px; }
.rating__val { font-family: var(--mono); }
.rating__bar { height: 2px; background: linear-gradient(to right, var(--color-accent) var(--pct), var(--color-neutral-800) var(--pct)); }
.side__block { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--color-neutral-900); }
.side__block ul { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--color-neutral-300); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 0; padding: 0; }
.tags li { font-family: var(--mono); font-size: 10.5px; color: var(--color-neutral-400); background: var(--color-neutral-900); padding: 3px 8px; border-radius: var(--radius-sm); }
.prose { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--color-neutral-800); font-size: 14.5px; line-height: 1.7; color: var(--color-neutral-300); max-width: 68ch; }
.prose h2 { font-size: 19px; margin: 28px 0 8px; letter-spacing: -0.015em; color: var(--color-text); }
.prose h3 { font-size: 16px; margin: 22px 0 6px; color: var(--color-text); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 14px; }
.prose li { margin: 5px 0; }
.prose strong { color: var(--color-neutral-100); font-weight: 500; }
.prose blockquote { margin: 16px 0; padding-left: 16px; border-left: 1px solid var(--color-neutral-700); color: var(--color-neutral-400); }
.banner { border: 1px solid var(--color-accent-700); background: var(--color-accent-900); border-radius: var(--radius-md); padding: 12px 16px; margin: 0 0 22px; }
.banner p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-300); }

/* ── THE FRONT PAGE — category page ────────────────────────────────── */
.cat-head { padding: 30px 0 24px; max-width: 640px; }
.cat-head h1 { font-size: 40px; line-height: 1.05; margin: 0 0 10px; letter-spacing: -0.03em; }
.ranked { list-style: none; margin: 0; padding: 0 0 30px; }
.ranked li {
  display: grid; grid-template-columns: 44px minmax(0,1fr) 320px; gap: 26px;
  padding: 20px 0; border-top: 1px solid var(--color-neutral-800); align-items: start;
}
.ranked__n { font-family: var(--mono); font-size: 12px; color: var(--color-neutral-500); padding-top: 4px; }
.ranked__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ranked__main a { font-family: var(--font-heading); font-size: 25px; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-text); }
.ranked__main a:hover { color: var(--color-accent-200); }
.ranked p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-400); text-wrap: pretty; }
.ranked li.is-dead .ranked__main a { color: var(--color-neutral-400); text-decoration: line-through; text-decoration-color: var(--color-accent-600); }

/* ── THE PLOT — collection page ────────────────────────────────────── */
.collection { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 30px 0 40px; align-items: start; }
.collection__intro { position: sticky; top: 24px; }
.collection__intro h1 { font-size: 34px; line-height: 1.08; margin: 0 0 12px; letter-spacing: -0.03em; }
.collection__intro .lede { font-size: 14px; line-height: 1.65; max-width: 52ch; }
.entries { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.entries li { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 18px; padding: 16px 0; border-top: 1px solid var(--color-neutral-800); align-items: baseline; }
.entries__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.entries__main a { font-size: 15px; color: var(--color-text); line-height: 1.3; }
.entries__main a:hover { color: var(--color-accent-200); }
.entries__note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--color-neutral-500); text-wrap: pretty; }
.entries .notation { justify-content: flex-end; text-align: right; font-size: 11px; }
.entries li.is-dead .entries__main a { text-decoration: line-through; text-decoration-color: var(--color-accent-600); color: var(--color-neutral-400); }

/* ── THE PLOT — the instrument ─────────────────────────────────────── */
.plot { display: grid; grid-template-columns: minmax(0,1fr) 342px; align-items: start; }
.plot__bar { grid-column: 1 / -1; }
.plotbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--color-neutral-800); flex-wrap: wrap; }
.chart__hint { display: none; margin: 10px 0 0; font-size: 11.5px; color: var(--color-neutral-500); }
.chart__note { margin: 22px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--color-neutral-500); max-width: 62ch; }
.chart__note em { color: var(--color-neutral-300); font-style: normal; font-family: var(--mono); font-size: 12px; }
.plotbar__opts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill {
  font-size: 11.5px; padding: 4px 10px; border: 1px solid var(--color-neutral-800);
  border-radius: 999px; color: var(--color-neutral-500); cursor: pointer;
}
.pill:hover { color: var(--color-accent-200); border-color: var(--color-accent-700); }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pill:has(input:checked) { border-color: var(--color-accent-600); color: var(--color-accent-300); }
.pill:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.plot__main { padding: 26px 26px 22px 0; min-width: 0; max-width: 100%; }
.plot__main h1 { font-size: 24px; line-height: 1.2; margin: 0 0 6px; letter-spacing: -0.02em; max-width: 34ch; }
.plot__main > .lede { margin-bottom: 22px; font-size: 13px; color: var(--color-neutral-500); max-width: 62ch; }
.chart { display: grid; grid-template-columns: 96px minmax(0,1fr); }
.chart__y {
  display: grid; align-items: center; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-neutral-500); text-align: right; padding-right: 12px;
}
.chart__area { position: relative; border-left: 1px solid var(--color-neutral-700); border-bottom: 1px solid var(--color-neutral-700); height: 320px; }
.chart__cells { position: absolute; inset: 0; display: grid; }
.chart__cells div { border-right: 1px solid var(--color-neutral-900); border-bottom: 1px solid var(--color-neutral-900); }
.chart__x { grid-column: 2; display: grid; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-500); padding-top: 9px; }
.dot {
  position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px;
  margin: -5px 0 0 -5px; border-radius: 999px; background: var(--color-accent-600);
  cursor: pointer; transition: background .12s ease;
}
.dot:hover { background: var(--color-accent-300); }
.dot input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.dot:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 3px; }
/* The selected dot and the dimmed non-matching dots are painted by rules the
   build emits into each page's <style>, since both key off generated ids. */
.plotfilter { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-neutral-800); font-size: 11.5px; color: var(--color-neutral-500); align-items: baseline; }
.plotfilter label { cursor: pointer; }
.plotfilter label:hover { color: var(--color-accent-200); }
.plotfilter label:has(input:checked) { color: var(--color-accent-300); }
.plotfilter label:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.plotfilter input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.plot__panel {
  border-left: 1px solid var(--color-neutral-800); padding: 26px 0 30px 26px;
  background: linear-gradient(180deg, var(--color-neutral-900) 0%, var(--color-bg) 55%);
  position: sticky; top: 0;
}
.pnl { display: none; flex-direction: column; gap: 16px; }
.pnl h2 { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
.pnl h2 a { color: var(--color-text); }
.pnl h2 a:hover { color: var(--color-accent-200); }
.pnl > p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--color-neutral-300); text-wrap: pretty; }
.pnl__facts {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px 16px; font-size: 12.5px;
  padding: 14px 0; margin: 0; border-top: 1px solid var(--color-neutral-800); border-bottom: 1px solid var(--color-neutral-800);
}
.pnl__facts dt { color: var(--color-neutral-500); }
.pnl__facts dd { margin: 0; font-family: var(--mono); }
.pnl__near { display: flex; flex-direction: column; gap: 10px; }
.pnl__near label { font-size: 13px; color: var(--color-neutral-300); cursor: pointer; }
.pnl__near label:hover { color: var(--color-accent-200); }
.pnl .btn { align-self: flex-start; font-size: 12.5px; }

/* ── index and document pages ──────────────────────────────────────── */
.catlist { list-style: none; margin: 0; padding: 0 0 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.catlist li { border-top: 1px solid var(--color-neutral-800); }
.catlist a { display: grid; gap: 6px; padding: 18px 0; }
.catlist a:hover .catlist__name { color: var(--color-accent-200); }
.catlist__name { font-family: var(--font-heading); font-size: 20px; letter-spacing: -0.02em; color: var(--color-text); }
.catlist p { margin: 0; font-size: 13px; color: var(--color-neutral-500); line-height: 1.55; }
.catlist__n { font-family: var(--mono); font-size: 11px; color: var(--color-accent-300); }

.doc { max-width: 68ch; padding: 30px 0 40px; }
.doc h1 { font-size: 34px; letter-spacing: -0.03em; margin: 0 0 12px; }
.doc h2 { font-size: 20px; margin: 34px 0 10px; padding-top: 20px; border-top: 1px solid var(--color-neutral-800); letter-spacing: -0.015em; }
.doc h3 { font-size: 16px; margin: 20px 0 6px; }
.doc p, .doc li { font-size: 14.5px; line-height: 1.7; color: var(--color-neutral-300); }
.doc .lede { font-size: 16px; color: var(--color-neutral-400); margin-bottom: 20px; }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { margin: 6px 0; }
.doc code { font-family: var(--mono); font-size: 12.5px; color: var(--color-accent-300); background: var(--color-neutral-900); padding: 2px 6px; border-radius: var(--radius-sm); }
.doc strong { color: var(--color-neutral-100); font-weight: 500; }
.rules { list-style: none; padding: 0; margin: 20px 0; counter-reset: rule; display: grid; gap: 1px; }
.rules li { counter-increment: rule; padding: 16px 0 16px 44px; position: relative; border-top: 1px solid var(--color-neutral-800); margin: 0; }
.rules li::before {
  content: counter(rule, decimal-leading-zero); position: absolute; left: 0; top: 18px;
  font-family: var(--mono); font-size: 12px; color: var(--color-neutral-500);
}
.rules strong { display: block; font-family: var(--font-heading); font-size: 17px; color: var(--color-text); margin-bottom: 4px; font-weight: 500; }

.legend { display: grid; gap: 0; margin: 16px 0 8px; }
.legend__row { display: grid; grid-template-columns: 168px minmax(0,1fr); gap: 8px 24px; padding: 16px 0; border-top: 1px solid var(--color-neutral-800); align-items: start; }
.legend__row h3 { font-size: 15px; margin: 0; letter-spacing: -0.01em; }
.legend__row p { grid-column: 2; margin: 0 0 10px; font-size: 13px; color: var(--color-neutral-500); line-height: 1.55; }
.legend__scale { grid-column: 2; display: flex; flex-direction: column; gap: 7px; margin: 0; }
.legend__step { display: grid; grid-template-columns: 132px 90px; gap: 14px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--color-neutral-300); }
.legend__step i { height: 2px; display: block; background: linear-gradient(to right, var(--color-accent) var(--pct), var(--color-neutral-800) var(--pct)); }

/* ── footer ────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--color-neutral-800); margin-top: 20px; padding: 30px 0 40px; }
.site-foot__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 34px; }
.site-foot p { margin: 0 0 8px; font-size: 12.5px; color: var(--color-neutral-500); line-height: 1.6; }
.site-foot .wordmark { display: block; margin-bottom: 8px; }
.site-foot__legal { font-size: 11.5px; max-width: 52ch; }
.site-foot nav { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.site-foot nav a { color: var(--color-neutral-400); }
.site-foot nav a:hover { color: var(--color-accent-300); }

/* ── touch: whole-row hit areas ─────────────────────────────────────
   Each of these blocks contains exactly one link, so the link's box is
   stretched over the whole row. A thumb can land anywhere on the row. */
.reg__row, .ranked li, .entries li, .rail__item, .strip__col { position: relative; }
.reg__idea > a::after, .ranked__main > a::after, .entries__main > a::after,
.rail__item > a::after, a.strip__title::after {
  content: ""; position: absolute; inset: 0;
}
.chart-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
html { -webkit-tap-highlight-color: color-mix(in srgb, var(--color-accent) 22%, transparent); }

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .plot { grid-template-columns: 1fr; }
  .plot__panel { border-left: 0; border-top: 1px solid var(--color-neutral-800); padding: 24px 0 30px; position: static; }
  .plot__main { padding-right: 0; }
  .ranked li { grid-template-columns: 34px minmax(0,1fr); }
  .ranked p { grid-column: 2; }
}
@media (max-width: 940px) {
  /* The broadsheet columns place themselves explicitly, so the collapse has
     to clear those placements or the rail keeps its own column. */
  .front { grid-template-columns: 1fr; gap: 30px; }
  .front__hero, .front__rail, .front__secondary { grid-column: 1; grid-row: auto; }
  .front__rail { border-left: 0; border-top: 1px solid var(--color-neutral-800); padding: 24px 0 0; }
  .front__secondary { margin-top: 0; }
  .front__hero h1 { font-size: 40px; }
  .strip__cols { grid-template-columns: repeat(2, 1fr); }
  .idea { grid-template-columns: 1fr; gap: 28px; }
  .idea__side { position: static; border-left: 0; border-top: 1px solid var(--color-neutral-800); padding: 22px 0 0; }
  .collection { grid-template-columns: 1fr; gap: 26px; }
  .collection__intro { position: static; }
}
@media (max-width: 860px) {
  .catalog { grid-template-columns: 1fr; }
  .filters { position: static; border-right: 0; border-bottom: 1px solid var(--color-neutral-800); padding: 0 0 16px; max-height: none; overflow: visible; }
  /* The rail is 40-odd rows tall; on a phone it hides behind its own summary
     so the register itself is the first thing under the heading. */
  .filters__summary {
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-neutral-300); padding: 12px 0;
  }
  .filters__summary::after { content: "+"; font-size: 16px; color: var(--color-neutral-500); }
  .catalog:has(#show-filters:checked) .filters__summary::after { content: "\2212"; }
  .catalog:not(:has(#show-filters:checked)) .filters__body { display: none; }
  .filters__body { padding-bottom: 10px; }
  .results { padding-left: 0; }
  .reg__cols { display: none; }
  .reg__row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
  .reg__row > div:not(.reg__idea) { display: none; }
  .reg__idea { gap: 5px; }
  .reg__row .reg__mobile { display: flex; }
  .catlist { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: 4px 0; }
  .facts dt { margin-top: 12px; }
  .entries li { grid-template-columns: 1fr; gap: 8px; }
  .entries .notation { justify-content: flex-start; text-align: left; }
}
@media (min-width: 861px) { .reg__mobile { display: none; } }

/* ── phones ─────────────────────────────────────────────────────────
   Below 860px the site is driven by a thumb: every control grows to a
   comfortable target, the broadsheet becomes one column, and the plot
   keeps its scale by scrolling sideways instead of shrinking. */
@media (max-width: 860px) {
  /* Navigation: one scannable row, links wide enough to hit. */
  .site-head .wrap { padding: 8px 0; gap: 2px; }
  .site-nav { gap: 0 2px; margin-left: -7px; }
  .site-nav a, .masthead .site-nav a { padding: 10px 7px; white-space: nowrap; }
  /* The masthead's tracked-out caps are the only nav too wide for 375px, so
     on phones it takes the plain header treatment and fits on one line. */
  .masthead .site-nav {
    text-transform: none; letter-spacing: 0; font-size: 12.5px; margin-left: -7px;
  }
  .kicker a, .crumbs a { display: inline-block; padding: 7px 0; }
  .wordmark { padding: 6px 0; }
  .side__block ul a, .pnl__near label { display: inline-block; padding: 6px 0; }
  .reg__foot, .results__hint { line-height: 2; }
  .masthead__top { padding: 18px 0 6px; }
  .masthead .site-nav { margin-left: -9px; padding-bottom: 0; }
  .dateline .wrap { gap: 4px 18px; padding: 8px 0; }
  .site-foot nav { gap: 0; }
  .site-foot nav a { padding: 8px 0; }
  .site-foot { padding: 24px 0 32px; }

  /* Lists: bigger type for the values, roomier rows. */
  .notation { font-size: 12px; gap: 4px 9px; }
  .notation > span + span::before { margin-right: 9px; }
  .rail__item > a, a.strip__title, .entries__main > a { display: block; padding: 3px 0; }
  .reg__row { padding: 15px 0; }
  .reg__idea > a { font-size: 15px; }

  /* Controls. */
  .frow { padding: 7px 0; }
  .sortbar { gap: 4px; }
  .sortbar__opts { gap: 2px; margin-left: -8px; flex-wrap: wrap; }
  .sortbar__opts label { padding: 9px 8px; font-size: 12.5px; }
  .ftoggle { padding: 8px 0; }
  .pill { padding: 9px 14px; font-size: 12.5px; }
  .plotfilter { gap: 2px 4px; margin-left: -8px; }
  .plotfilter > span { padding: 9px 8px; }
  .plotfilter label { padding: 9px 8px; font-size: 12.5px; }
  .btn { padding: 10px 14px; }

  /* The plot: the panel you are driving sits above the chart and pins to
     the top, so tapping a dot visibly changes something. */
  .plot { display: flex; flex-direction: column; }
  .plot__bar { order: 1; }
  .plot__panel { order: 2; }
  .plot__main { order: 3; padding-top: 20px; }
  .plot__panel {
    position: sticky; top: 0; z-index: 5; background: var(--color-bg);
    border-top: 0; border-bottom: 1px solid var(--color-neutral-700);
    padding: 12px 0; max-height: 38vh; overflow-y: auto; overscroll-behavior: contain;
  }
  .pnl { gap: 8px; }
  .pnl h2 { font-size: 19px; }
  .pnl > p { font-size: 13px; }
  .pnl__facts { padding: 9px 0; gap: 5px 14px; }
  .pnl .label { position: sticky; top: 0; background: var(--color-bg); padding-bottom: 2px; }
  .chart { min-width: 620px; }
  .chart__area { height: 380px; }
  .dot { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
  .chart__hint { display: block; }
}

@media (max-width: 700px) {
  .wrap { width: min(100% - 32px, var(--wrap)); }
  .front__cols { grid-template-columns: 1fr; }
  .front__cols > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-neutral-800); padding-top: 18px; }
  .strip__cols, .strip__cols--3 { grid-template-columns: 1fr; }
  .strip__col { padding-top: 14px; }
  .front__hero h1 { font-size: 32px; }
  .masthead__name { font-size: 24px; }
  .site-foot__cols { grid-template-columns: 1fr; gap: 24px; }
  .cat-head h1 { font-size: 30px; }
  .page-head h1, .idea__main h1 { font-size: 26px; }
  .collection__intro h1 { font-size: 28px; }
  .legend__row { grid-template-columns: 1fr; }
  .legend__row p, .legend__scale { grid-column: 1; }
  .legend__step { grid-template-columns: minmax(0,1fr) 80px; }
  /* Number and headline share a line; the blurb runs full width beneath. */
  .ranked li { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .ranked__n { padding: 0; }
  .ranked__main a { font-size: 21px; }
  .ranked p { grid-column: 1; }
  .doc h1 { font-size: 28px; }
  .rules li { padding-left: 0; }
  .rules li::before { position: static; display: block; margin-bottom: 6px; }
}

@media print {
  .site-head, .masthead, .dateline, .site-foot, .filters, .plotbar, .plotfilter, .btn { display: none; }
}