/* Cook Better, Waste Less — landing page v3
   ---------------------------------------------------------------------------
   Built to a skeleton measured off the Glucose Goddess Method page, then
   corrected twice against what the client could actually read.

   The measurements that drive this file:
     hero        two columns, 550px images / 450px details, on the ground, no card
     hero height 686px there — it lands inside one screen
     marquee     portrait cards 256x335, 10px gaps, right-to-left, 43px/second,
                 stopped on hover
     navy band   28px, weight 400, UPRIGHT, letterspaced — not display italic
     reviews     14.3px sans cards, name bold, date, title bold, body
     content     capped at 1000px; page ends on one solid colour

   THE LEGIBILITY RULE, which the first two drafts broke:
     the italic display face is for the product title and section headings ONLY.
     Bands, quotes, prices, decks, captions and signatures are the upright sans.
     Setting a whole page in a high-contrast display italic is what made this
     hard to read — the hairlines fall under a pixel and the letterform breaks.
     Newsreader replaces Bodoni Moda for the same reason: it is a screen-reading
     face with low stroke contrast and a large x-height, so it survives at size
     and reverses out of navy without dissolving.

   The palette is one colour for every mark, the way theirs is. Ours is the
   cover navy. Rust exists on our cover and not on theirs, and it gets exactly
   one job on this page: the live countdown.                                  */

:root{
  --ink:    #14243d;
  --ink-70: rgba(20,36,61,.70);
  --ink-45: rgba(20,36,61,.45);   /* hairlines and icon fills only — 2.67:1 */
  --ink-62: rgba(20,36,61,.62);   /* 4.30:1 — the ink for small type   */
  --ink-15: rgba(20,36,61,.15);
  --ground: #f2efe6;
  --paper:  #fbfaf6;
  --rust:      #c1521c;   /* cover rust — 4.07:1 on the ground */
  --rust-lift: #e8a06a;   /* lightened for navy — 7.16:1        */

  --disp: "Newsreader", "Instrument Serif", Georgia, serif;
  --body: "DM Sans", -apple-system, "Segoe UI", sans-serif;

  --site: 1169px;
  --text: 1000px;
  --pad:  clamp(20px, 4vw, 48px);
  --marquee-speed: 43;          /* px per second, measured off the reference */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; display:block; }
p{ margin:0 0 1em; }
a{ color:inherit; }

/* the display face — title and section headings, nowhere else */
.title,h2{
  font-family:var(--disp); font-style:italic; font-weight:600;
  line-height:1.1; letter-spacing:-.005em; margin:0;
  font-optical-sizing:auto;
}

/* ─────────────────────────────── topbar */

.topbar{
  background:var(--ink); color:var(--ground); text-align:center;
  padding:11px var(--pad); font-size:12px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
}
.topbar p{ margin:0; }
.tb-label{ opacity:.68; margin-right:.55em; }
.topbar time{ font-variant-numeric:tabular-nums; color:var(--rust-lift); }

/* ─────────────────────────────── header: menu · wordmark · cart */

.site{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:16px var(--pad); gap:12px;
}
.burger{
  justify-self:start; width:38px; height:30px; padding:7px 4px; border:0;
  background:none; cursor:pointer; display:grid; gap:5px; align-content:center;
}
.burger span{ display:block; height:1.5px; background:var(--ink); border-radius:2px; }

.wordmark{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--ink);
}
/* The wordmark is drawn, not typeset — the letterforms are paths, so it does
   not depend on a webfont loading and it cannot be re-spaced by a font swap. */
.wordmark .wm{ height:30px; width:auto; display:block; margin-bottom:-4px; }
.site-foot .wordmark .wm{ height:34px; margin:0 auto -5px; }
.cart-link{ justify-self:end; color:var(--ink); }
.cart-link svg{ width:22px; height:22px; }

/* ─────────────────────────────── slide-in nav */

.scrim{
  position:fixed; inset:0; z-index:40; background:rgba(20,36,61,.45);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s, visibility 0s linear .22s;
}
.scrim.is-on{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.nav{
  position:fixed; z-index:41; top:0; left:0; bottom:0; width:min(330px,86vw);
  background:var(--ground); padding:26px var(--pad);
  transform:translateX(-100%); visibility:hidden;
  transition:transform .26s ease, visibility 0s linear .26s;
  display:flex; flex-direction:column;
  border-right:1px solid var(--ink-15);
}
.nav.is-on{ transform:none; visibility:visible; transition-delay:0s; }
.nav-close{
  align-self:flex-end; border:0; background:none; cursor:pointer;
  font-size:30px; line-height:1; color:var(--ink); padding:0 2px 8px;
}
.nav ul{ list-style:none; margin:14px 0 0; padding:0; }
.nav li{ border-bottom:1px solid var(--ink-15); }
.nav li a{
  display:block; padding:16px 2px; text-decoration:none;
  font-size:17px; font-weight:500;
}
.nav li a:hover{ opacity:.6; }
.nav-foot{
  margin-top:auto; font-size:12px; color:var(--ink-45); line-height:1.5;
  letter-spacing:.04em;
}

/* ─────────────────────────────── hero (and the repeat, same shape) */

.hero{
  max-width:var(--site); margin:0 auto;
  padding:clamp(14px,2vw,26px) var(--pad) clamp(40px,5vw,64px);
  display:grid; gap:clamp(28px,4.5vw,64px); grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){
  .hero{ grid-template-columns:minmax(0,550px) minmax(0,450px); justify-content:center; }
}
/* grid items default to min-width:auto, and the unwrapped thumb strip would
   otherwise push the whole hero wider than a phone screen */
.shots,.buybox{ min-width:0; }

/* One fixed frame for every image, so switching a thumb never moves the page.
   The cover is a tall 7:9.5 book and the interior spreads are landscape; both
   are contained inside the same box instead of resizing it. */
/* The image is taken out of flow: a grid or flow child keeps min-height:auto,
   so the cover's intrinsic 1024x1536 punched straight through the frame and
   made the hero 1,669px tall. Absolute fill makes aspect-ratio authoritative. */
.stage{ position:relative; height:clamp(330px,40vw,450px); }
.stage img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}
.stage img.is-cover{
  filter:drop-shadow(0 10px 22px rgba(20,36,61,.22));
}
.arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--ink-15);
  background:var(--ground); color:var(--ink); font-size:16px; line-height:1;
  cursor:pointer; display:grid; place-items:center;
}
.arrow:hover{ background:var(--ink); color:var(--ground); border-color:var(--ink); }
.prev{ left:-14px; } .next{ right:-14px; }

.thumbs{
  display:flex; gap:5px; flex-wrap:nowrap; overflow-x:auto; margin-top:16px;
  scrollbar-width:none; padding-bottom:2px;
}
.thumbs::-webkit-scrollbar{ display:none; }
.thumb{
  flex:0 0 auto; width:40px; height:54px; padding:0; border:0;
  background:var(--paper); border-radius:3px; overflow:hidden; cursor:pointer;
  opacity:.5; transition:opacity .15s;
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb img{ object-position:center top; }
.thumb.is-on{ opacity:1; box-shadow:0 0 0 1px var(--ink); }
.stage-cap{
  margin:10px 0 0; font-size:12px; letter-spacing:.06em; color:var(--ink-45);
}

/* the buy column: no card, straight on the ground */
.buybox{ text-align:center; }
.kicker{
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-45); margin:0 0 14px;
}
.buybox .title{ font-size:clamp(40px,5.4vw,60px); }
.deck{
  font-family:var(--body); font-size:16.5px; font-weight:400; line-height:1.5;
  margin:18px 0 0;
}
.deck.lead{ font-weight:500; }
.deck strong{ font-weight:700; }
.deck em{ font-style:italic; }

.buy{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  margin-top:26px; padding:17px 20px; border-radius:8px;
  background:var(--ink); color:#fff; text-decoration:none;
  font-size:19px; font-weight:600; line-height:1.2;
  transition:opacity .15s, transform .08s;
}
.buy:hover{ opacity:.9; }
.buy:active{ transform:translateY(1px); }
.amt b{ font-weight:700; }
.amt s{ opacity:.55; font-weight:400; margin-left:.35em; }


/* ─────────────────────────────── the moving band
   Right-to-left at a measured 43px/second, stopped while the pointer is on it.
   script.js duplicates the run and sets the duration from the real rendered
   width, so the speed is the same on a phone as on a desktop. */

.marquee{ overflow:hidden; }
.track{
  display:flex; gap:10px; width:max-content;
  animation:marquee linear infinite;
  animation-duration:var(--dur, 60s);
}
.marquee:hover .track,
.marquee:focus-within .track{ animation-play-state:paused; }
.track img{
  flex:0 0 auto; width:clamp(190px,20vw,256px); aspect-ratio:.764;
  object-fit:cover; border-radius:2px;
}
/* --shift is one full run of images plus one gap, set by script.js from the
   real rendered width, so the loop seam is invisible at any screen size. */
@keyframes marquee{ from{ transform:translate3d(0,0,0); }
                    to  { transform:translate3d(calc(var(--shift, 50%) * -1),0,0); } }

/* ─────────────────────────────── navy band — upright, like theirs */

.band{
  background:var(--ink); color:var(--ground);
  padding:clamp(38px,4.4vw,52px) var(--pad); text-align:center;
}
.band p{
  margin:0; font-family:var(--body); font-weight:500;
  font-size:clamp(17px,2.4vw,28px); letter-spacing:.1em; text-transform:uppercase;
  line-height:1.4;
}

/* ─────────────────────────────── prose */

.prose{
  max-width:760px; margin:0 auto; padding:clamp(48px,6vw,76px) var(--pad) 0;
  text-align:center; font-size:17.5px; line-height:1.6;
}
.prose p{ margin:0 auto 1.1em; }
.prose strong{ font-weight:700; }
.prose em{ font-style:italic; }

/* ─────────────────────────────── what's inside */

.inside{ padding:clamp(40px,5vw,64px) 0 0; }
.inside h2{ text-align:center; font-size:clamp(32px,4.4vw,50px); margin:0 0 28px; }
.cards{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:0 var(--pad) 6px; scrollbar-width:none;
}
.cards::-webkit-scrollbar{ display:none; }
.cards article{
  flex:0 0 auto; width:min(310px,80vw); background:var(--paper);
  border-radius:10px; overflow:hidden; scroll-snap-align:center;
}
.cards img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 22%; background:#fff; }
.cards h3{
  font-family:var(--body); font-size:17px; font-weight:700; letter-spacing:.01em;
  margin:18px 20px 8px;
}
.cards p{ margin:0 20px 20px; font-size:14.5px; line-height:1.5; color:var(--ink-70); }
@media (min-width:1300px){ .cards{ justify-content:center; } }

/* ─────────────────────────────── standalone buttons */

.cta{ text-align:center; padding:clamp(36px,4.6vw,54px) var(--pad); }
.pill{
  display:inline-block; background:var(--ink); color:#fff; text-decoration:none;
  font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:17px 42px; border-radius:8px; transition:opacity .15s, transform .08s;
}
.pill:hover{ opacity:.9; } .pill:active{ transform:translateY(1px); }

/* ─────────────────────────────── sources */

.proof{ text-align:center; padding:0 var(--pad) clamp(40px,5vw,60px); }
.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-45); margin:0 0 14px;
}
.q{
  font-family:var(--body); font-weight:500; font-size:clamp(18px,2.4vw,24px);
  line-height:1.45; max-width:30ch; margin:0 auto 14px;
}
.attrib{
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-45); margin:0;
}

/* ─────────────────────────────── reviews */

.reviews{ padding:clamp(36px,4.6vw,56px) 0; }
.reviews h2{ text-align:center; font-size:clamp(30px,4.2vw,46px); margin:0 0 8px; }
.reviews-note{
  text-align:center; font-size:12px; color:var(--ink-45); margin:0 auto 24px;
  max-width:46ch; padding:0 var(--pad); letter-spacing:.02em;
}
.review-rail{
  display:flex; gap:14px; overflow-x:auto; padding:0 var(--pad) 6px;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.review-rail::-webkit-scrollbar{ display:none; }
.review-rail figure{
  flex:0 0 auto; width:min(300px,80vw); margin:0; padding:20px 22px;
  background:var(--paper); border-radius:10px; scroll-snap-align:center;
  display:flex; flex-direction:column; gap:8px;
}
.rv-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.rv-name{ font-size:14.5px; font-weight:700; }
.rv-src{ font-size:11.5px; color:var(--ink-45); white-space:nowrap; }
.review-rail blockquote{ margin:0; font-size:14.5px; line-height:1.5; font-weight:500; }
.rv-on{ font-size:11.5px; color:var(--ink-45); margin:auto 0 0; }

/* ─────────────────────────────── navy showcase */

.showcase{ background:var(--ink); color:var(--ground); padding:clamp(46px,5.5vw,66px) 0; }
.showcase .line{
  font-family:var(--disp); font-style:italic; font-weight:600;
  font-size:clamp(25px,3.4vw,40px); line-height:1.2; text-align:center;
  max-width:22ch; margin:0 auto clamp(30px,3.5vw,42px); padding:0 var(--pad);
}
.showcase .rail{ display:flex; gap:0; overflow-x:auto; scrollbar-width:none; }
.showcase .rail::-webkit-scrollbar{ display:none; }
.showcase .rail img{
  flex:0 0 auto; width:clamp(170px,16vw,210px); height:clamp(170px,16vw,210px);
  object-fit:cover;
}

/* ─────────────────────────────── author */

.author{
  max-width:var(--text); margin:0 auto; padding:clamp(48px,6vw,72px) var(--pad);
  display:grid; gap:clamp(24px,4vw,48px); grid-template-columns:180px 1fr;
  align-items:center;
}
.author img{ width:100%; aspect-ratio:1; object-fit:cover; object-position:center; border-radius:50%; }
.author .title{ font-size:clamp(28px,3.6vw,40px); margin-bottom:14px; }
.author p{ font-size:16.5px; line-height:1.55; }
.sig{ font-family:var(--body); font-weight:500; font-size:16px; margin:0 0 1em; }
.textlink{ font-size:15px; font-weight:700; text-decoration:none; border-bottom:1px solid var(--ink-15); }
.textlink:hover{ border-bottom-color:currentColor; }

/* ─────────────────────────────── repeat offer */

.repeat{ padding-top:clamp(20px,3vw,40px); border-top:1px solid var(--ink-15); }
.repeat .stage{ height:clamp(300px,34vw,380px); }

/* ─────────────────────────────── faq, running into the footer */

.faq{
  background:var(--ink); color:var(--ground);
  padding:clamp(48px,6vw,72px) var(--pad) clamp(30px,4vw,44px);
}
.faq h2{ text-align:center; font-size:clamp(32px,4.4vw,50px); margin:0 auto 28px; }
.faq details{ max-width:720px; margin:0 auto; border-top:1px solid rgba(242,239,230,.22); }
.faq details:last-of-type{ border-bottom:1px solid rgba(242,239,230,.22); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 38px 20px 0; position:relative;
  font-weight:700; font-size:16.5px; line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  font-size:24px; font-weight:400; opacity:.6;
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{
  margin:0 0 22px; font-size:15.5px; line-height:1.55; opacity:.85; padding-right:38px;
}

/* ─────────────────────────────── footer, same navy, no seam */

.site-foot{
  background:var(--ink); color:var(--ground);
  padding:clamp(30px,4vw,48px) var(--pad) 110px; text-align:center; font-size:12.5px;
}
.site-foot .wordmark{ color:var(--ground); margin-bottom:16px; }
.site-foot p{ margin:0 0 9px; opacity:.7; }
.foot-links a{ text-decoration:none; border-bottom:1px solid rgba(242,239,230,.3); }
.site-foot .small{ max-width:54ch; margin:0 auto; }

/* ─────────────────────────────── sticky buy bar (phone) */

.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:none; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 16px; background:var(--ground); border-top:1px solid var(--ink-15);
  transition:transform .22s ease;
}
.sticky .amt{ font-size:19px; font-weight:700; }
.sticky .amt s{ font-size:14px; font-weight:400; }
.sticky .pill{ padding:14px 26px; font-size:12px; }
.sticky.is-hidden{ transform:translateY(115%); }

/* ─────────────────────────────── phone */

@media (max-width:899px){
  .prev{ left:-4px; } .next{ right:-4px; }
  .buybox .title{ font-size:clamp(38px,11vw,54px); }
  .author{ grid-template-columns:1fr; text-align:center; }
  .author img{ width:150px; margin:0 auto; }
  .sticky{ display:flex; }
  .stage{ height:clamp(330px,58vw,430px); }
  .repeat .stage{ height:clamp(280px,50vw,340px); }
  .wordmark .wm{ height:26px; margin-bottom:-3px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
  .track{ animation:none; }
  .marquee{ overflow-x:auto; }
}

/* ─────────────────────────────── about page */

.page{ max-width:var(--text); margin:0 auto; padding:0 var(--pad); }
.page-head{ text-align:center; padding:clamp(24px,4vw,44px) 0 0; }
.page-head .title{ font-size:clamp(30px,4.4vw,50px); }
.page-lede{
  max-width:60ch; margin:20px auto 0; font-size:17.5px; line-height:1.6;
}
.page-figure{ margin:clamp(32px,4.5vw,52px) 0 0; }
.page-figure img{
  width:100%; max-height:440px; object-fit:cover; object-position:center 38%;
  border-radius:10px;
}
.page-body{ max-width:66ch; margin:0 auto; padding:clamp(32px,4.5vw,52px) 0 0; }
.page-body p{ font-size:17px; line-height:1.68; margin:0 0 1.15em; }
.page-body h2{
  font-size:clamp(24px,3vw,32px); margin:1.8em 0 .55em;
}
/* a chapter reference, in the book's own Part.Chapter form */
.ref{
  font-size:11.5px; font-weight:700; letter-spacing:.06em; vertical-align:.35em;
  color:var(--ink-45); white-space:nowrap; margin-left:.1em;
}
.page-body .sig{ margin-top:1.6em; }
.page-cta{ text-align:center; padding:clamp(36px,5vw,60px) 0 clamp(48px,6vw,80px); }
.page-close{ max-width:62ch; margin:0 auto 26px; font-size:16.5px; line-height:1.6; }

/* ─────────────────────────────── polish pass
   One icon system (24-unit box, 1.6 stroke, round caps) replacing three
   hand-built shapes that shared no grid. Plus the craft the page was missing:
   focus that is visible, tap targets that clear 44px, rails that admit they
   scroll, and numerals that do not reflow while a countdown ticks. */

.ic{ width:22px; height:22px; display:block; flex:0 0 auto; }

/* header controls now sit on the same optical grid and clear 44px on touch */
.burger{
  width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; color:var(--ink); margin-left:-11px;
  border-radius:8px;
}
.cart-link{
  width:44px; height:44px; display:grid; place-items:center; color:var(--ink);
  margin-right:-11px; border-radius:8px;
}
.burger:hover,.cart-link:hover{ background:rgba(20,36,61,.06); }
.nav-close{
  width:44px; height:44px; display:grid; place-items:center; padding:0;
  margin:-6px -10px 0 0; border-radius:8px;
}
.nav-close:hover{ background:rgba(20,36,61,.06); }
.arrow .ic{ width:18px; height:18px; }

/* the three promises, which were plain text between middots */
ul.assure{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px 20px; margin:16px 0 0; padding:0;
  font-size:12.5px; color:var(--ink-70);
}
ul.assure li{ display:flex; align-items:center; gap:7px; }
ul.assure .ic{ width:16px; height:16px; opacity:.55; }
.repeat ul.assure,.showcase ul.assure{ color:rgba(242,239,230,.72); }
.repeat ul.assure .ic{ opacity:.7; }

/* visible focus — the page had none, which reads as unfinished on any
   keyboard pass and is the cheapest polish on the list */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:4px;
}
.faq :where(a,button,summary):focus-visible,
.repeat :where(a,button):focus-visible,
.site-foot :where(a,button):focus-visible{ outline-color:var(--ground); }

::selection{ background:rgba(20,36,61,.14); }

/* numerals that do not shuffle while the clock ticks or the price swaps */
.topbar time,.amt,.price,.buy .amt{ font-variant-numeric:tabular-nums; }

/* a horizontal rail should look scrollable before you touch it */
.cards,.review-rail,.thumbs,.showcase .rail{
  scroll-padding-inline:var(--pad);
  -webkit-overflow-scrolling:touch;
}
.inside,.reviews{ position:relative; }
.inside::after,.reviews::after{
  content:""; position:absolute; top:0; right:0; bottom:6px; width:clamp(24px,5vw,64px);
  background:linear-gradient(90deg, rgba(242,239,230,0), var(--ground));
  pointer-events:none;
}
@media (min-width:1300px){ .inside::after{ display:none; } }

/* cards lift slightly on hover — enough to read as interactive, not enough to
   betray the flat editorial surface */
.cards article,.review-rail figure{
  border:1px solid rgba(20,36,61,.07);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cards article:hover{
  transform:translateY(-2px); box-shadow:0 8px 24px rgba(20,36,61,.09);
}
.thumb{ transition:opacity .15s, box-shadow .15s; }
.thumb:hover{ opacity:.85; }

/* the buy button is the most important object on the page and was flat */
.buy{ box-shadow:0 1px 2px rgba(20,36,61,.18), 0 8px 20px rgba(20,36,61,.16); }
.buy:hover{ opacity:1; box-shadow:0 1px 2px rgba(20,36,61,.2), 0 12px 28px rgba(20,36,61,.22); }
.pill{ box-shadow:0 1px 2px rgba(20,36,61,.16), 0 6px 16px rgba(20,36,61,.14); }

/* headings should not leave one word alone on the last line */
.inside h2,.faq h2,.reviews h2,.showcase .line,.q{ text-wrap:balance; }
.deck,.prose p{ text-wrap:pretty; }

@media (max-width:899px){
  .nav li a{ padding:18px 2px; }        /* 44px+ rows */
  ul.assure{ gap:6px 14px; font-size:12px; }
}

/* ─────────────────────────────── audit fixes
   Everything below was found by measuring the built page in a real browser,
   then independently re-measured before being applied. Two of these are
   regressions from my own previous pass, which is why they are first. */

/* REGRESSION 1 — .repeat is .hero.repeat on the LIGHT ground, not navy. The
   previous pass coloured its three promises as if it were a dark section, so
   they were near-invisible cream-on-cream under the second buy button. */
.repeat ul.assure{ color:var(--ink-62); }
.repeat ul.assure .ic{ opacity:.55; }

/* REGRESSION 2 — same mistake in the focus ring: a light outline on a light
   ground meant tabbing to the second Add-to-cart showed no focus at all. */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:4px;
}
.faq :where(a,button,summary):focus-visible,
.showcase :where(a,button):focus-visible,
.band :where(a,button):focus-visible,
.topbar :where(a,button):focus-visible,
.site-foot :where(a,button):focus-visible{ outline-color:var(--ground); }

/* CRITICAL — justify-content:center on an OVERFLOWING flex container pins the
   overflow to the left of scrollLeft:0, so the first card was cut off and
   could not be scrolled back to. 95px of card was simply unreachable. */
@media (min-width:1300px){ .cards{ justify-content:safe center; } }

/* small type moves off the 2.67:1 token */
.kicker,.eyebrow,.attrib,.stage-cap,.rv-src,.rv-on,.reviews-note,.nav-foot,.ref,
ul.assure,.site-foot p,.small{ color:var(--ink-62); }
.site-foot p,.site-foot .small{ color:rgba(242,239,230,.78); }

/* selection had no foreground colour and no dark-ground variant, so selecting
   anything in the navy third produced navy-on-navy */
::selection{ background:rgba(193,82,28,.20); color:var(--ink); }
.faq ::selection,.site-foot ::selection,.showcase ::selection,
.band ::selection,.topbar ::selection{ background:rgba(232,160,106,.32); color:var(--ground); }

/* the gallery arrows sat at 34px on the exact page colour behind a 15% hairline */
.arrow{
  width:44px; height:44px; background:var(--paper);
  border:1px solid rgba(20,36,61,.10);
  box-shadow:0 1px 2px rgba(20,36,61,.10), 0 4px 12px -4px rgba(20,36,61,.18);
  transition:background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.arrow:hover{ background:var(--ink); color:var(--ground); border-color:var(--ink); }
.arrow:active{ transform:translateY(-50%) scale(.94); }
.prev{ left:-18px; } .next{ right:-18px; }
@media (max-width:899px){ .prev{ left:-8px; } .next{ right:-8px; } }

/* cards were --paper on --ground: a 1.10:1 difference, i.e. no edge at all */
:root{ --lift-1: 0 1px 2px rgba(20,36,61,.05), 0 4px 14px -4px rgba(20,36,61,.10); }
.cards article,.review-rail figure{
  border:1px solid rgba(20,36,61,.10); box-shadow:var(--lift-1);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cards article:hover,.review-rail figure:hover{
  transform:translateY(-2px); border-color:rgba(20,36,61,.16);
  box-shadow:0 2px 4px rgba(20,36,61,.07), 0 12px 28px -8px rgba(20,36,61,.16);
}

/* the buy button animated opacity and transform but not the shadow it had just
   been given, so the shadow snapped on with no easing */
.buy{
  transition:background-color .18s ease, box-shadow .18s ease, transform .08s ease;
  box-shadow:0 1px 2px rgba(20,36,61,.18), 0 8px 20px -8px rgba(20,36,61,.34);
}
.buy:hover{
  opacity:1; background:#1d3050;
  box-shadow:0 1px 2px rgba(20,36,61,.20), 0 14px 30px -10px rgba(20,36,61,.42);
}
.pill{ transition:background-color .18s ease, box-shadow .18s ease, transform .08s ease; }
.pill:hover{ opacity:1; background:#1d3050; }

/* the phone buy bar is the only chrome a phone buyer sees for most of the page,
   and it was sitting under the home indicator */
.sticky{
  background:color-mix(in srgb, var(--ground) 86%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
          backdrop-filter:blur(14px) saturate(1.5);
  border-top:0;
  box-shadow:0 -1px 0 rgba(20,36,61,.12), 0 -10px 30px -14px rgba(20,36,61,.28);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
}

/* swiping past the end of a hidden-scrollbar rail was handing the gesture to
   the browser and triggering back-navigation */
.cards,.review-rail,.thumbs,.showcase .rail{
  overscroll-behavior-x:contain; scroll-padding-inline:var(--pad);
}

/* hovering the SELECTED thumbnail was dimming it — the active state fading
   under the pointer reads as a bug */
.thumb{ box-shadow:inset 0 0 0 1px rgba(20,36,61,.10); }
.thumb:not(.is-on):hover{ opacity:.85; }
.thumb.is-on{ opacity:1; box-shadow:0 0 0 1.5px var(--ink); }

/* letter-spacing adds a trailing space after the last character, so every
   centred letterspaced line sat half its tracking left of true centre */
.kicker{ text-indent:.22em; } .eyebrow{ text-indent:.22em; }
.attrib{ text-indent:.2em; }  .band p{ text-indent:.1em; }
.topbar p{ text-indent:.13em; } .pill{ text-indent:.12em; }

/* tracking was flat at every size: no tightening at 60px, too much at 16px */
.buybox .title{ letter-spacing:-.018em; }
.inside h2,.faq h2{ letter-spacing:-.016em; }
.reviews h2{ letter-spacing:-.015em; }
.showcase .line{ letter-spacing:-.014em; }
.author .title{ letter-spacing:-.008em; }

/* the testimonials read as bare sentences with a name over them */
.review-rail blockquote{ hanging-punctuation:first; }
.review-rail blockquote::before{ content:"\201C"; margin-left:-.39em; }
.review-rail blockquote::after{ content:"\201D"; }

/* the cover is the largest object on the page and had one mid-blur shadow,
   which reads as a sticker rather than a book standing up */
.stage img.is-cover{
  filter:
    drop-shadow(0 1px 1px rgba(20,36,61,.10))
    drop-shadow(0 3px 6px rgba(20,36,61,.12))
    drop-shadow(0 20px 36px rgba(20,36,61,.20));
}

/* hovers that snapped, and a nav hover that faded ink toward the ground */
.burger,.cart-link,.nav-close{ transition:background-color .16s ease; }
.nav li a{ transition:color .16s ease, padding-left .16s ease; }
.nav li a:hover{ opacity:1; color:var(--rust); padding-left:6px; }
.foot-links a{ transition:border-color .16s ease; }
.foot-links a:hover{ border-bottom-color:var(--ground); }
.sig{ color:var(--rust); }

/* the FAQ opened with a hard jump — the most dated interaction left */
.faq details{ interpolate-size:allow-keywords; }
.faq details::details-content{
  block-size:0; overflow:hidden; opacity:0;
  transition:block-size .28s ease, opacity .2s ease, content-visibility .28s;
  transition-behavior:allow-discrete;
}
.faq details[open]::details-content{ block-size:auto; opacity:1; }

/* Firefox on macOS rendered every heading heavier without the pair rule */
body{ -moz-osx-font-smoothing:grayscale; }
#top,#inside,#reviews,#faq,#buy{ scroll-margin-top:24px; }

@media (prefers-reduced-motion:reduce){
  .faq details::details-content{ transition:none; }
  .cards article:hover,.review-rail figure:hover{ transform:none; }
}

/* ─────────────────────────────── icon system, made actually consistent
   Declaring stroke-width="1.6" in a 24-unit box does NOT give one weight: the
   rendered stroke is 1.6 x (rendered px / 24), so the same "1.6" measured
   1.467px in the header, 1.200px on the arrows and 1.067px in the promises.
   non-scaling-stroke takes the width out of the viewBox, so one CSS rule owns
   it and every icon on the page draws at the same weight. */
.ic{
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.ic path,.ic circle,.ic rect{ vector-effect:non-scaling-stroke; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* the FAQ marker is now an icon that rotates into a minus */
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-right:0;
}
.faq summary::after{ content:none; }
.faq summary .ic{ opacity:.65; transition:transform .22s ease, opacity .18s ease; flex:0 0 auto; }
.faq summary:hover .ic{ opacity:1; }
.faq details[open] summary .ic{ transform:rotate(45deg); }
.faq details[open] summary .ic path:last-child{ opacity:1; }

/* ─────────────────────────────── sources, moved to the close
   It now sits inside the navy run between the FAQ and the footer, so the
   bottom third of the page stays one colour the way the reference's does. */
.proof{
  background:var(--ink); color:var(--ground);
  padding:clamp(34px,4.4vw,52px) var(--pad) clamp(30px,4vw,44px);
  text-align:center;
}
.proof .eyebrow,.proof .attrib{ color:rgba(242,239,230,.6); }
.proof .q{ color:var(--ground); max-width:32ch; }

/* ─────────────────────────────── footer: social and refund */

.social{
  list-style:none; display:flex; justify-content:center; gap:6px;
  margin:0 0 18px; padding:0;
}
.social a{
  width:44px; height:44px; display:grid; place-items:center;
  color:var(--ground); opacity:.62; border-radius:10px;
  transition:opacity .16s ease, background-color .16s ease;
}
.social a:hover{ opacity:1; background:rgba(242,239,230,.1); }
.ic-brand{ width:21px; height:21px; display:block; }

.foot-links{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:6px 22px; margin:0 0 14px !important; opacity:1 !important;
}
.foot-links a{
  display:inline-flex; align-items:center; gap:7px;
  min-height:34px; padding:4px 2px;
  color:rgba(242,239,230,.8); text-decoration:none;
  border-bottom:1px solid rgba(242,239,230,.28);
  transition:color .16s ease, border-color .16s ease;
}
.foot-links a:hover{ color:var(--ground); border-bottom-color:var(--ground); }
.foot-links .ic{ width:15px; height:15px; opacity:.75; }
[data-refund]{ font-weight:700; }

/* ─────────────────────────────── the showcase band loops too
   Six fixed images ran out around 1,260px and then simply stopped, leaving
   half a wide monitor empty. It is now a second marquee running the opposite
   way, so the two bands read as two separate things rather than one conveyor. */
.showcase .track{
  display:flex; gap:0; width:max-content;
  animation:marquee-b linear infinite;
  animation-duration:var(--dur, 80s);
}
.showcase:hover .track,.showcase:focus-within .track{ animation-play-state:paused; }
.showcase .track img{
  flex:0 0 auto; width:clamp(170px,16vw,215px); height:clamp(170px,16vw,215px);
  object-fit:cover;
}
@keyframes marquee-b{ from{ transform:translate3d(calc(var(--shift, 50%) * -1),0,0); }
                      to  { transform:translate3d(0,0,0); } }
@media (prefers-reduced-motion:reduce){
  .showcase .track{ animation:none; }
  .showcase{ overflow-x:auto; }
}

/* ─────────────────────────────── the countdown bar, made unmissable
   It was navy on navy — the same colour as the header and the footer, so it
   read as chrome and the eye skipped it. The cover rust is already the brand's
   own accent and already clears AA against white at 4.68:1, so it does the job
   without inventing a colour the book does not use. The digits sit in a darker
   inset so they read as a live clock rather than part of the sentence. */

.topbar{
  background:var(--rust); color:#fff;
  padding:13px var(--pad);
  font-size:12.5px; letter-spacing:.14em;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.14);
}
.topbar p{
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap; margin:0;
}
.tb-label{ opacity:.92; margin-right:0; }
.topbar time{
  display:inline-block;
  background:rgba(0,0,0,.26);
  padding:5px 12px 4px; border-radius:6px;
  font-size:14px; font-weight:700; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}

@media (max-width:520px){
  .topbar{ padding:11px 14px; font-size:11px; letter-spacing:.1em; }
  .topbar p{ gap:9px; }
  .topbar time{ font-size:13px; padding:4px 10px 3px; }
}

/* ─────────────────────────────── launch offer, a corner card
   Built to the shape the reference uses: a small card in the corner rather
   than a modal across the middle of the screen. It does not dim the page, does
   not lock scrolling and does not trap focus, because it is not blocking
   anything — you can keep reading with it open, which is the whole reason it
   reads as an offer instead of an interruption. Their card is 320px with a
   positive button and a plain text decline; ours is the same shape in our own
   palette. On a phone it becomes a bottom sheet sitting above the buy bar. */

.pop{
  position:fixed; z-index:55; right:20px; bottom:20px;
  width:min(340px, calc(100vw - 40px));
  visibility:hidden; pointer-events:none;
  transition:visibility 0s linear .24s;
}
.pop.is-on{ visibility:visible; pointer-events:auto; transition-delay:0s; }

.pop-card{
  position:relative; overflow:hidden;
  background:var(--ground); border-radius:14px;
  border:1px solid rgba(20,36,61,.12);
  box-shadow:0 18px 50px -12px rgba(20,36,61,.42);
  opacity:0; transform:translateY(12px);
  transition:opacity .24s ease, transform .24s ease;
}
.pop.is-on .pop-card{ opacity:1; transform:none; }

.pop-img{
  width:100%; height:132px; object-fit:cover; object-position:center;
}
.pop-body{ padding:16px 18px 18px; text-align:center; }

.pop-eyebrow{
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-62); margin:0 0 7px;
}
.pop-clock{
  margin:0 0 12px;
  font-size:20px; font-weight:700; letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  color:#fff; background:var(--rust);
  display:inline-block; padding:6px 14px 5px; border-radius:7px;
}
.pop-h{
  font-family:var(--disp); font-style:italic; font-weight:600;
  font-size:24px; line-height:1.14; letter-spacing:-.012em; margin:0 0 8px;
}
.pop-sub{ font-size:13.5px; line-height:1.5; color:var(--ink-62); margin:0 0 16px; }
.pop-sub b{ color:var(--ink); font-weight:700; }
.pop-sub s{ opacity:.6; }

.pop-yes{
  display:block; background:var(--ink); color:#fff; text-decoration:none;
  font-size:15px; font-weight:700; padding:14px 16px; border-radius:8px;
  box-shadow:0 1px 2px rgba(20,36,61,.18), 0 8px 18px -8px rgba(20,36,61,.34);
  transition:background-color .18s ease;
}
.pop-yes:hover{ background:#1d3050; }
.pop-no{
  display:block; width:100%; margin:11px 0 0; padding:6px 0;
  border:0; background:none; cursor:pointer;
  font-family:var(--body); font-size:12.5px; color:var(--ink-62);
  text-decoration:underline; text-underline-offset:3px;
}
.pop-no:hover{ color:var(--ink); }

.pop-x{
  position:absolute; top:9px; right:9px; z-index:2;
  width:32px; height:32px; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(242,239,230,.92); color:var(--ink);
  box-shadow:0 1px 4px rgba(20,36,61,.28);
}
.pop-x .ic{ width:17px; height:17px; }
.pop-x:hover{ background:var(--ink); color:var(--ground); }

/* on a phone it is a bottom sheet, clearing the sticky buy bar */
@media (max-width:640px){
  .pop{ right:10px; left:10px; bottom:calc(70px + env(safe-area-inset-bottom)); width:auto; }
  .pop-img{ height:104px; }
  .pop-body{ padding:14px 16px 16px; }
}

@media (prefers-reduced-motion:reduce){
  .pop-card{ transition:none; transform:none; }
}

/* ─────────────────────────────── pre-launch review fixes */

/* --ink-62 measured 4.29:1 on the ground, just under the 4.5:1 AA floor for
   text below 18.66px — and it carried nearly all the small copy on the page. */
:root{ --ink-62: rgba(20,36,61,.70); }   /* 5.47:1 measured */
.tb-label{ opacity:1; }                  /* plain white on the rust is 4.68:1 */


/* The pop-up became a bottom sheet at 640px but the buy bar appears at 899px,
   so between those widths the card sat directly on top of the buy button. */
@media (max-width:899px){
  .pop{
    right:10px; left:10px; width:auto;
    bottom:calc(76px + env(safe-area-inset-bottom));
  }
  .pop-img{ height:104px; }
  .pop-body{ padding:14px 16px 16px; }
}

/* the About portrait had no intrinsic ratio, so it collapsed to 0 and then
   pushed 440px of content down the moment it decoded */
.page-figure img{ aspect-ratio:3 / 2; }

/* the buy bar must not be reachable while it is translated off-screen */
.sticky[inert]{ visibility:hidden; }

/* the source line under the safety note — a claim with a citation attached */
.proof .src{
  max-width:52ch; margin:14px auto 0; font-size:11.5px; line-height:1.5;
  color:rgba(242,239,230,.62);
}
.proof .src em{ font-style:italic; }