:root{
  --ink:#16191c;
  --ink-soft:#4a5158;
  --rule:#d8dbde;
  --paper:#fbfbfa;
  --mark:#1f5f5b;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#e8eaec; --ink-soft:#9aa2a9; --rule:#2c3236; --paper:#121517; --mark:#6fb5ae; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.65 ui-serif, Georgia, "Times New Roman", serif;
  padding:clamp(1.5rem,5vw,4rem) 1.25rem 5rem;
}
main{max-width:38rem;margin:0 auto}
.eyebrow{
  font:500 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--mark); margin:0 0 .9rem;
}
h1{
  font-size:clamp(1.7rem,5vw,2.25rem); line-height:1.15;
  font-weight:600; letter-spacing:-.01em; margin:0 0 .5rem;
}
.meta{
  font:400 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--ink-soft); margin:0 0 2.5rem;
  padding-bottom:1.5rem; border-bottom:1px solid var(--rule);
}
h2{
  font-size:1.02rem; font-weight:600; letter-spacing:-.005em;
  margin:2.6rem 0 .6rem;
}
p,li{color:var(--ink)}
p{margin:0 0 1rem}
ul{margin:0 0 1rem;padding-left:1.15rem}
li{margin-bottom:.4rem}
a{color:var(--mark);text-decoration-thickness:1px;text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--mark);outline-offset:3px;border-radius:2px}
.lede{font-size:1.08rem}
.note{
  border-left:2px solid var(--mark); padding:.15rem 0 .15rem 1rem;
  margin:1.5rem 0; color:var(--ink-soft); font-size:.96rem;
}
footer{
  margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--rule);
  font:400 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--ink-soft);
}
/* Added for the other pages. */
.site-nav{display:flex;gap:1.25rem;flex-wrap:wrap;margin:0 0 .6rem}
.site-nav a{text-decoration:none}
.site-nav a[aria-current="page"]{color:var(--ink-soft)}
.cta{font:500 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
     letter-spacing:.06em;text-transform:uppercase;color:var(--mark);margin:1.75rem 0 0}