@font-face {
  font-family: "Sparnum Serif";
  src: url("fonts/source-serif-4-v2.woff2") format("woff2");
  font-weight: 200 400;
  font-style: normal;
  font-display: swap;
}

:root{
  color-scheme:light;
  --ground:#fbfaf7; --ink:#1a1a17; --muted:#6b6b62; --line:#e0ded6; --accent:#1c5f3f;
  --serif:"Sparnum Serif",Charter,"Iowan Old Style",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]){
  color-scheme:dark;
  --ground:#12120f; --ink:#eae8e2; --muted:#9b9a90; --line:#2c2c26; --accent:#5fa781;
}}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 19px/1.7 var(--serif);-webkit-font-smoothing:antialiased}
main{max-width:44rem;margin:0 auto;
  padding:clamp(3.5rem,11vw,7rem) clamp(1.5rem,6vw,2rem) clamp(3.5rem,8vw,5rem)}

.brand{display:inline-block;font:500 .8rem/1 var(--sans);letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);text-decoration:none}
.brand a{color:inherit;text-decoration:none}
.brand a:hover{color:var(--ink)}
.brand a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.5rem}
.top nav{display:flex;flex-wrap:wrap;gap:.3rem 1.25rem}
.top nav a{font:500 .85rem/1.6 var(--sans);color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--accent)}
.top nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

h1{margin:clamp(2.5rem,6vw,3.5rem) 0 0;
  font:300 clamp(1.5rem,3.9vw,2.6rem)/1.3 var(--serif);
  letter-spacing:-.02em;text-wrap:pretty}
h2{margin:0;font:600 clamp(1.62rem,3.4vw,2.05rem)/1.25 var(--sans);
  letter-spacing:-.022em;color:var(--ink);text-wrap:pretty}
h3{margin:clamp(2.25rem,5vw,3rem) 0 0;
  font:600 1.45rem/1.35 var(--sans);letter-spacing:-.012em;color:var(--ink)}
h3+p{margin-top:.4rem}
/* A term list puts h3 straight after h2, where h3's own top margin opens a gap. */
h2+h3{margin-top:clamp(1.5rem,3.5vw,2rem)}
/* Prose links, same shape as .more a so a definition that links reads like the rest. */
p a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)}
p a:hover{border-bottom-color:var(--accent)}
p a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

p{margin:clamp(1.75rem,4vw,2.25rem) 0 0}
.lede{color:var(--muted)}
section{margin-top:clamp(3.5rem,8vw,5rem);border-top:1px solid var(--line);
  padding-top:2rem}
section>h2+p{margin-top:1.1rem}

.steps{margin:clamp(1.75rem,4vw,2.25rem) 0 0;padding:0;list-style:none;
  counter-reset:step}
.steps li{counter-increment:step;position:relative;padding-left:2.6rem;
  margin-top:1.6rem}
.steps li:first-child{margin-top:0}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;
  left:0;top:.5rem;font:600 .72rem/1 var(--sans);letter-spacing:.06em;
  color:var(--accent)}
.steps b{display:block;font:600 1.02rem/1.4 var(--sans);color:var(--ink)}
.steps span{display:block;margin-top:.35rem;color:var(--muted);font-size:.95rem}

table{margin:clamp(1.75rem,4vw,2.25rem) 0 0;width:100%;border-collapse:collapse;
  font:400 .92rem/1.45 var(--sans);font-variant-numeric:tabular-nums}
th,td{padding:.45rem .6rem .45rem 0;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top}
th{font-weight:600;color:var(--muted)}
td+td,th+th{text-align:right}

figure{margin:clamp(1.75rem,4vw,2.25rem) 0 0}
figure img{display:block;width:100%;height:auto}
figcaption{margin-top:.9rem;font:400 .92rem/1.55 var(--sans);color:var(--muted)}

.contact{font:400 clamp(1.35rem,2.2vw,1.6rem)/1.4 var(--serif)}
.contact a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--line)}
.contact a:hover{border-bottom-color:var(--accent)}
.contact a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;
  border-radius:2px}
.who{font-size:.95rem;color:var(--muted)}

.more{margin:clamp(1.5rem,3vw,2rem) 0 0;padding:0;list-style:none}
.more li{margin-top:.9rem}
.more li:first-child{margin-top:0}
.more a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line);
  font:600 1.05rem/1.4 var(--serif)}
.more a:hover{border-bottom-color:var(--accent)}
.more span{display:block;margin-top:.2rem;color:var(--muted);font-size:.95rem}

footer{margin-top:clamp(4rem,10vw,6.5rem);padding-top:1.5rem;
  border-top:1px solid var(--line);
  font:400 .8rem/1.7 var(--sans);color:var(--muted)}
footer p{margin:0}
footer a{color:inherit}