:root { --ink:#252525; --paper:#fbfaf8; --muted:#777; --line:#e3e1dd; --blue:#3569b7; --coral:#c56a55; --serif:"Montserrat", Arial, sans-serif; --sans:"Montserrat", Arial, sans-serif; --mono:"Montserrat", Arial, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--blue); }
.site-header { align-items:center; border-bottom:1px solid var(--line); display:flex; height:72px; justify-content:space-between; padding:0 clamp(20px, 5vw, 80px); position:relative; z-index:2; }
.wordmark { align-items:center; background:var(--ink); border-radius:50%; color:var(--paper); display:flex; font-family:var(--sans); font-size:14px; font-weight:600; height:38px; justify-content:center; text-decoration:none; width:38px; }
.wordmark:hover { background:var(--blue); color:white; }
nav { display:flex; gap:clamp(17px, 3vw, 42px); }
.social-links { display:flex; gap:clamp(14px, 2vw, 28px); }
nav a, .eyebrow, .date, .essay-number, .project-index, .timeline time, .copyright { font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; }
nav a, .social-links a { text-decoration:none; }
.social-links a { font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; }
.hero { border-bottom:1px solid var(--line); padding:clamp(72px, 11vw, 150px) clamp(20px, 9vw, 150px); background:#dceaf0; }
.eyebrow { color:var(--blue); margin:0 0 22px; }
.hero h1 { font-family:var(--sans); font-size:clamp(43px, 5vw, 68px); font-weight:600; letter-spacing:-.045em; line-height:1.05; margin:0; }
.hero-note { font-size:17px; letter-spacing:-.01em; line-height:1.55; margin:clamp(34px, 5vw, 55px) 0 0; max-width:510px; }
.section { padding:clamp(72px, 11vw, 150px) clamp(20px, 9vw, 150px); }
.section-heading { align-items:flex-end; display:flex; justify-content:space-between; margin-bottom:clamp(38px, 6vw, 78px); }
.section-heading h2 { font-family:var(--sans); font-size:clamp(42px, 5vw, 64px); font-weight:600; letter-spacing:-.045em; line-height:1; margin:0; }
.archive-tools { align-items:flex-end; display:flex; flex-direction:column; gap:10px; }
.archive-tools p { color:var(--muted); font:11px var(--mono); margin:0; text-transform:uppercase; }
.search { align-items:center; border-bottom:1px solid var(--ink); display:flex; gap:8px; padding:5px 1px; }
.search input { background:transparent; border:0; color:var(--ink); font:14px var(--sans); outline:none; width:180px; }
.search input::placeholder { color:var(--muted); }
.archive { border-top:1px solid var(--ink); }
.essay { align-items:baseline; border-bottom:1px solid var(--line); cursor:pointer; display:grid; gap:20px; grid-template-columns:50px minmax(0,1fr) 24px; padding:26px 0 24px; transition:padding .2s, color .2s; }
.essay:hover { color:var(--blue); padding-left:10px; }
.essay:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }
.essay-number, .date, .project-index { color:var(--muted); margin:0; }
.essay-body { display:grid; gap:10px; grid-template-columns:minmax(96px, .22fr) minmax(0, 1fr); }
.essay h3 { font-family:var(--sans); font-size:clamp(20px, 2vw, 27px); font-weight:600; letter-spacing:-.035em; line-height:1.16; margin:0; }
.essay-body > p:last-child { color:var(--muted); font-size:14px; grid-column:2; line-height:1.4; margin:0; max-width:600px; }
.essay-mark { color:var(--coral); font-size:23px; line-height:1; text-align:right; }
.search-empty { color:var(--muted); font:14px var(--mono); margin-top:30px; }
.built { background:var(--paper); color:var(--ink); background:#dceaf0; }
.projects-list .project h3 a { color:inherit; }
.projects-list .project h3 a:hover { color:var(--blue); }
.timeline { border-top:1px solid var(--ink); list-style:none; margin:0; padding:0; }
.timeline li { align-items:baseline; border-bottom:1px solid #aebec6; display:grid; gap:20px; grid-template-columns:minmax(125px, .22fr) 1fr; padding:19px 0; }
.timeline time { color:var(--blue); }
.timeline-entry h3 { font-family:var(--sans); font-size:clamp(19px, 2vw, 27px); font-weight:600; letter-spacing:-.035em; line-height:1.16; margin:0; }
.timeline-entry h3 a { color:inherit; }
.timeline-entry h3 a:hover { color:var(--blue); }
.timeline-entry p { color:var(--muted); font-size:14px; line-height:1.45; margin:8px 0 0; max-width:600px; }
footer { border-top:1px solid #aebec6; color:var(--ink); padding:24px clamp(20px, 5vw, 80px); }
.footer-links { display:flex; gap:clamp(18px, 4vw, 60px); margin-top:32px; }
.footer-links a { font-family:var(--mono); font-size:12px; text-transform:uppercase; }
.footer-links a:hover { color:var(--blue); }
.copyright { color:var(--muted); margin:0; }
.sr-only { height:1px; margin:-1px; overflow:hidden; position:absolute; width:1px; clip:rect(0,0,0,0); }
@media (max-width: 700px) { .site-header { height:62px; } nav { gap:14px; } nav a, .social-links a { font-size:9px; } .social-links { gap:10px; } .section-heading { align-items:flex-start; flex-direction:column; gap:28px; } .essay { gap:12px; grid-template-columns:28px minmax(0,1fr) 18px; } .essay-body { display:block; } .essay .date { margin-bottom:9px; } .essay-body > p:last-child { margin-top:10px; } .timeline li { grid-template-columns:100px 1fr; } }