/* schools.html: Kinematic for schools and teachers. Every class here is prefixed sch-.
   The page runs: hero, the courses (jobs and skills, by department), how a lesson works (the viewport clip with
   the canvas filling in beside it), first classes (tabs), why schools, demos, classroom setup, accessibility,
   teachers. Each department and plan carries its section color in --c. */

/* hero */
.sch-hero{position:relative;padding-block:calc(var(--barh) + var(--navh) + 52px) 76px;overflow:hidden}
.sch-hero canvas{position:absolute;inset:0;width:100%;height:100%}
.sch-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.sch-hero h1{font-size:clamp(48px,6.2vw,100px);line-height:.93;letter-spacing:-.055em}
.sch-hero h1 i{font-style:normal;background:linear-gradient(90deg,#30B9FE,#5B6DFF 35%,#8151FE 62%,#DD3BFC);-webkit-background-clip:text;background-clip:text;color:transparent}
.sch-hero .sub{margin-top:24px;font-size:clamp(18px,1.45vw,21px);line-height:1.45;max-width:560px}
.sch-visual{position:relative;padding:0 26px 74px 0}
.sch-fig{position:relative;margin:0;aspect-ratio:16/9;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#000;box-shadow:0 30px 60px rgba(0,0,0,.55)}
.sch-fig img,.sch-fig video{width:100%;height:100%;object-fit:cover;display:block}
.sch-fig figcaption{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:10.5px;background:rgba(6,8,11,.84);color:var(--fg);padding:3px 7px;border-radius:2px;max-width:calc(100% - 20px)}
.sch-note{position:absolute;right:0;bottom:0;width:min(300px,62%);padding:18px 18px 16px;border:1px solid var(--line-2);border-radius:8px;background:rgba(11,15,19,.95);box-shadow:0 24px 48px rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.sch-note > span{display:block;color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.sch-note ul{list-style:none;display:grid;gap:9px}
.sch-note li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;font-size:14.5px;line-height:1.35;color:var(--mute)}
.sch-note li b{color:var(--fg);font-weight:600}
.sch-note li i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--c);position:relative;margin-top:1px}
.sch-note li i::after{content:"";position:absolute;left:5px;top:2.5px;width:4px;height:8px;border:solid var(--c);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}

/* shared picture frame: a figure with its caption in the top left corner */
.sch-m,.sch-pfig,.sch-shot{position:relative;margin:0;overflow:hidden;background:#000;min-width:0}
.sch-m img,.sch-m video,.sch-pfig img,.sch-pfig video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sch-m figcaption,.sch-pfig figcaption,.sch-shot figcaption{position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:10.5px;line-height:1.4;background:rgba(6,8,11,.84);color:var(--fg);padding:3px 7px;border-radius:2px;max-width:calc(100% - 20px)}
.sch-m.light,.sch-pfig.light{background:#f2f2f0}
.sch-m.light img,.sch-pfig.light img{object-fit:contain}
.sch-m.contain img,.sch-pfig.contain img{object-fit:contain}
.sch-m .bg,.sch-pfig .bg{position:absolute;inset:0;background-repeat:no-repeat;background-color:#000}
.sch-m .fr{position:absolute;top:6%;left:50%;height:78%;transform:translateX(-50%);overflow:hidden}
.sch-m .fr img{inset:auto;left:0;top:0;width:auto;height:100%;max-width:none;object-fit:fill}
.sch-pfig.wideshot{aspect-ratio:1400/608}
.sch-shot .pin{position:absolute;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:#06080B;background:var(--c);padding:3px 8px;border-radius:2px;box-shadow:0 4px 14px rgba(0,0,0,.35)}

/* the courses: one block per department, its name on the left, the courses as cards on the right */
.sch-djump{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 clamp(18px,2vw,28px)}
.sch-djump a{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--line-2);border-radius:3px;background:var(--ink-2);color:var(--fg);font-size:15px;transition:border-color .2s}
.sch-djump a:hover{border-color:var(--c)}
.sch-djump i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.sch-djump small{color:var(--dim);font-size:11px}
.sch-dept{scroll-margin-top:calc(var(--barh) + var(--navh) + 70px)}
#tracks{padding-bottom:clamp(32px,4vw,56px)}
.sch-dept{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:clamp(24px,3.4vw,56px);padding-block:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.sch-dh{position:sticky;top:calc(var(--barh) + var(--navh) + 96px);align-self:start;display:flex;flex-direction:column;gap:12px;min-width:0}
.sch-dh .n{display:flex;align-items:center;gap:10px;color:var(--c);font-size:12px}
.sch-dh .n::after{content:"";height:1px;width:40px;background:var(--line-2)}
.sch-dh h3{font-size:clamp(30px,2.7vw,42px);line-height:1.02;letter-spacing:-.045em}
.sch-dh p{color:var(--mute);font-size:16.5px;line-height:1.45}
.sch-dh .fits{color:var(--fg);font-size:14.5px;padding-top:12px;border-top:1px solid var(--line)}
.sch-dh .fits span{display:block;color:var(--dim);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.sch-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
.sch-track{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;background:var(--ink-2);overflow:hidden;min-width:0;transition:border-color .2s}
.sch-track:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.sch-track .sch-m{aspect-ratio:16/10;border-bottom:1px solid var(--line)}
.sch-track .b{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;flex:1;min-width:0}
.sch-track h3{font-size:clamp(21px,1.75vw,26px);letter-spacing:-.035em;line-height:1.08}
.sch-track .mk{color:var(--fg);font-size:16px;line-height:1.45}
.sch-track .do{color:var(--mute);font-size:15px;line-height:1.5}
.sch-track .do span,.sch-track .to span{display:block;color:var(--c);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.sch-track .to ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.sch-track .to li{font-size:13.5px;line-height:1.2;color:var(--fg);padding:5px 9px;border:1px solid var(--line-2);border-radius:3px;background:var(--ink)}
.sch-track .go{margin-top:auto;padding-top:4px;color:var(--c);font-size:12px}
.sch-track .go:hover{color:var(--fg)}
.sch-track.wide{grid-column:1/-1;flex-direction:row}
.sch-track.wide .sch-m{flex:0 0 56%;align-self:stretch;border-bottom:0;border-right:1px solid var(--line)}

/* how a lesson works: the clip on the left, the canvas filling in on the right */
.sch-build{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);margin:0;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#06080B}
.sch-build .vp{position:relative;aspect-ratio:16/9;background:#000;min-width:0}
.sch-build .vp video{width:100%;height:100%;object-fit:cover;display:block}
.sch-build .tag{position:absolute;left:10px;top:10px;font-size:10.5px;color:var(--fg);background:rgba(6,8,11,.84);padding:3px 7px;border-radius:2px;letter-spacing:.04em}
.sch-build .cvs{position:relative;min-width:0;border-left:1px solid var(--line-2);padding:46px clamp(14px,1.6vw,22px) 18px;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 1.4px) 0 0/22px 22px,#090c10}
.sch-build ol{list-style:none;display:flex;flex-direction:column;gap:9px;padding:0;margin:0}
.sch-build li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:center;min-height:38px;padding:6px 12px 6px 10px;border:1px solid var(--line-2);border-left:3px solid #30B9FE;border-radius:4px;background:#0f141a;color:var(--fg);font-size:14px;line-height:1.25;transition:opacity .35s,transform .35s,box-shadow .35s,border-color .35s}
.sch-build li i{font-style:normal;font-size:10.5px;color:var(--dim)}
.sch-build li + li::before{content:"";position:absolute;left:20px;top:-10px;width:1.5px;height:9px;background:rgba(48,185,254,.65)}
.sch-build.live li:not(.on){border-style:dashed;border-color:rgba(243,241,236,.12);border-left-color:rgba(48,185,254,.25);background:transparent;color:transparent;box-shadow:none}
.sch-build.live li:not(.on) i{color:transparent}
.sch-build.live li:not(.on)::before{opacity:.25}
.sch-build li.now{border-color:#30B9FE;box-shadow:0 0 0 1px rgba(48,185,254,.5),0 0 22px rgba(48,185,254,.22)}
.sch-build figcaption{grid-column:1/-1;padding:12px 16px;border-top:1px solid var(--line-2);color:var(--mute);font-size:11.5px;line-height:1.5}
.sch-how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(36px,4vw,56px)}
.sch-pts{list-style:none;padding:0;margin:0;counter-reset:pt;border-top:1px solid var(--line-2)}
.sch-pts li{counter-increment:pt;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.sch-pts li::before{content:counter(pt);grid-row:span 2;font-family:var(--mono);font-size:12px;color:var(--fg);width:26px;height:26px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center}
.sch-pts h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.03em;line-height:1.1}
.sch-pts p{color:var(--mute);font-size:15.5px;margin-top:4px}
.sch-shot{border:1px solid var(--line-2);border-radius:8px;background:#f2f2f0}
.sch-shot .im{position:relative}
.sch-shot img{width:100%;height:auto;display:block}
.sch-shot figcaption{position:static;display:block;max-width:none;border-radius:0;background:#0B0F13;color:var(--mute);font-size:11.5px;padding:10px 14px;border-top:1px solid var(--line-2)}

/* first classes: one tab per department */
.sch-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sch-tab{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 16px;border:1px solid var(--line-2);border-radius:3px;background:var(--ink-2);color:var(--mute);font:500 15px/1 var(--body);cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.sch-tab i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.sch-tab:hover{color:var(--fg)}
.sch-tab[aria-selected="true"]{color:var(--fg);border-color:var(--c);background:color-mix(in srgb,var(--c) 16%,var(--ink-2))}
.sch-tab:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.sch-plan{display:none;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,60px);align-items:center;padding:clamp(20px,3vw,36px);border:1px solid var(--line);border-top:3px solid var(--c);border-radius:6px;background:var(--ink-2)}
.sch-plan.on{display:grid}
.sch-plan .t{display:flex;flex-direction:column;gap:16px;min-width:0}
.sch-plan .k{color:var(--c);font-size:12px}
.sch-plan h3{font-size:clamp(28px,2.9vw,44px);line-height:1.02;letter-spacing:-.045em}
.sch-plan .leave{color:var(--fg);font-size:16.5px}
.sch-plan .leave span,.sch-plan .cvn span{display:block;color:var(--c);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.sch-plan .steps li{color:var(--fg)}
.sch-plan .cvn{padding:14px 16px;border:1px dashed var(--line-2);border-radius:6px;color:var(--mute);font-size:15px;line-height:1.45;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) 1px,transparent 1.4px) 0 0/18px 18px,#090c10}
.sch-plan .demo i{border-left-color:var(--c)}
.sch-pfig{aspect-ratio:16/10;border:1px solid var(--line-2);border-radius:6px}
.sch-pfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 40px;margin-top:22px}
.sch-pfoot p{color:var(--mute);max-width:640px;font-size:16px}

/* why schools */
.sch-why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.sch-big{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.4vw,52px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.sch-small{margin-top:20px;color:var(--mute);font-size:clamp(17px,1.3vw,19px);max-width:470px}
.sch-facts{border-top:1px solid var(--line-2)}
.sch-facts div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.sch-facts span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c);padding-top:7px}
.sch-facts p{color:var(--mute);font-size:16px;max-width:560px}
.sch-facts b{display:block;color:var(--fg);font-family:var(--display);font-weight:600;font-size:clamp(22px,2.1vw,29px);letter-spacing:-.03em;line-height:1.1;margin-bottom:6px}

/* demos to pull apart */
.sch-dsteps{list-style:none;padding:0;margin:0 0 clamp(26px,3vw,40px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:ds}
.sch-dsteps li{counter-increment:ds;display:flex;flex-direction:column;gap:10px;padding:16px 16px 18px;border-top:2px solid var(--line-2);color:var(--mute);font-size:15.5px;line-height:1.4}
.sch-dsteps li::before{content:counter(ds);font-family:var(--mono);font-size:11px;color:var(--fg);width:24px;height:24px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center}
.sch-dcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sch-dcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;background:var(--ink-2);overflow:hidden;min-width:0}
.sch-dcard .rm{border:0;border-bottom:1px solid var(--line);border-radius:0}
.sch-dcard .b{display:flex;flex-direction:column;gap:12px;padding:18px 20px 22px;flex:1}
.sch-dcard .w{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.sch-dcard .w i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.sch-dcard p{color:var(--mute);font-size:15px;line-height:1.45}
.sch-dcard .demo{margin-top:auto}

/* classroom setup */
.sch-lab{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.sch-rows{list-style:none;padding:0;border-top:1px solid var(--line-2)}
.sch-rows li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.sch-rows li > span{color:var(--accent);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding-top:6px}
.sch-rows h3{font-size:clamp(21px,1.8vw,26px);letter-spacing:-.03em;line-height:1.1;margin-bottom:6px}
.sch-rows p{color:var(--mute);font-size:16px}
.sch-lab code,.sch-hint code{font-family:var(--mono);font-size:.84em;color:var(--fg);background:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:1px 5px;white-space:nowrap}
.sch-side{position:sticky;top:calc(var(--barh) + var(--navh) + 28px);display:flex;flex-direction:column;gap:14px;min-width:0}
.sch-pi{padding:18px 20px;border:1px dashed var(--line-2);border-radius:6px}
.sch-pi span{display:block;color:var(--play);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.sch-pi p{color:var(--mute);font-size:15px}
.sch-hint{color:var(--dim);font-size:14px}

/* accessibility */
.sch-a11y{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.sch-a11y .lede{margin-top:22px}
.sch-a11y .h2{font-size:clamp(36px,4.2vw,64px)}
.sch-agrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--line-2)}
.sch-agrid div{display:flex;flex-direction:column;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.sch-agrid b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em}
.sch-agrid span{color:var(--mute);font-size:15px;line-height:1.4}

/* for teachers */
.sch-tl{flex:0 1 460px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.sch-tl .lede{flex:none}
.sch-teach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sch-teach > *{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--line);border-radius:6px;background:var(--ink-2);overflow:hidden;min-width:0;transition:border-color .2s}
.sch-teach > *::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--c)}
.sch-teach a:hover{border-color:var(--c)}
.sch-teach b{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.03em}
.sch-teach span{color:var(--mute);font-size:15.5px}
.sch-teach em{margin-top:auto;padding-top:6px;font-style:normal;color:var(--c);font-size:12px}
.sch-teach pre{margin-top:auto;font-size:12.5px;color:var(--fg);background:#07090c;border:1px solid var(--line-2);border-radius:4px;padding:10px 12px;overflow-x:auto;white-space:pre}

@media (max-width:1280px){
  .sch-dept{grid-template-columns:minmax(0,240px) minmax(0,1fr)}
}
@media (max-width:1080px){
  .sch-hero .wrap,.sch-why,.sch-how,.sch-lab,.sch-a11y,.sch-plan{grid-template-columns:1fr}
  .sch-visual{max-width:720px}
  .sch-dept{grid-template-columns:1fr;gap:22px}
  .sch-dh{position:static}
  .sch-build{grid-template-columns:1fr}
  .sch-build .cvs{border-left:0;border-top:1px solid var(--line-2)}
  .sch-build ol{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}
  .sch-build li + li::before{display:none}
  .sch-dsteps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sch-dcards,.sch-teach{grid-template-columns:1fr 1fr}
  .sch-side{position:static}
  .sch-plan .sch-pfig{max-width:720px}
}
@media (max-width:760px){
  .sch-hero{padding-bottom:56px}
  .sch-visual{padding:0}
  .sch-note{position:relative;width:auto;margin:-28px 12px 0;right:auto;bottom:auto}
  .sch-tracks{grid-template-columns:1fr}
  .sch-track.wide{flex-direction:column}
  .sch-track.wide .sch-m{flex:none;align-self:auto;border-right:0;border-bottom:1px solid var(--line)}
  .sch-build .cvs{padding:42px 12px 14px}
  .sch-build ol{gap:8px}
  .sch-build li{grid-template-columns:16px minmax(0,1fr);gap:6px;min-height:44px;padding:5px 8px 5px 7px;font-size:13px}
  .sch-djump a{padding:7px 11px;font-size:14px}
  .sch-facts div,.sch-rows li{grid-template-columns:1fr;gap:6px}
  .sch-facts span,.sch-rows li > span{padding-top:0}
  .sch-dsteps{grid-template-columns:1fr;gap:0}
  .sch-dsteps li{flex-direction:row;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
  .sch-dsteps li::before{flex:none}
  .sch-dcards,.sch-teach,.sch-agrid{grid-template-columns:1fr}
  .sch-agrid{gap:0}
  .sch-tab{height:38px;padding:0 12px;font-size:14px}
}