:root{
  --paper:#0F2740;
  --void:#081420;
  --ink:#D6E4F0;
  --bright:#F5FAFF;
  --muted:#8AA5BD;
  --line:#3C5A78;
  --accent:#FF6B4A;
  --disp:"Saira Condensed",Impact,"Arial Narrow",sans-serif;
  --body:"Saira",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--paper);
  background-image:
    linear-gradient(rgba(214,228,240,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(214,228,240,.035) 1px,transparent 1px);
  background-size:24px 24px;
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--bright)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sheet{max-width:760px;margin:24px auto;border:1px solid var(--line);position:relative;
  background:transparent}
.sheet::before,.sheet::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--line)}
.sheet::before{top:-8px;left:-8px;border-right:0;border-bottom:0}
.sheet::after{bottom:-8px;right:-8px;border-left:0;border-top:0}

header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:18px 32px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.wordmark{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:.22em;color:var(--bright)}
.wordmark a{text-decoration:none;color:var(--bright)}
.back{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;text-decoration:none}
.back:hover{color:var(--bright)}

.post{padding:40px 32px 56px;max-width:42rem}
.post-meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--muted);
  text-transform:uppercase;margin:14px 0 34px}
.post h1{font-family:var(--disp);font-weight:700;color:var(--bright);
  font-size:clamp(30px,5.5vw,46px);line-height:1.06;text-transform:uppercase;letter-spacing:.01em}
.post h2{font-family:var(--disp);font-weight:600;color:var(--bright);text-transform:uppercase;
  font-size:22px;letter-spacing:.06em;margin:40px 0 12px}
.post p{margin:0 0 18px}
.post b,.post strong{color:var(--bright);font-weight:500}
.post ul,.post ol{margin:0 0 18px 1.2em}
.post li{margin-bottom:8px}
.post blockquote{border-left:2px solid var(--accent);padding-left:14px;margin:0 0 18px;
  color:var(--muted);font-family:var(--mono);font-size:14px;line-height:1.6}
.post table{width:100%;border-collapse:collapse;margin:0 0 18px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);
  text-transform:uppercase;text-align:left;font-weight:400;padding:10px 12px 6px 0;
  border-bottom:1px solid var(--line)}
.post td{font-size:15.5px;padding:10px 12px 10px 0;color:var(--ink)}
.post tbody tr+tr td{border-top:1px solid var(--line)}
.targetnote{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em;
  text-transform:uppercase;border-left:2px solid var(--accent);padding-left:12px;margin:26px 0}

.posts{list-style:none;margin:0;padding:0}
.posts li{border-bottom:1px solid var(--line);padding:22px 0}
.posts li:last-child{border-bottom:0}
.posts a{font-family:var(--disp);font-weight:600;font-size:22px;text-transform:uppercase;
  letter-spacing:.03em;text-decoration:none;color:var(--bright)}
.posts a:hover{color:var(--accent)}
.posts .date{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.1em;
  display:block;margin-top:4px;text-transform:uppercase}
.posts p{color:var(--ink);font-size:15.5px;margin-top:8px}

footer{border-top:1px solid var(--line)}
.fineprint{font-family:var(--mono);font-size:11px;color:var(--muted);
  padding:10px 14px;letter-spacing:.04em}
@media (max-width:640px){
  header,.post{padding-left:20px;padding-right:20px}
}

.fineprint{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.foot-links{display:flex;gap:16px;align-items:center}
.foot-links a{color:var(--muted);display:inline-flex}
.foot-links a:hover{color:var(--bright)}
.foot-links svg{width:16px;height:16px}