@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');
:root{--bg:#f5f4f0;--text:#171717;--muted:#77756f;--line:#d7d5cf;--pad:clamp(22px,4vw,64px)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}body{font-size:14px;line-height:1.5}
.site-header{min-height:82px;padding:23px var(--pad);border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:30px}
.brand-name,.eyebrow,.main-menu-link,.archive,.brand-subtitle,footer{font-family:"DM Mono",monospace;letter-spacing:.04em}
.brand-name{font-size:12px;font-weight:500}.brand-subtitle{margin-top:3px;font-size:10px;color:var(--muted)}
.main-menu-link{margin-left:auto;font-size:9px}.main-menu-link a{text-decoration:none;color:var(--muted)}.main-menu-link a:hover{color:var(--text)}
main{width:min(1500px,100%);margin:0 auto;padding:0 var(--pad)}
.page-heading{padding:52px 0 45px;border-bottom:1px solid var(--line)}
.eyebrow{margin:0 0 14px;font-size:9px;color:var(--muted)}
h1{margin:0;font-size:clamp(32px,5vw,58px);line-height:.95;font-weight:500;letter-spacing:-.05em;text-transform:uppercase}
.intro{max-width:500px;margin:22px 0 0;color:var(--muted);font-size:12px;line-height:1.65}
.archive{padding:0 0 90px;font-size:9px}
.archive-row{display:grid;grid-template-columns:90px 150px 1fr 120px;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.archive-row.header{color:var(--muted);font-size:8px}.archive-row:not(.header) span:nth-child(3){font-family:Inter,Arial,sans-serif;font-size:14px;letter-spacing:0}.archive-row:not(.header) span:nth-child(4){color:var(--muted)}
footer{border-top:1px solid var(--line);padding:20px var(--pad);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:8px}
@media(max-width:650px){.archive-row{grid-template-columns:60px 1fr;gap:10px}.archive-row.header{display:none}.archive-row span:nth-child(3),.archive-row span:nth-child(4){grid-column:2}.archive-row:not(.header) span:nth-child(3){font-size:13px}footer{flex-direction:column}}

/* Accent palette */
:root{--teal:#0f7774;--red:#b6403c}
.eyebrow{color:var(--teal)}
.main-menu-link a:hover{color:var(--red)}
.archive-row.header{color:var(--teal)}
.archive-row:not(.header) span:nth-child(4){color:var(--red)}

.brand-name{text-decoration:none;color:inherit}.brand-name:hover{color:var(--teal,inherit)}