/* =============================================================================
 TBR BESTIE — design tokens
 -----------------------------------------------------------------------------
 STEP 7 — art direction.

 The direction is EDITORIAL: a printed literary magazine that happens to be a
 website. Warm paper ground, one expressive serif carrying every headline, a
 quiet sans doing the work, hairline rules instead of borders, and almost no
 shadow anywhere. Colour is used sparingly and with intent — a deep burgundy
 for anything that speaks, muted clay/sage/mauve for anything that is merely
 present.

 Three rules this file exists to enforce:
 1. Nothing is a card unless the content is genuinely a discrete object.
 Everything else is separated by whitespace and a hairline.
 2. Radii are small. Paper does not have 22px corners.
 3. Shadows are a whisper or absent. Depth comes from the type, not the box.

 The old zine token NAMES are kept (--cherry, --plum, --butter, --lilac) and
 retuned to literary values, so the 2,400 lines of component CSS written in
 steps 1-6 move with the art direction instead of being rewritten around it.
 ========================================================================== */

:root {
 color-scheme: light;

 /* ---- the ground ------------------------------------------------------ */
 --paper: #fbf7f0; /* the page */
 --paper-2: #f5eee3; /* alternating band */
 --paper-3: #ede3d4; /* deepest band / quiet fill */
 --paper-card: #fffdf9; /* raised paper, barely lighter than the page */

 /* ---- the ink --------------------------------------------------------- */
 --ink: #211c19; /* headlines: 15.4:1 on paper */
 --ink-70: #4e4740; /* body: 8.6:1 */
 --ink-45: #726a61; /* captions: 4.9:1 */
 --ink-25: #a89e91; /* decorative only — never text */

 /* ---- the accents ----------------------------------------------------- */
 --burgundy: #7a2634; /* the one loud colour: 8.5:1 on paper */
 --burgundy-deep: #5d1c27;
 --brick: #a8434c; /* 5.2:1 on paper — safe for text */
 --rose: #c98d8d; /* dusty rose — decorative */
 --blush: #f4e5e1; /* softest fill */
 --clay: #8a6a4d; /* muted brown — 4.9:1 on paper */
 --clay-soft: #e8dccb;
 --sage-ink: #52664f; /* 6.1:1 */
 --gold: #b4893a; /* 4.6:1 — labels only, never body */

 /* ---- hairlines ------------------------------------------------------- */
 --line: #e6dbc9; /* the default rule */
 --line-2: #d3c5ae; /* a rule that needs to be seen */
 --line-3: #b9a88c;

 /* -----------------------------------------------------------------------
 Retuned legacy names. Every one of these was a saturated zine colour in
 steps 1-6; each now points at its literary equivalent, which is how the
 whole app changes palette in one file.
 -------------------------------------------------------------------- */
 --cream: var(--paper);
 --cream-2: var(--paper-2);
 --cream-3: var(--paper-3);
 --white: var(--paper-card);

 --cherry: var(--burgundy); /* now a TEXT-safe deep red */
 --cherry-deep: var(--brick);
 --cherry-ink: var(--burgundy);
 --cherry-soft: var(--blush);

 --plum: #3b2b2f; /* deep coffee-aubergine band */
 --plum-soft: #efe6e4;
 --plum-deep: #2a1e21;

 --butter: #f0e3c2; /* parchment */
 --lilac: #e6dde5; /* muted mauve */
 --sage: #dbe3d5; /* muted sage */

 /* ---- type ------------------------------------------------------------ */
 --font-display: "Fraunces", "Iowan Old Style", "Hoefler Text", Georgia, serif;
 --font-ui: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

 /* Six levels, and only six. Anything that needs a seventh is wrong.
 display hero, once per site
 title the name of a page
 section the name of a section
 sub the name of a block inside a section
 body prose
 label uppercase, letterspaced, tiny */
 --step--2: 0.6875rem;
 --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
 --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
 --step-1: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
 --step-2: clamp(1.375rem, 1.22rem + 0.72vw, 1.8125rem);
 --step-3: clamp(1.75rem, 1.44rem + 1.5vw, 2.75rem);
 --step-4: clamp(2.25rem, 1.72rem + 2.6vw, 3.875rem);
 --step-5: clamp(2.75rem, 1.7rem + 5vw, 5.75rem);

 --label-size: 0.6875rem;
 --label-track: 0.16em;

 /* ---- shape ----------------------------------------------------------- */
 /* Paper does not have 22px corners. */
 --r-sm: 2px;
 --r-md: 3px;
 --r-lg: 4px;
 --r-xl: 6px;
 --r-pill: 999px;

 --bd: 1px solid var(--line-2);
 --bd-thin: 1px solid var(--line);
 --bd-ink: 1px solid var(--ink);

 /* Shadows are a whisper. The old hard offsets are gone; these names are kept
 so nothing has to be hunted down, and they now resolve to almost nothing. */
 --pop-sm: none;
 --pop: 0 1px 2px rgba(33, 28, 25, 0.05);
 --pop-lg: 0 12px 34px -22px rgba(33, 28, 25, 0.4);
 --pop-cherry: none;
 --pop-plum: none;

 /* Covers are the one thing that IS an object, so they get a real shadow. */
 --shadow-cover: 0 1px 1px rgba(33, 28, 25, 0.08), 0 10px 24px -14px rgba(33, 28, 25, 0.45);
 --shadow-cover-lg: 0 2px 2px rgba(33, 28, 25, 0.08), 0 22px 46px -20px rgba(33, 28, 25, 0.45);

 /* ---- rhythm ---------------------------------------------------------- */
 /* Substantially more air than step 6. These are the only vertical values a
 section is allowed to use. */
 --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);
 --space-block: clamp(2.25rem, 1.5rem + 3vw, 4rem);
 --space-head: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);

 --ease: cubic-bezier(0.22, 0.68, 0.28, 1);
 --nav-h: 72px;
 --col: 1200px;
 --col-text: 62ch;
}

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

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

body {
 margin: 0;
 background: var(--paper);
 color: var(--ink-70);
 font-family: var(--font-ui);
 font-size: var(--step-0);
 line-height: 1.65;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 overflow-x: hidden;
}

/* The serif carries every headline. Optical sizing does the rest. */
h1, h2, h3, h4 {
 margin: 0;
 color: var(--ink);
 font-family: var(--font-display);
 font-weight: 500;
 font-variation-settings: "SOFT" 0, "WONK" 0;
 line-height: 1.08;
 letter-spacing: -0.018em;
 text-wrap: balance;
}
h1 { font-weight: 500; }
h3, h4 { line-height: 1.2; letter-spacing: -0.01em; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }

a { color: var(--burgundy); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

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

::selection { background: var(--blush); color: var(--ink); }

/* ---- the page column ---------------------------------------------------- */
.wrap {
 width: 100%;
 max-width: var(--col);
 margin-inline: auto;
 padding-inline: clamp(20px, 4vw, 44px);
}
.wrap--narrow { max-width: 760px; }
.wrap--reading { max-width: 640px; }

.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;
}

.skip-link {
 position: absolute;
 left: 16px;
 top: -64px;
 z-index: 300;
 background: var(--ink);
 color: var(--paper);
 padding: 12px 18px;
 border-radius: var(--r-sm);
 font-weight: 700;
 transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after {
 animation-duration: 0.001ms!important;
 animation-iteration-count: 1!important;
 transition-duration: 0.001ms!important;
 }
}

/* =============================================================================
   TBR BESTIE — components
   Ordered roughly the way the page is built: chrome, home, discovery, quiz,
   result, book, shelf, seo, footer.
   ========================================================================== */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  min-height: 52px;
  border: var(--bd);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--pop-sm);
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease),
    background-color 0.14s var(--ease);
}
.btn:hover {
  text-decoration: none;
  transform: translate(-2px, -2px);
  box-shadow: var(--pop);
}
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

.btn--primary { background: var(--cherry); color: var(--ink); }
/* No colour change on hover: the lift and the shadow are the feedback, and
   every darker cherry drops the label below 4.5:1. */
.btn--plum { background: var(--plum); color: var(--cream); }
.btn--butter { background: var(--butter); }
.btn--lilac { background: var(--lilac); }
.btn--ghost { background: transparent; box-shadow: none; }
.btn--ghost:hover { background: var(--white); box-shadow: var(--pop-sm); }
.btn--sm { padding: 9px 16px; min-height: 42px; font-size: var(--step--1); box-shadow: 2px 2px 0 var(--ink); }
.btn--sm:hover { box-shadow: var(--pop-sm); }
.btn--lg { padding: 18px 32px; min-height: 62px; font-size: var(--step-1); box-shadow: var(--pop); }
.btn--lg:hover { box-shadow: var(--pop-lg); }
.btn--full { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------- shared bits --------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: var(--bd-thin);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tag--butter { background: var(--butter); }
.tag--lilac { background: var(--lilac); }
.tag--sage { background: var(--sage); }
.tag--cherry { background: var(--cherry); color: var(--ink); border-color: var(--ink); }
.tag--plum { background: var(--plum); color: var(--cream); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cherry-ink);
  margin-bottom: 12px;
}

.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--cream2 { background: var(--cream-2); }
.section--plum { background: var(--plum); }
.section--plum h2, .section--plum h3 { color: var(--butter); }
.section--plum p { color: #f0e5f1; }
.section--plum .eyebrow { color: var(--butter); }

.section-head { margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.section-head h2 { font-size: var(--step-3); }
.section-head p {
  margin-top: 12px;
  font-size: var(--step-0);
  color: var(--ink-70);
  max-width: 52ch;
}

.stack { display: grid; gap: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

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

.nav {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--cream);
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--ink); }
.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo__mark {
  width: 32px;
  height: 32px;
  flex: none;
  border: var(--bd);
  border-radius: 9px;
  background: var(--cherry);
  display: grid;
  place-items: center;
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-4deg);
}

.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__links a {
  padding: 9px 14px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
}
.nav__links a:hover { background: var(--cream-3); text-decoration: none; }
.nav__links a[aria-current="page"] { background: var(--butter); border: var(--bd-thin); }

.nav__tools { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.icon-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: var(--bd);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  color: var(--ink);
  position: relative;
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.icon-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--pop-sm); }
.icon-btn__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border: var(--bd-thin);
  border-radius: var(--r-pill);
  background: var(--cherry);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

.nav__burger { display: none; }
.nav__drawer {
  border-top: var(--bd);
  background: var(--cream);
  padding: 12px 20px 22px;
}
.nav__drawer a {
  display: block;
  padding: 15px 6px;
  border-bottom: 1.5px solid var(--line);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
}
.nav__drawer a:hover { text-decoration: none; }

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

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2.5rem, 2rem + 3vw, 4rem);
  overflow: hidden;
}
.hero__inner { position: relative; }
.hero h1 {
  font-size: var(--step-5);
  font-weight: 800;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.hero h1 em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--cherry-deep);
}
.hero__sub {
  margin-top: 20px;
  font-size: var(--step-1);
  color: var(--ink-70);
  max-width: 38ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__note {
  margin-top: 18px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-45);
}

/* A few book spines fanned behind the hero on wide screens. Decorative only. */
.hero__shelf {
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 10px;
  pointer-events: none;
}
.hero__spine {
  width: 54px;
  height: 210px;
  border: var(--bd);
  border-radius: 6px;
  box-shadow: var(--pop-sm);
  display: grid;
  place-items: center;
}
.hero__spine span {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- mood cards ---------------------------------------------------- */

.mood-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.mood {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 18px 22px;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--pop-sm);
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.mood:hover { transform: translate(-3px, -3px); box-shadow: var(--pop); text-decoration: none; }
.mood__emoji { font-size: 1.75rem; line-height: 1; }
.mood__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.mood__line { font-size: 0.875rem; color: var(--ink-70); }

/* Body grey over a saturated ground does not clear AA, so the two loud cards
   set their own text: cream on plum (9.8:1), full ink on cherry (5.2:1). */
.mood--invert .mood__name,
.mood--invert .mood__line { color: var(--cream); }
.mood--bold .mood__line { color: var(--ink); }

/* ---------- book cover ---------------------------------------------------- */

/* Covers are drawn, not fetched: the palette comes from the book's own genre,
   so the shelf reads as one designed set and nothing depends on a remote image
   loading. A real cover image replaces it whenever the record has one. */
.cover {
  position: relative;
  aspect-ratio: 2 / 3;
  border: var(--bd);
  border-radius: 8px;
  overflow: hidden;
  background: var(--cream-3);
  box-shadow: var(--pop-sm);
  flex: none;
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
/* The drawn cover and its typography were removed in STEP 7A. Books show their
   actual published cover now, and the one case that cannot is .cover__none —
   which is deliberately not a cover. */

/* ---------- book card ----------------------------------------------------- */

.book-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--pop-sm);
  height: 100%;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.book-card:hover { transform: translate(-3px, -3px); box-shadow: var(--pop); }
.book-card__link { color: inherit; }
.book-card__link:hover { text-decoration: none; }
.book-card__title {
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.book-card__author { font-size: 0.875rem; font-weight: 600; color: var(--ink-70); margin-top: 3px; }
.book-card__why { font-size: 0.875rem; color: var(--ink-70); }
.book-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* The match pill cannot shrink (it is nowrap), so the row has to be allowed to
   wrap or it pushes the save button out of a two-column mobile grid. */
.book-card__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.match {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 12px;
  border: var(--bd-thin);
  border-radius: var(--r-pill);
  background: var(--butter);
  font-weight: 800;
  font-size: 0.8125rem;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.match--big {
  font-family: var(--font-display);
  font-size: var(--step-2);
  padding: 8px 18px;
  box-shadow: var(--pop-sm);
  border: var(--bd);
}

/* grid of book cards */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.book-grid--wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* horizontal carousel, used on mobile and for BookTok */
.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding: 4px 20px 18px;
  margin-inline: -20px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.carousel > * { scroll-snap-align: start; }

/* ---------- TBR button ---------------------------------------------------- */

.tbr-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  min-height: 42px;
  border: var(--bd-thin);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  transition: background-color 0.14s var(--ease), transform 0.14s var(--ease);
}
.tbr-btn:hover { background: var(--cherry-soft); }
.tbr-btn.is-saved { background: var(--cherry); color: var(--ink); border-color: var(--ink); }

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

.search {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.search__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: var(--bd);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--pop-sm);
}
.search__field:focus-within { box-shadow: var(--pop); }
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 15px 0;
  font-size: var(--step-0);
  font-weight: 600;
  outline: none;
}
.search input::placeholder { color: var(--ink-45); font-weight: 500; }

.suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  border: var(--bd);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--pop);
  overflow: hidden;
  max-height: 340px;
  overflow-y: auto;
}
.suggest button {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.suggest button:last-child { border-bottom: 0; }
.suggest button:hover, .suggest button[aria-selected="true"] { background: var(--butter); }
.suggest .cover { width: 34px; box-shadow: none; border-width: 1.5px; }
.suggest__t { font-weight: 700; color: var(--ink); font-size: 0.9375rem; line-height: 1.2; }
.suggest__a { font-size: 0.8125rem; color: var(--ink-70); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  padding: 7px 14px;
  border: var(--bd-thin);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
}
.chip:hover { background: var(--lilac); }

/* ---------- quiz ---------------------------------------------------------- */

.quiz {
  display: flex;
  flex-direction: column;
  padding-block: 22px 40px;
  /* Tall enough that a question owns the screen, short enough that the footer
     is never pushed into a scroll on a small phone. */
  min-height: min(760px, calc(100dvh - var(--nav-h)));
}

/* ---- intro ---- */

.quiz--intro { justify-content: center; }
.intro { text-align: center; padding-block: clamp(1rem, 4vw, 3rem); }
.intro__badge {
  display: inline-block;
  padding: 7px 16px;
  border: var(--bd);
  border-radius: var(--r-pill);
  background: var(--butter);
  box-shadow: var(--pop-sm);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
  transform: rotate(-1.5deg);
  margin-bottom: 26px;
}
.intro__h {
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin-inline: auto;
}
.intro__p {
  margin: 20px auto 0;
  max-width: 40ch;
  font-size: var(--step-1);
  color: var(--ink-70);
}
.intro__go { margin-top: 32px; }
.intro__small {
  margin-top: 16px;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-45);
}
.intro__small--quiet { margin-top: 6px; font-weight: 600; }

/* ---- progress ---- */

.quiz__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
}
.quiz__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 11px;
  min-height: 42px;
  border: var(--bd-thin);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.14s var(--ease);
}
.quiz__back:hover { background: var(--white); }

.quiz__dots { display: flex; gap: 7px; margin-left: auto; }
.quiz__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
  transition: background-color 0.3s var(--ease);
}
.quiz__dot.is-done { background: var(--cherry); }

.quiz__count {
  font-weight: 800;
  font-size: 0.8125rem;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- question ---- */

.quiz__stage {
  flex: 1;
  /* Centred in whatever height is left, so a four-option question and a
     seven-option one both sit in the middle of the screen rather than one
     hugging the top with a hole beneath it. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: q-in 0.32s var(--ease) both;
}
@keyframes q-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.quiz__q {
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: -0.032em;
  margin-bottom: 8px;
  max-width: 17ch;
}
.quiz__hint {
  color: var(--ink-45);
  font-weight: 600;
  font-size: var(--step--1);
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.answer {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 18px;
  min-height: 74px;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--pop-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink);
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease),
    background-color 0.14s var(--ease);
}
.answer:hover { transform: translate(-3px, -3px); box-shadow: var(--pop); background: var(--cream-2); }
.answer.is-picked { background: var(--cherry); color: var(--ink); box-shadow: var(--pop); }
.answer__emoji { font-size: 1.5rem; line-height: 1; flex: none; }
.answer__label { flex: 1; min-width: 0; }

/* The tick is the non-colour half of the selected state. It holds its space
   whether or not it is filled, so nothing shifts when an answer is chosen. */
.answer__tick {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.answer.is-picked .answer__tick { background: var(--butter); }

.quiz__foot {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- loading ---- */

.checking { text-align: center; padding-block: clamp(3rem, 10vw, 7rem); }
.checking__books { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; }
.checking__book {
  width: 26px;
  height: 62px;
  border: var(--bd);
  border-radius: 4px;
  animation: hop 1s var(--ease) infinite;
}
.checking__book:nth-child(2) { animation-delay: 0.12s; }
.checking__book:nth-child(3) { animation-delay: 0.24s; }
.checking__book:nth-child(4) { animation-delay: 0.36s; }
.checking__h { font-size: var(--step-3); }
.checking__p { margin-top: 10px; }
@keyframes hop {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-14px) rotate(3deg); }
}

/* ---------- result -------------------------------------------------------- */

.result__hi {
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
  margin-bottom: 18px;
  animation: reveal 0.5s var(--ease) both;
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Personality left, the book right — the two things people came for, side by
   side on a wide screen and stacked in that order on a narrow one. */
.result__top {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 1rem + 2vw, 2.25rem);
  align-items: start;
}
.result__section { margin-top: clamp(2.5rem, 5vw, 4rem); margin-bottom: 20px; }

.persona {
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--plum);
  color: var(--cream);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);
  box-shadow: var(--pop-lg);
  animation: reveal 0.5s 0.08s var(--ease) both;
}
.persona__label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--butter);
}
.persona__name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 900;
  color: var(--butter);
  letter-spacing: -0.03em;
  margin: 10px 0 10px;
}
.persona__quip {
  font-size: var(--step-1);
  font-weight: 600;
  color: #f0e5f1; /* 8.4:1 on plum */
  max-width: 40ch;
}
.persona__long {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: #e6d7e8; /* 6.9:1 on plum */
  max-width: 44ch;
}
.persona__scores { display: grid; gap: 12px; margin-top: 26px; }

.score { display: grid; grid-template-columns: 96px minmax(0, 1fr) 50px; gap: 12px; align-items: center; }
.score__k { font-weight: 800; font-size: 0.875rem; color: var(--cream); }
.score__track {
  display: block;
  height: 15px;
  border: 2px solid var(--butter);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}
.score__fill {
  display: block;
  height: 100%;
  background: var(--butter);
  border-radius: var(--r-pill);
  animation: fill 0.8s var(--ease) both;
}
@keyframes fill { from { transform: scaleX(0); transform-origin: left; } to { transform: none; } }
.score__v {
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--butter);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- the hero book ---- */

.hero-book {
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--pop-lg);
  padding: clamp(1.25rem, 1rem + 2vw, 2rem);
  animation: reveal 0.5s 0.16s var(--ease) both;
}
.hero-book__head { margin-bottom: 18px; }
.hero-book__head h2 { font-size: var(--step-2); }

.hero-book__body {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.hero-book__cover { display: block; }
.hero-book__meta h3 { font-size: var(--step-2); margin-top: 12px; letter-spacing: -0.03em; }
.hero-book__author { font-size: var(--step-0); font-weight: 600; color: var(--ink-70); margin-top: 4px; }
.hero-book__meta .book-card__tags { margin-top: 14px; }

.why {
  margin-top: 22px;
  padding: 18px 20px;
  border: var(--bd-thin);
  border-radius: var(--r-md);
  background: var(--butter);
}
.why h4 {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.why__summary { font-weight: 800; color: var(--ink); font-size: var(--step-0); }
.why__line { margin-top: 6px; color: var(--ink); font-weight: 600; }

.reasons { display: grid; gap: 10px; margin-top: 14px; }
.reason {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--ink);
}
.reason--muted { color: var(--ink-70); font-style: italic; }
.reason__dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
}

.hero-book__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* ---------- share card ---------------------------------------------------- */

.share-wrap { display: grid; gap: 16px; justify-items: center; }
.share-card {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--cream);
  box-shadow: var(--pop-lg);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.share-card__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: 0.9375rem;
  color: var(--ink);
}
.share-card__label {
  margin-top: 22px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cherry-ink);
}
.share-card__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--plum);
  line-height: 1.02;
  margin-top: 6px;
}
.share-card__scores { display: grid; gap: 8px; margin-top: 20px; }
.share-card__row { display: grid; grid-template-columns: 78px 1fr 38px; gap: 8px; align-items: center; }
.share-card__row span:first-child { font-size: 0.75rem; font-weight: 800; color: var(--ink); }
.share-card__bar { height: 11px; border: var(--bd-thin); border-radius: var(--r-pill); overflow: hidden; background: var(--white); }
.share-card__bar i { display: block; height: 100%; background: var(--cherry); }
.share-card__row span:last-child { font-size: 0.75rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.share-card__quip {
  margin-top: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--ink);
}
.share-card__url {
  margin-top: 14px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--cherry-ink);
}

/* ---------- book detail --------------------------------------------------- */

.detail {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: start;
}
.detail__cover { position: sticky; top: calc(var(--nav-h) + 20px); }
.detail h1 { font-size: var(--step-4); letter-spacing: -0.035em; }
.detail__author { font-size: var(--step-1); font-weight: 600; color: var(--ink-70); margin-top: 6px; }
.detail__desc { margin-top: 18px; font-size: var(--step-0); max-width: 62ch; }
.detail__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 2px;
  margin-top: 26px;
  border: var(--bd);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink);
}
.fact { background: var(--white); padding: 13px 15px; }
.fact dt {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.fact dd { margin: 3px 0 0; font-weight: 700; color: var(--ink); font-size: 0.9375rem; }

.notice {
  margin-top: 20px;
  padding: 14px 16px;
  border: var(--bd-thin);
  border-left: 6px solid var(--cherry);
  border-radius: var(--r-sm);
  background: var(--cherry-soft);
  font-size: 0.9375rem;
  color: var(--ink);
}
.notice b { display: block; margin-bottom: 3px; }

/* ---------- shelf --------------------------------------------------------- */

.shelf-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.shelf-tab {
  padding: 10px 18px;
  border: var(--bd);
  border-radius: var(--r-pill);
  background: var(--white);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.shelf-tab.is-on { background: var(--plum); color: var(--cream); }

.empty {
  border: 2.5px dashed var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 6vw, 3.5rem);
  text-align: center;
  background: var(--white);
}
.empty h3 { font-size: var(--step-2); margin-bottom: 10px; }
.empty p { max-width: 40ch; margin: 0 auto 22px; }

.shelf-move { display: flex; gap: 6px; flex-wrap: wrap; }
.shelf-move button {
  padding: 5px 10px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: 0.6875rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--ink);
}
.shelf-move button.is-on { background: var(--sage); }

/* ---------- daily pick ---------------------------------------------------- */

.daily {
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--lilac);
  box-shadow: var(--pop-lg);
  padding: clamp(1.5rem, 1rem + 3vw, 2.5rem);
  display: grid;
  gap: 22px;
  align-items: center;
}
.daily--revealed { grid-template-columns: 150px minmax(0, 1fr); }
.daily h2 { font-size: var(--step-3); }
.daily__copy { max-width: 44ch; }

/* ---------- seo pages ----------------------------------------------------- */

.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-2); margin-top: 34px; margin-bottom: 12px; }
.prose p + p { margin-top: 14px; }
.prose ul { display: grid; gap: 10px; margin-top: 14px; }
.prose li { display: flex; gap: 10px; }
.prose li::before { content: "—"; flex: none; color: var(--ink-25); }

.seo-list { display: grid; gap: 18px; margin-top: 30px; }
.seo-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--pop-sm);
}
.seo-item h3 { font-size: var(--step-1); }
.seo-item__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-2);
  color: var(--cherry);
  line-height: 1;
}

.link-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.link-cloud a {
  padding: 9px 16px;
  border: var(--bd-thin);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.875rem;
}
.link-cloud a:hover { background: var(--butter); text-decoration: none; }

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

.footer {
  border-top: var(--bd);
  background: var(--cream-2);
  padding-block: 44px 34px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr));
  gap: 34px;
}
.footer h4 {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 12px;
}
.footer a { display: block; padding: 5px 0; color: var(--ink-70); font-weight: 600; font-size: 0.9375rem; }
.footer a:hover { color: var(--ink); }
.footer__base {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1.5px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--ink-45);
}

/* ---------- toast --------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 300;
  padding: 13px 22px;
  border: var(--bd);
  border-radius: var(--r-pill);
  background: var(--butter);
  color: var(--ink);
  font-weight: 800;
  box-shadow: var(--pop);
  animation: toast-in 0.24s var(--ease) both;
  max-width: calc(100vw - 32px);
  text-align: center;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- 404 ----------------------------------------------------------- */

.four04 { text-align: center; padding-block: clamp(3rem, 10vw, 6rem); }
.four04 h1 { font-size: var(--step-4); margin-bottom: 14px; }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1080px) {
  .hero__shelf { display: none; }
  .mood-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .result__top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav__links, .nav__tools .icon-btn--search { display: none; }
  .nav__burger { display: grid; }
  .top-pick { grid-template-columns: 1fr; }
  .top-pick .cover { max-width: 190px; }
  .detail { grid-template-columns: 1fr; }
  .detail__cover { position: static; max-width: 200px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .mood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mood { padding: 16px 14px 18px; }
  /* One answer per row on a phone: the question keeps the top of the screen and
     the answers are full-width tap targets under it. */
  .answers { grid-template-columns: 1fr; gap: 10px; }
  .answer { min-height: 66px; padding: 15px 16px; font-size: var(--step-0); }
  .quiz__q { font-size: var(--step-3); }
  .quiz__bar { gap: 10px; }
  .quiz__dots { gap: 5px; }
  .quiz__dot { width: 9px; height: 9px; }
  .quiz__count { order: 3; width: 100%; text-align: center; }
  /* On a phone the question belongs at the top of the screen, not floating in
     the middle of it. */
  .quiz__stage { justify-content: flex-start; }
  .quiz { min-height: auto; }
  .hero-book__body { grid-template-columns: 118px minmax(0, 1fr); gap: 14px; }
  .hero-book__actions .btn,
  .hero-book__actions .tbr-btn { width: 100%; }
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .seo-item { grid-template-columns: 66px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .daily--revealed { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
  .score { grid-template-columns: 88px minmax(0, 1fr) 44px; gap: 9px; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .hero__cta .btn { width: 100%; }
}

@media (max-width: 430px) {
  /* Below this the two-column hero squeezes the title column to ~140px, which
     is narrower than the match pill and the longer trope tags. Stack it. */
  .hero-book__body { grid-template-columns: 1fr; }
  .hero-book__cover { max-width: 136px; }
  .hero-book__meta h3 { margin-top: 0; }
  .match--big { font-size: var(--step-1); padding: 7px 14px; }
  .tag { white-space: normal; }
}

@media (max-width: 380px) {
  .book-grid { grid-template-columns: 1fr; }
  .mood-grid { grid-template-columns: 1fr; }
  .shelf-tab { font-size: 0.875rem; padding: 9px 14px; }
}

/* =============================================================================
   STEP 3 — search, similar books, book detail
   ========================================================================== */

/* ---------- skeletons ----------------------------------------------------- */

.sk {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--cream-3) 25%, var(--cream-2) 50%, var(--cream-3) 75%);
  background-size: 240% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
.sk--cover { width: 34px; height: 51px; flex: none; }
.sk--anchor { width: 120px; height: 180px; flex: none; }
.sk--detail { width: 100%; max-width: 260px; aspect-ratio: 2 / 3; }
.sk-lines { display: grid; gap: 10px; flex: 1; min-width: 0; align-content: start; }
.sk--line { height: 15px; width: 100%; }
.sk--short { width: 55%; }
.sk--block { height: 96px; }
.suggest__skeleton { display: flex; gap: 12px; align-items: center; padding: 11px 14px; }
.anchor--skeleton, .detail--skeleton { pointer-events: none; }
.loading-line {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink);
}

.search__spinner {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--cream-3);
  border-top-color: var(--cherry);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.search__hint { margin-top: 12px; font-size: var(--step--1); color: var(--ink-45); font-weight: 600; }

/* ---------- suggestions --------------------------------------------------- */

.suggest__text { display: grid; gap: 2px; min-width: 0; }
.suggest__d {
  font-size: 0.75rem;
  color: var(--ink-45);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.suggest__src {
  margin-left: auto;
  font-size: 0.625rem;
  padding: 3px 8px;
  background: var(--cream-2);
  flex: none;
}
.suggest--message { padding: 18px 20px; }
.suggest--message p { font-size: 0.9375rem; color: var(--ink-70); }
.suggest--message p + p { margin-top: 4px; }
.suggest--message b { color: var(--ink); }

/* ---------- analysing transition ------------------------------------------ */

.analysing {
  text-align: center;
  padding-block: clamp(3rem, 10vw, 6rem);
  display: grid;
  justify-items: center;
  gap: 10px;
}
.analysing__cover {
  width: 150px;
  animation: tilt 1.6s var(--ease) infinite alternate;
  margin-bottom: 14px;
}
@keyframes tilt {
  from { transform: rotate(-3deg) translateY(0); }
  to { transform: rotate(3deg) translateY(-8px); }
}
.analysing__h { font-size: var(--step-3); max-width: 20ch; }

/* ---------- similar results ----------------------------------------------- */

.similar__h { font-size: var(--step-4); letter-spacing: -0.035em; max-width: 20ch; }
.similar__sub { margin-top: 12px; font-size: var(--step-1); color: var(--ink-70); }

.anchor {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 26px;
  padding: 20px;
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--butter);
  box-shadow: var(--pop);
}
.anchor__title { font-size: var(--step-2); margin-top: 4px; }
.anchor__author { font-weight: 600; color: var(--ink-70); margin-top: 3px; }

.rec-list { display: grid; gap: 16px; }
.rec {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 20px;
  padding: 18px;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--pop-sm);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.rec:hover { transform: translate(-3px, -3px); box-shadow: var(--pop); }
.rec__cover { display: block; }
.rec__body { min-width: 0; }
.rec__top { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 10px; }
.rec__title { font-size: var(--step-1); letter-spacing: -0.02em; }
.rec__author { font-size: 0.875rem; font-weight: 600; color: var(--ink-70); margin-top: 2px; }
.rec__reason { margin-top: 10px; font-size: 0.9375rem; color: var(--ink-70); }

.rec__why {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--cherry-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rec__why:hover { color: var(--plum); }

.why-panel {
  margin-top: 12px;
  padding: 14px 16px;
  border: var(--bd-thin);
  border-radius: var(--r-md);
  background: var(--cream-2);
}
.why-panel__k {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 8px;
}
.why-panel__list { display: grid; gap: 5px; margin-bottom: 10px; }
.why-panel__list li { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.why-panel__list span { color: var(--cherry-ink); }
.why-panel__sum { font-size: 0.9375rem; color: var(--ink); }
.why-panel__scored {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--ink-45);
  font-style: italic;
}

.rec__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.muted { color: var(--ink-45); font-size: 0.9375rem; max-width: 44ch; text-align: center; }

/* ---------- book detail additions ----------------------------------------- */

.detail__pub { margin-top: 10px; font-size: 0.9375rem; color: var(--ink-70); font-weight: 600; }
.detail__src { color: var(--ink-45); font-weight: 500; }
.detail__h2 { font-size: var(--step-1); margin-top: 26px; margin-bottom: 12px; }
.detail__desc--none { color: var(--ink-45); font-style: italic; }
.notice--quiet {
  background: var(--cream-2);
  border-left-color: var(--ink-300, var(--line));
  border-left-width: 6px;
  color: var(--ink-70);
}

/* ---------- share picks card ---------------------------------------------- */

.picks-card {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--cream);
  box-shadow: var(--pop-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.picks-card__h {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--plum);
  line-height: 1.02;
}
.picks-card__k {
  margin-top: 16px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cherry-ink);
}
.picks-card__anchor {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 3px;
}
.picks-card__list { margin-top: 8px; display: grid; gap: 6px; }
.picks-card__list li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 7px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--white);
  min-width: 0;
}
.picks-card__list li:nth-child(-n + 3) { background: var(--butter); }
.picks-card__list b {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink);
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.picks-card__list em {
  display: block;
  font-style: normal;
  font-size: 0.6875rem;
  color: var(--ink-70);
}
.picks-card__url {
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--cherry-ink);
}

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 640px) {
  .rec { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .anchor { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .rec__actions .btn, .rec__actions .tbr-btn { flex: 1; }
}

@media (max-width: 430px) {
  .rec { grid-template-columns: 1fr; }
  .rec__cover { max-width: 120px; }
  .anchor { grid-template-columns: 1fr; }
  .anchor .cover { max-width: 120px; }
  .suggest__src { display: none; }
}

/* The eyebrow's cherry sits at 4.3:1 on butter — just under AA. On the two
   butter surfaces it switches to plum, which clears it comfortably. */
.anchor .eyebrow,
.why .eyebrow { color: var(--plum); }

/* =============================================================================
   STEP 4 — the pile, progress, quick modes, the hub
   ========================================================================== */

/* ---------- greeting ------------------------------------------------------ */

.greeting {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 18px;
  background: var(--butter);
  border-bottom: var(--bd);
  font-weight: 700;
  color: var(--ink);
  animation: greet 0.4s var(--ease) both;
}
@keyframes greet {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.greeting__text { font-family: var(--font-display); font-size: 1.0625rem; }
.greeting__cta { color: var(--plum); font-weight: 800; font-size: 0.9375rem; }
.greeting__close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.greeting__close:hover { background: rgba(32, 29, 36, 0.09); }

/* ---------- continue reading ---------------------------------------------- */

.continue { margin-bottom: 34px; }
.continue__h { font-size: var(--step-2); margin-bottom: 16px; }
.continue__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.continue__card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--sage);
  box-shadow: var(--pop-sm);
}
.continue__card h3 { font-size: var(--step-1); }
.continue__card > div > p { font-size: 0.875rem; font-weight: 600; color: var(--ink-70); margin-top: 2px; }
.continue__none { font-size: 0.8125rem !important; color: var(--ink-70); margin-top: 8px !important; }
.continue__card .btn { margin-top: 12px; }

/* ---------- progress ------------------------------------------------------ */

.progress { margin-top: 10px; }
.progress__track {
  height: 14px;
  border: var(--bd);
  border-radius: var(--r-pill);
  background: var(--white);
  overflow: hidden;
}
.progress__fill {
  display: block;
  height: 100%;
  background: var(--cherry);
  border-right: 2px solid var(--ink);
  transition: width 0.6s var(--ease);
}
.progress__label {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ink-70);
  font-variant-numeric: tabular-nums;
}

.page-input { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-input label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-45); }
.page-input input {
  width: 86px;
  padding: 8px 10px;
  border: var(--bd-thin);
  border-radius: var(--r-sm);
  background: var(--white);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.page-input__of { font-size: 0.8125rem; font-weight: 700; color: var(--ink-70); }
.page-input__open {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--cherry-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- reading era --------------------------------------------------- */

.era {
  padding: 22px;
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--lilac);
  box-shadow: var(--pop);
  margin-bottom: 26px;
}
.era__head { margin-bottom: 18px; }
.era h2 { font-size: var(--step-2); }
.era__line {
  margin-top: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--plum);
}
.era__hint { margin-top: 14px; font-size: 0.875rem; color: var(--ink-70); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 10px; }
.stat {
  padding: 14px 12px;
  border: var(--bd-thin);
  border-radius: var(--r-md);
  background: var(--white);
  text-align: center;
}
.stat__v {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.stat__k {
  display: block;
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.stat__hint { display: block; margin-top: 4px; font-size: 0.6875rem; color: var(--ink-45); }

/* ---------- personality panel --------------------------------------------- */

.persona-lite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  padding: 24px;
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--plum);
  color: var(--cream);
  box-shadow: var(--pop);
}
.persona-lite--empty { grid-template-columns: 1fr; }
.persona-lite .eyebrow { color: var(--butter); }
.persona-lite__name {
  font-size: var(--step-2);
  color: var(--butter);
  letter-spacing: -0.03em;
  margin-top: 6px;
}
.persona-lite__quip { margin-top: 10px; color: #f0e5f1; font-weight: 600; max-width: 40ch; }
.persona-lite__k {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--butter);
  margin-bottom: 12px;
}

.vibes { display: grid; gap: 10px; }
.vibe { display: grid; grid-template-columns: 92px minmax(0, 1fr) 46px; gap: 10px; align-items: center; }
.vibe__k { font-size: 0.8125rem; font-weight: 800; color: inherit; }
.vibe__track {
  display: block;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.vibe__fill {
  display: block;
  height: 100%;
  background: currentColor;
  animation: fill 0.8s var(--ease) both;
}
.vibe__v { font-size: 0.8125rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.persona-lite .vibe { color: var(--butter); }

/* ---------- the pile ------------------------------------------------------ */

.pile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.pile {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--pop-sm);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.pile:hover { transform: translate(-2px, -2px); box-shadow: var(--pop); }
.pile__body { min-width: 0; }
.pile__title { font-size: var(--step-1); letter-spacing: -0.02em; }
.pile__author { font-size: 0.875rem; font-weight: 600; color: var(--ink-70); margin-top: 2px; }

.pile__status { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.pile__status button {
  padding: 6px 10px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: 0.6875rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--ink);
  transition: background-color 0.14s var(--ease);
}
.pile__status button:hover { background: var(--cream-2); }
.pile__status button.is-on { background: var(--sage); }

.pile__progress { margin-top: 12px; }
.pile__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.privacy-note {
  margin-top: 32px;
  padding: 14px 16px;
  border: var(--bd-thin);
  border-radius: var(--r-md);
  background: var(--cream-2);
  font-size: 0.875rem;
  color: var(--ink-70);
}

/* ---------- quick modes --------------------------------------------------- */

.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.quick-grid--tight { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.quick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--pop-sm);
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), background-color 0.16s var(--ease);
}
.quick:hover { transform: translate(-3px, -3px); box-shadow: var(--pop); background: var(--cream-2); text-decoration: none; }
.quick.is-on { background: var(--cherry); }
.quick__emoji { font-size: 1.5rem; line-height: 1; }
.quick__label { font-family: var(--font-display); font-size: var(--step-1); font-weight: 800; letter-spacing: -0.02em; }
.quick__line { font-size: 0.8125rem; color: var(--ink-70); }
.quick.is-on .quick__line { color: var(--ink); }

.tonight__step { margin-top: 30px; }
.tonight__q { font-size: var(--step-2); margin-bottom: 14px; }

.dice { font-size: var(--step-2); padding: 22px 40px; }

/* ---------- daily / surprise ---------------------------------------------- */

.daily-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 26px;
  padding: 24px;
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--butter);
  box-shadow: var(--pop-lg);
}
.daily-card h2 { font-size: var(--step-3); margin-top: 12px; }
.daily-card__author { font-weight: 600; color: var(--ink-70); margin-top: 4px; }
.daily-card__desc { margin-top: 14px; color: var(--ink); }
.daily-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.daily-card .why { background: var(--white); }

.surprise-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 460px;
  margin: 26px auto 0;
  padding: 26px;
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--pop-lg);
  animation: pop-in 0.35s var(--ease) both;
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.96) rotate(-1deg); }
  to { opacity: 1; transform: none; }
}
.surprise-card .cover { width: 190px; }
.surprise-card h2 { font-size: var(--step-2); margin-top: 8px; }
.surprise-card__author { font-weight: 600; color: var(--ink-70); }
.surprise-card__desc { font-size: 0.9375rem; color: var(--ink-70); margin-top: 8px; }

/* ---------- hub ----------------------------------------------------------- */

.hub-search { margin-bottom: 44px; }
.hub-section { margin-top: 42px; }
.hub-h { font-size: var(--step-2); margin-bottom: 16px; }

.recent-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 110px;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}
.recent-strip > * { scroll-snap-align: start; }
.recent-strip__item { display: grid; gap: 7px; color: var(--ink); }
.recent-strip__item:hover { text-decoration: none; }
.recent-strip__t {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hub-daily {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 20px;
  padding: 18px;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--butter);
  box-shadow: var(--pop-sm);
}
.hub-daily h3 { font-size: var(--step-1); }
.hub-daily__author { font-weight: 600; color: var(--ink-70); margin-top: 2px; }
.hub-daily__why { margin-top: 10px; font-size: 0.9375rem; color: var(--ink); }

/* ---------- share + compare ------------------------------------------------ */

.share-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.share-note {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--ink-45);
  text-align: center;
  max-width: 42ch;
}

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.compare__side {
  padding: 20px;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--pop-sm);
  color: var(--ink);
}
.compare__who {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.compare__name { font-size: var(--step-1); margin: 6px 0 14px; }
.compare__side .vibe { color: var(--plum); }
.compare__side .vibe__k, .compare__side .vibe__v { color: var(--ink); }
.compare__empty { display: grid; gap: 12px; justify-items: start; }
.compare__verdict {
  margin-top: 20px;
  padding: 22px;
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--sage);
  box-shadow: var(--pop-sm);
  text-align: center;
}
.compare__pct {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 900;
  color: var(--plum);
  letter-spacing: -0.04em;
  line-height: 1;
}
.compare__verdict p:last-child { margin-top: 8px; font-weight: 600; color: var(--ink); }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 860px) {
  .persona-lite { grid-template-columns: 1fr; }
  .daily-card { grid-template-columns: 1fr; }
  .daily-card__cover { max-width: 180px; }
}

@media (max-width: 640px) {
  .pile-grid { grid-template-columns: 1fr; }
  .pile { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .pile__actions .btn { flex: 1; }
  .compare { grid-template-columns: 1fr; }
  .continue__card { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .greeting { font-size: 0.9375rem; padding: 10px 14px; gap: 10px; }
  .greeting__text { font-size: 0.9375rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-daily { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .share-actions .btn { width: 100%; }
}

@media (max-width: 430px) {
  .pile { grid-template-columns: 1fr; }
  .pile__cover { max-width: 110px; }
  .quick-grid { grid-template-columns: 1fr; }
  .dice { width: 100%; }
}

/* =============================================================================
   STEP 5 — personalization
   ========================================================================== */

.hub-head { margin-bottom: 20px; }
.hub-note { margin-top: 8px; font-size: 0.9375rem; color: var(--ink-70); max-width: 60ch; }

/* ---------- recommendation shelves ---------------------------------------- */

.shelf { margin-bottom: 30px; }
.shelf__head { margin-bottom: 14px; }
.shelf__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.shelf__sub { margin-top: 4px; font-size: 0.875rem; color: var(--ink-45); }

/* A responsive web row: it wraps into a grid where there is room and scrolls
   where there is not. No app carousel, no snap-scrolling hijack. */
.shelf__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.rec-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  height: 100%;
  padding: 14px;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--pop-sm);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.rec-card:hover { transform: translate(-3px, -3px); box-shadow: var(--pop); }
.rec-card__cover { display: block; }
.rec-card__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rec-card__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; }
.rec-card__author { font-size: 0.8125rem; font-weight: 600; color: var(--ink-70); }
.rec-card__why { margin-top: 4px; font-size: 0.8125rem; color: var(--ink); font-weight: 600; }
.rec-card__detail { font-size: 0.75rem; color: var(--ink-45); }
.rec-card__actions { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rec-card .match { font-size: 0.6875rem; padding: 3px 9px; }

/* ---------- not my vibe --------------------------------------------------- */

.not-vibe {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-45);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.not-vibe:hover { color: var(--ink); }
.not-vibe--done {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  cursor: default;
  color: var(--ink-70);
  font-weight: 700;
}
.not-vibe--done button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--cherry-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- reading mix --------------------------------------------------- */

.mix-block {
  margin-bottom: 26px;
  padding: 22px;
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--pop-sm);
}
.mix-block__h { font-size: var(--step-2); margin-bottom: 16px; }

.mix__bar {
  display: flex;
  height: 26px;
  border: var(--bd);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--cream-2);
}
.mix__seg { display: block; height: 100%; border-right: 2px solid var(--ink); }
.mix__seg:last-child { border-right: 0; }

.mix__key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.mix__key li { display: flex; align-items: center; gap: 7px; font-size: 0.875rem; }
.mix__dot { width: 12px; height: 12px; border: 1.5px solid var(--ink); border-radius: 4px; flex: none; }
.mix__g { font-weight: 700; color: var(--ink); }
.mix__p { font-weight: 800; color: var(--ink-70); font-variant-numeric: tabular-nums; }
.mix__note { margin-top: 12px; font-size: 0.8125rem; color: var(--ink-45); }

.evolution {
  margin-top: 16px;
  padding: 14px 16px;
  border: var(--bd-thin);
  border-left: 6px solid var(--plum);
  border-radius: var(--r-sm);
  background: var(--lilac);
  font-size: 0.9375rem;
  color: var(--ink);
}
.evolution b { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 1.0625rem; }

/* ---------- pile opinions -------------------------------------------------- */

.opinions {
  margin-bottom: 30px;
  padding: 22px;
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--cream-2);
  box-shadow: var(--pop-sm);
}
.opinions__h { font-size: var(--step-2); }
.opinions__sub { margin: 6px 0 18px; font-weight: 700; color: var(--ink-70); }
.opinions .shelf { margin-bottom: 0; }
.opinions .shelf__head { display: none; }
.opinions .rec-card { background: var(--white); }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 640px) {
  .rec-card { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
  .shelf__row { grid-template-columns: 1fr; }
  .mix__key { gap: 6px 14px; }
  .opinions, .mix-block { padding: 16px; }
}

/* A text-weight control still needs a finger-sized hit area on a touch screen.
   The padding grows the target without changing how the link looks. */
.not-vibe {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-block: 4px;
}

/* =============================================================================
   STEP 6 — sharing
   ========================================================================== */

.share-btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.share-btn__msg {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--cherry-ink);
  min-height: 1em;
}
.rec-card__share {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
}
.rec-card__share:hover { background: var(--butter); }

/* ---------- shared personality landing ------------------------------------ */

.shared-h { font-size: var(--step-3); margin-top: 10px; }
.shared-name { color: var(--plum); }
.shared-quip { margin-top: 12px; font-size: var(--step-1); color: var(--ink-70); }
.shared-card {
  margin: 26px auto;
  max-width: 460px;
  padding: 22px;
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--pop);
  color: var(--plum);
  text-align: left;
}
.shared-card .vibe__k, .shared-card .vibe__v { color: var(--ink); }
.shared-ask { font-size: var(--step-2); margin-top: 30px; }
.shared-sub { margin: 8px 0 20px; color: var(--ink-70); }

.from-bestie {
  margin-bottom: 20px;
  padding: 13px 16px;
  border: var(--bd-thin);
  border-radius: var(--r-md);
  background: var(--butter);
  font-size: 0.9375rem;
  color: var(--ink);
  text-align: center;
}
.from-bestie b { font-family: var(--font-display); }

/* ---------- compare ------------------------------------------------------- */

.compare__wants {
  margin: 6px 0 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--plum);
}
.compare__detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.compare__panel {
  padding: 20px;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--cream-2);
  box-shadow: var(--pop-sm);
  color: var(--plum);
}
.compare__panel h3 { font-size: var(--step-1); color: var(--ink); }
.compare__hint { margin: 6px 0 14px; font-size: 0.8125rem; color: var(--ink-70); }
.compare__panel .vibe__k, .compare__panel .vibe__v { color: var(--ink); }

.diffs { display: grid; gap: 8px; margin-bottom: 14px; }
.diffs li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--white);
}
.diffs__axis { font-weight: 800; color: var(--ink); font-size: 0.875rem; }
.diffs__gap { font-weight: 700; color: var(--ink-70); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.diffs__quote { font-size: 0.9375rem; color: var(--ink); margin-top: 6px; }
.diffs__quote b { color: var(--cherry-ink); }

.verdict {
  margin-top: 20px;
  padding: 20px;
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--sage);
  box-shadow: var(--pop-sm);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  color: var(--ink);
}

.compare-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding: 18px 20px;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--butter);
  box-shadow: var(--pop-sm);
}
.compare-cta b { display: block; font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
.compare-cta p { color: var(--ink); }

/* ---------- bestie landing ------------------------------------------------ */

.bestie { text-align: center; padding-block: clamp(1rem, 4vw, 3rem); }
.bestie__h { font-size: var(--step-4); max-width: 18ch; margin: 10px auto 0; }
.bestie__sub { margin-top: 16px; font-size: var(--step-1); color: var(--ink-70); }
.bestie__cta { margin-top: 28px; }
.bestie__note { margin-top: 16px; font-weight: 600; color: var(--ink-70); }
.bestie__steps {
  display: grid;
  gap: 12px;
  margin: 34px auto 0;
  max-width: 460px;
  text-align: left;
}
.bestie__steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: var(--bd-thin);
  border-radius: var(--r-md);
  background: var(--white);
}
.bestie__n {
  font-family: var(--font-mono, var(--font-ui));
  font-weight: 900;
  color: var(--cherry-ink);
  flex: none;
}
.bestie__privacy {
  margin-top: 26px;
  font-size: 0.875rem;
  color: var(--ink-45);
  max-width: 52ch;
  margin-inline: auto;
}

/* ---------- pile share ---------------------------------------------------- */

.pile-share {
  margin-top: 34px;
  padding: 24px;
  border: var(--bd);
  border-radius: var(--r-xl);
  background: var(--cherry-soft);
  box-shadow: var(--pop);
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
}
.pile-share__h { font-size: var(--step-2); }
.pile-share__sub { margin-top: 6px; color: var(--ink-70); }

.pile-card {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  border: var(--bd);
  border-radius: var(--r-lg);
  background: var(--cream);
  box-shadow: var(--pop-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}
.pile-card__h {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--plum);
  line-height: 1.05;
}
.pile-card__persona { margin-top: 4px; font-size: 0.8125rem; font-weight: 800; color: var(--cherry-ink); }
.pile-card__k {
  margin-top: 14px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cherry-ink);
}
.pile-card__list { display: grid; gap: 5px; margin-top: 6px; }
.pile-card__list li {
  padding: 6px 9px;
  border: 1.5px solid var(--ink);
  border-radius: 9px;
  background: var(--white);
  min-width: 0;
}
.pile-card__list--now li { background: var(--butter); }
.pile-card__list b {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink);
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.pile-card__list em { display: block; font-style: normal; font-size: 0.6875rem; color: var(--ink-70); }
.pile-card__line {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
}
.pile-card__url { margin-top: 10px; font-size: 0.75rem; font-weight: 800; color: var(--cherry-ink); }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 860px) {
  .compare__detail { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .compare-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .share-btn { width: 100%; align-items: center; }
  .share-btn .btn { width: 100%; }
  .rec-card__actions { gap: 6px; }
  .rec-card__share { flex: none; }
  .pile-share { padding: 16px; }
}

/* =============================================================================
   STEP 7 — ART DIRECTION
   -----------------------------------------------------------------------------
   Steps 1-6 built the product. This layer decides what it LOOKS like, and it is
   the last thing in the file on purpose: everything above it is the working
   application, and nothing here changes what any of it does.

   Four moves, in order of how much they matter:

     1. DE-CARD.  A card is a promise that its contents are one discrete object.
        Most of what steps 1-6 put in a bordered, shadowed box is not — it is a
        section of a page. Those lose the box and keep the whitespace.
     2. COVER-FIRST.  The book cover is the only real object on the page, so it
        is the only thing with a shadow, and it is always the largest element in
        its own block.
     3. LABELS AND RULES.  Hierarchy comes from a hairline and a tiny tracked
        uppercase label, not from a coloured pill.
     4. AIR.  Sections breathe on --space-section. Nothing is allowed to be
        cramped in order to fit one more thing above the fold.
   ========================================================================== */

/* ---------- editorial primitives ------------------------------------------ */

/* The tiny tracked label that replaces every coloured eyebrow pill. */
.label,
.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-ui);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-45);
}
.eyebrow--accent, .label--accent { color: var(--burgundy); }

/* "01 / DISCOVER" — editorial numbering. The numeral is set in the serif and
   the word in the sans, which is what makes it read as print rather than UI. */
.enum {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--ink-45);
}
.enum__n {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--burgundy);
}
.enum__slash { color: var(--ink-25); }
.enum__w {
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}

/* A hairline that means "a new thought starts here". */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--strong { background: var(--line-2); }
.rule--short { width: 56px; height: 2px; background: var(--ink); }

/* Pull quote. Used once per page at most — that is the whole point of it. */
.pull {
  margin: var(--space-block) 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--line-2);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 400;
  line-height: 1.32;
  color: var(--ink);
  letter-spacing: -0.015em;
  max-width: 24ch;
}
.pull--wide { max-width: 34ch; }

/* Section rhythm. This is the single biggest visual change in step 7. */
.section { padding-block: var(--space-section); }
.section--cream2 { background: var(--paper-2); }
.section--plum { background: var(--plum); color: #e5dbd6; }
.section--plum h2, .section--plum h3 { color: var(--butter); }
.section--plum p { color: #ded2cc; }
.section--plum .eyebrow, .section--plum .label { color: #c4b3ac; }

.section-head { margin-bottom: var(--space-head); max-width: 42ch; }
.section-head h2 { font-size: var(--step-3); }
.section-head p { margin-top: 16px; color: var(--ink-70); max-width: 46ch; }

/* A head with something (usually a link) on the far right. */
.section-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.section-head--split > div { max-width: 44ch; }
.section-head--split p { margin-top: 10px; }
.more-link {
  flex: none;
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.more-link:hover { text-decoration: none; color: var(--burgundy); border-color: var(--burgundy); }

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

/* Squared off, quiet, and labelled like a caption rather than shouted like an
   app button. Nothing moves on hover any more — the colour does the work. */
.btn {
  gap: 10px;
  padding: 15px 26px;
  min-height: 50px;
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.btn:hover { transform: none; box-shadow: none; background: var(--ink); color: var(--paper); }
.btn:active { transform: none; box-shadow: none; }

.btn--primary { background: var(--burgundy); border-color: var(--burgundy); color: var(--paper); }
.btn--primary:hover { background: var(--burgundy-deep); border-color: var(--burgundy-deep); color: var(--paper); }

.btn--plum { background: var(--plum); border-color: var(--plum); color: var(--paper); }
.btn--plum:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--butter, .btn--lilac { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--butter:hover, .btn--lilac:hover { background: var(--ink); color: var(--paper); }

/* The quiet one: a text link with a rule under it. */
.btn--ghost {
  border-color: transparent;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  padding: 8px 2px;
  min-height: 0;
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover { background: transparent; color: var(--burgundy); border-bottom-color: var(--burgundy); box-shadow: none; }

.btn--sm { padding: 10px 16px; min-height: 40px; font-size: 0.6875rem; letter-spacing: 0.09em; box-shadow: none; }
.btn--sm:hover { box-shadow: none; }
.btn--lg { padding: 19px 34px; min-height: 58px; font-size: 0.875rem; box-shadow: none; }
.btn--lg:hover { box-shadow: none; }
.btn[disabled] { opacity: 0.45; }

/* ---------- tags, chips, matches ------------------------------------------ */

/* Tags stop being coloured pills and become the caption they always were. */
.tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-45);
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.tag--butter, .tag--lilac, .tag--sage { background: none; color: var(--ink-45); }
.tag--cherry, .tag--plum { background: none; color: var(--burgundy); border: 0; }
/* Tags in a row are separated by a middot, the way a magazine credit line is. */
.book-card__tags, .detail__meta-tags { gap: 0 12px; }
/* The middot rides on the END of each tag so it can never wrap to the start
   of the next line on its own. */
.book-card__tags .tag:not(:last-child)::after,
.detail__meta-tags .tag:not(:last-child)::after,
.rec__top .tag:not(:last-child)::after {
  content: " ·";
  color: var(--ink-25);
  letter-spacing: 0;
}

.chip {
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: transparent;
  box-shadow: none;
  padding: 9px 15px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-70);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chip:hover { transform: none; box-shadow: none; border-color: var(--ink); color: var(--ink); text-decoration: none; }

.match {
  border: 0;
  background: none;
  padding: 0;
  color: var(--burgundy);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.match--big { font-size: var(--step--1); letter-spacing: 0.06em; }

/* ---------- the navbar ---------------------------------------------------- */

.nav {
  background: rgba(251, 247, 240, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__inner { height: var(--nav-h); gap: 28px; }

/* The wordmark is the serif, set small and tracked. No sticker, no badge. */
.logo {
  gap: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
}
.logo__mark { display: none; }

.nav__links { gap: 4px; margin-left: 0; }
.nav__links a, .nav__item > a, .nav__item > button {
  padding: 8px 0;
  margin-inline: 12px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-70);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.nav__links a:hover, .nav__item > a:hover, .nav__item > button:hover {
  background: none;
  color: var(--ink);
  text-decoration: none;
  border-bottom-color: var(--ink);
}
.nav__links a[aria-current="page"], .nav__item > a[aria-current="page"] {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
}

/* Discover holds the four quick modes so the bar itself stays at three items. */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item > button { display: inline-flex; align-items: center; gap: 6px; }
.nav__caret { transition: transform 0.2s var(--ease); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  z-index: 140;
  min-width: 290px;
  padding: 10px;
  background: var(--paper-card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 44px -26px rgba(33, 28, 25, 0.5);
  animation: menu-in 0.16s var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.nav__menu a {
  display: block;
  margin: 0;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
}
.nav__menu a:hover { background: var(--paper-2); border: 0; text-decoration: none; }
.nav__menu a span {
  display: block;
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--ink-45);
  margin-top: 1px;
}
.nav__menu-label {
  display: block;
  padding: 8px 14px 6px;
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-25);
}

.nav__tools { gap: 2px; margin-left: auto; }
.icon-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: none;
  color: var(--ink-70);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.icon-btn:hover { transform: none; box-shadow: none; background: var(--paper-3); color: var(--ink); }
.icon-btn__count {
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  border: 0;
  background: var(--burgundy);
  color: var(--paper);
  font-size: 0.625rem;
  font-weight: 700;
}

.nav__drawer { border-top: 1px solid var(--line); background: var(--paper); padding: 8px 0 26px; }
.nav__drawer a {
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: -0.015em;
  padding: 16px 0;
}
.nav__drawer .nav__menu-label { padding: 22px 0 8px; border: 0; }
.nav__drawer a:last-child { border-bottom: 0; }

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

.hero {
  padding-block: clamp(3.5rem, 2rem + 7vw, 7.5rem) clamp(3.5rem, 2rem + 6vw, 7rem);
  border-bottom: 1px solid var(--line);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 6vw, 6rem);
}
.hero h1 {
  font-size: var(--step-5);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 13ch;
}
.hero h1 em {
  font-style: italic;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  color: var(--burgundy);
}
.hero__sub {
  margin-top: 26px;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 36ch;
}
.hero__cta { margin-top: 36px; gap: 14px 22px; align-items: center; }
.hero__note {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  max-width: 30ch;
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* The composition: five covers, fanned, the middle one forward. Decorative —
   every one of them is also a real link to a real book. */
.hero__shelf { position: static; transform: none; display: block; pointer-events: auto; }
.hero-covers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding-block: 26px;
}
.hero-covers__item {
  position: relative;
  display: block;
  transition: transform 0.4s var(--ease);
}
.hero-covers__item .cover { box-shadow: var(--shadow-cover); }
.hero-covers__item:nth-child(1) { z-index: 1; transform: rotate(-7deg) translateY(16px) scale(0.86); }
.hero-covers__item:nth-child(2) { z-index: 2; transform: rotate(-3.5deg) translateY(4px) scale(0.94); }
.hero-covers__item:nth-child(3) { z-index: 4; transform: rotate(0deg) translateY(-14px) scale(1.06); }
.hero-covers__item:nth-child(3) .cover { box-shadow: var(--shadow-cover-lg); }
.hero-covers__item:nth-child(4) { z-index: 3; transform: rotate(3.5deg) translateY(4px) scale(0.94); }
.hero-covers__item:nth-child(5) { z-index: 1; transform: rotate(7deg) translateY(16px) scale(0.86); }
.hero-covers__item:hover { transform: translateY(-22px) rotate(0deg) scale(1.06); z-index: 5; }
.hero-covers__item:hover .cover { box-shadow: var(--shadow-cover-lg); }
.hero-covers__cap {
  margin-top: 22px;
  text-align: center;
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-25);
}

/* ---------- covers -------------------------------------------------------- */

/* The one object on the page that is allowed a real shadow. */
.cover {
  border: 0;
  border-radius: 2px;
  box-shadow: var(--shadow-cover);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
/* A hairline of light down the fore-edge, and a darker spine. Two gradients,
   and a drawn cover stops looking like a coloured rectangle. */
/* Superseded by STEP 7A: this drew a fake page block, which is fine on a
   placeholder and dishonest on a real cover. See .cover--real::after. */
.cover__spine { display: none; }

/* ---------- book cards: cover first, everything else a caption ------------ */

.book-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  gap: 0;
}
.book-card:hover { transform: none; box-shadow: none; }
.book-card__link { display: block; }
.book-card .cover { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.book-card:hover .cover { transform: translateY(-6px); box-shadow: var(--shadow-cover-lg); }
.book-card__title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.book-card:hover .book-card__title { color: var(--burgundy); }
.book-card__author {
  margin-top: 5px;
  font-size: var(--step--1);
  color: var(--ink-45);
}
.book-card__why {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-70);
}
.book-card__tags { margin-top: 10px; }
.book-card__foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* The save control stops being a button-shaped thing inside a card. */
.tbr-btn {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ink-45);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color 0.18s var(--ease);
}
.tbr-btn:hover { transform: none; box-shadow: none; background: none; color: var(--burgundy); }
.tbr-btn.is-saved { background: none; color: var(--burgundy); }

/* ---------- grids and rows ------------------------------------------------ */

.book-grid { gap: clamp(28px, 2vw, 42px) clamp(20px, 2vw, 34px); }
.carousel { gap: clamp(20px, 2vw, 32px); padding-bottom: 8px; }

/* ---------- moods: an index, not eight buttons ---------------------------- */

.mood-grid { gap: 0 clamp(20px, 3vw, 44px); }
.mood {
  padding: 22px 0 24px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  gap: 4px;
  transition: border-color 0.2s var(--ease);
}
.mood:hover { transform: none; box-shadow: none; border-top-color: var(--ink); }
.mood__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  letter-spacing: -0.02em;
  transition: color 0.2s var(--ease);
}
.mood:hover .mood__name { color: var(--burgundy); }
.mood__line { color: var(--ink-45); font-size: var(--step--1); }
.mood--invert .mood__name, .mood--invert .mood__line,
.mood--bold .mood__name, .mood--bold .mood__line { color: inherit; }
.mood--invert .mood__name, .mood--bold .mood__name { color: var(--ink); }
.mood--invert .mood__line, .mood--bold .mood__line { color: var(--ink-45); }
.mood--invert:hover .mood__name, .mood--bold:hover .mood__name { color: var(--burgundy); }

/* ---------- search: a rule, not a box ------------------------------------- */

.search__field {
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 14px 4px;
  transition: border-color 0.2s var(--ease);
}
.search__field:focus-within { transform: none; box-shadow: none; border-bottom-color: var(--burgundy); }
.search__field input::placeholder { color: var(--ink-25); }
.search__hint { color: var(--ink-45); font-size: var(--step--1); }
.suggest {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: 0 22px 48px -30px rgba(33, 28, 25, 0.55);
  background: var(--paper-card);
}
.suggest__a, .suggest__src { color: var(--ink-45); }

/* ---------- quiz ---------------------------------------------------------- */

.intro__badge {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  color: var(--ink-45);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}
.intro__h { font-size: var(--step-4); font-weight: 400; }
.quiz__q { font-size: var(--step-3); font-weight: 400; }
.quiz__hint { color: var(--ink-45); }
.quiz__dot { border: 0; background: var(--line-2); width: 22px; height: 2px; border-radius: 0; }
.quiz__dot.is-done { background: var(--burgundy); }
.quiz__count { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-45); }

/* An answer is a line in a list with a rule under it, not a chunky button. */
.answer {
  padding: 18px 16px 18px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: padding-left 0.22s var(--ease), border-color 0.22s var(--ease);
}
.answer:hover { transform: none; box-shadow: none; padding-left: 14px; border-bottom-color: var(--ink); }
.answer__label { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; letter-spacing: -0.015em; }
.answer.is-picked { background: none; padding-left: 14px; border-bottom-color: var(--burgundy); }
.answer.is-picked .answer__label { color: var(--burgundy); }
.answer__tick { border: 0; background: none; color: var(--burgundy); box-shadow: none; }
.quiz__back { border: 0; background: none; box-shadow: none; color: var(--ink-45); padding: 8px 0; }
.quiz__back:hover { transform: none; box-shadow: none; background: none; color: var(--ink); }

/* ---------- result -------------------------------------------------------- */

.result__hi { font-family: var(--font-display); font-size: var(--step-2); font-style: italic; color: var(--ink-45); font-weight: 400; }
.persona {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.persona__name { font-size: var(--step-4); font-weight: 400; }
.persona__quip { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); font-weight: 400; color: var(--ink); line-height: 1.35; }
.persona__long { color: var(--ink-70); max-width: 56ch; }
.persona__label { color: var(--ink-45); }

.hero-book {
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding-top: var(--space-block);
}
.hero-book__cover .cover { box-shadow: var(--shadow-cover-lg); }
.hero-book__head h2, .hero-book__body h2 { font-size: var(--step-3); font-weight: 400; }

.why-panel, .why { border: 0; border-left: 2px solid var(--line-2); border-radius: 0; background: none; box-shadow: none; padding: 4px 0 4px 22px; }
.reason, .reason--muted { border: 0; background: none; box-shadow: none; padding: 0; color: var(--ink-70); }
.reason__dot { background: var(--burgundy); }

/* Score bars: a hairline track and an ink fill. No rounded lozenges. */
.score__track, .vibe__track, .progress__track, .mix__bar {
  border: 0;
  border-radius: 0;
  background: var(--line);
  box-shadow: none;
  height: 3px;
}
.score__fill, .vibe__fill, .progress__fill { border-radius: 0; background: var(--ink); }
.score__k, .vibe__k, .stat__k, .persona-lite__k { font-size: var(--label-size); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-45); }
.score__v, .vibe__v { font-variant-numeric: tabular-nums; color: var(--ink-45); }

/* ---------- book detail --------------------------------------------------- */

.detail { gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.detail__cover .cover { box-shadow: var(--shadow-cover-lg); }
.detail h1 { font-size: var(--step-4); font-weight: 400; }
.detail__author { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--ink-70); font-weight: 400; }
.detail__desc { font-size: var(--step-0); line-height: 1.72; max-width: 56ch; }
.detail__h2 { font-size: var(--step-2); font-weight: 400; }
.detail__pub, .detail__src { color: var(--ink-45); font-size: var(--step--1); }

/* The facts become a magazine credit block: label above, value below,
   separated by hairlines. */
.facts { gap: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: 1px solid var(--line); }
.fact {
  padding: 16px 18px 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: var(--step--1);
  color: var(--ink-70);
}

/* ---------- shelves, piles, recommendations ------------------------------- */

.shelf__head { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.shelf__title { font-size: var(--step-2); font-weight: 400; }
.shelf__sub { color: var(--ink-45); font-size: var(--step--1); }
.shelf-tab {
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 10px 0;
  margin-right: 26px;
  color: var(--ink-45);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.shelf-tab:hover { transform: none; box-shadow: none; background: none; color: var(--ink); }
.shelf-tab.is-on { background: none; color: var(--ink); border-bottom-color: var(--ink); }
.shelf-tabs { border-bottom: 1px solid var(--line); gap: 0; flex-wrap: wrap; }

.pile, .rec, .rec-card, .continue__card, .daily-card, .surprise-card,
.hub-daily, .compare__panel, .picks-card, .pile-card, .share-card, .shared-card,
.persona-lite, .mix-block, .era, .evolution, .opinions, .stat, .notice,
.greeting, .quick, .seo-item, .compare-cta, .pile-share, .not-vibe, .toast,
.checking, .analysing, .from-bestie, .diffs, .verdict, .bestie__steps {
  box-shadow: none;
}

.pile, .rec, .rec-card {
  padding: 0 0 26px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.pile:hover, .rec:hover, .rec-card:hover { transform: none; box-shadow: none; }
.pile:hover .cover, .rec:hover .cover, .rec-card:hover .cover { box-shadow: var(--shadow-cover-lg); }
.pile__title, .rec__title, .rec-card__title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.012em; }
.pile__author, .rec__author, .rec-card__author { color: var(--ink-45); font-size: var(--step--1); }
.pile__status { font-size: var(--label-size); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-45); }
.rec__why, .rec-card__why, .rec__reason { color: var(--ink-70); }
.rec__why { border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none; padding: 4px 0; }
.rec__why:hover { background: none; border-bottom-color: var(--burgundy); }

/* Quick modes: three lines of an index with a hairline between them. */
.quick {
  padding: 22px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  transition: border-color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.quick:hover { transform: none; box-shadow: none; border-top-color: var(--ink); padding-left: 10px; }
.quick.is-on { background: none; border-top-color: var(--burgundy); padding-left: 10px; }
.quick__label { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; letter-spacing: -0.015em; }
.quick.is-on .quick__label { color: var(--burgundy); }
.quick__line { color: var(--ink-45); font-size: var(--step--1); }

/* Things that ARE discrete objects keep a box — but a paper one. */
.continue__card, .daily-card, .surprise-card, .hub-daily, .compare__panel,
.share-card, .shared-card, .picks-card, .pile-card {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper-card);
}

.stat, .notice, .era, .evolution, .opinions, .mix-block, .persona-lite {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  padding: 22px 0 0;
}
.stat__v { font-family: var(--font-display); font-size: var(--step-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.stat__hint { color: var(--ink-45); }
.stats { gap: clamp(20px, 3vw, 44px); }

.seo-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 20px 0; }
.seo-item:hover { transform: none; box-shadow: none; }
.seo-item__n { font-family: var(--font-display); color: var(--burgundy); font-variant-numeric: tabular-nums; }

.link-cloud { gap: 0 26px; }
.link-cloud a {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ink);
  font-weight: 500;
  font-size: var(--step-0);
}
.link-cloud a:hover { background: none; color: var(--burgundy); border-bottom-color: var(--burgundy); text-decoration: none; }
.section--plum .link-cloud a { color: #ded2cc; border-bottom-color: rgba(255, 255, 255, 0.14); }
.section--plum .link-cloud a:hover { color: var(--butter); border-bottom-color: var(--butter); }

.greeting {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper-2);
  padding-block: 12px;
}
.greeting__text { font-size: var(--step--1); color: var(--ink-70); }

.toast {
  border: 0;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 18px 40px -22px rgba(33, 28, 25, 0.8);
  font-size: var(--step--1);
  font-weight: 500;
}

.not-vibe, .rec-card__share, .greeting__close, .page-input__open {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--ink-45);
  font-size: var(--label-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.not-vibe:hover, .rec-card__share:hover, .greeting__close:hover { transform: none; box-shadow: none; background: none; color: var(--burgundy); }

.empty, .four04 { text-align: center; padding-block: var(--space-section); }
.four04 h1, .empty h3 { font-weight: 400; }

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

.footer {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding-block: var(--space-section) 40px;
}
.footer .logo { font-size: var(--step-2); }
.footer__grid { gap: clamp(2rem, 1rem + 4vw, 5rem); }
.footer h4 {
  font-family: var(--font-ui);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 14px;
}
.footer__grid a { display: block; padding: 6px 0; color: var(--ink-70); font-size: var(--step--1); }
.footer__grid a:hover { color: var(--ink); text-decoration: none; }
.footer__base {
  margin-top: var(--space-block);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-45);
  font-size: 0.75rem;
}

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

/* Nothing bounces. Everything settles. */
.rise { animation: rise 0.5s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.rise--2 { animation-delay: 0.06s; }
.rise--3 { animation-delay: 0.12s; }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1023px) {
  .hero__inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero h1 { max-width: 16ch; }
  .hero-covers { max-width: 520px; }
  .nav__links { display: none; }
  .nav__burger { display: grid; }
}

@media (max-width: 768px) {
  .mood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .hero-covers { grid-template-columns: repeat(3, 1fr); }
  .hero-covers__item:nth-child(4), .hero-covers__item:nth-child(5) { display: none; }
  .mood-grid { grid-template-columns: 1fr; }
  .btn { font-size: 0.75rem; letter-spacing: 0.08em; padding: 14px 20px; }
  .btn--lg { font-size: 0.8125rem; padding: 17px 24px; min-height: 54px; }
  .section-head--split { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- home: the editorial layout ------------------------------------ */

.home-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 5vw, 5.5rem);
  align-items: start;
}
.home-search h2 { font-size: var(--step-3); font-weight: 400; }
.home-search .pull { margin-block: 26px 0; }

.daily {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding-top: var(--space-block);
}
.daily:not(.daily--revealed) { grid-template-columns: minmax(0, 1fr); }
.daily .cover { box-shadow: var(--shadow-cover-lg); }
.daily__copy h2 { font-size: var(--step-3); font-weight: 400; }
.daily__author {
  margin-top: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ink-70);
}

@media (max-width: 860px) {
  .home-search { grid-template-columns: 1fr; }
  .daily { grid-template-columns: 150px minmax(0, 1fr); gap: 1.75rem; }
}
@media (max-width: 560px) {
  .daily { grid-template-columns: minmax(0, 1fr); }
  .daily > a { max-width: 150px; }
}

/* ---------- step 7: covers, composition, mood index ----------------------- */


/* The hero composition. Five covers, overlapping, the middle one forward.
   Negative tracking on the grid is what makes them a stack rather than a row. */
.hero-covers {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  max-width: 480px;
  margin-inline: auto;
  padding-block: 34px 10px;
}
.hero-covers__item:nth-child(1) { margin-right: -26%; transform: rotate(-8deg) translateY(22px) scale(0.9); }
.hero-covers__item:nth-child(2) { margin-inline: -13%; transform: rotate(-4deg) translateY(7px) scale(0.98); }
.hero-covers__item:nth-child(3) { margin-inline: -13%; transform: rotate(0deg) translateY(-16px) scale(1.16); }
.hero-covers__item:nth-child(4) { margin-inline: -13%; transform: rotate(4deg) translateY(7px) scale(0.98); }
.hero-covers__item:nth-child(5) { margin-left: -26%; transform: rotate(8deg) translateY(22px) scale(0.9); }
.hero-covers__item:hover { transform: translateY(-26px) rotate(0deg) scale(1.18); }
.hero-covers__cap { color: var(--ink-45); margin-top: 30px; }

/* Moods, as an index. The accent survives only as a 2px mark. */
.mood { position: relative; padding-top: 26px; }
.mood__mark {
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 2px;
  transition: width 0.28s var(--ease);
}
.mood:hover .mood__mark { width: 100%; }

/* The homepage shelf runs six across; the grid falls to three, then two. */
.book-grid--six {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(24px, 2vw, 34px);
}
@media (max-width: 1023px) { .book-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .book-grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- step 7: corrections after the first look ---------------------- */

/* The composition was overlapping so hard that four of the five covers were
   only edges. Less overlap, larger stack, gentler fan. */
.hero-covers { max-width: 560px; padding-block: 26px 6px; }
.hero-covers__item:nth-child(1) { margin-right: -14%; transform: rotate(-6deg) translateY(20px) scale(0.9); }
.hero-covers__item:nth-child(2) { margin-inline: -7%; transform: rotate(-3deg) translateY(6px) scale(0.98); }
.hero-covers__item:nth-child(3) { margin-inline: -7%; transform: rotate(0deg) translateY(-14px) scale(1.12); }
.hero-covers__item:nth-child(4) { margin-inline: -7%; transform: rotate(3deg) translateY(6px) scale(0.98); }
.hero-covers__item:nth-child(5) { margin-left: -14%; transform: rotate(6deg) translateY(20px) scale(0.9); }
.hero-covers__item:hover { transform: translateY(-24px) rotate(0deg) scale(1.14); }

/* The mood mark now carries a real tone, so the index reads as eight distinct
   entries without eight coloured tiles. */
.mood__mark { height: 2px; }

/* The dark band has its own contrast rules: burgundy is invisible on it. */
.section--plum .enum { color: #c4b3ac; }
.section--plum .enum__n { color: var(--butter); }
.section--plum .enum__slash { color: #7d6a63; }
.section--plum .more-link { color: var(--butter); border-color: var(--butter); }
.section--plum a { color: var(--butter); }

/* Two stacked rules under the hero CTA read as a mistake. The note keeps the
   air and loses the line. */
.hero__note { border-top: 0; padding-top: 0; margin-top: 34px; max-width: 46ch; }

/* Section 02: the field lines up with the headline, not with the label. */
.home-search > div:last-child { padding-top: clamp(0px, 2vw, 46px); }

/* ---------- step 7: discovery surfaces ------------------------------------ */

/* Shelf cards go vertical, so the cover leads the way it does everywhere else.
   The horizontal card from step 5 squeezed a 92px cover next to five lines of
   type and read as a settings row. */
.shelf { margin-bottom: var(--space-block); }
.shelf__head { margin-bottom: 22px; }
.shelf__row { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(24px, 2vw, 36px); }

.rec-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.rec-card__cover { display: block; margin-bottom: 16px; }
.rec-card__body { gap: 0; }
.rec-card .match { display: block; margin-bottom: 7px; }
.rec-card__title { font-size: var(--step-0); font-weight: 500; letter-spacing: -0.01em; line-height: 1.22; }
.rec-card__author { margin-top: 4px; font-size: var(--step--1); font-weight: 400; color: var(--ink-45); }
.rec-card__why { margin-top: 11px; font-size: var(--step--1); font-weight: 400; color: var(--ink-70); line-height: 1.5; }
.rec-card__detail { margin-top: 5px; font-size: 0.75rem; color: var(--ink-45); }
.rec-card__actions { padding-top: 16px; gap: 16px; }

/* Hub sections get real separation and an editorial heading. */
.hub-search { margin-bottom: var(--space-section); }
.hub-section { margin-top: var(--space-section); }
.hub-h {
  font-size: var(--step-3);
  font-weight: 400;
  margin-bottom: 0;
}
.hub-head { margin-bottom: var(--space-head); max-width: 46ch; }
.hub-note { margin-top: 14px; color: var(--ink-70); }
.hub-section > .hub-h { margin-bottom: var(--space-head); }

.hub-daily {
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 46px);
  padding: var(--space-block) 0 0;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  align-items: center;
}
.hub-daily h3 { font-size: var(--step-2); font-weight: 400; }
.hub-daily__author { margin-top: 8px; font-family: var(--font-display); font-style: italic; font-size: var(--step-1); font-weight: 400; color: var(--ink-70); }
.hub-daily__why { margin-top: 16px; color: var(--ink-70); max-width: 52ch; }

.quick-grid { gap: 0 clamp(20px, 3vw, 44px); }
.recent-strip { grid-auto-columns: 132px; gap: 22px; }
.recent-strip__t { font-weight: 500; font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: -0.005em; }

.hub-search h1 { font-weight: 400; }
.hub-search .chips { margin-top: 22px; }
.analysing__h { font-weight: 400; }

@media (max-width: 560px) {
  .hub-daily { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
}

/* ---------- step 7: book detail ------------------------------------------- */

/* The facts grid used a 1px ink gap to draw its own borders; on paper that
   reads as a black bar. Hairlines do the same job without the ink. */
.facts {
  margin-top: var(--space-block);
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  overflow: visible;
}
.fact dt {
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  color: var(--ink-45);
}
.fact dd { margin-top: 7px; font-weight: 400; font-size: var(--step-0); color: var(--ink); }

.detail__actions { gap: 14px 24px; margin-top: 30px; align-items: center; }
.detail__desc { margin-top: 26px; }

.notice {
  margin-top: 24px;
  padding: 0 0 0 20px;
  border: 0;
  border-left: 2px solid var(--rose);
  border-radius: 0;
  background: none;
  color: var(--ink-70);
  font-size: var(--step--1);
}
.notice b { color: var(--ink); font-weight: 600; }

/* The ranked "books like this" list: a real editorial list, cover left. */
.rec {
  grid-template-columns: 128px minmax(0, 1fr);
  gap: clamp(22px, 2vw, 38px);
  padding: 0 0 30px;
  align-items: start;
}
.rec__top { gap: 8px 16px; margin-bottom: 12px; }
.rec__title { font-size: var(--step-2); font-weight: 400; }
.rec__author { margin-top: 6px; font-family: var(--font-display); font-style: italic; font-size: var(--step-0); font-weight: 400; color: var(--ink-70); }
.rec__reason { margin-top: 14px; max-width: 58ch; }
.rec__actions { margin-top: 20px; gap: 14px 22px; align-items: center; }
.rec-list { display: grid; gap: 30px; }
.similar__h { font-weight: 400; }
.similar__sub { color: var(--ink-70); }

.anchor { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }
.anchor__title { font-weight: 400; }

@media (max-width: 560px) {
  .rec { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; }
}

/* ---------- step 7: the Books index --------------------------------------- */

/* A browse page's job is to show covers. 92px was a thumbnail; 140px is a book. */
.seo-list { gap: 0; margin-top: var(--space-head); }
.seo-item {
  grid-template-columns: 140px minmax(0, 1fr);
  gap: clamp(24px, 2.5vw, 44px);
  padding: 34px 0;
  align-items: start;
}
.seo-item:first-child { border-top: 1px solid var(--line); }
.seo-item h3 { font-size: var(--step-2); font-weight: 400; }
.seo-item h3 + p, .seo-item > div > p:nth-of-type(1) {
  margin-top: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
  font-weight: 400 !important;
  color: var(--ink-70);
}
.seo-item .cover { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.seo-item:hover .cover { transform: translateY(-4px); box-shadow: var(--shadow-cover-lg); }
.seo-item__n { font-size: var(--step-2); font-weight: 400; }

@media (max-width: 560px) {
  .seo-item { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 24px 0; }
}

/* ---------- step 7: empty states ------------------------------------------ */

/* A dashed box is an upload target. An empty shelf is a page with nothing on
   it yet, and it should look like one. */
.empty {
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: var(--space-block) 0 0;
  text-align: left;
}
.empty h3 { font-size: var(--step-3); font-weight: 400; }
.empty p { margin-top: 14px; color: var(--ink-70); max-width: 40ch; }
.empty .row, .empty > div { margin-top: 30px; justify-content: flex-start; }

.four04 h1 { font-size: var(--step-4); }

/* ---------- step 7: the result page --------------------------------------- */

/* The personality panel lost its plum ground in this pass, so the butter type
   it was written for became unreadable on paper. Everything here is re-set
   against the paper it now sits on. */
.persona { color: var(--ink-70); }
.persona__label { color: var(--ink-45); font-size: var(--label-size); letter-spacing: var(--label-track); }
.persona__name { color: var(--ink); font-size: var(--step-3); font-weight: 400; margin-top: 4px; }
.persona__quip { color: var(--ink); }
.persona__long { color: var(--ink-70); }
.persona__scores { margin-top: var(--space-block); }

.hero-book__head { margin-bottom: 26px; }
.hero-book__body { grid-template-columns: 190px minmax(0, 1fr); gap: clamp(24px, 2.5vw, 40px); }
.hero-book__meta h3 { font-size: var(--step-2); font-weight: 400; margin-top: 0; letter-spacing: -0.018em; }
.hero-book__author { margin-top: 7px; font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ink-70); }
.hero-book__actions { margin-top: 26px; gap: 14px 22px; align-items: center; }

.why { margin-top: 26px; }
.why__summary { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; color: var(--ink); line-height: 1.4; }
.why__line { color: var(--ink-70); }

.result__section { margin-top: var(--space-section); }
.result__top { gap: clamp(2.5rem, 1.5rem + 5vw, 5.5rem); }
.result__hi { margin-bottom: 6px; }

.share-card, .picks-card, .pile-card, .shared-card { padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.share-card__name, .picks-card__h, .pile-card__h { font-weight: 400; }
.share-card__label, .picks-card__k, .pile-card__k, .share-card__brand, .picks-card__url, .pile-card__url {
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-45);
}
.share-card__quip { font-family: var(--font-display); font-style: italic; color: var(--ink-70); }
.share-card__bar { background: var(--line); border: 0; border-radius: 0; height: 4px; }
.share-card__bar > * { background: var(--burgundy); border-radius: 0; }

@media (max-width: 640px) {
  .hero-book__body { grid-template-columns: 130px minmax(0, 1fr); gap: 20px; }
}

/* ---------- step 7: the shelf page ---------------------------------------- */

/* Same fix as the result page: this panel used to sit on plum. */
.persona-lite { color: var(--ink-70); align-items: start; gap: clamp(24px, 3vw, 56px); }
.persona-lite .eyebrow, .persona-lite .label { color: var(--ink-45); }
.persona-lite__name { color: var(--ink); font-size: var(--step-2); font-weight: 400; letter-spacing: -0.018em; }
.persona-lite__quip {
  margin-top: 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  font-weight: 400;
  max-width: 34ch;
}
.persona-lite .btn { margin-top: 22px; }

/* Shelf-move is three states, not three buttons. */
.shelf-move { gap: 0 18px; }
.shelf-move button {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--ink-45);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shelf-move button:hover { color: var(--ink); }
.shelf-move button.is-on { background: none; color: var(--ink); border-bottom-color: var(--ink); }

.pile-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(26px, 2.5vw, 44px); }
.pile { grid-template-columns: 104px minmax(0, 1fr); gap: 22px; align-items: start; }
.pile__title { font-size: var(--step-1); }
.pile__actions { margin-top: 16px; gap: 14px 20px; }
.pile__body > .row, .pile__body .shelf-move { margin-top: 14px; }

.privacy-note {
  margin-top: var(--space-block);
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font-size: var(--step--1);
  color: var(--ink-45);
}

.opinions { margin-bottom: var(--space-block); }
.opinions__h { font-size: var(--step-3); font-weight: 400; }
.opinions__sub { margin-top: 10px; color: var(--ink-45); font-weight: 400; }
.era__head h2, .mix-block__h { font-size: var(--step-3); font-weight: 400; }
.era__line { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--ink); font-weight: 400; }
.era__hint, .mix__note { color: var(--ink-45); font-size: var(--step--1); }
.continue__h { font-size: var(--step-3); font-weight: 400; }
.pile-share__h { font-size: var(--step-3); font-weight: 400; }
.pile-share__sub { color: var(--ink-70); }

/* ---------- step 7: overrides of step 4/5 leftovers ----------------------- */

/* Three rules from earlier steps out-specify the art direction. They are
   neutralised here rather than deleted, so the diff stays legible. */
.opinions .rec-card { background: none; }
.opinions, .mix-block { padding: 22px 0 0; }

@media (max-width: 640px) {
  /* The step-4 rule reverted the shelf card to the horizontal layout. */
  .rec-card { display: flex; grid-template-columns: none; }
  .opinions, .mix-block { padding: 22px 0 0; }
}

/* ---------- step 7: last passes ------------------------------------------- */

/* The separator is decorative but it is still rendered text, so it clears AA
   rather than relying on an exemption. */
.enum__slash { color: var(--ink-45); }
.section--plum .enum__slash { color: #a89689; }

/* The three steps on /bestie are a numbered list, not three cards. */
.bestie__steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.bestie__n {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--burgundy);
  font-variant-numeric: tabular-nums;
}
.bestie__steps > * {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 20px 0;
  text-align: left;
}
.bestie__h { font-weight: 400; }
.bestie__sub { color: var(--ink-70); }
.bestie__privacy, .bestie__note { color: var(--ink-45); font-size: var(--step--1); }

/* Compare and its panels. */
.compare__panel { padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.compare__name, .compare__who { font-weight: 400; }
.compare__pct { font-family: var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums; }
.compare__verdict { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ink); }
.diffs, .verdict, .from-bestie, .shared-ask, .compare-cta {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  padding: 22px 0 0;
}
.diffs__quote { font-family: var(--font-display); font-style: italic; color: var(--ink); }
.shared-h, .shared-name { font-weight: 400; }
.shared-quip { font-family: var(--font-display); font-style: italic; color: var(--ink); }
.tonight__q { font-size: var(--step-3); font-weight: 400; }
.tonight__step { color: var(--ink-45); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; }
.daily-card, .surprise-card { padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.daily-card__author, .surprise-card__author { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ink-70); }
.dice { font-size: var(--step-3); }

/* Touch targets. The card title and the section "more" link are text-weight
   controls; a transparent pseudo-element grows the hit area to 44px without
   moving anything on the page. */
@media (pointer: coarse) {
  .book-card__link, .more-link, .seo-item a, .rec-card__title, .pile__title {
    position: relative;
  }
  .book-card__link::after, .more-link::after, .seo-item a::after {
    content: "";
    position: absolute;
    inset: -12px -8px;
  }
}

/* ---------- step 7: final polish ------------------------------------------ */

/* Tag credit lines get the middot everywhere they appear, not just on cards. */
.rec__top { gap: 8px 14px; }
.rec__top .match { margin-right: 4px; }

/* The list numeral sits above its cover as a folio, not on top of it. */
.seo-item > div:first-child { display: grid; gap: 12px; justify-items: start; }
.seo-item__n { line-height: 1; color: var(--clay); }
.seo-item:hover .seo-item__n { color: var(--burgundy); }
/* Inline links collapse to the text box; these wrap block content. */
.seo-item a { display: block; }
.seo-item .book-card__tags a, .seo-item .row a { display: inline-flex; }

/* The list title link wraps only its heading, so the heading carries the
   padding and gives the height back with a matching negative margin — the
   target grows to 44px without moving a pixel of the layout. */
.seo-item h2, .seo-item h3 { padding-block: 12px; margin-block: -12px; }
.seo-item > div:last-child > a:first-child { display: block; }

/* =============================================================================
   STEP 7A — REAL COVERS
   -----------------------------------------------------------------------------
   The cover is the artwork. Everything here is the box around it: a fixed 2:3
   ratio so the page never jumps, object-fit so nothing stretches, and the small
   shadow that makes a book read as a physical object.

   Nothing in this block paints ON the artwork. No gradient wash, no colour
   overlay, no glass. The one visual flourish — the fore-edge and spine hint —
   applies only to the honest placeholder, never to a real cover, because
   faking a page block on someone's actual cover art is exactly the synthetic
   look this step exists to remove.
   ========================================================================== */

.cover {
  position: relative;
  aspect-ratio: 2 / 3;
  width: 100%;
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: var(--shadow-cover);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.26s var(--ease);
}
.cover img.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cover img { opacity: 1; } }

/* A real cover gets the paper edge and nothing else: a hairline of shadow down
   the binding side, which is what a photographed book actually has. */
.cover--real::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0.05) 3px, transparent 9px);
  mix-blend-mode: multiply;
}
/* The step-7 two-gradient treatment was for drawn covers. It must not sit on
   real artwork. */
.cover--real .cover__spine { display: none; }

/* ---- resolving ----------------------------------------------------------- */

.cover--wait { background: var(--paper-3); }
.cover__wait {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--paper-3) 30%, var(--paper-2) 50%, var(--paper-3) 70%);
  background-size: 250% 100%;
  animation: cover-wait 1.5s var(--ease) infinite;
}
@keyframes cover-wait { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .cover__wait { animation: none; } }

/* ---- unavailable --------------------------------------------------------- */

/* Deliberately NOT a book cover. No decorative artwork, no invented palette,
   no spine — a reader should be able to tell at a glance that this is the site
   admitting it could not get the real thing. */
.cover__none {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12% 11%;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: inherit;
  text-align: left;
  container-type: inline-size;
}
.cover__none-t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.62rem, 0.3rem + 6cqw, 1.15rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cover__none-a {
  font-size: clamp(0.44rem, 0.24rem + 2.6cqw, 0.8125rem);
  color: var(--ink-70);
}
.cover__none-k {
  margin-top: auto;
  padding-top: 10%;
  font-size: clamp(0.4rem, 0.2rem + 2.1cqw, 0.625rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* ---- sizing -------------------------------------------------------------- */

/* Every place a cover appears, it appears at a size a reader can recognise the
   book from. These are the only cover widths in the site. */
.book-card .cover, .rec-card__cover .cover { width: 100%; }
.hero-covers__item .cover { width: 100%; }
.detail__cover .cover { max-width: 300px; }
.hero-book__cover .cover, .rec__cover .cover { width: 100%; }

@media (max-width: 560px) {
  /* Two columns on a phone, not four thumbnails. */
  .book-grid--six, .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================================
   STEP 7B — THE BOOKS ARE THE PAGE
   -----------------------------------------------------------------------------
   Step 7A got real covers onto every shelf. This layer makes them the content
   rather than images inside UI.

   The rule everything below follows: on a shelf, the ONLY thing with visual
   weight is the artwork. Title, author, match and reason are a caption — one
   serif line and three quiet ones — and the save control is a text link, not a
   button. No box holds any of it together; the grid gap does that.
   ========================================================================== */

/* ---------- the card that is not a card ----------------------------------- */

.book-card {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.book-card .cover { margin-bottom: 16px; }
.book-card:hover .cover { transform: translateY(-5px); box-shadow: var(--shadow-cover-lg); }

.book-card__name { display: block; }
.book-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.008em;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.book-card:hover .book-card__title { color: var(--burgundy); }
.book-card__author {
  margin-top: 4px;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-45);
}

/* Personalisation is real, so it is shown — at label size, under the author,
   where it informs without competing. */
.book-card__match {
  margin-top: 9px;
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-variant-numeric: tabular-nums;
}
.book-card__why {
  margin-top: 8px;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-70);
  max-width: 34ch;
}
.book-card__note {
  margin-top: 8px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-45);
}
.book-card__note strong { color: var(--ink-70); font-weight: 600; }

/* The save control: a text link that sits under the caption. No border, no
   fill, no box — and always in the DOM, so touch and keyboard reach it without
   a hover. */
.book-card .tbr-btn {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--ink-45);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.book-card .tbr-btn:hover { color: var(--burgundy); background: none; }
.book-card .tbr-btn.is-saved { color: var(--burgundy); }

/* The trope row is gone from the shelf card. It still appears on the book page
   and on the reading lists, where there is room to read it. */
.book-card .book-card__tags, .book-card .book-card__foot { display: none; }

/* ---------- shelves: a row of books, not a row of panels ------------------ */

.shelf__row {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: clamp(26px, 2.4vw, 44px) clamp(18px, 1.8vw, 30px);
}
.rec-card {
  display: block;
  padding: 0;
  border: 0;
  border-bottom: 0;
  background: none;
  box-shadow: none;
}
.rec-card__cover { display: block; margin-bottom: 16px; }
.rec-card:hover .cover { transform: translateY(-5px); box-shadow: var(--shadow-cover-lg); }
.rec-card__body { display: block; }
.rec-card__title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.008em;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.rec-card:hover .rec-card__title { color: var(--burgundy); }
.rec-card__author { margin-top: 4px; font-size: var(--step--1); font-weight: 400; color: var(--ink-45); }
.rec-card .match { display: block; margin-top: 9px; }
.rec-card__why {
  margin-top: 8px;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-70);
}
.rec-card__actions {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
  gap: 14px;
  align-items: center;
}
.rec-card__actions .tbr-btn, .rec-card__share, .not-vibe {
  font-size: var(--label-size);
  letter-spacing: 0.09em;
}
/* Two secondary controls on a 170px caption is one too many. Share moves to
   the book page, where it already lives. */
.rec-card__share { display: none; }

.shelf__head { margin-bottom: 26px; padding-bottom: 14px; }
.shelf__title { font-size: var(--step-1); font-weight: 400; }
.shelf__sub { margin-top: 6px; }

/* ---------- book grids ----------------------------------------------------- */

.book-grid, .book-grid--six {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: clamp(30px, 2.6vw, 50px) clamp(18px, 1.8vw, 30px);
}
.book-grid--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---------- the reading-list index keeps its tags, and gets a bigger book -- */

.seo-item { grid-template-columns: 150px minmax(0, 1fr); }
.seo-item .book-card__tags { display: flex; }

/* ---------- the pile: a shelf of books, not a table of rows --------------- */

.pile-grid {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: clamp(34px, 3vw, 54px) clamp(18px, 1.8vw, 30px);
}
.pile {
  display: block;
  grid-template-columns: none;
  padding: 0;
  border: 0;
  background: none;
}
.pile__cover { display: block; margin-bottom: 16px; }
.pile:hover .cover { transform: translateY(-5px); box-shadow: var(--shadow-cover-lg); }
.pile__title { font-size: var(--step-0); font-weight: 400; line-height: 1.24; }
.pile__author { margin-top: 4px; font-weight: 400; font-size: var(--step--1); color: var(--ink-45); }
.pile__status { margin-top: 12px; }
.pile__progress { margin-top: 12px; }
.pile__actions { margin-top: 12px; gap: 14px; }
.pile__actions .btn {
  padding: 0;
  min-height: 0;
  border: 0;
  background: none;
  color: var(--ink-45);
  font-size: var(--label-size);
  letter-spacing: 0.09em;
}
.pile__actions .btn:hover { background: none; color: var(--burgundy); }
.pile__actions .btn svg { display: none; }

.continue__row { gap: clamp(24px, 2.5vw, 44px); }
.continue__card {
  grid-template-columns: 108px minmax(0, 1fr);
  padding: 0;
  border: 0;
  background: none;
  gap: 22px;
  align-items: start;
}
.continue__card h3 { font-size: var(--step-1); font-weight: 400; }
.continue__card > div > p:first-of-type { margin-top: 4px; color: var(--ink-45); font-size: var(--step--1); }

/* ---------- one book, large: daily, tonight, surprise, slump -------------- */

/* These pages exist to hand you a single book. The cover should be the size of
   a book you are being handed. */
.daily-card, .surprise-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(28px, 3vw, 56px);
  align-items: center;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  padding-top: var(--space-block);
}
.daily-card .cover, .surprise-card .cover { box-shadow: var(--shadow-cover-lg); }
.daily-card h2, .daily-card h3, .surprise-card h2, .surprise-card h3 {
  font-size: var(--step-3);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.daily-card__desc, .surprise-card__desc { margin-top: 18px; max-width: 50ch; }
.daily-card__actions { margin-top: 28px; gap: 16px 24px; align-items: center; }

@media (max-width: 720px) {
  .daily-card, .surprise-card { grid-template-columns: 168px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
  .daily-card, .surprise-card { grid-template-columns: minmax(0, 1fr); }
  .daily-card > a, .surprise-card > a, .daily-card > div:first-child { max-width: 168px; }
}

/* ---------- book detail: the cover is the hero ---------------------------- */

.detail { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); align-items: start; }
.detail__cover { position: sticky; top: calc(var(--nav-h) + 28px); }
.detail__cover .cover { max-width: none; box-shadow: var(--shadow-cover-lg); }
.detail h1 { font-size: var(--step-4); }

@media (max-width: 860px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .detail__cover { position: static; max-width: 220px; }
}

/* ---------- responsive ----------------------------------------------------- */

@media (max-width: 1024px) {
  .book-grid--six { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .book-grid, .book-grid--six, .shelf__row, .pile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 18px;
  }
  .continue__card { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .seo-item { grid-template-columns: 116px minmax(0, 1fr); }
}

/* "Not my vibe" is a correction, not an action to take. It stops being
   underlined and drops a step behind the save control. */
.rec-card__actions .not-vibe, .book-card .not-vibe {
  text-decoration: none;
  border-bottom: 0;
  color: var(--ink-45);
  font-weight: 600;
}
.rec-card__actions .not-vibe:hover, .book-card .not-vibe:hover { color: var(--burgundy); }

/* The "why we picked it" block was a filled butter panel — a card inside a
   page that already stopped using cards. A left rule says the same thing. */
.why {
  padding: 2px 0 2px 20px;
  border: 0;
  border-left: 2px solid var(--line-2);
  border-radius: 0;
  background: none;
}
.why h4 {
  font-family: var(--font-ui);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 8px;
}
.why__line { font-weight: 400; color: var(--ink); font-size: var(--step-0); line-height: 1.55; }

/* One bordered control per block. Everything beside it is a text link, and
   they sit on one row rather than stacking into a column of buttons. */
.daily-card__actions, .hero-book__actions, .detail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}
.daily-card__actions .btn--ghost, .detail__actions .btn--ghost { padding: 6px 0; }

/* Genre/mood tags on a single-book page are a credit line, not chips. */
.daily-card .book-card__tags, .surprise-card .book-card__tags { display: flex; margin-bottom: 14px; }

/* Shelf status on a pile card: three states, shown as three words with the
   current one ruled. Three pill buttons per book turned a bookshelf into a
   settings screen. */
.pile__status { gap: 0 14px; margin-top: 12px; }
.pile__status button {
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--ink-25);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pile__status button:hover { background: none; color: var(--ink-70); }
.pile__status button.is-on { background: none; color: var(--ink); border-bottom-color: var(--ink); }

/* The page-number control follows the same rule. */
.page-input__open { padding: 0; font-size: var(--label-size); }
.page-input { gap: 8px; align-items: baseline; }
.page-input input {
  width: 5ch;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  font-variant-numeric: tabular-nums;
}
.page-input label, .page-input__of { font-size: var(--label-size); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-45); }

/* The numbers support the shelf, so they are set at supporting size. */
.stat__v { font-size: var(--step-2); }
.stats { gap: clamp(18px, 2.4vw, 36px); }
.era { margin-top: var(--space-section); }

/* =============================================================================
   STEP 8 — EDITORIAL POLISH
   -----------------------------------------------------------------------------
   Corrections and refinements found by looking at the rendered pages rather
   than at the components. Each block says what was wrong on screen.
   ========================================================================== */

/* ---------- a section wrapper is not a label ------------------------------ */

/* Step 7 gave .tonight__step label styling — uppercase, tracked, 11px — but it
   wraps the whole question block, so it was shouting the question in caps. */
.tonight__step {
  color: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  margin-top: var(--space-block);
}
.tonight__q { font-size: var(--step-2); font-weight: 400; text-transform: none; }

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

.hero__kicker {
  margin-bottom: 22px;
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-45);
}
.hero h1 { max-width: 14ch; }
/* One primary action. The secondary route now lives in the section below, in a
   sentence, which is a better invitation than a second button. */
.hero__cta { margin-top: 34px; }
.hero__note { margin-top: 26px; text-transform: none; letter-spacing: 0; font-size: var(--step--1); font-weight: 400; color: var(--ink-45); }

/* ---------- the invitation: one line and a field -------------------------- */

.invite {
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}
.invite__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.invite h2 {
  font-size: var(--step-2);
  font-weight: 400;
  max-width: 20ch;
}
.invite .chips { margin-top: 18px; }

@media (max-width: 860px) {
  .invite__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- daily as a feature, not a panel ------------------------------- */

.daily {
  grid-template-columns: 260px minmax(0, 1fr);
  border-top: 1px solid var(--line-2);
}
.daily__cover .cover { box-shadow: var(--shadow-cover-lg); }
.daily__copy h2 { margin-top: 4px; }
.daily__desc { margin-top: 18px; max-width: 48ch; color: var(--ink-70); }
.daily__row { margin-top: 28px; gap: 14px 24px; align-items: center; }

@media (max-width: 720px) {
  .daily { grid-template-columns: 168px minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 480px) {
  .daily { grid-template-columns: minmax(0, 1fr); }
  .daily__cover { max-width: 168px; }
}

/* ---------- mood page ----------------------------------------------------- */

.mood-more { margin-top: var(--space-section); }
.mood-more h2 { font-size: var(--step-2); font-weight: 400; margin-bottom: var(--space-head); }

/* ---------- surprise: an experience, not a centred button ---------------- */

/* It was a centred column with a 62px letterspaced button in the middle of it,
   which is the most SaaS thing left on the site. */
.surprise-wrap { text-align: left; }
.dice { display: none; }

/* ---------- the hero composition, made asymmetric ------------------------- */

/* It was a perfectly mirrored fan with the middle cover forward — which reads
   as a widget, not a composition. The forward cover moves off centre, the
   rotations stop mirroring, and the whole group sits lower than the headline's
   optical centre so the two halves lean into each other. */
.hero__inner { align-items: end; }
.hero__shelf { padding-top: clamp(1rem, 4vw, 4.5rem); }
.hero-covers {
  max-width: 540px;
  margin-inline: auto 0;
  transform: translateX(clamp(0px, 2vw, 34px));
}
.hero-covers__item:nth-child(1) { margin-right: -16%; transform: rotate(-9deg) translateY(30px) scale(0.84); }
.hero-covers__item:nth-child(2) { margin-inline: -8%; transform: rotate(-4.5deg) translateY(12px) scale(0.93); }
.hero-covers__item:nth-child(3) { z-index: 3; margin-inline: -8%; transform: rotate(-1deg) translateY(-2px) scale(1.02); }
.hero-covers__item:nth-child(4) { z-index: 4; margin-inline: -8%; transform: rotate(3deg) translateY(-18px) scale(1.14); }
.hero-covers__item:nth-child(4) .cover { box-shadow: var(--shadow-cover-lg); }
.hero-covers__item:nth-child(5) { z-index: 2; margin-left: -14%; transform: rotate(7.5deg) translateY(14px) scale(0.95); }
.hero-covers__item:hover { transform: translateY(-24px) rotate(0deg) scale(1.16); }
.hero-covers__cap { text-align: right; padding-right: 6%; }

/* ---------- chips become text, because four bordered boxes are four boxes -- */

.chips { gap: 0 18px; align-items: baseline; }
.chip {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  color: var(--ink-70);
  font-size: var(--step--1);
}
.chip:hover { border-bottom-color: var(--burgundy); color: var(--burgundy); }
.invite .chips::before, .hub-search .chips::before {
  content: "Try";
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-45);
}

/* ---------- caption baselines --------------------------------------------- */

/* Titles wrap to one line or two, so the save control sat at a different height
   on every card in a row. Making the card a column and pushing the control to
   the bottom lines them up without reserving empty space under short titles. */
.book-card, .rec-card, .pile {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.book-card .tbr-btn, .rec-card__actions, .pile__actions { margin-top: auto; }
.book-card__why, .rec-card__why { margin-bottom: 12px; }
.rec-card__body { display: flex; flex-direction: column; flex: 1; }

/* ---------- discover: three different rhythms, not one repeated ----------- */

/* Section heads come in three weights now: a full serif statement for the
   things worth stopping at, a smaller one for the utility rows, and a bare
   label where the shelf titles underneath are the real headings. */
.hub-head--quiet { margin-bottom: var(--space-block); }
.hub-head--quiet .label { margin-bottom: 12px; }
.hub-h--sm { font-size: var(--step-2); }
.hub-section > .label { display: block; margin-bottom: 20px; }

/* ---------- daily: a cover story, given the room to be one ---------------- */

/* A step-4 rule refilled the "why" panel on this page only. */
.daily-card .why { background: none; }

.daily-card {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(2rem, 2vw + 1rem, 4.5rem);
  align-items: start;
}
.daily-card__body { max-width: 60ch; }
.daily-card h2, .surprise-card h2 { font-size: var(--step-4); margin-top: 6px; }
.daily-card__author, .surprise-card__author { margin-top: 10px; font-size: var(--step-1); }
.daily-card__desc, .surprise-card__desc { margin-top: 22px; font-size: var(--step-0); line-height: 1.7; }
.daily-card .why, .surprise-card .why { margin-top: 26px; }

/* One row of controls: a single bordered action and the rest as text. */
.daily-card__actions { margin-top: 30px; }

/* Slump and tonight: left-aligned, and the reveal gets the same room. */
.slump-result, .tonight__result { margin-top: var(--space-block); }

@media (max-width: 860px) {
  .daily-card { grid-template-columns: 200px minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 560px) {
  .daily-card { grid-template-columns: minmax(0, 1fr); }
  .daily-card__cover { max-width: 180px; }
}

/* ---------- last pass: dead space --------------------------------------- */

/* Before the pick is revealed there is no cover, so the two-column grid left a
   hole on the front page. Unrevealed, it is a compact block. */
.daily:not(.daily--revealed) { padding-top: var(--space-block); }
.daily:not(.daily--revealed) .daily__copy { max-width: 46ch; }

/* The mood index ended on a short row and then held a section's worth of air
   before the next rule. */
.mood-grid { row-gap: 0; }
.section .mood-grid + * { margin-top: var(--space-block); }