/* The Striper Recount micro-site. One deliberate world, the cartoon's: cream paper, ink outlines, the 70s
   cel palette (engine/kit.js K.C) with its shade and highlight tones (sets.js SITE.SH / SITE.HI). A single
   theme, painted explicitly. Interface: tackle trays, rod-and-bobber sliders, ticket stubs on strings,
   index cards, a fishing-line chapter bar (Director, micro-site review 1, brief B). */
:root{
  --ink:#1E1510;--cream:#F4E6C4;--paper:#EAD8AC;--mustard:#E0A526;--orange:#D9642B;--avocado:#8A9A3B;--olive:#5E6B2A;
  --sky:#7EC4D8;--skyDeep:#4E9DBB;--sea:#2F7CA0;--seaDeep:#1F5673;--brick:#B4412F;--brown:#7A4E2A;--tan:#C99B63;
  --sand:#E7CF8E;--pink:#E8927C;--white:#FBF6EA;--silver:#C9D3CF;--gray:#8C8475;
  --sh-cream:#D8C1AC;--sh-tan:#9A694B;--sh-mustard:#AC6F1D;--sh-orange:#A74320;--sh-brown:#5E3520;--hi-mustard:#ECC76A;--hi-tan:#DFC194;
  --ink2:#4a3a26;--muted:#6b5a3f;
  --f-title:'Shrikhand','Cooper Black',Georgia,serif;
  --f-label:'Lilita One','Chewy','Chalkboard SE',sans-serif;
  --f-body:'Nunito','Avenir Next','Segoe UI',sans-serif;
  --f-mono:'Courier Prime','Courier New',monospace;
  --top:52px;
  --bobber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 46'%3E%3Cpath d='M16 2v8M16 38v6' stroke='%231E1510' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='24' r='13' fill='%23FBF6EA'/%3E%3Cpath d='M3 24a13 13 0 0 1 26 0z' fill='%23B4412F'/%3E%3Cpath d='M3 24h26' stroke='%231E1510' stroke-width='3'/%3E%3Ccircle cx='16' cy='24' r='13' fill='none' stroke='%231E1510' stroke-width='3'/%3E%3Cpath d='M9 17q3-5 8-6' stroke='%23fff' stroke-width='2.5' fill='none' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E");
  --fish:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 18'%3E%3Cpath d='M2 9q8-8 20-6l6-3-1 9 1 9-6-3Q10 17 2 9z' fill='%23C9D3CF' stroke='%231E1510' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9 5v8M13 4v10M17 4v10' stroke='%232B2B2B' stroke-width='1.6'/%3E%3Ccircle cx='5.5' cy='7.5' r='1.3' fill='%231E1510'/%3E%3C/svg%3E");
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink);font:400 18px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .2 0 0 0 0 .12 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--seaDeep)}
button{font:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.topbar :focus-visible{outline-color:var(--cream)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- page transitions: an iris wipe on twos ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:iris .34s steps(4,end) both}
@keyframes iris{from{clip-path:circle(0% at 50% 55%)}to{clip-path:circle(140% at 50% 55%)}}
@media (prefers-reduced-motion: reduce){::view-transition-new(root){animation:none}}

/* ---------- the top bar: a fishing line with a hook per chapter and a bobber on the current one ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;height:var(--top);padding:0 16px;background:var(--ink);color:var(--cream);box-shadow:0 4px 0 var(--sh-brown)}
.topbar .brand{font:400 21px/1 var(--f-title);color:var(--mustard);text-decoration:none;white-space:nowrap}
.line{position:relative;display:flex;justify-content:space-between;align-items:center;flex:1;max-width:620px;margin-left:auto;height:44px}
.line::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:var(--cream);opacity:.7}
.line a{position:relative;display:block;width:44px;height:44px;text-decoration:none}
.line a::before{content:"";position:absolute;left:14px;top:12px;width:16px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M8 0v14a5 5 0 0 1-10 0' transform='translate(4 0)' fill='none' stroke='%23F4E6C4' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M2 14l-1.5-3' stroke='%23F4E6C4' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.8}
.line a:hover::before,.line a:focus-visible::before{opacity:1}
.line a .tip{position:absolute;top:42px;left:50%;transform:translateX(-50%);padding:5px 10px;border-radius:8px;background:var(--cream);color:var(--ink);border:2px solid var(--ink);font:400 14px/1 var(--f-label);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .1s}
.line a:hover .tip,.line a:focus-visible .tip{opacity:1}
/* the last two tips hang left from their hooks, so they never run past the right edge (UX 1.2) */
.topbar{overflow-x:clip}
.line a:nth-last-of-type(-n+2) .tip{left:auto;right:0;transform:none}
.line .bob{position:absolute;top:-3px;left:0;width:22px;height:32px;background:var(--bobber) no-repeat center/contain;transition:transform .45s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.chapbtn{display:none}
.chaplist{display:none}

/* ---------- a chapter: one full-screen experience ---------- */
.ch{position:relative;min-height:calc(100svh - var(--top));display:grid;grid-template-columns:minmax(0,1.75fr) minmax(340px,1fr);border-top:6px solid var(--ink);scroll-snap-align:start;scroll-margin-top:var(--top)}
.ch-stage{position:relative;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(12px,2vw,28px) clamp(12px,2vw,28px) clamp(16px,2vw,30px);background:var(--sand);border-right:6px solid var(--ink);overflow:hidden;height:calc(100svh - var(--top))}
.ch-stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 118px,rgba(154,105,75,.16) 118px 121px),repeating-linear-gradient(0deg,transparent 0 13px,rgba(154,105,75,.07) 13px 15px);pointer-events:none}
.ch-stage svg.stage{position:relative;flex:none;width:100%;display:block;overflow:hidden;border:6px solid var(--ink);border-radius:12px;background:var(--sky);box-shadow:8px 9px 0 var(--sh-tan)}
.stage-next{position:absolute;right:clamp(18px,2.2vw,34px);bottom:clamp(20px,2.2vw,36px);z-index:3;display:none}
.ch-panel{display:flex;flex-direction:column;gap:16px;padding:clamp(20px,2.6vw,36px) clamp(16px,2.4vw,34px) 28px;background:var(--cream);overflow:auto;max-height:calc(100svh - var(--top))}
.kicker{margin:0;font:700 13px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brick)}
.ch h2{margin:0;font:400 clamp(30px,3.3vw,46px)/1.02 var(--f-title);color:var(--ink);text-wrap:balance;text-shadow:3px 3px 0 var(--hi-mustard)}
.lede{margin:0;font-size:clamp(17px,1.25vw,19px);text-wrap:pretty}
.lede b,.take b{font-weight:800}
.note{margin:0;font-size:14px;color:var(--muted);text-wrap:pretty}

/* the takeaway: an index card pinned with a thumbtack, ruled, with a GOT IT stamp */
.take{position:relative;margin:6px 0 0;padding:44px 18px 16px;background:var(--white) repeating-linear-gradient(180deg,transparent 0 27px,rgba(47,124,160,.22) 27px 28px) 0 38px/100% calc(100% - 38px) no-repeat;border:3px solid var(--ink);border-radius:6px;box-shadow:5px 6px 0 var(--sh-cream);font-size:17px;line-height:28px;text-wrap:pretty;transform:rotate(-.6deg)}
.take::before{content:"THE TAKEAWAY";position:absolute;left:0;right:0;top:0;height:30px;padding:0 14px;background:var(--brick);color:var(--cream);font:400 15px/30px var(--f-label);letter-spacing:.06em;border-bottom:3px solid var(--ink)}
.take::after{content:"";position:absolute;top:-10px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e8927c 0 25%,var(--brick) 26%);border:3px solid var(--ink)}
.take .gotit{position:absolute;right:12px;bottom:-14px;padding:6px 12px;border:4px solid var(--sea);border-radius:8px;color:var(--sea);font:400 22px/1 var(--f-label);letter-spacing:.06em;background:rgba(251,246,234,.85);transform:rotate(-9deg);opacity:0}
.take .gotit.on{opacity:1;animation:stamp .34s steps(4,end)}
@keyframes stamp{0%{transform:rotate(-9deg) scale(1.9);opacity:0}50%{transform:rotate(-9deg) scale(.9);opacity:1}75%{transform:rotate(-9deg) scale(1.06)}100%{transform:rotate(-9deg) scale(1)}}
/* ASGA's view: a letter with a dashed border; opinion only, always after the takeaway */
.pov{position:relative;margin:0;padding:16px 16px 14px;border:3px dashed var(--brick);border-radius:10px;background:#f8e3cc;font-size:16px}
.pov::before{content:"ASGA’s view";display:block;font:400 17px/1.1 var(--f-label);color:var(--brick)}
.pov::after{content:"This is ASGA’s position, not NOAA data.";display:block;margin-top:10px;font:700 11px/1.3 var(--f-mono);color:var(--muted)}
.pov .povtxt{display:block;margin-top:8px}

/* ---------- controls ---------- */
.ctl{display:flex;flex-direction:column;gap:9px}
.ctl-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:400 18px/1.1 var(--f-label)}
.ctl-label output{font:700 16px/1 var(--f-mono);color:var(--brick);white-space:nowrap}
/* segmented buttons: compartments in a tackle tray */
.seg{display:flex;flex-wrap:wrap;gap:6px;padding:6px;background:var(--tan);border:3px solid var(--ink);border-radius:14px;box-shadow:inset 0 4px 0 var(--sh-tan),4px 4px 0 var(--sh-cream)}
.seg button{appearance:none;cursor:pointer;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:8px 14px;border-radius:9px;border:3px solid var(--ink);background:var(--cream);color:var(--ink);font:400 17px/1.05 var(--f-label);box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.seg button:hover{background:var(--white);transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
.seg button[aria-pressed="true"]{background:var(--mustard);box-shadow:inset 0 -5px 0 var(--sh-mustard),0 3px 0 var(--ink)}
.seg button[aria-pressed="true"]::before{content:"";width:12px;height:17px;flex:none;background:var(--bobber) no-repeat center/contain}
.seg button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.seg.small button{min-height:44px;padding:6px 10px;font-size:15px}
/* sliders: a rod blank with a line down it and a bobber for the thumb */
.rod{position:relative;height:64px;margin:26px 16px 0}
.rod input[type=range]{-webkit-appearance:none;appearance:none;position:absolute;left:-16px;right:-16px;top:12px;width:calc(100% + 32px);height:44px;margin:0;background:transparent;cursor:pointer;z-index:2;opacity:0}
.rod .blank{position:absolute;left:0;right:0;top:26px;height:14px;border-radius:999px;background:var(--cream);border:3px solid var(--ink);box-shadow:inset 0 -4px 0 var(--sh-cream),3px 3px 0 var(--sh-cream);overflow:hidden}
.rod .blank i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--sea);box-shadow:inset 0 -4px 0 var(--seaDeep)}
.rod .blank::after{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:rgba(30,21,16,.45)}
.rod .bob{position:absolute;top:8px;left:var(--p,0%);width:32px;height:46px;margin-left:-16px;background:var(--bobber) no-repeat center/contain;transform-origin:50% 10%;transform:rotate(var(--tilt,0deg));pointer-events:none;z-index:1;filter:drop-shadow(2px 3px 0 rgba(30,21,16,.25))}
.rod .bob.dip{animation:dip .5s steps(6,end)}
@keyframes dip{0%{transform:translateY(0)}30%{transform:translateY(7px)}60%{transform:translateY(-3px)}100%{transform:translateY(0)}}
.rod .ripple{position:absolute;top:52px;left:var(--p,0%);width:10px;height:4px;margin-left:-5px;border:2px solid var(--sea);border-radius:50%;opacity:0;pointer-events:none}
.rod .ripple.on{animation:ripple .6s steps(6,end)}
@keyframes ripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(5)}}
.rod .vtag{position:absolute;top:-22px;left:var(--p,0%);transform:translateX(-50%);padding:3px 8px;border-radius:6px;background:var(--white);border:2px solid var(--ink);font:700 13px/1.1 var(--f-mono);white-space:nowrap;pointer-events:none;box-shadow:2px 2px 0 var(--sh-cream)}
.rod input:focus-visible ~ .blank{outline:3px solid var(--ink);outline-offset:4px}
.ticks{position:relative;height:34px;margin:0 16px;font:700 12px/1.15 var(--f-mono);color:var(--muted)}
.ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap;text-align:center}
.ticks span::before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:var(--gray);border:2px solid var(--ink);margin:0 auto 3px}
.ticks span.hot{color:var(--brick)}
.ticks span.hot::before{background:var(--brick)}
@media (prefers-reduced-motion: reduce){.rod .bob{transform:none}.rod .bob.dip,.rod .ripple.on{animation:none}}
/* readouts: ticket stubs hanging on strings from the stage frame */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.card{position:relative;padding:14px 14px 10px 18px;background:var(--white);border:3px solid var(--ink);border-radius:4px;box-shadow:4px 5px 0 var(--sh-tan);
  -webkit-mask:radial-gradient(circle 9px at 0 0,#0000 98%,#000) top left,radial-gradient(circle 9px at 100% 0,#0000 98%,#000) top right,radial-gradient(circle 9px at 0 100%,#0000 98%,#000) bottom left,radial-gradient(circle 9px at 100% 100%,#0000 98%,#000) bottom right;
  -webkit-mask-size:51% 51%;-webkit-mask-repeat:no-repeat;mask:radial-gradient(circle 9px at 0 0,#0000 98%,#000) top left,radial-gradient(circle 9px at 100% 0,#0000 98%,#000) top right,radial-gradient(circle 9px at 0 100%,#0000 98%,#000) bottom left,radial-gradient(circle 9px at 100% 100%,#0000 98%,#000) bottom right;mask-size:51% 51%;mask-repeat:no-repeat;
  transform-origin:50% -18px}
.cardwrap{position:relative}
.cardwrap::before{content:"";position:absolute;left:50%;top:-24px;width:2px;height:30px;background:var(--ink)}
.cardwrap::after{content:"";position:absolute;left:50%;top:0;width:10px;height:10px;margin:5px 0 0 -5px;border-radius:50%;background:var(--sand);border:2px solid var(--ink);z-index:2}
.card .k{display:block;font:400 15px/1.1 var(--f-label);color:var(--muted)}
.card .v{display:block;font:700 clamp(22px,2vw,28px)/1.1 var(--f-mono);color:var(--ink);margin-top:4px;font-variant-numeric:tabular-nums}
.card .d{display:block;font:700 13px/1.2 var(--f-mono);color:var(--brick);margin-top:2px}
.card.hot{box-shadow:inset 7px 0 0 var(--mustard),4px 5px 0 var(--sh-tan)}
.card.swing{animation:swing .5s steps(6,end)}
@keyframes swing{0%{transform:rotate(0)}25%{transform:rotate(3deg)}50%{transform:rotate(-2deg)}75%{transform:rotate(1deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion: reduce){.card.swing{animation:none}}
/* buttons */
.navrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.btn{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:10px 22px;border-radius:999px;border:3px solid var(--ink);background:var(--orange);color:var(--white);font:400 19px/1 var(--f-label);text-decoration:none;box-shadow:inset 0 -6px 0 var(--sh-orange),4px 5px 0 var(--ink);transition:transform .08s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translate(2px,3px);box-shadow:inset 0 -4px 0 var(--sh-orange),1px 1px 0 var(--ink)}
.btn.ghost{background:var(--white);color:var(--ink);box-shadow:inset 0 -6px 0 var(--sh-cream),4px 5px 0 var(--ink)}
.btn .fishy{width:34px;height:18px;flex:none;background:var(--fish) no-repeat center/contain}
.btn:hover .fishy{animation:swim .6s steps(4,end) infinite}
@keyframes swim{0%{transform:translateX(0) rotate(0)}25%{transform:translateX(3px) rotate(-6deg)}50%{transform:translateX(6px) rotate(0)}75%{transform:translateX(3px) rotate(6deg)}100%{transform:translateX(0)}}
@media (prefers-reduced-motion: reduce){.btn:hover .fishy{animation:none}.btn,.seg button{transition:none}}
details.more{border-top:2px dashed var(--ink2);padding-top:10px}
details.more summary{cursor:pointer;min-height:32px;font:400 17px/1.2 var(--f-label);color:var(--seaDeep)}
details.more p{font-size:15px;margin:8px 0 0}

/* ---------- the video: a walnut TV on a starburst ---------- */
.hero{position:relative;min-height:calc(100svh - var(--top));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:18px 16px 24px;color:var(--cream);overflow:hidden;scroll-snap-align:start;
  background:repeating-conic-gradient(from 0deg at 50% 42%,var(--orange) 0 9deg,var(--mustard) 9deg 18deg)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 40%,rgba(30,21,16,.45) 100%);pointer-events:none}
.tv{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:18px;width:min(100%,calc((100svh - var(--top) - 330px) * 16 / 9 + 150px));padding:22px;border:6px solid var(--ink);border-radius:30px;
  background:linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 38px) 0 0/38px 100%,repeating-linear-gradient(180deg,#8a5a33 0 7px,#7A4E2A 7px 15px,#6d4424 15px 19px);box-shadow:inset 0 -10px 0 var(--sh-brown),inset 0 8px 0 #a57447,12px 14px 0 var(--ink)}
.screen{position:relative;aspect-ratio:16/9;border:8px solid var(--ink);border-radius:26px/22px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 4px #333}
.screen video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.knobs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;width:110px;padding:12px 0;border-radius:16px;background:var(--sh-brown);border:4px solid var(--ink)}
.knob{appearance:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:var(--cream);font:400 14px/1 var(--f-label)}
.knob i{display:block;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#f8efd7 0 12%,var(--cream) 13% 60%,var(--sh-cream) 61%);border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);position:relative;transition:transform .2s steps(3,end)}
.knob i::after{content:"";position:absolute;left:50%;top:6px;width:6px;height:20px;margin-left:-3px;border-radius:3px;background:var(--brick)}
.knob[aria-pressed="true"] i{transform:rotate(120deg)}
.knob:active i{box-shadow:0 2px 0 var(--ink)}
.speaker{width:70px;height:60px;border-radius:10px;background:repeating-linear-gradient(0deg,var(--ink) 0 3px,transparent 3px 8px);opacity:.55}
.bigplay[hidden]{display:none}   /* once the song starts, the player's own controls get every tap */
.bigplay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:0 0 2.2%;background:transparent;border:0;cursor:pointer}
.bigplay span{display:flex;align-items:center;gap:10px;padding:clamp(6px,.8vw,11px) clamp(14px,1.6vw,24px);border-radius:999px;background:var(--orange);color:var(--white);border:4px solid var(--ink);font:400 clamp(14px,1.5vw,23px)/1 var(--f-label);box-shadow:inset 0 -6px 0 var(--sh-orange),5px 5px 0 var(--ink);animation:bob 1.6s steps(4,end) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion: reduce){.bigplay span{animation:none}}
.hero-copy{position:relative;z-index:1;max-width:780px;text-align:center;padding:14px 22px;background:var(--ink);border-radius:18px;border:4px solid var(--cream)}
.hero h1{margin:0;font:400 clamp(28px,3.6vw,48px)/1 var(--f-title);color:var(--mustard)}
.hero p{margin:8px 0 0;font-size:clamp(15px,1.3vw,18px);color:var(--sand)}
.cue{display:inline-flex;margin-top:12px}

/* ---------- phones and tall screens: a sticky stage on top, the main control first ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 820px){
  :root{--top:50px}
  .line{display:none}
  .chapbtn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;min-height:40px;padding:6px 12px;border-radius:999px;border:2px solid var(--cream);background:none;color:var(--cream);font:400 15px/1 var(--f-label);cursor:pointer}
  .chaplist{position:absolute;top:var(--top);right:8px;display:none;flex-direction:column;min-width:240px;padding:8px;background:var(--cream);border:3px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink)}
  .chaplist.open{display:flex}
  .chaplist a{display:flex;align-items:center;min-height:44px;padding:0 10px;color:var(--ink);text-decoration:none;font:400 17px/1 var(--f-label);border-radius:8px}
  .chaplist a[aria-current="true"]{background:var(--mustard)}
  .ch{grid-template-columns:1fr;grid-template-rows:auto auto}
  .ch-stage{position:sticky;top:var(--top);z-index:5;height:auto;gap:10px;padding:8px 10px 10px;border-right:0;border-bottom:6px solid var(--ink)}
  .ch-stage svg.stage{height:auto;aspect-ratio:1080/1250;max-height:38svh;width:auto;margin:0 auto;border-width:4px;box-shadow:5px 5px 0 var(--sh-tan)}
  .ch-stage .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ch-stage .cardwrap::before{display:none}
  .ch-stage .cardwrap::after{display:none}
  .ch-stage .card{padding:6px 8px 5px 10px;box-shadow:3px 3px 0 var(--sh-tan)}
  .ch-stage .card .v{font-size:18px}
  .ch-stage .card .k,.ch-stage .card .d{font-size:11.5px}
  .ch-panel{max-height:none;overflow:visible;padding:18px 16px 28px}
  .pov::after{position:static;display:block;margin-top:4px}
  .topbar .brand{font-size:17px}
  .tv{grid-template-columns:1fr;padding:12px;gap:10px;border-radius:22px;width:100%}
  .knobs{flex-direction:row;width:auto;padding:8px 14px;gap:22px}
  .knob i{width:46px;height:46px}
  .speaker{width:60px;height:40px}
}

/* ---------- bar lists (calendar) ---------- */
.bars{display:flex;flex-direction:column;gap:6px}
.bar{display:grid;grid-template-columns:118px minmax(0,1fr) 92px;gap:8px;align-items:center;font-size:15px}
.bar .bl{font:400 15px/1.1 var(--f-label)}
.bar .bl small{font:700 11px/1 var(--f-mono);color:var(--muted)}
.bar .bt{height:16px;border:3px solid var(--ink);border-radius:999px;background:var(--white);overflow:hidden}
.bar .bt i{display:block;height:100%}
.bar .bv{font:700 13px/1 var(--f-mono);text-align:right}
.bar.sel .bl{color:var(--brick)}
.bar.sel .bt{box-shadow:0 0 0 3px var(--mustard)}
.tellist{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:16px}
.tellist li::marker{color:var(--brick)}
svg.stage.can-grab{cursor:grab}
svg.stage.grabbing{cursor:grabbing}
.seg button.nudge{animation:nudge 1.2s steps(6,end) 3}
@keyframes nudge{0%,100%{transform:translateY(0)}20%{transform:translateY(-5px)}40%{transform:translateY(0)}60%{transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){.seg button.nudge{animation:none;outline:3px dashed var(--brick)}}

/* ---------- scrolly pages: one page scroll, the picture pinned, step cards scrolling past it ---------- */
.ch.sc{display:grid;grid-template-columns:minmax(330px,.47fr) minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;min-height:0}
.sc-head{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,44px) clamp(18px,2.4vw,36px) 18px}
.sc-text{grid-column:1;grid-row:2;padding:0 clamp(18px,2.4vw,36px) 0}
.sc-graphic{grid-column:2;grid-row:1/3;position:sticky;top:var(--top);height:calc(100svh - var(--top));border-left:6px solid var(--ink)}
.sc .ch-stage{height:100%;border-right:0;gap:16px}
/* a step: an index card, dim until it reaches the trigger line */
.step{position:relative;margin:0 0 56vh;padding:18px 20px 18px 24px;background:var(--white);border:3px solid var(--ink);border-radius:8px;box-shadow:5px 6px 0 var(--sh-cream);
  font-size:clamp(17px,1.28vw,20px);line-height:1.5;text-wrap:pretty;opacity:.38;transition:opacity .25s steps(3,end),box-shadow .25s;cursor:pointer}
.step.on{opacity:1;cursor:default;box-shadow:inset 7px 0 0 var(--mustard),5px 6px 0 var(--sh-tan)}
.step.past{opacity:.55}
.step::before{content:"";position:absolute;left:-14px;top:18px;width:18px;height:26px;background:var(--bobber) no-repeat center/contain;opacity:0;transition:opacity .2s}
.step.on::before{opacity:1}
.step b{font-weight:800}
.step p{margin:0}
.step p+p{margin-top:10px}
.step .num{font:700 .92em/1 var(--f-mono);white-space:nowrap}
.step.first{margin-top:6px}
.step.turn{margin-bottom:34vh;border-color:var(--brick);border-width:4px}
.step.turn .go{display:block;margin-bottom:6px;font:400 24px/1.1 var(--f-label);color:var(--brick)}
.sc-end{display:flex;flex-direction:column;gap:16px;padding:10px 0 12vh}
.sc-end .navrow{margin-top:8px}
/* the bar under the picture: the page's readout, then its controls on the last step */
.sc-bar{position:relative;flex:none;display:flex;flex-direction:column;gap:12px}
.sc-play{display:flex;gap:14px;align-items:stretch;transition:opacity .2s steps(3,end)}
.sc:not(.playing) .sc-play{display:none}
.sc.playing .sc-play{animation:playIn .36s steps(4,end)}
@keyframes playIn{0%{transform:translateY(14px);opacity:0}60%{transform:translateY(-3px);opacity:1}100%{transform:none}}
@media (prefers-reduced-motion: reduce){.sc.playing .sc-play{animation:none}.step{transition:none}}
/* the year picker: paired bars per year in a tackle tray; tap or drag across it */
.ypick{position:relative;padding:20px 14px 6px;background:var(--tan);border:3px solid var(--ink);border-radius:14px;box-shadow:inset 0 4px 0 var(--sh-tan),4px 4px 0 var(--sh-cream);cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ypick:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ywrap{position:relative;padding-bottom:20px}
.ycols{position:relative;display:flex;align-items:flex-end;height:74px;background:var(--cream);box-shadow:0 0 0 3px var(--ink);border-radius:5px;overflow:hidden}
.ycols::before{content:"";position:absolute;top:0;bottom:0;left:var(--at,50%);width:calc(100% / var(--n,26));transform:translateX(-50%);background:var(--mustard);opacity:.6}
.ycol{position:relative;flex:1;display:flex;align-items:flex-end;justify-content:center;gap:1px;height:100%;padding-top:6px}
.ycol i{display:block;width:36%;max-width:10px;border:2px solid var(--ink);border-bottom:0;border-radius:3px 3px 0 0}
.ycol i.o{background:var(--silver)}
.ycol i.c{background:var(--sea)}
.ycol.sel i.o{background:#fff}
.ybob{position:absolute;top:-23px;left:var(--at,50%);width:16px;height:23px;margin-left:-8px;background:var(--bobber) no-repeat center/contain;pointer-events:none;transition:left .12s steps(2,end)}
.ypick.scrub .ybob{transition:none}
.yaxis{position:absolute;left:0;right:0;bottom:0;height:18px;font:700 12px/18px var(--f-mono);color:var(--ink2)}
.yaxis span{position:absolute;transform:translateX(-50%)}
@media (max-aspect-ratio: 1/1), (max-width: 820px){
  .ch.sc{display:flex;flex-direction:column;align-items:stretch}
  .sc-head{padding:18px 16px 12px}
  .sc-graphic{position:sticky;top:var(--top);z-index:5;height:min(64svh,calc(100svh - var(--top) - 190px));border-left:0}
  .sc .ch-stage{height:100%;gap:8px;padding:8px 10px 10px;justify-content:flex-start}
  .sc .ch-stage svg.stage{max-height:none;aspect-ratio:auto;flex:none}
  .sc-text{padding:18px 16px 0}
  .step{margin-bottom:48svh;font-size:16.5px;line-height:1.45;padding:11px 14px 11px 18px}
  .step p+p{margin-top:7px}
  .step::before{top:12px}
  .step.turn{margin-bottom:22svh}
  .step.turn .go{font-size:21px;margin-bottom:3px}
  .sc-play{flex-direction:column;gap:8px}
  .ycols{height:40px}
  .yaxis{font-size:11px}
}

/* ---------- item 3: "Your turn" fits, reaches and answers back (sprint 2, lane B1) ---------- */
/* the stage under a finger: no text selection, no long-press callout, no double-tap zoom, no grey tap flash
   (UX 1.6, #14); grabbable art keeps its own touch-action:none (SITE.grab) */
svg.stage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* the touch ring (polish B5, G2): an HTML ring rippling out from the finger over four steps, so every touch on
   a stage answers within one drawing, whatever the picture is doing */
.touchring{position:absolute;z-index:6;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:4px solid var(--cream);box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px var(--ink);pointer-events:none;animation:touchRing .34s steps(4,end) forwards}
@keyframes touchRing{0%{transform:scale(.75);opacity:1}100%{transform:scale(2.3);opacity:0}}
/* the bobber under the finger (polish B2): grab cursors, a lift on hover, bigger with a drop shadow while
   dragged, and the value as one of the stage's hanging mustard tags on a string down to the bobber's eye */
.rod input[type=range]{cursor:grab}
.rod.drag input[type=range]{cursor:grabbing}
@media (hover:hover){.rod:hover .bob{translate:0 -3px}}
.rod.drag .bob{scale:1.12;filter:drop-shadow(3px 6px 0 rgba(30,21,16,.25))}
.rod .vtag{top:-30px;padding:2px 8px 3px;border-radius:5px;border-top:7px solid var(--mustard)}
.rod .vtag::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:9px;margin:2px 0 0 -1px;background:var(--ink)}
/* a slider magnet landing (SITE.slider snaps): the tick pulses */
.ticks span.hit::before{animation:tickHit .3s steps(3,end)}
@keyframes tickHit{50%{transform:scale(1.8)}}
/* "Your turn" arrives (polish A4): the label stamps in like GOT IT, then the tray drops in with two mustard pulses */
.step.turn .go{width:fit-content;transform:rotate(-3deg);transform-origin:0 60%}
.step.turn.on .go{animation:goStamp .34s steps(4,end) both}
@keyframes goStamp{0%{transform:rotate(-3deg) scale(1.9);opacity:0}50%{transform:rotate(-3deg) scale(.9);opacity:1}75%{transform:rotate(-3deg) scale(1.06)}100%{transform:rotate(-3deg) scale(1)}}
.sc-play{border-radius:12px}
.sc.playing .sc-play{animation:playIn .36s steps(4,end) .12s both,trayGlow .5s steps(2,end) .5s 2}
@keyframes trayGlow{50%{box-shadow:0 0 0 5px var(--hi-mustard)}}
/* keyboard: "Try it: go to the controls", hidden until focused (UX 1.4a) */
.step .tryit{position:absolute;top:0;right:0;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.step .tryit:focus{top:-22px;right:12px;width:auto;height:auto;overflow:visible;clip:auto;z-index:2;padding:8px 16px;border:3px solid var(--ink);border-radius:999px;background:var(--mustard);color:var(--ink);font:400 16px/1 var(--f-label);box-shadow:3px 3px 0 var(--ink);cursor:pointer}
/* ghosts: the roll gets a ring while its hidden range input has keyboard focus (UX 1.4c) */
#ghosts .ch-stage:has(.sc-bar input.sr:focus-visible) [data-hit="roll"] > rect{stroke:var(--ink);stroke-width:9px;stroke-dasharray:22 12}
@media (prefers-reduced-motion: reduce){
  .touchring{animation:none;opacity:.9}
  .step.turn.on .go,.ticks span.hit::before,.sc.playing .sc-play{animation:none}
  .ybob{transition:none}
}
/* phones: the controls bar at 100 px or less (UX 1.3a), and the picture grows by the bar's height while the
   reader plays (UX 1.3b; site.js api.playing sets --grow and keeps the Your turn card still with scrollBy),
   leaving at least 130 px of text window */
@media (max-aspect-ratio: 1/1), (max-width: 820px){
  .sc.playing .sc-graphic{height:min(calc(min(64svh, calc(100svh - var(--top) - 190px)) + var(--grow, 0px)), calc(100svh - var(--top) - 130px))}
  .sc-bar .ctl{gap:0}
  .sc-bar .ctl-label{display:block;font-size:15px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* (!important: the pages' own laptop margins must not reach the phone rod) */
  .sc-bar .rod{height:44px;margin:25px 13px 0 !important}
  .sc-bar .rod input[type=range]{top:0;height:44px}
  .sc-bar .rod .blank{top:11px}
  .sc-bar .rod .bob{top:1px;width:24px;height:34px;margin-left:-12px}
  .sc-bar .rod .ripple{top:31px}
  .sc-bar .rod .vtag{top:-25px;padding:1px 7px 2px;font-size:12px;border-top-width:6px}
  .sc-bar .rod .vtag::after{height:5px}
  .sc-bar .ticks{height:21px;margin:-17px 13px 0;font-size:11.5px;line-height:1.1;pointer-events:none}
  .sc-bar .ticks span::before{width:8px;height:8px;margin-bottom:1px}
  /* next: its Your turn card is a tall stack of flip cards, so the picture stops pinning once it opens */
  #next.sc.playing .sc-graphic{position:relative;top:auto}
  #next.sc.playing.outro .sc-graphic{position:sticky;top:var(--top)}
}
@media (max-width: 400px){
  .sc-bar .ctl-label{font-size:14px}
  .sc-bar .ticks{height:33px;font-size:11px}
  .ticks span{white-space:normal;width:10ch;line-height:1.1}
}
/* landscape phones (decision 6): the interactives ask to be held upright */
@media (orientation: landscape) and (max-height: 500px){
  .sc-graphic::after{content:"Turn your phone upright for the interactives";position:absolute;left:50%;top:12px;z-index:8;width:max-content;max-width:86%;padding:8px 16px;transform:translateX(-50%);border:3px solid var(--ink);border-radius:999px;background:var(--cream);color:var(--ink);font:400 16px/1.15 var(--f-label);text-align:center;box-shadow:4px 4px 0 var(--ink);pointer-events:none}
}