/* ------------------------------------------------------------------ *
   Tokens — blueprint navy + carpenter-pencil amber on paper stock.
 * ------------------------------------------------------------------ */
:root{
  color-scheme: only light;

  --paper:#F1EFEA;
  --surface:#FFFFFF;
  --surface-2:#F8F7F4;
  --line:#DEDAD2;
  --line-soft:#EAE7E0;

  --ink:#16202B;
  --muted:#495661;
  --faint:#626C74;

  --navy:#1E3A5F;
  --navy-dark:#152B47;
  --navy-soft:#E3EAF2;

  --amber:#A5520E;
  --amber-soft:#FBEEDF;

  --green:#1E5E45;
  --green-soft:#DFEDE6;

  /* Sticky header (62px) plus breathing room, so an anchor jump clears it. */
  --stick:78px;

  --radius:10px;
  --shadow:0 1px 2px rgba(22,32,43,.05), 0 8px 20px -14px rgba(22,32,43,.3);

  --sans:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --disp:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------------ *
   Base
 * ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:100%}   /* honour the reader's default */
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--disp);margin:0;line-height:1.15;text-wrap:balance;letter-spacing:-.01em}
/* Headings inside running prose are long enough that balancing them looks
   like a mistake; they just need their last word kept company. */
.prose h2,.prose h3,.pagehead h1,.calc-head h1{text-wrap:pretty}
p{margin:0 0 1em}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--amber)}
img{max-width:100%;height:auto}
/* <picture> is a wrapper for <source>, not a box. Left as a real element it
   becomes the flex item in its place, and every rule written for the image —
   width:100%, aspect-ratio, object-fit — starts resolving against a
   shrink-to-fit parent instead of the card. On the printables grid that turned
   a full-width thumbnail into a 131px one. display:contents removes the box and
   hands the <img> straight back to the layout it was written for. */
picture{display:contents}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:3px}

.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.narrow{max-width:720px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.skip{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:10px 16px;z-index:60}
.skip:focus{left:8px;top:8px}

/* ------------------------------------------------------------------ *
   Header
 * ------------------------------------------------------------------ */
.annbar{background:var(--navy-dark);color:#fff;font-size:0.875rem;text-align:center;padding:7px 0}
.annbar a{color:#fff}

.site-head{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-head .wrap{min-width:0}
.head-row{display:flex;align-items:center;gap:18px;min-height:62px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--navy);flex:none}
.brand-mark{width:28px;height:28px;flex:none}
.brand-name{font-family:var(--disp);font-weight:700;font-size:1.3125rem;letter-spacing:-.02em;color:var(--ink)}
.brand-accent{color:var(--amber)}
.site-foot .brand-accent{color:#E9954A}

.navtoggle{display:none;margin-left:auto;width:40px;height:36px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.navtoggle span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px}

.sitenav{margin-left:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.sitenav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.sitenav a{font-family:var(--disp);font-weight:600;font-size:0.9375rem;color:var(--muted);text-decoration:none;white-space:nowrap}
.sitenav a:hover{color:var(--navy)}
/* --- Calculators panel ---------------------------------------------------
   Desktop: a click-opened panel under the chevron. Mobile: no chevron, the
   categories simply listed under the link. See the note in header.php. */
.nav-has-panel{position:relative}
.nav-row{display:flex;align-items:center;gap:3px}
.nav-more{border:0;background:none;padding:4px 2px;margin:0;cursor:pointer;color:var(--muted);
  display:flex;align-items:center;border-radius:4px;line-height:0}
.nav-more:hover{color:var(--navy)}
.nav-more svg{transition:transform .15s}
.nav-more[aria-expanded="true"]{color:var(--navy)}
.nav-more[aria-expanded="true"] svg{transform:rotate(180deg)}

.navpanel{
  position:absolute;top:calc(100% + 14px);left:-14px;z-index:60;width:560px;
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--navy);
  border-radius:10px;box-shadow:0 10px 30px -10px rgba(22,32,43,.28);padding:8px;
}
/* .sitenav a sets white-space:nowrap so the top-level items never wrap mid-word.
   The panel inherits it, and a category blurb is a sentence — it ran straight
   out of the box. */
.navpanel a{white-space:normal}
/* Seven categories in one column is a 600px curtain. Two columns is four rows. */
.navpanel .navpanel-list{display:grid;grid-template-columns:1fr 1fr;gap:1px 6px;
  list-style:none;margin:0;padding:0}
.navpanel .navpanel-list a{display:block;padding:9px 11px;border-radius:7px;text-decoration:none}
.navpanel-list a:hover,.navpanel-list a:focus-visible{background:var(--surface-2)}
.np-name{display:block;font-family:var(--disp);font-weight:700;font-size:0.9375rem;color:var(--ink)}
.navpanel-list a:hover .np-name{color:var(--amber)}
.np-n{display:inline-block;margin-left:5px;font-size:0.75rem;font-weight:600;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:0 6px;vertical-align:1px}
.navpanel-list a:hover .np-n{background:#fff}
.np-sub{display:block;font-family:var(--sans);font-weight:400;font-size:0.8125rem;
  line-height:1.4;color:var(--muted);margin-top:1px}
.navpanel-all{display:block;margin-top:5px;padding:10px 11px;border-top:1px solid var(--line-soft);
  font-family:var(--disp);font-weight:700;font-size:0.9062rem;text-decoration:none}
.navpanel-all:hover{color:var(--amber)}

@media (max-width:49.9375em){
  /* Inside the hamburger the panel is not a panel — it is the next seven lines. */
  .nav-more{display:none}
  .navpanel{position:static;width:auto;border:0;border-radius:0;box-shadow:none;padding:0 0 6px;
    background:none}
  .navpanel[hidden]{display:block!important}
  /* The 1px row gap belongs to the two-column panel; stacked it doubles each
     separator and the rows start reading as boxes. */
  .navpanel .navpanel-list{grid-template-columns:1fr;gap:0}
  /* Plain rows here, not cards: the rounded corners and inset rule are for a
     floating panel, and inside the menu they read as raised buttons. */
  .sitenav ul .navpanel-list a{padding:9px 0 9px 15px;border-radius:0;
    border-bottom:1px solid var(--line-soft);font-size:0.9375rem;
    box-shadow:inset 2px 0 0 var(--line);background:none}
  .sitenav ul .navpanel-list a:hover{background:none}
  .navpanel .np-name{font-weight:600;font-size:0.9375rem}
  .np-sub{display:none}
  .navpanel-all{padding:9px 0 0 14px;border-top:0;font-size:0.875rem}
}

/* Says which section you are in, and not by color alone. */
.sitenav a[aria-current="page"]{color:var(--navy);position:relative}
.sitenav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:2px;background:var(--amber);border-radius:2px}
@media (max-width:49.9375em){
  .sitenav ul a[aria-current="page"]{color:var(--navy);box-shadow:inset 3px 0 0 var(--amber);padding-left:10px}
  .sitenav ul a[aria-current="page"]::after{display:none}
}

.searchbox{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);overflow:hidden}
.searchbox input{border:0;background:none;padding:7px 10px;font:inherit;font-size:0.9375rem;width:140px;color:var(--ink)}
.searchbox:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)}
.searchbox input:focus{outline:none}
.searchbox button{border:0;background:none;padding:7px 10px;cursor:pointer;color:var(--muted);display:flex}
.searchbox button:hover{color:var(--navy)}

/* ------------------------------------------------------------------ *
   Breadcrumbs
 * ------------------------------------------------------------------ */
.crumbs{background:var(--surface-2);border-bottom:1px solid var(--line-soft);font-size:0.875rem}
.crumbs .wrap{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding-block:9px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--navy);text-decoration:underline}
.crumbs .sep{color:var(--faint)}

/* ------------------------------------------------------------------ *
   Hero / page heads
 * ------------------------------------------------------------------ */
.hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-dark) 100%);color:#fff;padding-block:46px 42px}
.hero h1{font-size:clamp(1.8125rem,5vw,2.8125rem);font-weight:700;color:#fff;max-width:17ch}
.hero .lede{color:#C6D4E4;font-size:clamp(1rem,2vw,1.1875rem);max-width:58ch;margin-top:14px}
.hero-meta{color:#9FB3C9;font-size:0.9062rem;margin:14px 0 0}
.hero-meta strong{color:#fff}

.hero-search{display:flex;gap:8px;margin-top:22px;max-width:520px}
.hero-search input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;border-radius:9px;padding:12px 14px;font:inherit;font-size:1rem}
.hero-search input::placeholder{color:#A7BACE}
.hero-search input:focus{background:#fff;color:var(--ink);outline:2px solid var(--amber)}
.hero-search input:focus::placeholder{color:var(--faint)}
.hero-search button{border:0;border-radius:9px;background:var(--amber);color:#fff;font-family:var(--disp);font-weight:600;font-size:1rem;padding:0 20px;cursor:pointer}
.hero-search button:hover{background:#9E4E0B}

/* Any in-page jump target must clear the sticky header, not just prose h2s. */
:target,[id]:is(h1,h2,h3,h4,section,figure,table,details,div){scroll-margin-top:var(--stick)}

/* --- Hero: two columns, so the right half is not 600px of empty navy ------- */
.hero-in{display:flex;gap:44px;align-items:center}
.hero-copy{flex:1 1 0;min-width:0}
.hero-demo{flex:0 0 340px;margin:0}
.hero-demo-cap{font-family:var(--disp);font-weight:600;font-size:0.8125rem;letter-spacing:.06em;
  text-transform:uppercase;color:#9FB3C9;margin-bottom:9px}
.hero-demo-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:16px 18px 14px}
.hd-in{color:#C6D4E4;font-size:0.9375rem;line-height:1.5;margin:0}
.hd-in strong{color:#fff;white-space:nowrap}
.hd-lab{display:block;font-family:var(--disp);font-weight:600;font-size:0.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:#AFC0D2;margin-bottom:3px}
.hd-arrow{text-align:center;color:#AFC0D2;margin:8px 0;font-size:1.125rem;line-height:1}
.hd-out{list-style:none;margin:0;padding:11px 0 0;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;gap:7px}
.hd-out li{display:flex;gap:9px;align-items:baseline;color:#E4ECF5;font-size:0.9375rem;line-height:1.4}
.hd-q{flex:none;min-width:2.4em;text-align:right;font-family:var(--disp);font-weight:700;
  font-size:1.0625rem;color:#fff;font-variant-numeric:tabular-nums}
.hd-foot{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);
  color:#AFC0D2;font-size:0.8438rem;line-height:1.5}
.hd-foot a{color:#fff;font-weight:600;white-space:nowrap}
.hd-foot a:hover{color:var(--amber-soft)}

/* Stack below ~900px; the card is supporting evidence, so it follows the copy. */
@media (max-width:900px){
  .hero-in{display:block}
  .hero-demo{margin-top:26px;max-width:420px}
}

/* --- Printables strip on the home page ------------------------------------ */
/* Three across, two down. Six cards in one thin row read as a filmstrip to
   scroll past; in a 3 x 2 block each sheet is large enough to actually be
   recognized, which is the only reason the previews exist. */
.sheetstrip{list-style:none;margin:0;padding:0;display:grid;gap:20px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.sheetcard{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--navy);
  border-radius:9px;padding:13px;height:100%}
.sheetcard:hover{border-color:var(--navy);box-shadow:0 2px 10px rgba(30,58,95,.09)}
/* A whole page at this width would be over 400px tall and push the row below
   off the screen, so the preview is capped and cropped from the top — the
   header and first section are what identify the sheet. The cap is a fixed
   length, so the height is still known before the image loads. */
.sheetcard-img{display:block;width:100%;height:auto;aspect-ratio:260/337;max-height:260px;
  object-fit:cover;object-position:top center;
  border:1px solid var(--line-soft);border-radius:5px;background:#fff}
.sheetcard-title{font-family:var(--disp);font-weight:700;font-size:1rem;line-height:1.3;color:var(--ink)}
.sheetcard:hover .sheetcard-title{color:var(--amber)}
.sheetcard-fmt{font-size:0.8438rem;color:var(--muted);margin-top:auto}

@media (max-width:52em){
  .sheetstrip{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (max-width:26em){
  /* One per row rather than two cramped ones — below this the thumbnail is too
     small to tell one sheet from another, which defeats the point. */
  .sheetstrip{grid-template-columns:minmax(0,1fr)}
  .sheetcard-img{max-height:300px}
}

.pagehead{padding-block:34px 20px}
.pagehead h1{font-size:clamp(1.625rem,4.2vw,2.375rem);font-weight:700}
.pagehead .lede,.calc-head .lede{color:var(--muted);font-size:1.125rem;max-width:62ch;margin-top:10px}
/* Aligned with the body column below it rather than centered in the wrap. */
.pagehead h1{max-width:30ch}
.pagehead+.page-body,.pagehead+.refpage{padding-top:8px}
.pagehead .hero-search{max-width:480px}
.pagehead .hero-search input{border-color:var(--line);background:var(--surface);color:var(--ink)}
.pagehead .hero-search input::placeholder{color:var(--faint)}

/* ------------------------------------------------------------------ *
   Tile grids
 * ------------------------------------------------------------------ */
.band{padding-block:28px}
.band-head{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.band-head h2{font-size:1.4375rem;font-weight:700}
.band-blurb{color:var(--muted);font-size:0.9688rem;margin:4px 0 0;max-width:60ch}
.more{font-family:var(--disp);font-weight:600;font-size:0.9375rem;text-decoration:none;white-space:nowrap}

.tilegrid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(235px,1fr))}
.tile{
  display:flex;flex-direction:column;gap:3px;height:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px;text-decoration:none;color:var(--ink);
  border-left:3px solid var(--navy);
}
.tile:hover{border-color:var(--navy);border-left-color:var(--amber);box-shadow:var(--shadow);color:var(--ink)}
.tile-title{font-family:var(--disp);font-weight:600;font-size:1.0625rem;line-height:1.25}
.tile-sub{color:var(--muted);font-size:0.875rem;line-height:1.45}
.tile-kind{margin-top:6px;align-self:flex-start;font-family:var(--disp);font-weight:600;font-size:0.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);background:var(--navy-soft);border-radius:4px;padding:2px 7px}

.empty,.resultcount{color:var(--muted)}
.resultcount{font-size:0.9375rem;margin-bottom:14px}

/* ------------------------------------------------------------------ *
   Calculator page
 * ------------------------------------------------------------------ */
.calc-head{padding-block:30px 18px}
.calc-head h1{font-size:clamp(1.625rem,4.2vw,2.375rem);font-weight:700;max-width:20ch}
.byline{font-size:0.875rem;color:var(--faint);margin:12px 0 0}
.byline strong{color:var(--muted);font-weight:600}

.tool{padding-bottom:6px}
.tool-form{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:22px;
}

.fields{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-family:var(--disp);font-weight:600;font-size:0.9062rem;color:var(--ink)}
.field-in{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);overflow:hidden}
.field-in:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)}
.field-in input,.field-in select{
  flex:1;min-width:0;border:0;background:none;padding:10px 12px;font:inherit;font-size:1rem;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.field-in input:focus,.field-in select:focus{outline:none}
.field-in select{cursor:pointer;padding-right:8px}
.unit{display:flex;align-items:center;padding:0 12px;background:var(--line-soft);color:var(--muted);font-size:0.875rem;font-weight:600;white-space:nowrap}
.help{font-size:0.8438rem;color:var(--faint);margin:0;line-height:1.45}

/* multi-section area input */
.areas{margin-bottom:20px;padding-bottom:18px;border-bottom:1px dashed var(--line)}
.areas-head h2{font-size:1.1875rem;font-weight:700;margin-bottom:3px}
.areas-head .hint{color:var(--muted);font-size:0.9062rem;margin:0 0 12px}
.area-rows{min-height:74px}
.area-row{display:flex;align-items:flex-end;gap:10px;margin-bottom:9px}
.area-n{
  flex:none;width:26px;height:38px;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:0.875rem;color:var(--faint);
}
.area-f{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.area-f label{font-size:0.8125rem;font-family:var(--disp);font-weight:600;color:var(--muted)}
.area-x{
  flex:none;width:34px;height:38px;border:1px solid var(--line);background:var(--surface);
  border-radius:8px;color:var(--faint);font-size:1.1875rem;line-height:1;cursor:pointer;
}
.area-x:hover{color:var(--amber);border-color:var(--amber)}
.one-area .area-x{visibility:hidden}
.btn-ghost{
  display:inline-block;font-family:var(--disp);font-weight:600;font-size:0.9062rem;
  border:1px solid var(--line);background:var(--surface);color:var(--navy);
  border-radius:8px;padding:8px 14px;cursor:pointer;text-decoration:none;
}
.btn-ghost:hover{border-color:var(--navy);background:var(--navy-soft);color:var(--navy)}

/* results */
.results{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.result{background:var(--surface-2);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.result-label{font-size:0.8438rem;color:var(--muted);font-weight:600;font-family:var(--disp);letter-spacing:.01em}
.result-val{font-family:var(--disp);font-weight:700;font-size:1.625rem;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.result-val small{font-size:0.875rem;font-weight:600;color:var(--muted)}
.result-primary{background:var(--amber-soft);grid-column:1 / -1}
.result-primary .result-val{font-size:2.375rem;color:var(--amber)}
.result-primary .result-label{color:#8A4A10}
.result.is-empty .result-val{color:var(--faint)}

.tool-note{font-size:0.8438rem;color:var(--faint);margin:14px 0 0}

/* body + sidebar */
.calc-body{display:grid;gap:34px;grid-template-columns:minmax(0,1fr) 290px;padding-block:34px}
.calc-body > *{min-width:0}
.calc-aside{display:flex;flex-direction:column;gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.card h2{font-size:1rem;font-weight:700;margin-bottom:9px}
.card p{font-size:0.9062rem;color:var(--muted);margin-bottom:10px}
.linklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.linklist a{display:block;padding:7px 0;font-size:0.9375rem;text-decoration:none;border-bottom:1px solid var(--line-soft)}
.linklist li:last-child a{border-bottom:0}
.linklist a:hover{text-decoration:underline}

/* ------------------------------------------------------------------ *
   Article page: prose + sidebar

   The same two-column shape the calculator pages use. Guides, printables and
   the trust pages used to sit in a 720px column centered in a 1120px wrap,
   which left ~200px of nothing down each side. The text column keeps its
   reading measure; the space beside it now carries the contents list and the
   links that were previously buried at the bottom of the page.
 * ------------------------------------------------------------------ */
/* Flex, not grid: the side column has to hold two blocks that stay together on
   a wide screen but split apart on a narrow one — contents above the article,
   link cards below it. display:contents dissolves the wrapper at that point so
   both become orderable siblings of the article. */
.page-body{display:flex;gap:34px;align-items:flex-start;padding-block:30px}
.page-main{flex:1 1 auto;min-width:0}
.page-side{
  flex:0 0 290px;width:290px;display:flex;flex-direction:column;gap:16px;
  position:sticky;top:18px;
}
.page-aside{display:flex;flex-direction:column;gap:16px}
.page-aside-in{display:flex;flex-direction:column;gap:16px}

/* Contents list */
.toc summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--disp);font-size:1rem;font-weight:700;color:var(--ink);
}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{
  content:"";width:9px;height:9px;flex:none;margin-left:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s;
}
.toc[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.toc[open] summary{margin-bottom:9px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;margin:0}
.toc a{
  display:flex;gap:9px;padding:6px 0;font-size:0.9062rem;line-height:1.35;
  text-decoration:none;color:var(--muted);border-bottom:1px solid var(--line-soft);
}
.toc li:last-child a{border-bottom:0}
.toc a::before{content:counter(toc);color:var(--faint);font-variant-numeric:tabular-nums;flex:none;min-width:1.1em}
.toc a:hover{color:var(--navy);text-decoration:underline}
.toc a[aria-current=true]{color:var(--navy);font-weight:600}
/* A heading jumped to from the contents list should not sit under the top edge. */
.prose h2{scroll-margin-top:var(--stick)}

@media (min-width:70em){
  .toc summary{cursor:default;pointer-events:none}
  .toc summary::after{display:none}
}

@media (max-width:69.9375em){
  /* align-items:flex-start is right for the desktop row but shrink-wraps
     every card once the axis turns vertical. */
  .page-body{flex-direction:column;align-items:stretch;gap:20px}
  .page-main{width:100%}
  /* The wrapper stops boxing them in, so contents / article / cards can be
     ordered independently down the page. */
  .page-side{display:contents}
  .page-toc{order:-1;position:static}
  .page-aside{order:1}
}

/* ------------------------------------------------------------------ *
   Reference page (the coverage tables)

   Paragraphs still stop at a comfortable reading width, but the tables are
   allowed the full column — one of them needs 822px and was being clipped
   inside a 680px prose column.
 * ------------------------------------------------------------------ */
.refpage{padding-block:26px 8px}
.prose.prose-ref{max-width:none}
.prose.prose-ref > p,.prose.prose-ref > ul,.prose.prose-ref > ol,
.prose.prose-ref > blockquote,.prose.prose-ref .note{max-width:68ch}
.prose.prose-ref table{width:100%}
.prose.prose-ref h2{scroll-margin-top:var(--stick)}

/* "Jump to" — the contents list, laid across the top instead of down the side */
.jumpbar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 18px;margin-bottom:26px;
}
.jumpbar h2{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--faint);margin:0 0 9px}
.jumpbar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px 9px}
.jumpbar a{
  display:inline-block;padding:5px 11px;min-height:24px;font-size:0.9062rem;text-decoration:none;
  color:var(--navy);background:var(--navy-soft);border-radius:999px;
}
.jumpbar a:hover{background:var(--navy);color:#fff}

/* ------------------------------------------------------------------ *
   Diagrams

   Inline SVG, so no extra request and nothing to lazy-load. aspect-ratio
   reserves the height before layout, which is what keeps CLS at zero — the
   viewBox alone would not, because the element has no intrinsic size until
   the stylesheet applies.
 * ------------------------------------------------------------------ */
.diagram-wrap{
  margin:30px 0 4px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.diagram{display:block;width:100%;height:auto;max-width:640px;margin:0 auto;
  font-family:var(--sans)}
.diagram text{font-family:var(--sans)}
.diagram-cap{margin:10px 0 0;font-size:0.875rem;color:var(--faint);line-height:1.45}

/* ------------------------------------------------------------------ *
   Prose
 * ------------------------------------------------------------------ */
.prose{max-width:68ch;min-width:0;font-size:1.0625rem}
.prose h2{font-size:1.5625rem;font-weight:700;margin:34px 0 12px}
.prose h3{font-size:1.1875rem;font-weight:600;margin:24px 0 8px}
.prose section:first-child h2,.prose > h2:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.3em}
.prose li{margin-bottom:.4em}
.prose blockquote{margin:0 0 1em;padding:2px 0 2px 16px;border-left:3px solid var(--navy);color:var(--muted)}
.prose strong{font-weight:600}
.prose a,.sources a,.linklist a{overflow-wrap:anywhere}

.steps{list-style:none;counter-reset:s;margin:0 0 8px;padding:0}
.steps > li{counter-increment:s;position:relative;padding-left:46px;margin-bottom:20px}
.steps > li::before{
  content:counter(s);position:absolute;left:0;top:0;
  width:32px;height:32px;border-radius:8px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:0.9375rem;
}
.steps h3{margin:4px 0 5px;font-size:1.125rem}

.tablewrap{margin:30px 0}
.tablescroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:0.9688rem;font-variant-numeric:tabular-nums}
thead th{
  background:var(--navy);color:#fff;text-align:left;font-family:var(--disp);
  font-weight:600;font-size:0.875rem;padding:10px 14px;white-space:nowrap;
}
tbody th,tbody td{padding:9px 14px;border-top:1px solid var(--line-soft);text-align:left}
tbody th{font-weight:600;background:var(--surface-2);white-space:nowrap}
tbody tr:hover td,tbody tr:hover th{background:var(--navy-soft)}
.tnote{font-size:0.8438rem;color:var(--faint);margin:9px 0 0}

.faqs{margin-top:34px}
.faqs details{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:9px}
.faqs summary{
  cursor:pointer;padding:13px 16px;font-family:var(--disp);font-weight:600;font-size:1.0312rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";color:var(--amber);font-size:1.3125rem;font-weight:600;line-height:1;flex:none}
.faqs details[open] summary::after{content:"–"}
.faqs details[open] summary{border-bottom:1px solid var(--line-soft)}
.faq-a{padding:13px 16px 4px;color:var(--muted);font-size:1rem}
.faq-a p:last-child{margin-bottom:12px}

/* ------------------------------------------------------------------ *
   Forms, buttons, ads
 * ------------------------------------------------------------------ */
.btn{
  display:inline-block;font-family:var(--disp);font-weight:600;font-size:1rem;
  background:var(--navy);color:#fff;border:0;border-radius:9px;padding:11px 20px;
  cursor:pointer;text-decoration:none;
}
.btn:hover{background:var(--navy-dark);color:#fff}

.contactform{max-width:560px;display:flex;flex-direction:column;gap:16px;padding-bottom:40px}
.contactform input,.contactform textarea{
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:10px 12px;font:inherit;font-size:1rem;color:var(--ink);width:100%;
}
.contactform textarea{resize:vertical}
.contactform .field label{margin-bottom:6px}

.formnote{font-size:0.9062rem;margin:2px 0 0}
.formnote.ok{color:var(--green)}
.formnote.bad{color:#A8361F}

.signup{background:var(--navy);color:#fff;margin-top:40px}
.signup-in{display:grid;gap:22px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding-block:34px}
.signup-copy,.signup-form{min-width:0}
.signup h2,.signup p,.signup .formnote{overflow-wrap:anywhere}
.signup h2{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:6px}
.signup p{color:#C6D4E4;font-size:0.9688rem;margin:0}
.signup-form{display:flex;flex-wrap:wrap;gap:8px}
.signup-form input[type=email]{
  flex:1 1 11ch;min-width:0;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);
  color:#fff;border-radius:9px;padding:11px 14px;font:inherit;font-size:1rem;
}
.signup-form input[type=email]::placeholder{color:#A7BACE}
.signup-form input[type=email]:focus{background:#fff;color:var(--ink);outline:2px solid var(--amber)}
.signup-form button{border:0;border-radius:9px;background:var(--amber);color:#fff;font-family:var(--disp);font-weight:600;font-size:1rem;padding:0 22px;cursor:pointer}
.signup-form button:hover{background:#9E4E0B}
.signup-form .formnote{flex-basis:100%;color:#C6D4E4}
.signup-form .formnote.ok{color:#9BE3C0}
.signup-form .formnote.bad{color:#FFC2B4}

.ad-slot{margin:44px auto;text-align:center;max-width:1120px;padding-inline:20px;min-height:1px}
/* Clearance bought deliberately, not by eye: both of these sit below a download
   control, and the gap is what the distance check demands — 120px from a link
   that merely looks like a download, 200px from one that actually is. */
.ad-slot.is-adsense[data-slot="printablesBelowContent"],
.ad-slot.is-demo[data-slot="printablesBelowContent"]{margin-top:96px}
/* Clearance is needed on both sides here: the download box is above it on a
   wide screen, and on a phone the sidebar's "Get the sheet" card stacks in
   below it, so a top margin alone fixed only half the problem. */
.ad-slot.is-adsense[data-slot="printableBelowContent"],
.ad-slot.is-demo[data-slot="printableBelowContent"]{margin-top:128px;margin-bottom:120px}

/* ------------------------------------------------------------------ *
   Footer
 * ------------------------------------------------------------------ */
.site-foot{background:var(--navy-dark);color:#C6D4E4;padding-top:36px;font-size:0.9375rem}
.foot-grid{display:grid;gap:26px;grid-template-columns:1.6fr 1fr 1fr 1fr;padding-bottom:28px}
.site-foot .brand-name{color:#fff;font-size:1.25rem}
.foot-brand p{margin:7px 0 0;font-size:0.9062rem;max-width:38ch}
.foot-logo{display:inline-block;text-decoration:none}
.foot-logo:hover .brand-name{color:#E9954A}
.foot-logo .brand-name{transition:color .15s}
.foot-tag{font-weight:600}
.foot-blurb{margin-top:12px!important;color:#A9BDD4;line-height:1.55}
.foot-report{margin-top:12px!important;color:#A9BDD4;line-height:1.55}
.foot-report a{color:#fff;text-decoration:underline;font-size:inherit}
.foot-report a:hover{color:#E9954A}
.foot-col h3{font-family:var(--disp);font-size:0.875rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.foot-col ul,.foot-social{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.foot-social{flex-direction:row;gap:14px;margin-top:12px}
.site-foot a{color:#C6D4E4;text-decoration:none;font-size:0.9062rem}
/* Footer and column links are navigation, not prose, so they carry the 24px
   minimum target size. The padding does the work; the gap above shrank to match. */
.foot-col ul a,.foot-social a{display:inline-block;padding-block:5px;min-height:24px}
.site-foot a:hover{color:#fff;text-decoration:underline}
.foot-base{border-top:1px solid rgba(255,255,255,.12);padding-block:16px 22px}
.foot-base p{margin:0;font-size:0.8125rem;color:#8FA5BC;max-width:90ch}

.postlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.postlist h2{font-size:1.3125rem;font-weight:600}
.postlist a{text-decoration:none}
.postlist a:hover h2{color:var(--amber)}
.postlist p{margin:5px 0 0;color:var(--muted);font-size:0.9688rem}
.postlist .meta{font-size:0.8438rem;color:var(--faint)}

/* ------------------------------------------------------------------ *
   Responsive
 * ------------------------------------------------------------------ */
@media (max-width:60em){
  .calc-body{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* The full nav needs 800px to sit on one line; it was being hidden behind a
   hamburger from 1120px down, which cost every tablet and small laptop its
   navigation for no reason. Measured, not guessed. */
@media (max-width:49.9375em){
  .navtoggle{display:flex}
  .sitenav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--surface);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 16px;
    box-shadow:var(--shadow);
  }
  .sitenav.open{display:flex}
  .sitenav ul{flex-direction:column;gap:0}
  .sitenav ul a{display:block;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:1rem}
  .searchbox{margin-top:12px}
  .searchbox input{width:100%}
  .head-row{position:relative}
}
@media (min-width:50em) and (max-width:64.9375em){
  /* Between the nav appearing and the wrap reaching full width, trim the gaps
     rather than dropping to a hamburger. */
  .head-row{gap:12px}
  .sitenav{gap:12px}
  .sitenav ul{gap:13px}
  .searchbox input{width:104px}
}
@media (max-width:69.9375em){
  .signup-in{grid-template-columns:1fr}
}
@media (max-width:35em){
  body{font-size:1rem}
  .tilegrid{grid-template-columns:1fr}
  .tool-form{padding:16px}
  .fields{grid-template-columns:1fr}
  .results{grid-template-columns:1fr}
  .result-primary .result-val{font-size:2.0625rem}
  .foot-grid{grid-template-columns:1fr}
  /* The row wraps to two lines here, so the space reserved for it upstairs
     (74px, the unwrapped height) is 48px short and the first row lands with a
     jolt. Everything below the calculator moves — on a phone, which is most of
     the traffic. */
  .area-row{flex-wrap:wrap}
  .area-rows{min-height:122px}
  .area-f{flex-basis:calc(50% - 40px)}
  .hero-search{flex-direction:column}
  .hero-search button{padding:11px 20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- working-out, sources, corrections ---------- */
.working{margin-top:34px}
.formula{list-style:none;counter-reset:f;margin:0;padding:0}
.formula > li{
  counter-increment:f;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);margin-bottom:8px;
}
.formula > li::before{
  content:counter(f);flex:none;font-family:var(--disp);font-weight:700;font-size:0.75rem;
  color:var(--faint);min-width:14px;
}
.formula code{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:0.9062rem;
  color:var(--navy);background:var(--navy-soft);padding:3px 7px;border-radius:5px;
  font-variant-numeric:tabular-nums;
}
.formula span{color:var(--muted);font-size:0.9062rem;flex:1;min-width:180px}

.sources{margin-top:34px}
.sources ul{list-style:none;margin:0;padding:0}
.sources li{
  padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:0.9688rem;color:var(--muted);
}
.sources li:last-child{border-bottom:0}
.sources-lead{font-size:0.9062rem;color:var(--muted);margin:0 0 10px;overflow-wrap:anywhere}
.sources strong{color:var(--ink);font-weight:600}
.sources li > a{font-size:0.875rem;white-space:nowrap;margin-left:4px}
.sources-lead a{white-space:normal;overflow-wrap:anywhere}

.correction{
  margin-top:26px;padding:13px 16px;border-left:3px solid var(--amber);
  background:var(--amber-soft);border-radius:0 var(--radius) var(--radius) 0;
  font-size:0.9062rem;color:#6E3C0C;
}
.correction a{color:var(--amber);font-weight:600}

/* ---------- cookie consent ---------- */
.cookiebar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--navy-dark);color:#D6E0EC;
  border-top:3px solid var(--amber);
  box-shadow:0 -6px 24px -12px rgba(0,0,0,.5);
}
.cookiebar-in{
  max-width:1120px;margin:0 auto;padding:14px 20px;
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;
}
.cookiebar p{margin:0;font-size:0.9062rem;line-height:1.55;max-width:68ch}
.cookiebar a{color:#fff;text-decoration:underline}
.cookiebar a:hover{color:#F0B87A}
.cookiebar-btns{display:flex;gap:9px;flex:none}
.cookiebar .btn{background:var(--amber);border-color:var(--amber);font-size:0.9062rem;padding:9px 16px}
.cookiebar .btn:hover{background:#8F450B}
.cookiebar .btn-ghost{
  background:transparent;border-color:rgba(255,255,255,.3);color:#D6E0EC;
  font-size:0.9062rem;padding:9px 16px;
}
.cookiebar .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
@media (max-width:35em){
  .cookiebar-in{padding:13px 16px}
  .cookiebar p{font-size:0.8438rem}
  .cookiebar-btns{width:100%}
  .cookiebar-btns button{flex:1}
}

.contact-notes{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.contact-notes h2{font-size:1.25rem;margin:26px 0 8px}
.contact-notes h2:first-child{margin-top:0}

/* --- Intro sections: prose plus a panel, instead of 300px of nothing ------
   A reading column stops at about 74ch for good reason, which on a 1120px wrap
   leaves a third of the row empty. The panel is the evidence for what the prose
   next to it claims, not decoration to fill the hole. */
.introcols{display:flex;gap:40px;align-items:flex-start}
.introcols > .prose{flex:1 1 0;min-width:0}
.introside{flex:0 0 300px;background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--navy);border-radius:10px;padding:18px 20px 16px;
  position:sticky;top:78px}
.introside h3{font-size:1.0625rem;margin:0 0 8px;color:var(--ink)}
.introside .is-lede{font-size:0.9062rem;line-height:1.55;color:var(--muted);margin:0 0 14px}
.is-stat{font-size:0.9062rem;color:var(--muted);margin:0 0 12px;padding:9px 11px;
  background:var(--surface-2);border-radius:7px;line-height:1.45}
.is-stat strong{color:var(--navy);font-family:var(--disp);font-size:1.0625rem}
.is-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:5px}
.is-list li{font-size:0.875rem;line-height:1.4;color:var(--ink);padding-left:15px;position:relative}
.is-list li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;
  border-radius:50%;background:var(--navy)}
.is-list .is-more{color:var(--muted);font-style:italic}
.is-list .is-more::before{background:var(--line)}
.is-dl{margin:0 0 12px}
.is-dl dt{font-family:var(--disp);font-weight:700;font-size:0.9375rem;color:var(--navy);margin-top:10px}
.is-dl dt:first-child{margin-top:0}
.is-dl dd{margin:2px 0 0;font-size:0.875rem;line-height:1.5;color:var(--muted)}
.is-foot{font-size:0.875rem;line-height:1.5;color:var(--muted);margin:0;
  padding-top:12px;border-top:1px solid var(--line-soft)}
.is-foot a{font-weight:600}

/* The prose column is capped in `ch` — 68 here, 74 in the two "why" sections —
   which is right for a reading measure but wrong for a flex item that has to
   fill a row. `ch` is the width of the font's own "0", so the cap lands in a
   different place on every machine: in testing it resolved to 800px and never
   bound, while on Windows with Segoe UI it resolved to ~623px and left 117px of
   dead space to the right of the panel. The column width here is already
   decided by the 1120px wrap and the 300px panel beside it, so the measure does
   not need a second, font-dependent limit on top.
   Below the breakpoint the two stack and the cap matters again, so it stays. */
@media (min-width:58.0625em){
  /* The doubled class is for specificity, not a typo — `.why .prose` and
     `.blog-intro` are both defined further down the file and would otherwise
     win on source order. Same fix as `.prose.prose-ref` above. */
  .introcols > .prose.prose{max-width:none}
}

/* Below the point where two columns stop earning their keep, the panel follows
   the prose at full width rather than squeezing both. */
@media (max-width:58em){
  .introcols{display:block}
  .introside{position:static;margin-top:26px;max-width:640px}
}

.why{padding-block:14px 8px}
.why .prose{max-width:74ch}
.why h3{margin-top:26px}
.why-more{font-size:0.9375rem;color:var(--muted);margin-top:22px}
.why-more a{font-weight:600}
.blog-intro{max-width:74ch;margin-bottom:6px}

/* ---------- email this list ---------- */
.sendlist{
  max-width:1120px;margin:22px auto 0;padding:20px 22px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:var(--radius);display:grid;gap:18px;grid-template-columns:1.1fr 1fr;align-items:center;
}
.sendlist-copy h2{font-family:var(--disp);font-size:1.1875rem;font-weight:700;margin:0 0 5px}
.sendlist-copy p{margin:0;font-size:0.9062rem;color:var(--muted);line-height:1.5}
.sendlist-form{min-width:0}
.sendlist-row{display:flex;gap:8px;flex-wrap:wrap}
.sendlist-row input[type=email]{
  flex:1;min-width:180px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);
  padding:10px 12px;font:inherit;font-size:1rem;color:var(--ink);
}
.sendlist-row input[type=email]:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)}
.sendlist-row .btn{flex:none}
.sendlist-opt{display:flex;gap:9px;align-items:flex-start;margin-top:11px;font-size:0.875rem;color:var(--muted);line-height:1.45;cursor:pointer}
.sendlist-opt input{margin-top:0;flex:none;width:24px;height:24px;accent-color:var(--navy);cursor:pointer}
.sendlist-note{margin:9px 0 0;font-size:0.8125rem;color:var(--faint)}
.sendlist-note a{color:var(--faint);text-decoration:underline}
.sendlist .formnote{margin:8px 0 0;font-size:0.875rem;min-height:1.2em}
.sendlist .formnote.ok{color:var(--green)}
.sendlist .formnote.bad{color:#A8361F}

.restored{
  margin:0 0 14px;padding:10px 14px;background:var(--navy-soft);border-radius:8px;
  font-size:0.9062rem;color:var(--navy);font-weight:600;
}

@media (max-width:47.5em){
  .sendlist{grid-template-columns:1fr;padding:18px}
}

/* ---------- printables ---------- */
.sheetgrid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.sheet-in{display:flex;gap:14px;align-items:flex-start;padding:16px 16px 12px;text-decoration:none;color:inherit;flex:1}
/* With a thumbnail the card becomes a stack: the sheet, then its name. The
   image carries width and height so the row height is fixed before it loads. */
.sheet-in.has-prev{flex-direction:column;gap:12px;padding:14px 14px 12px}
.sheet-prev{
  display:block;width:100%;height:auto;aspect-ratio:260/337;object-fit:cover;object-position:top center;
  max-height:170px;border:1px solid var(--line);border-radius:6px;background:#fff;
}
.sheet-in.has-prev:hover .sheet-prev{border-color:var(--navy)}
.sheet-ico{color:var(--navy);flex:none;margin-top:2px}
.sheet-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.sheet-title{font-family:var(--disp);font-weight:700;font-size:1.0625rem;color:var(--ink)}
.sheet-sub{font-size:0.9062rem;color:var(--muted);line-height:1.45}
.sheet-in:hover .sheet-title{color:var(--amber)}
.sheet-dls{display:flex;gap:0;border-top:1px solid var(--line-soft)}
.sheet-dls .sheet-dl{flex:1;border-top:0}
.sheet-dls .sheet-dl + .sheet-dl{border-left:1px solid var(--line-soft)}
.sheet-dl{
  display:block;padding:10px 16px;border-top:1px solid var(--line-soft);background:var(--surface-2);
  font-family:var(--disp);font-weight:600;font-size:0.9062rem;color:var(--navy);text-decoration:none;
}
.sheet-dl:hover{background:var(--navy-soft)}

.dlbox{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:28px;
}
.dlbox-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.dlbox-txt strong{font-family:var(--disp);font-size:1.0312rem}
.dlbox-txt span{font-size:0.8438rem;color:var(--faint)}
.dlbox .btn{flex:none}
/* Two formats, so the buttons need their own row that can wrap on a phone.
   flex:none on the container stopped it shrinking, which pushed the second
   button off the side of a 320px screen instead of wrapping it. */
.dlbox-btns{display:flex;flex-wrap:wrap;gap:9px;min-width:0}
.dlbox-btns .btn,.dlbox-btns .btn-ghost{flex:0 1 auto;min-width:0;text-align:center}
.dlnote{margin:-16px 0 26px;font-size:0.9062rem;color:var(--muted);line-height:1.5}
.dlnote strong{color:var(--ink);font-weight:600}

/* Printable preview — a picture of the actual sheet, rendered from the PDF.
   width and height are on the img so the space is reserved before it loads and
   nothing shifts underneath it. */
/* Fills its column. The source is 1400px wide, so at the 756px the column
   gives it the browser is scaling down — the direction that stays sharp — and
   the 56px that used to sit unused between the sheet and the sidebar is gone.
   The cap is the source width, so it can never stretch past 1:1 even where the
   sidebar stacks and the column gets wider. */
.sheetprev{margin:0 0 30px;max-width:1400px}
.sheetprev a{display:block;line-height:0;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff;box-shadow:var(--shadow);transition:box-shadow .15s,border-color .15s}
.sheetprev a:hover{border-color:var(--navy);box-shadow:0 6px 20px rgba(22,32,43,.14)}
.sheetprev img{display:block;width:100%;height:auto}
.sheetprev figcaption{margin-top:9px;font-size:0.875rem;color:var(--faint);line-height:1.45}
/* A card can offer more than one file; stack the buttons rather than
   letting them collide in a 290px column. */
.card .btn-ghost{display:block;text-align:center}
.card .btn-ghost + .btn-ghost{margin-top:8px}

.printable .card{margin-top:26px}
.printable .card h2{font-size:1.0625rem;margin-bottom:8px}
.printable .linklist .muted{color:var(--muted);font-size:0.9062rem}
/* The closing download, for readers who got to the end. Marked as a repeat
   rather than a new offer — softer than the one at the top, which is still the
   one most people will use. */
/* One line under the lede, so the first screen still says where the file is. */
.headjump{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:16px 0 0;font-size:0.9375rem}
.headjump a{font-family:var(--disp);font-weight:700;text-decoration:none;
  border-bottom:2px solid var(--amber);padding-bottom:1px}
.headjump a:hover{color:var(--amber)}
.hj-sub{color:var(--muted);font-size:0.875rem}

.dlbox-end{margin-top:30px;background:var(--surface-2);border-left-color:var(--green)}
.dlbox-end .dlbox-txt strong{font-size:1rem}

.printnote{margin-top:26px;font-size:0.875rem;color:var(--faint)}

/* The vertical pin. Pinterest's scraper skips display:none, so this is
   positioned off-screen instead — visible to the save button, not to readers. */
.pin-src{position:absolute;left:-99999px;top:0;width:1000px;height:1500px;pointer-events:none}

/* ------------------------------------------------------------------ *
   Print

   This site's whole pitch is "take this list to the store", so a
   calculator page is going to get printed. Untreated it printed the nav,
   the search box, the email form and the footer — and the cookie bar,
   being fixed, stamped itself across every single page on top of the
   result. What follows keeps the numbers and the reasoning and throws
   away everything that only makes sense on a screen.
 * ------------------------------------------------------------------ */
@media print {
  .hero-demo,.sheetstrip,.introside,.headjump,.navpanel{display:none!important}
  @page { margin: 15mm; }

  html { font-size: 100%; }
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.45;
  }

  /* Screen furniture. The cookie bar first — it is position:fixed, so
     without this it repeats on every sheet. */
  #cookiebar, .annbar, .site-head, .site-foot, .signup, .searchbox,
  .navtoggle, .skip, .sendlist, .calc-aside, .hero-search, .pin-src,
  .breadcrumbs, .correction, .formnote, [data-sendlist], [data-ad],
  .ad-slot, .tile-kind,
  /* The side column and the jump bar are navigation — no use on paper. */
  .page-side, .page-toc, .page-aside, .jumpbar, .sheetprev {
    display: none !important;
  }

  /* Fixed and sticky elements repeat on every sheet, so they have to go.
     Only those two — resetting every position broke the step numbers, which
     are absolutely positioned counters, and scattered them into the
     breadcrumb. */
  [style*="position:fixed"], [style*="position: fixed"],
  .cookiebar, .sticky, .is-sticky { position: static !important; }

  .wrap, .container, .calc-page, .prose, .lede {
    max-width: none !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .calc-page { display: block !important; }
  /* Without the sidebar the article column takes the whole sheet. */
  .page-body { display: block !important; }
  .page-main { width: auto !important; }

  h1 { font-size: 20pt; margin-bottom: 4pt; }
  h2 { font-size: 13pt; margin-top: 14pt; }
  h3 { font-size: 11.5pt; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; color: #000 !important; }

  /* Backgrounds cost ink and add nothing on paper. Borders carry the
     structure instead. */
  .card, .results, .result, .areas, .formula, .sources, .faqs, .band,
  .field-in, .tile {
    background: #fff !important;
    box-shadow: none !important;
    border-color: #999 !important;
  }

  /* The answer is the reason the page is being printed: keep it whole
     and keep it on the first sheet. */
  .results { break-inside: avoid; page-break-inside: avoid; border: 1.5pt solid #000 !important; }
  /* The empty reserve that stops the screen layout shifting has no job on
     paper, and it was pushing the answer onto a second sheet. */
  .area-rows { min-height: 0 !important; }
  .calc-head { margin-bottom: 8pt !important; }
  .card { break-inside: auto; page-break-inside: auto; padding: 10pt !important; }
  .lede { font-size: 11pt !important; }

  /* The hints under each field explain how to fill the form in. On a sheet
     that already has the answer on it they are just height — and the height
     was enough to push the answer onto a second page. */
  .field .help, .areas-head p, .hint { display: none !important; }
  .fields { gap: 8pt !important; }
  .field-in input, .field-in select { padding: 4pt 6pt !important; }
  .results { margin-top: 8pt !important; }
  .result { padding: 6pt 8pt !important; }
  .result { border-bottom: 0.5pt solid #bbb !important; }
  .result-val { color: #000 !important; font-size: 16pt !important; }
  .result-primary .result-val { font-size: 22pt !important; }

  /* Inputs print as the values the reader typed, not as empty widgets. */
  .field-in { border: 0.5pt solid #999 !important; }
  .field-in input, .field-in select { color: #000 !important; }
  .unit { background: #fff !important; color: #000 !important; }
  .areas .btn, .areas button, .btn, .btn-ghost { display: none !important; }

  .steps > li, .faqs > li, .sources li, tr, .card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  table { border-collapse: collapse; width: 100% !important; }
  th, td { border: 0.5pt solid #999 !important; padding: 3pt 5pt !important; }
  thead { display: table-header-group; }

  /* On paper a link is only useful if you can read where it goes — but
     only for real destinations, not every in-page anchor. */
  a { color: #000 !important; text-decoration: underline; }
  .prose a[href^="http"]::after,
  .sources a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }

  img { max-width: 100% !important; break-inside: avoid; }

  /* Where it came from, so a printed sheet can be traced back. */
  main::after {
    content: "onetripdiy.com — estimates only; check against your supplier's coverage figures before buying.";
    display: block;
    margin-top: 14pt;
    padding-top: 6pt;
    border-top: 0.5pt solid #999;
    font-size: 8.5pt;
    color: #444;
  }
}

/* ------------------------------------------------------------------ *
 * Ad and promo placements
 *
 * Every slot is the same shape whatever fills it — an AdSense unit, one of our
 * own promos, or the dashed demo box — so turning one into another never moves
 * the page around underneath the reader. The slot reserves its own space, which
 * is what keeps CLS at zero; ads injected into a page that made no room for
 * them are the usual reason a fast site stops feeling like one.
 * ------------------------------------------------------------------ */

.ad-demo{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:120px;padding:26px 20px;
  border:2px dashed var(--line);border-radius:14px;background:var(--surface-2);
}
.ad-demo b{font-family:var(--disp);font-size:0.8125rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.ad-demo span{font-size:0.8125rem;color:var(--faint);opacity:.75;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* A promo is our own content, so it is allowed to look like the site. The
   disclosure line is what keeps that honest, and it is written from the promo's
   kind rather than from a checkbox.

   Three columns: picture, words, action. An earlier version stacked the button
   under the text and left the right two-thirds of the card empty whenever
   someone wrote a short headline and no body — which is most of the time. */
/* No width of its own: the slot around it already carries the same 1120px and
   20px gutter as every other .wrap on the page, so filling it is what makes a
   placement line up with the content above and below it. Capping this at 820px
   left every promo inset by ~130px a side against the rest of the page. */
.promo{max-width:none;margin-inline:auto;text-align:left}
.promo-card{
  display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:12px;padding:16px 20px;
}
.promo-sponsor{border-left-color:var(--navy)}
.promo-own{border-left-color:var(--green)}

/* A fixed window, so the card is the same shape whatever anyone uploads. The
   picture is contained rather than cropped: a promo image is as likely to be a
   tall sheet preview or a logo as a landscape product shot, and cropping to
   fill mangles two of those three. */
/* An explicit height, not aspect-ratio. A percentage height on the image cannot
   resolve against a box whose own height came from `aspect-ratio`, so it fell
   back to auto and a tall picture rendered at 132x171 inside a 132x99 window —
   cropped by overflow:hidden, which is the one thing "contain" is meant to
   prevent. */
/* The window is a positioned box and the picture is laid into it absolutely.
   `height:100%` does not work here: `picture{display:contents}` leaves the <img>
   with no parent box for a percentage to resolve against, so it fell back to
   auto and a tall picture rendered 132x171 inside a 132x99 window — cropped by
   overflow:hidden, which is the one thing "contain" exists to prevent. */
.promo-img{flex:0 0 132px;height:99px;border-radius:8px;overflow:hidden;position:relative}
.promo-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.promo-img a{position:absolute;inset:0;display:block}

/* basis 0, not auto: with `auto` the body's basis is the width of its own text,
   so a two-line description pushed the button onto a row of its own and made
   the card twice as tall. */
.promo-body{flex:1 1 0;min-width:0}
.promo-act{flex:0 0 auto}

.promo-badge{display:inline-block;font-family:var(--disp);font-size:0.6875rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--amber);background:var(--amber-soft);
  border-radius:999px;padding:3px 9px;margin-bottom:7px}
.promo-sponsor .promo-badge{color:var(--navy);background:var(--navy-soft)}
.promo-own .promo-badge{color:var(--green);background:var(--green-soft)}

.promo-head{font-family:var(--disp);font-size:1.0625rem;margin:0;line-height:1.3}
.promo-text{margin:5px 0 0;font-size:0.9375rem;color:var(--muted);line-height:1.5}

/* Smaller than a page's own buttons. This is an aside, not the thing the
   reader came for, and a promo button that outweighs the calculator's own
   Calculate button is reaching. */
.promo-cta{display:inline-block;font-family:var(--disp);font-weight:700;
  font-size:0.875rem;text-decoration:none;white-space:nowrap;
  color:#fff;background:var(--amber);border-radius:999px;padding:8px 18px}
.promo-cta:hover{background:var(--amber-dark,#8C450C)}
.promo-sponsor .promo-cta{background:var(--navy)}
.promo-own .promo-cta{background:var(--green)}

/* Its own full-width row at the foot of the card, above the border, so it
   reads as a statement about the card rather than a caption on the button. */
.promo-note{flex:1 1 100%;margin:0;padding-top:10px;border-top:1px solid var(--line-soft);
  font-size:0.75rem;line-height:1.4;color:var(--faint)}
/* Pasted network code brings its own look, so this frame stays plain — but it
   needs a frame, or the disclosure's rule floats on the page with nothing above
   it holding the two together. */
.promo-raw{text-align:center;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--navy);border-radius:12px;padding:16px 20px;
  /* Network banners come with fixed pixel widths, often inline — which beats any
     rule written here. Containing the overflow to this box is the only reliable
     defense: a 728px leaderboard scrolls inside its own frame instead of making
     the whole page scroll sideways on a phone. */
  max-width:100%;overflow-x:auto}
.promo-raw > .promo-note{margin-top:14px}
.promo-raw img{max-width:100%;height:auto}

/* A promo that is only a picture is a banner, not a card with a thumbnail in
   it. The 132px window is right when there are words beside it and absurd when
   the picture is the whole promo, so the window is dropped entirely and the
   image runs the width of the card, capped in height so a tall upload cannot
   take over the page. */
/* A banner has no card around it. A sponsor's artwork arrives already designed
   — its own edges, its own background — and a second frame around it reads as a
   mistake. So no border, no fill, no accent bar: just the picture, sized to the
   same column as the content above it. */
.promo-banner{padding:0;background:none;border:0;border-radius:0}
.promo-banner .promo-img{flex:1 1 100%;height:auto;max-width:none;border-radius:0}
.promo-banner .promo-img a{display:block}
/* width:auto, not 100% — a 600px banner should not be stretched to 1080 and go
   soft. It fills the column when it is big enough to, and centers when it is
   not. The height cap is what stops a squarish upload becoming a full screen. */
.promo-banner .promo-img{position:static}
.promo-banner .promo-img a{position:static}
.promo-banner .promo-img img{position:static;display:block;width:auto;max-width:100%;
  height:auto;max-height:380px;margin-inline:auto}
.promo-banner .promo-note{border-top:0;padding-top:9px}

/* Without a link there is no button and the words simply grow into the space —
   `flex:1 1 0` already does that. An earlier rule here forced the body to 100%,
   which pushed it onto a line of its own *below* the picture instead of beside
   it. */

/* Below the three-column width the card stacks, the picture shrinks to a
   thumbnail beside the words, and the button goes full width where a thumb can
   reach it. */
@media (max-width:44em){
  .promo-card{flex-wrap:wrap;gap:14px;align-items:flex-start}
  .promo-img{flex:0 0 84px;height:63px}
  .promo-banner .promo-img{height:auto}
  .promo-body{flex:1 1 60%}
  .promo-act{flex:1 1 100%}
  .promo-cta{display:block;text-align:center}
}
}

.foot-assoc{margin-top:6px}

/* ------------------------------------------------------------------ *
 * Article text fills its column wherever there is a sidebar beside it
 *
 * .prose caps its width at 68ch — sixty-eight characters of whatever font is
 * showing. That is a sensible reading measure on a page of its own. Beside a
 * sidebar it is wrong twice over: the column already sets the measure, and
 * `ch` is a property of the font, so the cap lands somewhere different on
 * every machine. With this site's Source Sans 3, which is narrow, it stopped
 * roughly 170px short of the download box directly above it — and every width
 * test had missed it, because the test browser cannot fetch web fonts and
 * measured a much wider fallback. This is the second `ch` bug on this site.
 *
 * Only while the sidebar is on screen. Once it collapses the column runs the
 * full width, where uncapped text would reach 120 characters a line and the
 * 68ch cap is doing its job.
 * ------------------------------------------------------------------ */
@media (min-width:70em){
  .page-main .prose{max-width:none}
}
@media (min-width:60.0625em){
  .calc-body > .prose{max-width:none}
}
/* A placement at page level carries the same 20px gutter as .wrap, so it lines
   up with the content above and below it. Inside an article column that gutter
   is already there — carried by the column — and doubling it left a banner
   inset 20px each side from the text it sits in. */
.page-main .ad-slot, .calc-body .ad-slot, .refpage .ad-slot{padding-inline:0}