:root{
  --ink:#0E1620;
  --panel:#15202B;
  --line:#26333F;
  --bone:#EAE6DA;
  --muted:#8EA0AD;
  --dim:#5E7180;
  --cedar:#C88048;
  --teal:#5BC0B0;
  --pad:clamp(1.25rem, 5vw, 4rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
h1,h2{font-family:'Newsreader', Georgia, serif; font-weight:400; margin:0; letter-spacing:-0.01em}
p,ul{margin:0}
a{color:var(--teal)}
a:focus-visible{outline:2px solid var(--teal); outline-offset:3px}
.wrap{max-width:46rem; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}

.masthead{border-bottom:1px solid var(--line)}
.masthead .wrap{
  max-width:68rem;
  display:flex; align-items:center; gap:1rem; min-height:4.25rem;
}
.brand{
  display:flex; align-items:center; gap:.65rem;
  font-family:'Newsreader',Georgia,serif;
  font-size:1.3rem; letter-spacing:-0.015em;
  text-decoration:none; color:var(--bone); margin-right:auto;
}
.brand img{
  display:block; flex:none; width:1.9rem; height:1.9rem;
  border-radius:22%; border:1px solid rgba(234,230,218,.08);
}
.masthead nav a{font-size:.9rem; color:var(--muted); text-decoration:none}
.masthead nav a:hover{color:var(--bone)}

main{padding:clamp(3rem,8vw,5.5rem) 0 clamp(3rem,7vw,5rem)}
h1{font-size:clamp(2.1rem,5vw,3.1rem); line-height:1.1; margin-bottom:.6rem}
.updated{color:var(--dim); font-size:.92rem; margin-bottom:2.5rem}
.intro{font-size:1.1rem; color:#C8C4B8; margin-bottom:1rem}

section{margin-top:2.75rem}
h2{font-size:1.5rem; line-height:1.25; margin-bottom:.9rem}
section p + p{margin-top:.9rem}
ul{padding-left:1.1rem; margin-top:.9rem}
li{margin-bottom:.55rem; color:#D6D1C4}
li::marker{color:var(--dim)}

.callout{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:2px solid var(--cedar);
  padding:1.25rem 1.5rem;
  margin-top:1.25rem;
}
.callout p{color:#D6D1C4}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em; color:var(--teal);
  background:rgba(91,192,176,.1);
  border:1px solid rgba(91,192,176,.25);
  border-radius:3px; padding:.05em .4em;
}

footer{
  border-top:1px solid var(--line);
  padding:2.5rem 0 3.5rem;
  font-size:.92rem;
}
footer .wrap{
  max-width:68rem;
  display:flex; flex-wrap:wrap; gap:1.25rem 2.5rem; align-items:baseline;
}
footer nav{display:flex; flex-wrap:wrap; gap:1.5rem; margin-left:auto}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--bone); text-decoration:underline}
footer .copy{color:var(--dim)}