/* ==========================================================================
   ALL THE SCIENCE YOU NEED: site stylesheet
   Design DNA is lifted straight off the printed covers:
   cream stock, Didone display, letter-spaced geometric caps, gold hairlines
   with a diamond mark, and one jewel accent per book.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root{
  /* Ground */
  --cream:      #FBF6EF;   /* the workbook cover stock */
  --paper:      #FFFDFA;   /* raised cards */
  --cream-deep: #F3EADC;   /* section wash */
  --ink:        #1E1B18;
  --ink-soft:   #453F38;
  --muted:      #6E655B;
  --hair:       #E2D6C4;   /* hairline / border */
  --gold:       #A6794A;   /* the series gold, from every cover kicker */
  --gold-lite:  #C9A778;

  /* Per-page accent, overridden inline on book + quiz pages */
  --accent:     #A6794A;
  --accent-tint:#F6EFE4;
  --on-accent:  #FFFFFF;

  /* Type */
  /* Fraunces. The covers are Didot/Bodoni 72, but a Didone's hairlines vanish on
     screen at display sizes, which is what made the old setting unreadable.
     Fraunces is the sturdiest of the elegant options and carries SOFT and WONK
     axes, so it reads warm and characterful without going thin. */
  --display: "Fraunces", "Georgia", serif;
  --sans:    "Jost", "Futura", "Avenir Next", "Century Gothic", sans-serif;
  --body:    "Source Serif 4", "Charter", "Georgia", serif;

  /* Rhythm */
  --pad:  clamp(1.25rem, 5vw, 4rem);
  --gap:  clamp(2rem, 5vw, 4.5rem);
  --sect: clamp(4.5rem, 11vw, 9rem);
  --maxw: 1240px;
  --readw: 62ch;

  /* Depth: books cast warm shadows, not grey ones */
  --lift-1: 0 1px 2px rgba(60,42,24,.07), 0 4px 12px rgba(60,42,24,.06);
  --lift-2: 0 2px 4px rgba(60,42,24,.08), 0 14px 34px rgba(60,42,24,.13);
  --lift-3: 0 4px 8px rgba(60,42,24,.10), 0 30px 60px rgba(60,42,24,.20);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.02rem,.62rem + .55vw,1.14rem);
  line-height:1.68;
  font-optical-sizing:none;
  font-variation-settings:"opsz" 16, "SOFT" 26, "WONK" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Paper grain. Fixed so it reads as stock, not as a moving texture. */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

::selection{ background:var(--gold-lite); color:#fff; }

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

/* ---- 2. Type scale ------------------------------------------------------ */
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; margin:0; line-height:1.16;
             letter-spacing:-.016em;
             font-variation-settings:"opsz" 60, "SOFT" 26, "WONK" 1; }
h1{ font-size:clamp(2.2rem,1.1rem + 4.5vw,4.15rem); }
h2{ font-size:clamp(1.75rem,1rem + 2.6vw,2.8rem); }
h3{ font-size:clamp(1.35rem,1rem + 1.3vw,1.9rem); }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

em,i{ font-style:italic; }

/* The letter-spaced Futura caps that appear on every cover */
.kicker{
  font-family:var(--sans); font-weight:500;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.1rem;
}
.kicker--ink{ color:var(--muted); }

.lede{
  font-size:clamp(1.12rem,.85rem + .8vw,1.35rem);
  line-height:1.6; color:var(--ink-soft);
}

.dek{ font-family:var(--display); font-weight:500; font-style:italic;
      font-size:clamp(1.15rem,.9rem + .9vw,1.5rem); line-height:1.45; color:var(--ink-soft); }

.small{ font-family:var(--sans); font-size:.82rem; letter-spacing:.02em; color:var(--muted); }

/* ---- 3. Layout --------------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:820px; }
.wrap--wide{ max-width:1460px; }
.section{ padding-block:var(--sect); }
.stack>*+*{ margin-top:1.1rem; }

/* Gold hairline with the diamond mark, the books' own divider */
.rule{
  display:flex; align-items:center; gap:1rem;
  color:var(--gold); margin-block:clamp(2.5rem,6vw,4rem);
}
.rule::before,.rule::after{ content:""; height:1px; background:currentColor; opacity:.42; flex:1; }
.rule::marker{ content:none; }
.rule span{ font-size:.6rem; letter-spacing:.3em; }
.rule--short{ max-width:150px; margin-inline:0; }
.rule--center{ margin-inline:auto; }

/* Section header with an oversized Didone numeral, echoing 35 / 52 / 66 */
.sect-head{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2.6rem);
            align-items:start; margin-bottom:clamp(2.2rem,5vw,3.6rem); }
.sect-num{
  font-family:var(--display); font-weight:600;
  font-size:clamp(3.4rem,2rem + 6vw,7rem); line-height:.78;
  color:var(--gold); opacity:.28; letter-spacing:-.03em;
  -webkit-user-select:none; user-select:none;
}
.sect-head__body{ padding-top:.35rem; }
/* cap the prose, not the heading - a display line capped at 60ch wrapped to
   four lines inside a 963px track */
.sect-head__body > p{ max-width:60ch; }
.sect-head__body h2{ margin-bottom:.6rem; }

/* ---- 4. Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  padding:.95em 1.7em; border-radius:2px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease),
                            color .25s var(--ease), border-color .25s var(--ease),
                            box-shadow .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--solid{ background:var(--accent); color:var(--on-accent); box-shadow:var(--lift-1); }
.btn--solid:hover{ box-shadow:var(--lift-2); }

.btn--ink{ background:var(--ink); color:var(--cream); }
.btn--ink:hover{ background:#000; }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--hair); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

.btn--onink{ background:var(--cream); color:var(--ink); }
.btn--onink:hover{ background:#fff; }

.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.42; cursor:not-allowed; transform:none; box-shadow:none;
}

/* Text link with a gold underline that grows */
.tlink{
  font-family:var(--sans); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); position:relative; padding-bottom:.28em;
  display:inline-block;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform-origin:left; transform:scaleX(.34);
  transition:transform .38s var(--ease);
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink[data-arrow]::before{ content:"→ "; color:var(--gold); }

/* ---- 5. Header --------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-head[data-stuck="true"]{ border-bottom-color:var(--hair); }
.site-head__in{
  max-width:var(--maxw); margin-inline:auto; padding:.9rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ text-decoration:none; display:flex; flex-direction:column; gap:.18rem; line-height:1; }
.brand__mark{
  font-family:var(--sans); font-weight:500; font-size:.66rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}
.brand__name{ font-family:var(--display); font-size:1.16rem; letter-spacing:.01em; }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem); }
.nav a{
  font-family:var(--sans); font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); position:relative; padding-block:.4rem;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--ink); }

.nav__toggle{ display:none; background:none; border:0; padding:.5rem; cursor:pointer;
              color:var(--ink); font-family:var(--sans); font-size:.76rem;
              letter-spacing:.15em; text-transform:uppercase; }

@media (max-width:760px){
  .nav__toggle{ display:block; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); border-block:1px solid var(--hair);
    padding:.5rem var(--pad) 1.1rem;
    display:none;
  }
  .nav[data-open="true"]{ display:flex; }
  .nav a{ width:100%; padding-block:.85rem; border-bottom:1px solid var(--hair); }
  .nav a:last-child{ border-bottom:0; }
  .nav .btn{ margin-top:.9rem; }
}

/* ---- 6. The book object ------------------------------------------------
   A cover is rendered as a physical thing: front face, a sliver of page
   edge on the right, and a warm cast shadow. It tilts toward the cursor.
   ------------------------------------------------------------------------ */
.book{
  position:relative; display:block; text-decoration:none;
  perspective:1400px; isolation:isolate;
}
.book__obj{
  display:block; position:relative; aspect-ratio:1600/2560; border-radius:1px 3px 3px 1px;
  transform-style:preserve-3d;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
  box-shadow:var(--lift-2);
  background:var(--paper);
}
.book__obj img{
  width:100%; height:100%; object-fit:cover;
  border-radius:1px 3px 3px 1px;
  /* the spine shadow that makes a flat jpeg read as a bound book */
  -webkit-mask-image:none;
}
/* page edge */
.book__obj::after{
  content:""; position:absolute; top:1.4%; right:-5px; bottom:1.4%; width:5px;
  border-radius:0 2px 2px 0;
  background:repeating-linear-gradient(to bottom,
     #fffdf7 0 1px, #efe6d6 1px 2px, #fbf5ea 2px 3px);
  transform:translateZ(-1px) rotateY(6deg); transform-origin:left center;
  opacity:.9;
}
/* gutter shadow down the left of the cover */
.book__obj::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:1px 3px 3px 1px;
  background:linear-gradient(to right,
    rgba(30,22,12,.30) 0, rgba(30,22,12,.10) 1.6%, rgba(30,22,12,0) 5.5%,
    rgba(255,255,255,.16) 50%, rgba(30,22,12,.05) 100%);
}
.book:hover .book__obj,.book:focus-visible .book__obj{
  transform:rotateY(-11deg) rotateX(2.5deg) translateY(-8px) scale(1.014);
  box-shadow:var(--lift-3);
}
@media (prefers-reduced-motion:reduce){
  .book:hover .book__obj,.book:focus-visible .book__obj{ transform:translateY(-4px); }
}

/* the shadow the book casts on the shelf */
.book__cast{
  position:absolute; left:6%; right:6%; bottom:-14px; height:22px; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(70,50,28,.30), rgba(70,50,28,0) 72%);
  filter:blur(7px); transition:all .55s var(--ease);
}
.book:hover .book__cast{ left:11%; right:1%; bottom:-18px; opacity:.85; filter:blur(11px); }

.book__meta{ margin-top:1.5rem; }
.book__title{ font-family:var(--display); font-weight:600; font-size:1.22rem; line-height:1.2; margin:0 0 .3rem; }
.book__sub{ font-family:var(--body); font-style:italic; font-size:.92rem;
            color:var(--muted); line-height:1.45; margin:0; }
.book__tag{
  font-family:var(--sans); font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); display:inline-block; margin-bottom:.55rem;
}

/* the front/back flip on a book detail page */
.flip{ perspective:1600px; }
.flip__inner{
  position:relative; aspect-ratio:1600/2560; transform-style:preserve-3d;
  transition:transform .85s var(--ease); box-shadow:var(--lift-2);
  border-radius:1px 3px 3px 1px;
}
.flip[data-flipped="true"] .flip__inner{ transform:rotateY(180deg); }
.flip__face{
  position:absolute; inset:0; backface-visibility:hidden;
  -webkit-backface-visibility:hidden; border-radius:1px 3px 3px 1px; overflow:hidden;
}
.flip__face img{ width:100%; height:100%; object-fit:cover; }
.flip__face--front::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right,
    rgba(30,22,12,.28) 0, rgba(30,22,12,.09) 1.6%, rgba(30,22,12,0) 5.5%,
    rgba(255,255,255,.14) 50%, rgba(30,22,12,.04) 100%);
}
.flip__face--back{ transform:rotateY(180deg); }
.flip__face--back::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to left,
    rgba(30,22,12,.28) 0, rgba(30,22,12,.09) 1.6%, rgba(30,22,12,0) 5.5%,
    rgba(255,255,255,.14) 50%, rgba(30,22,12,.04) 100%);
}
.flip__cast{
  position:absolute; left:6%; right:6%; bottom:-14px; height:22px; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(70,50,28,.28), rgba(70,50,28,0) 72%);
  filter:blur(8px);
}
.flip__btn{
  display:block; margin:1.5rem auto 0; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); padding:.5em;
  transition:color .25s var(--ease);
}
.flip__btn:hover{ color:var(--accent); }
.flip__btn::before{ content:"\21BB"; margin-right:.5em; color:var(--gold); }
@media (prefers-reduced-motion:reduce){
  .flip__inner{ transition:none; }
}


/* ---- 9b. The creed: the series name, one promise per word ---------------- */
.creed{ display:grid; gap:0; }
.creed__row{
  display:grid; grid-template-columns:minmax(190px,.9fr) 1.6fr;
  gap:clamp(1.2rem,4vw,3.4rem); align-items:baseline;
  padding-block:clamp(1.6rem,4vw,2.6rem);
  border-top:1px solid rgba(214,183,142,.22);
}
.creed__row:first-child{ border-top:0; padding-top:0; }
.creed__word{
  font-family:var(--display); font-weight:600; font-style:italic;
  font-size:clamp(1.9rem,1.1rem + 3vw,3.4rem); line-height:1;
  color:var(--gold-lite); letter-spacing:-.015em;
}
.creed__claim{
  font-family:var(--display); font-size:clamp(1.2rem,.95rem + 1vw,1.75rem);
  line-height:1.28; color:#FBF6EF; margin:0 0 .7rem;
}
.creed__gloss{ color:#C0B6A7; font-size:1rem; line-height:1.62; margin:0; }
@media (max-width:640px){
  .creed__row{ grid-template-columns:1fr; gap:.7rem; }
}

/* ---- 9c. Data over vibes ------------------------------------------------ */
.reckon{ display:grid; gap:clamp(1.4rem,3vw,2rem); }
.reck{
  display:grid; grid-template-columns:1fr 1.15fr 1fr;
  gap:0; background:var(--paper); border:1px solid var(--hair); border-radius:3px;
  overflow:hidden; transition:box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.reck:hover{ box-shadow:var(--lift-2); border-color:transparent; }
.reck__cell{ padding:clamp(1.3rem,2.6vw,1.9rem); }
.reck__lab{
  font-family:var(--sans); font-size:.63rem; letter-spacing:.22em;
  text-transform:uppercase; margin:0 0 .9rem; font-weight:500;
}

/* the marketplace's story, deliberately greyed and set back */
.reck__vibe{ background:var(--cream-deep); }
.reck__vibe .reck__lab{ color:#9A8E7E; }
.reck__vibe p{
  font-family:var(--display); font-weight:500; font-style:italic;
  font-size:clamp(1.02rem,.9rem + .5vw,1.24rem); line-height:1.36;
  color:#8A8073; margin:0;
}

/* what the papers actually say */
.reck__data{ border-inline:1px solid var(--hair); }
.reck__data .reck__lab{ color:var(--accent); }
.reck__data p{ font-size:1rem; line-height:1.58; margin:0; color:var(--ink); }
.reck__data b{ color:var(--accent); font-weight:600; }
.reck__src{
  display:block; margin-top:1rem; font-family:var(--sans);
  font-size:.68rem; letter-spacing:.04em; color:var(--muted); line-height:1.5;
}

/* the so-what: the half most science writing leaves out */
.reck__changes .reck__lab{ color:var(--gold); }
.reck__changes p{ font-size:.99rem; line-height:1.58; margin:0; color:var(--ink-soft); }
.reck__book{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.1rem;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); text-decoration:none;
}
.reck__book::before{ content:""; width:.34em; height:.34em; background:currentColor;
                     transform:rotate(45deg); }
.reck__book:hover{ text-decoration:underline; text-underline-offset:.35em; }

@media (max-width:880px){
  .reck{ grid-template-columns:1fr; }
  .reck__data{ border-inline:0; border-block:1px solid var(--hair); }
}

.creed-line{
  font-family:var(--display); font-weight:500; font-style:italic; text-align:center;
  font-size:clamp(1.3rem,1rem + 1.7vw,2.2rem); line-height:1.32;
  max-width:24ch; margin-inline:auto; color:var(--ink);
}
.creed-line b{ font-style:normal; font-weight:500; color:var(--gold); }


/* the workbook seal: an applied stamp, half off the cover's top-left.
   Sizes off the book's own width (container query) so it holds at every
   scale, from a 200px shelf thumbnail to the detail page. Sits on .book,
   NOT on .book__obj, so it does not tip with the 3-D hover. */
.book, .flip{ container-type:inline-size; }

.seal{
  /* bottom-left, and mostly hanging off the corner. Every cover in the line is
     top-anchored (kicker + title), and the one prop that lives low - the
     Perimenopause dumbbells - is bottom-RIGHT, so this corner is clear art on
     all three workbooks. Sitting proud of the edge also reads as an applied
     sticker rather than something printed on the jacket. */
  position:absolute; bottom:0; left:0; z-index:4; pointer-events:none;
  width:min(33cqi, 96px); aspect-ratio:1; border-radius:50%;
  container-type:inline-size;
  transform:translate(-44%,44%) rotate(-8deg);
  background:var(--paper);
  display:grid; place-content:center; text-align:center;
  box-shadow:0 2px 5px rgba(60,42,24,.18), 0 8px 18px rgba(60,42,24,.16);
  transition:transform .55s var(--ease);
}
/* the inner hairline: a stamp has two rings */
.seal::after{
  content:""; position:absolute; inset:7.5%; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--gold) 55%, transparent);
}
.seal__n{
  font-family:var(--display); font-weight:500;
  font-size:45cqi; line-height:.86; color:var(--gold); letter-spacing:-.02em;
}
.seal__u{
  font-family:var(--sans); font-weight:500;
  font-size:12.5cqi; line-height:1.42; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
}
.book:hover .seal{ transform:translate(-44%,44%) rotate(-3deg) scale(1.05); }
@media (prefers-reduced-motion:reduce){
  .book:hover .seal{ transform:translate(-44%,44%) rotate(-8deg); }
}

/* on the detail page the seal has far more room, so ease the ring in a touch */
.flip .seal{ width:min(27cqi, 104px); transform:translate(-38%,38%) rotate(-8deg); }

/* Small screens: the shelf goes 2-up, so a seal hanging 44% off the corner
   clips at the viewport edge on the left-hand column. Pull it in, and grow the
   label - at 6.7px it was decoration, not information. */
@media (max-width:640px){
  .seal{ width:min(38cqi, 82px); transform:translate(-20%,20%) rotate(-8deg); }
  .book:hover .seal{ transform:translate(-22%,22%) rotate(-4deg) scale(1.04); }
}

/* ---- 7. Hero ----------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; padding-top:clamp(2rem,4.5vw,3.4rem); }
.hero::after{  /* warm bloom behind the shelf */
  content:""; position:absolute; left:50%; top:34%; width:min(1100px,120vw);
  aspect-ratio:1; transform:translate(-50%,-40%); z-index:0; pointer-events:none;
  background:radial-gradient(circle,
     rgba(214,183,142,.30) 0%, rgba(214,183,142,.10) 42%, rgba(214,183,142,0) 68%);
}
.hero__in{ position:relative; z-index:1; }
.hero__top{ max-width:900px; }
.hero h1{ font-size:clamp(1.85rem,.95rem + 3.5vw,3.6rem); margin-bottom:1.3rem; }
/* the headline is now a full sentence pair, so the phone size has to come down
   or it runs to five lines and buries the shelf */
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero__lede{ max-width:56ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.9rem; align-items:center; }

/* the shelf: 6 covers, staggered heights so it reads as a shelf not a grid */
.shelf{
  margin-top:clamp(2.2rem,4.5vw,3.4rem);
  display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.65rem,1.5vw,1.5rem);
  align-items:end;
}
/* alternating drop so it reads as a shelf, not a grid of thumbnails */
.shelf > *:nth-child(even){ padding-top:clamp(1rem,2.6vw,2.6rem); }
.shelf .book__meta{ display:none; }
.shelf__line{
  height:1px; background:linear-gradient(to right,
     transparent, var(--hair) 8%, var(--hair) 92%, transparent);
  margin-top:clamp(1.4rem,3vw,2.6rem);
}
@media (max-width:900px){
  .shelf{ grid-template-columns:repeat(3,1fr); row-gap:clamp(1.6rem,5vw,2.6rem); }
}
@media (max-width:460px){
  .shelf{ grid-template-columns:repeat(2,1fr); }
}

/* ---- 8. Grids ---------------------------------------------------------- */
.grid{ display:grid; gap:clamp(1.8rem,4vw,3.2rem); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
/* An explicit pair. auto-fit resolves to 3 tracks at desktop widths, which
   leaves a 4-item set as 3 + 1 orphan. */
.grid--pair{ grid-template-columns:repeat(2,1fr); }
@media (max-width:720px){ .grid--pair{ grid-template-columns:1fr; } }

.family{ margin-bottom:clamp(3rem,7vw,5rem); }
.family__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(1.8rem,4vw,2.8rem);
  padding-bottom:1rem; border-bottom:1px solid var(--hair);
}
.family__head h3{ font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem); }

/* ---- 9. The ink band (contrast + the series premise) -------------------- */
.band{
  background:var(--ink); color:#EFE7DA; position:relative; overflow:hidden;
}
.band::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(ellipse at 22% 0%, rgba(166,121,74,.30), transparent 58%);
}
.band .wrap{ position:relative; z-index:1; }
.band .kicker{ color:var(--gold-lite); }
.band h2{ color:#FBF6EF; }
.band .rule{ color:var(--gold-lite); }
.band .lede{ color:#D9CFC0; }

.premise{
  font-family:var(--display); font-weight:600; font-style:italic;
  font-size:clamp(1.6rem,1rem + 2.6vw,2.9rem); line-height:1.28;
  max-width:22ch; color:#FBF6EF;
}
.premise + .attrib{ margin-top:1.5rem; }
.attrib{ font-family:var(--sans); font-size:.72rem; letter-spacing:.2em;
         text-transform:uppercase; color:var(--gold-lite); }

.pillars{ display:grid; gap:clamp(1.6rem,4vw,2.6rem);
          grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.pillar__n{ font-family:var(--display); font-size:2.2rem; color:var(--gold-lite);
            line-height:1; margin-bottom:.7rem; }
.pillar h4{ font-family:var(--sans); font-size:.74rem; letter-spacing:.18em;
            text-transform:uppercase; color:#FBF6EF; margin-bottom:.7rem; font-weight:500; }
.pillar p{ font-size:.98rem; color:#C9BFB0; line-height:1.6; }

/* ---- 10. Quiz cards on the index --------------------------------------- */
.qcard{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--hair); border-radius:3px;
  padding:clamp(1.6rem,3.4vw,2.4rem); text-decoration:none; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             border-color .35s var(--ease);
}
.qcard::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--accent);
  transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease);
}
.qcard:hover{ transform:translateY(-5px); box-shadow:var(--lift-2);
              border-color:transparent; }
.qcard:hover::before{ transform:scaleY(1); }
.qcard__n{
  font-family:var(--display); font-size:3.1rem; line-height:.8; color:var(--accent);
  opacity:.24; margin-bottom:1.1rem;
}
.qcard h3{ margin-bottom:.7rem; }
.qcard p{ color:var(--muted); font-size:.97rem; flex:1; }
.qcard__go{ margin-top:1.5rem; font-family:var(--sans); font-size:.72rem;
            letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
            text-wrap:balance; }
.qcard__go::after{ content:"\00a0→"; transition:margin .3s var(--ease); }
.qcard:hover .qcard__go::after{ margin-left:.35rem; }

/* ---- 11. Book detail --------------------------------------------------- */
.detail{ padding-top:clamp(2rem,5vw,3.5rem); }
.detail__grid{
  display:grid; gap:clamp(2.2rem,6vw,5rem);
  grid-template-columns:minmax(240px,.85fr) 1.15fr; align-items:start;
}
@media (max-width:860px){ .detail__grid{ grid-template-columns:1fr; } }

.detail__art{ position:sticky; top:6.5rem; }
@media (max-width:860px){ .detail__art{ position:static; max-width:300px; margin-inline:auto; } }

.detail h1{ font-size:clamp(2.2rem,1.2rem + 3.6vw,3.9rem); margin-bottom:.7rem; }
.detail__sub{ font-family:var(--display); font-style:italic;
              font-size:clamp(1.1rem,.9rem + .8vw,1.42rem); color:var(--ink-soft);
              line-height:1.4; margin-bottom:1.8rem; }
.detail__hook{
  font-family:var(--display); font-size:clamp(1.25rem,1rem + 1.1vw,1.7rem);
  line-height:1.36; color:var(--ink); margin-bottom:1.6rem;
  padding-left:1.3rem; border-left:2px solid var(--accent);
}
.detail__body{ max-width:var(--readw); }

.pull{
  font-family:var(--display); font-weight:500; font-style:italic; text-align:center;
  font-size:clamp(1.3rem,1rem + 1.5vw,2rem); line-height:1.34; color:var(--accent);
  margin-block:clamp(2.4rem,5vw,3.4rem); padding-inline:clamp(0rem,4vw,2rem);
}

.specs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.chip{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.5em 1em; border-radius:100px; background:var(--accent-tint);
  color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
}

/* diamond bullet list: the books' own INSIDE list */
.dlist{ list-style:none; padding:0; margin:0; }
.dlist li{ position:relative; padding-left:1.6rem; margin-bottom:.85rem; line-height:1.55; }
.dlist li::before{
  content:""; position:absolute; left:.18em; top:.62em;
  width:.38em; height:.38em; background:var(--accent); transform:rotate(45deg);
}
.dlist--tight li{ margin-bottom:.55rem; font-size:.97rem; }

.panel{
  background:var(--paper); border:1px solid var(--hair); border-radius:3px;
  padding:clamp(1.5rem,3.4vw,2.3rem);
}
.panel--tint{ background:var(--accent-tint); border-color:transparent; }
.panel h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.2em;
           text-transform:uppercase; color:var(--accent); margin-bottom:1.1rem;
           font-weight:500; }

.buybox{ margin-block:clamp(2rem,4vw,2.8rem); }
.buybox__soon{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); border:1px dashed var(--hair); padding:.95em 1.5em; border-radius:2px;
}
.buybox__soon::before{ content:"◆"; color:var(--gold); font-size:.6em; }

/* companion strip */
.companion{
  display:grid; grid-template-columns:88px 1fr; gap:1.4rem; align-items:center;
  text-decoration:none; padding:1.3rem; border:1px solid var(--hair);
  border-radius:3px; background:var(--paper);
  transition:border-color .3s var(--ease), transform .3s var(--ease),
             box-shadow .3s var(--ease);
}
.companion:hover{ border-color:var(--accent); transform:translateY(-3px);
                  box-shadow:var(--lift-1); }
.companion img{ width:100%; aspect-ratio:1600/2560; object-fit:cover;
                border-radius:1px; box-shadow:var(--lift-1); }

/* ---- 12. Quiz engine --------------------------------------------------- */
.quiz{ min-height:72vh; padding-block:clamp(2rem,5vw,4rem); }
/* a quiz is a focused document, so centre it rather than letting it hug the left
   of a 1240px shelf-width container */
.quiz > .wrap{ max-width:940px; }
.quiz__intro{ max-width:640px; }
.quiz__meta{ font-family:var(--sans); font-size:.72rem; letter-spacing:.18em;
             text-transform:uppercase; color:var(--muted); margin-top:1.6rem; }

/* progress: a gold rule that fills, like a page-edge gauge */
.qprog{ display:flex; align-items:center; gap:1rem; margin-bottom:clamp(2rem,5vw,3rem); }
.qprog__track{ flex:1; height:2px; background:var(--hair); position:relative; overflow:hidden; }
.qprog__fill{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--accent);
              transition:width .5s var(--ease); }
.qprog__label{ font-family:var(--sans); font-size:.7rem; letter-spacing:.18em;
               text-transform:uppercase; color:var(--muted); white-space:nowrap; }

/* a question, set like a page from the book */
.qstep{ display:none; }
.qstep[data-active="true"]{ display:block; animation:qin .5s var(--ease) both; }
@keyframes qin{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .qstep[data-active="true"]{ animation:none; }
}
.qstep__n{
  font-family:var(--display); font-size:clamp(2.6rem,1.6rem + 3.4vw,4.4rem);
  line-height:.85; color:var(--accent); opacity:.3; margin-bottom:.9rem;
}
.qstep__q{ font-family:var(--display); font-size:clamp(1.6rem,1.1rem + 2.1vw,2.7rem);
           line-height:1.2; margin-bottom:.7rem; max-width:20ch; }
.qstep__help{ font-style:italic; color:var(--muted); margin-bottom:2rem; }

.qopts{ display:grid; gap:.7rem; }
.qopt{
  display:flex; align-items:flex-start; gap:.95rem; width:100%; text-align:left;
  font-family:var(--body); font-size:1.02rem; line-height:1.45; color:var(--ink);
  background:var(--paper); border:1px solid var(--hair); border-radius:3px;
  padding:1.05rem 1.25rem; cursor:pointer;
  transition:border-color .22s var(--ease), background .22s var(--ease),
             transform .22s var(--ease), box-shadow .22s var(--ease);
}
.qopt__dot{
  flex:0 0 auto; width:15px; height:15px; margin-top:.32em; border-radius:50%;
  border:1px solid var(--hair); position:relative;
  transition:border-color .22s var(--ease);
}
.qopt__dot::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent);
  transform:scale(0); transition:transform .28s var(--ease);
}
.qopt:hover{ border-color:var(--accent); transform:translateX(3px); box-shadow:var(--lift-1); }
.qopt:hover .qopt__dot{ border-color:var(--accent); }
.qopt[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-tint); }
.qopt[aria-pressed="true"] .qopt__dot{ border-color:var(--accent); }
.qopt[aria-pressed="true"] .qopt__dot::after{ transform:scale(1); }

/* agree/sometimes/no scale rows */
.qscale{ display:grid; gap:.55rem; }
.qrow{
  display:grid; grid-template-columns:1fr auto; gap:1.2rem; align-items:center;
  padding:1rem 1.1rem; background:var(--paper); border:1px solid var(--hair);
  border-radius:3px; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.qrow[data-answered="true"]{ border-color:color-mix(in srgb,var(--accent) 40%,transparent);
                             background:var(--accent-tint); }
.qrow__t{ font-size:1rem; line-height:1.45; }
.qrow__opts{ display:flex; gap:.4rem; flex-shrink:0; }
.qrow__b{
  font-family:var(--sans); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.6em .95em; border-radius:100px; border:1px solid var(--hair);
  background:transparent; color:var(--muted); cursor:pointer; white-space:nowrap;
  transition:all .22s var(--ease);
}
.qrow__b:hover{ border-color:var(--accent); color:var(--accent); }
.qrow__b[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent);
                               color:var(--on-accent); }
@media (max-width:620px){
  .qrow{ grid-template-columns:1fr; gap:.9rem; }
  .qrow__opts{ justify-content:flex-start; }
}

.qnav{ display:flex; gap:1rem; align-items:center; margin-top:2.4rem; flex-wrap:wrap; }
.qback{ background:none; border:0; cursor:pointer; font-family:var(--sans);
        font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.qback:hover{ color:var(--ink); }

/* ---- 13. Result -------------------------------------------------------- */
.result{ display:none; }
.result[data-active="true"]{ display:block; animation:qin .6s var(--ease) both; }

.rcard{
  position:relative; background:var(--paper);
  border:1px solid var(--hair); border-radius:3px;
  padding:clamp(1.8rem,5vw,3.4rem);
  box-shadow:var(--lift-2); overflow:hidden;
}
.rcard::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
                background:var(--accent); }
.rcard__kicker{ font-family:var(--sans); font-size:.68rem; letter-spacing:.24em;
                text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
.rcard__name{ font-family:var(--display); font-size:clamp(2.1rem,1.3rem + 3.2vw,3.6rem);
              line-height:1.05; margin-bottom:.6rem; }
.rcard__tag{ font-family:var(--display); font-style:italic;
             font-size:clamp(1.1rem,.9rem + .8vw,1.42rem); color:var(--accent);
             margin-bottom:1.8rem; }

.rmeter{ display:grid; gap:.55rem; margin-block:2rem; }
.rmeter__row{ display:grid; grid-template-columns:minmax(110px,auto) 1fr auto;
              gap:.9rem; align-items:center; font-family:var(--sans);
              font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
              color:var(--muted); }
.rmeter__bar{ height:4px; background:var(--cream-deep); border-radius:100px;
              overflow:hidden; }
.rmeter__fill{ height:100%; background:var(--accent); border-radius:100px;
               width:0; transition:width .9s var(--ease); opacity:.45; }
.rmeter__row[data-top="true"]{ color:var(--ink); }
.rmeter__row[data-top="true"] .rmeter__fill{ opacity:1; }

.rmove{ border-top:1px solid var(--hair); margin-top:2rem; padding-top:2rem; }
.rmove h4{ font-family:var(--sans); font-size:.7rem; letter-spacing:.2em;
           text-transform:uppercase; color:var(--accent); margin-bottom:.9rem;
           font-weight:500; }
.rmove p{ font-size:1.02rem; }
.rmove .dek{ font-size:1.12rem; }

/* the recommended book, presented as an object */
.rbook{
  display:grid; grid-template-columns:150px 1fr; gap:clamp(1.5rem,4vw,2.6rem);
  align-items:center; margin-top:clamp(2.2rem,5vw,3rem);
  padding:clamp(1.5rem,4vw,2.4rem); background:var(--accent-tint); border-radius:3px;
}
@media (max-width:560px){ .rbook{ grid-template-columns:110px 1fr; gap:1.2rem; } }

.warn{
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:3px; padding:clamp(1.3rem,3vw,1.9rem); margin-top:2.2rem;
  background:var(--paper);
}
.warn h4{ font-family:var(--sans); font-size:.7rem; letter-spacing:.18em;
          text-transform:uppercase; color:var(--accent); margin-bottom:.9rem;
          font-weight:500; }
.warn li{ font-size:.95rem; }

.disclaimer{
  font-size:.88rem; line-height:1.6; color:var(--muted);
  border-left:2px solid var(--hair); padding-left:1.1rem; margin-top:2rem;
}


/* ---- 13b. FAQ accordion -------------------------------------------------
   Native <details>/<summary>: open by keyboard, findable by the browser's own
   in-page search, and works with JS off.
   ------------------------------------------------------------------------ */
.faq-group{ margin-bottom:clamp(2.4rem,5vw,3.6rem); }
.faq-group__h{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); font-weight:500;
  margin:0 0 .6rem; padding-bottom:.9rem; border-bottom:1px solid var(--hair);
}
.faq{ border-bottom:1px solid var(--hair); }
.faq > summary{
  list-style:none; cursor:pointer; display:flex; gap:1.2rem; align-items:baseline;
  padding:1.15rem 0; font-family:var(--display);
  font-size:clamp(1.06rem,.95rem + .45vw,1.28rem); line-height:1.32; color:var(--ink);
  transition:color .25s var(--ease);
}
.faq > summary::-webkit-details-marker{ display:none; }
.faq > summary:hover{ color:var(--accent); }
/* the +/- sign, drawn so it never depends on a font */
.faq > summary::before{
  content:""; flex:0 0 auto; position:relative; width:.62em; height:.62em;
  margin-top:.35em;
  background:
    linear-gradient(var(--gold),var(--gold)) center/100% 1.4px no-repeat,
    linear-gradient(var(--gold),var(--gold)) center/1.4px 100% no-repeat;
  transition:transform .32s var(--ease), background-size .32s var(--ease);
}
/* open = a minus. Collapse the vertical stroke and turn a half-circle, so it
   lands horizontal; rotating 90deg would stand the remaining stroke on its end
   and render as a pipe. */
.faq[open] > summary::before{
  /* full shorthand, not a background-size override: the closed state sets
     `background` (shorthand), and overriding only the longhand left the vertical
     stroke painted. One horizontal rule, no rotation, is unambiguously a minus. */
  background:linear-gradient(var(--gold),var(--gold)) center/100% 1.4px no-repeat;
}
.faq__a{
  padding:0 0 1.35rem 1.82rem; max-width:64ch;
  color:var(--ink-soft); font-size:1rem; line-height:1.66;
  animation:faqin .32s var(--ease) both;
}
.faq__a a{ color:var(--accent); text-decoration:underline;
           text-underline-offset:.22em; text-decoration-thickness:1px; }
@keyframes faqin{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .faq__a{ animation:none; } }

.legal__sec{ margin-bottom:clamp(2.2rem,4.5vw,3.2rem); }
.legal__sec h2{ font-size:clamp(1.3rem,1rem + 1.1vw,1.75rem); margin-bottom:.9rem; }
.legal__sec .dlist li{ font-size:.98rem; }

/* ---- 14. Newsletter ---------------------------------------------------- */
.signup{ background:var(--cream-deep); }
.signup__in{ display:grid; grid-template-columns:1.1fr 1fr;
             gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:800px){ .signup__in{ grid-template-columns:1fr; } }

.form{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.6rem; }
.form input[type=email]{
  flex:1 1 240px; font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--hair); border-radius:2px;
  padding:.95em 1.1em;
  transition:border-color .25s var(--ease);
}
.form input[type=email]::placeholder{ color:#A79B8C; }
.form input[type=email]:focus{ border-color:var(--gold); outline:none; }
.form__note{ font-size:.82rem; color:var(--muted); margin-top:.9rem; }
.form__msg{ font-family:var(--sans); font-size:.78rem; letter-spacing:.06em;
            margin-top:.9rem; min-height:1.2em; }
.form__msg[data-state="ok"]{ color:var(--gold); }
.form__msg[data-state="err"]{ color:#A6414A; }

/* ---- 15. Footer -------------------------------------------------------- */
.site-foot{ background:var(--ink); color:#B9AE9E; padding-block:clamp(3rem,7vw,5rem); }
.site-foot a{ color:#D9CFC0; text-decoration:none;
              transition:color .25s var(--ease); }
.site-foot a:hover{ color:var(--gold-lite); }
.foot__grid{ display:grid; gap:clamp(2rem,5vw,3.5rem);
             grid-template-columns:1.4fr repeat(2,minmax(140px,1fr)); }
@media (max-width:700px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
.foot h5{ font-family:var(--sans); font-size:.68rem; letter-spacing:.2em;
          text-transform:uppercase; color:#FBF6EF; margin:0 0 1.1rem; font-weight:500; }
.foot ul{ list-style:none; padding:0; margin:0; }
.foot li{ margin-bottom:.65rem; font-size:.92rem; }
.foot__brand{ font-family:var(--display); font-size:1.5rem; color:#FBF6EF;
              margin-bottom:.8rem; }
.foot__legal{ border-top:1px solid rgba(255,255,255,.09); margin-top:clamp(2.5rem,5vw,3.5rem);
              padding-top:1.8rem; display:flex; justify-content:space-between;
              gap:1.5rem; flex-wrap:wrap; font-size:.82rem; }

/* ---- 16. Reveal on scroll ---------------------------------------------- */
.js [data-reveal]{ opacity:0; transform:translateY(22px);
               transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal][data-shown="true"]{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{ opacity:1; transform:none; transition:none; }
}
/* staggered shelf entrance */
.shelf .book{ transition-delay:calc(var(--i,0) * 70ms); }

/* ---- 17. Utilities ----------------------------------------------------- */
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; }
.mt-3{ margin-top:clamp(2rem,5vw,3.2rem); }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
     clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:.9em 1.4em;
  font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{ left:.5rem; top:.5rem; }