:root{
  --paper:#f4f5f1; --ink:#1c2330; --muted:#5b6270; --rule:#d8dbd2; --margin:#d7898a; --pen:#2b4699; --desk:#cfd3c8;
  --f-text:"Source Serif 4", Georgia, "Times New Roman", serif;
  --f-note:"Caveat", "Segoe Print", "Bradley Hand", cursive;
  --f-sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#14171d; --ink:#e7e8e3; --muted:#9ba1ac; --rule:#2a2f39; --margin:#8c4a4f; --pen:#93a8ec; --desk:#0b0d11; color-scheme:dark}}
*{box-sizing:border-box}
/* The page is a sheet lying on a darker desk, so wide screens don't show empty sides. */
html{background:var(--desk)}
body{margin:0 auto; max-width:880px; min-height:100vh; box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 10px 40px rgba(0,0,0,.12); background:var(--paper); color:var(--ink); font-family:var(--f-text); font-size:19px; line-height:1.7; -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:720px; margin:0 auto; padding:0 max(20px, env(safe-area-inset-left,0px))}
.top{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:28px}
.top .back{margin:0}
.brand{display:block; line-height:0}
.logo{display:block; height:48px; width:auto}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo{background:#f4f5f1; border-radius:12px; padding:8px 10px; box-sizing:content-box}}
:root[data-theme="dark"] .logo{background:#f4f5f1; border-radius:12px; padding:8px 10px; box-sizing:content-box}
.back{display:inline-block; margin:28px 0 0; font-family:var(--f-sans); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--muted)}
.back:hover{color:var(--pen)}
.meta{margin-top:48px; font-family:var(--f-note); color:var(--pen); font-size:24px; line-height:1.1}
.meta span+span::before{content:" · "; color:var(--muted)}
h1{font-family:var(--f-sans); font-weight:400; font-size:clamp(34px,6vw,56px); line-height:1.05; letter-spacing:-.02em; margin:10px 0 28px; text-wrap:balance}
figure{margin:0 0 36px}
figure img{width:100%; display:block; border-radius:2px; aspect-ratio:4/3; object-fit:cover}
.body p{margin:0 0 1.2em}
.body h2{font-family:var(--f-sans); font-weight:700; font-size:22px; margin:1.8em 0 .6em}
.body blockquote{margin:1.6em 0; padding-left:20px; border-left:2px solid var(--margin); font-style:italic; color:var(--muted)}
.body ul{margin:0 0 1.2em; padding-left:1.2em}
.body a{color:var(--pen)}
footer{margin-top:64px; padding:26px 0; border-top:1px solid var(--rule); font-family:var(--f-note); font-size:24px}
.msg{padding:80px 0; color:var(--muted)}