:root { --bg:#0c0c0b; --panel:#131311; --ink:#ede8db; --dim:rgba(237,232,219,.62); --faint:rgba(237,232,219,.38); --rule:rgba(237,232,219,.16); }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--ink); }
body { font: 18px/1.6 "New York", "Iowan Old Style", Georgia, serif; -webkit-font-smoothing:antialiased; }
main { max-width:720px; margin:0 auto; padding:56px 20px 80px; }
header { display:flex; align-items:center; gap:14px; margin-bottom:48px; }
header img { width:44px; height:44px; border-radius:10px; }
header a { color:var(--ink); text-decoration:none; font-size:22px; }
h1 { font-weight:400; font-size:44px; line-height:1.15; margin:0 0 18px; text-shadow:0 0 12px rgba(237,232,219,.25); }
h2 { font-weight:500; font-size:24px; margin:40px 0 10px; }
h3 { font-weight:500; font-size:19px; margin:26px 0 6px; }
p, li { color:var(--dim); }
strong { color:var(--ink); font-weight:500; }
a { color:var(--ink); }
.lede { font-size:21px; font-style:italic; color:var(--dim); }
.caps { font: 600 12px/1.4 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.rule { border:0; border-top:1px dotted var(--rule); margin:40px 0; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:28px 0; }
.card { background:var(--panel); border:1px dotted var(--rule); border-radius:6px; padding:18px; }
.card h3 { margin-top:0; }
.card p { margin:0; font-size:16px; }
footer { margin-top:56px; font: 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace; color:var(--faint); }
footer a { color:var(--dim); }
@media (max-width:480px) { h1 { font-size:34px; } body { font-size:17px; } .grid { grid-template-columns:1fr; } }