:root{--paper:#f5f2ec;--paper2:#ece7de;--ink:#15120f;--ink2:#3b352e;--mute:#857b6f;--line:#ddd5c8;--wood:#7a4a26;--wood2:#b07a46;--serif:"Instrument Serif",Georgia,serif;--sans:"Inter Tight",system-ui,-apple-system,sans-serif;--pad:clamp(20px,4.2vw,64px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.wrap{max-width:1480px;margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0}
em{font-style:italic;font-family:var(--serif)}
.eyb,.lab,.no,.wm,.cd,.cn,.pd,dt{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.eyb{margin:0 0 18px}
.tl{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid currentColor;transition:gap .3s}
.tl::after{content:"\2192";letter-spacing:0}.tl:hover{gap:16px}
.sechd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,56px);padding-top:18px;border-top:1px solid var(--line)}
.sechd h2{font-size:clamp(34px,4.4vw,64px);line-height:1}
.sechd p{max-width:420px;margin:0;color:var(--ink2)}
/* preview banner */
.pv{position:relative;z-index:60;display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;padding:9px 16px;background:var(--ink);color:#d9d0c3;font-size:12px;letter-spacing:.04em}
.pv a{color:#fff;border-bottom:1px solid var(--wood2);font-weight:500}
/* header */
.hd{position:sticky;top:0;z-index:50;background:rgba(245,242,236,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
.hd.sc{border-color:var(--line)}
.hdin{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:inline-flex;align-items:center;gap:12px;font:400 26px/1 var(--serif);letter-spacing:.01em}
.brand .mk{width:30px;height:30px}
.links{display:flex;gap:clamp(18px,2.6vw,40px);font-size:13px;letter-spacing:.04em}
.links a{position:relative;padding:4px 0}.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .35s}
.links a:hover::after,.links a.on::after{right:0}
.burger{display:none;width:34px;height:34px;position:relative}.burger span{position:absolute;left:5px;right:5px;height:1.5px;background:currentColor;transition:.3s}.burger span:first-child{top:13px}.burger span:last-child{top:20px}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.burger[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:45;background:var(--paper);padding:120px var(--pad) 40px;opacity:0;visibility:hidden;transition:.35s}
.drawer.op{opacity:1;visibility:visible}.drawer nav{display:flex;flex-direction:column;gap:6px}.drawer a{font:400 44px/1.2 var(--serif)}
/* dark home header over hero */
body.dark .hd{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:#f5f2ec}body.dark .hero{margin-top:-76px}
body.dark .hd .mk{filter:invert(1)}
body.dark .hd.sc{background:rgba(245,242,236,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);border-color:var(--line)}
body.dark .hd.sc .mk{filter:none}
body.dark .drawer.op~* .hd,body.menu .hd{color:var(--ink)!important}body.menu .hd .mk{filter:none!important}
/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;color:#f5f2ec;background:#0f0c0a}
.hslides,.hs{position:absolute;inset:0}.hs{opacity:0;transition:opacity 1.8s ease}.hs.on{opacity:1}
.hs img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 9s ease-out}.hs.on img{transform:scale(1)}
.hshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,10,.45) 0%,rgba(15,12,10,0) 28%,rgba(15,12,10,.05) 50%,rgba(15,12,10,.72) 100%)}
.hcopy{position:absolute;left:0;right:0;bottom:clamp(90px,13vh,150px)}
.hero .eyb{color:#e6dccd}
.hero h1{font-size:clamp(64px,11.5vw,188px);line-height:.88;letter-spacing:-.025em}
.hero h1 em{color:#e3c39c}
.hdis{margin:22px 0 0;font-size:clamp(14px,1.3vw,17px);letter-spacing:.08em;color:#e6dccd}.hdis i{font-style:normal;opacity:.5;margin:0 .5em}
.hfoot{position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.06em;color:#d9cfc1}
.hcap{transition:opacity .6s}.hscroll{border-bottom:1px solid currentColor;padding-bottom:3px}
/* intro */
.intro{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(30px,6vw,110px);align-items:end;padding-top:clamp(90px,12vw,170px);padding-bottom:clamp(80px,10vw,140px)}
.lede{font:400 clamp(34px,4.3vw,66px)/1.08 var(--serif);letter-spacing:-.015em;margin:0}.lede em{color:var(--wood)}
.lede.sm{font-size:clamp(28px,3vw,42px);margin:0 0 28px}
.introside p{margin:0 0 26px;color:var(--ink2);max-width:420px}
/* works grid */
.works{padding-bottom:clamp(80px,10vw,150px)}
.wgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(48px,6vw,96px) clamp(18px,2.4vw,36px);align-items:start}
.wk{display:block}
.wk.c1{grid-column:1/-1}.wk.c2{grid-column:1/span 5}.wk.c3{grid-column:7/span 6;margin-top:clamp(40px,9vw,140px)}
.wk.c4{grid-column:1/span 7}.wk.c5{grid-column:9/span 4;margin-top:clamp(60px,12vw,200px)}
.wk.c6{grid-column:2/span 4}.wk.c7{grid-column:7/span 6;margin-top:clamp(40px,8vw,120px)}.wk.c8{grid-column:4/span 6}
.wi{overflow:hidden;background:var(--paper2)}
.wi img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .6s}
.wk.c1 .wi img{aspect-ratio:21/9}.wk.c2 .wi img,.wk.c5 .wi img,.wk.c6 .wi img{aspect-ratio:4/5}.wk.c8 .wi img{aspect-ratio:16/10}
.wk:hover .wi img,.ix:hover .wi img{transform:scale(1.035)}
.wl{display:flex;align-items:baseline;gap:14px;margin-top:16px;flex-wrap:wrap}
.wt{font:400 clamp(24px,2.2vw,32px)/1.1 var(--serif)}.wl .wm{margin-left:auto}
/* materials band */
.matband{background:var(--ink);color:var(--paper);padding:clamp(70px,9vw,130px) 0}
.matband .sechd{border-color:#3a332c}.matband .sechd p{color:#b8ad9f}
.swrow{display:flex;gap:14px;overflow-x:auto;padding:0 var(--pad) 18px;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:thin;scrollbar-color:#5b5047 transparent}
.sw{flex:0 0 clamp(170px,17vw,250px);scroll-snap-align:start}.sw img{aspect-ratio:3/4;object-fit:cover;width:100%;transition:transform .6s}
.sw:hover img{transform:translateY(-6px)}
.sw span{display:block;margin-top:12px;font:400 20px/1.2 var(--serif);color:#efe7dc}
/* steps */
.steps{padding-top:clamp(80px,10vw,150px);padding-bottom:clamp(80px,10vw,150px)}
.stgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,36px)}
.stp img{aspect-ratio:4/5;object-fit:cover;width:100%;margin-bottom:18px}
.stp h3{font-size:30px;margin:6px 0 8px}.stp p{margin:0;color:var(--ink2);font-size:14px}
/* quote */
.quote{position:relative;min-height:80vh;display:flex;align-items:center;color:#f5f2ec;overflow:hidden;background:#111}
.qimg{position:absolute;inset:0}.qimg img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:grayscale(1) contrast(1.1)}
.qin{position:relative;padding-top:120px;padding-bottom:120px}
.quote blockquote{margin:0;max-width:1100px;font:400 clamp(36px,4.8vw,76px)/1.06 var(--serif);letter-spacing:-.015em}
.quote cite{display:block;margin-top:32px;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:#d0c4b3}
/* press */
.press{padding-top:clamp(80px,10vw,150px);padding-bottom:clamp(80px,10vw,150px)}
.outlets{display:flex;flex-wrap:wrap;gap:12px 0;font:400 clamp(28px,3.6vw,54px)/1.15 var(--serif);color:var(--ink2)}
.outlets span::after{content:"/";margin:0 .45em;color:var(--line)}.outlets span:last-child::after{content:none}
/* page header */
.phd{padding-top:clamp(70px,9vw,140px);padding-bottom:clamp(50px,6vw,90px)}
.phd h1{font-size:clamp(64px,10vw,160px);line-height:.9;letter-spacing:-.025em}
.sub{max-width:560px;color:var(--ink2);font-size:17px;margin:26px 0 28px}
/* work index */
.ixgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(44px,5vw,80px) clamp(18px,2.4vw,36px);padding-bottom:clamp(90px,10vw,150px)}
.ix .wi img{aspect-ratio:4/5}.ix:nth-child(3n+2){margin-top:clamp(0px,6vw,90px)}
.ix .wk2{margin-left:auto;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ix>.wm{display:block;margin-top:6px;text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink2)}
/* project */
.prj{padding-top:clamp(40px,5vw,70px)}
.back{display:inline-block;font-size:13px;color:var(--mute);margin-bottom:clamp(40px,6vw,90px)}.back:hover{color:var(--ink)}
.prjhd{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:end;padding-bottom:36px;border-bottom:1px solid var(--line)}
.prjhd h1{font-size:clamp(56px,8.5vw,140px);line-height:.9;letter-spacing:-.025em}
.facts{margin:0;display:grid;gap:14px}.facts div{display:grid;grid-template-columns:90px 1fr;gap:16px;padding-top:12px;border-top:1px solid var(--line)}
dd{margin:0;font-size:15px}
.prjtx{max-width:760px;margin-left:auto;padding:clamp(40px,5vw,70px) 0 clamp(50px,6vw,90px)}
.prjtx p{font:400 clamp(21px,1.8vw,26px)/1.45 var(--serif);margin:0 0 22px;color:var(--ink2)}.prjtx p:first-child::first-letter{color:var(--wood)}
.prjtx .tl{margin-top:16px}
.plates{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(40px,5vw,80px) clamp(16px,2vw,30px);padding-bottom:clamp(80px,10vw,140px);align-items:start}
.pf{margin:0}.pf.full{grid-column:1/-1}.pf.half{grid-column:span 6}.pf.inset{grid-column:3/span 8}
.pf.half:nth-of-type(odd){margin-top:0}
.pf .zoom{display:block;width:100%;background:var(--paper2);cursor:zoom-in;overflow:hidden}
.pf img{width:100%;max-height:88vh;object-fit:contain;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.pf.half img{aspect-ratio:4/5;object-fit:cover}
.pf .zoom:hover img{transform:scale(1.02)}
figcaption{display:flex;gap:14px;align-items:baseline;margin-top:14px;flex-wrap:wrap}
.ct{font:400 19px/1.2 var(--serif)}figcaption .cd{text-transform:none;letter-spacing:.01em;font-size:13px}
.pnav{display:grid;grid-template-columns:1fr 1.4fr;gap:30px;border-top:1px solid var(--line);padding-top:36px;padding-bottom:clamp(80px,10vw,130px)}
.pnav a{display:flex;flex-direction:column;gap:10px}.pt{font:400 clamp(34px,4.4vw,68px)/1 var(--serif);transition:color .3s}
.pnav a:hover .pt{color:var(--wood)}.pn{text-align:right;align-items:flex-end}
.pni{width:min(360px,100%);overflow:hidden;margin-top:10px}.pni img{aspect-ratio:16/10;object-fit:cover;transition:transform 1s}.pn:hover .pni img{transform:scale(1.04)}
/* materials */
.spgrid{display:grid;gap:clamp(60px,7vw,110px);padding-bottom:clamp(80px,9vw,130px)}
.sp{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:clamp(14px,2vw,28px);align-items:end;scroll-margin-top:110px}
.sp:nth-child(even){grid-template-columns:1.05fr 1fr 1fr}.sp:nth-child(even) .spt{order:-1}
.spi .zoom{display:block;width:100%;overflow:hidden;cursor:zoom-in}.spi img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1s}.spi .zoom:hover img{transform:scale(1.03)}
.spi.g img{aspect-ratio:4/5}
.spt h3{font-size:clamp(34px,3.4vw,52px);line-height:1;margin:8px 0 6px}.lat{font:italic 400 20px/1.3 var(--serif);color:var(--wood);margin:0 0 18px}
.spt p{color:var(--ink2);max-width:380px}.fin{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)!important}
.others{padding-bottom:clamp(80px,10vw,140px)}.omgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,28px)}
.om{margin:0}.om .zoom{display:block;width:100%;overflow:hidden;cursor:zoom-in}.om img{aspect-ratio:3/4;object-fit:cover;width:100%}
.om figcaption{flex-direction:column;gap:2px}.note{color:var(--mute);font-size:13px;margin-top:50px}
/* press page */
.feats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,48px);padding-bottom:clamp(70px,8vw,120px)}
.ft1{margin:0;background:var(--paper2);padding:clamp(24px,4vw,60px);display:flex;flex-direction:column}
.ft1 img{height:clamp(280px,32vw,460px);width:auto;object-fit:contain;margin:0 auto 26px;box-shadow:0 30px 60px -30px rgba(20,15,10,.45)}
.ft1 figcaption{flex-direction:column;gap:6px}.ft1 .cd{max-width:440px}
.prg{display:grid;grid-template-columns:1fr 3fr;gap:30px;padding:30px 0 70px;border-top:1px solid var(--line)}
.prg h2{font-size:clamp(28px,2.6vw,38px);line-height:1.05}
.pr{display:grid;grid-template-columns:200px 140px 1fr 24px;gap:6px 24px;padding:20px 0;border-bottom:1px solid var(--line);transition:padding .3s,background .3s}
.pr:hover{padding-left:12px;background:rgba(122,74,38,.05)}
.po{font:400 22px/1.2 var(--serif)}.pd{padding-top:5px}.ptt{font-weight:500}.pnn{grid-column:3;color:var(--ink2);font-size:14px}.par{grid-row:1;grid-column:4;color:var(--wood)}
.pnn:empty{display:none}
/* about */
.ab{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,6vw,100px);align-items:center;padding-top:clamp(50px,7vw,110px);padding-bottom:clamp(80px,9vw,140px)}
.abimg img{width:100%;aspect-ratio:4/5;object-fit:cover}
.abtx h1{font-size:clamp(48px,6vw,92px);line-height:.95;margin-bottom:34px;letter-spacing:-.02em}
.abtx>p:not(.lede):not(.eyb){color:var(--ink2);max-width:560px}
.cv{padding-bottom:clamp(80px,9vw,130px)}
.cvr{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.cy{font:500 12px/1.8 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cvr h3{font-size:30px;line-height:1.1;margin-bottom:6px}.cvr h3 a{border-bottom:1px solid var(--line)}.cvr h3 a:hover{border-color:var(--wood)}
.cvr p{margin:0;color:var(--ink2);max-width:680px}
.casa{background:var(--paper2);padding:clamp(80px,9vw,140px) 0}
.casain{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(30px,6vw,100px)}
.casa h2{font-size:clamp(40px,4.6vw,72px);line-height:1}
.casal{display:grid;gap:30px}.casal>div{padding-top:18px;border-top:1px solid var(--line)}.casal h3{font-size:28px;margin:6px 0}.casal p{margin:0;color:var(--ink2)}
.casal .lt{justify-self:start;margin-top:10px}
.clients{padding-top:clamp(80px,9vw,130px);padding-bottom:clamp(60px,7vw,100px)}
.cll{list-style:none;margin:0;padding:0;columns:4 200px;column-gap:30px}.cll li{font:400 21px/1.75 var(--serif);break-inside:avoid;color:var(--ink2)}
.contact{padding-top:clamp(70px,8vw,120px);padding-bottom:clamp(90px,10vw,150px);border-top:1px solid var(--line);scroll-margin-top:80px}
.contact h2{font-size:clamp(34px,4vw,60px);line-height:1.05;max-width:900px;margin-bottom:36px}
.big{font:400 clamp(26px,3.6vw,54px)/1.1 var(--serif);color:var(--wood);border-bottom:1px solid currentColor;word-break:break-all}
/* footer */
.ft{background:var(--ink);color:#cfc5b7;padding:clamp(70px,8vw,120px) 0 36px;font-size:14px}
.ftop{display:grid;grid-template-columns:1.6fr 1fr 1fr .7fr;gap:40px;padding-bottom:70px}
.ftsay{font:400 clamp(30px,3vw,46px)/1.1 var(--serif);color:#f2ebe1;margin:0}.ftsay em{color:#d9b38a}
.fcol{display:flex;flex-direction:column;gap:8px}.fcol .lab{color:#8c8174;margin-bottom:8px}.fcol a:hover{color:#fff}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:26px;border-top:1px solid #312a24;font-size:12px;color:#8c8174}
.brand.sm{font-size:20px;color:#efe7dc}.brand.sm .mk{width:24px;height:24px;filter:invert(1)}
/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(14,11,9,.97);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.35s;color:#efe7dc}
.lb.op{opacity:1;visibility:visible}.lb figure{margin:0;max-width:88vw;display:flex;flex-direction:column;align-items:center}
.lb img{max-width:88vw;max-height:82vh;object-fit:contain}.lb figcaption{font:400 18px/1.3 var(--serif);justify-content:center}
.lbx{position:absolute;top:22px;right:28px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.lbp,.lbn{position:absolute;top:50%;transform:translateY(-50%);font-size:28px;padding:20px}.lbp{left:10px}.lbn{right:10px}
.lbc{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.16em;color:#8c8174}
/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hs img{transition:none;transform:none}}
/* responsive */
@media (max-width:1100px){.pr{grid-template-columns:160px 1fr 24px}.pd{display:none}.ptt,.pnn{grid-column:2}.par{grid-column:3}.prg{grid-template-columns:1fr}.omgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
 .links{display:none}.burger{display:block}.hdin{height:64px}
 .intro,.prjhd,.ab,.casain{grid-template-columns:1fr}
 .wgrid{grid-template-columns:1fr 1fr}.wgrid .wk{grid-column:span 1!important;margin-top:0!important}.wgrid .wk.c1{grid-column:1/-1!important}.wgrid .wk:nth-child(odd):not(.c1){margin-top:50px!important}
 body.dark .hero{margin-top:-64px}
 .wgrid .wk:not(.c1) .wi img{aspect-ratio:4/5}.wl .wm{margin-left:0;width:100%}
 .stgrid{grid-template-columns:1fr 1fr}.ixgrid{grid-template-columns:1fr 1fr}.ix:nth-child(3n+2){margin-top:0}.ix:nth-child(even){margin-top:50px}
 .sp,.sp:nth-child(even){grid-template-columns:1fr 1fr}.sp .spt,.sp:nth-child(even) .spt{grid-column:1/-1;order:2}
 .ftop{grid-template-columns:1fr 1fr}.ftsay{grid-column:1/-1}
 .pf.half,.pf.inset{grid-column:1/-1}.pf.half img{aspect-ratio:auto;object-fit:contain}
 .feats{grid-template-columns:1fr}
}
@media (max-width:600px){
 body{font-size:15px}.brand{font-size:23px}
 .wgrid{grid-template-columns:1fr;gap:50px}.wgrid .wk{margin-top:0!important}.wgrid .wk.c1 .wi img{aspect-ratio:4/3}
 .ixgrid{grid-template-columns:1fr}.ix:nth-child(even){margin-top:0}
 .stgrid{grid-template-columns:1fr 1fr;gap:28px 14px}.stp h3{font-size:24px}
 .hfoot .hcap{display:none}.hfoot{justify-content:flex-start}
 .cvr{grid-template-columns:1fr;gap:6px}.pr{grid-template-columns:1fr 24px}.po,.ptt,.pnn{grid-column:1}.par{grid-column:2}
 .omgrid{grid-template-columns:1fr 1fr}.pnav{grid-template-columns:1fr}.pn{text-align:left;align-items:flex-start}
 .ftop{grid-template-columns:1fr}.pv{font-size:11px;gap:8px}
}