/* MY AMAZING MACHINE — house style.

   Her tokens, carried from the digital book she supplied, not re-picked:
     --accent #28b487  --accent2 #1d6e8c  --ink #2b2622
     --soft   #6f665e  --paper   #f2f8f6  --line   #e7ddd0
   and her type stack, 'Iowan Old Style' first.

   ⚠ CONTRAST. White on --accent is 2.66:1 and FAILS — a previous build shipped
   white-on-mint buttons past every reviewer because mint LOOKS dark. Ink on mint
   is 5.63:1 and white on --accent2 is 5.74:1, so those are the only two pairings
   used for small text anywhere. checks/contrast.mjs measures the rendered page and
   fails the build if a third one appears.

   ⚠ No inline style="" attributes exist in this build: the production CSP is
   style-src 'self' with no unsafe-inline, and an inline style is silently dropped
   there while looking perfect locally. Anything that needs a per-item value is
   emitted into this file as a generated rule or set from JS as a custom property. */

:root{
  --accent:#28b487; --accent2:#1d6e8c; --ink:#2b2622; --soft:#6f665e;
  --paper:#f2f8f6; --line:#e7ddd0; --white:#fff;
  --deep:#124a5c;              /* deeper than accent2, for scrims over footage */
  --sun:#f7b32b; --coral:#f2765f; --lilac:#9b8ade; --aqua:#4ec8d6;
  --serif:'Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:min(1120px,92vw); --read:min(720px,92vw);
  --r:18px; --shadow:0 10px 34px rgba(18,74,92,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--serif);color:var(--ink);background:var(--paper);
  line-height:1.7;font-size:19px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%}
a{color:var(--accent2)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--accent2);outline-offset:3px;border-radius:6px}

/* ---------- skip link + bar ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--accent2);
  padding:12px 18px;z-index:200;border-radius:0 0 10px 0;font-family:var(--sans);font-weight:600}
.skip:focus{left:0}
.bar{position:sticky;top:0;z-index:60;background:rgba(242,248,246,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar-in{width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:14px;
  min-height:60px;padding:8px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-weight:700;font-size:17px;letter-spacing:.01em;white-space:nowrap}
.brand svg{display:block;flex:none}
.bar nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap;font-family:var(--sans);font-size:14px}
.bar nav a{text-decoration:none;color:var(--soft);padding:7px 12px;border-radius:999px}
.bar nav a:hover{background:var(--white);color:var(--accent2)}
.bar nav a[aria-current=page]{background:var(--accent2);color:var(--white)}
/* On a phone the five nav items wrapped onto two rows and doubled the height of the
   bar on every page. One scrollable row instead — the row itself scrolls, never the
   page, and the fade shows there is more. */
@media(max-width:820px){
  .bar-in{gap:8px}
  .brand span{font-size:15px}
  .bar nav{font-size:13px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .bar nav::-webkit-scrollbar{display:none}
  .bar nav a{padding:6px 10px;white-space:nowrap}
}
@media(max-width:430px){.brand span{display:none}}

/* ---------- full-bleed loop band ---------- */
.band{position:relative;min-height:clamp(360px,58vh,620px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--deep);isolation:isolate}
.band.tall{min-height:clamp(460px,76vh,760px)}
.band video,.band .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* The scrim. Two jobs pulling against each other: the words on top must clear 4.5:1,
   and the picture underneath must stay a picture. Both are gated — checks/contrast.mjs
   for the first, checks/survival.mjs for the second, and the two fail in opposite
   directions so neither can be satisfied by simply darkening this further. */
.band::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,42,52,.22) 0%,rgba(10,42,52,.04) 26%,rgba(10,42,52,.12) 52%,
    rgba(10,42,52,.24) 74%,rgba(10,42,52,.34) 100%)}
/* TWO scrims, doing different jobs.
   `.band::after` is the picture's own grade — a light top, a darker foot — and it is
   what the survival gate protects.
   `.band-in::before` FOLLOWS THE WORDS. A fixed gradient cannot work: a band with a
   kicker, a headline, two lines and two buttons pushes the headline up into the
   transparent third, and that is exactly where "My Amazing Mind" was landing at
   2.35:1. This one is as tall as whatever the words are, on every page. */
.band-in{position:relative;z-index:2;width:var(--wrap);margin:0 auto;padding:48px 0 40px;color:var(--white)}
.band-in::before{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:100vw;top:-104px;bottom:-40px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,36,46,0) 0%,rgba(8,36,46,.20) 20%,rgba(8,36,46,.48) 40%,
    rgba(8,36,46,.62) 60%,rgba(8,36,46,.70) 100%)}
.band-in h1,.band-in h2{margin:0 0 12px;line-height:1.08;letter-spacing:-.01em;
  text-shadow:0 2px 18px rgba(6,30,38,.5)}
.band-in h1{font-size:clamp(38px,6.4vw,74px)}
.band-in h2{font-size:clamp(30px,4.6vw,52px)}
/* 25px at desktop is WCAG "large text" (≥24px), which is what it is measured as.
   It is stated here rather than left to a clamp that happened to land there. */
.band-in p{margin:0;max-width:680px;font-size:clamp(19px,2.3vw,25px);color:#f4fbf9;
  text-shadow:0 1px 12px rgba(6,30,38,.6)}
/* ⚠ THE KICKER WAS RENDERING AT 23px, NOT 13px. `.band-in p` is (0,1,1) and beat
   `.kicker` at (0,1,0), so every "CHAPTER 4 OF 11" on the site was drawn at the body
   size with 0.2em tracking. It looked deliberate, which is why nobody would have
   caught it by eye. Scoped here so it wins, and given an OPAQUE chip: mint on
   footage was 1.9–2.9:1 at its worst frame, and mint on this ground is 8.7:1 no
   matter what is playing underneath. */
.band-in .kicker{display:inline-block;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:#a8e6d0;background:#0d3a48;
  padding:7px 14px;border-radius:999px;margin:0 0 16px;max-width:none;text-shadow:none;line-height:1.25}
/* ⚠ The credit line was rgba(255,255,255,.72) sitting on bare footage — 2.4:1 over a
   white bedroom, and a translucent ink cannot be reasoned about at all because it is
   whatever it lands on. Solid ink on a solid chip: 9.2:1 over anything. */
.band .credit{position:absolute;right:12px;bottom:10px;z-index:3;font-family:var(--sans);
  font-size:11px;color:#cfe3e8;background:#0d3a48;padding:5px 11px;border-radius:999px;
  text-decoration:none;line-height:1.3}
.band .credit:hover{color:#fff;background:#155062}

/* ---------- layout ---------- */
main{display:block}
.wrap{width:var(--wrap);margin:0 auto}
.read{width:var(--read);margin:0 auto}
section{padding:56px 0}
section.tight{padding:34px 0}
h2.sec{font-size:clamp(26px,3.4vw,38px);line-height:1.16;margin:0 0 8px}
h3{font-size:22px;line-height:1.3;margin:34px 0 8px}
.lede{font-size:21px;color:var(--soft);margin:0 0 26px}
.rule{height:3px;width:74px;background:var(--accent);border-radius:3px;margin:0 0 26px}

/* ---------- the book text ---------- */
.prose p{margin:0 0 1.05em}
.prose p:first-of-type::first-letter{}
.callout{margin:30px 0;padding:22px 26px;border-radius:var(--r);border-left:6px solid var(--accent);
  background:var(--white);box-shadow:var(--shadow)}
.callout p{margin:0}
.callout .lab{font-weight:700}
.callout.remember{border-left-color:var(--sun);background:#fffaf0}
.callout.try{border-left-color:var(--accent)}
.callout.journal{border-left-color:var(--lilac);background:#f8f6ff}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease}
a.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(18,74,92,.16)}
.card .thumb{aspect-ratio:16/9;width:100%;object-fit:cover;display:block;background:var(--deep)}
.card .body{padding:16px 18px 20px}
.card .n{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent2);margin:0 0 6px}
.card h3{margin:0 0 6px;font-size:20px}
.card p{margin:0;font-size:16px;color:var(--soft);line-height:1.5}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;
  font-size:16px;padding:13px 24px;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;background:var(--accent2);color:var(--white);
  line-height:1.2;min-height:48px}
.btn:hover{background:#175b74}
.btn.ghost{background:transparent;color:var(--accent2);border-color:var(--accent2)}
.btn.ghost:hover{background:var(--accent2);color:var(--white)}
/* ⚠ ink on mint, NEVER white on mint — 2.66:1 */
.btn.mint{background:var(--accent);color:var(--ink)}
.btn.mint:hover{background:#22a077}
.btn.big{font-size:18px;padding:16px 30px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
/* ⚠ A transparent secondary button over footage is white ink on whatever happens to
   be playing — 3.7:1 over the hero at its brightest frame. It keeps the light border
   so it still reads as secondary, but it gets a fill it can be measured against. */
.band-in .btn.ghost{color:var(--white);background:#0d3a48;border-color:rgba(255,255,255,.55)}
.band-in .btn.ghost:hover{background:var(--white);color:var(--accent2);border-color:var(--white)}

/* ---------- instrument shell ---------- */
.inst{background:var(--white);border-radius:22px;box-shadow:var(--shadow);padding:28px;margin:30px 0}
.inst h3{margin:0 0 4px;font-size:23px}
.inst .sub{font-family:var(--sans);font-size:14px;color:var(--soft);margin:0 0 20px}
.inst .out{font-family:var(--sans)}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:15px;
  font-weight:600;padding:11px 18px;border-radius:999px;border:2px solid var(--line);
  background:var(--paper);color:var(--ink);cursor:pointer;min-height:46px}
.pill:hover{border-color:var(--accent)}
.pill[aria-pressed=true],.pill.on{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.pills{display:flex;gap:10px;flex-wrap:wrap}
.big-num{font-family:var(--sans);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(48px,10vw,86px);line-height:1;color:var(--accent2)}
.note{font-family:var(--sans);font-size:14px;color:var(--soft)}
input[type=text],textarea,select{font:inherit;font-family:var(--sans);font-size:16px;
  padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:var(--paper);
  color:var(--ink);width:100%;min-height:48px}
input[type=text]:focus,textarea:focus{border-color:var(--accent2)}
label{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--soft);
  display:block;margin:0 0 6px}
input[type=range]{width:100%;accent-color:var(--accent2);min-height:34px}

/* ---------- footer ---------- */
footer{background:var(--deep);color:#cfe7ea;padding:48px 0 34px;margin-top:20px;font-family:var(--sans);font-size:15px}
footer a{color:#9fdcc7}
footer .cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
footer h4{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:#7fb3bd;margin:0 0 10px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0 0 7px}
footer .fine{border-top:1px solid rgba(255,255,255,.14);margin-top:32px;padding-top:20px;
  font-size:13px;color:#8fb8c0}

/* ================= instrument styles ================= */
.hidden{display:none!important}

/* dashboard */
.lights .light{position:relative;padding-left:16px}
.lamp{width:14px;height:14px;border-radius:50%;background:var(--lamp,var(--accent));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lamp,var(--accent)) 26%,transparent);flex:none;
  animation:blink 1.9s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.lamp{animation:none}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.34}}
.lightcard{margin-top:22px;padding:24px 26px;border-radius:var(--r);background:var(--paper);
  border-left:6px solid var(--lamp,var(--accent))}
.lightsays{font-size:25px;line-height:1.3;margin:0 0 10px}
.lightsign{font-family:var(--sans);font-size:15px;color:var(--soft);margin:0 0 8px}
.lightdo{font-size:19px;margin:0 0 16px;font-weight:600}
.lightcard .note{margin:14px 0 0}

/* rings + timers */
.ring{position:relative;width:190px;height:190px;margin:6px auto 18px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .rbg{stroke:var(--line)}
.ring .rfg{stroke:var(--accent);transition:stroke-dashoffset .25s linear}
.ring .big-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:40px}
.quad{font-size:21px;font-weight:600;margin:0 0 4px;text-align:center}
.inst .note{text-align:center}
.inst>.btn,.inst>.btn-row{margin-left:auto;margin-right:auto}
.inst>.btn{display:flex;width:fit-content;margin-top:18px}
.whensweep{justify-content:center;margin-top:20px}
.sweepout{margin-top:12px}
.bar2{height:10px;background:var(--line);border-radius:99px;overflow:hidden;margin:14px 0 20px}
.fill2{height:100%;width:0;background:var(--accent);transition:width 1s linear}
.tapper{display:block;width:100%;font-family:var(--sans);font-size:19px;font-weight:700;
  padding:30px 18px;border-radius:20px;border:3px dashed var(--accent);background:var(--paper);
  color:var(--ink);cursor:pointer;min-height:96px}
.tapper:hover:not(:disabled){background:#e7f7f1}
.tapper:disabled{opacity:.45;cursor:default;border-style:solid}
.inst .big-num{text-align:center}

/* tick lists */
.ticklist{list-style:none;margin:0;padding:0}
.ticklist li{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.ticklist li:last-child{border-bottom:0}
.tick{flex:1;display:flex;align-items:center;gap:14px;background:none;border:0;cursor:pointer;
  padding:15px 4px;text-align:left;font:inherit;color:inherit;min-height:56px}
.tick .box{width:28px;height:28px;border-radius:9px;border:3px solid var(--line);flex:none;
  display:grid;place-items:center;transition:all .16s}
.tick .box::after{content:"✓";color:var(--white);font-size:17px;font-weight:700;opacity:0;
  font-family:var(--sans)}
.tick[aria-pressed=true] .box{background:var(--accent);border-color:var(--accent)}
.tick[aria-pressed=true] .box::after{opacity:1;color:var(--ink)}
.tick[aria-pressed=true] .lab{color:var(--soft)}
.ticklist.big .lab{font-size:19px}
.why{font-family:var(--sans);font-size:13px;color:var(--accent2);text-decoration:none;
  padding:8px 10px;border-radius:8px;flex:none}
.why:hover{background:var(--paper);text-decoration:underline}
.checkout{font-family:var(--sans);font-size:17px;font-weight:600;margin:20px 0 4px;text-align:center}

/* tank */
.glass{width:120px;height:190px;margin:0 auto 12px;border:5px solid var(--accent2);
  border-top:0;border-radius:8px 8px 26px 26px;position:relative;overflow:hidden;background:#eaf6f9}
.glass .water{position:absolute;left:0;right:0;bottom:0;height:0;
  background:linear-gradient(180deg,#6fd0e0,#2f9ec2);transition:height .55s cubic-bezier(.2,.7,.2,1)}
.glass .water::before{content:"";position:absolute;top:-6px;left:0;right:0;height:12px;
  background:#8ddcea;border-radius:50%}

/* fuel */
.foodcard{font-size:clamp(30px,6vw,46px);text-align:center;padding:36px 18px;background:var(--paper);
  border-radius:20px;font-weight:600;line-height:1.2}
.btn.zoom{background:var(--sun);color:var(--ink)}
.btn.zoom:hover{background:#e5a41f}
.fuelout{font-family:var(--sans);font-size:17px;text-align:center;margin:18px 0 4px;min-height:52px}

/* wiggles */
.heartbox{text-align:center;margin-top:18px}
.heartbtn{font-size:56px;background:none;border:0;cursor:pointer;line-height:1;padding:10px;
  transition:transform .12s}
.heartbtn.beat{transform:scale(1.28)}

/* power-down + calm */
.scan{text-align:center;min-height:96px}
.scanh{font-size:27px;margin:0 0 6px;line-height:1.25}
.scans{font-family:var(--sans);font-size:16px;color:var(--soft);margin:0}
.breath{display:grid;place-items:center;height:210px;margin:6px 0}
.orb{width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#8fe4c6,var(--accent));
  transition:transform 4s cubic-bezier(.4,0,.5,1)}
.orb.inhale{transform:scale(1.85)}
.breathlab{min-height:24px}
.calmwrap{display:grid;place-items:center;height:250px}
.calmorb{width:130px;height:130px;border-radius:50%;border:0;cursor:pointer;color:var(--ink);
  background:radial-gradient(circle at 34% 30%,#a5ead1,var(--accent));
  box-shadow:0 0 0 0 rgba(40,180,135,.45);
  transition:transform 4s cubic-bezier(.4,0,.5,1),box-shadow .6s;
  display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:15px;padding:14px}
.calmorb.inhale{transform:scale(1.7);box-shadow:0 0 0 30px rgba(40,180,135,.12)}
.calmorb.hold{transform:scale(1.7)}
.calmword{max-width:110px;line-height:1.25}
@media(prefers-reduced-motion:reduce){.orb,.calmorb{transition:none}}
.field{margin-top:22px}
.field .btn{margin-top:12px}

/* messengers */
.msgcard{margin-top:22px;padding:26px;border-radius:var(--r);background:var(--paper);text-align:center}
.msgbig{font-size:54px;margin:0 0 10px;line-height:1}
.msgsays{font-size:20px;margin:0 0 18px;line-height:1.5}
.msgout{min-height:60px}

/* clouds */
.sky{position:relative;height:230px;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#8fd3f0,#cfeefb)}
.cloud{position:absolute;top:var(--y,20%);left:-46%;max-width:44%;
  background:rgba(255,255,255,.94);border-radius:999px;padding:13px 24px;
  font-family:var(--sans);font-size:15px;color:#41566b;box-shadow:0 6px 22px rgba(30,80,110,.16);
  animation:drift var(--dur,16s) linear forwards}
@keyframes drift{from{left:-46%}to{left:104%}}
.sky+label{margin-top:20px}

/* movie */
.screenwrap{height:280px;border-radius:20px;background:#14202a;display:grid;place-items:center;
  overflow:hidden;position:relative}
.pic{width:260px;height:150px;border-radius:14px;display:grid;place-items:center;text-align:center;
  background:linear-gradient(135deg,#ffd36e,#f2765f 55%,#9b8ade);
  font-family:var(--sans);font-weight:700;font-size:19px;color:#1a1216;padding:14px;
  transform:scale(var(--scale,1)) translateY(var(--drop,0));
  filter:brightness(var(--bright,1)) saturate(var(--sat,1)) blur(var(--blur,0));
  transition:transform .18s linear,filter .18s linear}
.pictext{max-width:210px;line-height:1.25}
.sliders{margin:22px 0 8px}
.sl{margin-bottom:14px}

/* yet */
.yetline{font-size:clamp(22px,4.2vw,32px);text-align:center;font-weight:600;line-height:1.3;
  margin:24px 0 6px;min-height:74px;display:grid;place-items:center}
.yeth{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);margin:28px 0 8px}
.yetlist,.letters{list-style:none;margin:0;padding:0}
.yetlist li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.yt{flex:1;font-size:17px}
.gotit{font-family:var(--sans);font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;
  border:2px solid var(--line);background:var(--paper);cursor:pointer;color:var(--ink);flex:none;min-height:40px}
.gotit.on{background:var(--accent);border-color:var(--accent)}

/* future you */
textarea{resize:vertical}
.reply{min-height:10px}
.replyh{font-size:20px;margin:22px 0 6px;line-height:1.4}
.letters .letter{padding:16px 0;border-bottom:1px solid var(--line)}
.lday{font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--soft);margin:0 0 6px}
.lnow{margin:0 0 6px;color:var(--soft)}
.lfut{margin:0;font-weight:600}
#fu1,#fu2{margin-bottom:14px}

/* kind words */
.kwout{margin-top:24px}
.kwcard{padding:20px 24px;border-radius:var(--r);margin-bottom:14px}
.kwcard.harsh{background:#fdf1ef;border-left:6px solid var(--coral)}
.kwcard.kind{background:#eefaf5;border-left:6px solid var(--accent)}
.kwlab{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);margin:0 0 8px}
.kwtext{margin:0;font-size:20px;line-height:1.45}
.kwpunch{font-size:20px;line-height:1.5;margin:20px 0 16px}

/* affirmations */
.affbig{font-size:clamp(26px,5.2vw,42px);line-height:1.28;text-align:center;margin:0 0 6px;
  min-height:120px;display:grid;place-items:center;color:var(--accent2);font-weight:600}
.afflist{list-style:none;margin:26px 0 0;padding:0}
.afflist li{border-bottom:1px solid var(--line)}
.afflist li:last-child{border-bottom:0}
.affrow{width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;
  padding:14px 8px;cursor:pointer;border-radius:10px;min-height:52px}
.affrow:hover{background:var(--paper)}
.affrow.on{color:var(--accent2);font-weight:700}

/* living book */
.playbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;
  position:sticky;top:70px;z-index:30;background:rgba(242,248,246,.95);backdrop-filter:blur(8px);
  padding:12px;border-radius:16px;box-shadow:var(--shadow)}
.speedlab{margin:0 0 0 8px;align-self:center}
.playbar select{width:auto;min-width:110px}
.lines{list-style:none;margin:28px 0 0;padding:0}
.lines li{padding:16px 20px;border-radius:16px;margin-bottom:10px;cursor:pointer;
  transition:background .2s,box-shadow .2s;border-left:5px solid transparent}
.lines li:hover{background:var(--white)}
.lines li.reading{background:var(--white);box-shadow:var(--shadow);border-left-color:var(--accent)}
.lines li.kid{background:#eefaf5;border-left-color:var(--accent);margin-left:clamp(0px,5vw,54px)}
.lines li.kid.reading{background:#dff4ec}
.lines .t{margin:0;font-size:20px;line-height:1.55}
.lines li.kid .t{font-size:22px;font-weight:600}
.lines .who{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent2);margin:8px 0 0}
.lines .toolbadge{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);margin:0 0 6px}

/* misc page furniture */
.two{display:grid;gap:34px;grid-template-columns:1.15fr .85fr;align-items:start}
@media(max-width:840px){.two{grid-template-columns:1fr}}
.chapnav{display:flex;justify-content:space-between;gap:14px;margin:44px 0 0;
  padding-top:26px;border-top:1px solid var(--line);font-family:var(--sans);font-size:15px}
.chapnav a{text-decoration:none;max-width:46%}
.chapnav .dir{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.covershot{border-radius:16px;box-shadow:0 18px 50px rgba(18,74,92,.22);display:block;width:100%}
.fact{background:var(--white);border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow);
  font-family:var(--sans);font-size:15px;line-height:1.6}
.fact dt{font-weight:700;color:var(--accent2);margin-top:14px}
.fact dt:first-child{margin-top:0}
.fact dd{margin:2px 0 0}
table.data{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px}
table.data th,table.data td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top}
table.data th{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pass{color:#0d7a52;font-weight:700}
.warn{color:#a35a00;font-weight:700}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{padding:9px 0;border-bottom:1px solid var(--line)}
ul.plain li:last-child{border-bottom:0}
.film-wrap{background:#000;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
/* ⚠ width:100% with the intrinsic height attribute still at 900 letterboxed the
   player: a black band above the picture on every screen narrower than 1600. */
.film-wrap video{display:block;width:100%;height:auto;aspect-ratio:16/9}
.speedgrp{display:flex;align-items:center;gap:8px}
.speedgrp label{margin:0;white-space:nowrap}
h2.sub{font-size:23px;line-height:1.3;margin:34px 0 8px;font-weight:700}
.card h2.sub{margin:0 0 6px;font-size:20px}
footer .fh{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:#7fb3bd;margin:0 0 10px}
/* the loop video itself — sized by .band video, but named so the class is real */
.band video.loop{will-change:auto}
.lightout{min-height:56px}
.speedgrp{display:flex;align-items:center;gap:8px}

/* ---------- print ----------
   ⚠ A previous project's @media print block was a mis-paste and the site's own
   toolbar printed on every page. This one hides the furniture, drops the footage to
   its poster still, and prints the reader's own answers with the page. */
@media print{
  .bar,.skip,footer,.band video,.credit,.chapnav,.btn,.btn-row{display:none!important}
  body{background:#fff;font-size:12pt;line-height:1.5}
  .band{min-height:0;background:#fff}
  .band::after,.band-in::before{display:none!important}
  .band-in{color:var(--ink);padding:0 0 12pt;width:auto}
  .band-in h1,.band-in h2,.band-in p{text-shadow:none;color:var(--ink)}
  .band-in .kicker{background:none;color:var(--soft);padding:0}
  .inst,.callout,.card{box-shadow:none;border:1px solid var(--line);break-inside:avoid}
  section{padding:12pt 0}
  .wrap,.read{width:auto}
  h1,h2,h3{break-after:avoid}
  a[href^="/"]::after{content:""}
}
/* every heading and mount clears the sticky bar when jumped to */
h1,h2,h3,[id]{scroll-margin-top:84px}