:root { --bg:#F5F3EE; --ink:#2B2A27; --mute:#8C887F; --mid:#5B5953; }
@media (prefers-color-scheme: dark) { :root { --bg:#1C1B19; --ink:#D9D5CB; --mute:#8C887F; --mid:#B2AEA5; } }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; }
body { background:var(--bg); color:var(--ink); font:21px/1.6 Georgia, "Times New Roman", serif;
  min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:2rem 1.5rem 6rem; }
main { width:100%; max-width:32ch; margin-top:-8vh; animation:fade .4s ease-out; }
@media (min-width:720px) { main { max-width:60ch; } }
@keyframes fade { from { opacity:0 } to { opacity:1 } }
.meta { font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--mute); line-height:1.8; margin-bottom:1.5rem; }
.meta a { color:inherit; text-decoration:none; }
p { margin:0 0 1em; }
a { color:inherit; }
nav { display:flex; gap:2.5rem; justify-content:center; margin-top:3rem; color:var(--mute); }
nav a, nav span { text-decoration:none; color:inherit; min-width:1.5em; text-align:center; }
nav a:hover { color:var(--ink); }
.front { width:min(100%,32ch); margin:0 auto; color:var(--mid); }
.front .row { display:flex; align-items:flex-end; min-height:2.2em; }
.front .row i { flex:1; margin-left:.4em; border-bottom:1px dotted var(--mid); height:1.2em; }
.front .row i:first-child { margin-left:0; }
.front .gap { height:1.2em; }