:root{
  --ink:#14181a; --muted:#5c6b70; --line:#dfe4e3;
  --bg:#fbfaf8; --panel:#fff; --accent:#2f6f62; --accent-dark:#1f4f45;
  --max:74ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
h1,h2,h3,h4{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-weight:600; line-height:1.22; letter-spacing:-.01em; color:var(--ink);
}
a{color:var(--accent-dark); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
a:hover{color:var(--accent)}

/* header */
.site-head{background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.head-in{max-width:1180px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.brand{display:flex; flex-direction:column; padding:16px 0; text-decoration:none}
.brand b{font-family:"Iowan Old Style",Palatino,Georgia,serif; font-size:24px; letter-spacing:.02em; color:var(--ink)}
.brand span{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
nav{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap; padding:12px 0}
nav a{font-size:15px; text-decoration:none; color:var(--muted); padding:4px 0; border-bottom:2px solid transparent}
nav a:hover{color:var(--ink)}
nav a.on{color:var(--ink); border-bottom-color:var(--accent)}

/* layout */
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
main{padding:52px 0 80px}
.prose{max-width:var(--max)}
.prose p,.prose ul,.prose ol,.prose table{margin:0 0 1.1em}
.prose h2{font-size:30px; margin:0 0 .5em}
.prose h3{font-size:21px; margin:2.2em 0 .6em}
.prose h4{font-size:17px; margin:1.8em 0 .5em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li{margin:.35em 0}
.prose li>ul,.prose li>ol{margin:.4em 0}
.prose strong{font-weight:650}
.prose code{background:#eef1f0; padding:.12em .35em; border-radius:3px; font-size:.88em}
.prose pre{background:#12211e; color:#dfe9e6; padding:16px 18px; border-radius:6px; overflow-x:auto; font-size:13.5px; line-height:1.55}
.prose pre code{background:none; padding:0; color:inherit}
.prose table{border-collapse:collapse; width:100%; font-size:15px; display:block; overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
.prose th{background:#f2f4f3; font-weight:650}
figure{margin:1.8em 0; max-width:100%}
figure img{max-width:100%; height:auto; border:1px solid var(--line); border-radius:4px; background:#fff}
figcaption{font-size:14px; color:var(--muted); margin-top:.6em; font-style:italic}

/* hero */
.hero{padding:64px 0 44px; border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(34px,5vw,50px); margin:0 0 18px; max-width:20ch}
.hero p{font-size:19px; color:var(--muted); max-width:62ch; margin:0 0 14px}
.eyebrow{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; font-weight:600}

/* cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin:40px 0}
.card{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:24px 24px 26px}
.card h3{margin:0 0 10px; font-size:19px}
.card p{margin:0 0 14px; font-size:15.5px; color:var(--muted)}
.card a{font-size:15px; font-weight:600; text-decoration:none}
.card a::after{content:" →"}

/* section page w/ toc */
.cols{display:grid; grid-template-columns:250px minmax(0,1fr); gap:56px; align-items:start}
.toc{position:sticky; top:96px; font-size:14.5px; max-height:calc(100vh - 130px); overflow-y:auto}
.toc h4{margin:0 0 12px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-family:inherit; font-weight:700}
.toc ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--line)}
.toc li{margin:0}
.toc a{display:block; padding:5px 0 5px 14px; text-decoration:none; color:var(--muted); border-left:2px solid transparent; margin-left:-1px; line-height:1.4}
.toc a:hover{color:var(--ink); border-left-color:var(--accent)}
article.entry{padding:0 0 8px; margin:0 0 56px; border-bottom:1px solid var(--line); scroll-margin-top:96px}
article.entry:last-child{border-bottom:0}
.entry>h2:first-child{margin-top:0}

/* misc */
.lede{font-size:19px; color:var(--muted); max-width:62ch}
.contact-block{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:26px 28px; max-width:440px; margin:28px 0}
.contact-block div{margin:0 0 10px}
.contact-block .lbl{font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
footer{border-top:1px solid var(--line); background:var(--panel); padding:34px 0 44px; font-size:14.5px; color:var(--muted)}
footer .wrap{display:flex; gap:20px; justify-content:space-between; flex-wrap:wrap}
footer a{color:var(--muted)}
.entry-date{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:-.3em 0 1.1em}
.note{background:#f2f6f4; border-left:3px solid var(--accent); border-radius:0; padding:16px 20px; margin:0 0 1.6em; font-size:15px; line-height:1.6; color:var(--muted)}
.note strong{color:var(--ink)}
.svc{border-top:1px solid var(--line); padding:26px 0 4px}
.svc:first-of-type{border-top:0; padding-top:6px}
.svc h3{margin:0 0 .5em; font-size:22px}
.svc .tag{display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 8px}
.creds{list-style:none; padding:0; margin:1.2em 0}
.creds li{padding:9px 0; border-bottom:1px solid var(--line); font-size:15.5px}
.creds li:last-child{border-bottom:0}
.disclaimer{font-size:14.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:14px; margin-top:22px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:12px; background:#fff; padding:10px 14px; z-index:50; border-radius:4px}

@media (max-width:900px){
  .cols{grid-template-columns:1fr; gap:0}
  .toc{position:static; max-height:none; margin:0 0 40px; border:1px solid var(--line); border-radius:6px; padding:20px 22px; background:var(--panel)}
  nav{gap:16px}
  main{padding:36px 0 60px}
  .hero{padding:40px 0 32px}
}