/* yb.css | the Olympian base stylesheet, shared by every page since SN 110. The calendar page keeps its own inline copy (the TV lives there). */

:root{
  color-scheme:light only;
  --k:#F2EEE6;--paper:#131316;--paper-2:#1E1E22;--white:#26262B;
  --c:#4FC3D9;--m:#FF4574;--y:#FFC400;--red:#FF4D3C;--rule:rgba(242,238,230,.22);
  --onbright:#131316;
  --dim:rgba(242,238,230,.62);
  --mono:'Space Mono',ui-monospace,monospace;
  --disp:'Big Shoulders Display',Impact,system-ui,sans-serif;
  --body:'Spectral',Georgia,serif;

  /* ---- SHARED TOKEN NAMES, Sept 14 2026 ----------------------------------------------
     One API across the three course sites so a component written for one drops into another
     without a remap. Every port before this one paid a translation tax: the Dojo clock could
     not be copied here because its --yellow was this site's --y, its --bg-elev was --paper-2,
     and so on down the list, which is how two sites end up fixing the same bug twice.
     NAMES are shared. VALUES are not, and must not be: three rooms with the same palette is
     one room three times. Yearbook yellow and Dojo yellow are different hexes that answer to
     the same name. The short names above stay valid, so nothing existing has to move; new
     work uses the long ones and old rules convert when they are touched anyway. */
  --text:var(--k);          --text-muted:var(--dim);
  --bg:var(--paper);        --bg-elev:var(--paper-2);
  --line:var(--rule);       --line-strong:var(--white);
  --yellow:var(--y);        --cyan:var(--c);          --magenta:var(--m);
  --on-bright:var(--onbright);
  --pixel:var(--mono);      --display:var(--disp);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;background:#131316;scroll-padding-top:72px}
body{background:#131316;color:#F2EEE6;font-family:var(--body);font-size:18px;line-height:1.62;
     overflow-x:clip;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}

.skip{position:absolute;left:-9999px;top:0;background:var(--y);color:var(--onbright);
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 16px;z-index:9999;border:2px solid var(--k)}
.skip:focus{left:8px;top:8px}
/* ---------- print-shop furniture ---------- */
::selection{background:var(--y);color:var(--k)}
html::before{content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.05;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1.5' cy='1.5' r='1.1' fill='%23fff'/%3E%3Ccircle cx='4.5' cy='4.5' r='1.1' fill='%23fff'/%3E%3C/svg%3E")}
#progress{position:fixed;top:0;left:0;height:3px;background:var(--m);width:0;z-index:9995}
.reg{width:26px;height:26px;flex:0 0 26px;opacity:.85}
.crop{position:relative}
.crop::before,.crop::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none}
.crop::before{top:-1px;left:-1px;border-top:2px solid var(--c);border-left:2px solid var(--c)}
.crop::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--c);border-right:2px solid var(--c)}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--k);padding:20px 0 0}
.stamp{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding-bottom:18px}
.stamp span{white-space:nowrap}
.stamp .live{color:var(--c)}
.stamp a.buy{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--y);color:var(--onbright);border:1.5px solid var(--y);padding:4px 10px 3px;
  text-decoration:none;font-weight:700}
.stamp a.buy:hover{background:var(--k);color:var(--y);border-color:var(--k)}
.title-block{padding:30px 0 38px;border-top:1px solid var(--rule)}
h1 .the{display:block;font-size:.34em;letter-spacing:.06em;line-height:1;
  margin-bottom:.06em;text-shadow:none;color:var(--k)}
.overline{font-family:var(--mono);font-size:clamp(12px,2.4vw,16px);letter-spacing:.34em;
  text-transform:uppercase;color:var(--m);margin-bottom:12px}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,11.6vw,8.4rem);
   line-height:.86;letter-spacing:-.01em;text-transform:uppercase;
   white-space:nowrap;word-break:keep-all;overflow-wrap:normal;
   text-shadow:0.055em 0.05em 0 var(--c), 0.11em 0.1em 0 var(--m)}
.sub{font-family:var(--mono);font-size:clamp(12px,2.2vw,15px);letter-spacing:.2em;
  text-transform:uppercase;margin-top:24px;color:var(--c)}
.dek{font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.45;max-width:46ch;margin-top:24px}
.dek em{font-style:italic;color:var(--m)}

/* ---------- next checkpoint hero card ---------- */
.nextgate{border:2px solid var(--k);background:var(--white);margin-top:30px;
  display:grid;grid-template-columns:auto 1fr;align-items:stretch}
.nextgate .days{background:var(--y);color:var(--onbright);border-right:2px solid var(--k);padding:20px 26px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:150px}
.nextgate .n{font-family:var(--disp);font-weight:800;font-size:3.6rem;line-height:.85;letter-spacing:-.04em}
.nextgate .u{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;margin-top:7px}
.nextgate .body{padding:18px 24px}
.nextgate .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--m)}
.nextgate h3{font-family:var(--disp);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;margin:6px 0 4px;text-transform:uppercase}
.nextgate p{font-size:.95rem;margin:0;font-family:var(--mono);line-height:1.55}


/* ---------- destination board ---------- */
.board{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--k);margin-top:26px;background:var(--k)}
.board a{background:var(--white);padding:16px 16px 15px;text-decoration:none;color:var(--k);
  border:0;border-right:1.5px solid var(--k);border-bottom:1.5px solid var(--k);
  display:flex;flex-direction:column;gap:5px;transition:.14s}
.board a:nth-child(4n){border-right:0}
.board a:nth-last-child(-n+4){border-bottom:0}
.board a b{font-family:var(--disp);font-weight:800;font-size:1.18rem;line-height:1.05;
  text-transform:uppercase;letter-spacing:-.02em}
.board a i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  color:var(--dim);line-height:1.45}
.board a:hover,.board a:focus-visible{background:var(--y);color:var(--onbright)}
.board a:hover i,.board a:focus-visible i{color:rgba(19,19,22,.75)}
.board-dept{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.bd-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--c)}
.bd-row{display:flex;gap:8px;flex-wrap:wrap}
.bd-row a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid var(--c);color:var(--c);background:none;padding:8px 14px;text-decoration:none}
.bd-row a:hover,.bd-row a:focus-visible{background:var(--c);color:var(--onbright)}

/* ---------- ticker + jumpbar ---------- */
.ticker{border-bottom:2px solid var(--k);overflow:hidden;background:var(--k);color:var(--paper)}
.ticker-track{display:inline-flex;white-space:nowrap;font-family:var(--mono);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;padding:9px 0;will-change:transform;animation:tick 34s linear infinite}
.ticker-track span{padding:0 22px}
.ticker-track b{color:#C73056;font-weight:700}
@keyframes tick{to{transform:translateX(-50%)}}
/* Sticky wrapper carries the fades so they do not scroll away with the strip. */
.jumpbar{position:sticky;top:0;z-index:900;background:var(--paper);border-bottom:2px solid var(--k)}
.jumprow{display:flex;align-items:center;gap:8px;padding:11px 0}
.jumprow>.now-btn,.jumprow>.cam-link{flex:0 0 auto}
.jumpwrap{position:relative;flex:1 1 auto;min-width:0;isolation:isolate}
.cam-link{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--c);color:var(--c);
  background:none;padding:5px 11px 4px;text-decoration:none;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}
.cam-link:hover,.cam-link:focus-visible{background:var(--c);color:var(--onbright)}
.camico{width:16px;height:16px;flex:0 0 auto}
.jumpwrap::before,.jumpwrap::after{content:"";position:absolute;top:0;bottom:1px;width:54px;
  pointer-events:none;z-index:2;transition:opacity .22s ease}
.jumpwrap::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(19,19,22,0))}
.jumpwrap::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(19,19,22,0))}
.jumpwrap.at-start::before{opacity:0}
.jumpwrap.at-end::after{opacity:0}
.jump{padding:0;scroll-snap-type:x proximity;display:flex;flex-wrap:nowrap;gap:7px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  overflow-x:auto;scroll-behavior:smooth;scroll-padding-inline:58px;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-right:10px}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:0 0 auto;scroll-snap-align:start}
.jump a.here{background:var(--k);color:var(--onbright);border-color:var(--k)}
@media(prefers-reduced-motion:reduce){.jump{scroll-behavior:auto}}
.jump a{border:1.5px solid var(--k);padding:5px 10px 4px;color:var(--k);background:var(--white);text-decoration:none}
.jump a:hover{background:var(--m);border-color:var(--m);color:var(--onbright)}
.now-btn{border:1.5px solid var(--y);background:var(--y);color:var(--onbright);font-weight:700;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px 4px;text-decoration:none;white-space:nowrap}
.now-btn:hover,.now-btn:focus-visible{background:var(--k);color:var(--y);border-color:var(--k)}
.now-btn.urgent{background:var(--red);color:#fff;border-color:var(--red)}

/* ---------- sections ---------- */
section{padding:60px 0;border-top:2px solid var(--k)}
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:0}
.secno{font-family:var(--disp);font-weight:900;font-size:clamp(2.4rem,6vw,3.6rem);line-height:.78;
  letter-spacing:-.05em;color:var(--y);text-shadow:0.04em 0.035em 0 var(--c);
  flex:0 0 auto;display:block}
.eyebrow{font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--onbright);background:var(--y);display:inline-block;
  padding:6px 12px 5px;margin-bottom:0}
@media(max-width:760px){.secno{font-size:2.6rem}}
h2{font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.5rem,7.4vw,4.4rem);line-height:.88;letter-spacing:-.04em;
  margin:0 0 24px;padding-top:14px;border-top:5px solid var(--k);
  text-shadow:0.035em 0.032em 0 var(--c)}
h3{font-family:var(--disp);font-weight:700;font-size:1.28rem;line-height:1.15;letter-spacing:-.015em;margin-bottom:8px}
h4{font-family:var(--disp);font-weight:700;font-size:1.02rem;margin-bottom:6px}
p{max-width:64ch;margin-bottom:18px}
p:last-child{margin-bottom:0}
strong{font-weight:500;color:var(--k)}
a{color:var(--m);text-decoration:none;border-bottom:1.5px solid var(--m);transition:.14s}
a:hover{background:var(--m);color:var(--onbright)}
a:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.lead{font-family:var(--disp);font-weight:400;font-size:clamp(1.3rem,2.9vw,1.72rem);line-height:1.25;
  max-width:34ch;margin-bottom:22px;letter-spacing:-.005em;color:var(--k)}
.lead strong{font-weight:700;color:var(--m)}

.thisweek{border:2px solid var(--c);background:var(--paper-2);margin:6px 0 22px}
.tw-head{display:flex;justify-content:space-between;align-items:center;background:var(--c);
  color:var(--onbright);font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;padding:7px 14px}
.tw-body{padding:16px 18px 18px}
.tw-phase{font-family:var(--disp);font-weight:800;font-size:1.5rem;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1;margin-bottom:8px}
.tw-phase i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--dim);margin-left:12px;vertical-align:middle}
.tw-body p{font-size:.97rem;margin:0 0 14px;max-width:62ch}
.tw-track{display:flex;gap:4px}
.tw-track span{flex:1;height:9px;background:var(--white);border:1px solid var(--rule)}
.tw-track span.past{background:var(--c);border-color:var(--c)}
.tw-track span.on{background:var(--y);border-color:var(--y)}

/* ---------- the week, five days ---------- */
.wkstrip{display:grid;grid-template-columns:repeat(5,1fr);border:1.5px solid var(--rule);margin-top:16px;background:var(--white)}
.wd{padding:11px 12px 12px;border-right:1px solid var(--rule)}
.wd:last-child{border-right:0}
.wd-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c);display:block;margin-bottom:6px}
.wd p{font-size:.86rem;line-height:1.4;margin:0;max-width:none;color:var(--dim)}
.wd p strong{color:var(--k)}
.wd.today{background:var(--paper-2);box-shadow:inset 0 3px 0 var(--y)}
.wd.today .wd-n{color:var(--y)}
.wd-big .wd-n{color:var(--m)}
.wd-fri .wd-n{color:var(--y)}
@media(max-width:760px){.wkstrip{grid-template-columns:1fr}
  .wd{border-right:0;border-bottom:1px solid var(--rule)}
  .wd:last-child{border-bottom:0}}
/* ---------- ladder ---------- */
.ladder{border:1.5px solid var(--k);background:var(--white);margin:8px 0 22px}
.ladder .row{display:grid;grid-template-columns:64px 1fr 92px 96px;border-bottom:1px solid var(--rule)}
.ladder .row:last-child{border-bottom:0}
.ladder .row.head{background:var(--k);color:var(--paper);font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.ladder .row.head div{padding:8px 10px}
.ladder .g{font-family:var(--disp);font-weight:800;font-size:1.1rem;padding:12px 10px;
  border-right:1.5px solid var(--k);background:var(--paper-2);display:flex;align-items:center;justify-content:center}
.ladder .d{padding:12px 14px}
.ladder .d b{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;font-weight:500;display:block}
.ladder .d i{font-style:normal;font-size:.88rem;color:var(--dim);display:block;margin-top:2px}
.ladder .p,.ladder .r{padding:12px 10px;font-family:var(--mono);font-size:12.5px;
  border-left:1px solid var(--rule);display:flex;align-items:center}
.ladder .row.now{background:var(--y);color:var(--onbright)}
.ladder .row.now .d i{color:rgba(19,19,22,.72)}
.ladder .row.now .p,.ladder .row.now .r{color:var(--onbright)}
.ladder .row.now .g{background:var(--onbright);color:var(--y)}
.ladder .row.done .g{background:var(--paper);color:rgba(20,16,14,.4)}
.ladder .row.done .d,.ladder .row.done .p,.ladder .row.done .r{opacity:.55}
.nowtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;background:var(--y);color:var(--onbright);
  padding:2px 6px;margin-left:8px;text-transform:uppercase;vertical-align:middle}

/* ---------- plant strip ---------- */
.plant{border:1.5px solid var(--k);background:var(--paper-2);padding:0;margin-bottom:22px}
.plant .ph{background:var(--red);color:#fff;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;padding:7px 12px}
.plant .pb{display:grid;grid-template-columns:repeat(5,1fr)}
.plant .pc{padding:12px;border-right:1px solid var(--rule);font-family:var(--mono);font-size:11.5px;line-height:1.5}
.plant .pc:last-child{border-right:0}
.plant .pc b{display:block;font-weight:500;font-size:13px}
.plant .pc span{color:var(--c)}

/* ---------- panels / grid ---------- */
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1.5px solid var(--k)}
.cell{padding:22px 20px;border-right:1.5px solid var(--k);border-bottom:1.5px solid var(--k);background:var(--white)}
.cell:nth-child(2n){border-right:0}
.cell:nth-last-child(-n+2){border-bottom:0}
.cell p{font-size:.95rem;margin:0;max-width:none}
.cell p+p{margin-top:10px}
.flag{color:var(--m);font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;display:block;margin-bottom:8px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1.5px solid var(--k)}
.cols3 .cell{border-right:1.5px solid var(--k);border-bottom:0}
.cols3 .cell:last-child{border-right:0}
.cols3 .cell:nth-child(2n){border-right:1.5px solid var(--k)}
.cols3 .cell:nth-child(3n){border-right:0}

/* ---------- specs ---------- */
.specs{list-style:none;border:1.5px solid var(--k);background:var(--white);margin:10px 0 18px}
.specs li{display:grid;grid-template-columns:168px 1fr;border-bottom:1px solid var(--rule)}
.specs li:last-child{border-bottom:0}
.specs .k2{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--c);padding:9px 10px;border-right:1.5px solid var(--k);background:var(--paper-2);
  display:flex;align-items:center;line-height:1.3}
.specs .v{padding:9px 13px;font-size:.93rem;line-height:1.45}
.specs .v code{font-family:var(--mono);font-size:.9em;background:var(--paper-2);padding:1px 5px}
.specs .v strong{color:var(--red);font-weight:500}

/* ---------- grade ---------- */
.grade{border:1.5px solid var(--k);margin-bottom:22px}
.grade-row{display:grid;grid-template-columns:86px 1fr;border-bottom:1px solid var(--rule);background:var(--white)}
.grade-row:last-child{border-bottom:0}
.grade-pct{font-family:var(--disp);font-weight:800;font-size:1.6rem;padding:18px 12px;
  border-right:1.5px solid var(--k);display:flex;align-items:center;justify-content:center;
  background:var(--c);color:var(--onbright)}
.grade-txt{padding:15px 20px}
.grade-txt h3{font-size:1.05rem;margin-bottom:4px}
.grade-txt p{font-size:.93rem;margin:0;max-width:none}

/* ---------- rubric ---------- */
.rub{list-style:none;border:1.5px solid var(--k);background:var(--white);margin-top:10px}
.rub li{display:grid;grid-template-columns:46px 1fr;border-bottom:1px solid var(--rule)}
.rub li:last-child{border-bottom:0}
.rub .n{font-family:var(--disp);font-weight:800;font-size:1.05rem;display:flex;align-items:center;
  justify-content:center;border-right:1.5px solid var(--k);background:var(--y);color:var(--onbright)}
.rub .t{padding:9px 13px;font-size:.93rem;line-height:1.45}

/* ---------- alert / penalty ---------- */
.alarm{border:2px solid var(--red);background:var(--white);margin:18px 0;position:relative}
.alarm .ah{background:#D93829;color:#fff;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;padding:8px 14px}
.alarm .ab{padding:18px 20px}
.alarm .ab p{max-width:none}
.alarm .ab p+p{margin-top:12px}

.summon{list-style:none;margin:6px 0 16px;border-left:4px solid var(--c);padding-left:16px}
.summon li{padding:8px 0;font-size:.97rem;line-height:1.5;border-bottom:1px dotted var(--rule)}
.summon li:last-child{border-bottom:0}
.summon li b{font-weight:500;color:var(--c)}
.bigbtn{display:inline-block;background:var(--y);color:var(--onbright);border:2px solid var(--y);
  font-family:var(--disp);font-weight:800;font-size:1.35rem;text-transform:uppercase;letter-spacing:-.01em;
  padding:13px 26px;text-decoration:none;line-height:1}
.bigbtn:hover{background:var(--k);color:var(--onbright);border-color:var(--k)}
.tests{margin:14px 0 8px;display:grid;gap:12px}
.tests .trow{display:grid;grid-template-columns:8.5em 1fr;gap:8px 14px;align-items:center}
.tests .tl{font-family:var(--disp);font-weight:800;font-size:1.15rem;text-transform:uppercase;line-height:1}
.tests .tb{display:flex;flex-wrap:wrap;gap:8px}
.tests .tb a{display:inline-block;border:2px solid var(--y);padding:9px 14px;text-decoration:none;color:inherit;
  font-family:var(--disp);font-weight:800;font-size:1.05rem;text-transform:uppercase;line-height:1}
.tests .tb a.gen{background:var(--y);color:var(--onbright)}
.tests .tb a:hover{background:var(--k);border-color:var(--k);color:var(--onbright)}
@media (max-width:560px){.tests .trow{grid-template-columns:1fr}.tests .tb a{flex:1 1 calc(50% - 8px);text-align:center}}
.ink{border:1.5px solid var(--k);background:var(--white);margin:14px 0 20px}
.ink-h{background:var(--k);color:var(--onbright);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;padding:8px 14px}
.ink-b{padding:16px}
.ink-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.ink-f{flex:1 1 150px}
.ink-f label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c);margin-bottom:5px}
.ink-f input[type=color]{width:100%;height:44px;border:1.5px solid var(--k);background:none;padding:2px;cursor:pointer}
.ink-out{border:1.5px solid var(--k);padding:14px}
.ink-verdict{font-family:var(--disp);font-weight:900;font-size:1.6rem;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1;margin-bottom:6px}
.ink-num{font-family:var(--mono);font-size:12px;color:var(--dim);margin-bottom:10px}
.ink-prev{height:64px;border:1.5px solid var(--k);display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;font-size:1.3rem;text-transform:uppercase;letter-spacing:.02em}
.ink-gs{filter:grayscale(1)}
/* ---------- tips ---------- */
.tips{border-left:4px solid var(--y);padding:2px 0 2px 16px;margin-top:16px}
.tips p{font-size:.94rem;margin-bottom:9px;max-width:none}
.tips p:last-child{margin-bottom:0}
.tips-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--c);display:block;margin-bottom:8px}
.tips b{font-weight:500;color:var(--m)}

/* ---------- loading bar ---------- */
.soon{border:1.5px dashed var(--rule);background:var(--paper-2);padding:14px 16px;margin:14px 0}
.soon .sl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--m);display:block;margin-bottom:9px}
.bar{height:13px;border:1.5px solid var(--k);background:var(--white);position:relative;overflow:hidden}
.bar i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--c) 0 7px,transparent 7px 14px)}
.soon p{font-family:var(--mono);font-size:11.5px;margin:9px 0 0;max-width:none;line-height:1.55}

/* ---------- step list ---------- */
.steps{list-style:none;counter-reset:s;margin-top:12px}
.steps li{counter-increment:s;position:relative;padding:11px 0 11px 46px;border-bottom:1px dotted var(--rule);font-size:.98rem;line-height:1.5}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--onbright);background:var(--k);padding:3px 7px}
.steps li b{font-weight:500;color:var(--m)}

/* ---------- month rhythm ---------- */
.rhythm{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--k);margin-top:8px;background:var(--white)}
.rhythm div{padding:20px 16px;border-right:1.5px solid var(--k)}
.rhythm div:last-child{border-right:0}
.rhythm .wk{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--m);
  margin-bottom:9px;text-transform:uppercase}
.rhythm p{font-size:.93rem;line-height:1.45;margin:0;max-width:none}

/* ---------- toolkit ---------- */
.kit{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.kit-block{border:1.5px solid var(--k);padding:20px;background:var(--white)}
.kit-block h3{font-size:1.12rem;margin-bottom:3px}
.kit-when{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--m);margin-bottom:12px}
.kit-block ul{list-style:none}
.kit-block li{padding:7px 0;border-top:1px solid var(--rule);font-size:.95rem;line-height:1.4}
.kit-block li span{font-family:var(--mono);font-size:10.5px;color:var(--c);display:block;letter-spacing:.08em}

/* ---------- contact sheet ---------- */
.sheet{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;border:1.5px solid var(--k);
  padding:10px;background:#0A0A0C;margin-top:12px}
.sheet div{aspect-ratio:4/3;background:#3A3A42;position:relative;overflow:hidden}
.sheet div::after{content:attr(data-n);position:absolute;bottom:3px;left:4px;font-family:var(--mono);
  font-size:8px;color:rgba(19,19,22,.62);letter-spacing:.08em}
.sheet div:nth-child(3n){background:#2E2E36}
.sheet div:nth-child(5n){background:#45454E}

footer{border-top:2px solid var(--k);padding:38px 0 66px;font-family:var(--mono);font-size:12px;line-height:1.8}
footer .big{font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,5vw,2.6rem);
  text-transform:uppercase;letter-spacing:-.03em;margin-bottom:16px;line-height:1;
  text-shadow:0.05em 0.045em 0 var(--c)}
footer a{color:var(--k);border-bottom-color:var(--rule)}
footer a:hover{background:var(--k);color:var(--paper)}

/* ---------- motion ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  .cols3{grid-template-columns:1fr}
  .cols3 .cell{border-right:0;border-bottom:1.5px solid var(--k)}
  .cols3 .cell:last-child{border-bottom:0}
  .plant .pb{grid-template-columns:1fr 1fr}
  .plant .pc{border-bottom:1px solid var(--rule)}
  .sheet{grid-template-columns:repeat(4,1fr)}
  .board{grid-template-columns:repeat(2,1fr)}
  .board a:nth-child(4n){border-right:1.5px solid var(--k)}
  .board a:nth-child(2n){border-right:0}
  .board a:nth-last-child(-n+4){border-bottom:1.5px solid var(--k)}
  .board a:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  section{padding:44px 0}
  p{max-width:none}
  h1{font-size:clamp(2.2rem,13.2vw,5rem);text-shadow:0.05em 0.045em 0 var(--c),0.1em 0.09em 0 var(--m)}
  .stamp{font-size:12px;letter-spacing:.07em;gap:5px 16px}
  .nextgate{grid-template-columns:1fr}
  .nextgate .days{border-right:0;border-bottom:2px solid var(--k);flex-direction:row;gap:12px;padding:14px}
  .nextgate .u{margin-top:0}
  .ladder .row{grid-template-columns:48px 1fr}
  .ladder .p,.ladder .r{grid-column:2;border-left:0;padding:0 14px 10px;font-size:12px}
  .ladder .row.head{display:none}
  .cols,.kit{grid-template-columns:1fr}
  .cell{border-right:0}
  .cell:nth-last-child(2){border-bottom:1.5px solid var(--k)}
  .rhythm{grid-template-columns:1fr}
  .rhythm div{border-right:0;border-bottom:1.5px solid var(--k)}
  .rhythm div:last-child{border-bottom:0}
  .specs li{grid-template-columns:1fr}
  .specs .k2{border-right:0;border-bottom:1px solid var(--rule)}
  .sheet{grid-template-columns:repeat(3,1fr)}
  .jump{font-size:10.5px;letter-spacing:.06em;gap:5px}
  .jump a{padding:5px 8px 4px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .ticker-track{animation:none}
  .js .reveal{opacity:1;transform:none}
}
@media print{html::before{display:none}.ticker,#progress{display:none}.jumpbar{position:static}}

/* ---------- FOLDABLE SECTIONS (ported from the Dojo, Sept 2026): every section with a heading gets COLLAPSE / EXPAND. State stays on this device. */
.fold-btn{margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1.5px solid var(--k);background:var(--white);color:var(--k);padding:6px 10px 5px;cursor:pointer;line-height:1;transform:rotate(-1.5deg);transition:.14s}
.fold-btn:hover{background:var(--c);border-color:var(--c);color:var(--onbright)}
.fold-btn:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.fold-note{display:none;margin:10px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);line-height:1.6;max-width:none}
.fold-note b{color:var(--k)}
section.folded .fold-body{display:none}
section.folded .fold-note{display:block}
section.folded [data-fold-extra]{display:none}
section.folded h2{margin-bottom:0}
.jump a.jump-all{background:var(--m);border-color:var(--m);color:var(--onbright);font-weight:700}
.jump a.jump-all:hover{background:var(--c);border-color:var(--c)}
.jump a.jump-all[hidden]{display:none}
html.demo .fold-btn{font-size:22px;padding:10px 16px 9px}
html.demo .fold-note{font-size:22px}
html.demo.demo-big .fold-btn{font-size:1.6vw;padding:.6vw 1vw}
html.demo.demo-big .fold-note{font-size:1.6vw}
@media(max-width:620px){.fold-btn{font-size:9.5px;padding:5px 8px 4px}}

/* ---------- THE HAND-IN (section 04) ----------
   A warning that only says "do not do this" is half a sign. Each one here carries the steps
   that satisfy it, in the block, because a student who reads the three warnings and nothing
   else should still be able to do the job. The display-caps rule for `b` is scoped to the
   direct child on purpose: inline bold inside a step has to stay inline type, not a headline. */
h4{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
   color:var(--c);margin:26px 0 8px;padding-bottom:6px;border-bottom:1.5px solid var(--rule)}
pre.tree{font-family:var(--mono);font-size:13px;line-height:1.75;color:var(--k);background:var(--paper-2);
   border:1.5px solid var(--rule);padding:18px 20px;margin:14px 0;overflow-x:auto;white-space:pre}
.dgm img{display:block;width:100%;height:auto;border:1.5px solid var(--rule)}
#handin ol{margin:10px 0 14px;padding-left:1.4em}
#handin ol li{margin-bottom:.5em;line-height:1.6}
#handin a.tin[download]{display:inline-block;margin:6px 0}
.dosigns{align-items:start}
.dosigns .sign{display:grid;grid-template-columns:52px 1fr;gap:0 12px;align-items:start}
.dosigns .sgi{grid-column:1;grid-row:1}
.dosigns .sgi svg{width:52px;height:52px;display:block}
.dosigns .sgt{grid-column:2;grid-row:1}
.dosigns .sgt > b{display:block;font-family:var(--disp);font-weight:800;font-size:1.25rem;line-height:1.05;
  text-transform:uppercase;color:var(--y);letter-spacing:-.01em}
.dosigns .sgt > i{display:block;font-style:normal;font-family:var(--body);font-size:14px;line-height:1.45;
  color:var(--dim);margin:4px 0 0}
.dosigns ol.sgd{margin:10px 0 8px;padding-left:1.25em;font-family:var(--body);font-size:14px;line-height:1.5;color:var(--k)}
.dosigns ol.sgd li{margin-bottom:.45em}
.dosigns ol.sgd li::marker{font-family:var(--mono);font-weight:700;color:var(--c)}
.dosigns ol.sgd b,.dosigns .sgn b{display:inline;font-family:inherit;font-size:inherit;line-height:inherit;
  text-transform:none;letter-spacing:0;font-weight:700;color:var(--k)}
.dosigns ol.sgd code{font-size:12.5px}
.dosigns .sgn{display:block;font-family:var(--mono);font-size:11.5px;line-height:1.5;letter-spacing:.02em;
  color:var(--m);border-top:1.5px solid var(--rule);padding-top:8px;margin-top:8px}
.dosigns .sgn b{color:var(--m)}
/* ---------- DEMO MODE: legible from the back of the room ---------- */
.demobtn{position:fixed;right:14px;bottom:14px;z-index:1200;font-family:var(--mono);font-weight:700;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:9px 13px;line-height:1;
  background:var(--paper-2);color:var(--k);border:1.5px solid var(--k);cursor:pointer;
  opacity:.5;transition:opacity .2s ease}
.demobtn:hover,.demobtn:focus-visible{opacity:1}
html.demo .demobtn{opacity:.32;background:var(--y);color:var(--onbright);border-color:var(--y);
  font-size:13px;padding:10px 15px}
html.demo .demobtn:hover,html.demo .demobtn:focus-visible{opacity:1}
html.demo body{padding-bottom:70px}
html.demo{scroll-padding-top:104px}
html.demo body{font-size:30px;line-height:1.5}
html.demo .wrap{max-width:1680px;padding:0 40px}
html.demo section{padding:46px 0}
html.demo p,html.demo li,html.demo td,html.demo th,html.demo dd{font-size:29px;line-height:1.45}
html.demo .lead{font-size:38px;line-height:1.28}
html.demo h2{font-size:clamp(3.4rem,8.6vw,7rem)}
html.demo h3{font-size:2.5rem}
html.demo .secno{font-size:clamp(3.6rem,8vw,6rem)}
html.demo .eyebrow{font-size:24px;letter-spacing:.16em;padding:10px 18px 9px}
html.demo .stamp,html.demo .stamp a.buy,html.demo .jump,html.demo .tw-head,
html.demo .tw-phase i,html.demo .ladder .row.head,html.demo .ladder .d b,
html.demo .ladder .p,html.demo .ladder .r,html.demo .nowtag,html.demo .flag,
html.demo .specs .k2,html.demo .alarm .ah,html.demo .ink-h,html.demo .ink-f label,
html.demo .ink-num,html.demo .tips-lbl,html.demo .soon .sl,html.demo .soon p,
html.demo .rhythm .wk,html.demo .kit-when,html.demo .kit-block li span,
html.demo .nextgate .u,html.demo .nextgate .lbl,html.demo footer,
html.demo .dia figcaption,html.demo .recipe .rh span,html.demo .dial li b,
html.demo .tbl th,html.demo .back,html.demo .steps li::before{font-size:22px}
html.demo .demo-hide{display:none}
html.demo .ticker,html.demo .sheet{display:none}
html.demo.demo-prose .demo-hide{display:block}

html.demo strong,html.demo b,html.demo i,html.demo em,html.demo code,
html.demo small,html.demo span,html.demo a{font-size:inherit}
html.demo .overline{font-size:26px}
html.demo .sub{font-size:26px}
html.demo .g{font-size:30px}
html.demo .v{font-size:26px}
html.demo .pts{font-size:32px}
html.demo .k2{font-size:22px}
html.demo .skip{font-size:20px}
html.demo p[style],html.demo footer p{font-size:29px !important}
html.demo .rub .t{font-size:26px}
html.demo .ladder .d i{font-size:22px}
html.demo footer,html.demo footer p{font-size:22px !important}
html.demo .board{grid-template-columns:repeat(2,1fr)}
html.demo .board a b{font-size:2.1rem}
html.demo .board a i{font-size:22px}
html.demo .bd-lbl,html.demo .bd-row a{font-size:22px}

/* ---------- DEMO BIG: 98 inch screen, 50 feet back ----------
   Sized in vw so the physical size on that TV stays constant no matter what
   Windows scaling or browser zoom is set to. 4.4vw = about 11 arcmin at 50 ft. */
html.demo.demo-big{scroll-padding-top:2vh}
html.demo.demo-big body{font-size:2.2vw;line-height:1.18;padding-bottom:6vh}
html.demo.demo-big .wrap{max-width:none;padding:0 3vw}
html.demo.demo-big section{padding:4vh 0}
html.demo.demo-big p,html.demo.demo-big li,html.demo.demo-big td,
html.demo.demo-big th,html.demo.demo-big dd{font-size:2.2vw;line-height:1.18}
html.demo.demo-big .lead{font-size:2.7vw;line-height:1.1;max-width:none}
html.demo.demo-big h2{font-size:6.2vw;line-height:.9;margin-bottom:1.6vh}
html.demo.demo-big h3{font-size:2.6vw;line-height:1.05}
html.demo.demo-big .secno{font-size:3.2vw}
html.demo.demo-big .eyebrow{font-size:1.6vw;padding:.5vw 1vw;letter-spacing:.1em}
html.demo.demo-big .stamp,html.demo.demo-big .jump,html.demo.demo-big .tw-head,
html.demo.demo-big .tw-phase i,html.demo.demo-big .ladder .row.head,html.demo.demo-big .ladder .d b,
html.demo.demo-big .ladder .p,html.demo.demo-big .ladder .r,html.demo.demo-big .ladder .d i,
html.demo.demo-big .nowtag,html.demo.demo-big .flag,html.demo.demo-big .specs .k2,
html.demo.demo-big .alarm .ah,html.demo.demo-big .tips-lbl,html.demo.demo-big .soon .sl,
html.demo.demo-big .rhythm .wk,html.demo.demo-big .kit-when,html.demo.demo-big .kit-block li span,
html.demo.demo-big .nextgate .u,html.demo.demo-big .nextgate .lbl,html.demo.demo-big .k2,
html.demo.demo-big .board a i,html.demo.demo-big .bd-lbl,html.demo.demo-big .rub .t,
html.demo.demo-big .pts,html.demo.demo-big .g,html.demo.demo-big .v{font-size:1.6vw}
html.demo.demo-big .board a b{font-size:2.2vw}
html.demo.demo-big .nextgate .n{font-size:4.5vw}
/* one column, always. two columns of 84px text is unreadable at any distance. */
html.demo.demo-big .cols,html.demo.demo-big .kit,html.demo.demo-big .board{grid-template-columns:repeat(2,1fr)}
html.demo.demo-big .cols3,html.demo.demo-big .rhythm,html.demo.demo-big .specs li,
html.demo.demo-big .plant .pb,html.demo.demo-big .wkstrip{grid-template-columns:1fr}
html.demo.demo-big .board a:nth-child(2n){border-right:0}
html.demo.demo-big .rhythm div{border-right:0}
html.demo.demo-big .ticker,html.demo.demo-big .sheet,
html.demo.demo-big #progress{display:none}
html.demo.demo-big .jumpbar{position:static}
html.demo.demo-big .jumprow{flex-wrap:wrap;gap:.6vw}
html.demo.demo-big .jumpwrap{flex:1 1 100%;order:3}
html.demo.demo-big .jumpwrap::before,html.demo.demo-big .jumpwrap::after{display:none}
html.demo.demo-big .jump{display:grid;grid-template-columns:repeat(4,1fr);gap:.6vw;overflow:visible;padding:0}
html.demo.demo-big .jump a{text-align:center;white-space:normal}
html.demo.demo-big .demobtn{font-size:1vw;padding:.7vw 1.1vw}
/* where am I: BIG replaces the chip strip with one line of orientation */
.nowsec{display:none}
html.demo.demo-big .nowsec{display:flex;position:fixed;top:0;left:0;right:0;z-index:1100;
  align-items:baseline;gap:1.4vw;background:var(--paper);border-bottom:2px solid var(--k);
  padding:.7vh 3vw;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  letter-spacing:-.01em;font-size:1.5vw;line-height:1.1}
html.demo.demo-big .nowsec b{color:var(--y);font-weight:900}
html.demo.demo-big{scroll-padding-top:6vh}
html.demo.demo-big body{padding-top:5vh}
/* the keys, for the person driving. students never see this. */
.keycard{display:none}
html.demo .keycard{display:block;position:fixed;left:50%;bottom:9vh;transform:translateX(-50%);
  z-index:1300;background:var(--paper-2);border:2px solid var(--y);padding:14px 20px;
  font-family:var(--mono);font-size:14px;line-height:1.9;color:var(--k);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
html.demo .keycard.show{opacity:1}
.keycard b{color:var(--y);font-weight:700}
@media print{.demobtn,.keycard,.nowsec{display:none}}
@media(max-width:620px){html:not(.demo) .demobtn{display:none}}

/* ---------- THE WALL SYSTEMS (ported from Centaurus Studio TV 6.6, Sept 15 2026) ----------
   Mechanics are the Studio's. Skin is this site's. Four things: the margin note as a fixed box
   the type fills, THE LINE under it, the runway row with the day arrows at the foot of the
   stamp, and the card rotation in the ticket lines. */

/* THE LINE, on the page: a line of voice under the unit title, never a heading. Sentence case
   for a quote, the display caps for house voice, both with the margin-note rule. */
.osay{font-family:var(--body);font-size:14px;line-height:1.4;margin-top:12px;opacity:.85;
  padding-left:10px;border-left:2px solid var(--onbright);cursor:pointer;font-style:italic}
.osay.bark{font-family:var(--disp);font-style:normal;font-weight:800;font-size:17px;line-height:1.1;
  letter-spacing:.01em;text-transform:uppercase}
.osay:empty{display:none}
/* the note carries a pixel face, drawn on the same 16 grid as the weather */
.ostamp .otip .tl{display:flex;align-items:center;gap:.5em}
.ostamp .otip .tl .ti{flex:none;width:1.5em;height:1.5em;display:block;fill:currentColor;shape-rendering:crispEdges}
.ostamp .otip{cursor:pointer}
.ostamp .otip .tx{display:block}
/* THE RUNWAY on the page: the count to the next checkpoint, mono, small, at the foot of the stamp.
   The arrows keep their corner on the page (they are absolute in the stamp); on the TV they
   join this row. */
.ostamp .oarc{margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.ostamp .oarc .n{font-family:var(--disp);font-weight:800;font-size:2.2em;letter-spacing:-.02em;line-height:1;vertical-align:-.12em;margin-right:.12em}
.ostamp .oarc .arct:empty{display:none}
.ostamp .oarc:has(.arct:empty){margin-top:0}

/* ---- ON THE TV ---- */
/* the stamp grid, re-rowed: date, title, note, THE LINE (grows), runway (floor) */
/* 1fr, NOT minmax(0,1fr). A zero-minimum track lets THE LINE's box overflow it silently: the
   box sits on top of the runway, nothing crosses the column's edge, and the fit engine sees a
   column that fits. With the track's minimum at the box's own minimum the runway gets pushed
   past the floor instead, which is an overflow the probe can see and shrink out of. */
html.tv #today .ostamp{grid-template-rows:auto auto auto 1fr auto;padding-bottom:.55em;container-type:size}
/* THE STAMP'S FLOOR DROPS so the runway can be LIFTED onto the tabs' band across the divider:
   arcBase can only ever push the row up (padding grows the box, the grid gives the space
   back above it), so the resting position has to start low and be raised into place. */
/* THE UNIT TITLE IS OFF THE WALL (SN 045, his call: "kill that PROOF thing. its redundant and
   eating up too much space. we need MORE room for the quote"). The header rule two inches
   away already says CP1 CYCLE · PROOF; the row goes to THE LINE. The day's own title comes
   back at the head of the TODAY bar instead (.dayt, hidden since the readability pass), so a
   Wednesday still says SHOW US WHAT YOU GOT somewhere the room can read it. */
html.tv #today .ostamp .osub{display:none}
html.tv #today .obar .dayt{display:inline}
html.tv #today .ostamp .otip{grid-row:3}
html.tv #today .ostamp .osay{grid-row:4}
html.tv #today .ostamp .oarc{grid-row:5}

/* THE MARGIN NOTE COMES BACK ONTO THE WALL as a box of three lines the type fills. --tipbox
   arrives from JS as a whole calc in LINES divided by --tips, so it is a height in BASE ems:
   independent of the fill scale, still scaling with --tvf. 1.4 is the line-height below: keep
   the two in step or the box is a line short of its note. The explanation half stays on the
   page. */
html.tv #today .otip{display:block;margin-top:.55em;padding:.1em 0 .1em .7em;border-left-width:.22em;
  font-size:.92em;line-height:1.4;cursor:pointer}
html.tv #today .otip .tl{font-size:.6em;margin-bottom:.35em;opacity:.8}
html.tv #today .otip .tx{display:block;height:var(--tipbox,auto);overflow:hidden;
  font-size:calc(1em * var(--tips,1));line-height:1.4}
html.tv #today .otip .tt{display:none}
html.tv #today .otip b{font-weight:600}
/* the note swapped: the label re-sets, transform only, frame 0 readable */
@keyframes tipset{ from{ transform:translateX(.6em) } to{ transform:none } }
html.tv #today .otip.swap .tl{animation:tipset .44s cubic-bezier(.2,.85,.25,1)}
@media (prefers-reduced-motion:reduce){ html.tv #today .otip.swap .tl{animation:none} }

/* THE LINE. The BOX is the constant and the type fills it. GROW, NEVER SHRINK: flex-grow takes
   whatever the column has left over, flex-shrink stays 0 because overflow:hidden sets a flex
   item's automatic minimum to zero and a shrinkable box silently absorbs the column's overflow,
   measures 19px with a 72px line inside it, and the fit engine grows on the strength of a line
   that has been crushed out of existence. Content-box, so "three lines" means the text. */
html.tv #today .ostamp .osay{
  font-family:var(--body);font-style:italic;font-weight:400;
  font-size:calc(1.05em * var(--says,1));line-height:1.22;letter-spacing:0;
  color:var(--onbright);opacity:1;
  margin-top:.55em;padding:0 0 0 .7em;border-left:.22em solid var(--onbright);
  position:relative;overflow:hidden;
  --saylines:3;
  /* AS MUCH ROOM AS THE GRAPHIC DESIGN PAGE (SN 046, his words: "more space dude. look at the
     graphic design page"). Measured on the Studio wall: the line's box is 47% of the stamp, the
     note 27%, the date 14%. A line-count floor alone never gets there, because the fit engine
     spends every free pixel on type and the box lands on its minimum. So the floor is a SHARE
     of the column, in container units, and the fit solves the date and the note into what is
     left. The stamp is a size container on the TV only; on the page its height is its content. */
  min-height:max(calc(var(--saylines,3) * 1.22em / var(--says,1)), 44cqh);
  box-sizing:content-box;
  align-self:stretch;justify-self:stretch;min-width:0;
  cursor:pointer;will-change:transform}
/* House voice in the display caps, and it stops short of the unit title: the title is the
   stamp's headline, the line is a margin note that happens to shout. sayFill caps a bark at
   1.35 (a quote at 1.9) for the same reason. */
html.tv #today .ostamp .osay.bark{font-family:var(--disp);font-style:normal;font-weight:800;
  text-transform:uppercase;letter-spacing:.005em;font-size:calc(1.0em * var(--says,1))}
/* The window owns the height and the clip. The outer box keeps the rule; the window is the
   box's padding box, whatever height the column gave it. Content centred, so a short line sits
   in the middle of the space; a rolling quote pins to the top because the roll is measured
   from there. */
html.tv #today .osay .win{position:absolute;left:.7em;right:0;top:0;bottom:0;box-sizing:content-box;
  overflow:hidden;display:flex;flex-direction:column;justify-content:center}
html.tv #today .osay.roll .win{justify-content:flex-start}
html.tv #today .osay .ss{display:block;width:100%;flex:0 0 auto;text-wrap:balance}
html.tv #today .osay .q{display:block;text-wrap:balance}
/* the credit is a signature: it hangs off the end, in the mono, small */
html.tv #today .osay .by{display:block;text-align:right;font-family:var(--mono);font-style:normal;
  font-size:.62em;letter-spacing:.14em;text-transform:uppercase;margin-top:.15em;opacity:.8}
/* A ROUND TRIP, NOT A LOOP: hold, down, hold, up, hold. tv.js solves the duration from these
   shares (each travelling leg is 30% of the lap). Frame 0 is the resting layout. */
@keyframes sayroll{
  0%,10%   { transform:translateY(0); }
  40%,60%  { transform:translateY(calc(var(--sayroll,0px) * -1)); }
  90%,100% { transform:translateY(0); }
}
html.tv #today .osay.roll .ss{will-change:transform;animation:sayroll var(--saydur,20s) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ html.tv #today .osay.roll .ss{animation:none} }

/* THE RUNWAY ROW: the count on the left, the day arrows on the right, pinned to the floor of
   the stamp. GUARDED ON .arct so a stylesheet without its script degrades to a plain block.
   --arcpb is a measured pixel padding that lands the ink on the same band as the tabs across
   the divider; it is zeroed before every fit and put back after. */
html.tv #today .ostamp .oarc{align-self:end;margin-top:.6em;opacity:1;
  font-size:calc(.62em * var(--arcs,1));letter-spacing:.1em;line-height:1;
  padding-bottom:var(--arcpb,0px)}
html.tv #today .ostamp .oarc:has(.arct){display:flex;align-items:baseline;justify-content:space-between;gap:.6em}
html.tv #today .ostamp .oarc .arct{min-width:0;overflow:hidden;white-space:nowrap}
html.tv #today .ostamp .oarc .n{font-size:2.6em;margin-right:.12em;vertical-align:-.08em}
html.tv #today .ostamp .arrows{position:static;grid-row:auto;padding-top:0;gap:.45em;flex:0 0 auto;align-self:center}
html.tv #today .ostamp .arrows button{width:1.7em;height:1.7em;font-size:1.3em;border-width:2px}

/* ---- THE CARD ROTATION ---- */
/* NEXT comes back onto the wall: under rotation it is a card of its own rather than 120
   characters stealing size from TODAY. */
html.tv #today .obar.warn{display:grid}
html.tv #today .olog{display:flex;flex-direction:column;position:relative}
html.tv #today .olog h3{flex:0 0 auto}
html.tv #today .olog.rot{padding-bottom:2.6em}
html.tv #today .olog.rot > .obar{display:none}
html.tv #today .olog.rot > .obar.on{display:grid}
/* A card of ONE gets the hero treatment: it takes the column and centres in it. A card of two
   keeps its rule and its spacing, because that rule is what says these are two things. */
/* flex-grow 1, flex-SHRINK 0. Shrinkable, the hero bar was squeezed 31px under its own text
   with the text centred, so the first line lost its top and the fit engine, which forgives
   half a line on the bar itself, never saw it. Unshrinkable, the overflow lands past the
   column's floor where the probe does see it, and the column shrinks to fit the text. */
html.tv #today .olog.rot > .obar.on.solo{flex:1 0 auto;align-content:center}
html.tv #today .olog.rot > .obar.on.solo .v{font-size:1.06em}
/* THE CUT IS TYPOGRAPHIC AND ADDITIVE. Only the key cell moves, transform only (a real tracking
   change would reflow and the fit would measure a mid-animation frame). Frame 0 is readable. */
@keyframes typeset{ from{ transform:translateX(.9em) scaleX(1.035) } to{ transform:none } }
@keyframes typesetb{ 0%,22%{ transform:translateX(.9em) scaleX(1.035) } 100%{ transform:none } }
html.tv #today .olog.rot > .obar.on .k{transform-origin:left center;animation:typeset .44s cubic-bezier(.2,.85,.25,1)}
html.tv #today .olog.rot > .obar.on.lag .k{animation:typesetb .54s cubic-bezier(.2,.85,.25,1)}
@media (prefers-reduced-motion:reduce){
  html.tv #today .olog.rot > .obar.on .k,html.tv #today .olog.rot > .obar.on.lag .k{animation:none}
}
/* THE TABS. Named, not dots: a kid who reads one card and sees no indicator concludes that card
   is the whole board. Bottom left of the ticket lines, out of the flex flow. The rule under the
   active one fills across the dwell: the one thing on the panel that says "this changes, and
   here is when". */
html.tv #today .orot{position:absolute;left:1em;bottom:.7em;display:flex;gap:.6em;z-index:2}
html.tv #today .orot button{position:relative;padding:.35em .7em .5em;border:0;border-radius:0;cursor:pointer;
  background:transparent;font-family:var(--mono);font-weight:700;font-size:.6em;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);transition:color .14s ease,background .14s ease}
html.tv #today .orot button::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rule)}
html.tv #today .orot button::after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--y)}
html.tv #today .orot button:hover{color:var(--k);background:var(--paper-2)}
html.tv #today .orot button.on{color:var(--k)}
html.tv #today .orot button.on::after{width:100%}
html.tv #today .orot.cycling button.on::after{animation:rotfill var(--dwell,24s) linear forwards}
@keyframes rotfill{ from{ width:0 } to{ width:100% } }
@media (prefers-reduced-motion:reduce){ html.tv #today .orot.cycling button.on::after{animation:none;width:100%} }
html.tv #today .orot button:focus-visible{outline:2px solid var(--y);outline-offset:2px}
html:not(.tv) .orot{display:none}
/* OFF THE CLOCK on a card of its own: the list gets the column, two columns stay two columns */
html.tv #today .olog.rot > .obar.side.on.solo .v{padding-top:.6em;padding-bottom:.6em}

/* THE SHINE, on his word ("i want the shine anyway"). A slow specular pass across the bar that
   is up, once per card turn, a beat after the cut, cascading down a two-bar card in reading
   order. Bone at low alpha, not white: a press sheet under a lamp, not a glass button.
   THREE TRAPS, all paid for on the Dojo: animate background-position, never transform (a
   transform inflates the parent's scrollWidth and the fit believes it); inset:0, never negative
   offsets (same on scrollHeight); fade it out or it parks at the end of the sweep. */
/* position only, NO overflow:hidden: the sweep is the pseudo-element's own background and is
   clipped to its box by inset:0 already, and a clipping bar hides the exact overflow the fit
   engine tolerates (half a line) by cutting the top of the first line off instead. */
html.tv #today .obar{position:relative}
html.tv #today .obar::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(242,238,230,.14) 50%,transparent 58%);
  background-size:260% 100%;background-position:135% 0;background-repeat:no-repeat;
  opacity:0;animation:labshine 54s linear infinite;animation-delay:var(--shd,0s)}
@keyframes labshine{ 0%{background-position:135% 0;opacity:1} 7%{background-position:-40% 0;opacity:1} 7.5%{opacity:0} 100%{background-position:-40% 0;opacity:0} }
/* a static panel (one card, no rotation) staggers the bars so they never fire together */
html.tv #today .olog:not(.rot) > .obar:nth-of-type(2){--shd:7.8s}
html.tv #today .olog:not(.rot) > .obar:nth-of-type(3){--shd:15.6s}
html.tv #today .olog:not(.rot) > .obar:nth-of-type(4){--shd:23.4s}
/* under rotation the sweep is keyed to the dwell: it crosses in 10% of the turn (about 2.4s,
   a hand across the bar, not a flash) and .on going from none to a named animation is what
   restarts it, so it can never drift out of step with the card it belongs to */
@keyframes rotshine{ 0%{background-position:135% 0;opacity:1} 10%{background-position:-40% 0;opacity:1} 10.6%{opacity:0} 100%{background-position:-40% 0;opacity:0} }
html.tv #today .olog.rot > .obar::after{animation:none}
html.tv #today .olog.rot > .obar.on::after{animation:rotshine var(--dwell,24s) linear infinite;animation-delay:var(--shdr,1s)}
@media (prefers-reduced-motion:reduce){ html.tv #today .obar::after{animation:none!important;opacity:0} }

/* THE CHIP NEVER GOES UNDER. Sept 15 2026, his words, with the screenshot: the MINGA chip had
   dropped beneath the STUCK? sentence again. SN 040 made the row wrap "as a safety net"; the
   net is the bug. The row does not wrap. The chips keep their natural width on the right, the
   sentence takes what is left and keeps its 20ch floor, and if that is still too wide the row
   OVERFLOWS, which is an honest signal the fit engine reads (wide2 on .helpline) and shrinks
   the column for. A chip under the sentence is never the answer. */
html.tv #today .helpline,html.tv #today .roomline{flex-wrap:nowrap}
html.tv #today .helpline .ht{flex:1 1 20ch;min-width:20ch}
html.tv #today .helpline .tin{flex:0 0 auto;white-space:nowrap}

/* POINTER RESPONSE. Paint only, never geometry and never a transform: a transformed child
   inflates its parent's scrollable overflow and the fit engine believes it (the Studio's tip
   tilt broke the fit twice that way). The rule brightens, nothing moves. Fine pointers only. */
@media (pointer:fine){
  html.tv #today .otip,html.tv #today .ostamp .osay{transition:border-color .16s ease,opacity .16s ease}
  html.tv #today .otip:hover,html.tv #today .ostamp .osay:hover{border-left-color:var(--m)}
  html.tv #today .otip:hover .tl{opacity:1}
}

/* ---- PHONES (SN 046). The ticket stacks to one column under 620px already; the three new
   pieces just need to be readable at arm's length: the line up a point and a half, the runway
   up to a real caption size, and the note's face a touch larger. Nothing here touches the TV. */
@media(max-width:620px){
  html:not(.tv) .osay{font-size:15.5px;line-height:1.45;margin-top:14px}
  html:not(.tv) .osay.bark{font-size:19px;line-height:1.1}
  html:not(.tv) .ostamp .oarc{font-size:12px;margin-top:20px}
  html:not(.tv) .ostamp .oarc .n{font-size:2.3em}
  html:not(.tv) .ostamp .otip .tl{font-size:11px}
  html:not(.tv) .ostamp .otip .tl .ti{width:1.4em;height:1.4em}
}

/* THE HEADER RULE, SMALLER (SN 046, "shrink this a bit to buy us more space"). 26px to 19px of
   mono and a tighter rule, which hands the panel about 20px of height on the wall. headfit()
   still shrinks --tvh when a long phase name runs the rule over. */
html.tv #tvhead{font-size:calc(19px * var(--tvh,1));padding-bottom:7px;border-bottom-width:2px;letter-spacing:.16em}
html.tv #tvcanvas{gap:8px}

/* ---------- NOW PLAYING (SN 048), ported from the Dojo's TV deck (its SN 097-120) ----------
   A Winamp-sized deck in the bottom-right corner of the TV panel, alive only while DOJO-KUN on the
   room PC says something is playing (ws://127.0.0.1:47391/np/ws; the bot already admits any
   *.darien.games page). No bot, no deck, and the corner is exactly what it was.

   SAME DECK, THIS ROOM'S INK. Mechanics, sizes and timing are the Dojo's, verbatim: 440 x 224 of a
   900px-tall logical canvas, the CRT square, the rolling title, the transport, the glows that
   answer the music. What changed is the paint: CMY + bone instead of purple and green, and the
   8-bit LED meter is a HALFTONE meter, dots that grow with the level the way a screen grows with
   the tone, with a registration slip on the kick.

   THIS PANEL IS NOT THE DOJO'S CANVAS. The Dojo scales a fixed 1600x900 canvas; this one is sized
   to the real box (--tvs stays 1). So the deck carries its own scale, --nps, which is the number
   the Dojo's canvas would have had on this screen: min(width/W, height/900), W following the
   aspect ratio, 1280..2800. The deck is the same share of the wall on both sites.

   ALIGNED, ALWAYS. Right edge = the ticket's right edge (the log's content box), bottom = the tab
   row's bottom, top = the top of the helpline beside it. The helpline is this panel's "floor":
   it stops short of the deck (--npckw) and stands at least as tall as the deck (--npdh), so the
   fit engine solves around the corner and the TODAY card gives up the room. The collapsed clock
   tile slides to the deck's left on the deck's baseline. */
#tvnp{position:absolute;right:0;bottom:0;z-index:3;width:440px;height:224px;display:none;
  grid-template-columns:auto minmax(0,1fr);gap:14px;padding:10px;box-sizing:border-box;
  border:2px solid var(--yellow);background:var(--bg-elev);color:var(--text);cursor:pointer;
  user-select:none;line-height:1;transform:scale(var(--nps,1));transform-origin:100% 100%}
html.tv #tvbody.npbox #tvnp{display:grid}
html.tv #tvbody.npbox #tvclock.mini{transform:translate(var(--npshift,0px),var(--npshifty,0px))}
/* the floor. margin-right beats the clock's own --ckw rule (which gutter() writes inline on
   #today, so it cannot be overridden by inheritance: this rule reads a different variable) */
html.tv #tvbody.npbox #today .helpline,
html.tv #tvbody.npchip #today .helpline{margin-right:calc(var(--npckw,0px) + 10px)}
/* the LAST helpline carries the height. With the tabs under it (rotation on), the band from its
   bottom to the tabs' bottom is 2.6em of padding less the tabs' .7em inset: 1.9em of the log's
   own em, which is the helpline's em too, so the reserve scales with --tvl during the search. */
html.tv #tvbody.npbox #today .helpline:not(:has(~ .helpline)){min-height:var(--npmin,var(--npdh,224px))}
html.tv #tvbody.npbox #today .olog.rot .helpline:not(:has(~ .helpline)){min-height:var(--npmin,calc(var(--npdh,224px) - 1.9em + 3px))}
/* stepped off today, BACK TO TODAY stands between the helpline and the tabs: .35em of margin and
   .97em of line more, so the reserve gives that back too or the floor overshoots the deck */
html.tv #tvbody.npbox #today .olog.rot .helpline:not(:has(~ .helpline)):has(~ .ofoot){min-height:var(--npmin,calc(var(--npdh,224px) - 3.18em + 3px))}
/* ONE HEIGHT (SN 054, the Dojo's SN 132). The deck stays at 224 (200 to 254 at most, the fit's rounding), never
   300, so the art square never floats with a band of nothing above it. The floor fits the deck instead: the em guesses
   above are only the first try; when the band from the first helpline's top to the tabs' bottom is far from the deck,
   place() sets the last helpline's min-height in real px (--npmin), and if the words themselves stand taller than 254,
   it zooms the words down a notch at a time (--npfz, 1 to .66). Only the words zoom, never the box that carries
   the min-height. */
html.tv #tvbody.npbox #today .helpline>*{zoom:var(--npfz,1)}
/* a day with no helpline at all (off days): the log makes the room itself, under everything */
html.tv #tvbody.npbox #today .olog:not(:has(.helpline)){padding-bottom:calc(var(--npdh,224px) + 1.3em)}
/* THE 300 RULE, from the Dojo's SN 121 (its Wednesday bug), found here on Mon/Tue (SN 049). The
   deck follows the floor only up to 300, so whatever stands in the floor beside it has to fit
   under 300 on every day. STUCK? is a long sentence: squeezed beside the deck it ran to five
   lines (floor 314 to 322 on a 1920 wall) and the deck's top fell short of the box. Shrinking it
   in em did not help: this panel's fit is free to raise --tvl until something CLIPS, and a
   taller helpline is not a clip, so smaller em just bought a bigger --tvl (floor 390+). So beside
   the deck the helpline is sized off the deck's own scale (--npsc, the same number as --nps,
   written once per screen), not off --tvl: fixed per screen, about 140 of the 300 at any size,
   and out of the search's reach. The one-line room line (Wednesday) keeps the panel's sizing;
   nowrap already makes the fit shrink it when it is too wide, and it measures 224. */
html.tv #tvbody.npbox #today .helpline:not(.roomline){padding:calc(6px*var(--npsc,1)) calc(12px*var(--npsc,1));gap:calc(5px*var(--npsc,1)) calc(14px*var(--npsc,1))}
html.tv #tvbody.npbox #today .helpline:not(.roomline) .ht{font-size:calc(22px*var(--npsc,1));flex-basis:14ch;min-width:14ch}
html.tv #tvbody.npbox #today .helpline:not(.roomline) .hk{font-size:calc(14px*var(--npsc,1))}
html.tv #tvbody.npbox #today .helpline:not(.roomline) .tin{font-size:calc(13px*var(--npsc,1))}
/* the chip, when the clock has the corner (open) or the window is too narrow for the deck */
html.tv #tvbody.npchip #tvnp{display:block;width:auto;height:auto;padding:0;border:0;background:none;transform:none}
html.tv #tvbody.npchip #tvnp .npa,html.tv #tvbody.npchip #tvnp .npm,html.tv #tvbody.npchip #tvnp .npframe{display:none}
#tvnp .npchipbtn{display:none;align-items:center;gap:8px;max-width:150px;padding:7px 12px;
  border:2px solid var(--rule);background:var(--bg-elev);color:var(--text-muted);font-family:var(--pixel);
  font-size:11px;letter-spacing:.12em;cursor:pointer;white-space:nowrap;overflow:hidden}
html.tv #tvbody.npchip #tvnp .npchipbtn{display:inline-flex}
#tvnp .npchipbtn .npchiptxt{overflow:hidden;text-overflow:ellipsis}
#tvnp .npchipbtn:hover{color:var(--yellow);border-color:var(--yellow)}
/* SN 081, TODAY MODE READS FROM THE BACK ROW. Nothing on the wall is dimmed to .62: the stamp
   on the ticket, the NEXT tab and the weather print at full strength, and the small mono labels
   are a size up. The fit sees the bigger labels, so it never overflows to get them. */
html.tv{--dim:rgba(242,238,230,.9)}
html.tv #today .owx i{opacity:1}
html.tv #today .tin{font-size:.72em}
html.tv #today .ostamp .tin{font-size:.72em}
html.tv #today .otip .tl{font-size:.7em;opacity:1}
html.tv #today .ofoot{font-size:.7em}
/* the deck */
/* the art column sits on the bottom: the art is capped at 200, so a deck taller than 254 has room
   above it, and the art and transport stay on the meter's baseline */
#tvnp .npa{display:flex;flex-direction:column;justify-content:flex-end;gap:5px}
#tvnp .npaw{position:relative;display:block;width:168px;height:168px;will-change:transform}
/* THE TUBE. Rounded glass, a barrel bulge (an SVG displacement map over art, video and
   scanlines together), a glass highlight top-left, a vignette that darkens the corners the way a
   tube does, and a phosphor glow round the bezel: cyan with a magenta halo, the process inks.
   .npscreen clips, .npbulge warps. */
#tvnp .npscreen{position:absolute;inset:0;border:2px solid var(--rule);border-radius:11px;overflow:hidden;background:#000;box-sizing:border-box}
#tvnp .npbulge{position:absolute;inset:-5px;filter:url(#npbulge)}
#tvnp .npart{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;image-rendering:pixelated;background:#000;border:0}
#tvnp .npartglow{position:absolute;inset:0;pointer-events:none;border-radius:11px;box-shadow:0 0 18px 4px rgba(255,196,0,.8);opacity:0;will-change:opacity}
#tvnp .nptubeglow{position:absolute;inset:0;pointer-events:none;border-radius:11px;box-shadow:0 0 10px 1px rgba(79,195,217,.30),0 0 26px 4px rgba(255,69,116,.28),inset 0 0 14px 4px rgba(0,0,0,.55)}
/* the video: a MUTED low-quality copy of what the YouTube tab is playing, steered into step by
   playback rate. The tab keeps the sound and every control. */
#tvnp .npvid{position:absolute;inset:0;overflow:hidden;background:#000;pointer-events:none;display:none}
#tvnp .npvid iframe{position:absolute;top:50%;left:50%;width:178%;height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none}
#tvnp .npaw.hasvid .npvid{display:block}
#tvnp .npvidc{position:absolute;inset:0;width:100%;height:100%;display:none;background:#000}
#tvnp .npaw.hasfrm .npvidc{display:block}
#tvnp .npcrt{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
#tvnp .npcrt::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 28% 18%,rgba(255,255,255,.13),transparent 60%),radial-gradient(ellipse 75% 75% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%),linear-gradient(165deg,rgba(255,69,116,.14),transparent 45%,rgba(79,195,217,.13))}
#tvnp .npcrt::after{content:"";position:absolute;inset:-8px 0;background:repeating-linear-gradient(0deg,rgba(8,8,10,.17) 0 2px,transparent 2px 4px);animation:npscan 1.6s linear infinite;will-change:transform}
@keyframes npscan{to{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){#tvnp .npcrt::after{animation:none}}
/* BRIGHTER DISC (Sept 24 2026, ported from dev2 SN 041). Mr. Darien: "the crt is good but make it brighter", on every site's deck.
   Still art is lifted, the CRT overlay (vignette, tint, scanlines) is lighter. NEVER put a filter on .npbulge: it wraps the
   YouTube iframe, and chaining brightness onto it made the video vanish on dev2 SN 040. */
#tvnp .npart{filter:brightness(1.35) saturate(1.12)}
#tvnp .npvid,#tvnp .npvidc{filter:brightness(1.6) saturate(1.15)}
#tvnp .npaw.hasvid .npcrt::before,#tvnp .npaw.hasfrm .npcrt::before{opacity:.25}
#tvnp .npaw.hasvid .npcrt::after,#tvnp .npaw.hasfrm .npcrt::after{opacity:.4}
#tvnp .npcrt::before{opacity:.55}
#tvnp .npcrt::after{opacity:.75}

#tvnp .npm{min-width:0;display:flex;flex-direction:column;gap:6px;position:relative}
/* LONG NAMES ROLL, sideways, a round trip: hold, roll left until the end shows, sit, roll back */
#tvnp .npt{font-family:var(--body);font-weight:600;font-size:30px;line-height:1.1;color:var(--text);white-space:nowrap;overflow:hidden}
#tvnp .npt .in,#tvnp .npar .in{display:inline-block;white-space:nowrap;--npscroll:0px}
#tvnp .npt .in.roll,#tvnp .npar .in.roll{animation:npmarq var(--npdur,12s) ease-in-out infinite}
@keyframes npmarq{0%,18%{transform:translateX(0)}48%,62%{transform:translateX(calc(-1*var(--npscroll)))}92%,100%{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){#tvnp .npt .in.roll,#tvnp .npar .in.roll{animation:none}}
#tvnp .npar{font-family:var(--pixel);font-size:14px;letter-spacing:.08em;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-transform:uppercase}
#tvnp .npprog{height:4px;background:var(--rule);position:relative}
#tvnp .npprog i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--yellow)}
/* the halftone meter sits on the art's baseline: the foot row is 29px with a 5px gap, same as
   the transport row under the art */
#tvnp .npviz{width:100%;height:56px;flex:1 1 56px;min-height:56px;display:block;background:#0B0B0D;border:2px solid var(--rule);box-sizing:border-box;position:relative}
#tvnp .npvizglow{position:absolute;left:0;right:0;bottom:34px;height:56px;pointer-events:none;box-shadow:0 0 22px 4px rgba(79,195,217,.5);opacity:0;will-change:opacity}
#tvnp .npframe{position:absolute;inset:-2px;pointer-events:none;border:2px solid var(--yellow);box-shadow:0 0 26px 3px rgba(255,196,0,.75),inset 0 0 18px rgba(255,196,0,.3);opacity:0;will-change:opacity}
#tvnp .npfoot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:-1px;height:29px;flex:none;overflow:hidden;min-width:0}
#tvnp .nptime{font-family:var(--pixel);font-size:16px;letter-spacing:.04em;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
#tvnp .nptime b{color:var(--text-muted);font-weight:400}
#tvnp .nplive{display:inline-block;width:7px;height:7px;background:var(--magenta);margin-right:6px;vertical-align:middle;animation:npblink 1.2s steps(1) infinite}
#tvnp.paused .nplive{background:var(--text-muted);animation:none}
@keyframes npblink{50%{opacity:.15}}
#tvnp .npctl{display:flex;gap:4px}
#tvnp .npctl button{font-family:var(--pixel);font-size:12px;font-weight:700;line-height:1;color:var(--yellow);background:var(--bg);border:2px solid var(--rule);padding:7px 4px 6px;cursor:pointer;flex:1 1 0;min-width:0;letter-spacing:0}
#tvnp .npctl button:hover,#tvnp .npctl button:focus-visible{background:var(--cyan);color:var(--on-bright);border-color:var(--cyan);outline:0}
#tvnp .npctl button.npplay{flex:1.3 1 0}
/* THE ROOM LISTENS. Glow layers answer the music with OPACITY ONLY, each on its own compositor
   layer, driven by paused Web Animations (currentTime), so nothing writes a style attribute or a
   custom property per frame. The Dojo's first try set variables on <html> twenty times a second
   and froze the tab. Highs: a cyan pool bottom-right. Bass: a magenta pool bottom-left and a
   magenta vignette. Mids: a magenta halo behind the masthead. Kick: yellow behind the week label,
   the masthead breathes, the art kicks, the frame flashes. Nothing here is measured by the fit;
   the header's layers stay inside its width, because headfit() reads #tvhead's scrollWidth. */
html.tv #tvhead{position:relative}
.nphair{position:absolute;left:0;right:0;bottom:-3px;height:3px;pointer-events:none;background:var(--cyan);box-shadow:0 0 26px 5px rgba(79,195,217,.7);opacity:0;will-change:opacity}
.nppool{position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;z-index:4;background:radial-gradient(ellipse 46% 100% at 84% 100%,rgba(79,195,217,.30),rgba(79,195,217,0) 70%);opacity:0;will-change:opacity}
.nppool2{position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;z-index:4;background:radial-gradient(ellipse 40% 100% at 12% 100%,rgba(255,69,116,.30),rgba(255,69,116,0) 70%);opacity:0;will-change:opacity}
.npvig{position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(255,69,116,0) 55%,rgba(255,69,116,.36) 100%);opacity:0;will-change:opacity}
.nplogoglow{position:absolute;left:0;top:-26px;bottom:-26px;width:34%;pointer-events:none;background:radial-gradient(ellipse 60% 70% at 40% 50%,rgba(255,69,116,.45),rgba(255,69,116,0) 70%);opacity:0;will-change:opacity;z-index:0}
.npnowglow{position:absolute;right:0;top:-26px;bottom:-26px;width:30%;pointer-events:none;background:radial-gradient(ellipse 60% 70% at 70% 50%,rgba(255,196,0,.42),rgba(255,196,0,0) 70%);opacity:0;will-change:opacity;z-index:0}
html.tv #tvhead .tvwho,html.tv #tvhead .tvwhere{position:relative;z-index:1}
html.tv #tvhead .tvwho{transform-origin:0 60%}
@media(prefers-reduced-motion:reduce){#tvnp .nplive{animation:none}.nphair,.nppool,.nppool2,.npvig,.nplogoglow,.npnowglow,#tvnp .npartglow,#tvnp .npvizglow,#tvnp .npframe{display:none}}

/* ============================================================================
   SN 055 | LEGIBILITY PASS, Sept 18 2026
   Five things, all additive, nothing existing repainted:
     1. .kick          descriptive half of a section name, above the cool half
     2. .checkpoints         the seven checkpoints as SEPARATED cards, not table rows
     3. .grail/.gchip  checkpoint rail in the nav, checkpoint stamp reusable in prose
     4. .ico/.sic      one inline SVG sprite, zero image assets, zero cache risk
     5. .twoup/.lvl    show it instead of describing it
   Kids stopped reading paragraphs. This pass trades prose for pictures.
   ========================================================================== */

/* --- 1. section name: descriptive kicker carries the rule, h2 drops it ----- */
.kick{border-top:5px solid var(--text);padding-top:14px;margin:0 0 6px;
  display:flex;align-items:center;gap:11px;
  font-family:var(--pixel);font-weight:700;font-size:clamp(14px,2.35vw,21px);
  letter-spacing:.13em;text-transform:uppercase;color:var(--magenta);line-height:1.18}
.kick:before{content:"";flex:0 0 26px;height:3px;background:var(--magenta)}
@media(max-width:560px){.kick{font-size:14px;letter-spacing:.09em;gap:8px}
  .kick:before{flex:0 0 18px;height:2px}}
h2.hk{border-top:0;padding-top:0}
html.demo .kick{font-size:22px;letter-spacing:.16em}
html.demo.demo-big .kick{font-size:1.4vw;letter-spacing:.1em;padding-top:.8vw}

/* --- 4. icons: one sprite, used at two sizes ------------------------------- */
.sprite{display:none}
.sic{flex:0 0 auto;width:34px;height:34px;padding:11px;margin-left:4px;
  background:var(--cyan);color:var(--on-bright);opacity:1;box-sizing:content-box}
@media(max-width:560px){.sic{width:24px;height:24px;padding:8px}}
.ico{width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:-.16em}
html.demo .sic{width:58px;height:58px}
html.demo.demo-big .sic{width:3.4vw;height:3.4vw}
@media(max-width:560px){.sic{width:28px;height:28px}}

/* --- 2. the checkpoints, separated ---------------------------------------------- */
/* Same #ladder-table contract the checkpoint script reads (.row[data-checkpoint], .g, .d b,
   .p, .r) so no script rewrite. Only the skin changes: rows become cards. */
.checkpoints{border:0;background:none;margin:10px 0 26px;display:grid;gap:13px}
.checkpoints .row{position:relative;display:grid;gap:2px 20px;border-bottom:0;
  grid-template-columns:auto 1fr auto auto;align-items:start;
  background:var(--bg-elev);border:1.5px solid var(--line);padding:15px 18px 16px}
.checkpoints .row:before,.checkpoints .row:after{content:"";position:absolute;width:10px;height:10px;
  border:2px solid var(--line-strong);opacity:.55;pointer-events:none}
.checkpoints .row:before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.checkpoints .row:after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.checkpoints .g{grid-row:1/3;font-family:var(--display);font-weight:900;
  font-size:clamp(2.5rem,7vw,3.3rem);line-height:.78;letter-spacing:-.05em;
  padding:0;border-right:0;background:none;display:block;
  color:var(--yellow);text-shadow:.04em .035em 0 var(--magenta)}
.checkpoints .d{padding:0;grid-column:2}
.checkpoints .d b{font-family:var(--pixel);font-weight:700;
  font-size:clamp(14px,2.5vw,17px);letter-spacing:.06em;text-transform:uppercase;
  display:block;color:var(--text)}
.checkpoints .d i{font-style:normal;font-size:.95rem;line-height:1.45;color:var(--text-muted);
  display:block;margin-top:4px;max-width:50ch}
.checkpoints .p,.checkpoints .r{padding:0;border-left:0;display:block;text-align:right;
  font-family:var(--pixel);font-weight:700;font-size:clamp(16px,3vw,21px);
  line-height:1;color:var(--cyan);min-width:72px}
.checkpoints .r{color:var(--text-muted)}
.checkpoints .p:before,.checkpoints .r:before{display:block;font-weight:400;font-size:9.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
.checkpoints .p:before{content:"pages due"}
.checkpoints .r:before{content:"running"}
.checkpoints .row.now{background:var(--bg-elev);border-color:var(--yellow);
  box-shadow:inset 0 0 0 1.5px var(--yellow);color:var(--text)}
.checkpoints .row.now:before,.checkpoints .row.now:after{border-color:var(--yellow);opacity:1}
.checkpoints .row.now .d i{color:var(--text-muted)}
.checkpoints .row.now .p,.checkpoints .row.now .r{color:var(--text)}
.checkpoints .row.now .g{color:var(--yellow)}
.checkpoints .row.done{opacity:.44}
.checkpoints .row.done .g{background:none;color:var(--text-muted);text-shadow:none}
.checkpoints .row.done .d,.checkpoints .row.done .p,.checkpoints .row.done .r{opacity:1}
.checkpoints .row.lk{border-style:solid}
.checkpoints .gt{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
@media(max-width:760px){
  .checkpoints .row{grid-template-columns:auto 1fr;gap:2px 14px}
  .checkpoints .d{grid-column:2}
  .checkpoints .gt{grid-column:1/-1;grid-row:auto}
  .checkpoints .p,.checkpoints .r{grid-column:2;text-align:left;min-width:0;margin-top:10px;
    display:flex;align-items:baseline;gap:8px}
  .checkpoints .p:before,.checkpoints .r:before{margin-bottom:0}
  .checkpoints .r{margin-top:6px}
}

/* --- 3. checkpoint stamp + checkpoint rail -------------------------------------------- */
.gchip{display:inline-flex;align-items:center;gap:6px;vertical-align:.04em;
  font-family:var(--pixel);font-weight:700;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;background:var(--yellow);color:var(--on-bright);
  padding:3px 8px 2px;white-space:nowrap;text-decoration:none}
.gchip .ico{width:12px;height:12px;vertical-align:-.1em}
.gchip.lk{background:var(--magenta)}
.gchip.op{background:none;color:var(--yellow);box-shadow:inset 0 0 0 1.5px var(--yellow)}
.grail{display:flex;gap:4px;padding:0 0 10px;margin-top:-2px}
.grail a{flex:1 1 0;min-width:0;display:block;text-align:center;text-decoration:none;
  padding:5px 3px 4px;border:1.5px solid var(--line);color:var(--text-muted);
  font-family:var(--pixel);font-weight:700;font-size:10.5px;letter-spacing:.1em;line-height:1.3}
.grail a i{display:block;font-style:normal;font-size:9px;letter-spacing:.04em;opacity:.75;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grail a:hover{border-color:var(--cyan);color:var(--cyan)}
.grail a.done{opacity:.4}
.grail a.now{background:var(--yellow);border-color:var(--yellow);color:var(--on-bright)}
.grail a.now i{opacity:.85}
@media(max-width:560px){.grail a i{display:none}.grail a{padding:6px 2px 5px}}
html.demo .grail{display:none}

/* --- 5. show, do not tell ------------------------------------------------- */
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 22px}
.twoup>div{border:1.5px solid var(--line);background:var(--bg-elev);padding:12px 14px 14px}
.twoup .yes{border-color:var(--cyan)}
.twoup .nope{border-color:var(--magenta)}
.twoup .tl{display:flex;align-items:center;gap:7px;margin-bottom:10px;
  font-family:var(--pixel);font-weight:700;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase}
.twoup .yes .tl{color:var(--cyan)}
.twoup .nope .tl{color:var(--magenta)}
.twoup .ex{display:block;font-family:var(--pixel);font-size:clamp(11.5px,1.9vw,13.5px);
  line-height:1.6;word-break:break-word;color:var(--text)}
.twoup .ex b{color:var(--yellow);font-weight:700}
.twoup .ex s{color:var(--text-muted);text-decoration-color:var(--magenta)}
.twoup p{font-size:.9rem;line-height:1.45;color:var(--text-muted);margin:9px 0 0}
.twoup .sz{display:block;margin-top:2px;border:1.5px dashed var(--line);
  aspect-ratio:9/16;max-height:132px;position:relative;background:var(--bg)}
.twoup .sz i{position:absolute;inset:23% 18% 37% 8%;border:1.5px solid currentColor;
  font-style:normal;font-family:var(--pixel);font-size:8.5px;letter-spacing:.1em;
  display:flex;align-items:center;justify-content:center;text-align:center}
@media(max-width:640px){.twoup{grid-template-columns:1fr}}

/* the RAW vs JPEG levels bar: the whole argument, one picture */
.lvl{margin:14px 0 18px;display:grid;gap:9px}
.lvl-r{display:grid;grid-template-columns:62px 1fr;gap:4px 12px;align-items:center}
.lvl-k{font-family:var(--pixel);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-muted)}
.lvl-b{display:block;height:20px;background:repeating-linear-gradient(90deg,
  var(--cyan) 0 1px,rgba(79,195,217,.28) 1px 3px)}
.lvl-b.jpg{background:repeating-linear-gradient(90deg,
  var(--magenta) 0 1px,rgba(255,69,116,.28) 1px 3px);width:1.6%;min-width:5px}
.lvl-n{grid-column:2;font-family:var(--pixel);font-size:11px;letter-spacing:.06em;
  color:var(--text-muted)}
.lvl-n b{color:var(--text)}

/* --- hard break between sections: a perforation, no extra markup ---------- */
section[id]{background-image:repeating-linear-gradient(90deg,
  var(--line) 0 3px,transparent 3px 11px);background-repeat:no-repeat;
  background-size:100% 7px;background-position:0 0}


/* --- ONE THING: the line from this section a person will actually keep ----- */
.onething{display:flex;align-items:stretch;gap:0;margin:0 0 22px;
  background:var(--yellow);color:var(--on-bright)}
.onething .onel{flex:0 0 auto;display:flex;align-items:center;padding:0 13px;
  border-right:1.5px solid rgba(19,19,22,.32);
  font-family:var(--pixel);font-weight:700;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.7;white-space:nowrap}
.onething b{display:block;padding:11px 16px 12px;
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.15rem,3.1vw,1.7rem);line-height:1.02;letter-spacing:-.02em}
@media(max-width:560px){
  .onething{flex-direction:column}
  .onething .onel{border-right:0;border-bottom:1.5px solid rgba(19,19,22,.32);padding:6px 13px 5px}
}
html.demo .onething b{font-size:2.6rem}
html.demo.demo-big .onething b{font-size:2.4vw}

/* --- FIND IT FAST: type a word, land on the answer, opened ---------------- */
.find{position:relative;flex:0 0 auto;width:min(255px,32vw)}
.find input{width:100%;box-sizing:border-box;background:var(--bg-elev);color:var(--text);
  border:1.5px solid var(--text);padding:6px 10px 5px 27px;font-family:var(--pixel);
  font-size:11px;letter-spacing:.08em;outline:none;border-radius:0;-webkit-appearance:none}
.find input::placeholder{color:var(--text-muted);letter-spacing:.03em}
.find input:focus{border-color:var(--cyan)}
.find:before{content:"";position:absolute;left:8px;top:50%;width:10px;height:10px;
  margin-top:-7px;border:1.6px solid var(--text-muted);border-radius:50%;pointer-events:none}
.find:after{content:"";position:absolute;left:16px;top:50%;width:6px;height:1.6px;
  margin-top:2px;background:var(--text-muted);transform:rotate(45deg);pointer-events:none}
.find-pop{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:960;
  background:var(--bg-elev);border:1.5px solid var(--text);max-height:56vh;overflow:auto;display:none}
.find-pop.on{display:block}
.find-pop button{display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);color:var(--text);padding:8px 11px;cursor:pointer;
  font-family:var(--body);font-size:.92rem;line-height:1.3}
.find-pop button:last-child{border-bottom:0}
.find-pop button:hover,.find-pop button.sel{background:var(--yellow);color:var(--on-bright)}
.find-pop button span{display:block;font-family:var(--pixel);font-weight:700;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--magenta);margin-bottom:3px}
.find-pop button:hover span,.find-pop button.sel span{color:rgba(19,19,22,.7)}
.find-none{padding:10px 11px;font-family:var(--pixel);font-size:11px;color:var(--text-muted)}
@media(max-width:760px){.find{width:100%;flex:1 1 100%;order:5}}
html.demo .find{display:none}


/* --- MY DEPARTMENT: the page shrinks to the third of it that is yours ----- */
.mine{display:flex;align-items:stretch;gap:4px;padding:0 0 8px;flex-wrap:wrap}
.mine .minel{display:flex;align-items:center;padding-right:4px;font-family:var(--pixel);
  font-weight:700;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.mine button{flex:0 1 auto;background:none;border:1.5px solid var(--line);color:var(--text-muted);
  padding:5px 11px 4px;cursor:pointer;font-family:var(--pixel);font-weight:700;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;border-radius:0}
.mine button:hover{border-color:var(--cyan);color:var(--cyan)}
.mine button.on{background:var(--cyan);border-color:var(--cyan);color:var(--on-bright)}
section[id].notmine{display:none}
.mineback{display:none;margin:0 0 18px;padding:9px 14px;border:1.5px dashed var(--line);
  font-family:var(--pixel);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted)}
html.filtered .mineback{display:block}
.mineback b{color:var(--cyan)}
.mineback button{background:none;border:0;color:var(--yellow);cursor:pointer;
  font:inherit;text-decoration:underline;padding:0 0 0 6px}
html.demo .mine{display:none}


/* One jangle at a time: the sticky bar keeps the live countdown and the search,
   nothing else. Picking a department is a once-a-year decision, so it sits in
   the page above the ladder instead of eating a third row of sticky chrome. */
.minebar{border-top:2px solid var(--text);background:var(--bg-elev);padding:13px 0 12px}
.minebar .mine{padding:0;align-items:center}
.minebar .minel{font-size:10.5px;letter-spacing:.2em;padding-right:8px}
.grail{padding:0 0 9px;gap:3px}
.grail a{padding:4px 3px 3px;font-size:10px}
.grail a i{font-size:8.5px}
@media(max-width:760px){.find{margin-top:2px}}


/* The rail shows the whole year at the top of the page. Once you are actually
   working, it stands down and the countdown rides the one chip that stays. */
html.scrolled .grail{display:none}
@media(max-width:620px){
  .jumprow{flex-wrap:wrap;gap:6px}
  .find{order:-1;flex:1 1 100%;width:100%;margin:0 0 5px}
  .jumpwrap{flex:1 1 90px}
  .cam-link span{display:none}
  .cam-link{padding-left:7px;padding-right:7px}
  .jumprow>.now-btn{font-size:10.5px;padding-left:9px;padding-right:9px}
}


/* The hero's department row is the switch. One control, where they already look. */
.bd-row [data-dept].on{background:var(--cyan);border-color:var(--cyan);color:var(--on-bright)}
.bd-row .bd-all{display:none;background:none;border:1.5px dashed var(--line);color:var(--yellow);
  cursor:pointer;font:inherit;padding:5px 11px 4px}
html.filtered .bd-row .bd-all{display:inline-block}
html.filtered .bd-row .bd-all.on{display:none}
.find{width:min(215px,26vw)}


/* ============================================================================
   SN 056 | STREET SIGNS
   "They see only words and they vegetate." So: four shapes, four fixed
   meanings, used the same way every time, big enough to read from the back of
   the room. A sign is never decoration here. If the shape is an octagon the
   thing behind it is genuinely unrecoverable, and that is why it is an octagon.
     OCTAGON  magenta  this one cannot be undone
     TRIANGLE yellow   this is where it goes wrong
     SLASH    magenta  never do this
     SQUARE   cyan     the number you need
   ========================================================================== */
.signs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:18px 20px;margin:22px 0 26px}
.sign{display:flex;gap:15px;align-items:flex-start}
.sign>svg{flex:0 0 auto;width:86px;height:86px}
.sign .sgt{padding-top:6px;min-width:0}
.sign b{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.2rem,2.7vw,1.5rem);line-height:.98;letter-spacing:-.02em;color:var(--text)}
.sign i{display:block;font-style:normal;font-size:.92rem;line-height:1.42;
  color:var(--text-muted);margin-top:7px}
.sign.stop b{color:var(--magenta)}
.sign.warn b{color:var(--yellow)}
.sign.spec b{color:var(--cyan)}
@media(max-width:560px){.signs{grid-template-columns:1fr;gap:14px}
  .sign>svg{width:64px;height:64px}}
html.demo .sign>svg{width:130px;height:130px}

/* --- big flat diagrams: one per heavy section ---------------------------- */
.dgm{margin:22px 0 10px;border:1.5px solid var(--line);background:var(--bg-elev);padding:18px 18px 14px}
.dgm>svg{display:block;width:100%;height:auto}
.dgm figcaption{margin-top:12px;font-family:var(--pixel);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);line-height:1.6}
.dgm figcaption b{color:var(--yellow)}


.sign i{font-size:.95rem;color:var(--text-muted)}
.signs{grid-template-columns:repeat(auto-fit,minmax(245px,1fr))}
.dgm{padding:20px 20px 15px}


/* The route reflows instead of shrinking: six signs on a laptop, two up on a
   phone. An SVG would have squeezed the type to 6px, which is the opposite of
   a street sign. */
.route .rlbl{font-family:var(--pixel);font-weight:700;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--magenta);margin-bottom:12px}
.rstops{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.rstops li{flex:1 1 135px;min-width:0;border:3px solid var(--cyan);padding:9px 8px 11px;text-align:center}
.rstops li.last{border-color:var(--yellow)}
.rstops .rn{display:block;font-family:var(--pixel);font-weight:700;font-size:12px;
  letter-spacing:.18em;color:var(--cyan);margin-bottom:3px}
.rstops li.last .rn{color:var(--yellow)}
.rstops b{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1;letter-spacing:-.02em;color:var(--text)}
.rstops i{display:block;font-style:normal;font-family:var(--pixel);font-size:10.5px;
  letter-spacing:.04em;color:var(--text-muted);margin-top:5px;line-height:1.35}
@media(max-width:560px){.rstops li{flex:1 1 calc(50% - 5px)}}


/* WHAT DONE LOOKS LIKE: the numbered anatomy list and the in-or-out check */
.anat{list-style:none;counter-reset:a;margin:16px 0 0;padding:0;display:grid;gap:11px}
.anat li{counter-increment:a;position:relative;padding-left:46px;font-size:.98rem;line-height:1.5;color:var(--text-muted)}
.anat li:before{content:counter(a);position:absolute;left:0;top:0;width:30px;height:30px;
  background:var(--yellow);color:var(--on-bright);font-family:var(--display);font-weight:900;
  font-size:19px;display:flex;align-items:center;justify-content:center}
.anat b{color:var(--text)}
.checkit{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.checkit li{position:relative;padding-left:34px;font-size:1rem;line-height:1.45;color:var(--text)}
.checkit li:before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;
  border:2.5px solid var(--cyan)}


/* ============================================================================
   SN 057 | HARD SEPARATION
   The old break was a 7px dotted band and nobody saw it. A section boundary
   now reads like a barricade: hazard stripes across the full width with the
   next section's number and name punched out of the middle. Sections that a
   checkpoint actually drives carry the checkpoint stamp on the way in, so the checkpoints are
   visible in the structure of the page instead of only in section 01.
   ========================================================================== */
section[id]{background-image:none;border-top:5px solid var(--text)}
.gapbar{height:44px;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--yellow) 0 15px,var(--bg) 15px 30px);
  border-top:3px solid var(--text);border-bottom:3px solid var(--text)}
.gapbar>span{display:inline-flex;align-items:center;gap:11px;background:var(--bg);
  box-shadow:0 0 0 5px var(--bg);padding:8px 20px 7px;max-width:92vw;
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.05rem,2.6vw,1.5rem);line-height:1;letter-spacing:-.01em;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gapbar>span>i{font-style:normal;font-family:var(--pixel);font-weight:700;
  font-size:clamp(11px,1.8vw,14px);letter-spacing:.18em;color:var(--yellow)}
.gapbar.gated{background:repeating-linear-gradient(45deg,var(--magenta) 0 15px,var(--bg) 15px 30px)}
.gapbar.gated>span>i{color:var(--magenta)}
.gapbar>span>b{font-family:var(--pixel);font-weight:700;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;background:var(--magenta);color:var(--on-bright);padding:3px 7px 2px}
@media(max-width:560px){
  .gapbar{height:38px;background-size:auto}
  .gapbar>span{padding:7px 13px 6px;gap:8px}
  .gapbar>span>b{display:none}
}
html.demo .gapbar{display:none}
html.filtered section[id].notmine + .gapbar{display:none}


/* DESKTOP FLOORS (Sept 22 2026, the Studio audit run here): no small label is smaller on desktop than on a
   phone. These five were 1 to 2px under their phone size. Page mode only; the wall sizes itself. */
@media (min-width:761px){
  html:not(.tv) .stamp{font-size:12px}
  html:not(.tv) .ostamp .otip .tl{font-size:11px}
  html:not(.tv) .ostamp .oarc .arct{font-size:12px}
  html:not(.tv) .grail a.now i{font-size:10.5px}
  html:not(.tv) .cam-link span{font-size:12px}
}

/* SN 100 | THE TESTS SLAB (Oct 7): "it needs to be BIG and OBVIOUS... make it the most obvious
   thing in the world." The study guide and the four practice tests were buried in day cells and
   the end of Sign This. Now they sit in a full-width yellow slab between the hero and the board. */
.testslab{margin:22px 0 26px;background:var(--y);color:var(--onbright);border:4px solid var(--y);
  box-shadow:8px 8px 0 var(--m);padding:22px 22px 18px}
.testslab .ts-kick{display:inline-block;background:var(--onbright);color:var(--y);font-family:var(--mono);
  font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:5px 10px 4px}
.testslab h2{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.88;
  font-size:clamp(52px,8vw,104px);margin:10px 0 8px;padding:0;border:0;color:var(--onbright);letter-spacing:-.01em;text-shadow:3px 3px 0 var(--m)}
.testslab h2:before,.testslab h2:after{display:none}
.testslab .ts-top p{font-size:clamp(17px,1.6vw,21px);margin:0 0 18px;max-width:62ch;color:var(--onbright)}
.testslab em{font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  width:1.25em;height:1.25em;margin-right:.45em;border:3px solid currentColor;border-radius:50%;
  font-family:var(--disp);font-weight:900;font-size:.8em;line-height:1}
.ts-guide{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;background:var(--onbright);color:var(--y);
  text-decoration:none;padding:16px 18px;border:3px solid var(--onbright)}
.ts-guide b{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(34px,4.6vw,56px);line-height:1;display:inline-flex;align-items:center}
.ts-guide i{font-style:normal;font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--k)}
.ts-guide:hover,.ts-guide:focus-visible{background:var(--m);border-color:var(--m);color:var(--onbright)}
.ts-guide:hover i,.ts-guide:focus-visible i{color:var(--onbright)}
.ts-prac{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:stretch;margin-top:16px}
.ts-prac .ts-lab{grid-column:1/-1}
section.testslab{border:4px solid var(--y);padding-top:22px}
.ts-real em{font-size:1.3em;border-width:2px}
.ts-lab{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(28px,3.4vw,42px);
  display:flex;align-items:center;padding-right:6px}
.ts-prac a{display:flex;align-items:center;justify-content:center;text-align:center;border:3px solid var(--onbright);
  color:var(--onbright);text-decoration:none;font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(20px,2.2vw,28px);line-height:1;padding:14px 10px}
.ts-prac a:after{content:" \2197";font-size:.7em;margin-left:.3em}
.ts-prac a:hover,.ts-prac a:focus-visible{background:var(--onbright);color:var(--y)}
.ts-real{margin:14px 0 0;font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;display:flex;align-items:center;color:var(--onbright)}
@media(max-width:760px){.ts-prac{grid-template-columns:1fr 1fr}}
html.demo .testslab{display:none}


/* SN 065: checkpoint weeks read as checkpoints. Yellow rails, hazard wash, banner with the page count. */
.wk.w4.checkpoint{border-top:4px solid var(--y);border-bottom:4px solid var(--y);background:repeating-linear-gradient(-45deg,rgba(255,196,0,.09) 0 14px,transparent 14px 28px)}
.gban{display:inline-block;background:var(--y);color:#131316;font-family:var(--disp);font-weight:900;font-size:1.55rem;line-height:1;letter-spacing:.01em;text-transform:uppercase;padding:7px 12px 6px;margin:0 0 10px}
.gban b{font-weight:900;margin-right:.3em}
.gban span{opacity:.45;margin:0 .3em}
.wk.w4.checkpoint .ribbon span[data-c="yellow"]{background:var(--y)!important;color:#131316!important;outline:2px solid #131316;outline-offset:-2px}
.wk.w4.checkpoint .ribbon span[data-c="yellow"] *{color:#131316!important}
.gnext{display:inline-block;margin-left:10px;background:var(--y);color:#131316;padding:1px 7px 0;font-weight:700;letter-spacing:.12em}
html.demo .gban{font-size:46px;padding:10px 16px 9px}
html.demo.demo-big .gban{font-size:3.4vw}
@media(max-width:820px){.wk.w4.locked .w4head{grid-template-columns:72px minmax(0,1fr)}}
@media(max-width:620px){.gban{font-size:1.2rem}.gnext{display:table;margin:6px 0 0}}


/* ---- subpage components (holdup, dia, score, sgd, chk), lifted from spread-setup.html ---- */

.jump a.key{border-color:var(--c);color:var(--c)}

.jump a.key:hover,.jump a.key:focus-visible{background:var(--c);border-color:var(--c);color:var(--onbright)}

code{font-family:var(--mono);font-size:.88em;background:var(--paper-2);padding:1px 6px;white-space:nowrap}

.last{display:block}

.steps li.chk{background:var(--paper-2);border-left:4px solid var(--c);padding-left:50px;margin-top:4px}

.steps li.chk::before{content:"CHECK";background:var(--c);left:6px}

.cell .steps li{font-size:.93rem}



.dia{border:1.5px solid var(--k);background:var(--white);padding:18px;margin:14px 0 20px}

.dia svg{width:100%;height:auto;display:block}

.dia figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim);
  margin-top:12px;line-height:1.55;border-top:1px solid var(--rule);padding-top:10px}

.holdup{border:2px solid var(--m);background:var(--paper-2);padding:16px 18px;margin-top:18px}

.holdup .fl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--m);display:block;margin-bottom:6px}

.holdup p{max-width:none;font-family:var(--disp);font-size:1.25rem;line-height:1.25}

.rub li.on .n{background:var(--c)}

.rub li.on .t{color:var(--dim);text-decoration:line-through}

.rub li:hover .n{background:var(--k)}

.score{display:flex;align-items:center;gap:16px;margin-top:14px;border:2px solid var(--k);background:var(--paper-2);padding:12px 16px}

.score b{font-family:var(--disp);font-weight:900;font-size:2.4rem;line-height:1;letter-spacing:-.03em;color:var(--y)}

.score span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}

.score button{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1.5px solid var(--k);background:none;color:var(--k);padding:6px 10px;cursor:pointer}

.score button:hover{background:var(--k);color:var(--onbright)}

html.demo p,html.demo li{font-size:29px;line-height:1.45}

html.demo .stamp,html.demo .jump,html.demo .flag,html.demo .specs .k2,html.demo .alarm .ah,
html.demo .tips-lbl,html.demo .nextgate .u,html.demo .nextgate .lbl,html.demo footer,
html.demo .dia figcaption,html.demo .steps li::before,html.demo .sign .sgd li::before,html.demo .sign .sgn,
html.demo .score span,html.demo .holdup .fl{font-size:22px}

html.demo .sign .sgt>b{font-size:2.6rem}

html.demo .holdup p{font-size:2rem}

html.demo strong,html.demo b,html.demo i,html.demo em,html.demo code,html.demo span,html.demo a{font-size:inherit}

html.demo .overline,html.demo .sub{font-size:26px}

html.demo .k2,html.demo .v{font-size:26px}

html.demo.demo-big p,html.demo.demo-big li{font-size:2.2vw;line-height:1.18}

html.demo.demo-big .stamp,html.demo.demo-big .jump,html.demo.demo-big .flag,html.demo.demo-big .specs .k2,
html.demo.demo-big .alarm .ah,html.demo.demo-big .tips-lbl,html.demo.demo-big .nextgate .u,html.demo.demo-big .nextgate .lbl,
html.demo.demo-big .k2,html.demo.demo-big .v,html.demo.demo-big .rub .t,html.demo.demo-big .sign .sgn,
html.demo.demo-big .score span,html.demo.demo-big .holdup .fl{font-size:1.6vw}

html.demo.demo-big .cols{grid-template-columns:repeat(2,1fr)}

html.demo.demo-big .specs li{grid-template-columns:1fr}

html.demo.demo-big #progress{display:none}

/* ==========================================================================
   SN 110 | THE SEVEN BOXES. Components for the readability rebuild (Oct 2026).
   Every assignment page has the same seven boxes in the same order, and the home
   page is DUE NEXT, HOW THIS CLASS WORKS, ASSIGNMENTS, RESOURCES, CLASS RULES.
   Nothing here touches the TV: it has its own page now (calendar.html).
   ========================================================================== */

/* --- DUE NEXT: the first thing on the home page ---------------------------- */
.duenext{border:3px solid var(--y);background:var(--white);margin:0 0 10px;display:grid;
  grid-template-columns:minmax(150px,auto) 1fr}
.duenext .dn-days{background:var(--y);color:var(--onbright);padding:22px 26px;display:flex;flex-direction:column;justify-content:center;
  border-right:3px solid var(--y)}
.duenext .dn-n{font-family:var(--disp);font-weight:900;font-size:4.2rem;line-height:.85;letter-spacing:-.04em}
.duenext .dn-u{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-top:8px}
.duenext .dn-body{padding:20px 24px 22px;min-width:0}
.duenext .dn-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--m);font-weight:700}
.duenext h2{border-top:0;padding-top:0;margin:6px 0 6px;font-size:clamp(2rem,5.4vw,3.2rem);text-shadow:none}
.duenext .dn-what{font-size:1.05rem;margin:0 0 6px;max-width:none}
.duenext .dn-when{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--y);margin:0 0 16px;max-width:none}
.duenext .dn-when b{color:var(--k)}
.duenext .dn-next{font-family:var(--mono);font-size:12px;color:var(--dim);margin:14px 0 0;max-width:none;line-height:1.55}
.duenext .dn-next b{color:var(--k)}
.duenext.urgent{border-color:var(--red)}
.duenext.urgent .dn-days{background:var(--red);color:#fff;border-color:var(--red)}
.duenext.urgent .dn-when{color:var(--red)}
@media(max-width:620px){.duenext{grid-template-columns:1fr}.duenext .dn-days{border-right:0;border-bottom:3px solid var(--y);flex-direction:row;align-items:baseline;gap:12px}
  .duenext .dn-n{font-size:3rem}.duenext .dn-u{margin-top:0}}

/* --- HOW THIS CLASS WORKS: three moves, then the checkpoint ---------------------- */
.moves{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--k);background:var(--white);margin:12px 0 18px}
.moves div{padding:18px 16px;border-right:1.5px solid var(--k)}
.moves div:last-child{border-right:0}
.moves .mv-n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--m);text-transform:uppercase;font-weight:700;display:block;margin-bottom:6px}
.moves .mv-t{font-family:var(--disp);font-weight:900;font-size:1.6rem;line-height:1;text-transform:uppercase;display:block;margin-bottom:8px;letter-spacing:-.02em}
.moves .checkpoint .mv-t{color:var(--y)}
.moves p{font-size:.93rem;line-height:1.45;margin:0;max-width:none}
@media(max-width:760px){.moves{grid-template-columns:1fr 1fr}.moves div:nth-child(2n){border-right:0}.moves div:nth-child(-n+2){border-bottom:1.5px solid var(--k)}}
@media(max-width:420px){.moves{grid-template-columns:1fr}.moves div{border-right:0;border-bottom:1.5px solid var(--k)}.moves div:last-child{border-bottom:0}}

/* --- the collapsed box (The Premise, the research line) ------------------- */
details.fold{border:1.5px solid var(--rule);background:var(--paper-2);margin:14px 0 0}
details.fold summary{cursor:pointer;list-style:none;padding:12px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--c);display:flex;align-items:center;gap:10px}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::before{content:"\25B6";font-size:10px;color:var(--y)}
details.fold[open] summary::before{content:"\25BC"}
details.fold summary:hover{background:var(--white)}
details.fold .fold-in{padding:4px 18px 18px;border-top:1px solid var(--rule)}
details.fold .fold-in p{max-width:68ch}

/* --- the card grids: ASSIGNMENTS, RESOURCES, CLASS RULES ------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1.5px solid var(--k);background:var(--white);margin-top:14px}
.cards a{display:block;padding:18px 18px 16px;text-decoration:none;color:var(--k);border-right:1.5px solid var(--k);border-bottom:1.5px solid var(--k);min-width:0;position:relative}
.cards a:nth-child(3n){border-right:0}
.cards a:nth-last-child(-n+3){border-bottom:0}
.cards a:hover,.cards a:focus-visible{background:var(--y);color:var(--onbright)}
.cards .c-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--m);font-weight:700;margin-bottom:6px}
.cards a:hover .c-k,.cards a:focus-visible .c-k{color:rgba(19,19,22,.75)}
.cards .c-t{display:block;font-family:var(--disp);font-weight:900;font-size:1.55rem;line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.cards .c-c{display:block;font-family:var(--disp);font-weight:400;font-size:1.05rem;line-height:1;letter-spacing:-.01em;opacity:.72;margin-top:3px;text-transform:uppercase}
.cards .c-d{display:block;font-family:var(--body);font-size:.9rem;line-height:1.42;margin-top:9px;color:var(--dim)}
.cards a:hover .c-d,.cards a:focus-visible .c-d{color:rgba(19,19,22,.85)}
.cards .c-w{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-top:10px;color:var(--c)}
.cards a:hover .c-w,.cards a:focus-visible .c-w{color:var(--onbright)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.two a:nth-child(3n){border-right:1.5px solid var(--k)}
.cards.two a:nth-child(2n){border-right:0}
.cards.two a:nth-last-child(-n+3){border-bottom:1.5px solid var(--k)}
.cards.two a:nth-last-child(-n+2){border-bottom:0}
@media(max-width:760px){.cards,.cards.two{grid-template-columns:1fr 1fr}
  .cards a,.cards.two a{border-right:1.5px solid var(--k)!important;border-bottom:1.5px solid var(--k)!important}
  .cards a:nth-child(2n),.cards.two a:nth-child(2n){border-right:0!important}}
@media(max-width:460px){.cards,.cards.two{grid-template-columns:1fr}.cards a,.cards.two a{border-right:0!important}}
.cards.rules .c-t{font-size:1.3rem}

/* --- the seven boxes --------------------------------------------------------- */
main.seven section{padding:46px 0}
main.seven .sec-head{margin-bottom:0}
main.seven h2{font-size:clamp(2.1rem,6vw,3.4rem);margin-bottom:18px}
.boxno{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-left:auto}

/* HOW TO TURN IT IN: the yellow box with the big button */
.turnin{border:3px solid var(--y);background:var(--y);color:var(--onbright);padding:22px 24px;margin:14px 0 18px}
.turnin .ti-k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:8px;opacity:.75}
.turnin .ti-t{font-family:var(--disp);font-weight:900;font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:.95;text-transform:uppercase;letter-spacing:-.02em;display:block;margin-bottom:10px}
.turnin p{max-width:none;font-size:1rem;line-height:1.5;margin:0 0 10px;color:var(--onbright)}
.turnin p strong,.turnin p b{color:var(--onbright);font-weight:700}
.turnin ol{margin:6px 0 14px 1.3em;font-size:.97rem;line-height:1.55}
.turnin ol li{margin-bottom:4px}
.turnin code{background:rgba(19,19,22,.12);color:var(--onbright)}
.turnin a{color:var(--onbright);border-bottom-color:var(--onbright)}
.turnin a:hover{background:var(--onbright);color:var(--y)}
.turnin .ti-btn{display:inline-block;background:var(--onbright);color:var(--y);border:2px solid var(--onbright);
  font-family:var(--disp);font-weight:900;font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase;padding:12px 22px 11px;text-decoration:none;margin-top:4px}
.turnin .ti-btn:hover,.turnin .ti-btn:focus-visible{background:var(--k);color:var(--onbright);border-color:var(--k)}
.turnin .ti-when{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em;display:block;margin-top:12px}
html[data-mode="light"] .turnin{color:#131316}

/* WHAT IT SHOULD LOOK LIKE: the picture with numbered pins, then 3 or 4 lines */
.pins{list-style:none;counter-reset:pin;margin:10px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 22px}
.pins li{counter-increment:pin;position:relative;padding:4px 0 4px 38px;font-size:.98rem;line-height:1.45}
.pins li::before{content:counter(pin);position:absolute;left:0;top:3px;width:26px;height:26px;border-radius:50%;background:var(--y);color:var(--onbright);
  font-family:var(--disp);font-weight:900;font-size:17px;display:flex;align-items:center;justify-content:center}
.pins li b{font-weight:500;color:var(--k)}
@media(max-width:620px){.pins{grid-template-columns:1fr}}
.pic{margin:14px 0 6px;border:1.5px solid var(--line);background:var(--bg-elev);padding:16px}
.pic>svg{display:block;width:100%;height:auto}
.pic figcaption{margin-top:10px;font-family:var(--pixel);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);line-height:1.6}
.pic figcaption b{color:var(--yellow)}

/* LESSON: short blocks with headings every few lines, IS / IS NOT, WRONG / RIGHT */
.isnot{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 18px}
.isnot>div{border:1.5px solid var(--line);background:var(--bg-elev);padding:12px 14px}
.isnot .is{border-color:var(--cyan)}
.isnot .not{border-color:var(--magenta)}
.isnot .tl{font-family:var(--pixel);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}
.isnot .is .tl{color:var(--cyan)}
.isnot .not .tl{color:var(--magenta)}
.isnot ul{list-style:none;margin:0}
.isnot li{padding:5px 0;border-bottom:1px dotted var(--rule);font-size:.93rem;line-height:1.4}
.isnot li:last-child{border-bottom:0}
@media(max-width:560px){.isnot{grid-template-columns:1fr}}

/* RUBRIC: the table. 1 looks like / 5 looks like */
.rubt{width:100%;border-collapse:collapse;border:1.5px solid var(--k);background:var(--white);margin:10px 0 14px;font-size:.93rem;line-height:1.45}
.rubt th,.rubt td{border:1px solid var(--rule);padding:10px 12px;vertical-align:top;text-align:left}
.rubt th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;background:var(--paper-2);color:var(--c)}
.rubt th.one{color:var(--m)}
.rubt th.five{color:var(--y)}
.rubt td.k{font-family:var(--disp);font-weight:800;font-size:1.15rem;text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.rubt td.k small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);font-weight:400;text-transform:uppercase;margin-top:3px;white-space:normal}
@media(max-width:620px){.rubt,.rubt thead,.rubt tbody,.rubt tr,.rubt th,.rubt td{display:block}
  .rubt thead{display:none}.rubt tr{border-bottom:2px solid var(--k)}
  .rubt td{border:0;border-bottom:1px dotted var(--rule)}
  .rubt td.one::before{content:"1 looks like";display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--m);text-transform:uppercase;margin-bottom:3px}
  .rubt td.five::before{content:"5 looks like";display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--y);text-transform:uppercase;margin-bottom:3px}}
.scale{font-family:var(--mono);font-size:12px;color:var(--dim);line-height:1.6;margin:0;max-width:none}
.scale b{color:var(--k)}

/* EXAMPLE: the margin note ("Why this gets a 5") */
.margin-note{border-left:4px solid var(--c);padding:4px 0 4px 16px;margin:14px 0 6px;font-family:var(--body);font-style:italic;font-size:.97rem;line-height:1.55;color:var(--k)}
.margin-note .mn-k{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c);margin-bottom:4px}
.margin-note p{max-width:none;margin-bottom:8px}

/* the assignment title block: plain name as the kicker, cool name as the big title */
.title-block .plain{font-family:var(--mono);font-weight:700;font-size:clamp(14px,2.6vw,20px);letter-spacing:.22em;text-transform:uppercase;color:var(--y);margin-bottom:10px;display:block}
.title-block .why{font-family:var(--disp);font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.2;color:var(--k);max-width:40ch;margin:14px 0 0}
.title-block .why b{color:var(--m);font-weight:700}

/* last line on its own */
.last{display:block}