:root{--ink:#171913;--paper:#f3eee5;--orange:#ff6a32;--acid:#d8ff3e;--green:#67c58c;--line:rgba(23,25,19,.22)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;margin:0}a{color:inherit}button,input{font:inherit}
header{align-items:center;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr;height:64px;padding:0 2rem}header .brand{align-items:center;background:var(--ink);border-radius:50%;color:var(--paper);display:flex;font:italic 1rem Georgia,serif;height:32px;justify-content:center;text-decoration:none;width:32px}header>a:nth-child(2),header>span,.eyebrow,.section-head>span,.section-head>p,.controls label,.controls button,.totals span,.chart-legend,.three-lessons article>span,.loop span,.next span{font-family:"SFMono-Regular",Consolas,monospace;letter-spacing:.07em;text-transform:uppercase}header>a:nth-child(2){font-size:.68rem;justify-self:center;text-decoration:none}header>span{font-size:.61rem;justify-self:end}
.hero{background:var(--orange);min-height:760px;overflow:hidden;padding:clamp(5rem,10vw,10rem) 2rem 4rem;position:relative}.eyebrow{font-size:.62rem;margin:0 0 2rem}.hero h1{font-size:clamp(4.5rem,11vw,10rem);font-weight:530;letter-spacing:-.08em;line-height:.82;margin:0}.hero h1 em{font-family:Georgia,serif;font-weight:400}.lede{font:clamp(1.4rem,2.4vw,2.1rem)/1.22 Georgia,serif;margin:3rem 0;max-width:620px}.hero-bars{align-items:flex-end;bottom:0;display:flex;gap:8px;height:62%;position:absolute;right:3%;width:46%}.hero-bars i{background:var(--ink);display:block;height:var(--h);opacity:.9;width:10%}
.lab,.crossover,.formula{padding:clamp(5rem,9vw,9rem) 2rem}.lab{background:var(--ink);color:var(--paper)}.section-head{display:grid;grid-template-columns:4rem minmax(9rem,1fr) 3fr;margin-bottom:6rem}.section-head>span,.section-head>p{font-size:.6rem;margin:.6rem 0 0}.section-head h2{font:clamp(3.2rem,6.5vw,6.5rem)/.9 Georgia,serif;letter-spacing:-.06em;margin:0}.section-head.compact{margin-bottom:4rem}
.calculator{border:1px solid rgba(243,238,229,.35);display:grid;grid-template-columns:1fr 2fr}.controls{border-right:1px solid rgba(243,238,229,.35);display:flex;flex-direction:column}.controls label{border-bottom:1px solid rgba(243,238,229,.25);display:grid;font-size:.55rem;grid-template-columns:1fr auto;padding:1.4rem}.controls output{color:var(--acid)}.controls input{accent-color:var(--acid);grid-column:1/-1;margin-top:1.2rem;width:100%}.controls button{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:flex;font-size:.52rem;gap:1rem;padding:1.4rem}.controls button i{background:var(--orange);border-radius:50%;height:22px;transition:transform .2s;width:22px}.controls button[aria-checked=true] i{background:var(--acid);transform:translateX(20px)}
.chart-side{min-width:0}.totals{border-bottom:1px solid rgba(243,238,229,.35);display:grid;grid-template-columns:2fr 1fr 1fr}.totals div{border-right:1px solid rgba(243,238,229,.35);display:flex;flex-direction:column;padding:1.4rem}.totals div:last-child{border-right:0}.totals span{font-size:.53rem;opacity:.65}.totals b{font:clamp(1.6rem,3vw,3rem) Georgia,serif;margin-top:.8rem}.totals div:first-child b{color:var(--acid)}.chart-wrap{height:430px;padding:2rem}.chart-wrap canvas{height:100%;width:100%}.chart-legend{display:flex;font-size:.52rem;gap:2rem;padding:0 2rem 2rem}.chart-legend span{align-items:center;display:flex;gap:.5rem}.chart-legend i{background:var(--orange);height:9px;width:18px}.chart-legend span:last-child i{background:var(--acid)}.caveat{font-size:.66rem;line-height:1.5;margin:2rem 0 0 auto;max-width:620px;opacity:.65}
.crossover{background:var(--acid)}.crossover-card{border-bottom:1px solid var(--ink);border-top:1px solid var(--ink);display:grid;gap:4rem;grid-template-columns:1fr 2fr;padding:3rem 0}.crossover-number{font:clamp(4rem,9vw,9rem) Georgia,serif;letter-spacing:-.08em}.crossover-card h3{font:clamp(2rem,4vw,4rem)/1 Georgia,serif;margin:0}.crossover-card p{line-height:1.5;margin-top:2rem}.three-lessons{border:1px solid var(--ink);display:grid;grid-template-columns:repeat(3,1fr);margin-top:6rem}.three-lessons article{border-right:1px solid var(--ink);min-height:330px;padding:1.5rem}.three-lessons article:last-child{border-right:0}.three-lessons article>span{font-size:.53rem}.three-lessons h3{font:2.1rem Georgia,serif;margin:5rem 0 1rem}.three-lessons p{font-size:.85rem;line-height:1.5}
.formula{background:var(--paper)}.loop{align-items:center;border-bottom:1px solid var(--ink);border-top:1px solid var(--ink);display:flex;justify-content:space-between;padding:2rem 1rem}.loop div{display:flex;flex-direction:column;gap:.8rem}.loop span{font-size:.54rem}.loop b{font:1.6rem Georgia,serif}.loop i{font:2rem Georgia,serif}.big-copy{font:clamp(2.5rem,5vw,5rem)/1 Georgia,serif;letter-spacing:-.05em;margin:6rem 0 6rem 34%;max-width:850px}.resource{border-top:1px solid var(--ink);margin-left:50%;padding-top:1rem}.resource a{font-size:.78rem}.next{border-top:1px solid var(--ink);display:flex;flex-direction:column;margin-top:7rem;padding-top:2rem;text-decoration:none}.next span{font-size:.55rem}.next b{font:clamp(2rem,4vw,4rem) Georgia,serif;margin-top:1rem}
@media(max-width:800px){header{grid-template-columns:auto 1fr;padding:0 1rem}header>a:nth-child(2){justify-self:end}header>span{display:none}.hero,.lab,.crossover,.formula{padding-left:1rem;padding-right:1rem}.hero{min-height:700px}.hero h1{font-size:clamp(4rem,20vw,6.7rem)}.hero-bars{height:34%;opacity:.55;width:70%}.section-head{grid-template-columns:2.5rem 1fr}.section-head h2{grid-column:1/-1;margin-top:2rem}.calculator{grid-template-columns:1fr}.controls{border-bottom:1px solid rgba(243,238,229,.35);border-right:0}.totals{grid-template-columns:1fr 1fr}.totals div:first-child{grid-column:1/-1}.chart-wrap{height:330px;padding:1rem}.crossover-card{grid-template-columns:1fr;gap:2rem}.three-lessons{grid-template-columns:1fr}.three-lessons article{border-bottom:1px solid var(--ink);border-right:0;min-height:280px}.three-lessons article:last-child{border-bottom:0}.loop{align-items:flex-start;flex-direction:column;gap:1.5rem}.loop i{transform:rotate(90deg)}.big-copy,.resource{margin-left:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.controls button i{transition:none}}