:root { --ink:#171717; --muted:#6d6d6d; --line:#e7e7e7; --paper:#fff; --sans:Arial, Helvetica, sans-serif; --mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); } a { color:inherit; text-decoration:none; }
.site-header, main, footer { max-width:760px; margin:auto; } .site-header { height:72px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; } .wordmark { font-size:17px; font-weight:700; letter-spacing:-.04em; } .wordmark span { color:var(--muted); } nav { display:flex; gap:21px; font:12px var(--mono); color:var(--muted); } nav a:hover, footer a:hover { color:var(--ink); }
.hero { padding:100px 0 90px; border-bottom:1px solid var(--line); } .eyebrow, .section-label, .meta { font:11px var(--mono); color:var(--muted); letter-spacing:.025em; } .eyebrow { margin:0 0 22px; } .eyebrow span { display:none; } h1 { max-width:670px; margin:0; font-size:clamp(38px, 6.3vw, 58px); line-height:1.08; letter-spacing:-.055em; font-weight:500; } h1 em { font-style:normal; } .hero-bottom { margin-top:31px; display:flex; justify-content:flex-end; } .text-link, .post-link { font:12px var(--mono); border-bottom:1px solid var(--ink); padding-bottom:3px; white-space:nowrap; }
.writing { padding:68px 0; } .section-label { display:flex; gap:20px; text-transform:uppercase; margin-bottom:27px; } .section-label h2 { font:inherit; margin:0; color:var(--ink); } .meta { margin:0 0 12px; } h3 { font-size:29px; line-height:1.2; letter-spacing:-.04em; font-weight:500; margin:0; }
.empty-state { margin:0; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font:13px var(--mono); }
.writing { padding-top:0; } .post { display:grid; grid-template-columns:42px 1fr 118px 23px; gap:15px; align-items:center; padding:24px 0; border-top:1px solid var(--line); } .post:last-child { border-bottom:1px solid var(--line); } .post-number, .post-date { font:11px var(--mono); color:var(--muted); } .post .meta { margin-bottom:7px; } .post h3 { font-size:20px; } .post-date { line-height:1.55; } .post-date span { color:#999; } .arrow-link { color:var(--muted); font-size:18px; text-align:right; } .post:hover h3, .post:hover .arrow-link { color:#555; }
.about { padding:65px 0; border-bottom:1px solid var(--line); } .about > .eyebrow { margin-bottom:24px; } .about h2 { font-weight:500; font-size:28px; letter-spacing:-.04em; margin:0; } footer { padding:25px 0 42px; display:flex; justify-content:space-between; color:var(--muted); font:11px var(--mono); } footer div { display:flex; gap:20px; }
@media (max-width:800px) { .site-header, main, footer { margin-left:24px; margin-right:24px; } }
@media (max-width:560px) { .site-header { height:62px; } nav { gap:13px; font-size:10px; } .hero { padding:70px 0 63px; } .hero-bottom, footer { flex-direction:column; align-items:flex-start; gap:20px; } .featured { padding:50px 0; } .writing { padding-bottom:50px; } .post { grid-template-columns:30px 1fr 20px; gap:10px; } .post-date { display:none; } .post h3 { font-size:18px; } .about { padding:50px 0; } }