@font-face{font-family:"Fraunces";font-weight:600;font-display:swap;src:url(fonts/fraunces-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url(fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}
:root{--bg:var(--paper-50);--surface:var(--paper-100);--text:var(--ink-900);--muted:var(--stone-600);--accent:var(--rust-500);--rule:var(--rule-light);--link:var(--rust-700);--btn:var(--rust-700);--on-btn:var(--paper-50);color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:var(--ink-900);--surface:var(--ink-700);--text:var(--paper-50);--muted:var(--stone-300);--accent:var(--rust-300);--rule:var(--rule-dark);--link:var(--rust-300);--btn:var(--rust-300);--on-btn:var(--ink-900);color-scheme:dark}.logo-light{display:none!important}.logo-dark{display:block!important}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--text-lg)/var(--lh-lg) var(--font-body)}
a{color:var(--link);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--grid-gutter)}
section{padding:var(--space-8) 0;border-top:1px solid var(--rule)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0}
h1{font-size:clamp(2.4rem,6vw,var(--text-5xl));line-height:1.08;letter-spacing:var(--track-tightest);max-width:16ch}
h2{font-size:var(--text-3xl);line-height:var(--lh-3xl);letter-spacing:var(--track-tight);margin-bottom:var(--space-3)}
h3{font-size:var(--text-xl);line-height:var(--lh-xl);margin-bottom:var(--space-2)}
p{margin:0 0 var(--space-3);max-width:var(--prose-max)}
.lead{color:var(--muted);font-size:var(--text-xl);line-height:var(--lh-xl);max-width:36ch}
header{padding:var(--space-5) 0 var(--space-8)}
.logo{height:56px;width:auto;display:block}
.logo-dark{display:none}
.hero{margin-top:var(--space-8)}
.video{display:block;position:relative;width:100%;max-width:960px;margin-top:var(--space-7);aspect-ratio:16/9;border:1px solid var(--rule);border-radius:var(--radius-surface);overflow:hidden;padding:0;background:var(--surface);cursor:pointer}
.more-video{margin-top:var(--space-4);color:var(--muted);font-size:var(--text-base)}
.video.tall{aspect-ratio:9/16;max-width:360px}
.hero.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-7);align-items:start}.hero.split .video{margin-top:0}
@media (max-width:860px){.hero.split{grid-template-columns:1fr}.hero.split .video{margin-top:var(--space-4)}}
@media (max-width:640px){.hero-video{aspect-ratio:9/16;max-width:360px}}
.kicker{font-size:var(--text-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-3)}
.lesson-nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-6)}
ul.lessons{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-4);max-width:var(--prose-max)}
ul.lessons a{font-weight:600}ul.lessons .n{color:var(--muted);font-weight:400;margin-right:var(--space-2)}ul.lessons .hook{color:var(--muted)}
ul.need{padding-left:1.2em;max-width:var(--prose-max);margin:var(--space-3) 0 var(--space-5)}ul.need li{margin-bottom:var(--space-2)}ul.need li::marker{color:var(--accent)}
.later{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);align-items:center;margin:0 0 var(--space-6)}.later p{margin:0}
.video img{width:100%;height:100%;object-fit:cover;display:block}
.play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:var(--btn)}
.play::after{content:"";position:absolute;left:29px;top:22px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--on-btn)}
.hero .lead{margin:var(--space-4) 0 var(--space-5)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.btn{display:inline-block;background:var(--btn);color:var(--on-btn);font-weight:600;padding:var(--space-3) var(--space-5);border-radius:var(--radius-control);text-decoration:none}
button.btn{font:600 var(--text-base)/var(--lh-base) var(--font-body);border:0;cursor:pointer}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin:var(--space-5) 0}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-surface);padding:var(--space-5)}
.panel .label{font-size:var(--text-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-3)}
.panel blockquote{margin:0;font:var(--text-base)/var(--lh-base) var(--font-mono)}
.panel.draft blockquote{color:var(--muted)}
mark{background:none;color:inherit;border-bottom:3px solid var(--accent)}
ul.steps{list-style:none;padding:0;margin:var(--space-4) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
ul.steps li,ul.stages li{border-top:3px solid var(--accent);padding-top:var(--space-3)}
ul.stages{list-style:none;padding:0;margin:var(--space-4) 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
ul.who{padding-left:1.2em;max-width:var(--prose-max)}
ul.who li{margin-bottom:var(--space-2)}
ul.who li::marker{color:var(--accent)}
.code{position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-control);margin:var(--space-3) 0 var(--space-5)}
.code pre{margin:0;padding:var(--space-4);padding-right:var(--space-9);overflow-x:auto;font:var(--text-sm)/var(--lh-sm) var(--font-mono);white-space:pre-wrap}
.copy{position:absolute;top:var(--space-2);right:var(--space-2);font:600 var(--text-sm)/1 var(--font-body);background:var(--btn);color:var(--on-btn);border:0;border-radius:var(--radius-control);padding:var(--space-2) var(--space-3);cursor:pointer}
details{border-top:1px solid var(--rule);padding:var(--space-3) 0}
summary{cursor:pointer;font-weight:600}
.callout{border-left:4px solid var(--accent);padding:var(--space-3) var(--space-4);background:var(--surface);border-radius:0 var(--radius-control) var(--radius-control) 0;max-width:var(--prose-max)}
footer{border-top:1px solid var(--rule);padding:var(--space-6) 0;color:var(--muted);font-size:var(--text-base)}
footer nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-3)}
@media (max-width:860px){.compare,ul.stages{grid-template-columns:1fr}ul.steps{grid-template-columns:1fr 1fr}section{padding:var(--space-7) 0}}
@media (max-width:480px){ul.steps{grid-template-columns:1fr}h2{font-size:var(--text-2xl);line-height:var(--lh-2xl)}}
.steps+p{margin-top:var(--space-5)}