:root { --ink:#24231f; --muted:#77746d; --line:#e3e0d9; --paper:#faf9f6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-height:100vh; margin:0; display:flex; flex-direction:column; background:var(--paper); color:var(--ink); font-family:"Work Sans", "Helvetica Neue", sans-serif; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1120px, calc(100% - 48px)); margin-inline:auto; }
.site-header { height:88px; display:flex; align-items:center; justify-content:space-between; }
.wordmark { font:600 1.35rem/1 "Newsreader", Georgia, serif; letter-spacing:-.035em; }
nav { display:flex; gap:23px; font:500 .68rem/1 "DM Mono", monospace; letter-spacing:.07em; text-transform:uppercase; }
nav a:hover { color:var(--muted); }
main { flex:1; }
.writing { position:relative; min-height:clamp(410px, 64vh, 680px); border-top:1px solid var(--line); overflow:hidden; }
.monogram { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); color:var(--ink); opacity:.045; font:500 clamp(12rem, 34vw, 31rem)/.7 "Newsreader",Georgia,serif; letter-spacing:-.12em; pointer-events:none; user-select:none; }
#essay-list { position:relative; z-index:1; }
.essay { padding:28px 0; border-bottom:1px solid var(--line); }
.essay p { margin:0 0 14px; color:var(--muted); font:500 .66rem/1 "DM Mono", monospace; letter-spacing:.07em; text-transform:uppercase; }
.essay h1 { margin:0; font:400 clamp(1.9rem, 4vw, 3.5rem)/1 "Newsreader", Georgia, serif; letter-spacing:-.045em; }
.essay a:hover h1 { color:var(--muted); }
@media (max-width:640px) { .wrap { width:calc(100% - 32px); }.site-header { height:72px; }.writing { min-height:62vh; } }