:root {
--ground: #000000; --ink: #FFF6EA; --muted: #8A837A; --faint: #6A6560;
--rule: rgba(255,246,234,.14); --tint: #121212;
--serif: "New York", ui-serif, "Newsreader", Georgia, serif;
--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body {
margin: 0; background: var(--ground); color: var(--ink);
font-family: var(--sans); font-size: 17px; line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 38rem; margin: 0 auto; padding: 0 24px 80px; }
.masthead { display: flex; align-items: center; gap: 12px; padding: 28px 0 0; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.mark { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 0 5px rgba(255,246,234,.5)); }
.wordmark { font-family: var(--serif); font-size: 27px; letter-spacing: .02em; }
.kind {
margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: var(--muted);
}
h1 {
font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 5vw, 40px);
line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; margin: 44px 0 0;
}
h2 {
font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.25;
text-wrap: balance; margin: 46px 0 0; padding-top: 18px; border-top: 1px solid var(--rule);
}
p { margin: 14px 0 0; }
p.meta { color: var(--muted); font-size: 15px; margin: 6px 0 0; }
p.meta strong { color: var(--ink); }
.lead { color: var(--muted); }
.lead strong { color: var(--ink); font-weight: 400; }
ul { margin: 14px 0 0; padding: 0; list-style: none; }
li { position: relative; padding: 6px 0 6px 20px; }
li::before {
content: ""; position: absolute; left: 2px; top: 17px;
width: 4px; height: 4px; border-radius: 50%; background: var(--faint);
}
strong { font-weight: 600; }
a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--faint); }
a:hover { text-decoration-color: var(--ink); }
.brand, .brand:hover { text-decoration: none; }
footer {
margin: 64px 0 0; padding-top: 22px; border-top: 1px solid var(--rule);
display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; color: var(--muted);
}
footer a { color: var(--muted); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }