:root{
  --paper:#fcfbf9; --ink:#15181a; --ink-soft:#3c434a; --muted:#6c757d;
  --rule:#e2ded5; --line:#cdc7bb; --accent:#1d5a4b; --accent-ink:#12443a;
  --wash:#f4f1ea; --warn:#8a4a1f;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16.5px/1.62 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:60rem;margin:0 auto;padding:0 1.4rem}
a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid rgba(29,90,75,.28)}
a:hover{border-bottom-color:var(--accent-ink)}
header.top{border-bottom:1px solid var(--rule);background:#fff}
.top-in{max-width:60rem;margin:0 auto;padding:.95rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.logo{font:700 1.1rem/1 var(--sans);letter-spacing:-.01em;color:var(--ink);border:0}
.logo span{font:400 .62rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-top:.25rem}
nav.top-nav{display:flex;gap:1.2rem;flex-wrap:wrap}
nav.top-nav a{font:500 .82rem/1.6 var(--sans);color:var(--ink-soft);border:0}
nav.top-nav a:hover{color:var(--accent-ink)}
main{padding:2.2rem 0 3rem}
h1{font-size:clamp(1.7rem,3.4vw,2.25rem);line-height:1.18;letter-spacing:-.02em;margin:0 0 .8rem;text-wrap:balance}
h2{font-size:1.18rem;margin:2.4rem 0 .6rem;letter-spacing:-.01em}
h3{font-size:1rem;margin:1.5rem 0 .4rem}
p{margin:0 0 1rem;max-width:44rem;text-wrap:pretty;color:var(--ink-soft)}
ul,ol{max-width:44rem;padding-left:1.15rem;color:var(--ink-soft);margin:0 0 1rem}
li{margin-bottom:.35rem}
.crumbs{font:400 .72rem/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
.crumbs a{color:var(--muted);border:0}
.lede{font-size:1.08rem;color:var(--ink-soft);max-width:40rem}

/* ---- the tool ---- */
.tool{background:#fff;border:1px solid var(--line);border-radius:2px;padding:1.3rem 1.35rem 1.5rem;margin:0 0 1.6rem}
.tool .grid{display:grid;gap:.9rem 1.1rem;grid-template-columns:1fr}
@media(min-width:38rem){.tool .grid{grid-template-columns:1fr 1fr}}
.field label{display:block;font:500 .8rem/1.4 var(--sans);letter-spacing:.02em;margin-bottom:.3rem;color:var(--ink)}
.field .hint{font-size:.76rem;color:var(--muted);margin-top:.25rem}
.field input,.field select{width:100%;font:400 1rem/1.4 var(--sans);padding:.62rem .7rem;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:2px;min-height:44px}
.field input:focus,.field select:focus{outline:2px solid rgba(29,90,75,.35);outline-offset:1px;border-color:var(--accent)}
.result{margin-top:1.2rem;border-top:1px solid var(--rule);padding-top:1rem}
.result .label{font:400 .7rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.result .big{font:600 2rem/1.1 var(--sans);letter-spacing:-.02em;color:var(--accent-ink)}
.result .big .unit{font:400 .95rem/1 var(--sans);color:var(--ink-soft);letter-spacing:0;margin-left:.2rem}
.result .secondary{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-size:.9rem;color:var(--ink-soft)}
.result .secondary b{font-weight:600;color:var(--ink)}
.result .note{margin-top:.8rem;font-size:.82rem;color:var(--muted);max-width:38rem}

/* ---- reserved ad slots: height fixed so nothing shifts when they fill ---- */
.ad-slot{border:1px solid var(--rule);background:#fbfaf7;margin:1.6rem 0;display:flex;align-items:center;justify-content:center;font:400 .62rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#c0bab0}
.ad-slot.inline{min-height:280px}
.ad-slot.leader{min-height:100px}
.ad-slot.footer{min-height:250px}
@media(max-width:36rem){.ad-slot.inline{min-height:250px}}

details{border-top:1px solid var(--rule);padding:.85rem 0}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;font-weight:600;font-size:.95rem;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--muted);font-weight:400}
details[open] summary::after{content:"–"}
details p{margin:.6rem 0 0;font-size:.93rem}

.examples{display:grid;gap:1.1rem;margin:0 0 1.4rem}
@media(min-width:44rem){.examples{grid-template-columns:1fr 1fr}}
.example{border-left:2px solid var(--line);padding-left:.9rem}
.example h3{margin:.1rem 0 .3rem;font-size:.92rem}
.example p{font-size:.9rem;margin:0}

.related{display:grid;gap:.6rem;margin:.6rem 0 1.6rem}
@media(min-width:44rem){.related{grid-template-columns:1fr 1fr}}
.related a{display:block;border:1px solid var(--rule);background:#fff;padding:.7rem .85rem;font-size:.92rem;border-bottom:1px solid var(--rule)}
.related a:hover{border-color:var(--accent)}

.byline{font-size:.8rem;color:var(--muted);border-top:1px solid var(--rule);padding-top:.9rem;margin-top:2rem;max-width:44rem}
footer.site{border-top:1px solid var(--rule);background:#fff;margin-top:2rem;font-size:.8rem;color:var(--muted)}
.foot-in{max-width:60rem;margin:0 auto;padding:1.3rem 1.4rem 2.2rem;display:flex;gap:.6rem 2rem;flex-wrap:wrap;justify-content:space-between}
footer.site a{color:var(--muted);border-bottom-color:var(--rule)}

/* hub + home listings */
.cards{display:grid;gap:.9rem;margin:1.2rem 0 2rem}
@media(min-width:44rem){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:60rem){.cards{grid-template-columns:1fr 1fr 1fr}}
.card{position:relative;border:1px solid var(--rule);background:#fff;padding:.95rem 1rem}
/* The whole card is the tap target, not just the 17px title text: the heading link stretches over its
   nearest positioned ancestor. */
.card h3 a::after{content:"";position:absolute;inset:0}
.card h3{margin:.1rem 0 .3rem;font-size:.96rem}
.card p{font-size:.86rem;margin:0;color:var(--muted)}
.card a{border:0}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.note-box{background:var(--wash);border-left:3px solid var(--accent);padding:.9rem 1.1rem;margin:0 0 1.4rem;font-size:.9rem}
.note-box p{margin:0;font-size:.9rem}
@media print{.ad-slot{display:none}}

/* Phone ergonomics. Text links are fine with a mouse and miserable with a thumb: every navigational
   link gets a 44px touch box on small screens, while the visible type stays exactly as it was. */
a.btn-mail{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.2rem;
  background:var(--accent);color:#fff;font:600 .95rem/1 var(--sans);border:0;border-radius:2px;margin:.1rem 0 .7rem}
a.btn-mail:hover{background:var(--accent-ink);color:#fff}

@media(max-width:44rem){
  nav.top-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .3rem;margin:0 -.3rem}
  .logo{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px}
  .crumbs{display:flex;flex-wrap:wrap;align-items:center;line-height:1;gap:0 .1rem}
  .crumbs a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;padding:0 .3rem;margin-left:-.3rem}
  footer.site a{display:inline-flex;align-items:center;min-height:44px}
  footer.site .foot-in{padding-top:.6rem}
  .related a{min-height:48px;display:flex;align-items:center}
  article p a,article li a,main p a:not(.btn-mail){padding:.1rem 0}
  summary{min-height:44px;display:flex;align-items:center}
  summary::after{float:none;margin-left:auto}
}

/* A calculator page earns its keep on a phone only if the answer is on the first screen. Compact the
   masthead, then move the intro paragraph below the tool so the inputs and the result share one
   viewport. The paragraph stays in the document, above the fold of a crawler, unchanged in the HTML. */
@media(max-width:44rem){
  .top-in{padding:.7rem 1.1rem}
  .logo{font-size:1rem}
  .logo span{font-size:.58rem;margin-top:.15rem}
  main{padding:1.1rem 0 3rem}
  h1{font-size:1.5rem;margin-bottom:.55rem}
  .crumbs{margin-bottom:.55rem}
  .wrap:has(> .tool){display:flex;flex-direction:column}
  .wrap:has(> .tool) > .crumbs,
  .wrap:has(> .tool) > h1{order:0}
  .wrap:has(> .tool) > .tool{order:1}
  .wrap:has(> .tool) > .lede{order:2}
  .wrap:has(> .tool) > *{order:3}
  .tool{padding:.9rem}
  .field label{margin-bottom:.2rem}
  .tool .grid{grid-template-columns:1fr 1fr;gap:.65rem .7rem}
  /* an odd field count would leave one half-width field beside a gap: let it take the full row */
  .tool .grid > .field:last-child:nth-child(odd){grid-column:1 / -1}
  .tool .field .hint{font-size:.72rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tool .result{margin-top:.9rem}
}

/* 320-360px phones: the same page with 38px less furniture, so the answer still lands above the fold. */
@media(max-width:24rem){
  .top-in{padding:.6rem .9rem}
  .logo{font-size:.95rem}
  main{padding-top:.8rem}
  h1{font-size:1.32rem;line-height:1.22}
  .crumbs{font-size:.64rem}
  .tool{padding:.75rem}
  .tool .field .hint{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}