/* My Grade Calculator, "Paper & Pen" design system.
   Fonts are self hosted (latin subset) so no request goes to a third party. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-italic.woff2) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/geist.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/geist-mono.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/caveat-700.woff2) format("woff2")}

:root{
  color-scheme:light;
  /* Palette */
  --paper:#F6F3EA;--card:#FFFDF7;--sunk:#EEEADD;--ink:#1A1E19;--ink-2:#464C44;--muted:#646A61;--line:#DED8C7;
  --green:#1F4A36;--green-hover:#163729;--green-soft:#DDE8DF;
  --marker:#F2D45C;--marker-soft:#F9EBA8;--pen:#B8402B;
  --board:#14231C;--board-text:#F6F3EA;--board-muted:#A9B5AC;--board-line:rgba(246,243,234,.14);
  /* Tints for cover tiles: background, then ink */
  --sage:#DDE8DF;--sage-ink:#1F4A36;--butter:#F6E7B8;--butter-ink:#6B4E0B;--sky:#DCE7F0;--sky-ink:#24506E;--clay:#F6DCC8;--clay-ink:#7A3412;
  /* Grade colors, set as backgrounds by the calculators with white text (all 4.5:1 or better) */
  --a:#2F6B4F;--b:#3B6E8F;--c:#9A6B12;--d:#B4541F;--f:#B23A2B;
  /* Aliases the page scripts use */
  --bg:var(--paper);--text:var(--ink);--accent:var(--green);--accent-soft:var(--green-soft);
  /* Type */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --hand:"Caveat","Bradley Hand",cursive;
  --radius:20px;--radius-sm:12px;
  --shadow:0 30px 60px -30px rgba(20,35,28,.35);
  --wide:1200px;--read:860px;
}
:root[data-theme="dark"]{color-scheme:dark;
  --paper:#111A15;--card:#18231D;--sunk:#1F2C25;--ink:#ECE8DC;--ink-2:#C5C9BF;--muted:#A3AB9F;--line:#2C3A32;
  --green:#8FC7A6;--green-hover:#A9D8BC;--green-soft:#1E3529;
  --marker-soft:#4A4220;--pen:#E8836E;
  --board:#0B120E;
  --sage:#1E3529;--sage-ink:#A9D8BC;--butter:#3A3218;--butter-ink:#F0D58A;--sky:#1B2B38;--sky-ink:#A9CBE4;--clay:#3A2418;--clay-ink:#F0B48E;
  --shadow:0 30px 60px -30px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--green-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* ---------- Page header (site pages: contact, privacy, terms, 404) ---------- */
body>header:not(.site-header){max-width:var(--read);margin:0 auto;padding:72px 24px 32px;text-align:center}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.75rem,6vw,4.75rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 18px}
.lede{color:var(--ink-2);font-size:clamp(1.05rem,1.6vw,1.2rem);max-width:560px;margin:0 auto}
main{display:block;max-width:var(--read);margin:0 auto;padding:0 24px}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin-bottom:24px}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 16px}
h3{font-size:1.2rem;font-weight:600;letter-spacing:-.01em}

/* ---------- Calculator hero ---------- */
.hero{max-width:880px;margin:0 auto;padding:64px 24px 72px;display:flex;flex-direction:column;align-items:center;gap:36px}
.hero-copy{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.hero-copy h1{margin:0;font-size:clamp(2.8rem,6vw,4.75rem);line-height:1}
.hero-copy .lede{margin:0;max-width:600px}
.hl{font-style:italic;background:linear-gradient(transparent 60%,var(--marker) 60%,var(--marker) 92%,transparent 92%);padding:0 .06em}
[data-theme="dark"] .hl{background:linear-gradient(transparent 62%,rgba(242,212,92,.38) 62%,rgba(242,212,92,.38) 92%,transparent 92%)}
.hero-tool{position:relative;width:100%}
/* Red-pen note beside a live element (Caveat). Arrows are drawn in SVG: the font subset has no arrow glyphs. */
.pen-note{display:flex;align-items:center;gap:6px;margin:0;font:700 1.75rem/1.05 var(--hand);color:var(--pen);transform:rotate(-4deg)}
.pen-note svg{flex:0 0 auto}
.pen-side{position:absolute;right:-262px;bottom:150px;width:240px}
.pen-top{top:150px;bottom:auto}
.hero-tool:has(#scaleTitle[aria-selected="true"]) .pen-side{display:none}
@media (max-width:1300px){.pen-side{display:none}}
@media (min-width:981px){.hero{padding:104px 24px 88px;gap:64px}.hero-copy{gap:28px}}
.calc-card{position:relative;z-index:1;margin:0;padding:26px;border-radius:24px;box-shadow:var(--shadow)}
.exam-paper{position:absolute;top:-68px;right:-78px;width:300px;height:360px;transform:rotate(6deg);border-radius:10px;border:1px solid var(--line);
  background:repeating-linear-gradient(var(--card) 0 27px,#D7E2EA 27px 28px);box-shadow:0 18px 40px -24px rgba(20,35,28,.35)}
.exam-paper::before{content:"";position:absolute;top:0;bottom:0;left:36px;width:1px;background:#E9A99C}
.exam-title{position:absolute;left:50px;top:14px;font:700 22px/1 var(--hand);color:var(--ink-2)}
.exam-score{position:absolute;right:20px;top:6px;transform:rotate(-8deg);font:700 42px/1 var(--hand);color:var(--pen)}
[data-theme="dark"] .exam-paper{background:repeating-linear-gradient(var(--card) 0 27px,#2A3A44 27px 28px)}

/* Calculator card header: name and grading scale switch */
.calc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:-4px 0 20px}
.calc-label{font:500 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.calc-head .systems{margin:0}
.calc-head .systems button{height:32px;padding:0 14px;font-size:.85rem}
/* One panel, two tabs: the chart and the cutoffs that produce it */
.chart-panel{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 20px 50px -36px rgba(20,35,28,.4)}
.panel-tabs{display:flex;gap:4px;padding:8px;background:var(--sunk);border-bottom:1px solid var(--line)}
.panel-tabs [role="tab"]{flex:1;height:40px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);font:500 .92rem var(--sans);cursor:pointer}
.panel-tabs [role="tab"]:hover{color:var(--text)}
.panel-tabs [role="tab"][aria-selected="true"]{background:var(--card);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(26,30,25,.14)}
.chart-panel .chart-wrap{border:0;border-radius:0;max-height:520px}
.chart-panel thead th{background:var(--card);border-bottom:1px solid var(--line)}
.chart-panel [hidden]{display:none}
/* The chart and cutoffs sit at the foot of the calculator card, edge to edge */
.calc-chart{margin:24px -26px -26px;border:0;border-top:1px solid var(--line);border-radius:0 0 24px 24px;box-shadow:none}
.calc-chart .chart-wrap{max-height:360px}
/* Three-row preview with a "Show all" button */
.collapsible:not(.open){max-height:none;overflow:visible}
.collapsible:not(.open) table:not(.scale-table) tbody tr:not(.near),
.collapsible:not(.open) .scale-table tbody tr:nth-child(n+4){display:none}
.show-all{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;border:0;background:var(--card);color:var(--accent);font:600 .9rem var(--sans);cursor:pointer}
.show-all::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--green-soft);font:500 1rem/1 var(--sans)}
.show-all[aria-expanded="true"]::before{content:"\2212"}
.show-all:hover{background:var(--bg)}
.collapsible.open+.show-all{border-top:1px solid var(--line)}
/* Single-table panel title (instead of tabs) */
.panel-title{padding:16px 20px 14px;background:var(--sunk);border-bottom:1px solid var(--line)}
.panel-title h2{margin:0;font:600 1rem/1.3 var(--sans);letter-spacing:0}
.calc-chart .panel-title .scale-note{margin:4px 0 0;padding:0;border:0;font-size:.85rem}
.calc-head .seg-top{margin:0}
.scale-chip{padding:5px 12px;border-radius:999px;background:var(--sunk);font:500 .75rem/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-2)}
.panel-body{padding:20px}
.panel-lede{margin:0 0 14px;font:400 1.3rem/1.25 var(--serif);color:var(--text)}
.panel-body .link-btn{margin-top:14px}
.calc-chart .scale-note{margin:0;padding:14px 20px;font-size:.88rem;border-bottom:1px solid var(--line)}
.panel-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px;margin:0;padding:14px 20px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.panel-foot .link-btn{margin:0}

/* ---------- Calculator controls ---------- */
.inputs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:8px}
.stepper{display:flex;height:58px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg)}
.stepper button{flex:0 0 52px;border:0;background:transparent;color:var(--text);font-size:1.4rem;cursor:pointer;transition:background .15s}
.stepper button:hover{background:var(--sunk)}
.stepper input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);text-align:center;font:500 1.75rem var(--serif);-moz-appearance:textfield;outline:0}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper:focus-within,.suffix-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--green-soft)}
.seg{display:flex;gap:6px;margin-top:10px}
.seg button{height:32px;border:1px solid var(--line);background:transparent;color:var(--ink-2);padding:0 14px;border-radius:999px;font:500 .85rem var(--sans);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--paper);font-weight:600}
.seg-top{margin:0 0 20px;flex-wrap:wrap;padding:4px;background:var(--sunk);border-radius:999px;display:inline-flex;gap:2px}
.seg-top button{border:0;height:36px;padding:0 16px;font-size:.9rem}
.seg-top button[aria-pressed="true"]{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(26,30,25,.14)}

.result{position:relative;display:flex;align-items:center;gap:24px;margin-top:22px;padding:22px;border-radius:18px;background:var(--bg)}
/* The grade "stamp": a filled disc in the grade's color, circled by a pen loop */
.grade{position:relative;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font:500 2.5rem/1 var(--serif);color:#fff;background:var(--a);flex:0 0 auto}
.grade::after{content:"";position:absolute;inset:-12px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88'%3E%3Cpath d='M64 16C50 6 20 10 13 33c-6 21 13 40 36 37 21-3 29-26 19-43-4-7-13-12-24-11' fill='none' stroke='%23B8402B' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.grade.gpa{font-size:1.9rem}
.score{font:400 clamp(2.8rem,6vw,4rem)/.95 var(--serif);letter-spacing:-.03em}
.score small{display:block;margin-top:8px;font:400 .9rem/1.4 var(--sans);letter-spacing:0;color:var(--ink-2)}
.result-text{display:flex;flex-direction:column;min-width:0}
.desc{font-size:.9rem;color:var(--ink-2);margin-top:4px}
.status{display:inline-block;margin-top:8px;padding:2px 12px;border-radius:999px;font-size:.8rem;font-weight:600;color:#fff;align-self:flex-start}
.status[hidden],th[hidden]{display:none}
.options{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-size:.9rem;color:var(--ink-2)}
.options label{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:32px}
input[type="checkbox"]{width:18px;height:18px;accent-color:var(--green)}

.inputs-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field[hidden]{display:none}
.suffix-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:14px;background:var(--bg);height:58px;padding-right:14px}
.suffix-input input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--text);text-align:center;font:500 1.6rem var(--serif);outline:0;-moz-appearance:textfield}
.suffix-input input::-webkit-inner-spin-button,.suffix-input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.suffix-input span{color:var(--muted);font-weight:600}

/* Weighted and GPA rows */
.wrow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 36px;gap:8px;align-items:center;margin-bottom:8px}
.whead{font:500 .72rem/1.4 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.wrow>input,.wrow>select{height:46px;min-width:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);padding:0 12px;font:inherit;font-size:1rem}
.wrow .w-grade,.wrow .c-credits{text-align:center;font-weight:600}
.wrow>select{padding:0 8px;font-weight:600}
.wrow>input:focus,.wrow>select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--green-soft)}
.options select{border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);padding:4px 8px;font:inherit;font-size:.9rem}
.wrow .hs-col{display:none}
.hs-on .wrow .hs-col{display:block}
.hs-on .wrow{grid-template-columns:minmax(0,2fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.3fr) 36px}
.hs-toggle{margin-top:16px;font-size:.9rem;color:var(--ink-2)}
.hs-toggle>label{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text);font-weight:600}
.hs-settings{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px}
.hs-settings label{display:flex;align-items:center;gap:8px}
.hs-settings input{width:64px;padding:5px 6px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);text-align:center;font:inherit;font-size:.95rem}
.hs-settings[hidden]{display:none}
.prior{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.prior .inputs{margin-top:12px}
.prior .suffix-input{height:46px;padding-right:0}
.wrow .suffix-input{height:46px;padding-right:10px;border-radius:var(--radius-sm)}
.wrow .suffix-input input{font:600 1rem var(--sans)}
.wrow .invalid,.wrow>input.invalid{border-color:var(--f)}
.w-del{height:36px;width:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.4rem;cursor:pointer}
.w-del:hover{background:var(--sunk);color:var(--f)}
.wactions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.wactions .link-btn{margin-top:0}
.btn-soft{height:40px;border:1px solid var(--line);background:var(--card);color:var(--text);font:600 .9rem var(--sans);padding:0 16px;border-radius:999px;cursor:pointer}
.btn-soft:hover{border-color:var(--ink)}
.btn-soft:disabled{opacity:.5;cursor:default}
.wtotal{margin-left:auto;font:500 .8rem var(--mono);letter-spacing:.04em;color:var(--muted)}
.wtotal.ok{color:var(--a)}
.wtotal.warn{color:var(--d)}
.hint{font-size:.85rem;color:var(--muted);margin:12px 0 0}
.target{margin-top:20px;display:grid;grid-template-columns:1fr 150px;gap:6px 12px;align-items:center}
.target label{font-weight:600;font-size:.95rem}
.target .suffix-input{height:46px}
.target-msg{grid-column:1/-1;margin:4px 0 0;font-size:.95rem;color:var(--ink-2)}
.target-msg.ok strong{color:var(--a)}
.target-msg.warn strong{color:var(--f)}

/* ---------- Tables ---------- */
.chart-wrap{max-height:460px;overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--card)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:11px 14px;text-align:center;border-bottom:1px solid var(--line)}
thead th{position:sticky;top:0;z-index:1;background:var(--sunk);font:500 .72rem/1.4 var(--mono);color:var(--ink-2);text-transform:uppercase;letter-spacing:.1em}
tbody tr:last-child td{border-bottom:0}
tr.pick{cursor:pointer}
tr.pick:hover td{background:var(--bg)}
.muted{color:var(--muted)}
tr.current td{background:var(--marker-soft);font-weight:600}
.pill{display:inline-block;min-width:36px;padding:1px 9px;border-radius:999px;color:#fff;font:500 .9rem/1.6 var(--serif)}

/* Grading scale */
.systems{display:inline-flex;gap:2px;margin-bottom:14px;padding:4px;border-radius:999px;background:var(--sunk);flex-wrap:wrap}
.systems button{height:36px;border:0;background:transparent;color:var(--ink-2);padding:0 18px;border-radius:999px;font:500 .9rem var(--sans);cursor:pointer}
.systems button[aria-pressed="true"]{background:var(--card);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(26,30,25,.14)}
.scale-note{font-size:.9rem;color:var(--ink-2);margin:0 0 14px}
.scale-table td,.scale-table th{padding:8px 10px}
.scale-table td:nth-child(2){text-align:left;color:var(--ink-2);font-size:.9rem}
.scale-table th:nth-child(2){text-align:left}
.scale-table input{width:62px;padding:5px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);text-align:center;font:inherit;font-size:.95rem}
.link-btn{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font:600 .9rem var(--sans);margin-top:12px;text-decoration:underline;text-underline-offset:3px}

/* ---------- Site header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header-inner{position:relative;max-width:var(--wide);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--text);text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--text)}
.brand-mark{width:34px;height:34px;display:block;flex:0 0 auto}
.wordmark{font:600 1.3rem/1 var(--serif);letter-spacing:-.02em}
.wordmark em{font-weight:500;color:var(--green)}
.site-nav{display:flex;align-items:center;gap:2px}
.site-nav>a,.drop-toggle{color:var(--ink-2);text-decoration:none;font:500 .94rem/1.2 var(--sans);padding:9px 13px;border-radius:999px;background:none;border:0;cursor:pointer;white-space:nowrap}
.site-nav>a:hover,.drop-toggle:hover{color:var(--text);background:var(--sunk)}
.site-nav>a[aria-current="page"],.drop-toggle.in-section{color:var(--text);background:var(--sunk);font-weight:600}
.site-nav .long{display:none}
.drop-toggle::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.drop-toggle[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.nav-drop{position:relative;padding:8px 0}
.nav-drop:first-of-type{margin-left:10px;padding-left:12px;border-left:1px solid var(--line)}
.drop-menu{display:none;position:absolute;right:0;top:100%;min-width:260px;list-style:none;margin:0;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.drop-menu.open{display:block}
.drop-menu a{display:block;padding:9px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:.92rem}
.drop-menu a:hover{background:var(--bg)}
.drop-menu a[aria-current="page"]{background:var(--marker-soft);font-weight:600}
.menu-toggle{display:none}
@media (hover:hover) and (min-width:1101px){.nav-drop:hover .drop-menu{display:block}}
@media (max-width:1100px){
  .menu-toggle{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer}
  .menu-icon,.menu-icon::before,.menu-icon::after{display:block;width:18px;height:1.6px;background:var(--text);border-radius:2px;position:relative;transition:transform .2s}
  .menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0}
  .menu-icon::before{top:-6px}
  .menu-icon::after{top:6px}
  .menu-toggle[aria-expanded="true"] .menu-icon{background:transparent}
  .menu-toggle[aria-expanded="true"] .menu-icon::before{top:0;transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .menu-icon::after{top:0;transform:rotate(-45deg)}
  .site-nav{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;gap:2px;padding:12px 24px 22px;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow);max-height:calc(100vh - 68px);overflow-y:auto}
  .site-nav.open{display:flex}
  .site-nav .long{display:inline}
  .site-nav .short{display:none}
  .site-nav>a{border-radius:12px;padding:12px;font-size:1.05rem}
  .nav-drop,.nav-drop:first-of-type{padding:0;margin:0;border:0}
  .drop-toggle{display:block;width:100%;text-align:left;margin-top:12px;padding:8px 12px 4px;font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);cursor:default;pointer-events:none;background:none}
  .drop-toggle.in-section{background:none;color:var(--muted)}
  .drop-toggle::after{content:none}
  .drop-menu{display:block;position:static;min-width:0;padding:0;border:0;box-shadow:none;background:none}
  .drop-menu a{padding:11px 12px;font-size:1.05rem}
}

/* ---------- Content ---------- */
article h2{margin-top:44px}
article>h2:first-child,article h2[style*="margin-top:0"]{margin-top:0}
article p,article li{color:var(--ink-2)}
article strong{color:var(--text)}
article a{color:var(--accent)}
article ul,article ol{padding-left:22px}
article li{margin-bottom:8px}
.uses li{margin-bottom:10px}
.source{font-size:.85rem;margin-top:-4px}
.source a{color:var(--accent)}
details{border-bottom:1px solid var(--line);padding:18px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font:400 1.3rem/1.3 var(--serif);letter-spacing:-.01em;color:var(--text)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 1.4rem/1 var(--sans);color:var(--muted)}
details[open] summary::after{content:"\2212"}
details>p{margin:12px 0 0}
.formula{font:500 1rem var(--mono);color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 16px;overflow-x:auto}

/* Legal and contact pages */
.legal h2{margin-top:40px;font-size:1.6rem}
.legal .summary{background:var(--marker-soft);border-radius:16px;padding:18px 22px;margin:22px 0}
.legal .summary h2{margin:0 0 8px;font-size:1.2rem}
.legal .summary ul{margin:0;padding-left:20px}
.legal .summary li{color:var(--text)}
.legal a{color:var(--accent)}
.legal-table td,.legal-table th{text-align:left}
.contact-card{text-align:center;padding:40px 28px}
.contact-card h2{margin-bottom:6px}
.contact-email{font:400 1.6rem var(--serif);margin:0 0 18px}
.btn-primary{display:inline-flex;align-items:center;height:50px;background:var(--green);color:var(--paper);font:600 .95rem var(--sans);text-decoration:none;padding:0 24px;border-radius:999px}
.btn-primary:hover{background:var(--green-hover);color:var(--paper)}
/* Contact page: intro left, email card right */
.contact-hero{max-width:var(--wide);margin:0 auto;padding:104px 24px 88px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center}
.contact-copy h1{margin:0 0 20px;font-size:clamp(2.8rem,6vw,4.75rem)}
.contact-copy .lede{margin:0;max-width:520px}
.contact-side{position:relative}
.contact-hero .contact-card{margin:0;padding:36px;text-align:left;box-shadow:var(--shadow);border-radius:24px}
.contact-hero .contact-email{margin:10px 0 22px;font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.01em}
.contact-pen{margin-top:22px;margin-left:8px}
.before-sec{display:flex;flex-direction:column;gap:14px}
.before-sec h2{margin:0}
.before-sec p{max-width:760px;font-size:1.06rem;line-height:1.7}
/* 404: the exam paper, marked 0/1 */
.nf-hero{max-width:var(--wide);margin:0 auto;padding:104px 24px 72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:56px;align-items:center}
.nf-copy h1{margin:0 0 20px;font-size:clamp(2.8rem,6vw,4.75rem)}
.nf-copy .lede{margin:0;max-width:480px}
.nf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn-line{display:inline-flex;align-items:center;height:50px;padding:0 24px;border:1px solid var(--text);border-radius:999px;color:var(--text);font:600 .95rem var(--sans);text-decoration:none}
.btn-line:hover{color:var(--text);background:var(--sunk)}
.nf-paper{position:relative;justify-self:center;width:min(360px,100%);aspect-ratio:3/4;transform:rotate(4deg);border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow);
  background:repeating-linear-gradient(var(--card) 0 31px,#D7E2EA 31px 32px)}
[data-theme="dark"] .nf-paper{background:repeating-linear-gradient(var(--card) 0 31px,#2A3A44 31px 32px)}
.nf-paper::before{content:"";position:absolute;top:0;bottom:0;left:44px;width:1px;background:#E9A99C}
.nf-paper .exam-title{left:60px;top:22px;font-size:26px}
.nf-score{position:absolute;right:34px;top:84px;transform:rotate(-8deg);font:700 6rem/1 var(--hand);color:var(--pen)}
.nf-note{position:absolute;left:62px;bottom:48px;transform:rotate(-4deg);font:700 2.2rem/1 var(--hand);color:var(--pen)}
mark.todo{background:var(--marker);color:var(--ink);padding:0 4px;border-radius:4px}

/* ---------- Home content: the explainer, split into designed sections ---------- */
main.home-content{max-width:none;padding:0}
.home-sec{max-width:var(--wide);margin:0 auto;padding:80px 24px;border-top:1px solid var(--line)}
.home-sec h3{margin:0;font-size:1.12rem;line-height:1.3}
.home-sec p{margin:0;color:var(--ink-2)}
.home-sec strong{color:var(--text)}
/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px;counter-reset:none}
.steps li{position:relative;display:flex;flex-direction:column;gap:18px;padding:26px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.step-num{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--green);color:var(--paper);font:400 1.9rem/1 var(--serif)}
.steps li:not(:last-child)::after{content:"";position:absolute;top:53px;right:-21px;width:22px;height:1px;background:var(--line)}
.steps p{font-size:1.02rem}
/* Formula, live from the calculator */
.formula-sec{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.formula-copy{display:flex;flex-direction:column;gap:16px}
.formula-copy .kicker{margin:0;color:var(--muted)}
.formula-copy h2{margin:0;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.025em}
.formula-copy p{font-size:1.06rem;max-width:460px}
.formula-card{margin:0;padding:30px 32px;border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  background-image:repeating-linear-gradient(transparent 0 35px,color-mix(in srgb,var(--sky-ink) 10%,transparent) 35px 36px)}
.formula-card figcaption{font:500 .72rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.formula-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 20px;margin:22px 0;font-family:var(--serif);font-variant-numeric:tabular-nums}
.frac{display:inline-flex;flex-direction:column;align-items:center;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1.05}
.frac>span{padding:0 10px}
.frac>span:first-child{color:var(--green);border-bottom:3px solid var(--text)}
.op{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--ink-2)}
.res{font-size:clamp(3.4rem,7vw,5rem);line-height:1;letter-spacing:-.03em;background:linear-gradient(transparent 62%,var(--marker) 62%,var(--marker) 92%,transparent 92%);padding:0 .08em}
[data-theme="dark"] .res{background:linear-gradient(transparent 62%,rgba(242,212,92,.38) 62%,rgba(242,212,92,.38) 92%,transparent 92%)}
.formula-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;font-size:.88rem;color:var(--ink-2)}
.formula-legend span{display:inline-flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--green)}
.dot-line{background:var(--text)}
.formula-grade{margin-left:auto;font-weight:500}
.formula-grade b{display:inline-grid;place-items:center;min-width:40px;height:30px;padding:0 10px;border-radius:999px;background:var(--marker-soft);font:500 1.05rem/1 var(--serif);color:var(--text)}
.steps-4{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.steps-5{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.steps-5 li{padding:22px}
.steps-5 .step-num{width:48px;height:48px;font-size:1.6rem}
.sec-foot{margin-top:24px !important;font-size:1rem}
.formula-copy .formula{margin:2px 0;font-size:.95rem}
.formula-text{font:400 clamp(1.5rem,3vw,2.1rem)/1.25 var(--serif);font-variant-numeric:tabular-nums}
/* Use cases */
.use-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:16px}
.use-tile{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;border-radius:18px;background:var(--card);border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.use-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.use-num{align-self:flex-start;padding:3px 10px;border-radius:999px;background:var(--tint);color:var(--tint-ink);font:500 .75rem/1.4 var(--mono);letter-spacing:.06em}
.use-tile p{font-size:.95rem}
/* Good to know: longer explainers as cards */
.know-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px;align-items:start}
.know-card{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.know-card h3{font-size:1.2rem}
.know-2{grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr))}
.know-card p{font-size:.97rem;line-height:1.65}
.know-card .formula{font-size:.85rem;margin:0}
/* Who uses it */
.who-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:20px}
.who-grid li{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:2px solid var(--text)}
.who-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:var(--tint);color:var(--tint-ink);margin-bottom:6px}
.who-mark svg{width:30px;height:30px}
.who-grid p{font-size:.98rem}
/* When to use something else */
.other-sec{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.other-copy{display:flex;flex-direction:column;gap:16px}
.other-copy h2{margin:0}
.other-copy p{font-size:1.06rem;line-height:1.7}
.other-links{display:grid;gap:14px}
.other-link{display:flex;align-items:center;gap:18px;padding:10px;border-radius:18px;background:var(--card);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:transform .2s,box-shadow .2s}
.other-link:hover{color:var(--text);transform:translateY(-3px);box-shadow:var(--shadow)}
.other-link .cover{width:96px;height:96px;flex:0 0 auto;border-radius:12px}
.other-link .cover-tag{left:10px;top:8px;font-size:.6rem}
.other-link .cover-big{left:9px;bottom:6px;font-size:2rem}
.other-link strong{display:block;font-size:1.08rem}
.other-link small{display:block;margin-top:2px;color:var(--muted);font-size:.9rem}
/* FAQ */
.faq-sec{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.faq-head{position:sticky;top:110px;display:flex;flex-direction:column;gap:14px}
.faq-head h2{margin:0;font-size:clamp(2.2rem,4vw,3.25rem);letter-spacing:-.025em}
.faq-list details>p{margin-top:12px;color:var(--ink-2);line-height:1.7}
.faq-list details>p.source{margin-top:8px;font-size:.85rem}

/* ---------- More calculators (calculator pages) ---------- */
.more-calcs{max-width:var(--wide);margin:0 auto;padding:72px 24px 96px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;margin-bottom:32px}
.section-head h2{margin:0;font-size:clamp(2.2rem,4vw,3.25rem);letter-spacing:-.025em}
.section-head p{margin:0;color:var(--ink-2);max-width:420px}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.calc-tile{display:flex;flex-direction:column;gap:16px;padding:10px 10px 22px;background:var(--card);border:1px solid var(--line);border-radius:22px;color:var(--text);text-decoration:none;transition:transform .2s,box-shadow .2s}
.calc-tile:hover{color:var(--text);transform:translateY(-3px);box-shadow:var(--shadow)}
.calc-tile .cover{height:200px}
.calc-tile h3{margin:0 12px;font-size:1.3rem}
.calc-tile p{margin:0 12px;color:var(--ink-2);font-size:.95rem}

/* Cover tiles: tint, mono label, one big serif number, optional line drawing */
.cover{position:relative;overflow:hidden;border-radius:16px;background:var(--tint);color:var(--tint-ink)}
.cover-sage{--tint:var(--sage);--tint-ink:var(--sage-ink)}
.cover-butter{--tint:var(--butter);--tint-ink:var(--butter-ink)}
.cover-sky{--tint:var(--sky);--tint-ink:var(--sky-ink)}
.cover-clay{--tint:var(--clay);--tint-ink:var(--clay-ink)}
.cover.grid{background-image:linear-gradient(color-mix(in srgb,var(--tint-ink) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--tint-ink) 12%,transparent) 1px,transparent 1px);background-size:24px 24px}
.cover-tag{position:absolute;left:18px;top:14px;font:500 .72rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.cover-big{position:absolute;left:16px;bottom:8px;font:400 4.6rem/1 var(--serif);letter-spacing:-.04em}
.cover-art{position:absolute;right:18px;top:38px;width:46%;max-width:170px}
.cover-art *{stroke:currentColor}
.cover-note{position:absolute;right:28px;bottom:28px;transform:rotate(-5deg);font:700 2rem/1 var(--hand);color:var(--pen)}

/* ---------- Guides band (home) ---------- */
.guides-band{background:var(--board);color:var(--board-text)}
.guides-band-inner{max-width:var(--wide);margin:0 auto;padding:96px 24px}
.guides-band .section-head{margin-bottom:44px}
.guides-band h2{color:var(--board-text);font-size:clamp(2.2rem,4.6vw,3.75rem);max-width:720px}
.guides-band h2 em{color:var(--marker)}
.kicker{display:block;margin-bottom:14px;font:500 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--board-muted)}
.btn-ghost{display:inline-flex;align-items:center;height:48px;padding:0 22px;border:1px solid rgba(246,243,234,.4);border-radius:999px;color:var(--board-text);text-decoration:none;font-weight:600}
.btn-ghost:hover{color:var(--board);background:var(--board-text)}
.guide-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px}
.guide-row{display:flex;align-items:center;gap:18px;padding:12px;border-radius:18px;background:rgba(246,243,234,.05);border:1px solid rgba(246,243,234,.1);color:var(--board-text);text-decoration:none;transition:background .2s}
.guide-row:hover{color:var(--board-text);background:rgba(246,243,234,.1)}
.guide-row .cover{width:92px;height:92px;flex:0 0 auto;border-radius:12px}
.guide-row .cover-tag{left:10px;top:8px;font-size:.6rem}
.guide-row .cover-big{left:9px;bottom:6px;font-size:2rem}
.guide-row strong{display:block;font-weight:600;font-size:1.05rem;line-height:1.3}
.guide-row small{display:block;margin-top:4px;color:var(--board-muted);font-size:.88rem}

/* ---------- Guide template ---------- */
.guide-hero{max-width:var(--wide);margin:0 auto;padding:72px 24px 48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end}
.guide-hero-copy{display:flex;flex-direction:column;gap:22px}
.guide-hero h1{margin:0;font-size:clamp(2.3rem,4.2vw,3.6rem);line-height:1.05}
.guide-hero .lede{margin:0;max-width:560px}
.crumbs{display:flex;gap:10px;font:500 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--text)}
.guide-hero .cover{height:320px;border-radius:24px}
.guide-hero .cover-tag{left:28px;top:22px}
.guide-hero .cover-big{left:22px;bottom:4px;font-size:clamp(7rem,14vw,12.5rem)}
.guide-hero .cover-art{right:28px;top:64px;max-width:240px}
/* Site pages (privacy, terms, contact) reuse the guide hero without a cover */
.doc-hero{grid-template-columns:minmax(0,1fr);padding-bottom:24px}
.doc-hero .guide-hero-copy{max-width:760px}
.guide.legal>p:first-child{font-size:1.15rem}
.guide-layout{max-width:var(--wide);margin:0 auto;padding:24px 24px 96px;display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start}
.toc{flex:1 1 220px;max-width:260px;position:sticky;top:100px;display:flex;flex-direction:column;gap:14px}
.toc-title{margin:0;font:500 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.toc nav{display:flex;flex-direction:column;border-left:1px solid var(--line);font-size:.92rem}
.toc nav a{padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--ink-2);text-decoration:none;line-height:1.35}
.toc nav a:hover{color:var(--text)}
.toc nav a.active{border-left-color:var(--green);color:var(--text);font-weight:600}
.tool-card{margin-top:14px;display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:18px;background:var(--green);color:var(--paper);text-decoration:none}
.tool-card:hover{background:var(--green-hover);color:var(--paper)}
.tool-card span{font:500 .68rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.tool-card strong{font:400 1.4rem/1.15 var(--serif)}
.tool-card small{font-size:.88rem;opacity:.85}
[data-theme="dark"] .tool-card,[data-theme="dark"] .tool-card:hover{color:#0B120E}
.guide{flex:999 1 560px;min-width:0;max-width:700px;font-size:1.125rem;line-height:1.7}
.guide>p:first-child{font-size:1.3rem;line-height:1.6;color:var(--text);margin-top:0}
.guide p,.guide li{color:var(--ink-2)}
.guide strong{color:var(--text)}
.guide h2{margin:56px 0 16px;font-size:clamp(1.8rem,3vw,2.4rem);color:var(--text)}
.guide h3{margin:32px 0 10px;font-size:1.3rem;color:var(--text)}
.guide li{margin-bottom:8px}
.table-wrap{max-height:none;margin:24px 0 28px;font-size:1rem}
.guide-table th,.guide-table td{text-align:left;padding:11px 18px}
.guide-table tbody tr:hover td{background:var(--bg)}
.callout{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;padding:24px;margin:8px 0 32px;border-radius:20px;background:var(--marker-soft)}
.callout div{flex:1 1 260px}
.callout strong{display:block;font:400 1.5rem/1.2 var(--serif);color:var(--text)}
.callout p{margin:4px 0 0;font-size:1rem}
.callout a{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;font-size:.95rem}
.callout a:hover{color:var(--paper);background:var(--green)}
.related{border-top:1px solid var(--line)}
.related-inner{max-width:var(--wide);margin:0 auto;padding:72px 24px 96px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.related-grid a{display:flex;flex-direction:column;gap:14px;color:var(--text);text-decoration:none}
.related-grid a:hover strong{text-decoration:underline;text-underline-offset:4px}
.related-grid .cover{height:180px;border-radius:18px;transition:transform .2s}
.related-grid a:hover .cover{transform:translateY(-3px)}
.related-grid strong{font-size:1.15rem;font-weight:600;line-height:1.3}

/* ---------- Featured badges: a light band between the last section and the footer ---------- */
.featured-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 20px;padding:44px 24px;background:var(--paper)}
.featured-band>span{margin-right:4px;font:500 .72rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.featured-band a{display:block;border-radius:14px;transition:transform .2s}
.featured-band a:hover{transform:translateY(-2px)}
.featured-band img{display:block;width:auto;height:44px;max-width:100%}

/* ---------- Footer ---------- */
.site-footer{background:var(--board);color:var(--board-text);overflow:hidden;border-top:1px solid var(--board-line)}
.footer-inner{max-width:var(--wide);margin:0 auto;padding:96px 24px 0;display:flex;flex-direction:column;gap:56px}
.footer-nav{display:grid;grid-template-columns:1.2fr repeat(3,minmax(0,1fr));gap:36px}
.footer-about{display:flex;flex-direction:column;gap:14px}
.footer-about p{margin:0;color:var(--board-muted);max-width:240px;font-size:.95rem}
.footer-nav h2{font:500 .75rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--board-muted);margin:0 0 14px}
.footer-nav ul{list-style:none;margin:0;padding:0}
.footer-nav li{margin-bottom:9px}
.footer-nav a{color:var(--board-text);text-decoration:none;font-size:.95rem}
.footer-nav a:hover{color:var(--marker)}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:20px;border-top:1px solid var(--board-line);font-size:.85rem;color:var(--board-muted)}
.footer-links{display:flex;gap:6px 20px;flex-wrap:wrap}
.footer-links a{color:var(--board-muted);text-decoration:none}
.footer-links a:hover{color:var(--board-text)}
/* Giant wordmark: the text is 7.7em wide in Newsreader, so this fills the column edge to edge */
.footer-word{margin:0;padding-bottom:.18em;text-align:center;white-space:nowrap;font:400 min(calc((100vw - 48px) / 7.7),149px)/1 var(--serif);letter-spacing:-.045em;color:var(--board-text);user-select:none}
.footer-word em{color:var(--marker)}
[data-theme="dark"] .btn-ghost:hover{color:var(--board)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .exam-paper{display:none}
  .nf-paper{width:min(270px,80%)}
  .guide-hero,.formula-sec,.other-sec,.faq-sec,.contact-hero,.nf-hero{grid-template-columns:minmax(0,1fr)}
  .formula-sec,.other-sec,.faq-sec{gap:28px}
  .faq-head{position:static}
  .steps li::after{display:none}
  .toc{position:static;max-width:none}
  .footer-nav{grid-template-columns:1fr 1fr}
  .footer-about{grid-column:1/-1}
}
@media (max-width:600px){
  .hero{padding:36px 16px 40px}
  main,.home-sec,.contact-hero,.nf-hero,.more-calcs,.guides-band-inner,.guide-hero,.guide-layout,.related-inner,.footer-inner,body>header:not(.site-header){padding-left:16px;padding-right:16px}
  .site-header-inner{padding:0 16px}
  .guide-hero .cover{height:220px}
  .guides-band-inner{padding-top:64px;padding-bottom:64px}
  .home-sec{padding-top:56px;padding-bottom:56px}
  .formula-card{padding:22px}
  .footer-inner{padding-top:64px}
  .footer-word{font-size:calc((100vw - 32px) / 7.7)}
}
@media (max-width:480px){
  .card,.calc-card{padding:18px}
  .calc-chart{margin:20px -18px -18px}
  .inputs{gap:10px}
  .stepper button{flex-basis:40px}
  .result{gap:16px;padding:16px}
  .grade{width:68px;height:68px;font-size:2rem}
  .scale-table input{width:52px}
  .inputs-3{grid-template-columns:minmax(0,1fr)}
  .wrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;row-gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .wrow .w-name,.wrow .c-name{grid-column:1/-1}
  .hs-on .wrow{grid-template-columns:minmax(0,.7fr) minmax(0,.9fr) minmax(0,1.6fr) 36px;gap:6px}
  .hs-on .wrow>select{padding:0 4px}
  .whead{display:none}
  .target{grid-template-columns:1fr}
  .wordmark{font-size:1.15rem}
  .brand-mark{width:30px;height:30px}
}

/* ---------- Theme toggle ---------- */
.theme-toggle{order:2;display:grid;place-items:center;width:40px;height:40px;margin-left:6px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);cursor:pointer;flex:0 0 auto}
.theme-toggle:hover{border-color:var(--ink)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .sun,[data-theme="dark"] .theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:block}
.menu-toggle{order:3}
@media (max-width:1100px){.theme-toggle{width:44px;height:44px;border-radius:12px}}