/* ===========================================================================
   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 */

/* Entrance state. Applied only once the motion script confirms it can run and
   the reader has not asked for reduced motion, so a no-JS page is never left
   with invisible content. */
html.gsap-ready .reveal { opacity: 0; transform: translateY(22px); }

@media (prefers-reduced-motion: reduce) {
  html.gsap-ready .reveal { opacity: 1; transform: none; }
  .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;
}