@font-face{font-family:Newsreader;src:url("../assets/fonts/Newsreader-Variable.ttf") format("truetype");font-style:normal;font-weight:300 800;font-display:swap}
@font-face{font-family:Newsreader;src:url("../assets/fonts/Newsreader-Italic-Variable.ttf") format("truetype");font-style:italic;font-weight:300 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../assets/fonts/InstrumentSans-Variable.ttf") format("truetype");font-style:normal;font-weight:400 700;font-display:swap}
:root{color-scheme:light;--paper:#F5F3EF;--ink:#262721;--muted:#615B53;--rule:#CBC5BA;--clay:#A65B3E;--water:#234858;--olive:#617064;--blue:#174BD2;--blue-hover:#10399E;--white:#F8F7F2;--measure:1120px;font-family:"Instrument Sans",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.6}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}button,input,textarea{font:inherit}a{color:inherit;text-underline-offset:.18em}button{min-height:44px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.skip-link{position:absolute;top:8px;left:8px;z-index:5;transform:translateY(-150%);padding:.6rem 1rem;background:var(--white);border:2px solid var(--blue)}.skip-link:focus{transform:none}
.site-head,.site-foot{max-width:var(--measure);margin:auto;padding:1.25rem clamp(1rem,4vw,3.25rem)}.site-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rule);gap:1rem}.wordmark{text-decoration:none;font-weight:700;letter-spacing:.07em;font-size:.88rem}.wordmark span{font-weight:400;letter-spacing:0;color:var(--muted)}.head-note,.eyebrow,.step-tag,.scenario-label{font-size:.875rem}.head-note{color:var(--muted)}
main{max-width:var(--measure);margin:auto;padding:0 clamp(1rem,4vw,3.25rem)}.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:clamp(2rem,7vw,6.5rem);align-items:center;padding:clamp(3rem,8vw,7rem) 0 clamp(3rem,7vw,6rem);border-bottom:1px solid var(--rule)}.hero-copy,.hero-art,.section-intro,.setup-step>div{min-width:0}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--muted);margin:0 0 .8rem}.hero h1{font:500 clamp(3.2rem,7vw,5.8rem)/.99 Newsreader,Georgia,serif;letter-spacing:-.035em;max-width:10ch;margin:0 0 1.5rem}.dek{font:400 clamp(1.15rem,2vw,1.35rem)/1.5 Newsreader,Georgia,serif;max-width:43ch;margin:0 0 2rem}.scope-note{border-left:3px solid var(--clay);padding:.3rem 0 .3rem 1rem;color:var(--muted);max-width:52ch;margin:0}.scope-note strong{color:var(--ink)}.hero-art{margin:0}.hero-art img{width:100%;height:auto;display:block}.art-caption{margin:.65rem 0 0;text-align:right;color:var(--muted);font-size:.875rem}
.lesson-section{padding:clamp(3rem,7vw,6.5rem) 0;border-bottom:1px solid var(--rule)}.section-intro{max-width:58ch}.section-intro h2,.desk-reference h2{font:500 clamp(2.2rem,4vw,3.7rem)/1.04 Newsreader,Georgia,serif;letter-spacing:-.025em;margin:0 0 1.1rem}.section-intro p{margin:.65rem 0}.small-note{font-size:.9375rem;color:var(--muted)}.section-intro-wide{max-width:68ch}.cutaway-wrap{margin:2.5rem 0 1rem}.cutaway-art{background:#EBE7DF;min-height:240px;display:grid;place-items:center;padding:1rem}.cutaway-art svg{width:min(100%,780px);height:auto;display:block}.cutaway-art #fw-reservoir,.cutaway-art #fw-wick,.cutaway-art #fw-mix,.cutaway-art #fw-roots{transition:opacity 180ms ease}.cutaway-art[data-part] #fw-reservoir,.cutaway-art[data-part] #fw-wick,.cutaway-art[data-part] #fw-mix,.cutaway-art[data-part] #fw-roots{opacity:.38}.cutaway-art[data-part="reservoir"] #fw-reservoir,.cutaway-art[data-part="wick"] #fw-wick,.cutaway-art[data-part="mix"] #fw-mix,.cutaway-art[data-part="roots"] #fw-roots{opacity:1}.path-control{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.5rem 0}.control-prompt{margin:0;color:var(--muted);font-size:.9375rem}.path-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.path-button,.text-button{border:1px solid var(--ink);background:transparent;color:var(--ink);padding:.55rem .8rem;border-radius:2px;cursor:pointer}.path-button[aria-pressed="true"]{background:var(--water);color:var(--white);border-color:var(--water)}.part-explanations{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}.part-explanations li{border-top:2px solid var(--rule);padding-top:.7rem}.part-explanations h3,.setup-step h3,.reference-grid h3,.model-response h3{font:500 1.35rem/1.2 Newsreader,Georgia,serif;margin:.15rem 0 .4rem}.part-explanations p{margin:0;color:#3F403A}.noscript-note{background:#EAE5DB;padding:.8rem 1rem}
.setup-list{margin-top:2.5rem;border-top:1px solid var(--rule)}.setup-step{display:grid;grid-template-columns:minmax(190px,.62fr) minmax(0,1.38fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:center;padding:1.5rem 0;border-bottom:1px solid var(--rule)}.setup-step img{display:block;width:100%;max-height:210px;object-fit:contain;background:#EBE7DF}.step-tag{margin:0 0 .3rem;color:var(--clay);font-weight:700;text-transform:uppercase;letter-spacing:.08em}.setup-step h3{font-size:1.6rem;margin:0 0 .4rem}.setup-step p:last-child{margin:0;max-width:65ch}
.practice .section-intro{margin-bottom:2.5rem}.check-form{max-width:850px;padding:1.45rem 0 1.8rem;border-top:1px solid var(--rule)}.check-form fieldset{border:0;padding:0;margin:0}.check-form legend{font:500 clamp(1.35rem,2.5vw,1.8rem)/1.25 Newsreader,Georgia,serif;margin:0 0 1.1rem;max-width:45ch}.scenario-label{display:block;font:700 .8125rem/1.4 "Instrument Sans",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}.choice{display:flex;align-items:flex-start;gap:.7rem;padding:.65rem .7rem;max-width:780px;cursor:pointer}.choice:hover{background:#ECE9E2}.choice input{width:1.15rem;height:1.15rem;flex:0 0 auto;margin:.22rem 0 0;accent-color:var(--blue)}.submit-button{background:var(--blue);color:var(--white);border:0;border-radius:2px;padding:.65rem 1rem;font-weight:700;cursor:pointer;margin-top:.65rem}.submit-button:hover:not(:disabled){background:var(--blue-hover)}.submit-button:disabled{cursor:not-allowed;background:#615B53;color:#fff}.feedback{min-height:1.6em;margin:.65rem 0 0;font-weight:600}.feedback[data-kind="correct"]{color:#315440}.feedback[data-kind="incorrect"],.feedback[data-kind="error"]{color:#8A3928}.practice-note{font-size:.875rem;color:var(--muted);margin:0}
.teachback .section-intro{max-width:70ch;margin-bottom:2rem}.teachback form,.teachback>#teachback-form{max-width:760px}.teachback label{display:block;font-weight:700;margin-bottom:.5rem}.teachback textarea{display:block;width:100%;min-height:130px;resize:vertical;border:1px solid #777267;border-radius:2px;padding:.8rem;background:#FCFBF8;color:var(--ink);line-height:1.55}.teachback textarea::placeholder{color:#69645C}.teachback-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.7rem}.text-button{font-weight:600}.model-response{max-width:760px;margin-top:2.2rem;border-top:2px solid var(--water);padding-top:1.2rem}.model-response summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer;color:var(--water)}.model-content{padding-top:.7rem}.model-response blockquote{font:italic 1.3rem/1.5 Newsreader,Georgia,serif;margin:1rem 0 1.5rem;padding-left:1.1rem;border-left:3px solid var(--clay)}.self-check{padding-left:1.3rem}.self-check li{margin:.35rem 0}
.desk-reference{padding:clamp(2.5rem,6vw,5rem) 0}.desk-reference h2{font-size:clamp(2rem,3.4vw,3rem)}.reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:1.4rem}.reference-grid>div{border-top:1px solid var(--rule);padding-top:.7rem}.reference-grid p{margin:0}.site-foot{border-top:1px solid var(--ink);font-size:.9375rem}.status-line{max-width:75ch;margin:.3rem 0 1rem}.footer-links{display:flex;flex-wrap:wrap;gap:.6rem 1.3rem;padding:.8rem 0 1rem;border-bottom:1px solid var(--rule)}.footer-links a,.sources a{color:var(--water)}.sources{padding:1rem 0}.sources summary{font-weight:700;cursor:pointer;min-height:44px;display:flex;align-items:center}.sources ul{padding-left:1.3rem}.sources li{margin:.45rem 0}.sources p{font-size:.875rem;color:var(--muted)}.footer-credit{font-size:.8125rem;color:var(--muted);margin:1.5rem 0 0}
@media(max-width:760px){.site-head{align-items:flex-start;flex-direction:column;gap:.15rem}.hero{grid-template-columns:minmax(0,1fr);gap:2rem;padding-top:3rem}.hero h1{max-width:12ch}.hero-art{max-width:480px}.path-control{align-items:flex-start;flex-direction:column}.part-explanations{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}.setup-step{grid-template-columns:minmax(0,1fr);gap:1rem}.setup-step img{max-height:180px}.reference-grid{grid-template-columns:minmax(0,1fr);gap:1.1rem}.reference-grid>div{padding-top:.6rem}.cutaway-art{min-height:160px;padding:.5rem}}
@media(max-width:390px){.part-explanations{grid-template-columns:minmax(0,1fr)}.path-buttons{width:100%}.path-button{flex:1 1 auto}.teachback-actions{align-items:stretch;flex-direction:column}.teachback-actions button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wick-analogy{display:grid;grid-template-columns:minmax(100px,.65fr) minmax(0,1.35fr);align-items:center;gap:1.25rem;margin:1.8rem 0 0}.wick-analogy img{display:block;width:100%;height:auto}.wick-analogy figcaption{font-size:1rem;line-height:1.6;color:var(--muted)}.wick-analogy strong{display:block;color:var(--ink);margin-bottom:.4rem}.submit-button:disabled{background:var(--muted);cursor:default}.path-control[hidden],button[hidden]{display:none}@media(max-width:480px){.wick-analogy{grid-template-columns:1fr;gap:.5rem}.wick-analogy img{max-width:220px}}

/* Keep the setup geometry readable; do not squeeze diagrams into small thumbnails. */
.setup-step{grid-template-columns:minmax(300px,.95fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,3rem)}
.setup-step img{height:auto;max-height:none;width:100%;background:transparent}
@media(max-width:760px){.setup-step{grid-template-columns:minmax(0,1fr);gap:1.2rem}.setup-step img{max-width:460px;max-height:none;margin-inline:auto}}
