:root { color-scheme: light; --ink:#133b35; --muted:#5f6f68; --paper:#f3f5eb; --card:#fffdf5; --line:#b9c5b9; --gold:#efb64d; --mint:#96b8a8; font-family:Aptos,"Trebuchet MS",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; font-size:1rem; line-height:1.5; background-image:linear-gradient(rgba(19,59,53,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(19,59,53,.045) 1px,transparent 1px); background-size:32px 32px; }
a { color:inherit; text-underline-offset:4px; }
button,input,select { font:inherit; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.masthead,main,footer { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.masthead { min-height:82px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); color:var(--muted); font-size:.9rem; }
.brand { color:var(--ink); text-decoration:none; font-size:1.08rem; font-weight:800; }
.brand span { color:var(--gold); letter-spacing:-4px; margin-right:12px; }
.intro { padding:58px 0 42px; display:grid; grid-template-columns:1.35fr .65fr; gap:60px; align-items:end; }
.eyebrow { margin:0 0 10px; color:var(--muted); font-weight:700; }
h1 { margin:0; font-size:clamp(3rem,7vw,6.2rem); line-height:.92; letter-spacing:-.065em; }
.intro>p { margin:0 0 8px; color:var(--muted); font-size:1.08rem; max-width:34ch; }
.calculator-shell { display:grid; grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr); border:1px solid var(--ink); background:var(--card); box-shadow:14px 14px 0 #cddc98; }
.controls { padding:34px; display:grid; gap:20px; border-right:1px solid var(--line); }
fieldset { padding:0; margin:0; border:0; }
legend,.controls>label { display:grid; gap:7px; font-weight:700; }
label span { color:var(--muted); font-weight:500; font-size:.82rem; }
.segmented { margin-top:8px; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); }
.segmented label { position:relative; padding:11px; text-align:center; cursor:pointer; }
.segmented label+label { border-left:1px solid var(--line); }
.segmented input { accent-color:var(--ink); margin-right:7px; }
.measure-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.measure-grid label,#circle-fields label { display:grid; gap:7px; font-weight:700; }
input,select { width:100%; min-height:46px; padding:9px 11px; border:1px solid #87988f; border-radius:0; background:#fff; color:var(--ink); }
.field-note { color:var(--muted); font-size:.78rem; font-weight:500; line-height:1.45; }
.primary { min-height:49px; border:0; background:var(--ink); color:#fff; font-weight:800; cursor:pointer; }
.primary:hover { background:#205b51; }
.error { margin:0; color:#9c2432; }
.result { padding:38px 42px; background:#fffdf5; }
.result-head { display:flex; justify-content:space-between; gap:20px; color:var(--muted); }
.result-head span { color:var(--ink); font-weight:800; }
.hero-result { padding:42px 0 34px; display:flex; align-items:baseline; gap:16px; border-bottom:1px solid var(--ink); }
.hero-result strong { font-size:clamp(4.4rem,9vw,7.8rem); line-height:.8; letter-spacing:-.075em; }
.hero-result span { color:var(--muted); font-weight:700; }
.secondary-results { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin:24px 0; }
.secondary-results div { padding:22px; display:grid; background:var(--paper); }
.secondary-results strong { font-size:2rem; }
.secondary-results span { color:var(--muted); }
.cut-line { border-top:1px dashed var(--line); margin:32px -42px 22px; }
dl { margin:0; }
dl div { display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-bottom:1px solid #dde3da; }
dt { color:var(--muted); }
dd { margin:0; font-weight:700; text-align:right; }
.order-note { margin:24px 0 0; color:var(--muted); font-size:.88rem; }
.guide { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; padding:64px 0; }
.guide h2 { font-size:1.05rem; margin:0; }
.guide p { color:var(--muted); margin:9px 0 0; font-size:.92rem; }
.evidence { padding:50px; border:1px solid var(--ink); background:var(--card); box-shadow:9px 9px 0 #d9e3b4; }
.evidence-heading { display:grid; grid-template-columns:.72fr 1.28fr; gap:34px; align-items:end; padding-bottom:28px; border-bottom:1px solid var(--line); }
.evidence-heading p { margin:0; color:var(--muted); font-weight:700; }
.evidence-heading h2 { margin:0; font-size:clamp(1.8rem,4vw,3.1rem); line-height:1; letter-spacing:-.035em; }
.evidence-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-top:32px; }
.evidence h3 { margin:0 0 14px; font-size:1rem; }
.evidence article>p { color:var(--muted); }
.formula { padding:17px 19px; border-left:5px solid var(--gold); background:#f3f5eb; color:var(--ink)!important; font-weight:800; }
.worked-example { margin:0; }
.worked-example div { padding:9px 0; }
.source-note { margin:32px 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; }
.faq { max-width:820px; margin:0 auto; padding:70px 0 54px; }
.faq h2 { margin:0 0 22px; font-size:1.8rem; }
.faq details { border-top:1px solid var(--line); }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { padding:18px 0; font-weight:800; cursor:pointer; }
.faq details p { margin:-5px 0 20px; color:var(--muted); }
.related-tools { display:grid; grid-template-columns:1.1fr 1fr 1fr; border-top:1px solid var(--ink); }
.related-tools>div,.related-tools>a { padding:27px 24px; }
.related-tools>div { padding-left:0; }
.related-tools>a { display:grid; align-content:center; gap:5px; border-left:1px solid var(--line); text-decoration:none; }
.related-tools>a:hover strong { text-decoration:underline; text-underline-offset:4px; }
.related-tools h2,.related-tools p { margin:0; }
.related-tools p,.related-tools span { color:var(--muted); font-size:.84rem; }
footer { min-height:90px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }
[hidden] { display:none!important; }
@media(max-width:760px){ .masthead,main,footer{width:calc(100% - 30px)} .masthead>span{max-width:150px;text-align:right} .intro{grid-template-columns:1fr;gap:24px;padding-top:38px} .calculator-shell{grid-template-columns:1fr;box-shadow:8px 8px 0 #cddc98} .controls{border-right:0;border-bottom:1px solid var(--line);padding:24px} .result{padding:30px 24px} .cut-line{margin-inline:-24px} .guide,.evidence-heading,.evidence-grid,.related-tools{grid-template-columns:1fr}.guide{gap:28px}.evidence{padding:30px 24px;box-shadow:7px 7px 0 #d9e3b4}.evidence-heading{gap:10px}.evidence-grid{gap:24px}.faq{padding-block:56px 44px}.related-tools>div,.related-tools>a{padding:21px 0}.related-tools>a{border-left:0;border-top:1px solid var(--line)} footer{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px} }
@media(max-width:520px){ .secondary-results{grid-template-columns:1fr} }
@media(max-width:430px){ .measure-grid{grid-template-columns:1fr} .hero-result{display:grid;gap:8px} .result-head{display:grid;gap:4px} }