/* Generated by build/build_css.py. Do not edit.
 * Sources, in cascade order: rnkd.css, redesign.css
 */

/* ===== rnkd.css ===== */
@charset "UTF-8";
/* RNKD — direction "Broadsheet".
   Black on white, hard rules, one accent used only as a highlighter.
   Radii 0. Shadows none. Motion none beyond hover/focus colour. */

/* ------------------------------------------------------------------ fonts */

/* Archivo was the original interface face and its @font-face outlived the last
   rule that used it, so every page still declared a font it never asked for.
   Geist replaced it; the declaration lives in redesign.css. */
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-var.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */

:root {
  --bg: #FFFFFF;
  --bg-2: #F2F2F0;
  --bg-ad: #FAFAF9;
  --ink: #0A0A0A;
  --muted: #5C5C5A;
  --rule-soft: #D9D9D6;
  --rule-dashed: #9a9a97;
  --highlight: #F2E34A;
  --recommend: #146B3A;
  --against: #B3261E;
  --footer-text: #c9c9c6;
  --footer-rule: #3a3a38;
  --footer-label: #9a9a97;

  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;

  --max: 1200px;
  --pad: 24px;
  --read: 720px;

  /* Photo placeholder. Production replaces it with a real image. */
  --avatar-photo: repeating-linear-gradient(45deg, #E4E4E1 0 4px, #F2F2F0 4px 8px);
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  /* Set by consent.js while the fixed cookie banner is showing, so the banner
     never sits on top of the end of the page. */
  padding-bottom: var(--consent-h, 0px);
}

img { max-width: 100%; height: auto; }

a { color: inherit; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

mark {
  background: var(--highlight);
  color: var(--ink);
  padding: 0 .08em;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Class-level display rules below would otherwise beat the UA [hidden] rule. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- layout */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 10px;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  padding: 8px 12px;
  font: 600 13px var(--sans);
  text-decoration: none;
}
.skip:focus { left: 16px; outline: 3px solid var(--highlight); color: #fff; }

.rule-2 { border-bottom: 2px solid var(--ink); }
.rule-1 { border-bottom: 1px solid var(--ink); }
.t-rule-2 { border-top: 2px solid var(--ink); }
.t-rule-1 { border-top: 1px solid var(--ink); }

/* ------------------------------------------------------------- type roles */

.wordmark {
  display: inline-flex;
  align-items: flex-end;
  font-weight: 900;
  line-height: .85;
  letter-spacing: -.05em;
  font-variation-settings: 'wdth' 78;
  text-decoration: none;
  color: inherit;
}
/* Letters step up 9% of cap height each. */
.wordmark span:nth-child(2) { transform: translateY(-.066em); }
.wordmark span:nth-child(3) { transform: translateY(-.133em); }
.wordmark span:nth-child(4) { transform: translateY(-.2em); }
.wordmark > span { display: inline-block; }
.wordmark-hero { font-size: clamp(90px, 16vw, 220px); letter-spacing: -.055em; }

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}
.kicker-sm { font-size: 10.5px; letter-spacing: .1em; }
.label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
}

.h-hub {
  font-weight: 900;
  font-size: clamp(44px, 6vw, 84px);
  line-height: .9;
  letter-spacing: -.045em;
  font-variation-settings: 'wdth' 80;
  text-wrap: balance;
}
.h-doc {
  font-weight: 900;
  font-size: clamp(46px, 7vw, 96px);
  line-height: .88;
  letter-spacing: -.045em;
  font-variation-settings: 'wdth' 80;
  text-wrap: balance;
}
.h-book {
  font-weight: 800;
  font-size: clamp(40px, 6vw, 76px);
  line-height: .95;
  letter-spacing: -.04em;
  font-variation-settings: 'wdth' 85;
  text-wrap: pretty;
}
.h-section {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -.03em;
  font-variation-settings: 'wdth' 80;
  text-transform: uppercase;
}
.h-row {
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variation-settings: 'wdth' 88;
  text-wrap: balance;
}

.lede {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.45;
  max-width: 62ch;
  text-wrap: pretty;
}
.lede-hub {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  max-width: 46ch;
  text-wrap: pretty;
}
.serif { font-family: var(--serif); }
.excerpt {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.45;
  text-wrap: pretty;
}
.meta { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.author-line {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tag-ink {
  background: var(--ink);
  color: #fff;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 100;
}
.tag-hl {
  background: var(--highlight);
  color: var(--ink);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- header */

.site-header {
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  position: relative;
}
.site-header .bar {
  display: flex;
  align-items: stretch;
  gap: 28px;
  min-height: 60px;
}
.site-header .brand {
  display: flex;
  align-items: flex-end;
  padding: 14px 0 12px;
  font-size: 30px;
}
.site-nav { display: flex; margin-left: auto; align-items: stretch; }
.site-nav a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.site-nav a:hover { background: var(--bg-2); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.site-nav a:focus-visible { outline-offset: -3px; }

.nav-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 0 14px;
  margin-left: 8px;
  border-left: 1px solid var(--rule-soft);
}
.magnifier {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
}
.magnifier::after {
  content: '';
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 6px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}

.mobile-tools { margin-left: auto; display: none; align-items: center; gap: 6px; }
.mobile-tools .icon-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  text-decoration: none;
}
.menu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px;
  background: var(--ink);
  color: #fff;
  border: 0;
  font: 700 12px var(--sans);
  letter-spacing: .1em;
  cursor: pointer;
}
.mobile-nav { display: none; border-top: 1px solid var(--ink); background: #fff; }
.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  min-height: 52px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
}
.mobile-nav a:focus-visible { outline-offset: -3px; }
.mobile-nav .here { font-size: 12px; font-weight: 600; color: var(--muted); }
.mobile-nav[data-open="true"] { display: block; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--ink);
  color: #fff;
  margin-top: 64px;
}
.site-footer .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px 40px;
  padding: 40px var(--pad) 28px;
  max-width: var(--max);
  margin: 0 auto;
}
.site-footer .wordmark { font-size: 44px; }
.site-footer .tagline {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  margin-top: 14px;
  max-width: 30ch;
  text-wrap: pretty;
}
.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
}
.site-footer nav span.label { color: var(--footer-label); margin-bottom: 2px; }
.site-footer nav a { color: #fff; text-decoration: none; }
.site-footer nav a:hover { color: #fff; text-decoration: underline; }
/* Footer rows were 18-20px tall, well inside the fat-finger zone. */
.site-footer nav a,
.site-footer nav .footer-btn {
  display: flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 900px) {
  .site-footer nav a,
  .site-footer nav .footer-btn { min-height: 48px; }
}
.site-footer .fineprint { border-top: 1px solid var(--footer-rule); }
.site-footer .fineprint > div {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--pad);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--footer-text);
}
.site-footer .fineprint .domain { margin-left: auto; }

/* ------------------------------------------------------------ breadcrumb */

.breadcrumb {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .current { color: var(--ink); }

/* ---------------------------------------------------------------- covers */
/* Composition is emitted per-cover by rnkd_cover(), scaled from a 160px
   reference width. Only the structural shell lives here. */

.cover {
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: none;
  box-sizing: border-box;
}
.cover .c-title,
.cover .c-author,
.cover .c-nocover { position: relative; }
.cover .c-title { text-wrap: pretty; }
.cover .c-author { opacity: .85; }
.cover-deco { position: absolute; }
.deco-stripes { inset: 0; background: repeating-linear-gradient(135deg, #F2F2F0 0 6px, #fff 6px 12px); }

/* ---------------------------------------------------------------- stars */

.stars { display: inline-flex; align-items: center; gap: .5em; line-height: 1; }
.stars .glyphs { display: inline-flex; gap: 2px; }
.stars .star { position: relative; display: inline-block; }
.stars .star svg { display: block; }
.stars .star .fill { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; }
.stars .twin { font-size: .8em; font-weight: 600; letter-spacing: .02em; }
.no-rating {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
  border: 1px solid var(--rule-soft);
  padding: 3px 6px;
  display: inline-block;
}

/* ---------------------------------------------------- semantic markers */

.marker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
.marker::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  flex: none;
}
.marker-yes { color: var(--recommend); }
.marker-yes::before { background: var(--recommend); }
.marker-no { color: var(--against); }
.marker-no::before { border: 2px solid var(--against); }
.marker-depends { color: var(--ink); }
.marker-depends::before {
  background: linear-gradient(90deg, var(--ink) 50%, transparent 50%);
  border: 2px solid var(--ink);
}

.dnf-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  border: 2px solid var(--ink);
  padding: 3px 6px;
  font-variation-settings: 'wdth' 100;
  display: inline-block;
}
.spoiler-flag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--ink);
  color: var(--highlight);
  padding: 3px 7px;
}

/* ---------------------------------------------------------- verdict strip */

.verdicts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.verdicts a {
  text-decoration: none;
  padding: 18px 20px 16px;
  border-right: 1px solid var(--ink);
  min-width: 0;
}
.verdicts a:first-child { padding-left: 0; }
.verdicts a:last-child { border-right: 0; padding-right: 0; }
.verdicts a:hover { background: var(--bg-2); }
.verdicts a:focus-visible { outline-offset: -3px; }
.verdicts .who {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted);
}
.verdict-word {
  font-weight: 900;
  font-size: clamp(40px, 5vw, 64px);
  line-height: .9;
  letter-spacing: -.04em;
  font-variation-settings: 'wdth' 78;
  text-transform: uppercase;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
.verdicts .stars-row { margin-top: 10px; }
.verdicts .dnf-note { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
.avg-line {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.avg-line b { color: var(--ink); }

/* ------------------------------------------------------------------ take */

.take { border-top: 3px solid var(--ink); padding-top: 18px; scroll-margin-top: 20px; }
.take + .take { margin-top: 40px; }
.take .take-no {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted);
  display: flex;
  gap: 12px;
  align-items: center;
}
.take .take-no .dnf-tag { color: var(--ink); }
.take header {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.take .who-block { min-width: 0; flex: 1; }
.take .who-name {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.take .who-name a { text-decoration: none; }
.take .who-name a:hover { text-decoration: underline; }
.take .who-tastes {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  text-wrap: pretty;
}
.take .status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  width: 100%;
}
.take .status-row .completion { font-size: 12px; font-weight: 600; color: var(--muted); }

.avatar {
  display: grid;
  place-items: center;
  font-weight: 800;
  flex: none;
  text-decoration: none;
  color: var(--ink);
  background: var(--avatar-photo);
}
.avatar-initial { background: var(--ink); color: #fff; }
.avatar-56 { width: 56px; height: 56px; font-size: 22px; }
.avatar-44 { width: 44px; height: 44px; font-size: 18px; }
.avatar-36 { width: 36px; height: 36px; font-size: 15px; }
.avatar-32 { width: 32px; height: 32px; font-size: 14px; }
.avatar-28 { width: 28px; height: 28px; font-size: 13px; }
.avatar-88 { width: 88px; height: 88px; font-size: 36px; }
.avatar-160 { width: 160px; height: 160px; font-size: 64px; }

.review-body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  margin-top: 22px;
  max-width: var(--read);
  text-wrap: pretty;
  font-variation-settings: 'opsz' 19;
}
.review-body p { margin: 0 0 1.1em; }
.review-body p:last-child { margin-bottom: 0; }

.take-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 22px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.take-foot a { color: var(--ink); }

/* Acquisition disclosure — OS §7.4 exact wording. */
.disclosure {
  margin-top: 20px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
}
.disclosure .label { padding-top: 3px; letter-spacing: .12em; }

/* --------------------------------------------------------------- spoiler */

details.spoiler { margin-top: 22px; border: 2px solid var(--ink); }
details.spoiler > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  min-height: 44px;
}
details.spoiler > summary::-webkit-details-marker { display: none; }
details.spoiler > summary:focus-visible { outline: 3px solid var(--highlight); outline-offset: -3px; }
details.spoiler > summary .word { color: var(--highlight); }
details.spoiler > summary .hint { font-weight: 600; letter-spacing: .04em; opacity: .8; }
details.spoiler .spoiler-body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  padding: 18px 16px;
}
details.spoiler .spoiler-body p { margin: 0 0 1em; }
details.spoiler .spoiler-body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- agreed / split */

.synthesis { margin-top: 48px; border-top: 2px solid var(--ink); padding-top: 18px; }
.synthesis .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px 40px;
}
.synthesis p.text {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  margin-top: 12px;
  text-wrap: pretty;
}
.synthesis .foot { margin-top: 16px; font-size: 12px; color: var(--muted); line-height: 1.5; }

.after-reading { margin-top: 40px; border-top: 1px solid var(--ink); padding-top: 16px; }
.after-reading .rows { display: grid; gap: 14px; margin-top: 14px; }
.after-reading .after-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
.after-reading p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
}
.after-reading b { font-family: var(--sans); font-size: 13px; font-weight: 700; }

/* --------------------------------------------------------------- amazon */

.amazon {
  margin-top: 48px;
  border: 1px solid var(--ink);
  padding: 20px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
}
.amazon .copy { min-width: 0; flex: 1; }
.amazon h2 { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.amazon p {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
  text-wrap: pretty;
}
.btn-disabled {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--rule-soft);
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  flex: none;
}

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn-fill {
  background: var(--ink);
  color: #fff;
  border: 0;
  min-height: 48px;
  padding: 0 22px;
  font-size: 14px;
}
.btn-fill:hover { background: var(--highlight); color: var(--ink); }
.btn-fill-invert:hover { background: #fff; color: var(--ink); outline: 2px solid var(--ink); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ink);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
}
.chip:hover { background: var(--ink); color: #fff; }
.chip-lg { min-height: 44px; padding: 0 14px; font-size: 14px; }
.chip-sm {
  min-height: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 7px;
}

.filter-btn {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font: 600 12.5px var(--sans);
  cursor: pointer;
}
.filter-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

.textlink { font-size: 13px; font-weight: 700; letter-spacing: .04em; }

/* ----------------------------------------------------------- list rows */

.rows { display: grid; }
.row {
  display: grid;
  gap: 14px 28px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
}
.row:hover { background: var(--bg-2); }
.row:focus-visible { outline-offset: -3px; }
.row-book { grid-template-columns: 72px minmax(0, 1.4fr) minmax(0, 1fr); }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}
.chips .ink { background: var(--ink); color: #fff; padding: 0 5px; }
.chips .hl { background: var(--highlight); color: var(--ink); padding: 0 5px; }
.row .title { display: block; margin-top: 8px; }
.row .byline { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.row .excerpt { display: block; margin-top: 10px; }
.verdict-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid var(--rule-soft);
  padding-left: 20px;
  min-width: 0;
}
.verdict-col .v {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: baseline;
  font-size: 12.5px;
}
.verdict-col .v .n { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verdict-col .v .w {
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -.02em;
  font-variation-settings: 'wdth' 80;
}
.verdict-col .v .r { color: var(--muted); font-weight: 600; min-width: 34px; text-align: right; }

/* ----------------------------------------------------------- ad slots */

.ad {
  border: 1px dashed var(--rule-dashed);
  background: var(--bg-ad);
  display: grid;
  place-items: center;
  font: 500 10.5px var(--mono);
  letter-spacing: .06em;
  color: var(--muted);
  text-align: center;
  padding: 12px;
}
.ad-inline { margin: 36px 0; min-height: 100px; }
.ad-sidebar { height: 250px; }

/* --------------------------------------------------------- notice boxes */

.note {
  background: var(--bg-2);
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
.note b.label { margin-right: 8px; }

.internal {
  font: 500 10.5px var(--mono);
  letter-spacing: .06em;
  color: var(--muted);
  border: 1px dashed var(--rule-dashed);
  padding: 6px 10px;
  display: inline-block;
}

/* ----------------------------------------------------------- book page */

.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 32px 48px;
  align-items: start;
}
.doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px 64px;
  align-items: start;
}
.reading { min-width: 0; max-width: var(--read); }
.sidebar { display: flex; flex-direction: column; gap: 22px; }
.sidebar-sticky { position: sticky; top: 20px; }

.identity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  margin: 28px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}
.identity-row .lockup { display: inline-flex; align-items: center; gap: 8px; }
.identity-row .lockup .wordmark { font-size: 18px; }
.identity-row .count { color: var(--muted); }

.book-meta {
  font-size: 12.5px;
  line-height: 1.5;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  color: var(--muted);
}
.book-meta dt { font-weight: 600; }
.book-meta dd { margin: 0; color: var(--ink); }

.onthispage {
  border-top: 1px solid var(--ink);
  padding-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.onthispage a { text-decoration: none; }
.onthispage a:hover { text-decoration: underline; }

.related { margin-top: 48px; }
.related .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px 24px;
  margin-top: 14px;
}
.related a {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  align-items: flex-start;
}
.related a:hover { text-decoration: underline; }
.related .r-title { display: block; font-weight: 700; font-size: 15px; letter-spacing: -.01em; line-height: 1.15; }
.related .r-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.related .all {
  align-items: center;
  border: 1px solid var(--ink);
  padding: 12px 14px;
  min-height: 60px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
}
.related .all:hover { background: var(--bg-2); text-decoration: none; }

.page-foot {
  margin-top: 40px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

/* ------------------------------------------------------------- sections */

.section { padding: 34px 0; border-bottom: 2px solid var(--ink); }
.section:last-child { border-bottom: 0; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hub-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px 48px;
  align-items: end;
  border-bottom: 2px solid var(--ink);
  padding: 36px 0 28px;
}

/* -------------------------------------------------------------- forms */

label { display: block; }
input, textarea, select { font: inherit; }
.field-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.field-hint { margin: 2px 0 6px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.field-input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--ink);
  background: #fff;
  font-size: 15px;
}
textarea.field-input {
  min-height: 0;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}
textarea.sample { font-family: var(--serif); font-size: 17px; line-height: 1.55; padding: 12px 14px; }
.field-input[aria-invalid="true"] { border-color: var(--against); }
.field-error { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--against); }
.field-error:empty { display: none; }

fieldset { border: 0; padding: 0; margin: 32px 0 0; border-top: 2px solid var(--ink); padding-top: 18px; }
fieldset:first-of-type { margin-top: 0; }
legend {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -.03em;
  font-variation-settings: 'wdth' 80;
  padding: 0;
  margin-bottom: 6px;
  float: left;
  width: 100%;
}
.fieldset-body { clear: both; padding-top: 12px; }
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 24px;
}
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
}
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ink); }
.check-error { margin: 6px 0 0 34px; }
.chip-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}
.chip-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.chip-check:has(input:checked) { background: var(--ink); color: #fff; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.alert {
  border: 2px solid var(--against);
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.status-box {
  border: 2px solid var(--ink);
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
}

/* --------------------------------------------------------------- legal */

.legal-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px 64px;
  align-items: start;
}
.legal-nav { position: sticky; top: 20px; border-top: 2px solid var(--ink); padding-top: 12px; }
.legal-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid var(--rule-soft);
  border-left: 4px solid transparent;
  padding-left: 10px;
}
.legal-nav a:hover { background: var(--bg-2); }
.legal-nav a[aria-current="page"] { font-weight: 800; border-left-color: var(--ink); }
.legal-nav a:focus-visible { outline-offset: -3px; }
.legal-section {
  border-bottom: 1px solid var(--ink);
  padding: 24px 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px 20px;
  scroll-margin-top: 20px;
}
.legal-section .num {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -.03em;
  font-variation-settings: 'wdth' 78;
  line-height: 1.1;
}
.legal-section h2 { font-weight: 800; font-size: 20px; letter-spacing: -.02em; line-height: 1.15; }
.legal-section .body {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.6;
  margin-top: 12px;
  text-wrap: pretty;
}
.amazon-statement {
  margin-top: 22px;
  padding: 16px 18px;
  border: 2px solid var(--ink);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
  line-height: 1.3;
}

/* -------------------------------------------------------------- errors */

.err-number {
  font-weight: 900;
  font-size: clamp(120px, 22vw, 300px);
  line-height: .8;
  letter-spacing: -.06em;
  font-variation-settings: 'wdth' 75;
  position: relative;
  display: inline-block;
}
.err-number .strike {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 48%;
  height: .07em;
  background: var(--ink);
}
.err-h1 {
  margin-top: 16px;
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variation-settings: 'wdth' 85;
  text-wrap: balance;
}
.recovery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 40px;
}
.recovery a {
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 22px 0;
  display: block;
}
.recovery a:hover { background: var(--bg-2); }
.recovery .r-h {
  display: block;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -.03em;
  font-variation-settings: 'wdth' 80;
}
.recovery .r-p {
  display: block;
  font-family: var(--serif);
  font-size: 15.5px;
  margin-top: 6px;
  color: var(--muted);
}

/* -------------------------------------------------------------- search */

.search-field { display: flex; align-items: stretch; border-bottom: 4px solid var(--ink); margin-top: 8px; }
.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 6px 0;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 64px);
  letter-spacing: -.04em;
  font-variation-settings: 'wdth' 85;
  color: var(--ink);
  outline: none;
}
.search-field input:focus { background: var(--bg-ad); }
.search-field button {
  border: 0;
  background: var(--ink);
  color: #fff;
  padding: 0 18px;
  font: 700 13px var(--sans);
  letter-spacing: .06em;
  cursor: pointer;
  min-width: 44px;
}
.result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
}
.result:hover { background: var(--bg-2); }
.result .kind { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--muted); min-width: 64px; }
.result .t { display: block; font-weight: 800; font-size: 22px; letter-spacing: -.03em; line-height: 1.05; }
.result .s { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.result .arrow {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -.02em;
  font-variation-settings: 'wdth' 78;
  color: var(--muted);
}

/* --------------------------------------------------------- join band */

.join {
  background: var(--highlight);
  color: var(--ink);
  border-top: 2px solid var(--ink);
}
.join > div {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--pad) 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px 48px;
  align-items: center;
}
.join h2 {
  font-weight: 900;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: .92;
  letter-spacing: -.04em;
  font-variation-settings: 'wdth' 80;
  text-wrap: balance;
}
.join p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  max-width: 50ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------- utils */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.stack-8 > * + * { margin-top: 8px; }
.stack-10 > * + * { margin-top: 10px; }
.stack-14 > * + * { margin-top: 14px; }
.stack-18 > * + * { margin-top: 18px; }

/* --------------------------------------------------------- breakpoints */

@media (max-width: 1200px) {
  .legal-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 28px 40px; }
}

@media (max-width: 900px) {
  .site-nav { display: none; }
  .mobile-tools { display: flex; }

  /* Without JavaScript the MENU button cannot open anything, so it is hidden
     and the navigation is simply always open. The site is server-rendered and
     every page has to stay reachable with scripts blocked. */
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .mobile-nav { display: block; }
  .book-grid,
  .doc-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sidebar-sticky { position: static; }
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-nav { position: static; }
}

@media (max-width: 640px) {
  :root { --pad: 18px; }
  .row-book { grid-template-columns: 64px minmax(0, 1fr); }
  .row-book .verdict-col {
    grid-column: 1 / -1;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule-soft);
    padding-top: 12px;
  }
  .verdicts { grid-template-columns: minmax(0, 1fr); }
  .verdicts a { border-right: 0; border-bottom: 1px solid var(--ink); padding: 16px 0; }
  .verdicts a:last-child { border-bottom: 0; }
  .site-footer .fineprint .domain { margin-left: 0; }
  .avatar-160 { width: 110px; height: 110px; font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .site-header, .site-footer, .ad, .internal { display: none; }
}

/* A single review has no verdict strip above it, so it carries the page's
   first rule itself. */
.take-solo { margin-top: 32px; }

/* ------------------------------------------------------- contact tabs */
/* No-JS path: the hash selects the panel via :target, and the first panel
   shows when nothing is targeted. JS takes over by adding .js-tabs. */

.contact-tab { border-bottom: 4px solid transparent; }
.contact-tab:hover { background: var(--bg-2); }
.contact-tab:focus-visible { outline-offset: -3px; }
.contact-tab[aria-selected="true"] { border-bottom-color: var(--ink); }

.contact-panel { display: none; }
.contact-panel:target { display: block; }
.contact-panels:not(:has(.contact-panel:target)) > .contact-panel:first-child { display: block; }

.js-tabs .contact-panel,
.js-tabs .contact-panel:target { display: none; }
.js-tabs .contact-panel[data-active="true"] { display: block; }

/* ------------------------------------------------------- legal long-form */
/* AppWanderer's legal envelope carries lists and links inside a section body,
   which the original placeholder copy did not. */

.legal-body {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.6;
  margin-top: 12px;
  text-wrap: pretty;
}
.legal-body > * + * { margin-top: 1em; }
.legal-body ul { display: grid; gap: .55em; padding-left: 1.1em; list-style: disc; }
.legal-body li { padding-left: .2em; }
.legal-body li::marker { color: var(--muted); }
.legal-body code {
  font: 500 .85em var(--mono);
  background: var(--bg-2);
  padding: 1px 5px;
}
.legal-body a { color: var(--ink); }

/* A button that has to sit inline in running prose. */
.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}
.footer-btn {
  background: none;
  border: 0;
  padding: 0;
  font: 600 13px var(--sans);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.footer-btn:hover { text-decoration: underline; }

/* Contact: with JS on, the tab above already names the panel, so the heading
   is for structure and screen readers rather than a second visible label. */
.contact-panel-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.js-tabs .contact-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Genre headings inside the books list. */
.rows-group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 26px 0 8px;
  border-bottom: 2px solid var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rows-group a { text-decoration: none; }
.rows-group a:hover { text-decoration: underline; }
.rows-group span { color: var(--muted); letter-spacing: .08em; }

/* ------------------------------------------------- book verdict summary */

/* The spread, high on the page, before 20,000 words of reviews. Never an
   average: RNKD has no score to average (OS §11). */
.verdict-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}
.verdict-summary .vs-count { background: var(--ink); color: #fff; padding: 3px 8px; }
.verdict-summary .vs-spread { color: var(--ink); }
.verdict-summary .vs-note { margin-left: auto; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
@media (max-width: 640px) {
  .verdict-summary .vs-note { margin-left: 0; flex-basis: 100%; }
}

/* --------------------------------------------------------- cookie consent */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--bg);
  border-top: 2px solid var(--ink);
}
.consent-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: 16px var(--pad);
  display: flex;
  gap: 14px 28px;
  align-items: center;
  flex-wrap: wrap;
}
.consent-text {
  flex: 1 1 320px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  text-wrap: pretty;
}
.consent-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.consent-actions .btn { min-height: 44px; padding: 0 16px; }

.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(10, 10, 10, .55);
  display: grid;
  place-items: center;
  padding: var(--pad);
  overflow-y: auto;
}
.consent-modal-card {
  position: relative;
  background: var(--bg);
  border: 2px solid var(--ink);
  max-width: 620px;
  width: 100%;
  padding: 28px 26px 24px;
  max-height: calc(100vh - 2 * var(--pad));
  overflow-y: auto;
}
.consent-modal-card h2 {
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -.03em;
  font-variation-settings: 'wdth' 80;
  text-transform: uppercase;
  padding-right: 40px;
}
.consent-modal-card > p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  margin-top: 10px;
  text-wrap: pretty;
}
.consent-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.consent-cats { display: grid; margin: 20px 0; }
.consent-cats li { border-top: 1px solid var(--ink); padding: 12px 0; }
.consent-cats label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.consent-cats input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  accent-color: var(--ink);
}
.consent-cats input:disabled { cursor: not-allowed; }
.consent-cats span {
  display: block;
  margin-top: 5px;
  padding-left: 30px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}
.consent-modal-card .consent-actions { border-top: 2px solid var(--ink); padding-top: 18px; }

@media (max-width: 640px) {
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 48px; }

  /* On a 390x844 phone this banner measured 185px, 22% of the viewport, and
     cropped the page on first paint. The wording is doing legal work and is not
     shortened; the height comes out of type size, leading and padding instead.
     The buttons stay at 48px, so they are the one thing not squeezed. */
  .consent-inner { padding: 10px var(--pad); gap: 8px; }
  .consent-text { font-size: 13.5px; line-height: 1.35; flex-basis: 100%; }
}

/* Consent controls only exist for readers who can actually use them. With JS
   off, no tag loads and no non-essential cookie is set, so there is nothing to
   consent to; the banner stays away and the inline mentions read as plain text. */
html:not(.js) .consent,
html:not(.js) .consent-modal,
html:not(.js) .footer-btn { display: none !important; }
html:not(.js) .linkish { text-decoration: none; font-weight: 700; cursor: default; }

/* ------------------------------------------------------- real imagery */
/* Covers are publisher artwork of varying aspect; the reservation stops the
   page reflowing while they load. Photographs fill their square. */

.cover-img {
  display: block;
  flex: none;
  height: auto;
  background: var(--bg-2);
  border: 1px solid var(--rule-soft);
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar { overflow: hidden; background: var(--bg-2); }

/* ------------------------------------------------------ spoiler notice */
/* Every review on the site discusses the whole book, so the spoiler warning is
   a banner above an open review rather than a collapsed <details>. */

.spoiler-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  background: var(--ink);
  color: #fff;
  padding: 9px 14px;
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.45;
}
.spoiler-note b {
  color: var(--highlight);
  font-weight: 700;
  letter-spacing: .1em;
  font-size: 12px;
}

/* --------------------------------------------------- book page, real data */
/* Roundtables here run to ten readers, so the verdict strip has to survive far
   more cells than the three the design was drawn with. */

.verdicts-dense { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.verdicts-dense a,
.verdicts-dense a:first-child,
.verdicts-dense a:last-child {
  padding: 14px 16px 12px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule-soft);
}
.verdicts-dense .verdict-word { font-size: clamp(26px, 3.2vw, 40px); margin-top: 6px; }
.verdicts-dense .who { font-size: 10px; letter-spacing: .1em; }

.take-title {
  font-weight: 800;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variation-settings: 'wdth' 88;
  margin-top: 12px;
  text-wrap: balance;
}
.take .who-age { color: var(--muted); font-weight: 600; }
.take .who-name { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.take .who-name a { text-decoration: none; }
.take .who-name a:hover { text-decoration: underline; }
.take header { margin-top: 16px; }

@media (max-width: 640px) {
  .verdicts-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verdicts-dense a { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 12px; }
}

/* ----------------------------------------------------------- readers list */

.reader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0 40px;
}
.reader {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--ink);
  scroll-margin-top: 20px;
}
.reader:target { background: var(--bg-2); }
.reader-body { min-width: 0; }
.reader-name {
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variation-settings: 'wdth' 88;
}
.reader-age { color: var(--muted); font-weight: 600; }
.reader-count {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.reader-mail {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  word-break: break-all;
}
.verdict-col .v-more { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.marker-dnf { color: var(--ink); }
.marker-dnf::before { background: linear-gradient(135deg, var(--ink) 45%, transparent 45%, transparent 55%, var(--ink) 55%); border: 2px solid var(--ink); }
.cover-credit { font-size: 11px; line-height: 1.45; color: var(--muted); margin-top: 4px; }

/* ===== redesign.css ===== */
/* ===========================================================================
   RNKD — redesign layer.
   Loaded after rnkd.css and overrides it. Design language: Geist, deep
   negative space, dense interlocking grids, real motion.

   Every rule here is presentation. Nothing in this file changes what the site
   says, which reviews exist, or which pages are indexable.
   =========================================================================== */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens */

:root {
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Deeper ink and a warmer paper than the broadsheet original, so the
     ambient washes below have something to sit against. */
  --ink: #08080A;
  --paper: #FBFBF9;
  --bg: var(--paper);
  --bg-2: #F1F1EE;
  --muted: #55555A;
  --rule-soft: #E2E2DE;
  --highlight: #F2E34A;

  /* Cinematic vertical rhythm. Sections are chapters, not rows. */
  --chapter: clamp(6rem, 12vw, 12rem);
  --max: 1320px;
  --pad: clamp(20px, 4vw, 48px);
  --h1-max: 68rem;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

body {
  background: var(--paper);
  font-family: var(--sans);
  font-synthesis-weight: none;
}

/* Ambient ground. Two soft radial washes and a fine grain, fixed behind
   everything, so long pages never read as flat white. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(242, 227, 74, .16), transparent 60%),
    radial-gradient(50rem 36rem at 105% 8%, rgba(8, 8, 10, .07), transparent 62%);
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: var(--max); }

/* Chapters. The single biggest change from the old layout: air.
   Opt-in by class, not by every section on the page: applied to `section`
   generally it put up to 192px of padding around things that are steps in one
   argument rather than separate chapters, which reads as a broken page rather
   than a cinematic one. */
.chapter { padding-block: var(--chapter); }

/* -------------------------------------------------------- floating navbar */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border: 0;
  padding-top: 14px;
}
.site-header .bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 12px 10px 20px;
  border: 1px solid rgba(8, 8, 10, .10);
  border-radius: 999px;
  background: rgba(251, 251, 249, .72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 2px rgba(8, 8, 10, .04), 0 12px 32px -18px rgba(8, 8, 10, .35);
  transition: box-shadow .5s var(--ease-out), background .5s var(--ease-out);
}
.site-header[data-stuck="true"] .bar {
  background: rgba(251, 251, 249, .9);
  box-shadow: 0 1px 2px rgba(8, 8, 10, .05), 0 18px 44px -20px rgba(8, 8, 10, .45);
}
.site-nav { gap: 4px; }
.site-nav a {
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--muted);
  transition: color .3s var(--ease-out), background .3s var(--ease-out);
}
.site-nav a:hover { color: var(--ink); background: rgba(8, 8, 10, .05); }
.site-nav a[aria-current="page"] { color: var(--ink); background: rgba(8, 8, 10, .07); }
.site-header .brand { font-size: 21px; letter-spacing: -.06em; }

/* ------------------------------------------------------------------- hero */

/* Editorial Split: type left, a single artwork right, and a great deal of
   nothing in between. The H1 is capped at --h1-max so it flows wide and
   breaks at two lines rather than stacking into a column of six. */
.hero-split {
  display: grid;
  /* The text column carries a headline that must break at two lines, so it
     gets the room; the artwork is a column, not a co-star. */
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem);
}
.hero-h1 {
  max-width: var(--h1-max);
  margin: 0;
  font-size: clamp(2.6rem, 5.2vw, 4.7rem);
  line-height: .94;
  letter-spacing: -.045em;
  font-weight: 600;
  text-wrap: balance;
}
.hero-h1 em { font-style: normal; position: relative; white-space: nowrap; }
.hero-h1 em::after {
  content: '';
  position: absolute;
  left: -.06em;
  right: -.06em;
  bottom: .1em;
  height: .32em;
  background: var(--highlight);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  animation: rule-in 1.1s var(--ease-out) .35s forwards;
}
@keyframes rule-in { to { transform: scaleX(1); } }

/* A book cover set into the sentence itself. */
.hero-h1 .inline-art {
  display: inline-block;
  vertical-align: -.12em;
  width: clamp(64px, 7vw, 104px);
  height: clamp(40px, 4.4vw, 62px);
  margin: 0 .16em;
  border-radius: 999px;
  background-size: cover;
  background-position: center 22%;
  filter: grayscale(1) contrast(1.15);
  box-shadow: 0 8px 26px -12px rgba(8, 8, 10, .6);
}
.hero-lede {
  margin-top: 30px;
  max-width: 46ch;
  font-family: var(--serif);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  color: #2C2C30;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Buttons. Ink on paper or paper on ink, never anything in between: the old
   ghost buttons could not be read against the washes. */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: transform .4s var(--ease-out), background .3s var(--ease-out),
              box-shadow .4s var(--ease-out), color .3s var(--ease-out);
}
.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(8, 8, 10, .8);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(8, 8, 10, .85); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid rgba(8, 8, 10, .22); }
.btn-secondary:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.btn-primary .arw, .btn-secondary .arw { transition: transform .4s var(--ease-out); }
.btn-primary:hover .arw, .btn-secondary:hover .arw { transform: translateX(4px); }

/* The hero artwork. */
.hero-art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-2);
}
.hero-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transform: scale(1.04);
  transition: transform 1.2s var(--ease-out), filter .9s var(--ease-out);
}
.hero-art:hover img { transform: scale(1); filter: grayscale(0) contrast(1); }
.hero-art::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 40%, rgba(8, 8, 10, .55));
}
.hero-art figcaption {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  z-index: 2;
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -.005em;
}
.hero-art figcaption b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-art { aspect-ratio: 3 / 2; }
}

/* ------------------------------------------------------------ section head */

.chapter-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.chapter-title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 600;
  text-wrap: balance;
}
.chapter-note {
  max-width: 38ch;
  margin: 0;
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ------------------------------------------------------------ bento grid */

/* Six columns, dense auto-flow. Every tile below declares a span that
   interlocks; dense backfill closes anything a wrap would leave open. */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(168px, auto);
  grid-auto-flow: dense;
  gap: 14px;
}
.bento > * { min-width: 0; }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid rgba(8, 8, 10, .09);
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out),
              border-color .4s var(--ease-out);
}
a.tile:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 8, 10, .2);
  box-shadow: 0 24px 50px -28px rgba(8, 8, 10, .55);
}

.tile-lead   { grid-column: span 4; grid-row: span 3; }
.tile-tall   { grid-column: span 2; grid-row: span 3; }
.tile-wide   { grid-column: span 4; grid-row: span 2; }
.tile-sm     { grid-column: span 2; grid-row: span 2; }

/* A jacket is 2:3 and a tile is landscape, so cropping to fill throws away
   most of the artwork and, on a typographic cover, leaves a blank grey field.
   The cover is contained at full height instead, over a blown-up blurred copy
   of itself that fills the rest. Works for any composition. */
.tile-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tile-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.55) blur(26px);
  transform: scale(1.25);
}
.tile-media img.tile-fg {
  object-fit: contain;
  object-position: center;
  filter: grayscale(1) contrast(1.06) brightness(.82);
  transform: scale(.96);
  transition: transform 1.1s var(--ease-out), filter .8s var(--ease-out);
}
a.tile:hover .tile-media img.tile-fg {
  transform: scale(1.02);
  filter: grayscale(0) contrast(1) brightness(.92);
}
.tile-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(185deg, rgba(8, 8, 10, .05) 30%, rgba(8, 8, 10, .88));
}
.tile-media ~ * { position: relative; z-index: 1; color: #fff; }
.tile-media ~ .tile-meta { color: rgba(255, 255, 255, .78); }

.tile-title {
  font-size: clamp(1.15rem, 1.9vw, 1.9rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 600;
  text-wrap: balance;
}
.tile-lead .tile-title { font-size: clamp(1.8rem, 3.2vw, 3rem); }
.tile-meta { font-size: 12.5px; font-weight: 500; letter-spacing: -.005em; color: var(--muted); }
.tile-quote {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* The verdict strip inside a tile. Words, never scores. */
.tile-verdicts { display: flex; flex-wrap: wrap; gap: 6px; }
.verdict-chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
}
.tile:not(:has(.tile-media)) .verdict-chip {
  background: rgba(8, 8, 10, .05);
  border-color: rgba(8, 8, 10, .12);
  color: var(--ink);
}
.tile-split { background: var(--highlight); border-color: rgba(8, 8, 10, .18); }
.tile-split .tile-meta { color: rgba(8, 8, 10, .66); }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile-lead { grid-column: span 4; grid-row: span 3; }
  .tile-tall, .tile-wide { grid-column: span 4; grid-row: span 2; }
  .tile-sm { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile-lead, .tile-tall, .tile-wide, .tile-sm { grid-column: span 1; grid-row: auto; min-height: 230px; }
}

/* ---------------------------------------------------------------- marquee */

.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--rule-soft);
  padding-block: 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  will-change: transform;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -.035em;
  white-space: nowrap;
  color: var(--muted);
}
.marquee-item .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--highlight); }

/* ------------------------------------------------------ pinned split scroll */

.pinned { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.pinned-aside { align-self: start; }
.pinned-list { display: grid; gap: 14px; }
.rule-card {
  border: 1px solid rgba(8, 8, 10, .1);
  border-radius: 16px;
  background: #fff;
  padding: clamp(22px, 2.4vw, 34px);
}
.rule-card h3 {
  margin: 0 0 10px;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  letter-spacing: -.03em;
  font-weight: 600;
  text-wrap: balance;
}
.rule-card p { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.55; color: #33333A; }
@media (max-width: 900px) { .pinned { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------- stacking cards */

.stack { display: grid; gap: 18px; }
.stack-card {
  position: sticky;
  top: 96px;
  border-radius: 18px;
  border: 1px solid rgba(8, 8, 10, .1);
  background: #fff;
  padding: clamp(22px, 3vw, 40px);
  box-shadow: 0 30px 60px -46px rgba(8, 8, 10, .6);
}

/* ----------------------------------------------------------- closing CTA */

.cta-final {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: var(--ink);
  color: #fff;
  padding: clamp(48px, 8vw, 104px) var(--pad);
  text-align: center;
}
.cta-final::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(40rem 22rem at 50% 0%, rgba(242, 227, 74, .22), transparent 65%);
}
.cta-final > * { position: relative; }
.cta-final h2 {
  margin: 0 auto;
  max-width: 20ch;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: .96;
  letter-spacing: -.045em;
  font-weight: 600;
  text-wrap: balance;
}
.cta-final p {
  margin: 22px auto 0;
  max-width: 52ch;
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .74);
}
.cta-final .hero-cta { justify-content: center; }
.cta-final .btn-primary { background: #fff; color: var(--ink); }
.cta-final .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .34); }
.cta-final .btn-secondary:hover { background: #fff; color: var(--ink); }

/* ------------------------------------------------------------- motion in */

/* No entrance state here on purpose.
   Hiding .reveal from the stylesheet meant the motion script had to run before
   first paint or the reader watched content appear and then vanish, which
   chained a purely decorative file to the critical path. motion.js now sets the
   hidden state itself, per element, and only on elements that are not already
   on screen. */

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .hero-h1 em::after { animation: none; transform: scaleX(1); }
  .stack-card { position: static; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Width-axis compensation.

   The previous face was Archivo, a variable font with a width axis, and the
   original layout leaned on it: twenty-one rules and as many inline styles set
   `font-variation-settings: 'wdth' 75-88` to squeeze display type into fixed
   cells. Geist has no width axis, so every one of those declarations is now
   inert and the same strings render 15-25% wider, spilling out of the grids
   that were measured around them.

   Rather than re-add a width axis the typeface does not have, the display
   sizes come down and the tracking tightens until the strings fit again. Every
   value below was set by measuring the overflow, not by eye.
   ========================================================================== */

/* The verdict strip. "DEPENDS" is the widest word the site can print here and
   it decides the column. */
.verdicts { grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); }
.verdict-word {
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -.055em;
  font-weight: 700;
}
.verdicts-dense .verdict-word { font-size: clamp(22px, 2.5vw, 32px); }
.verdicts a { padding-inline: 16px; }

/* Display headings across the site. */
.h-book { font-size: clamp(2.4rem, 5.6vw, 4.6rem); letter-spacing: -.045em; font-weight: 600; }
.h-hub { font-size: clamp(2.2rem, 4.6vw, 3.9rem); letter-spacing: -.045em; font-weight: 600; }
.h-doc { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.04em; font-weight: 600; }
.h-section { font-size: clamp(1.1rem, 1.7vw, 1.45rem); letter-spacing: -.02em; font-weight: 600; }
.h-row { letter-spacing: -.03em; font-weight: 600; }
.take-title { font-size: clamp(21px, 2.5vw, 30px); letter-spacing: -.04em; font-weight: 600; }
.err-number { letter-spacing: -.05em; font-weight: 700; }

/* Cards whose text sat in fixed-width cells. */
.rt-card, .row-book, .reader { min-width: 0; }
.rt-card > *, .row-book > *, .reader > * { min-width: 0; }
.verdict-col .n, .verdict-col .w { overflow-wrap: anywhere; }
.chips span { white-space: nowrap; }

/* Weights: Archivo was set as heavy as 900 in places, which in Geist reads as
   a slab. 600-700 carries the same emphasis at this size. */
.h-hub, .h-doc, .h-book, .lockup, .count, .tag-ink, .tag-hl { font-weight: 600; }

/* The contact page put a fixed 320px sidebar beside a min-content column, and
   at 390px the pair could not fit. */
@media (max-width: 900px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
.doc-grid > * { min-width: 0; }

/* rnkd_cover() writes an inline `width: Npx` so the drawn placeholder matches
   the jacket it stands in for. In a column narrower than N that pixel width
   cannot shrink and pushes the card out. Cap it. */
.cover, .cover-none, .cover-img, .tile img, picture { max-width: 100%; }
.cover-none { width: auto !important; max-width: min(100%, 220px); }

/* Card bodies beside a cover: let the text column collapse rather than
   forcing its intrinsic width onto the grid. */
.rt-card, .rt-card *, .reader-body, .row-book span, .verdict-col { min-width: 0; }
.verdict-col .v { min-width: 0; }

/* Two-column splits.
   These were inline `repeat(auto-fit, minmax(280px, 1fr))` with a 48px gap,
   repeated across four templates. `minmax(280px, ...)` sets a floor the track
   cannot go below, so at container widths just under two columns plus the gap
   the grid overflows its parent. `min(100%, 280px)` lets the floor collapse on
   a narrow container, which is the whole fix. */
.split-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px 48px;
}
.split-2 > * { min-width: 0; }

/* A reader's verdict and their line, on a genre card. */
.verdict-line { display: block; }
.verdict-line b {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  margin-right: 8px;
}
.verdict-line .vw { font-weight: 700; }
.verdict-line .vq {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.45;
  text-wrap: pretty;
}

/* ==========================================================================
   Book page
   ========================================================================== */

.book-hero {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
}
.book-art {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--bg-2);
  display: grid;
  place-items: center;
}
.book-art .blur {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.3) blur(30px) brightness(.9);
  transform: scale(1.3);
}
.book-art .fg {
  position: relative;
  max-width: 78%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 26px 60px -24px rgba(8, 8, 10, .65);
}
.book-art .cover-none { position: relative; }

.book-facts {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 16px;
  font-size: 13.5px;
}
.book-facts dt { color: var(--muted); font-weight: 500; }
.book-facts dd { margin: 0; font-weight: 500; }

/* The verdict board. Replaces the old fixed-column strip, which was measured
   around a condensed face and could not hold the word DEPENDS in Geist. */
.verdict-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 8px;
  margin-top: 26px;
}
.vb-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(8, 8, 10, .1);
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: transform .45s var(--ease-out), border-color .35s var(--ease-out),
              box-shadow .45s var(--ease-out);
}
.vb-cell:hover {
  transform: translateY(-3px);
  border-color: rgba(8, 8, 10, .24);
  box-shadow: 0 18px 34px -22px rgba(8, 8, 10, .5);
}
.vb-who { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.vb-word { font-size: clamp(19px, 2vw, 25px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.vb-cell[data-v="no"] .vb-word { color: var(--against); }
.vb-cell[data-v="yes"] .vb-word { color: var(--recommend); }
.vb-mins { font-size: 11px; color: var(--muted); font-weight: 500; }
.vb-dnf { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--against); }

/* Reading column: the takes themselves. */
.takes { display: grid; gap: clamp(20px, 3vw, 34px); }
.take {
  border: 1px solid rgba(8, 8, 10, .1);
  border-radius: 18px;
  background: #fff;
  padding: clamp(22px, 3vw, 44px);
  scroll-margin-top: 100px;
}
.take header { border-bottom: 1px solid var(--rule-soft); padding-bottom: 16px; margin-bottom: 20px; }
.take-title { margin-top: 0; }
.take .review-body p { font-family: var(--serif); font-size: 17.5px; line-height: 1.62; }
.take .review-body mark { background: var(--highlight); padding: .06em .16em; }

/* The sidebar rail that holds still while the takes scroll past it. */
.book-rail { position: sticky; top: 96px; align-self: start; }
.onthispage {
  display: grid;
  gap: 2px;
  max-height: min(58vh, 520px);
  overflow-y: auto;
  padding-right: 4px;
}
.onthispage a {
  display: block;
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.onthispage a:hover { background: rgba(8, 8, 10, .05); color: var(--ink); }
.onthispage a[data-current="true"] { background: var(--ink); color: #fff; }

@media (max-width: 1000px) {
  .book-hero { grid-template-columns: minmax(0, 1fr); }
  .book-art { max-width: 300px; aspect-ratio: 3 / 4; }
  .book-rail { position: static; }
  .onthispage { max-height: none; }
}

/* ==========================================================================
   Shared list components.
   .row-book appears on /books/, a reader's archive and search; .reader on the
   readers list; .rt-card on the Roundtables hub. Restyling them here upgrades
   all of those pages at once rather than forking a layout per template.
   ========================================================================== */

.rows { display: grid; gap: 10px; }
.rows > li { list-style: none; }
.rows-group {
  border: 0;
  padding: 34px 0 6px;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--muted);
}
.rows-group a { color: var(--ink); }

.row-book {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) minmax(0, auto);
  gap: 20px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid rgba(8, 8, 10, .09);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: transform .45s var(--ease-out), border-color .35s var(--ease-out),
              box-shadow .45s var(--ease-out);
}
.row-book:hover {
  transform: translateY(-3px);
  border-color: rgba(8, 8, 10, .22);
  box-shadow: 0 22px 44px -28px rgba(8, 8, 10, .5);
}
.row-book picture, .row-book .cover, .row-book img { border-radius: 4px; overflow: hidden; }
.row-book img { transition: transform .7s var(--ease-out); }
.row-book:hover img { transform: scale(1.05); }
.row-book .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.row-book .chips span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(8, 8, 10, .055);
  color: var(--muted);
}
.row-book .chips .ink { background: var(--ink); color: #fff; }
.row-book .chips .hl { background: var(--highlight); color: var(--ink); }
.row-book .title { display: block; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -.03em; font-weight: 600; }
.row-book .byline { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.row-book .excerpt {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.45;
  color: #33333A;
}
.row-book .verdict-col {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
  border: 0;
  padding: 0;
  max-width: 260px;
}
.row-book .verdict-col .v {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(8, 8, 10, .05);
  font-size: 11px;
}
.row-book .verdict-col .n { color: var(--muted); font-weight: 500; }
.row-book .verdict-col .w { font-weight: 700; letter-spacing: -.01em; }
.row-book .verdict-col .v-more { align-self: center; font-size: 11px; color: var(--muted); }

@media (max-width: 760px) {
  .row-book { grid-template-columns: 62px minmax(0, 1fr); }
  .row-book .verdict-col { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
}

/* Readers list. */
.reader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 12px;
}
.reader {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(8, 8, 10, .09);
  border-radius: 16px;
  background: #fff;
  list-style: none;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
              border-color .35s var(--ease-out);
}
.reader:hover {
  transform: translateY(-3px);
  border-color: rgba(8, 8, 10, .2);
  box-shadow: 0 22px 44px -28px rgba(8, 8, 10, .5);
}
.reader .avatar { transition: transform .6s var(--ease-out); }
.reader:hover .avatar { transform: scale(1.05); }
.reader-name { font-size: 17px; font-weight: 600; letter-spacing: -.025em; margin: 0; }
.reader-age { color: var(--muted); font-weight: 400; }
.reader-count { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.reader-mail { font-size: 12px; word-break: break-all; }

/* Roundtable cards, stacked by scroll. */
.rt-card {
  display: block;
  padding: 24px;
  border: 1px solid rgba(8, 8, 10, .09);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
              border-color .35s var(--ease-out);
}
.rt-card:hover {
  transform: translateY(-3px);
  border-color: rgba(8, 8, 10, .22);
  box-shadow: 0 22px 44px -28px rgba(8, 8, 10, .5);
}

/* The same .verdict-col holds a reader's name on /books/ and a review title on
   a reader's archive, and those are very different lengths. Let the chip wrap
   rather than sizing the column to whichever string happens to be longest. */
.row-book .verdict-col .v { max-width: 100%; flex-wrap: wrap; }
.row-book .verdict-col .n { overflow-wrap: anywhere; white-space: normal; }
.row-book .verdict-col { flex-direction: column; align-items: flex-end; }
@media (max-width: 760px) {
  .row-book .verdict-col { flex-direction: row; align-items: flex-start; }
}

/* ---------------------------------------------------- roundtable card stack */

.rt-stack { display: grid; gap: 18px; margin-top: 18px; }
.rt-stack-card {
  position: sticky;
  /* Each card settles slightly lower than the one before, so the stack fans
     out instead of hiding every card but the last. */
  top: calc(96px + var(--i) * 12px);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 22px;
  padding: 24px;
  border: 1px solid rgba(8, 8, 10, .1);
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 26px 48px -40px rgba(8, 8, 10, .6);
  transition: border-color .35s var(--ease-out), box-shadow .45s var(--ease-out);
}
.rt-stack-card:hover { border-color: rgba(8, 8, 10, .24); box-shadow: 0 30px 56px -34px rgba(8, 8, 10, .55); }
.rt-cover img, .rt-cover .cover { border-radius: 4px; }
.rt-body { min-width: 0; display: block; }
.rt-title { display: block; margin-top: 9px; font-size: clamp(20px, 2.2vw, 27px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.rt-author { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.rt-words { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.rt-spread { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }

.step-num { font-weight: 700; font-size: 38px; line-height: .9; letter-spacing: -.05em; }

@media (max-width: 640px) {
  .rt-stack-card { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-stack-card { position: static; }
}

.feat-title {
  display: block;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  text-wrap: balance;
}