:root { --ink:#111; --paper:#f7f7f5; --line:#d7d7d3; --muted:#72726d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; font-size:16px; }
a { color:inherit; text-decoration:none; }
.site-header, main, footer { max-width:1240px; margin:auto; padding-left:32px; padding-right:32px; }
.site-header { height:82px; display:flex; justify-content:space-between; align-items:center; }
.wordmark { font:500 23px "DM Mono",monospace; letter-spacing:-2px; }.wordmark span { color:#a3a39f; }
nav { display:flex; gap:27px; font:13px "DM Mono",monospace; } nav a { transition:opacity .2s; } nav a:hover { opacity:.48; }
.intro { min-height:calc(100vh - 82px); display:flex; flex-direction:column; justify-content:center; padding:72px 0 96px; }
.eyebrow,.note-type,.project-index,.project-meta,footer { font:12px "DM Mono",monospace; color:var(--muted); letter-spacing:-.3px; }
h1,h2,h3,p { margin-top:0; } h1 { max-width:960px; margin:20px 0 25px; font-size:clamp(3.2rem,7.6vw,7.3rem); line-height:.95; letter-spacing:-.078em; font-weight:500; }
.lede { max-width:390px; color:#555550; line-height:1.5; margin:0 0 33px; }.text-link { width:max-content; border-bottom:1px solid var(--ink); padding-bottom:4px; font-size:14px; font-weight:500; }.text-link span { margin-left:12px; }
.section { padding:118px 0; border-top:1px solid var(--ink); }.section-heading { display:grid; grid-template-columns:1fr 2fr; align-items:baseline; margin-bottom:62px; }.section-heading h2 { margin:0; font-size:clamp(2.3rem,4.5vw,4.5rem); line-height:.95; letter-spacing:-.065em; font-weight:500; }
.project-list { border-top:1px solid var(--line); }.project { display:grid; grid-template-columns:32px 44px minmax(0,1fr) max-content; gap:18px; padding:26px 0 29px; border-bottom:1px solid var(--line); align-items:center; transition:background .25s; }.project:hover { background:#efefec; }.project-logo { width:44px; height:44px; display:grid; place-items:center; }.project-logo img { max-width:44px; max-height:44px; object-fit:contain; filter:grayscale(1) contrast(1.08); transition:filter .28s ease; }.project:hover .project-logo img { filter:grayscale(0); }.project h3,.note h3 { margin:0 0 7px; font-size:25px; font-weight:500; letter-spacing:-.045em; }.project p,.note p:not(.note-type) { margin:0; color:#5f5f59; line-height:1.45; }.project-meta { text-align:right; white-space:nowrap; }
.note-list { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.note { min-height:300px; border:1px solid var(--ink); padding:28px; display:flex; flex-direction:column; }.note-featured { background:var(--ink); color:var(--paper); }.note-featured a { height:100%; display:flex; flex-direction:column; align-items:flex-start; }.note h3 { font-size:clamp(1.7rem,3vw,2.7rem); line-height:1.02; margin:45px 0 13px; }.note-featured .note-type,.note-featured p:not(.note-type) { color:#b9b9b3; }.note-featured .text-link { margin-top:auto; }.newsletter { background:#e6e6e2; }.newsletter h3 { margin:45px 0 auto; }.subscribe-form { display:flex; border-bottom:1px solid var(--ink); }.subscribe-form input { min-width:0; flex:1; border:0; outline:0; padding:12px 0; background:transparent; font:14px "DM Mono",monospace; }.subscribe-form button { border:0; background:transparent; padding:0; font:500 13px "DM Sans",sans-serif; cursor:pointer; }.subscribe-form button:hover { opacity:.55; }
footer { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:24px; padding-bottom:28px; } footer p { margin:0; } footer a { color:var(--ink); }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:680px) { .site-header,main,footer { padding-left:20px; padding-right:20px; }.site-header { height:70px; } nav { gap:15px; }.intro { min-height:calc(100vh - 70px); padding:46px 0 64px; } h1 { font-size:clamp(3rem,15vw,5rem); }.section { padding:75px 0; }.section-heading { display:block; margin-bottom:37px; }.section-heading .eyebrow { margin-bottom:17px; }.project { grid-template-columns:35px 44px 1fr; gap:12px; }.project-meta { display:none; }.project h3 { font-size:22px; }.note-list { grid-template-columns:1fr; }.note { min-height:255px; } footer { padding-top:20px; } }