*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg:#fafaf8; --surface:#f2f1ed; --ink:#1a1916; --ink-2:#5c5b57; --ink-3:#6d6b67; --line:rgba(26,25,22,.12); --serif:'DM Serif Display',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.skip-link { position:absolute; top:-100%; left:1rem; z-index:1000; padding:.75rem 1rem; color:var(--bg); background:var(--ink); }
.skip-link:focus { top:0; }
nav { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:1.1rem 2.5rem; background:rgba(250,250,248,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav-logo { font-family:var(--serif); text-decoration:none; }
.nav-links { display:flex; gap:1.5rem; list-style:none; }
.nav-links a { font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--ink-2); }
.wrap { max-width:1160px; margin:0 auto; padding-left:2.5rem; padding-right:2.5rem; }
.page-hero { padding-top:7rem; padding-bottom:5rem; }
.eyebrow { color:var(--ink-3); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:1.25rem; }
h1 { max-width:900px; font-family:var(--serif); font-size:clamp(3.2rem,8vw,6.8rem); font-weight:400; letter-spacing:-.035em; line-height:.96; }
h1 em { color:var(--ink-2); font-weight:400; }
.lede { max-width:690px; color:var(--ink-2); font-size:1.08rem; line-height:1.8; margin-top:2rem; }
.project-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; padding-bottom:7rem; }
.project-tile { display:grid; grid-template-rows:300px auto; color:var(--ink); text-decoration:none; border:1px solid var(--line); background:var(--surface); overflow:hidden; transition:transform .25s,box-shadow .25s; }
.project-tile:first-child { grid-column:1/-1; grid-template-columns:1.3fr .7fr; grid-template-rows:430px; }
.project-tile:hover { transform:translateY(-4px); box-shadow:0 18px 46px rgba(26,25,22,.1); }
.tile-image { overflow:hidden; background:#dfddd7; }
.tile-image img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform .4s; }
.tile-image--contain { padding:1rem; background:#deddd8; }
.tile-image--contain img { object-fit:contain; object-position:center; box-shadow:0 12px 32px rgba(26,25,22,.16); }
.project-tile:hover img { transform:scale(1.025); }
.project-tile:hover .tile-image--contain img { transform:none; }
.tile-copy { padding:2rem; display:flex; flex-direction:column; align-items:flex-start; }
.tile-meta { width:100%; display:flex; justify-content:space-between; gap:1rem; color:var(--ink-3); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.tile-copy h2 { font-family:var(--serif); font-size:1.8rem; line-height:1.1; margin:1rem 0 .7rem; }
.tile-copy p { color:var(--ink-2); font-size:.92rem; }
.tile-link { margin-top:auto; padding-top:1.4rem; font-size:.8rem; font-weight:500; }
.case-hero { display:grid; grid-template-columns:.75fr 1.25fr; align-items:end; gap:4rem; padding-top:6rem; padding-bottom:3rem; }
.case-title h1 { font-size:clamp(3rem,7vw,5.8rem); }
.case-summary { color:var(--ink-2); font-size:1.08rem; line-height:1.8; }
.case-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.pill { padding:.3rem .65rem; border:1px solid var(--line); color:var(--ink-2); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; }
.case-image { border:1px solid var(--line); background:var(--surface); overflow:hidden; margin-bottom:5rem; }
.case-image img { width:100%; max-height:700px; display:block; object-fit:cover; object-position:center top; }
.case-body { display:grid; grid-template-columns:220px 1fr; gap:4rem; max-width:980px; padding-bottom:7rem; }
.case-nav { position:sticky; top:6rem; align-self:start; list-style:none; border-top:1px solid var(--line); }
.case-nav a { display:block; padding:.7rem 0; border-bottom:1px solid var(--line); color:var(--ink-3); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; text-decoration:none; }
.case-content section { padding:0 0 3rem; border-bottom:1px solid var(--line); margin-bottom:3rem; }
.case-content h2 { font-family:var(--serif); font-size:2.2rem; line-height:1.15; margin-bottom:1rem; }
.case-content h3 { font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; margin:1.6rem 0 .6rem; }
.case-content p, .case-content li { color:var(--ink-2); }
.case-content p + p { margin-top:1rem; }
.case-content ul { padding-left:1.2rem; }
.case-content li + li { margin-top:.55rem; }
.case-links { display:flex; flex-wrap:wrap; gap:.75rem; }
.button { display:inline-flex; padding:.8rem 1.1rem; text-decoration:none; font-size:.76rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--ink); }
.button--primary { background:var(--ink); color:var(--bg); }
footer { display:flex; justify-content:space-between; padding:2rem 2.5rem; border-top:1px solid var(--line); color:var(--ink-3); font-size:.76rem; }
@media (max-width:760px) { nav{padding:1rem 1.25rem}.nav-links{gap:.8rem}.wrap{padding-left:1.25rem;padding-right:1.25rem}.page-hero{padding-top:5rem}.project-list{grid-template-columns:1fr}.project-tile:first-child{grid-column:auto;grid-template-columns:1fr;grid-template-rows:280px auto}.project-tile{grid-template-rows:260px auto}.case-hero{grid-template-columns:1fr;gap:1.5rem}.case-body{grid-template-columns:1fr;gap:2rem}.case-nav{position:static;display:none}.case-image{margin-bottom:3rem}footer{padding:1.5rem 1.25rem;flex-direction:column;gap:.5rem} }