/* Website around the decks. Palette and typeface come from the decks' theme
   (programs/engineering/sessions/01-core-concepts/build/build_deck.js); layout is web-native.
   Breakpoints: phone < 640px, tablet 640 to 1023px, desktop >= 1024px. */
:root{
  color-scheme:light;
  --paper:#FBFBF8; --stone:#EDECE6; --ink:#1B1D23; --ink2:#50535D; --ink3:#7C808A; --hair:rgba(27,29,35,.14);
  --sky:#CFE2FF; --sky2:#E9F2FF; --lemon:#FFE88A; --mint:#BFEFD4; --pink:#FFCFDA; --peach:#FFD8B5; --lilac:#E2DCFF;
  --sans:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,sans-serif;
  --max:1200px; --gutter:clamp(20px,5vw,64px); --space:clamp(80px,10vw,144px);
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{background:var(--paper);color:var(--ink);font:400 clamp(17px,.3vw + 16px,19px)/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2.5px}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:4px}
b{font-weight:700}
p{max-width:68ch;text-wrap:pretty}
h1,h2,h3{font-weight:800;line-height:1.08;letter-spacing:-.03em;font-variation-settings:"wdth" 90;text-wrap:balance}
h2{font-size:clamp(32px,2.2vw + 22px,52px);margin-bottom:clamp(28px,3vw,48px)}
h3{font-size:clamp(22px,.6vw + 18px,28px);letter-spacing:-.02em;line-height:1.15}

.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:12px}
.skip:focus{left:var(--gutter);z-index:10;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:8px}

/* Header */
.site-head{border-bottom:1px solid var(--hair)}
.head-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-block:16px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--lemon);font-weight:800;font-size:14px;letter-spacing:-.03em}
.nav{display:flex;flex-wrap:wrap;gap:4px 28px}
.nav a{color:var(--ink2);font-weight:500;font-size:16px;text-decoration:none;padding-block:6px}
.nav a:hover{color:var(--ink);text-decoration:underline}

/* Tokens: words on pastel chips, the decks' signature */
.tk{background:var(--c);padding:0 .1em;border-radius:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-decoration:none}
.caret{display:inline-block;width:.07em;height:.8em;margin-left:.08em;vertical-align:-.06em;background:var(--ink);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .stream .tk{animation:emit .01s steps(1,end) both;animation-delay:calc(var(--i) * 85ms + 200ms)}
  .stream .caret{animation:blink 1s steps(1,end) 4 forwards;animation-delay:calc(var(--i) * 85ms + 200ms)}
}
@keyframes emit{from{opacity:0}to{opacity:1}}
@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:0}}

/* Hero */
.hero{padding-block:clamp(56px,8vw,128px) 0}
.hero-title{font-size:clamp(42px,5vw + 18px,100px);line-height:1.28;letter-spacing:-.04em;font-variation-settings:"wdth" 88;max-width:12.5em}
.page-title{font-size:clamp(40px,4vw + 18px,84px);line-height:1.28;letter-spacing:-.04em;font-variation-settings:"wdth" 88}
.hero-lead{margin-top:clamp(20px,2.4vw,36px);max-width:34em;font-size:clamp(19px,.7vw + 15px,24px);line-height:1.45;color:var(--ink2)}

/* Buttons */
.actions{display:flex;flex-wrap:wrap;gap:12px}
.hero .actions{margin-top:clamp(28px,3vw,40px)}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border:1.5px solid var(--ink);border-radius:12px;font-weight:600;font-size:17px;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--stone)}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:#363944}

/* Sections */
.section{padding-top:var(--space)}
.section--tight{padding-top:clamp(56px,7vw,96px)}

/* Programs */
.programs{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:start}
.program{border-radius:22px;padding:clamp(24px,3vw,44px)}
.program h3{margin-bottom:12px}
.program h3 a{text-decoration:none}
.program h3 a:hover{text-decoration:underline}
.program--live{background:var(--sky2)}
.program--live > p{margin-bottom:24px}
.program--soon{border:1.5px dashed rgba(27,29,35,.3);color:var(--ink2)}
.program--soon h3{color:var(--ink)}
.badge{display:inline-block;margin-bottom:16px;padding:3px 12px;border-radius:999px;background:var(--lemon);color:var(--ink);font-weight:600;font-size:15px}
.sessions{list-style:none;margin-bottom:28px;border-top:1px solid var(--hair)}
.sessions li{border-bottom:1px solid var(--hair)}
.sessions a{display:flex;gap:12px;padding:11px 0;font-weight:600;font-size:17px;line-height:1.3;text-decoration:none}
.sessions a:hover .st{text-decoration:underline}
.sn{min-width:1.5em;color:var(--ink3);font-weight:500;font-variant-numeric:tabular-nums}

/* How it runs */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;counter-reset:step}
.step{position:relative;padding-top:56px}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:0;left:0;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:700;font-size:16px}
.step::after{content:"";position:absolute;top:19px;left:48px;right:-18px;height:1.5px;background:var(--hair)}
.step:last-child::after{display:none}
.step--key::before{background:var(--lemon)}
.step h3{margin-bottom:8px;font-size:20px}
.step p{color:var(--ink2);font-size:16px;line-height:1.5}
.result{margin-top:clamp(40px,5vw,72px);max-width:46em}
.result p{color:var(--ink2)}
.result .result-main{margin-bottom:12px;color:var(--ink);font-weight:700;font-size:clamp(22px,1.3vw + 15px,32px);line-height:1.25;letter-spacing:-.02em}

/* About */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.portrait{border-radius:18px;box-shadow:0 0 0 2.5px var(--ink),8px 8px 0 var(--ink);margin:0 8px 8px 0}
.bio{list-style:none;display:grid;gap:16px}
.bio li{position:relative;padding-left:20px;max-width:62ch}
.bio li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--ink)}
.why{margin-top:32px;padding-left:20px;border-left:4px solid var(--lemon);font-size:clamp(19px,.5vw + 16px,22px);font-weight:500;line-height:1.45}

/* Contact */
.contact{margin-top:var(--space);padding-block:clamp(64px,8vw,112px);background:var(--stone)}
.contact h2{margin-bottom:16px}
.contact-lead{font-size:clamp(19px,.7vw + 15px,24px);color:var(--ink2)}
.contact-mail{margin-top:clamp(20px,2.4vw,32px);font-weight:800;font-size:clamp(26px,2.6vw + 14px,56px);line-height:1.3;letter-spacing:-.03em;font-variation-settings:"wdth" 90;overflow-wrap:anywhere}
.contact-mail a:hover{text-decoration:underline;text-decoration-thickness:3px}
.contact-note{margin-top:clamp(20px,2.4vw,32px);color:var(--ink2);font-size:16px}

/* Footer */
.site-foot{background:var(--stone);border-top:1px solid var(--hair)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:24px;color:var(--ink2);font-size:15px}

/* Program page */
.facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:16px clamp(28px,4vw,64px);margin-top:clamp(28px,3vw,44px)}
.facts dt{color:var(--ink2);font-size:15px}
.facts dd{font-weight:650;font-size:18px;line-height:1.3}
.curriculum{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;max-width:860px;margin-bottom:clamp(24px,3vw,40px);padding:clamp(20px,2.4vw,32px);border-radius:22px;background:var(--sky2);text-decoration:none}
.curriculum:hover .ct{text-decoration:underline}
.ct{font-weight:800;font-size:clamp(22px,.8vw + 17px,30px);letter-spacing:-.02em;font-variation-settings:"wdth" 90}
.cs{grid-column:1;color:var(--ink2)}
.cm{grid-column:2;grid-row:1 / span 2;align-self:center;color:var(--ink2);font-size:15px;white-space:nowrap}
/* Sequences stay in one column at every width: they read top to bottom, never across. */
.deck-list{list-style:none;max-width:860px;border-top:1px solid var(--hair)}
.deck-list a{display:grid;grid-template-columns:2em minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:16px 4px;border-bottom:1px solid var(--hair);text-decoration:none}
.deck-list a:hover .dt{text-decoration:underline}
.dn{color:var(--ink3);font-variant-numeric:tabular-nums}
.dt{font-weight:650;font-size:clamp(18px,.4vw + 16px,21px);line-height:1.3}
.dc{color:var(--ink3);font-size:14px;white-space:nowrap}
.hint{margin-top:28px;color:var(--ink2);font-size:15px}
kbd{padding:.1em .4em;border-radius:.3em;background:var(--stone);font:500 .85em ui-monospace,'SF Mono',Menlo,monospace}

/* Tablet */
@media (max-width:1023px){
  .programs{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding:0 0 28px 58px;min-height:66px}
  .step::after{top:46px;bottom:6px;left:18px;right:auto;width:1.5px;height:auto}
  .step:last-child{padding-bottom:0}
  .step h3{padding-top:6px}
  .about{grid-template-columns:1fr}
  .portrait{max-width:520px}
  .facts{grid-template-columns:repeat(2,auto)}
}

/* Phone */
@media (max-width:639px){
  .head-row{flex-direction:column;align-items:flex-start}
  .nav{gap:2px 20px}
  .nav a{font-size:15px}
  .about{grid-template-columns:1fr}
  .curriculum{grid-template-columns:1fr}
  .cm{grid-column:1;grid-row:auto}
  .facts{grid-template-columns:1fr 1fr}
  .btn{flex:1 1 auto;justify-content:center}
}