:root{--paper:#f8f4ea;--ink:#202a25;--green:#264436;--muted:#535f53;--rust:#a04127;--line:#d8d3c5;--wash:#eee8da}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.65 system-ui,sans-serif}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--green);text-underline-offset:.22em}
a:hover{color:var(--rust)}
:focus-visible{outline:3px solid var(--rust);outline-offset:5px}
.shell{width:min(1160px,calc(100% - 80px));margin:auto}
.skip{position:absolute;left:1rem;top:1rem;transform:translateY(-200%);background:white;padding:.5rem;z-index:2}
.skip:focus{transform:none}
.header,.footer{display:flex;justify-content:space-between;align-items:center;gap:16px}
.header{min-height:91px;border-bottom:1px solid var(--line)}
.header a{text-decoration:none}
.brand{display:inline-flex;gap:12px;align-items:center;font-weight:720}
.brand span{display:grid;place-items:center;background:var(--green);color:var(--paper);width:36px;height:36px;border-radius:9px;font-size:.8rem;letter-spacing:.04em}
nav{display:flex;gap:clamp(16px,3.2vw,40px)}
.header nav a{padding:8px 0;color:var(--muted);font-weight:650;font-size:.94rem}
.header nav a[aria-current]{color:var(--ink);border-bottom:2px solid var(--rust)}
h1,h2{font-family:Georgia,serif;font-weight:500;line-height:1.03;letter-spacing:-.052em;margin:0 0 22px}
h1{font-size:clamp(3.65rem,9vw,8.2rem)}
h1 span{color:var(--rust)}
h2{font-size:clamp(2rem,4vw,3.6rem)}
p{margin:0 0 1em}
.eyebrow{font-size:.76rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:17px}
.dot{display:inline-block;background:var(--rust);width:.6em;height:.6em;border-radius:50%;margin-right:7px}
.lead{font-size:clamp(1.2rem,2.35vw,1.7rem);line-height:1.35;color:var(--green);max-width:36em}
.hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(32px,7vw,100px);padding:clamp(50px,7vw,100px) 0}
.hero-copy>p:not(.eyebrow):not(.lead){max-width:50ch}
.hero h1{line-height:.87;margin-bottom:28px}
.portrait{margin:0;overflow:hidden;border-radius:48% 48% 8px 8px;background:#d9d0b9}
.portrait img{width:100%;aspect-ratio:1/1.15;object-fit:cover}
.actions{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;margin-top:25px}
.button{display:inline-flex;gap:10px;align-items:center;background:var(--green);color:white;padding:11px 17px;border-radius:5px;text-decoration:none;font-weight:680}
.button:hover{color:white;background:#3c5b49}
.text-link{font-weight:700}
.selected{display:grid;grid-template-columns:1fr 1.35fr;gap:35px;border-top:1px solid var(--line);padding:46px 0 62px}
.project-list,.year ul{list-style:none;padding:0;margin:0}
.project-list a{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none}
.project-list a:hover strong{text-decoration:underline}
.project-list strong{display:block;font-size:1.15rem}
.project-list small,.index,.other span{color:var(--muted)}
.index{font-variant-numeric:tabular-nums;font-size:.8rem}
.other{margin:18px 0 0;font-size:.9rem}.other span{margin-left:6px}
.footer{border-top:1px solid var(--line);padding:24px 0 34px;color:var(--muted);font-size:.85rem}
.page-intro{padding:clamp(48px,7vw,95px) 0 38px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px}
.card{background:var(--wash);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.card a{display:block;height:100%;text-decoration:none;color:inherit}
.card a:hover .text-link{text-decoration:underline}
.card-copy{padding:23px}.card h2{font-size:2rem;margin-bottom:12px}.card .eyebrow{font-size:.68rem}
.art{aspect-ratio:16/10;background:var(--wash);overflow:hidden}
.art img{width:100%;height:100%;object-fit:cover}
.art.b-excellent{background:#20375c}.art.b-excellent img{object-fit:contain}
.contact{border-top:1px solid var(--line);padding:40px 0 55px}
.back{display:inline-block;margin-bottom:24px;font-weight:700}
.case-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(25px,6vw,74px);padding-bottom:60px}
.case-grid .art{border-radius:8px;margin-bottom:22px}.case-copy h2{font-size:2rem;margin-bottom:10px}.case-copy section{margin-bottom:28px}
.years{gap:12px;flex-wrap:wrap;margin-bottom:28px}.years a{padding:4px 12px;border:1px solid var(--line);border-radius:5px}
.year{display:grid;grid-template-columns:130px 1fr;gap:18px;border-top:1px solid var(--line);padding:25px 0 35px}
.year h2{font-size:2.3rem}.year li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.year time{font-size:.84rem;color:var(--muted);white-space:nowrap}
.reading{max-width:730px;padding:60px 0}.reading h1{font-size:clamp(2.2rem,5vw,4.4rem);overflow-wrap:anywhere}.reading .post{overflow-wrap:anywhere}.post iframe{max-width:100%}.post pre{overflow:auto}.post h2{font-size:2rem}.post img{margin-block:12px}
@media(max-width:760px){.shell{width:calc(100% - 36px)}.header{min-height:72px}.brand{gap:7px;font-size:.9rem}.brand span{width:28px;height:28px}.header nav a{font-size:.85rem}.header nav{gap:12px}.hero,.selected,.case-grid,.cards{grid-template-columns:1fr}.portrait{max-width:350px;width:100%;justify-self:start}.hero{gap:32px}.selected{gap:8px}.year{grid-template-columns:1fr;gap:0}.year h2{margin-bottom:8px}}
@media(max-width:370px){.brand span{display:none}.shell{width:calc(100% - 26px)}}