/* =====================================================================
   AI Tools for Data Analysis — v4, "Watercolor"
   The visual language of the watercolor-graphs skill: warm paper, translucent
   pastel pigment, a hand-ruled grid inside figures, Georgia for the big words,
   a quiet sans for everything else. Shared by every page.
   ===================================================================== */
:root{
  --paper:#faf9f5; --paper2:#f3f1ea; --paper3:#eceae1; --card:#fffefb;
  --ink:#181918; --ink2:#3a3b37; --muted:#6b6c66; --muted2:#85867f; --faint:#a9a9a1;
  --line:#e7e5dd; --line2:#d8d6cc; --grid:#dadbd3;
  --blue:#83bae2; --purple:#ad9be4; --mint:#94c6b2; --gold:#f2be52; --coral:#d77c75; --grey:#cecdc0; --darkblue:#5c8fb5;
  --blueD:#3a74a3; --purpleD:#6552b3; --mintD:#347e60; --goldD:#9c6a06; --coralD:#ae4a44;
  --blueW:#e3eff8; --purpleW:#eeeafa; --mintW:#e5f1ec; --goldW:#fcf1d8; --coralW:#f7e3e1;

  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --shadow:0 1px 0 rgba(24,25,24,.02),0 10px 30px -18px rgba(24,25,24,.22);
  --shadow-lift:0 22px 44px -24px rgba(24,25,24,.32);
  --radius:14px;
  --wrap:1160px;
  --gutter:clamp(18px,4vw,40px);
  --nav-h:62px;

  /* v2 type scale: pick one of these instead of a new size. Reading text is --t-body on the page and at least
     --t-ui inside panels; --t-lead is set in Georgia (font: var(--f-lead)). */
  --t-cap:13px; --t-ui:15px; --t-body:17px; --t-lead:20px;
  --t-h3:clamp(22px,2vw,28px); --t-h2:clamp(36px,4.6vw,60px); --t-display:clamp(46px,6vw,84px);
  --f-lead:400 var(--t-lead)/1.5 var(--serif);
  /* the one panel surface (race, run window, console, manager scene, judgment chart, setup steps, chat boxes):
     a hairline border plus this shadow, at a 14px radius */
  --shadow-tight:0 1px 2px rgba(24,25,24,.05),0 6px 12px -8px rgba(24,25,24,.18);
  /* pigments by meaning. Use these in new work; decoration that means nothing is --c-neutral or absent.
     -d is the text-safe deep version, -w the pale wash. */
  --c-model:var(--blue); --c-coworker:var(--purple); --c-manager:var(--mint); --c-passed:var(--mint); --c-human:var(--gold); --c-error:var(--coral); --c-neutral:var(--grey);
  --c-model-d:var(--blueD); --c-coworker-d:var(--purpleD); --c-manager-d:var(--mintD); --c-passed-d:var(--mintD); --c-human-d:var(--goldD); --c-error-d:var(--coralD); --c-neutral-d:var(--muted);
  --c-model-w:var(--blueW); --c-coworker-w:var(--purpleW); --c-manager-w:var(--mintW); --c-passed-w:var(--mintW); --c-human-w:var(--goldW); --c-error-w:var(--coralW); --c-neutral-w:var(--paper3);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper) radial-gradient(circle, rgba(24,25,24,.13) 1px, transparent 1.4px) 0 0/22px 22px;color:var(--ink2);font-family:var(--sans);font-size:17px;line-height:1.62;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--ink);text-decoration-color:rgba(24,25,24,.3);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--coralD);text-decoration-color:currentColor}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:none}
::selection{background:rgba(242,190,82,.35);color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* the hand-ruled grid, for figure panels */
.gridpaper{background-color:var(--paper);background-image:url(grid.svg);background-size:492px 492px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);position:relative}
.wrap.narrow{max-width:880px}
main,header,footer,section{position:relative}
section.sec{padding:clamp(40px,4.8vw,68px) 0;border-top:1px solid var(--line)}
/* every other section sits on a slightly deeper sheet, so the page reads in chapters */
section.sec.band{background:rgba(237,235,226,.55)}
section.sec.band + section.sec{border-top-color:var(--line2)}
.sec-head{margin-bottom:clamp(26px,3.2vw,40px);max-width:820px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .sub{margin-top:12px}
.sec-head.center .sub{margin-left:auto;margin-right:auto}

/* ---------- type ---------- */
/* v2 has no tracked uppercase kickers: a leftover .kick reads as a quiet sentence-case label */
.kick{display:block;font-family:var(--sans);font-size:var(--t-ui);font-weight:500;color:var(--muted);line-height:1.5}
.kick::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--pig,var(--gold));opacity:.85;margin-right:9px;vertical-align:1px}
/* the dim part stays quieter by weight; its color must still pass 4.5:1 on the band sheets (muted2 was 3.3:1) */
.kick .dim{font-weight:400;color:var(--muted);margin-left:6px}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:400;color:var(--ink);text-wrap:balance}
h2.big{font-size:clamp(28px,3.3vw,42px);line-height:1.12;letter-spacing:-.01em;margin-top:12px}
h2.big em,.display em,h3 em{font-style:italic;color:var(--ink)}
.sub{font-size:clamp(16px,1.35vw,18px);color:var(--ink2);max-width:62ch;line-height:1.6}
.sub b,.sub strong,p b{color:var(--ink);font-weight:650}
.lede{font-size:clamp(16.5px,1.35vw,18.5px);line-height:1.6;color:var(--ink2);max-width:56ch}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.big-num{font-family:var(--serif);color:var(--ink);line-height:1}

/* a painted highlight behind a word: a real watercolor stroke, drawn in */
.hl{position:relative;white-space:nowrap;z-index:0}
.hl::before{content:"";position:absolute;left:-.12em;right:-.12em;bottom:.02em;height:.46em;z-index:-1;border-radius:.2em;
  background:var(--hlc,rgba(242,190,82,.5));filter:url(#wcf);transform-origin:left center;transform:scaleX(0);transition:transform 1.1s var(--ease) .3s}
.in .hl::before,.hl.in::before,.no-js .hl::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.hl::before{transform:none;transition:none}}
/* a full-height highlighter band, like "coworker" in the hero */
.hl.full::before{bottom:-.1em;height:.94em;border-radius:.22em}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.2;color:var(--ink);
  text-decoration:none;padding:12px 20px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;white-space:nowrap;
  transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);color:var(--ink);background:rgba(24,25,24,.04)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{color:var(--paper);background:#2d2e2c;box-shadow:0 12px 24px -14px rgba(24,25,24,.55)}
.btn.small{font-size:13.5px;padding:9px 16px}
.btn.big{font-size:16px;padding:14px 24px}
.btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
/* painted buttons: each is one watercolor stroke (assets/btn/*.webp, painted by Codex: tools/art/buttons.png). Only the
   middle of the stroke stretches, so its rounded ends keep their shape at any width. Gold by default, ink for .primary. */
.btn{--stroke:url(btn/gold.webp);border:1px solid transparent;border-image:var(--stroke) 0 22% fill / 0 1.5em stretch;background:transparent;padding:12px 25px}
.btn.small{padding:9px 20px}
.btn.big{padding:15px 31px}
.btn.primary{--stroke:url(btn/ink.webp);color:#fffefb}
.btn:hover,.btn.primary:hover{background:transparent;box-shadow:none;filter:saturate(1.25) brightness(1.03)}
.btn.primary:hover{color:#fffefb;filter:brightness(1.35)}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:5px 12px;line-height:1.3}
/* a tag is a word in Georgia italic, in its pigment's deep (text-safe) color: no pill, no capitals */
.tag{display:inline-block;font-family:var(--serif);font-style:italic;font-size:var(--t-ui);font-weight:400;letter-spacing:0;color:var(--pd,var(--goldD));line-height:1.3}
.tag.blue{--pw:var(--blueW);--pd:var(--blueD)} .tag.purple{--pw:var(--purpleW);--pd:var(--purpleD)} .tag.mint{--pw:var(--mintW);--pd:var(--mintD)} .tag.coral{--pw:var(--coralW);--pd:var(--coralD)} .tag.ink{--pw:var(--paper3);--pd:var(--ink)}

/* ---------- cards & figure panels ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.card.lift:hover,button.card:hover,a.card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(24,25,24,.05),0 10px 14px -10px rgba(24,25,24,.24);border-color:var(--line2)}
a.card{text-decoration:none;display:block;color:inherit}
button.card{text-align:left;width:100%}
/* the one panel surface: hairline plus --shadow-tight at a 14px radius */
.figure{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-tight);overflow:hidden}
.fig-head{text-align:center;padding:18px 20px 4px}
.fig-title{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink);line-height:1.3}
.fig-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.fig-note{font-size:11.5px;color:var(--muted);line-height:1.5;padding:0 20px 14px}

/* painted icons (inline svg) share one texture filter */
.pig{filter:url(#wcf)}
.hd{stroke:var(--ink);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- nav ---------- */
.skip{position:fixed;left:14px;top:-70px;z-index:400;background:var(--ink);color:var(--paper);padding:11px 19px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px;color:var(--paper)}
.nav{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);display:flex;align-items:center}
.nav::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(250,249,245,.86);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);opacity:0;transition:opacity .35s}
.nav.scrolled::after{opacity:1}
.nav-in{width:100%;max-width:1400px;margin:0 auto;padding:0 clamp(14px,2.4vw,30px);display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:none;position:relative;padding-bottom:2px}
.logo .lw{font-family:var(--serif);font-size:19px;line-height:1;color:var(--ink);white-space:nowrap;letter-spacing:-.005em}
.logo .lw i{font-style:italic;color:var(--muted)}
.logo:hover .lw{color:var(--ink)}
/* the logo: the robot from the course film (assets/logo.webp, painted by Codex from its model sheet: tools/art), inside an
   inline SVG whose ink arm waves twice on arrival, then once every few seconds, and on hover. Markup:
   <svg class="logo-mark" viewBox="-26 0 218 251" width="43" height="50" aria-hidden="true"><g class="lm-arm"><path d="M33 195 Q6 188 -7 150"/>
   <circle cx="-7" cy="148" r="9"/></g><image href="assets/logo.webp" width="192" height="251"/></svg> */
.logo .logo-mark{width:43px;height:50px;flex:none;margin:-10px -4px -6px -10px;overflow:visible;transform-origin:50% 90%;transition:transform .5s var(--spring)}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.06)}
.lm-arm{transform-box:view-box;transform-origin:33px 195px;animation:lmWave 1.6s var(--ease) .6s 2,lmWave 1.6s var(--ease) 9s infinite}
.lm-arm path{fill:none;stroke:#181918;stroke-width:11;stroke-linecap:round}
.lm-arm circle{fill:#181918}
.logo:hover .lm-arm{animation:lmWave 1.2s var(--ease) infinite}
@keyframes lmWave{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-10deg)}45%{transform:rotate(14deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.lm-arm{animation:none}}
/* it builds in on load (site.js adds .lg-build, then .lg-built, then drops both); only while both are on, so the hover
   tilt works after. Scoped names, so a page's own .build or .built rule never reaches the logo */
.logo.lg-build .logo-mark{opacity:0;transform:translateY(6px) scale(.5)}
.logo.lg-build.lg-built .logo-mark{opacity:1;transform:none;transition:opacity .4s,transform .7s var(--spring)}
/* the chapter we are in, beside the logo: its plain name in Georgia italic, cross-fading as we move (site.js) */
.chapter{display:none;align-items:center;gap:14px;min-width:0;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:var(--t-ui);line-height:1.2;color:var(--ink2)}
.chapter::before{content:"";flex:none;width:1px;height:18px;background:var(--line2)}
.chapter .ch-s{display:grid;min-width:0}
.chapter .ch-s span{grid-area:1/1;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s var(--ease)}
.chapter .ch-s span.out{opacity:0}
@media (min-width:1100px){.nav.scrolled .chapter.on{display:flex}}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav-links a.nl{font-size:14.5px;font-weight:500;color:var(--ink2);text-decoration:none;padding:8px 12px;border-radius:999px;position:relative;transition:color .2s,background .2s}
.nav-links a.nl:hover{color:var(--ink);background:rgba(24,25,24,.05)}
.nav-links a.nl[aria-current="page"]{color:var(--ink)}
.nav-links a.nl[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:5px;border-radius:3px;background:rgba(242,190,82,.55);filter:url(#wcf)}
.nav .btn{margin-left:8px}
/* reading progress: a 2px ink line under the nav. The companion walks with our progress, so the line goes while it is
   on the page (html.has-bot, set by companion.js) and stays under reduced motion, where the companion is absent */
.nav-prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--ink);opacity:.8}
.has-bot .nav-prog{display:none}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;color:var(--ink)}
.menu-btn svg{width:24px;height:24px}
.menu-btn path{stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none;transition:transform .35s var(--ease),opacity .2s;transform-origin:center;transform-box:fill-box}
.nav.open .menu-btn .l1{transform:translateY(5px) rotate(45deg)} .nav.open .menu-btn .l2{opacity:0} .nav.open .menu-btn .l3{transform:translateY(-5px) rotate(-45deg)}

/* sound: one round speaker in an ink outline, beside Register at every width (sound.js keeps its state). Waiting for the
   first click: the two waves draw in, slowly, again and again. Playing: the bars dance inside the circle. Off: a quiet x. */
.nav .nav-sound[data-sound]{position:relative;flex:none;display:inline-grid;place-items:center;width:36px;height:36px;margin-left:10px;padding:0;border:1.5px solid var(--ink);
  border-image:none;border-radius:50%;background:rgba(255,254,251,.72);color:var(--ink);animation:none;box-shadow:none;transition:background .2s,border-color .2s,color .2s,transform .25s var(--ease)}
.nav .nav-sound[data-sound]::after{content:"";position:absolute;inset:-5px;border-radius:50%}
.nav .nav-sound[data-sound]:hover{background:rgba(24,25,24,.06);transform:translateY(-1px)}
.nav .nav-sound svg{grid-area:1/1;width:20px;height:20px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav .nav-sound .ns-spk{fill:currentColor;stroke:none}
.nav .nav-sound .w1,.nav .nav-sound .w2{stroke-dasharray:1 1;opacity:1}
.nav .nav-sound .ns-x{display:none}
.nav .nav-sound .ns-g{opacity:.3}   /* the arcs, faintly, under the ones that draw in: waiting never reads as muted */
.nav .nav-sound[data-sound="off"]{color:var(--muted);border-color:var(--muted2)}
.nav .nav-sound[data-sound="off"]:hover{color:var(--ink);border-color:var(--ink)}
.nav .nav-sound[data-sound="off"] .w1,.nav .nav-sound[data-sound="off"] .w2,.nav .nav-sound[data-sound="off"] .ns-g{display:none}
.nav .nav-sound[data-sound="off"] .ns-x{display:inline}
.nav .nav-sound.waiting .w1{animation:nsDraw1 2.4s var(--ease) infinite}
.nav .nav-sound.waiting .w2{animation:nsDraw2 2.4s var(--ease) infinite}
@keyframes nsDraw1{0%{stroke-dashoffset:1;opacity:1}38%,78%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes nsDraw2{0%,14%{stroke-dashoffset:1;opacity:1}52%,78%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.nav .ns-bars{grid-area:1/1;display:none;align-items:flex-end;gap:2.5px;height:14px}
.nav .ns-bars i{width:2.5px;height:14px;border-radius:2px;background:currentColor;transform-origin:50% 100%;transform:scaleY(.3)}
.nav .nav-sound.playing svg{display:none}
.nav .nav-sound.playing .ns-bars{display:inline-flex}
.nav .nav-sound.playing .ns-bars i{animation:nsBar 1.05s ease-in-out infinite}
.nav .nav-sound.playing .ns-bars i:nth-child(2){animation-delay:-.45s}.nav .nav-sound.playing .ns-bars i:nth-child(3){animation-delay:-.2s}.nav .nav-sound.playing .ns-bars i:nth-child(4){animation-delay:-.7s}
@keyframes nsBar{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.nav .nav-sound.waiting .w1,.nav .nav-sound.waiting .w2,.nav .nav-sound.playing .ns-bars i{animation:none}.nav .nav-sound.playing .ns-bars i{transform:scaleY(.6)}}

/* phones and tablets: the links fold into the sheet. Once the hero has scrolled away, site.js adds a compact ink
   Register (.nav-reg, href from COHORT.url) and, under 760px, the wordmark text steps aside to make room */
.nav-reg{display:none}
@media (max-width:880px){
  .nav-in{gap:8px}
  .nav-links{display:none}
  .logo{margin-right:auto}
  .logo .lw{font-size:16.5px}
  .menu-btn{display:inline-flex;margin-left:0}
  .nav .nav-sound[data-sound]{margin-left:0}
  .nav .nav-reg{margin-left:0;font-size:14px;padding:8px 17px}
  .nav.reg-on .nav-reg{display:inline-flex;animation:navIn .35s var(--ease) both}
  .nav.open .nav-reg{visibility:hidden}   /* the sheet carries its own Register */
}
@media (max-width:760px){.nav.reg-on .logo .lw{display:none}}
@media (max-width:350px){.logo .lw i{display:none}}
@keyframes navIn{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.nav.reg-on .nav-reg{animation:none}.sheet{transition:none}.chapter .ch-s span{transition:none}}

/* the phone sheet: the three pages in large serif, Register, then this page's chapters as a plain list */
.sheet{position:fixed;inset:0;z-index:190;background:var(--paper);padding:calc(var(--nav-h) + 18px) 24px 36px;display:flex;flex-direction:column;
  clip-path:circle(0 at calc(100% - 38px) 32px);transition:clip-path .6s var(--ease-in-out);overflow-y:auto;overscroll-behavior:contain;visibility:hidden}
.sheet.open{clip-path:circle(150% at calc(100% - 38px) 32px);visibility:visible}
.sheet a.sl{font-family:var(--serif);font-size:34px;line-height:1.15;color:var(--ink);text-decoration:none;padding:7px 0;align-self:flex-start;position:relative}
.sheet a.sl[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:.3em;z-index:-1;border-radius:3px;background:rgba(242,190,82,.5);filter:url(#wcf)}
.sheet .btn{margin-top:20px;align-self:flex-start}
/* the next cohort under Register, filled by cohort.js in the visitor's own time zone */
.sheet-when{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:var(--t-ui);line-height:1.5;color:var(--muted)}
.sheet-when span{display:block}
.sheet-when [data-cohort="dates"]{font-style:normal;font-size:var(--t-body);color:var(--ink)}
.sheet .sheet-ch{margin-top:26px;border-top:1px solid var(--line);padding-top:6px;display:flex;flex-direction:column}
.sheet .sheet-ch a{display:flex;align-items:center;gap:14px;min-height:48px;font-size:var(--t-body);color:var(--ink2);text-decoration:none;border-bottom:1px solid rgba(231,229,221,.6)}
.sheet .sheet-ch a:last-child{border-bottom:none}
.sheet .sheet-ch i{flex:none;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--pc,var(--grey));background:transparent;filter:url(#wcf)}
.sheet .sheet-ch a.past i,.sheet .sheet-ch a.now i{background:var(--pc,var(--grey))}
.sheet .sheet-ch a.now{color:var(--ink)}
.sheet .sheet-ch em{margin-left:auto;padding-left:12px;font-family:var(--serif);font-style:italic;font-size:var(--t-ui);color:var(--muted);white-space:nowrap}

/* the chapter rail at the right edge (wide screens): out of the way while the hero is under it */
.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:150;display:none;flex-direction:column;gap:3px;transition:opacity .3s var(--ease),visibility .3s}
@media (min-width:1260px){.rail{display:flex}}
.rail.away{opacity:0;visibility:hidden}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:20px;text-decoration:none;color:var(--muted2)}
.rail a i{flex:none;width:26px;height:2px;border-radius:2px;background:currentColor;opacity:.5;transform-origin:100% 50%;transform:scaleX(.46);transition:transform .35s var(--ease),opacity .25s,background .25s}
.rail a span{font-size:var(--t-cap);font-weight:500;opacity:0;transform:translateX(6px);transition:opacity .25s,transform .3s var(--ease);white-space:nowrap;background:var(--card);
  border:1px solid var(--line);padding:2px 8px;border-radius:6px;pointer-events:none;color:var(--ink2)}
.rail:hover a span,.rail a:focus-visible span{opacity:.95;transform:none}
.rail a.on i{transform:none;opacity:1;background:var(--ink)}

/* ---------- reveals (content stays visible without JS) ---------- */
.js [data-rv]:not(.in){opacity:0}
.js [data-rv].in{animation:rvUp .85s var(--ease) backwards;animation-delay:var(--d,0s)}
.js [data-rv="fade"].in{animation-name:rvFade}
.js [data-rv="scale"].in{animation-name:rvScale}
@keyframes rvUp{from{opacity:0;transform:translateY(16px)}}
@keyframes rvFade{from{opacity:0}}
@keyframes rvScale{from{opacity:0;transform:scale(.97)}}
@media (prefers-reduced-motion:reduce){.js [data-rv]:not(.in){opacity:1}.js [data-rv].in{animation:none}}
.js .split:not(.is-split){opacity:0}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split .w > span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease);transition-delay:calc(var(--i) * 50ms + var(--d0,0ms))}
.split.in .w > span{transform:none}
@media (prefers-reduced-motion:reduce){.split .w > span{transform:none;transition:none}}

/* ---------- modal & tooltip ---------- */
.modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;visibility:hidden;pointer-events:none}
.modal.open{visibility:visible;pointer-events:auto}
.modal .scrim{position:absolute;inset:0;background:rgba(24,25,24,.35);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;transition:opacity .35s}
.modal.open .scrim{opacity:1}
.modal .box{position:relative;background:var(--paper);border-radius:16px;max-width:720px;width:100%;max-height:88vh;overflow-y:auto;
  padding:30px 32px 26px;box-shadow:0 2px 6px rgba(24,25,24,.08),0 40px 90px -30px rgba(24,25,24,.45);opacity:0;transform:translateY(20px) scale(.98);transition:opacity .35s var(--ease),transform .45s var(--ease);overscroll-behavior:contain}
.modal.open .box{opacity:1;transform:none}
.modal.wide .box{max-width:1080px}
@media (max-width:640px){.modal .box{padding:24px 18px 20px;border-radius:14px}}
.modal .x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:var(--card);display:grid;place-items:center;
  color:var(--ink2);transition:transform .3s var(--ease),border-color .2s;z-index:2}
.modal .x:hover{border-color:var(--ink);transform:rotate(90deg)}
.modal .mk{font-family:var(--serif);font-style:italic;font-size:var(--t-ui);color:var(--muted);font-weight:400;display:block;padding-right:44px}
.modal h3{font-size:clamp(22px,2.6vw,28px);margin:8px 0 10px;line-height:1.2}
.modal p{font-size:15.5px;margin-bottom:12px;max-width:64ch}
.modal pre{font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;white-space:pre-wrap;word-break:break-word;margin:12px 0}
.modal .note{font-size:var(--t-ui);color:var(--ink2);background:var(--goldW);border-radius:10px;padding:10px 14px;margin-top:14px}
.modal img{border-radius:12px;border:1px solid var(--line2);width:100%;height:auto}
pre .c{color:var(--muted2)} pre .k{color:var(--purpleD);font-weight:600} pre .s{color:var(--mintD)} pre .f{color:var(--mintD);font-weight:700} pre .n{color:var(--coralD)} pre .w{color:var(--coralD);font-weight:700}
.tip{position:fixed;z-index:500;pointer-events:none;background:var(--ink);color:#f3f1ea;border-radius:9px;padding:8px 11px;font-size:12px;line-height:1.5;box-shadow:0 12px 30px -8px rgba(24,25,24,.45);
  opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s;max-width:260px}
.tip.show{opacity:1;transform:none}
.tip b{color:#fff}
.tip em{font-style:normal;color:var(--gold)}

/* ---------- footer (the inner pages): a painted strip of the landscape the hero stands in, feathered into the
   paper, then one quiet row of links and a one-line colophon. Built from assets/world/far|mid|near.webp (2400px
   tiles that repeat seamlessly), each layer paler than the one in front; ?land=strips (html[data-land=strips]) shows
   the race's older strips instead. The markup belongs to the pages; this is CSS only. ---------- */
.foot{position:relative;overflow:hidden;background:var(--paper);padding:160px 0 30px}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:170px;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(250,249,245,0) 44%,var(--paper) 90%),
    url(world/near.webp) 50% 74px/auto 92px repeat-x,
    linear-gradient(rgba(250,249,245,.36),rgba(250,249,245,.36)),
    url(world/mid.webp) 22% 40px/auto 90px repeat-x,
    linear-gradient(rgba(250,249,245,.5),rgba(250,249,245,.5)),
    url(world/far.webp) 64% 4px/auto 104px repeat-x,
    linear-gradient(180deg,var(--paper),#eef3f4 60%,var(--paper))}
html[data-land=strips] .foot::before{
  background:
    linear-gradient(180deg,rgba(250,249,245,0) 42%,var(--paper) 88%),
    url(race/near.webp) 50% 68px/max(106%,1280px) auto no-repeat,
    linear-gradient(rgba(250,249,245,.38),rgba(250,249,245,.38)),
    url(race/mid.webp) 30% 34px/max(106%,1280px) auto no-repeat,
    linear-gradient(rgba(250,249,245,.5),rgba(250,249,245,.5)),
    url(race/far.webp) 70% 6px/max(106%,1280px) auto no-repeat,
    linear-gradient(180deg,var(--paper),#eef3f4 60%,var(--paper))}
.foot-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start}
@media (max-width:860px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 20px}.foot .fbrand{grid-column:1/-1}}
@media (max-width:520px){.foot-grid{grid-template-columns:minmax(0,1fr);gap:20px}}
.foot .fbrand{display:flex;gap:14px;align-items:flex-start}
.foot .fbrand svg{width:48px;height:38px;flex:none;overflow:visible}
.foot .fname{font-family:var(--serif);font-size:22px;color:var(--ink);line-height:1.15}
.foot .fname i{display:block;font-size:var(--t-body);color:var(--muted);margin-top:4px}
.foot h4{font-family:var(--sans);font-size:var(--t-ui);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:6px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.foot a{color:var(--ink2);text-decoration:none;font-size:var(--t-ui)}
.foot a:hover{color:var(--coralD)}
.foot .colophon{position:relative;margin-top:28px;font-size:var(--t-cap);color:var(--muted);line-height:1.6}
.foot .colophon span + span::before{content:" "}
.foot .colophon b{color:var(--ink2);font-weight:600}

/* ---------- the companion: a small robot that walks with our reading (companion.js) ----------
   Wide screens: along the bottom edge, on a pencil line; click it and it hops. Phones (under 760px): along the nav's
   bottom line, 28px tall, never taking a tap. Its bubble only shows where it covers nothing: no control, figure,
   heading or text (phones, under the nav for 2.2s, may cover text when nothing else is clear). */
#bot{position:fixed;left:0;right:0;bottom:0;height:76px;z-index:95;pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s var(--ease)}
#bot.on{opacity:1;transform:none}
body[data-bot="off"] #bot{display:none}
.bot-ground{position:absolute;left:0;right:0;bottom:6px;width:100%;height:14px;opacity:.55}
.bot-ground path{fill:none;stroke:var(--muted2);stroke-width:1.2;vector-effect:non-scaling-stroke}
.bot{position:absolute;left:0;bottom:12px;width:44px;height:55px;padding:0;border:0;background:none;cursor:pointer;pointer-events:none;transform:translateX(var(--tx,12px));-webkit-tap-highlight-color:transparent}
#bot.on .bot{pointer-events:auto}
.bot svg{display:block;width:100%;height:100%;overflow:visible;transition:transform .18s}
.bot.left svg{transform:scaleX(-1)}
.bot .leg,.bot .arm{transform-box:fill-box;transform-origin:50% 0}
#bot.walk .la{animation:botLeg .32s linear infinite}
#bot.walk .lb{animation:botLeg .32s linear -.16s infinite}
@keyframes botLeg{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}
#bot.walk .al{animation:botArm .32s linear infinite}
#bot.walk .ar{animation:botArm .32s linear -.16s infinite}
@keyframes botArm{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
#bot.walk .bot-all{animation:botBob .16s ease-in-out infinite alternate}
@keyframes botBob{to{transform:translateY(-1.2px)}}
.bot .bot-eyes{transform-box:fill-box;transform-origin:50% 50%;transition:transform .07s}
.bot.blink .bot-eyes{transform:scaleY(.12)}
.bot.hop{animation:botHop .55s cubic-bezier(.3,.7,.3,1)}
@keyframes botHop{0%{translate:0 0;scale:1}18%{scale:1.08 .9}45%{translate:0 -16px;scale:.95 1.06}75%{translate:0 0;scale:1.05 .95}100%{translate:0 0;scale:1}}
.bot.wave .ar{animation:botWave 1.2s ease-in-out}
@keyframes botWave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-150deg)}40%,80%{transform:rotate(-120deg)}}
/* the bubble: placed by companion.js (left, top, --tail), wraps at 260px, never wider than the screen */
.bot-bub{position:absolute;left:0;bottom:74px;width:max-content;max-width:min(260px,calc(100vw - 24px));font-size:14px;font-weight:500;line-height:1.35;color:var(--ink);
  background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:7px 12px;box-shadow:var(--shadow-tight);text-wrap:pretty;
  opacity:0;transform:translateY(4px);transition:opacity .2s,transform .3s var(--ease);pointer-events:none}
.bot-bub.show{opacity:1;transform:none}
.bot-bub::after{content:"";position:absolute;left:var(--tail,24px);bottom:-6px;width:10px;height:10px;margin-left:-5px;background:var(--card);
  border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);transform:rotate(45deg)}
/* phones: the robot stands on the nav's bottom line, between the logo and the first control; its bubble hangs below */
#bot.nav-mode{top:0;bottom:auto;height:var(--nav-h);z-index:205;transform:translateY(-4px)}
#bot.nav-mode.on{transform:none}
#bot.nav-mode .bot-ground{display:none}
#bot.nav-mode .bot,#bot.nav-mode.on .bot{bottom:0;width:22px;height:28px;pointer-events:none;cursor:default}
#bot.nav-mode .bot-bub{top:calc(100% + 10px);bottom:auto;font-size:13.5px;transform:translateY(-4px)}
#bot.nav-mode .bot-bub.show{transform:none}
#bot.nav-mode .bot-bub::after{top:-6px;bottom:auto;transform:rotate(225deg)}
@media (prefers-reduced-motion:reduce){#bot{display:none}}

/* page transitions between the three pages: a 200ms cross-fade, with the nav and the logo holding still. Browsers
   without cross-document view transitions just navigate; reduced motion turns it off. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .nav-in{view-transition-name:site-nav}   /* not .nav itself: a named element is a backdrop root, and .nav::after's blur needs to see the page */
  .nav .logo-mark{view-transition-name:site-logo}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.2s}
}

@media print{
  .nav,.rail,.sheet,.skip,.modal,.tip,#bot,.foot::before{display:none!important}
  .foot{padding-top:30px}
  body{background:#fff}
  .js [data-rv]{opacity:1!important;animation:none!important}
  .split .w > span{transform:none!important}
}