@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,700;1,6..72,400&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{
  --paper:#fbfaf6;--ink:#191a1e;--navy:#1d3f6e;--navy-soft:#eef2f8;
  --rule:#e3dfd3;--muted:#6b6a63;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:18px/1.7 'Newsreader',Georgia,serif;font-optical-sizing:auto}
.wrap{max-width:720px;margin:0 auto;padding:0 1.4rem 4rem}

/* masthead */
.mast{text-align:center;padding:3rem 0 1.6rem;border-bottom:3px double var(--ink);margin-bottom:.9rem}
.mast .kicker{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--navy);margin:0 0 .7rem}
.mast h1{font-size:clamp(1.9rem,5.5vw,2.7rem);font-weight:700;letter-spacing:-.01em;margin:0;line-height:1.15}
.mast h1 a{color:inherit;text-decoration:none}
.mast .standfirst{color:var(--muted);font-size:1.02rem;margin:.8rem auto 0;max-width:34em;font-style:italic}
.mast .standfirst a{color:var(--navy)}
.rule-thin{border:0;border-top:1px solid var(--rule);margin:0 0 2.4rem}

/* index list */
.section-label{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1.4rem}
.entries{list-style:none;margin:0;padding:0}
.entries li{display:grid;grid-template-columns:3rem 1fr;gap:1.1rem;align-items:baseline;
  padding:1.35rem 0;border-bottom:1px solid var(--rule)}
.entries .no{font-family:'Newsreader',serif;font-style:italic;font-size:1.5rem;color:var(--navy);font-weight:500}
.entries h2{font-size:1.28rem;margin:0 0 .3rem;line-height:1.3;font-weight:600}
.entries h2 a{color:var(--ink);text-decoration:none}
.entries h2 a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.entries p{margin:0;color:var(--muted);font-size:.98rem}

/* article */
.art-head{padding:2.2rem 0 0}
.art-head .date{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy);margin:0 0 .8rem}
.art-head h1{font-size:clamp(1.7rem,5vw,2.3rem);line-height:1.18;margin:0 0 1.6rem;letter-spacing:-.01em}
.note p{margin:0 0 1.25rem}
.note > p:first-of-type::first-letter{font-size:3.1em;float:left;line-height:.82;
  padding:.06em .12em 0 0;color:var(--navy);font-weight:700}
.note a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.note a:hover{background:var(--navy-soft)}
code{background:#f0ede3;border:1px solid var(--rule);border-radius:3px;
  padding:.08em .4em;font-family:'IBM Plex Mono',monospace;font-size:.82em}
.callout{background:var(--navy-soft);border-left:3px solid var(--navy);
  padding:1rem 1.2rem;margin:1.6rem 0;font-size:.98rem}
.callout p{margin:0}

/* footer */
footer{border-top:3px double var(--ink);margin-top:3.2rem;padding-top:1.3rem;
  font-size:.92rem;color:var(--muted);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{color:var(--navy)}
.backlink{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.05em}

@media (max-width:540px){
  body{font-size:17px}
  .entries li{grid-template-columns:2.2rem 1fr;gap:.8rem}
}