/* =====================================================================
   The curriculum page (v2): the two days drawn to scale in the hero, an open list of what we can do, the nineteen
   topics as a compact list beside a sticky panel of evidence, and a close on the last prompt of setup.
   Loaded after site.css and pages.css (shared with the setup page, so the rules it sets for the old layout are
   overridden here rather than edited there). Loops run only while their element is on screen (.live); under
   prefers-reduced-motion every piece shows its final state.
   ===================================================================== */
:root{
  --c-shadow:var(--shadow-tight, 0 1px 2px rgba(24,25,24,.05), 0 6px 12px -8px rgba(24,25,24,.18));
  --c-ease:cubic-bezier(.25,1,.5,1);   /* quart-out */
}

/* ---------- the hero: headline and dated lede beside the two days, drawn to scale ---------- */
.ch-hero::before,.ch-hero::after{content:none}          /* no CSS blobs: the colour comes from the painted schedule */
.ch-hero{padding-bottom:clamp(30px,4vw,56px)}
.ch-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(28px,4.4vw,68px);align-items:center}
.ch-hero .display{margin-top:0}
.ch-date{font-weight:600;color:var(--ink)}
.ch-date[hidden] + .ch-dot{display:none}   /* after the last cohort the date goes, and its full stop with it */
.ch-cta{align-items:center;gap:12px 18px}
.ch-count{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted)}
@media (max-width:960px){
  .ch-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .ch-side{max-width:560px}
}

.sched{position:relative;margin:0}
/* the hour ruler: New York time, 10:00 to 15:30 */
.sc-axis{position:relative;height:44px;margin:0 0 4px;border-bottom:1px solid rgba(24,25,24,.28)}
.sc-axis span{position:absolute;left:calc(var(--x) * 100%);bottom:8px;transform:translateX(-50%);font-family:var(--serif);font-size:13px;line-height:1;color:var(--ink2)}
.sc-axis span::after{content:"";position:absolute;left:50%;top:calc(100% + 3px);width:1px;height:6px;background:rgba(24,25,24,.4)}
.sc-axis span:nth-child(2){transform:none}
.sc-axis span:nth-child(2)::after{left:0}
.sc-tz{position:absolute;left:0;top:0;font-family:var(--serif);font-style:italic;font-size:12.5px;line-height:1;color:var(--muted)}

.sc-day{position:relative}
.sc-lbl{margin:14px 0 7px;font-size:13px;line-height:1.3;color:var(--muted)}
.sc-lbl b{font-family:var(--serif);font-weight:400;font-size:17px;color:var(--ink);margin-right:6px}
.sc-lbl i{font-family:var(--serif)}
.sc-bar{position:relative;height:38px}
.sched.has-loc .sc-bar{margin-bottom:21px}
.sc-seg{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);display:grid;place-items:center;border-radius:7px}
.sc-seg canvas{position:absolute;left:-5px;top:-5px;width:calc(100% + 10px);height:calc(100% + 10px);pointer-events:none;transform-origin:0 50%}
.sc-seg canvas{transition:transform 1.1s var(--c-ease);transition-delay:calc(.2s + var(--i,0) * .16s)}
.js .sched:not(.go) .sc-seg canvas{transform:scaleX(.03)}
.sc-seg b{position:relative;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-loc{position:absolute;top:calc(100% + 4px);left:0;right:0;text-align:center;font-size:11.5px;line-height:1.2;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.sc-loc:empty{display:none}
/* without the painter (no script, or wc.js failed) the sessions still show as flat pigment */
html:not(.js) .sc-seg,.sched.nowc .sc-seg{background:rgba(131,186,226,.55)}
html:not(.js) .sc-day[data-day="2"] .sc-seg,.sched.nowc .sc-day[data-day="2"] .sc-seg{background:rgba(173,155,228,.55)}
.sc-brk{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--muted);white-space:nowrap}

/* the topics in order, not on the clock: one painted dot per topic, a link to it */
.sc-dots{display:grid;grid-template-columns:repeat(12,minmax(26px,30px));margin:4px 0 0 -1px}
.sc-dots a{position:relative;height:30px;display:grid;place-items:center;text-decoration:none;color:var(--ink);border-radius:50%}
.sc-dots i{position:relative;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;isolation:isolate;
  font-style:normal;font-family:var(--serif);font-size:11px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;transition:transform .35s var(--c-ease)}
.sc-dots i::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--c);opacity:.78;z-index:-1;filter:url(#wcf)}
.sc-dots a:hover i,.sc-dots a:focus-visible i{transform:scale(1.18)}
.sc-dots a:focus-visible{outline-offset:1px}
.js .sched:not(.go) .sc-dots i{opacity:0;transform:scale(.4)}
.sched.go .sc-dots i{animation:dotIn .55s var(--c-ease) backwards;animation-delay:calc(.75s + var(--n,0) * 28ms)}
@keyframes dotIn{from{opacity:0;transform:scale(.4)}}
/* hover or focus pops a paper label above the dot */
.sc-tip{position:absolute;bottom:calc(100% + 5px);left:50%;z-index:5;transform:translate(-50%,4px);opacity:0;pointer-events:none;white-space:nowrap;
  background:var(--card);border:1px solid var(--line2);border-radius:9px;box-shadow:var(--c-shadow);padding:5px 10px 6px;
  font-size:13px;line-height:1.25;color:var(--ink);transition:opacity .18s,transform .22s var(--c-ease)}
.sc-tip b{font-family:var(--serif);font-weight:400;color:var(--muted);margin-right:4px}
.sc-dots a:hover .sc-tip,.sc-dots a:focus-visible .sc-tip{opacity:1;transform:translate(-50%,0)}
.sc-dots a:nth-child(-n+2) .sc-tip{left:0;transform:translate(0,4px)}
.sc-dots a:nth-child(-n+2):hover .sc-tip,.sc-dots a:nth-child(-n+2):focus-visible .sc-tip{transform:none}
.sc-day[data-day="1"] .sc-dots a:nth-child(n+10) .sc-tip{left:auto;right:0;transform:translate(0,4px)}
.sc-day[data-day="1"] .sc-dots a:nth-child(n+10):hover .sc-tip,.sc-day[data-day="1"] .sc-dots a:nth-child(n+10):focus-visible .sc-tip{transform:none}

/* the night between: the robot asleep at the right, between the two days */
.sc-night{position:relative;height:36px;display:flex;align-items:center;justify-content:flex-end;padding-right:120px;
  font-family:var(--serif);font-style:italic;font-size:13px;color:var(--muted)}
.sc-sleep{position:absolute;right:-4px;bottom:-24px;display:block;pointer-events:none}
.sc-bot{width:auto;height:80px;transform-origin:30% 100%}
.sc-sleep.live .sc-bot{animation:scBreathe 4.6s ease-in-out infinite}
@keyframes scBreathe{0%,100%{transform:none}50%{transform:scale(1.008,1.018)}}
.sc-note{margin-top:22px;font-size:14px;line-height:1.55;color:var(--muted);max-width:52ch}
/* two columns on a narrow laptop or a tablet held sideways: the schedule is too narrow for the robot beside day one's
   last dots, so it curls up smaller and lower */
@media (min-width:961px) and (max-width:1099.98px){
  .sc-night{padding-right:96px}
  .sc-sleep{bottom:-30px}
  .sc-bot{height:64px}
}
@media (max-width:600px){
  .sc-lbl{margin-top:12px}
  .sc-lbl b{font-size:16px}
  .sc-dots{grid-template-columns:repeat(12,minmax(26px,1fr))}
  .sc-night{height:50px;padding-right:96px}
  .sc-sleep{bottom:-14px}
  .sc-bot{height:62px}
  .sc-seg b{font-size:12px}
  .sc-brk{font-size:10.5px;letter-spacing:0}
  .sc-seg canvas{left:1px;width:calc(100% - 2px)}   /* the washes sit a little inside their boxes, clear of "break" */
}

/* ---------- what we can do: an open two-column list with painted ticks ---------- */
.outc .big{margin-top:0}
.outc .checklist{gap:0 clamp(24px,4vw,56px);margin-top:clamp(18px,2.4vw,28px)}
.outc .checklist li{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0;font-size:16.5px;line-height:1.5;color:var(--ink2)}
.checklist li > p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
.checklist li svg{margin-top:-1px}
.to{position:relative;margin-left:.35em;font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--muted);white-space:nowrap;
  text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:rgba(24,25,24,.35);text-underline-offset:.22em}
.to::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:28px;transform:translateY(-50%)}   /* a 28px hit area */
.to:hover{color:var(--ink);text-decoration-style:solid}
/* the cheering robot hops up at the end of the list once the last tick lands */
.outc .checklist li.ck-bot{display:flex;align-items:flex-end;gap:12px;border-top-color:transparent;padding:4px 0 0;min-height:0;overflow:visible}
.cb-pose{display:block;width:56px;flex:none;transform-origin:50% 100%}
.cb-pose img{width:100%;height:auto;opacity:0;transform:translateY(34px) scale(.7);transition:opacity .35s,transform .8s var(--spring)}
.cb-t{font-family:var(--serif);font-style:italic;font-size:17px;white-space:nowrap;color:var(--mintD);margin-bottom:8px;opacity:0;transform:translateX(-8px);transition:opacity .5s .4s,transform .6s var(--c-ease) .4s}
.checklist.all .cb-pose img{opacity:1;transform:none}
.checklist.all .cb-t{opacity:1;transform:none}
.checklist.all .cb-pose{animation:cHop .62s cubic-bezier(.3,.7,.3,1) .8s}
.checklist.all li.ck-bot:hover .cb-pose{animation:cHop .62s cubic-bezier(.3,.7,.3,1)}
@keyframes cHop{0%{transform:none}20%{transform:scale(1.06,.92)}50%{transform:translateY(-14px) scale(.96,1.05)}78%{transform:scale(1.04,.96)}100%{transform:none}}
@media (max-width:800px){.outc .checklist li{font-size:16px}.cb-pose{width:48px}}

/* ---------- the nineteen topics: a compact list beside a sticky panel of evidence ---------- */
.days-sec .sec-head{margin-bottom:clamp(20px,2.6vw,32px)}
.days-sec .sec-head .big{margin-top:0}
.days-grid{display:block}
.ev{display:none}
@media (min-width:1100px){
  .days-grid{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:clamp(36px,4vw,60px);align-items:start}
  .js .ev{display:block}
}
.days-sec .day{margin-top:0}
.days-sec .day + .day{margin-top:clamp(30px,3.4vw,44px)}
.days-sec .day-head{display:block;padding:0 0 8px 64px}
.day-head h3{font-size:clamp(30px,3vw,38px);line-height:1.1}
.day-head .dd{font-size:15.5px;color:var(--muted);margin-left:10px;white-space:nowrap;letter-spacing:0}
.days-sec .day-head .dsub{display:block;margin:4px 0 0;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted)}
@media (max-width:640px){
  .days-sec .day-head{padding-left:50px}
  .day-head .dd{display:block;margin:4px 0 0;font-size:15px}
}

/* the rail runs down the whole day; it is painted once and uncovered as we read, so its colours stay under their topics */
.days-sec .track{padding-left:64px}
.track .fill{height:calc(100% - 20px);clip-path:inset(0 0 calc(100% - var(--p,0) * 100%) 0);transition:clip-path .15s linear}
#day1 .fill{background:var(--blue)}
#day2 .fill{background:linear-gradient(180deg,var(--purple) 0 calc(var(--g1,45%) - 2%),var(--mint) calc(var(--g1,45%) + 2%) calc(var(--g2,60%) - 2%),var(--gold) calc(var(--g2,60%) + 2%))}
.rows{list-style:none}
@media (max-width:640px){.days-sec .track{padding-left:50px}}

/* the four level dividers: Georgia italic on a soft wash of their pigment */
.lvl{position:relative;isolation:isolate;margin:6px 0 4px;padding:8px 14px 9px;font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.3;color:var(--ink)}
.lvl::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:min(100%,430px);border-radius:12px 26px 16px 9px;background:var(--lc);opacity:.34;filter:url(#wcf);z-index:-1}
.lvl span{position:relative}
.rows + .lvl{margin-top:14px}

/* one topic: the number on the rail, a Georgia title, one muted line; it opens in place */
.days-sec .blk{background:none;border:0;border-radius:12px;box-shadow:none;padding:0;margin:0;transition:background .3s;z-index:2}
.days-sec .blk:hover{transform:none;border-color:transparent}
.blk summary{position:relative;display:block;list-style:none;cursor:pointer;padding:8px 46px 9px 14px;border-radius:12px;transition:background .25s}
.blk summary::-webkit-details-marker{display:none}
.blk summary:hover{background:rgba(255,254,251,.72)}
.blk summary:focus-visible{outline-offset:-2px}
.blk summary::after{content:"+";position:absolute;right:12px;top:14px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);
  display:grid;place-items:center;font-size:16px;line-height:1;color:var(--ink2);background:var(--card);transition:transform .3s var(--c-ease),border-color .2s}
.blk summary:hover::after{border-color:var(--ink2)}
.blk.open summary::after{transform:rotate(45deg)}
.blk h4{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.45vw,20px);line-height:1.25;color:var(--ink)}
.blk h4 .if{font-size:14px;color:var(--muted);margin-left:6px}
.blk .ln{display:block;margin-top:2px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.days-sec .blk .no{left:-59px;top:9px;width:36px;height:36px;font-size:14px;background:var(--paper)}
@media (max-width:640px){
  .days-sec .blk .no{left:-48px;top:10px;width:31px;height:31px;font-size:12.5px}
  .blk summary{padding:9px 40px 10px 10px}
  .blk summary::after{right:8px}
}
.blk[data-lv="2"]{--nc:var(--purple)} .blk[data-lv="3"]{--nc:var(--mint)} .blk[data-lv="c"]{--nc:var(--gold)}
#day1 .blk{--nc:var(--blue)}
.blk.open{background:rgba(255,254,251,.78)}
@media (min-width:1100px){.js .blk.cur > details > summary{background:rgba(255,254,251,.6)}}

/* the opening: grid rows from 0fr to 1fr, so nothing animates height (only with the script, which adds .open) */
.more{display:grid;grid-template-rows:1fr}
.js .more{grid-template-rows:0fr;transition:grid-template-rows .3s var(--c-ease)}
.js .blk.open .more{grid-template-rows:1fr}
.more-in{overflow:hidden;min-height:0;padding:0 14px}
.more-in > :first-child{margin-top:4px}
.more-in > :last-child{margin-bottom:16px}
.days-sec .blk .more p{font-size:15.5px;line-height:1.6;color:var(--ink2);max-width:62ch;margin-bottom:8px}
.days-sec .blk .more p.tks{font-size:14px;color:var(--muted)}
.rest{display:none}
.blk code{font-family:var(--mono);font-size:.86em;color:var(--purpleD);background:var(--purpleW);border-radius:5px;padding:1px 6px}
/* topic 02: the three "which brain" answers, as plain text */
.brains{margin:4px 0 10px;max-width:62ch}
.brains > div{display:grid;grid-template-columns:116px minmax(0,1fr);gap:4px 12px;padding:7px 0;border-top:1px solid var(--line)}
.brains dt{font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--ink)}
.brains dd{font-size:15px;line-height:1.55;color:var(--ink2)}
.brains b{color:var(--ink);font-weight:600}
@media (max-width:560px){.brains > div{grid-template-columns:minmax(0,1fr);gap:2px}}
/* below 1100px the three level machines sit under their dividers (the divider already names the level and its line) */
.mach-slot{padding:0 0 12px 14px}
.mach-slot > figure{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:8px 20px;align-items:center;margin:0;max-width:640px}
.mach-slot .art-t,.mach-slot .art-note i{display:none}
.mach-slot .ev-fig{border:1px solid var(--line);border-radius:10px;padding:2px 4px}
.mach-slot .ev-fig svg{display:block;width:100%;height:auto;aspect-ratio:320/150}
.mach-slot .art-note{margin:0;font-size:14.5px;color:var(--muted);max-width:34ch}
/* on a phone the machine alone, under the divider's own line, so the page stays short */
@media (max-width:640px){
  .mach-slot{padding-bottom:10px}
  .mach-slot > figure{grid-template-columns:minmax(0,1fr);max-width:280px}
  .mach-slot .art-note{display:none}
}

/* topic 13: the Codex look-ahead */
.ahead{margin:8px 0 6px}
.days-sec .blk .ahead p{font-size:15px}
.ahead-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px;max-width:600px}
.ahead-shots figure{margin:0}
.ahead-shots figcaption{font-size:13px;line-height:1.45;color:var(--muted);margin-top:6px}
/* topic 18: one line about this website */
.built{margin:2px 14px 10px;font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--muted)}

/* a link into the outline lands its topic with a gold glow */
.days-sec .blk.flash{animation:blkFlash 2.2s var(--c-ease)}
@keyframes blkFlash{0%,35%{background:var(--goldW);box-shadow:0 0 0 3px rgba(242,190,82,.55)}}
.blk{scroll-margin-top:calc(var(--nav-h) + 20px)}
/* below 1100px a jump lands its row just under the sticky strip (the page's scroll padding already clears the nav) */
@media (max-width:1099.98px){.blk,.day{scroll-margin-top:66px}}
@media (max-width:720px){.blk,.day{scroll-margin-top:48px}}

/* the robot's head rides the tip of the rail, and bounces each time a topic lights up; it passes behind the numbers */
.track .rider{position:absolute;left:23px;top:calc(10px + var(--p,0) * (100% - 20px));width:42px;z-index:3;pointer-events:none;
  transform:translate(-50%,-58%);opacity:0;transition:top .15s linear,opacity .35s}
.track.riding .rider{opacity:1}
.rider .rd-in{display:block;transform-origin:50% 90%}
.rider svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 2px 2px rgba(24,25,24,.18))}
.rider .rd-in.hop{animation:rdHop .5s cubic-bezier(.3,.7,.3,1)}
@keyframes rdHop{0%{transform:none}25%{transform:scale(1.12,.86)}55%{transform:translateY(-15px) rotate(-6deg)}80%{transform:scale(1.04,.96)}100%{transform:none}}
@media (max-width:640px){.track .rider{left:17px;width:32px}}

/* below 1100px, with no panel: a sticky strip of the nineteen topics */
.day-strip{display:none;position:sticky;top:calc(var(--nav-h) + 6px);z-index:60;margin:0 0 10px}
@media (max-width:1099.98px){.js .day-strip{display:block}}
.dst{display:flex;align-items:flex-end;gap:12px;padding:5px 12px 3px;border-radius:14px;background:rgba(255,254,251,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line2);box-shadow:var(--c-shadow)}
.dst-day{min-width:0;flex:none}
.dst-day + .dst-day{border-left:1px solid var(--line);padding-left:10px}
.dst-lbl{display:block;font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.2;color:var(--muted);white-space:nowrap;padding-left:4px}
.dst-dots{display:flex}
/* every dot is a 32px target; a topic not yet read is a ring, one we have read past fills with its level's pigment,
   and the current one grows inside an ink ring */
.dst-dots a{position:relative;width:32px;height:32px;flex:none;display:grid;place-items:center;text-decoration:none;border-radius:8px}
.dst-dots i{position:relative;display:block;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--muted2);background:var(--card);
  transition:transform .4s var(--spring),border-color .35s}
.dst-dots i::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--dc);opacity:0;filter:url(#wcf);transition:opacity .35s}
.dst-dots a:hover i{transform:scale(1.25);border-color:var(--ink2)}
.dst-dots a.on i{border-color:var(--dd)}
.dst-dots a.on i::before{opacity:1}
.dst-dots a[aria-current] i{transform:scale(1.4)}
.dst-dots a[aria-current]::after{content:"";position:absolute;left:50%;top:50%;width:21px;height:21px;margin:-10.5px 0 0 -10.5px;border-radius:50%;border:1.5px solid var(--ink)}
.dst-now{flex:1 1 auto;min-width:0;align-self:center;font-family:var(--serif);font-size:14.5px;line-height:1.25;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:4px}
.dst-now b{font-weight:400;color:var(--muted);margin-right:6px}
@media (max-width:900px){.dst-now{display:none}}
.dst-more{display:none}
/* on a phone nineteen 32px targets do not fit in one row: the strip is one slim row of small dots, nearly edge to edge,
   and a tap opens it over the page to the full set of 32px targets, each day in two rows, with the current topic named */
@media (max-width:720px){
  .day-strip{height:38px;margin-left:calc(8px - var(--gutter));margin-right:calc(8px - var(--gutter))}
  .dst{position:absolute;left:0;right:0;top:0;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 8px;padding:3px 4px 3px 8px;cursor:pointer}
  .dst-lbl{display:none}
  .dst-day + .dst-day{padding-left:8px}
  .dst-dots a{width:15px;height:30px;pointer-events:none}
  .dst-dots i{width:8px;height:8px;border-width:1.3px}
  .dst-dots a[aria-current]::after{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-width:1.3px}
  .dst-more{display:grid;place-items:center;width:32px;height:30px;flex:none;margin-left:auto;border-radius:8px;color:var(--ink2)}
  .dst-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--c-ease)}
  .day-strip.open .dst{cursor:auto;padding:8px 6px 6px;gap:6px 8px;box-shadow:0 18px 30px -18px rgba(24,25,24,.4)}
  .day-strip.open .dst-dots{display:grid;grid-template-columns:repeat(var(--c,6),32px);grid-auto-rows:32px}
  .day-strip.open .dst-dots a{width:32px;height:32px;pointer-events:auto}
  .day-strip.open .dst-dots i{width:11px;height:11px;border-width:1.5px}
  .day-strip.open .dst-dots a[aria-current]::after{width:21px;height:21px;margin:-10.5px 0 0 -10.5px;border-width:1.5px}
  .day-strip.open .dst-lbl{display:block}
  .day-strip.open .dst-now{display:block;order:3;flex:1 0 100%;text-align:center;padding:2px 0 0}
  .day-strip.open .dst-more{position:absolute;right:4px;top:4px}
  .day-strip.open .dst-more svg{transform:rotate(180deg)}
}

/* ---------- the panel: on grid paper, it follows the topic we are reading ---------- */
.ev{position:sticky;top:calc(var(--nav-h) + 24px);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--c-shadow);padding:12px 16px 16px;
  background-color:var(--paper);background-image:url(grid.svg);background-size:492px 492px}
.ev-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.3;color:var(--ink2)}
.ev-n{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ev-stage{position:relative;height:clamp(340px,calc(100svh - 250px),450px)}
.ev-stage > .ev-l{position:absolute;inset:0;margin:0;display:none;flex-direction:column;opacity:0;transform:translateY(8px);
  transition:opacity .3s var(--c-ease),transform .3s var(--c-ease)}
.ev-stage > .ev-l.vis{display:flex}
.ev-stage > .ev-l.on{opacity:1;transform:none}
.ev-l > .art{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}
.ev-fig{flex:1 1 auto;min-height:0;display:grid;place-items:center;border-radius:12px}
.ev-fig svg{width:100%;height:auto;max-height:100%;aspect-ratio:320/150}
.ev-ask{place-items:center start;align-content:center;padding:0 6px}
.ev-ask p{font-family:var(--serif);font-style:italic;font-size:clamp(21px,1.9vw,26px);line-height:1.3;color:var(--ink);margin:0 0 16px}

/* every piece of evidence: bold title, muted subtitle, the thing itself, a small note */
.art{position:relative;margin:0}
.art-t{display:block;margin:0 0 10px}
.art-t b{display:block;font-size:15px;font-weight:700;line-height:1.3;color:var(--ink)}
.art-t span{display:block;font-size:13.5px;line-height:1.4;color:var(--muted)}
.art-note{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.art-note i{font-family:var(--serif);color:var(--ink)}
/* inline, under its row (below 1100px and in print) */
.art-slot{padding:2px 0 14px 14px}
.art-slot:empty{display:none}
.art-slot .art{max-width:560px}
.art-shot{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:10px}
.art-shot img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line2);background:#fff;transition:transform .3s var(--c-ease),box-shadow .3s}
.art-shot:hover img{transform:translateY(-3px);box-shadow:0 10px 18px -12px rgba(24,25,24,.35)}
.ev .art-dash .art-shot{flex:0 0 auto}

/* topic 03: one question, three prompts */
.ap-imgs{position:relative;display:block;width:100%;aspect-ratio:1.55;padding:0;border:1px solid var(--line2);border-radius:10px;background:#fff;overflow:hidden;cursor:zoom-in}
.ev .ap-imgs{flex:1 1 auto;min-height:0;aspect-ratio:auto}
.ap-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s var(--c-ease)}
.ap-imgs img.on{opacity:1}
.ap-tabs{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
.ap-tabs button{position:relative;isolation:isolate;min-height:32px;padding:4px 2px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);transition:color .2s}
.ap-tabs button::after{content:"";position:absolute;left:-4px;right:-4px;bottom:5px;height:9px;border-radius:5px;background:var(--gold);opacity:0;z-index:-1;filter:url(#wcf);transition:opacity .3s}
.ap-tabs button:hover{color:var(--ink)}
.ap-tabs button[aria-pressed="true"]{color:var(--ink)}
.ap-tabs button[aria-pressed="true"]::after{opacity:.6}
.ap-cap{min-height:3em}
.ap-cap span{display:none}
.ap-cap span.on{display:block}

/* topic 09: the scatter, painted from the course data */
.as-plot{position:relative;width:100%;aspect-ratio:1.45;border-radius:10px;border:1px solid var(--line)}
.ev .as-plot{flex:1 1 auto;min-height:0;aspect-ratio:auto;border-color:transparent;background:none}
.as-plot canvas{position:absolute;inset:0;width:100%;height:100%}
.as-note b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* topic 15: a filmstrip of five deliverables and one failure */
.af-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
.af-grid button{display:flex;flex-direction:column;gap:5px;padding:0;border:0;background:none;text-align:left;cursor:zoom-in;border-radius:8px}
.af-grid img,.af-fail q{display:block;width:100%;aspect-ratio:16/9;height:auto;border-radius:7px;border:1px solid var(--line2);background:#fff;transition:transform .3s var(--c-ease),box-shadow .3s}
.af-grid button:hover img,.af-grid button:hover q{transform:translateY(-3px);box-shadow:0 10px 18px -12px rgba(24,25,24,.35)}
.af-grid span{font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.25;color:var(--ink2)}
.af-fail q{display:grid;place-items:center;quotes:none;padding:6px 8px;text-align:center;background:var(--coralW);border-color:rgba(174,74,68,.35);
  font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.3;color:var(--coralD)}
.af-fail span{color:var(--coralD)}
.ev .af-grid{margin-top:4px}
@media (max-width:420px){.af-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the gallery modal */
.gal-k{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);padding-right:44px}
.gal-fail{display:grid;place-items:center;min-height:180px;border-radius:12px;background:var(--coralW);border:1px solid rgba(174,74,68,.35);padding:clamp(24px,5vw,48px)}
.gal-fail p{font-family:var(--serif);font-size:clamp(17px,2vw,21px);line-height:1.5;color:var(--ink);max-width:40ch;margin:0}
.gal-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.gal-nav p{margin:0;font-size:14px;color:var(--muted)}
.gal-nav span{display:flex;gap:8px}

/* topic 17: the silent error in miniature, with the robot's magnifying glass peeking over the chart */
.silent{max-width:600px}
.si-toggle{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.si-toggle button{display:inline-flex;align-items:center;gap:8px;min-height:34px;font-size:13px;font-weight:600;line-height:1.2;color:var(--muted);background:var(--paper);
  border:1px solid var(--line2);border-radius:999px;padding:7px 12px;transition:color .2s,border-color .2s,background .2s}
.si-toggle button::before{content:"";width:16px;height:5px;border-radius:3px;background:var(--blue);filter:url(#wcf);flex:none;transition:background .6s}
.si-toggle button[data-s="fixed"]::before{background:var(--mint)}
.silent[data-s="fixed"] .si-toggle button[data-s="all"]::before{background:var(--coral)}
html:not(.js) .si-toggle{display:none}
.si-toggle button:hover{color:var(--ink);border-color:var(--ink2)}
.si-toggle button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink);background:var(--card)}
.si-chart{position:relative;border:1px solid var(--line);border-radius:12px;padding:10px 14px 6px;margin-top:58px}
.ev .si-chart{background-color:var(--paper);padding:14px 18px 10px;margin-top:64px}
.ev .silent{max-width:none}
.ev .si-t{font-size:14px;margin-bottom:8px}
.ev .si-row,.ev .si-axis{grid-template-columns:168px minmax(0,1fr) 66px;gap:12px}
.ev .si-row{padding:11px 0}
.ev .si-l{font-size:15px}
.ev .si-l small{font-size:13px;margin-top:2px}
.ev .si-bar{height:26px}
.ev .si-v{font-size:25px}
.ev .si-ticks i{font-size:12.5px}
.ev .si-cap{font-size:14.5px}
.si-t{font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:4px}
.si-row,.si-axis{display:grid;grid-template-columns:150px minmax(0,1fr) 50px;gap:10px;align-items:center}
.si-row{padding:6px 0}
.si-l{font-size:13px;line-height:1.25;color:var(--ink2);transition:color .4s}
.si-l small{display:block;font-size:11.5px;color:var(--muted)}
.si-bar{position:relative;height:16px}
.si-bar::before{content:"";position:absolute;left:0;top:-4px;bottom:-4px;width:1.2px;background:rgba(24,25,24,.4)}
.si-bar i{position:absolute;left:1px;top:0;bottom:0;width:calc(var(--w) * (100% - 1px));border-radius:2px 5px 5px 2px;background:var(--bc,var(--grey));filter:url(#wcf);
  transform-origin:0 50%;transition:transform 1.1s var(--c-ease),background .6s,opacity .6s}
.js .si-bar i{transform:scaleX(0)}
.si-row[data-r="all"] .si-bar i{--w:.9167}      /* 0.825 of the axis' 0.9 */
.si-row[data-r="fixed"] .si-bar i{--w:.3244}    /* 0.292 of 0.9 */
.silent.grown .si-bar i{transform:scaleX(1)}
.silent.grown .si-row[data-r="fixed"] .si-bar i{transition-delay:.25s}
.si-v{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1;color:var(--ink);transition:opacity .5s .6s,color .4s}
.js .si-v{opacity:0}
.silent.grown .si-v{opacity:1}
.si-axis{margin-top:2px}
.si-ticks{position:relative;height:16px;border-top:1px solid rgba(24,25,24,.35)}
.si-ticks i{position:absolute;top:3px;font-style:normal;font-size:11px;color:var(--muted);transform:translateX(-50%);white-space:nowrap}
.si-ticks i::before{content:"";position:absolute;left:50%;top:-4px;width:1px;height:4px;background:rgba(24,25,24,.35)}
.si-ticks i:nth-child(1){left:0}.si-ticks i:nth-child(2){left:33.33%}.si-ticks i:nth-child(3){left:66.67%}.si-ticks i:nth-child(4){left:100%}
.silent[data-s="all"] .si-row[data-r="all"] .si-bar i{--bc:var(--blue)}
.silent[data-s="all"] .si-row[data-r="fixed"] .si-bar i{--bc:var(--grey);opacity:.55}
.silent[data-s="all"] .si-row[data-r="fixed"] :is(.si-l,.si-v){color:var(--muted)}
.silent[data-s="fixed"] .si-row[data-r="all"] .si-bar i{--bc:var(--coral)}
.silent[data-s="fixed"] .si-row[data-r="all"] .si-v{color:var(--coralD)}
.silent[data-s="fixed"] .si-row[data-r="fixed"] .si-bar i{--bc:var(--mint)}
.silent[data-s="fixed"] .si-row[data-r="fixed"] .si-v{color:var(--mintD)}
.si-cap{min-height:3em}
.si-cap b{color:var(--ink)}
.si-cap span{display:block}
.js .silent[data-s="all"] .si-cap [data-c="fixed"],.js .silent[data-s="fixed"] .si-cap [data-c="all"]{display:none}
.peek{position:absolute;right:clamp(16px,8%,48px);bottom:100%;width:66px;height:62px;overflow:hidden;pointer-events:none}
.peek .pk{display:block;transform-origin:50% 100%}
.peek img{width:66px;height:auto;transform:translateY(102%);transition:transform .9s var(--spring)}
.silent.up .peek img{transform:translateY(3px)}
.peek.live .pk{animation:pkScan 4s ease-in-out 1.2s infinite}
@keyframes pkScan{0%,100%{transform:none}30%{transform:translateX(-4px) rotate(-4deg)}65%{transform:translateX(3px) rotate(3deg)}}
@media (max-width:560px){
  .si-row{grid-template-columns:minmax(0,1fr) 46px;grid-template-areas:"l l" "b v";gap:4px 10px}
  .si-l{grid-area:l}.si-bar{grid-area:b}.si-v{grid-area:v;font-size:17px}
  .si-axis{grid-template-columns:minmax(0,1fr) 46px}.si-axis > span:first-child{display:none}
  .si-chart{padding:9px 12px 4px;margin-top:54px}
  .peek{width:56px;height:53px;right:14px}.peek img{width:56px}
}

/* topic 18: four headlines, each with its verdict */
.aj-opts{display:flex;flex-direction:column;gap:7px}
.aj-opts button{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;padding:9px 14px;text-align:left;
  border:1px solid var(--line2);border-radius:10px;background:var(--card);font-size:15px;line-height:1.35;color:var(--ink);transition:border-color .2s,background .3s,transform .25s var(--c-ease)}
.aj-opts button:hover{border-color:var(--ink2);transform:translateY(-2px)}
.aj-v{position:relative;isolation:isolate;flex:none;font-family:var(--serif);font-style:italic;font-size:14.5px;white-space:nowrap;padding:1px 6px;
  opacity:0;transform:translateX(-6px) rotate(-2deg);transition:opacity .3s,transform .45s var(--c-ease)}
.aj-v::before{content:"";position:absolute;inset:1px -2px;border-radius:6px 10px 7px 9px;z-index:-1;opacity:.5;filter:url(#wcf)}
.aj-v.no{color:var(--coralD)} .aj-v.no::before{background:var(--coral);opacity:.25}
.aj-v.ok{color:var(--mintD)} .aj-v.ok::before{background:var(--mint);opacity:.4}
.aj-opts button.seen .aj-v{opacity:1;transform:rotate(-2deg)}
.aj-opts button[aria-pressed="true"]{border-color:var(--ink)}
.aj-why{min-height:4.6em}
.aj-why b{color:var(--ink)}
/* in the panel the headlines and the filmstrip take the room they are given */
.ev .aj-opts{gap:9px}
.ev .aj-opts button{min-height:56px;padding:12px 16px;font-size:16.5px}
.ev .aj-why{font-size:14.5px}
.ev .af-grid{gap:18px 12px}
.ev .af-grid span{font-size:14.5px}

/* ---------- the close: day one starts where setup ends ---------- */
.close-sec{padding:clamp(56px,6.4vw,100px) 0 clamp(60px,7vw,110px)}
.close-wrap{max-width:780px}
.close-sec .big{margin-top:0}
.cl-cap{margin:clamp(20px,2.4vw,28px) 0 8px;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted)}
.chatbox{background:var(--card);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--c-shadow);padding:14px 16px 12px}
.cb-file{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1;color:var(--ink2);background:var(--paper2);border:1px solid var(--line);border-radius:8px;padding:6px 10px 6px 8px}
.cb-file svg{width:14px;height:14px;fill:none;stroke:var(--ink2);stroke-width:1.3;stroke-linejoin:round}
.cb-prompt{margin:12px 2px 14px;font-size:17px;line-height:1.6;color:var(--ink)}
.cb-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cb-send{width:34px;height:34px;flex:none;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.cb-send svg{width:15px;height:15px;fill:none;stroke:var(--paper);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cl-when{margin-top:24px;font-size:16.5px;line-height:1.55;color:var(--ink2)}
.cl-when b{font-weight:600;color:var(--ink)}
.cl-local{display:block;color:var(--muted)}
.cl-act{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:16px}
.cl-setup{font-size:15.5px;font-weight:600;color:var(--ink);text-underline-offset:.25em}

/* ---------- reduced motion: final states, nothing loops ---------- */
@media (prefers-reduced-motion:reduce){
  .sc-seg canvas,.sched .sc-dots i,.ev-l,.more,.ap-imgs img,.aj-v,.cb-pose img,.cb-t,.si-bar i,.si-v,.si-toggle button::before,.track .fill,.track .rider,.dst-dots i,.dst-dots i::before,.blk summary::after{transition:none!important;animation:none!important}
  .sc-bot,.cb-pose,.peek .pk,.rider .rd-in,.days-sec .blk.flash{animation:none!important}
  .js .sched:not(.go) .sc-dots i{opacity:1;transform:none}
  .ev-stage > .ev-l{transform:none}
  .peek img{transform:translateY(3px);transition:none}
  .days-sec .blk.flash{background:var(--goldW)}
}

/* ---------- print: a clean handout of the outline, every topic open and in full ---------- */
@media print{
  .ev,.day-strip,.mach-slot,.rider,.ck-bot,.sc-night,.sc-dots,.peek,.si-toggle,.ap-tabs,.art-prompts,.art-dash,.art-film,.art-judge,.chatbox .cb-row,.cl-act,.ch-cta,.to,.lvl::before,.blk summary::after{display:none!important}
  .rest{display:inline}
  .more{grid-template-rows:1fr!important}
  .blk summary,.blk.open{background:none!important}
  .checklist li svg .ck{stroke-dashoffset:0}
  .checklist li svg .bx{fill:var(--mint);stroke:transparent}
  .blk .no::before{opacity:.9}
  .blk .no{color:var(--ink);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sched .sc-seg{background:rgba(131,186,226,.55);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sched .sc-day[data-day="2"] .sc-seg{background:rgba(173,155,228,.55)}
  .sched .sc-seg canvas{display:none}
  .ch-grid{grid-template-columns:minmax(0,1fr)}
  .silent{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .silent .si-chart{margin-top:10px}
  .silent .si-bar i{transform:none!important;opacity:1!important}
  .silent .si-v{opacity:1!important}
  .silent .si-row[data-r="all"] .si-bar i{--bc:var(--coral)!important}
  .silent .si-row[data-r="fixed"] .si-bar i{--bc:var(--mint)!important}
  .silent .si-row[data-r="all"] .si-v{color:var(--coralD)!important}
  .silent .si-row[data-r="fixed"] .si-v{color:var(--mintD)!important}
  .silent .si-row[data-r="fixed"] .si-l{color:var(--ink2)!important}
  .silent .si-cap [data-c]{display:block!important}
  .art-slot{break-inside:avoid}
}