/* =============================================================================
   Brittify homepage · homepage v7, live from 15 Sept 2026
   Grammar: chaptered editorial (scroll-craft). Peak: chapter 3, the Time Drop timeline.
   Brand tokens locked. Wordmark and tick mark unchanged from the live site.
   Motion: one small scroll engine (~110 lines), no libraries, reduced-motion = static book.
   ============================================================================= */
:root{
  --navy:#1B2A4A; --navy-deep:#121D34; --ink:#22283A;
  --red:#D9483B; --red-ink:#D73C2E; --red-text:#C93427; --red-deep:#A9301F; --red-pale:#FBEAE7;
  --cream:#FAF6EF; --paper:#FFFFFF; --sand:#F3EFE6;
  --sage:#2E7D5B; --sage-pale:#E8F1EC;
  --gold:#E8B84B; --gold-ink:#86671E; --gold-pale:#FBF1DA;
  --grey:#666D7A; --line:#E2DCD0; --line-strong:#CFC7B7;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --wrap:1120px; --measure:62ch; --r-card:16px; --r-btn:12px;
  --t-fast:150ms; --t-ui:220ms; --t-slow:620ms;
  --ease:cubic-bezier(.23,1,.32,1); --ease-drop:cubic-bezier(.34,1.4,.64,1);
  --shadow:0 1px 2px rgba(27,42,74,.04),0 8px 24px rgba(27,42,74,.07);
  --shadow-lift:0 6px 14px rgba(27,42,74,.08),0 22px 48px rgba(27,42,74,.12);
  --section:clamp(44px,6.5vw,84px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold-pale);color:var(--navy)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--red-text)}
h1,h2,h3{font-family:var(--serif);color:var(--navy);font-weight:600;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,76px);letter-spacing:-.025em;font-variation-settings:"opsz" 144;line-height:1.02}
h2{font-size:clamp(30px,3.8vw,46px);letter-spacing:-.02em;font-variation-settings:"opsz" 120}
h3{font-size:21px;letter-spacing:-.01em;line-height:1.25}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.lede{font-size:19px;line-height:1.6;color:#46506A;max-width:var(--measure)}
.muted{color:var(--grey);font-size:15px}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:4px;box-shadow:0 0 0 6px rgba(232,184,75,.55)}


/* ---------- header: unchanged brand ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.9);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;transition:border-color var(--t-ui),box-shadow var(--t-ui)}
header.site.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(27,42,74,.06)}
.bar{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin:0 auto;padding:12px 24px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand .mark{width:34px;height:34px;flex:none}
.brand .name{font-family:var(--sans);font-weight:800;font-size:20px;color:var(--navy);letter-spacing:-.02em}
.brand .name i{font-style:normal;color:var(--red)}
nav.main{display:flex;gap:4px;margin-left:8px}
nav.main a{font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;padding:9px 12px;border-radius:8px;opacity:.85;transition:background var(--t-fast),opacity var(--t-fast);min-height:44px;display:inline-flex;align-items:center}
nav.main a:hover{opacity:1;background:var(--sand);color:var(--navy)}
.bar .spacer{flex:1}
.navcode{font-size:14.5px;font-weight:600;color:var(--navy);text-decoration:none;border:1.5px solid var(--line-strong);border-radius:999px;padding:9px 15px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.navcode:hover{border-color:var(--navy);background:var(--paper);color:var(--navy)}
.bar .btn{padding:11px 18px;font-size:15px;min-height:44px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--t-ui),transform var(--t-ui)}
header.site.scrolled .bar .btn{opacity:1;transform:none;pointer-events:auto}
/* Below 900px the nav used to be display:none with nothing replacing it, so a phone visitor
   could not reach the books, the course, or the practice page where a book code is redeemed.
   Two rows instead: brand and code pill, then the nav as a scrollable strip. The header's own
   button goes, because the sticky buy bar below carries the commercial CTA on small screens. */
@media(max-width:900px){
  .bar{flex-wrap:wrap;gap:6px 10px;padding:10px 16px}
  .bar .spacer{display:none}
  .bar .btn{display:none}
  .navcode{display:inline-flex;margin-left:auto;font-size:13.5px;padding:8px 13px}
  nav.main{order:3;width:100%;margin-left:0;gap:2px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;border-top:1px solid var(--line);padding-top:6px}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{padding:8px 11px;font-size:14px;white-space:nowrap;min-height:40px}
}
@media(max-width:380px){nav.main a{padding:8px 9px;font-size:13.5px}.navcode{font-size:13px;padding:7px 11px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-size:16.5px;font-weight:600;line-height:1;padding:16px 26px;border-radius:var(--r-btn);border:0;cursor:pointer;text-decoration:none;min-height:52px;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast)}
.btn-primary{background:var(--red-ink);color:#fff;box-shadow:0 4px 0 var(--red-deep)}
.btn-primary:hover{background:var(--red);color:#fff;transform:translateY(-1px);box-shadow:0 5px 0 var(--red-deep)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--red-deep)}
.btn-secondary{background:var(--paper);color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy),0 4px 0 var(--navy)}
.btn-secondary:hover{color:var(--navy);transform:translateY(-1px);box-shadow:inset 0 0 0 2px var(--navy),0 5px 0 var(--navy)}
.btn-secondary:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--navy),0 1px 0 var(--navy)}
.btns{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:560px){.btns .btn{width:100%}}

/* ---------- the folio: where you are in the book ---------- */
.folio{position:fixed;left:22px;bottom:28px;z-index:40;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-ink);opacity:0;transition:opacity var(--t-slow) var(--ease);pointer-events:none;max-width:200px;line-height:1.5}
.folio small{display:block;font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:0;text-transform:none;color:var(--navy);margin-top:2px}
.folio.on{opacity:1}
.folio.night{color:var(--gold)}.folio.night small{color:#fff}
@media(max-width:1200px){.folio{display:none}}

/* ---------- title page ---------- */
.title{padding:clamp(40px,6vw,72px) 0 clamp(32px,5vw,56px)}
.title .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:900px){.title .grid{grid-template-columns:1fr}}
/* the hero image: one illustration, drawn in the cast's style; leans a few degrees with the pointer on desktop */
.heroimg{margin:0;perspective:1200px}
.heroimg img{border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--shadow-lift);transform:rotateX(calc(var(--my,0) * -4deg)) rotateY(calc(var(--mx,0) * 5deg));transition:transform .5s var(--ease);will-change:transform}
.heroimg figcaption{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--grey);margin-top:12px;text-align:center}
.title .eyebrow{margin-bottom:18px}
.title h1 em{font-style:italic;color:var(--red);font-variation-settings:"opsz" 144}
.title .lede{margin-top:22px}
.title .btns{margin-top:30px}
.title .note{margin-top:14px;font-size:14px;color:var(--grey)}

/* ---------- contents: the index that jumps ---------- */
.contents{border-top:1px solid var(--line);padding:0 0 clamp(28px,4vw,44px)}
.contents h2{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);padding:22px 0 8px;font-weight:700;font-variation-settings:normal}
.toc{list-style:none;margin:0;padding:0}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:grid;grid-template-columns:56px 1fr auto 64px;gap:22px;align-items:center;padding:14px 0;text-decoration:none;color:var(--navy);transition:background var(--t-fast)}
.toc a:hover{background:var(--sand);margin:0 -12px;padding:14px 12px}
.toc .n{font-family:var(--serif);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--navy)}
.toc .t{font-family:var(--serif);font-size:clamp(19px,2.2vw,26px);font-weight:600;letter-spacing:-.01em}
.toc .c{font-size:13.5px;color:var(--grey);white-space:nowrap;font-variant-numeric:tabular-nums}
.toc .th{width:64px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.preview-note{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-top:22px;background:var(--gold-pale);border:1px solid #EAD9A6;border-radius:12px;padding:16px 18px;font-size:15px;color:#4A3E12;line-height:1.55}
.preview-note .tag{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);background:#fff;border-radius:999px;padding:5px 10px;white-space:nowrap;margin-top:1px}
.preview-note a{color:var(--navy)}
@media(max-width:560px){.preview-note{grid-template-columns:1fr}}
@media(max-width:640px){.toc a{grid-template-columns:40px 1fr 56px;gap:12px}.toc .c{display:none}.toc .th{width:56px;height:40px}}

/* ---------- chapters: hard cuts of ground ---------- */
.chapter{position:relative;overflow-x:clip}
.chapter.paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chapter.sand{background:var(--sand)}
.chapter.night{background:var(--navy-deep);color:#DCE3F0}
.chapter.night h2,.chapter.night h3{color:#fff}
.chapter.night .lede{color:#B9C4DA}
.plate{padding:var(--section) 0 clamp(20px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:end}
.plate .no{font-family:var(--serif);font-size:15px;color:var(--gold-ink);font-weight:500;letter-spacing:.02em;margin-bottom:10px}
.plate .no b{font-weight:600}
.plate h2{font-size:clamp(34px,4.6vw,56px)}
.plate .lede{margin-top:16px}
.plate figure{margin:0}
.plate figure img{border-radius:var(--r-card);box-shadow:var(--shadow)}
.plate figcaption{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--grey);margin-top:10px}
@media(max-width:860px){.plate{grid-template-columns:1fr;align-items:start}}
.spread{padding:clamp(16px,2.5vw,28px) 0 clamp(28px,4vw,48px)}

/* chapter foot: where the full chapter lives */
.chfoot{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;border-top:1px solid var(--line);padding:16px 0 var(--section);font-size:14.5px;color:#46506A}
.chfoot b{color:var(--navy);font-weight:600}
.chfoot .sp{flex:1}
.chfoot a{white-space:nowrap}
.night .chfoot{border-top-color:#2C3E63;color:#B9C4DA}.night .chfoot b{color:#fff}.night .chfoot a{color:var(--gold)}
/* reveal on entry (fires once, from a visible rest state, rise 14px) */
[data-in]>*{transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-in]:not(.in)>*{opacity:0;transform:translateY(14px)}

/* ---------- chapter 1: the five values ---------- */
.values{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:8px}
.value{text-align:center}
.value img{width:96px;height:96px;margin:0 auto 12px}
.value b{display:block;font-family:var(--serif);font-size:19px;color:var(--navy);font-weight:600;line-height:1.2}
.value span{display:block;font-size:13px;color:var(--grey);margin-top:6px}
@media(max-width:860px){.values{grid-template-columns:repeat(3,1fr)}.value:nth-child(4),.value:nth-child(5){grid-column:span 1}}
@media(max-width:520px){.values{grid-template-columns:repeat(2,1fr)}}

/* ---------- chapter 2: the map wipe ---------- */
.mapwrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,56px);align-items:center}
.mapfig{margin:0;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)}
.in .mapfig{clip-path:inset(0 0 0 0)}
.mapfig img{max-width:420px;margin:0 auto}
.caps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.caps li{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:8px 0;font-size:16px}
.caps li b{color:var(--navy);font-weight:600}
@media(max-width:860px){.mapwrap{grid-template-columns:1fr}}

/* ---------- chapter 3: the peak. Scroll is the timeline. ---------- */
.act{position:relative;height:calc(var(--span,4) * 100vh)}
.act .stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(70px,9vh,110px) 0 clamp(24px,4vh,48px)}
.tl-head{text-align:center}
.tl-head h2{font-size:clamp(26px,3.2vw,40px)}
.tl-year{font-family:var(--serif);font-weight:600;font-size:clamp(64px,11vw,150px);line-height:1;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.04em;margin-top:10px;font-variation-settings:"opsz" 144}
.tl{position:relative;align-self:center;height:clamp(200px,32vh,300px);max-width:1080px;margin:0 auto;width:calc(100% - 48px)}
.tl .line{position:absolute;left:0;right:0;top:62%;height:2px;background:var(--line-strong)}
.tl .line i{position:absolute;left:0;top:0;height:100%;width:calc(var(--p,0) * 100%);background:var(--red);transition:width 80ms linear}
.tl .marker{position:absolute;top:62%;left:calc(var(--p,0) * 100%);width:14px;height:14px;border-radius:50%;background:var(--red);transform:translate(-50%,-50%);box-shadow:0 0 0 5px rgba(217,72,59,.18);transition:left 80ms linear}
.stop{position:absolute;left:var(--x);top:62%;transform:translate(-50%,-100%);width:clamp(76px,9vw,124px);text-align:center;transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.stop img{width:100%;filter:drop-shadow(0 8px 14px rgba(27,42,74,.14));transform:scale(.62);opacity:.28;transition:transform .55s var(--ease-drop),opacity .4s var(--ease)}
.stop .drop{position:absolute;right:-4px;top:-2px;width:46px;height:46px;background:var(--navy);color:var(--cream);border-radius:50% 50% 50% 0;transform:rotate(-45deg) translateY(-30px) scale(.6);opacity:0;display:grid;place-items:center;box-shadow:0 6px 14px rgba(27,42,74,.22);transition:transform .6s var(--ease-drop),opacity .3s}
.stop .drop b{transform:rotate(45deg);font-family:var(--serif);font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
.stop .tick{position:absolute;left:50%;top:100%;width:2px;height:14px;background:var(--line-strong);transform:translateX(-50%)}
.stop.arrived img{transform:scale(1);opacity:1}
.stop.arrived .drop{opacity:1;transform:rotate(-45deg) translateY(0) scale(1)}
.stop.arrived .tick{background:var(--red)}
.stop.now img{transform:scale(1.08)}
.stop:nth-child(odd of .stop){top:auto;bottom:calc(38% - 14px);transform:translate(-50%,100%)}
.stop:nth-child(odd of .stop) .tick{top:auto;bottom:100%}
.tl-cap{text-align:center;max-width:640px;margin:0 auto;min-height:5.2em}
.tl-cap .who{font-family:var(--serif);font-size:clamp(20px,2.3vw,27px);color:var(--navy);font-weight:600;line-height:1.25}
.tl-cap .what{font-size:16px;color:#46506A;margin-top:6px}
.tl-cap .hook{font-family:var(--serif);font-style:italic;color:var(--gold-ink);font-size:16px;margin-top:8px;opacity:0;transition:opacity .5s var(--ease)}
.tl-cap.dwell .hook{opacity:1}
.tl-cap .ref{font-size:12.5px;color:var(--grey);margin-top:6px}
@media(max-width:760px){
  .tl{height:auto;width:calc(100% - 32px);display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px}
  .tl .line,.tl .marker{display:none}
  .stop,.stop:nth-child(odd of .stop){position:static;transform:none;width:100%;top:auto;bottom:auto}
  .stop .tick{display:none}
  .tl-year{font-size:56px}
  .tl-cap{min-height:6.5em}
}

/* ---------- chapter 3, spread: the live question ---------- */
.moment{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,5vw,56px);align-items:center;max-width:1000px}
.moment .disc{width:160px;margin:0 0 14px}
@media(max-width:860px){.moment{grid-template-columns:1fr}}
.qcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;box-shadow:var(--shadow);position:relative}
.qmeta{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px;display:flex;justify-content:space-between;gap:12px}
.qtext{font-family:var(--serif);font-size:24px;line-height:1.3;color:var(--navy);font-weight:600;margin-bottom:20px}
.opts{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.opt{display:flex;gap:13px;align-items:center;width:100%;text-align:left;background:var(--paper);border:1.5px solid var(--line-strong);border-radius:12px;padding:14px 16px;font-family:var(--sans);font-size:17px;color:var(--ink);cursor:pointer;min-height:52px;transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)}
.opt:hover{border-color:var(--navy);background:#FCFAF6;transform:translateX(2px)}
.opt:active{transform:translateY(1px)}
.opt .key{flex:none;width:28px;height:28px;border-radius:8px;background:var(--sand);color:var(--navy);font-weight:700;font-size:13.5px;display:grid;place-items:center}
.opt.right{border-color:var(--sage);background:var(--sage-pale)}.opt.right .key{background:var(--sage);color:#fff}
.opt.wrong{border-color:var(--red);background:var(--red-pale)}.opt.wrong .key{background:var(--red-ink);color:#fff}
.opt[disabled]{cursor:default;transform:none}
.opt .tickmark{margin-left:auto;width:26px;height:26px;stroke:var(--sage);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.opt.right .tickmark{animation:draw .45s var(--ease) forwards .05s}
@keyframes draw{to{stroke-dashoffset:0}}
.teach{margin-top:18px;border-left:3px solid var(--gold);background:var(--sand);border-radius:0 12px 12px 0;padding:18px 20px;display:none;animation:teachin .5s var(--ease)}
.teach.on{display:block}
@keyframes teachin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.teach .verdict{font-weight:700;font-size:15px;margin-bottom:8px}
.teach .verdict.gap{color:var(--red-ink)}.teach .verdict.yes{color:var(--sage)}
.teach p{font-size:15.5px;line-height:1.55;margin:0 0 10px;color:#3F4553}
.teach .why{color:#3A5A8C;font-size:14.5px}
.teach .hook{font-family:var(--serif);font-style:italic;color:var(--gold-ink);font-size:15px}
.teach .ref{font-size:13px;color:var(--grey);margin:0}
.gapchip{position:absolute;right:-8px;top:-20px;background:var(--navy);color:var(--cream);font-size:13px;font-weight:600;padding:9px 14px;border-radius:999px;box-shadow:var(--shadow);transform:translateX(120%);opacity:0;transition:transform .55s var(--ease-drop) .3s,opacity .3s .3s;display:flex;gap:8px;align-items:center}
.gapchip.on{transform:none;opacity:1}
.gapchip i{width:8px;height:8px;border-radius:50%;background:var(--gold);display:block}
.again{margin-top:14px;font-size:14px;color:var(--grey);background:none;border:0;text-decoration:underline;cursor:pointer;font-family:var(--sans);display:none;min-height:44px}
.again.on{display:inline}

/* ---------- chapter 4: the rail (breadth reads sideways) ---------- */
.pan .stage{grid-template-rows:1fr auto auto 1fr;padding-bottom:0;overflow:hidden;align-items:center}
.rail-foot{text-align:center;font-size:14px;color:var(--grey);margin-top:clamp(18px,3vh,32px)}
.rail-foot a{color:var(--navy)}
.rail{display:flex;gap:26px;align-items:flex-start;padding:0 24px;width:max-content;transform:translateX(calc(var(--p,0) * var(--travel,0px) * -1));will-change:transform}
.rail .item{width:clamp(200px,22vw,250px);flex:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.rail .item img{width:150px;margin:0 0 14px}
.rail .item b{display:block;font-family:var(--serif);font-size:21px;color:var(--navy);font-weight:600;line-height:1.2}
.rail .item span{display:block;font-size:14.5px;color:#46506A;margin-top:6px;line-height:1.5}
.rail .item.head{width:clamp(220px,26vw,320px);padding-top:8px}
.rail .item.head h2{font-size:clamp(26px,3vw,38px)}
.rail .item.head p{margin-top:12px;color:#46506A;font-size:16px}
.rail .item.end{width:240px;padding-top:24px;font-family:var(--serif);font-style:italic;color:var(--grey);font-size:17px}
.js .rail .item:not(.head){opacity:calc(.55 + .45 * var(--seen,0))}
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .pan{height:auto}
  .pan .stage{position:static;height:auto;display:block;padding:clamp(20px,3vw,36px) 0 clamp(28px,4vw,48px)}
  .rail{transform:none;width:auto;flex-wrap:wrap;gap:26px 22px}
  .rail .item{opacity:1!important}
}

/* ---------- chapter 5: readiness (night) ---------- */
.ready{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,56px);align-items:center;max-width:900px}
.dial{position:relative;width:260px;height:260px}
.dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial .track{fill:none;stroke:#2C3E63;stroke-width:14}
.dial .arc{fill:none;stroke:var(--gold);stroke-width:14;stroke-linecap:round;stroke-dasharray:691;stroke-dashoffset:691;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.3,1)}
.in .dial .arc{stroke-dashoffset:200}
.dial .num{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.dial .num b{font-family:var(--serif);font-size:64px;color:#fff;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.dial .num b small{font-size:26px;color:#B9C4DA}
.dial .num .lab{font-size:13px;color:var(--gold);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:6px}
.bars{display:grid;gap:14px}
.chbar .lab{display:flex;justify-content:space-between;font-size:14.5px;margin-bottom:6px;color:#DCE3F0}
.chbar .lab b{font-weight:600;color:#fff}
.chbar .trk{height:10px;background:#2C3E63;border-radius:999px;overflow:hidden}
.chbar .trk i{display:block;height:100%;border-radius:999px;background:var(--sage);width:0;transition:width 1.1s var(--ease);transition-delay:var(--d,0s)}
.chbar.weak .trk i{background:var(--red)}
.in .chbar .trk i{width:var(--w)}
.nextstep{margin-top:22px;background:rgba(232,184,75,.12);border:1px solid rgba(232,184,75,.35);border-radius:12px;padding:16px 18px;font-size:15px;color:#F2E9D3;line-height:1.55}
.nextstep b{color:var(--gold)}
@media(max-width:760px){.ready{grid-template-columns:1fr;justify-items:center}}

/* ---------- books and the list ---------- */
.books{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.book{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.book h3{font-size:22px}
.book .price{font-family:var(--serif);font-size:30px;color:var(--navy);font-weight:600;margin-top:4px}
.book .btn{align-self:flex-start;margin-top:auto}
.tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--sage-pale);color:var(--sage);align-self:flex-start}
.tag.gold{background:var(--gold-pale);color:var(--gold-ink)}
.notice{background:var(--sand);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 11px 11px 0;padding:16px 18px;font-size:15px;margin:0 0 var(--section)}
.notice b{color:var(--navy)}
@media(max-width:640px){.books{grid-template-columns:1fr}}
.offer{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start;padding:clamp(8px,2vw,20px) 0 var(--section)}
.offer .no{font-family:var(--serif);font-size:15px;color:var(--gold-ink);margin-bottom:10px}
.offer-art{margin:22px 0 0;max-width:460px}
.offer-art img{border-radius:var(--r-card);border:1px solid var(--line)}
ul.ticks{list-style:none;padding:0;margin:6px 0 0}
ul.ticks li{position:relative;padding:0 0 14px 30px;font-size:16.5px;line-height:1.55}
ul.ticks li::before{content:"";position:absolute;left:2px;top:8px;width:13px;height:8px;border-left:2.5px solid var(--sage);border-bottom:2.5px solid var(--sage);transform:rotate(-45deg)}
.group{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:26px;box-shadow:var(--shadow)}
.field{display:block;margin-bottom:14px;font-size:14px;font-weight:600;color:var(--navy)}
.field .hint{display:block;font-weight:400;color:var(--grey);font-size:13px}
.field input{display:block;width:100%;margin-top:6px;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-strong);border-radius:10px;padding:13px 14px;font-weight:400}
.field input:focus{border-color:var(--navy);outline:3px solid var(--gold);outline-offset:1px}
.form-msg{margin-top:12px;font-size:15px;color:#1E5C41}
form.done .field,form.done button{display:none}
@media(max-width:860px){.offer{grid-template-columns:1fr}}
/* ---------- colophon: the close holds ---------- */
.colophon{padding:var(--section) 0;border-top:1px solid var(--line)}
.colophon p{font-family:var(--serif);font-size:clamp(19px,2.2vw,25px);line-height:1.5;color:var(--navy);max-width:34em;font-variation-settings:"opsz" 30}
.colophon p+p{margin-top:1.1em}
.colophon a{color:var(--red-text);text-decoration-thickness:1.5px;text-underline-offset:5px}
.colophon .small{font-family:var(--sans);font-size:14px;color:var(--grey);margin-top:28px;max-width:60ch}

/* ---------- footer ---------- */
footer.site{background:var(--navy);color:#AFBBD2;padding:52px 0 34px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:34px}
footer.site h4{color:#fff;font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;font-weight:700}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:9px}
footer.site a{color:#D7DEEC;text-decoration:none}
footer.site a:hover{color:var(--gold);text-decoration:underline}
.foot-legal{border-top:1px solid #2C3E63;margin-top:38px;padding-top:22px;font-size:13.5px;color:#8E9BB5}
.foot-legal p{margin:0 0 8px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- reduced motion: the book, still ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .act{height:auto}
  .act .stage{position:static;height:auto;padding:var(--section) 0}
  .tl{height:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .tl .line,.tl .marker,.stop .tick{display:none}
  .stop,.stop:nth-child(odd of .stop){position:static;transform:none;width:100%}
  .stop img{transform:none;opacity:1}
  .stop .drop{opacity:1;transform:rotate(-45deg)}
  .tl-cap .hook{opacity:1}
  .mapfig{clip-path:none}
  .js [data-in]:not(.in)>*{opacity:1;transform:none}
  .in .dial .arc{stroke-dashoffset:200}
}


/* ---------- sticky buy bar ----------------------------------------------------------------
   The page is ~25 screens on a phone and the books sit at screen 20. This keeps the price and
   a real buy button one tap away from the moment the hero leaves, and hides itself over the
   books section so it never covers the thing it points at. Shown by the script in index.html. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(27,42,74,.97);backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid #2C3E63;box-shadow:0 -8px 28px rgba(27,42,74,.22);
  transform:translateY(110%);transition:transform var(--t-ui,.28s) ease;
  padding:max(10px,env(safe-area-inset-bottom,0)) 0 max(10px,env(safe-area-inset-bottom,0))}
.buybar.show{transform:none}
.buybar[hidden]{display:none}
.buybar-in{display:flex;align-items:center;gap:14px;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.buybar-what{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.buybar-what b{color:#fff;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar-what small{color:#B9C4DA;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar-price{margin-left:auto;color:var(--gold);font-family:var(--serif);font-size:22px;white-space:nowrap}
.buybar .btn{white-space:nowrap;min-height:44px}
@media(max-width:560px){
  .buybar-what small{display:none}
  .buybar-in{gap:10px;padding:0 14px}
  .buybar-price{font-size:19px}
  .buybar .btn{padding:11px 15px;font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){.buybar{transition:none}}

/* The chapter foot now leads with a real buy button and a quiet secondary link, rather than two
   equal-weight asks where the free one always won. */
.chfoot .btn-sm{padding:10px 16px;font-size:14.5px;min-height:40px}
.chfoot-quiet{font-size:13.5px;opacity:.75}
.night .chfoot-quiet{color:#B9C4DA}