:root{--ink:#1e1b18;--bone:#f2eee7;--stone:#e3ddd2;--mute:#7d756a;--line:#d6cfc2}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:Georgia,"Times New Roman",serif;background:var(--bone);color:var(--ink);line-height:1.65}
a{color:inherit;text-decoration:none}
.top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:24px 3vw;font:500 .68rem system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#f2eee7;mix-blend-mode:difference}
.top nav a{margin-left:26px}
.top a:hover{opacity:.6}
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#f2eee7;overflow:hidden;background:#141210}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 30%,#4a4036,#1a1714 70%);animation:slow 22s ease-in-out infinite alternate}
@keyframes slow{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-c{position:relative;padding:0 6vw;animation:fade 1.6s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mark{font-weight:300;font-size:clamp(2.4rem,8vw,5.6rem);letter-spacing:.34em;text-transform:uppercase;padding-left:.34em}
.sub{margin-top:18px;font:400 .72rem system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#cfc6b8}
.down{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font:500 .66rem system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#cfc6b8}
.intro{max-width:760px;margin:auto;padding:140px 6vw;text-align:center;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.5;font-weight:300}
.wrap{max-width:1180px;margin:auto;padding:90px 5vw}
h2,.wrap-h{font:500 .7rem system-ui,sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--mute);margin-bottom:36px}
.wrap-h{padding:0 3vw}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:44px}
.cols article{border-top:1px solid var(--ink);padding-top:16px}
h3{font:500 .78rem system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px}
.cols p{color:#4a443c}
.work{padding:90px 0}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:0 6px}
.tile{display:block}
.ph{aspect-ratio:4/5;background:var(--stone);display:flex;align-items:center;justify-content:center;font:.78rem system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#a79e8f;overflow:hidden;transition:filter .4s}
.tile:hover .ph{filter:brightness(.93)}
.cap{display:flex;justify-content:space-between;padding:12px 4px 26px;font:500 .66rem system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.arr{color:var(--mute);transition:transform .3s}
.tile:hover .arr{transform:translateX(4px)}
.about{max-width:620px;font-size:1.15rem}
.contact{text-align:center;padding:120px 6vw;border-top:1px solid var(--line);margin-top:40px}
.contact h2{margin-bottom:22px}
.mail{display:inline-block;margin:10px 0;font-size:clamp(1.2rem,3vw,2rem);font-weight:300;border-bottom:1px solid var(--ink)}
.muted{color:var(--mute);font:.72rem system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;margin-top:14px}
footer{text-align:center;padding:30px;font:.66rem system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);border-top:1px solid var(--line)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
/* inner project pages */
.inner .top{position:absolute;color:var(--ink);mix-blend-mode:normal}
.proj{padding-top:150px;padding-bottom:50px}
.proj h1{font-weight:300;font-size:clamp(2rem,5vw,3.4rem);margin:8px 0 14px}
.eyebrow{font:500 .7rem system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.lead{max-width:620px;color:#4a443c}
.grid.one{grid-template-columns:1fr 1fr}
.ph.wide{grid-column:1/-1;aspect-ratio:16/9}
.link{font:500 .72rem system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}
@media(max-width:700px){.grid,.grid.one{grid-template-columns:1fr}.top nav a{margin-left:14px}.top{padding:18px 5vw}.corner{max-width:42vw;overflow:hidden;text-overflow:ellipsis}.mark{letter-spacing:.22em}.intro{padding:90px 6vw}}
@media(prefers-reduced-motion:reduce){.hero-bg,.hero-c{animation:none}.reveal{opacity:1;transform:none;transition:none}}

.ph img{width:100%;height:100%;object-fit:cover;display:block}
.tile.w{grid-column:1/-1}.tile.w .ph{aspect-ratio:16/9}
.tile.sq .ph{aspect-ratio:1/1}
.ph.full{grid-column:1/-1;aspect-ratio:auto}.ph.full img{height:auto;max-height:90vh;object-fit:contain;background:var(--stone)}

.trio{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:inherit}
.trio .tile .ph{aspect-ratio:4/5}
@media(max-width:700px){.trio{grid-template-columns:1fr}}
.trio{grid-template-columns:repeat(4,1fr)}@media(max-width:700px){.trio{grid-template-columns:1fr}}
.trio{grid-template-columns:repeat(5,1fr)}@media(max-width:700px){.trio{grid-template-columns:1fr}}
.hero-bg{background:linear-gradient(rgba(20,18,16,.62),rgba(20,18,16,.72)),url(img/hero.jpg) center/cover no-repeat #141210!important}
.trio{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.trio{grid-template-columns:1fr}.top .xs{display:none}.top{letter-spacing:.12em}.corner{max-width:none!important;overflow:visible!important}.top nav a{margin-left:16px}.sub span{display:block}.sub .bar{display:none}.sub{line-height:2}}
.trio{grid-template-columns:repeat(4,1fr)}@media(max-width:700px){.trio{grid-template-columns:1fr}}
.trio .tile.span2{grid-column:span 2}.trio .tile.span2 .ph{aspect-ratio:1.615/1}@media(max-width:700px){.trio .tile.span2{grid-column:auto}.trio .tile.span2 .ph{aspect-ratio:4/5}}
.about+.about{margin-top:1.1em}
.sub,.down{padding-left:.3em}.down{padding-left:0;text-indent:.3em;white-space:nowrap}.contact h2{padding-left:.34em}footer{padding-left:calc(30px + .2em)}
.trio{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.trio{grid-template-columns:1fr}.top.solid{mix-blend-mode:normal;background:rgba(242,238,231,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);padding:14px 5vw}}
.proj .grid.one{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.proj .ph.full{aspect-ratio:4/5;grid-column:auto}
.proj .ph.full img{width:100%;height:100%;max-height:none;object-fit:cover}
@media(max-width:700px){.proj .grid.one{grid-template-columns:1fr}}
.proj .ph.full{position:relative}.lbl{position:absolute;left:14px;bottom:12px;color:#fff;font:.72rem system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.jrows{display:flex;flex-direction:column;gap:8px}.jr{display:flex;gap:8px;width:100%}
.jc{position:relative;min-width:0}.jc img{display:block;width:100%;height:auto}
@media(max-width:700px){.jr{flex-direction:column;max-width:100%!important}.jc{flex:none!important}}