@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  color-scheme:light;
  --paper:#FBFBFC; --ink:#0B0C0E; --body:#31353B; --faint:#6B7078;
  --line:#0B0C0E; --blue:#1F5BFF; --blue-ink:#1F5BFF; --blue-tint:#E4ECFF;
  --sans:'Archivo',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.4}
a{color:inherit;text-decoration:none}
.grid{max-width:1280px;margin:0 auto;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line)}

.bar{position:sticky;top:0;z-index:60;background:var(--paper);
     display:flex;justify-content:space-between;align-items:center;border-bottom:1.5px solid var(--line);padding:18px 26px}
.bar .logo img{height:34px;width:auto;display:block}
.bar .back{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink);
           border-bottom:2px solid var(--blue-ink)}

.page{padding:70px 26px 56px;border-bottom:1.5px solid var(--line)}
.page .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:30px}
.page h1{font-weight:900;font-size:clamp(34px,6.4vw,86px);text-transform:uppercase;letter-spacing:-.04em;line-height:.95}

.prose{padding:0 26px 70px;max-width:80ch}
.prose section{border-bottom:1.5px solid var(--line);padding:32px 0}
.prose section:last-child{border-bottom:0}
.prose h2{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:18px}
.prose h3{font-weight:700;font-size:1rem;margin:18px 0 8px}
.prose p{margin-bottom:14px;line-height:1.66;color:var(--body);font-size:.97rem}
.prose p:last-child{margin-bottom:0}
.prose ul{margin:0 0 14px 1.15em;line-height:1.66;color:var(--body);font-size:.97rem}
.prose li{margin-bottom:6px}
.prose address{font-style:normal;line-height:1.75;color:var(--ink);font-weight:500;margin-bottom:14px}
.prose a{color:var(--blue-ink);border-bottom:1.5px solid var(--blue-ink)}
.prose .lead{font-size:1.08rem;color:var(--ink);line-height:1.6}
.prose dl{display:grid;grid-template-columns:14rem 1fr;gap:10px 24px;font-size:.97rem;line-height:1.6}
.prose dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:.35em}
.prose dd{color:var(--ink);font-weight:500}
@media(max-width:640px){.prose dl{grid-template-columns:1fr;gap:2px 0}.prose dd{margin-bottom:12px}}

.todo{background:var(--blue);color:#fff;font-family:var(--mono);font-size:.78em;padding:.12em .45em;letter-spacing:.04em}

footer{padding:22px 26px;font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--faint);
       display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer .flinks{display:flex;gap:22px}
footer .flinks a{border-bottom:1.5px solid var(--faint)}
footer .flinks a:hover{color:var(--ink);border-color:var(--ink)}

:focus-visible{outline:2.5px solid var(--blue-ink);outline-offset:2px}