/* ==========================================================================
THE DZYN OFFICE — main.css
Architecture · Interiors · Spatial Design
--------------------------------------------------------------------------
01 Tokens 06 Hero / page headers
02 Base 07 Sections & components
03 Typography 08 Forms
04 Buttons/links 09 Reveals
05 Nav & footer 10 Responsive
========================================================================== */
/* ---------- 01 TOKENS ---------- */
:root{
/* Palette — from the DZYN brand deck */
--plaster:#F4F0EA; /* primary background (never pure white) */
--plaster-2:#EDE7DE; /* alternating band */
--plaster-3:#E4DCD0; /* hairline fills */
--charcoal:#282828; /* primary type + dark sections */
--ink:#1A1A1A;
--green:#2F433C; /* ink green — editorial sections */
--brass:#B08D57; /* accent: rules, numbers, hovers only */
--clay:#B76852; /* terracotta accent */
--amber:#A35131; /* the studio's amber-orange — philosophy band, pull-quote, button hover */
--bronze:#846A54; /* secondary detailing */
--muted:#6E675E; /* body copy */
--line:rgba(40,40,40,.14);
--line-light:rgba(244,240,234,.16);
/* Type */
--serif:'Playfair Display',Georgia,'Times New Roman',serif;
--sans:'Jost',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
/* Rhythm */
--pad:clamp(22px,5vw,120px);
--sec:clamp(78px,11vh,180px);
--maxw:1400px;
--ease:cubic-bezier(.22,1,.36,1);
--ease-curtain:cubic-bezier(.76,0,.24,1);
}
/* ---------- 02 BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.7;
background:var(--plaster);color:var(--charcoal);
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
::selection{background:var(--brass);color:var(--plaster)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding:var(--sec) 0}
.sec-tight{padding:calc(var(--sec) * .6) 0}
.band{background:var(--plaster-2)}
/* .dark is no longer used by any page — the ink-green bands it produced have
all become .amber. Kept pointing at amber so nothing can render green by
accident if the class is reused. */
.dark{background:var(--amber);color:var(--plaster)}
.amber{background:var(--amber);color:var(--plaster)}
/* The amber bands are statements, not chapters — they do not need a full
section's breathing room above and below. */
.sec.amber{padding:clamp(56px,7vh,104px) 0}
.sec.amber .philo-solo{padding:0}
.sec-short{padding:clamp(44px,5.5vh,76px) 0!important}
.dark .body,.dark p{color:rgba(244,240,234,.74)}
.dark h1,.dark h2,.dark h3{color:var(--plaster)}
.dark .eyebrow{color:var(--brass)}
.charcoal{background:var(--charcoal);color:var(--plaster)}
.charcoal h1,.charcoal h2{color:var(--plaster)}
.charcoal .body{color:rgba(244,240,234,.74)}
.charcoal .eyebrow{color:var(--brass)}
.center{text-align:center}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:12px;z-index:300;background:var(--charcoal);color:var(--plaster);padding:10px 18px;border-radius:999px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
/* ---------- 03 TYPOGRAPHY ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.005em}
.display{font-size:clamp(34px,5.6vw,86px);line-height:1.08}
.h1{font-size:clamp(32px,5vw,72px);line-height:1.09}
.h2{font-size:clamp(27px,3.9vw,58px);line-height:1.14}
.h3{font-size:clamp(21px,2.1vw,32px);line-height:1.25}
.h4{font-size:clamp(18px,1.5vw,23px);line-height:1.3}
.body{color:var(--muted);font-size:clamp(15.5px,1.15vw,18.5px);line-height:1.78;font-weight:300}
.body + .body{margin-top:20px}
.lead{font-size:clamp(17px,1.5vw,22px);line-height:1.65;color:var(--muted);font-weight:300}
.eyebrow{font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)}
.num{font-family:var(--serif);font-size:13px;letter-spacing:.1em;color:var(--brass)}
.meta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rule{width:56px;height:1px;background:var(--brass);border:0}
.measure{max-width:62ch}
.measure-sm{max-width:52ch}
/* ---------- 04 BUTTONS & LINKS ---------- */
.lnk{
display:inline-flex;align-items:center;gap:12px;position:relative;
font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
padding-bottom:7px;color:var(--charcoal);
}
.lnk::after{
content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
background:currentColor;opacity:.28;transform-origin:right;transition:transform .55s var(--ease);
}
.lnk:hover::after{transform:scaleX(0)}
.lnk .ar{display:inline-block;transition:transform .55s var(--ease)}
.lnk:hover .ar{transform:translateX(6px)}
.lnk.light{color:var(--plaster)}
.btn{
display:inline-flex;align-items:center;gap:12px;border-radius:999px;
border:1px solid var(--charcoal);color:var(--charcoal);
font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding:15px 28px;
transition:background .5s var(--ease),color .5s,border-color .5s;
}
.btn:hover{background:var(--charcoal);color:var(--plaster)}
.btn.light{border-color:rgba(244,240,234,.5);color:var(--plaster)}
.btn.light:hover{background:var(--plaster);color:var(--charcoal);border-color:var(--plaster)}
.btn.solid{background:var(--charcoal);color:var(--plaster)}
.btn.solid:hover{background:var(--amber);border-color:var(--amber)}
/* ---------- 05 NAV ---------- */
.nav{
position:fixed;top:0;left:0;right:0;z-index:120;
display:flex;align-items:center;justify-content:space-between;
padding:22px var(--pad);
transition:background .6s ease,padding .6s ease,box-shadow .6s ease;
}
.nav.solid{background:rgba(244,240,234,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:14px var(--pad);box-shadow:0 1px 0 var(--line)}
/* pages with a light header start in dark type */
.nav.on-light .brand,.nav.on-light .nav-links a,.nav.on-light .nav-cta{color:var(--charcoal)}
.nav.on-light .nav-cta{border-color:var(--line)}
.nav.on-light .burger span{background:var(--charcoal)}
.brand{font-family:var(--serif);line-height:1;color:var(--plaster);transition:color .6s;flex:0 0 auto}
.brand .t,.brand .b{display:block;font-family:var(--sans);font-weight:400;font-size:9px;letter-spacing:.42em}
.brand .m{display:block;font-size:clamp(20px,2.2vw,25px);letter-spacing:.14em;margin:2px 0 1px}
.nav.solid .brand{color:var(--charcoal)}
.nav-r{display:flex;align-items:center;gap:clamp(18px,3vw,38px)}
.nav-links{display:flex;gap:clamp(16px,2.2vw,32px)}
.nav-links a{
position:relative;padding:4px 0;font-size:11px;letter-spacing:.2em;
text-transform:uppercase;color:var(--plaster);opacity:.85;
transition:opacity .4s,color .6s;
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--brass);transition:width .5s var(--ease)}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-links a[aria-current="page"]{opacity:1}
.nav.solid .nav-links a{color:var(--charcoal)}
.nav-cta{
display:inline-flex;align-items:center;gap:10px;padding-bottom:5px;
font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--plaster);
border-bottom:1px solid rgba(244,240,234,.45);transition:color .6s,border-color .6s;
}
.nav.solid .nav-cta{color:var(--charcoal);border-color:var(--line)}
.nav-cta .ar{transition:transform .5s var(--ease)}
.nav-cta:hover .ar{transform:translateX(5px)}
.burger{display:none;width:26px;height:14px;position:relative}
.burger span{position:absolute;left:0;width:100%;height:1px;background:var(--plaster);transition:.4s}
.nav.solid .burger span,.nav.open .burger span{background:var(--charcoal)}
.burger span:first-child{top:0}
.burger span:last-child{bottom:0}
.nav.open .burger span:first-child{top:6px;transform:rotate(45deg)}
.nav.open .burger span:last-child{bottom:7px;transform:rotate(-45deg)}
.drawer{
position:fixed;inset:0;z-index:110;background:var(--plaster);
display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 var(--pad);
clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-curtain);
}
.drawer.show{clip-path:inset(0 0 0 0)}
.drawer a{font-family:var(--serif);font-size:clamp(28px,8vw,44px);padding:8px 0;color:var(--charcoal)}
.drawer .dmeta{margin-top:36px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);line-height:2}
/* ---------- 06 HERO / PAGE HEADERS ---------- */
.hero{position:relative;height:100svh;min-height:540px;overflow:hidden;background:var(--charcoal)}
.hero-img{position:absolute;inset:0;animation:drift 26s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-img::after{
content:"";position:absolute;inset:0;
background:
linear-gradient(180deg,rgba(18,14,10,.46) 0%,rgba(18,14,10,.12) 34%,rgba(18,14,10,.80) 100%),
linear-gradient(90deg,rgba(18,14,10,.58) 0%,rgba(18,14,10,.22) 46%,rgba(18,14,10,0) 78%);
}
.hero-in{
position:relative;z-index:2;height:100%;max-width:var(--maxw);margin:0 auto;
display:flex;flex-direction:column;justify-content:flex-end;
padding:0 var(--pad) clamp(48px,8vh,96px);
}
.hero h1{color:var(--plaster);max-width:15ch}
.hero .body{color:rgba(244,240,234,.82);max-width:56ch;margin-top:24px}
.hero .eyebrow{display:block;color:rgba(244,240,234,.72);margin-bottom:22px}
.hero .acts{display:flex;gap:clamp(18px,3vw,34px);align-items:center;margin-top:clamp(32px,4vw,44px);flex-wrap:wrap}
.scroll-cue{
position:absolute;right:var(--pad);bottom:clamp(48px,8vh,96px);z-index:3;
writing-mode:vertical-rl;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
color:rgba(244,240,234,.6);display:flex;align-items:center;gap:14px;
}
.scroll-cue::after{content:"";width:1px;height:56px;background:linear-gradient(rgba(244,240,234,.6),transparent)}
/* page header (inner pages) */
.phead{padding:calc(var(--pad) + 96px) 0 clamp(50px,7vw,96px)}
.phead h1{max-width:17ch;margin-top:20px}
.phead .body{margin-top:26px}
.phead-media{aspect-ratio:21/9;overflow:hidden;margin-top:clamp(40px,5vw,70px)}
/* ---------- 07 SECTIONS & COMPONENTS ---------- */
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(38px,6vw,84px)}
.sec-head .eyebrow{white-space:nowrap}
.sec-head .ln{flex:1;height:1px;background:var(--line)}
.arch{border-radius:50% 50% 0 0 / 38% 38% 0 0;overflow:hidden}
.arch-sm{border-radius:50% 50% 0 0 / 26% 26% 0 0;overflow:hidden}
.arch-mark{width:62px;height:74px;margin:0 auto 34px}
.arch-mark path{stroke:var(--brass);stroke-width:1;fill:none}
.statement{max-width:19ch;margin:0 auto;text-align:center}
.statement-sub{max-width:64ch;margin:36px auto 0;text-align:center}
/* two-column editorial */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px);align-items:center}
.split .m{aspect-ratio:4/5;overflow:hidden}
.split.top{align-items:start}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,70px)}
/* work / project cards */
.work-item{margin-bottom:clamp(64px,10vw,150px)}
.work-item:last-child{margin-bottom:0}
.work-media{position:relative;overflow:hidden}
.work-media img{transition:transform 1.4s var(--ease)}
.work-item:hover .work-media img{transform:scale(1.04)}
.work-lead{max-width:760px;margin-left:auto;margin-right:auto}
.work-lead .work-media{aspect-ratio:3/4}
.work-meta{
display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
padding-top:24px;margin-top:24px;border-top:1px solid var(--line);
}
.work-meta h3{font-size:clamp(22px,2.6vw,38px)}
.work-meta .sub{margin-top:10px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.work-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,64px);align-items:end}
.work-pair .work-media{aspect-ratio:3/4}
/* project grid (projects page) */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,60px)}
.filters button{
font-size:11px;letter-spacing:.18em;text-transform:uppercase;
padding:10px 20px;border-radius:999px;border:1px solid var(--line);color:var(--muted);
transition:background .4s var(--ease),color .4s,border-color .4s;
}
.filters button:hover{border-color:var(--bronze);color:var(--charcoal)}
.filters button[aria-pressed="true"]{background:var(--charcoal);border-color:var(--charcoal);color:var(--plaster)}
.grid-work{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vw,72px) clamp(20px,3vw,54px)}
.pcard{display:block}
.pcard .m{aspect-ratio:4/5;overflow:hidden;margin-bottom:20px}
.pcard .m img{transition:transform 1.4s var(--ease)}
.pcard:hover .m img{transform:scale(1.05)}
.pcard h3{font-size:clamp(20px,2.1vw,28px)}
.pcard .sub{margin-top:8px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* Place and year, one notch quieter than the typology above it. */
.pcard .place{margin-top:5px;font-size:12.5px;color:var(--muted);opacity:.78}
.pcard.hide{display:none}
/* expertise cards */
.exp{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,3.4vw,54px)}
.exp-card .m{aspect-ratio:4/5;overflow:hidden;margin-bottom:26px}
.exp-card .m img{transition:transform 1.4s var(--ease)}
.exp-card:hover .m img{transform:scale(1.05)}
.exp-card .num{display:block;margin-bottom:12px}
.exp-card h3{margin-bottom:14px}
.exp-list{list-style:none;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.exp-list li{padding:5px 0;font-size:14px;color:var(--muted)}
/* expertise page — alternating rows */
.erow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,100px);align-items:center;margin-bottom:clamp(64px,9vw,140px)}
.erow:last-child{margin-bottom:0}
.erow .m{aspect-ratio:4/3;overflow:hidden}
.erow:nth-child(even) .m{order:2}
.erow .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.erow .tags span{
font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
border:1px solid var(--line);border-radius:999px;padding:7px 15px;
}
/* philosophy */
.philo-solo{text-align:center;padding:clamp(10px,4vw,60px) 0}
.philo-cols{
display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,70px);
max-width:900px;margin:clamp(38px,6vw,80px) auto 0;text-align:left;
}
/* ---- PROJECTS GATEWAY ----
Three full-height panels, one per category, sitting directly under the nav.
Choosing one opens that category's own page. The image is loaded at runtime
by the same data-hero mechanism the cards use, so it is always a real
project photograph rather than a hard-coded file. */
.gate-row{
display:grid;grid-template-columns:repeat(3,1fr);
height:100svh;min-height:520px;
}
.gate{
position:relative;overflow:hidden;display:block;
color:var(--plaster);text-decoration:none;
border-right:1px solid rgba(244,240,234,.14);
}
.gate:last-child{border-right:0}
.gate .gbg{position:absolute;inset:0}
.gate .gbg img{
width:100%;height:100%;object-fit:cover;
transform:scale(1.04);transition:transform 1.6s var(--ease);
}
.gate:hover .gbg img,.gate:focus-visible .gbg img{transform:scale(1.11)}
.gate .gveil{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(20,16,12,.42),rgba(20,16,12,.30) 42%,rgba(20,16,12,.66));
transition:background .6s;
}
.gate:hover .gveil,.gate:focus-visible .gveil{
background:linear-gradient(180deg,rgba(20,16,12,.34),rgba(20,16,12,.22) 42%,rgba(20,16,12,.60));
}
.gate .ginner{
position:absolute;inset:0;z-index:2;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:0 clamp(16px,2.4vw,40px);
}
.gate h2{
font-family:var(--serif);font-weight:400;
font-size:clamp(30px,3.6vw,58px);line-height:1.05;
text-shadow:0 4px 40px rgba(0,0,0,.45);
}
.gate .gline{
margin-top:16px;max-width:24ch;font-size:15px;line-height:1.6;
/* two lines' worth whatever the copy runs to, so the three titles sit on
one line across the row rather than drifting panel to panel */
min-height:48px;
opacity:.9;text-shadow:0 2px 14px rgba(0,0,0,.5);
}
/* the count sits low in the panel, away from the centred title */
.gate .gct{
position:absolute;left:0;right:0;bottom:clamp(28px,4vh,54px);
font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.8;
text-shadow:0 2px 14px rgba(0,0,0,.5);
}
/* switcher at the foot of a category page */
.cat-switch{
display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;
margin-top:clamp(46px,6vw,80px);padding-top:clamp(26px,3vw,40px);
border-top:1px solid var(--line);
}
.cat-switch span{
font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);
}
.cat-switch a{
font-family:var(--serif);font-size:clamp(20px,2vw,28px);
color:var(--charcoal);text-decoration:none;
border-bottom:1px solid transparent;transition:border-color .4s;
}
.cat-switch a:hover{border-bottom-color:var(--brass)}
@media (max-width:860px){
/* stacked, each panel a comfortable thumb-scroll tall */
.gate-row{grid-template-columns:1fr;height:auto;min-height:0}
.gate{height:56svh;min-height:340px;border-right:0;
border-bottom:1px solid rgba(244,240,234,.14)}
.gate:last-child{border-bottom:0}
}
/* ---- FOUNDER'S NOTE ----
The closing line is the note's own pull-quote; the signature sits under it
in the founder's hand-off voice rather than as another body paragraph. */
.pull{
font-family:var(--serif);font-size:clamp(21px,2vw,27px);line-height:1.35;
color:var(--charcoal);margin-top:34px;max-width:26ch;
}
.sig{
margin-top:26px;font-size:15px;color:var(--muted);line-height:1.6;
}
.sig span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
/* ---- HOMEPAGE COUNTERS ----
Three figures that count up once, the first time the row is scrolled into
view. Sits on the amber band in place of the old philosophy prose. */
.stats{
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(30px,4vw,60px);
max-width:980px;margin:clamp(34px,4vw,58px) auto 0;
}
.stats > div{position:relative}
.stats > div + div::before{
content:"";position:absolute;left:calc(-1 * clamp(15px,2vw,30px));
top:12%;bottom:12%;width:1px;background:var(--line-light);
}
.stats .count{
font-family:var(--serif);font-weight:400;
font-size:clamp(40px,5.4vw,74px);line-height:1;
letter-spacing:-.01em;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.stats dt{
margin-top:14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
opacity:.78;
}
@media (max-width:760px){
.stats{grid-template-columns:1fr;gap:34px}
.stats > div + div::before{
left:0;right:0;top:auto;bottom:auto;width:auto;height:1px;
transform:translateY(-18px);
}
}
/* featured project */
.feat-media{aspect-ratio:21/9;overflow:hidden;margin-bottom:clamp(34px,5vw,70px)}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);align-items:start}
.details{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.4vw,32px);margin-top:clamp(40px,6vw,80px)}
.details .m{aspect-ratio:3/4;overflow:hidden}
.details .m img{transition:transform 1.4s var(--ease)}
.details .m:hover img{transform:scale(1.05)}
/* approach steps */
.steps{border-top:1px solid var(--line)}
.step{
display:grid;grid-template-columns:88px 1.1fr 2fr;gap:clamp(16px,4vw,60px);
padding:clamp(26px,3.4vw,46px) 0;border-bottom:1px solid var(--line);
transition:padding-left .6s var(--ease);
}
.step:hover{padding-left:14px}
.step .num{font-size:15px}
.step h3{font-size:clamp(19px,1.9vw,27px)}
.step p{max-width:56ch;font-size:16px;line-height:1.72;color:var(--muted)}
.dark .step,.dark .steps{border-color:var(--line-light)}
/* approach page — detailed stages */
.stage{
display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);align-items:center;
padding:clamp(46px,6vw,90px) 0;border-bottom:1px solid var(--line);
}
.stage:last-child{border-bottom:0}
.stage:nth-child(even) .m{order:2}
.stage .m{aspect-ratio:4/3;overflow:hidden}
.stage .bignum{font-family:var(--serif);font-size:clamp(40px,6vw,86px);color:var(--brass);line-height:1;display:block;margin-bottom:18px;opacity:.55}
.stage ul{list-style:none;margin-top:22px;display:grid;gap:9px}
.stage li{position:relative;padding-left:20px;font-size:15px;color:var(--muted)}
.stage li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:1px;background:var(--brass)}
/* testimonial */
.quote{max-width:24ch;margin:0 auto;text-align:center;font-style:italic}
.quote-by{margin-top:38px;text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.quote-by span{display:block;margin-top:8px;font-size:11px;letter-spacing:.14em;color:var(--muted)}
/* team / values */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.team .m{aspect-ratio:4/5;overflow:hidden;margin-bottom:20px;background:var(--plaster-3)}
.team h4{font-size:19px}
.team .role{margin-top:6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,64px)}
.value{padding-top:26px;border-top:1px solid var(--line)}
.value .num{display:block;margin-bottom:12px}
.value h4{margin-bottom:12px}
.dark .value{border-color:var(--line-light)}
/* journal */
.jfeature{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;margin-bottom:clamp(56px,8vw,110px)}
.jfeature .m{aspect-ratio:16/11;overflow:hidden}
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,56px)}
.jcard .m{aspect-ratio:4/3;overflow:hidden;margin-bottom:20px}
.jcard .m img{transition:transform 1.4s var(--ease)}
.jcard:hover .m img{transform:scale(1.05)}
.jcard .cat{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.jcard h3{font-size:clamp(19px,1.7vw,24px);margin:12px 0 10px;line-height:1.3}
.jcard p{font-size:15px;color:var(--muted);line-height:1.65}
.jcard .date{margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.jcard.hide{display:none}
/* project detail page */
.pd-fact{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px);padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pd-fact dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:9px}
.pd-fact dd{font-size:16px;color:var(--charcoal)}
.pd-wide{aspect-ratio:16/9;overflow:hidden;margin:clamp(46px,6vw,90px) 0}
.pd-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,32px);margin:clamp(46px,6vw,90px) 0}
.pd-duo .m{aspect-ratio:3/4;overflow:hidden}
.pd-body{max-width:640px;margin:0 auto}
.pd-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.4vw,32px);margin:clamp(46px,6vw,90px) 0}
.pd-trio .m{aspect-ratio:3/4;overflow:hidden}
.pd-next{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:34px;border-top:1px solid var(--line)}
/* ---------- 08 FORMS ---------- */
.form{display:grid;gap:clamp(22px,3vw,34px);max-width:820px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px)}
.field{display:grid;gap:9px}
.field label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}
.field .req{color:var(--clay)}
.field input,.field select,.field textarea{
font-family:var(--sans);font-size:16px;font-weight:300;color:var(--charcoal);
background:transparent;border:0;border-bottom:1px solid var(--line);
padding:11px 0;transition:border-color .4s;width:100%;border-radius:0;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field select{appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.field .selwrap{position:relative}
.field .selwrap::after{
content:"";position:absolute;right:2px;top:16px;width:7px;height:7px;pointer-events:none;
border-right:1px solid var(--bronze);border-bottom:1px solid var(--bronze);transform:rotate(45deg);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brass)}
.field input::placeholder,.field textarea::placeholder{color:#a9a196}
.field .err{font-size:12px;color:var(--clay);letter-spacing:.04em;text-transform:none;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--clay)}
.field.invalid .err{display:block}
.choice{display:flex;flex-wrap:wrap;gap:9px}
.choice label{
display:inline-flex;align-items:center;gap:9px;cursor:pointer;
border:1px solid var(--line);border-radius:999px;padding:10px 18px;
font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
transition:border-color .35s,color .35s,background .35s;
}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice label:hover{border-color:var(--bronze);color:var(--charcoal)}
.choice input:checked + span{color:var(--plaster)}
.choice label:has(input:checked){background:var(--charcoal);border-color:var(--charcoal);color:var(--plaster)}
.choice input:focus-visible + span{outline:2px solid var(--brass);outline-offset:4px}
.form-note{font-size:13px;color:var(--muted);max-width:52ch}
.form-ok{
display:none;padding:clamp(30px,5vw,56px);border:1px solid var(--brass);
border-radius:4px;background:rgba(176,141,87,.06);
}
.form-ok.show{display:block}
.contact-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(40px,6vw,100px);align-items:start}
.cinfo{display:grid;gap:30px}
.cinfo h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);font-family:var(--sans);margin-bottom:10px}
.cinfo p,.cinfo a{font-size:16px;color:var(--charcoal);line-height:1.65}
.cinfo a:hover{color:var(--brass)}
/* ---------- FOOTER ---------- */
.cta{padding:clamp(90px,15vh,200px) 0;text-align:center}
/* Compact closing CTA — roughly half the height, for pages whose last
section does not want a full screen of dark. */
/* the doubled class keeps these ahead of the .cta rules that follow */
.cta.cta-tight{padding:clamp(50px,6vh,78px) 0}
.cta.cta-tight .arch-mark{height:46px}
.cta.cta-tight h2{font-size:clamp(25px,2.6vw,36px);max-width:30ch;margin-top:12px}
.cta.cta-tight .body{margin-top:14px;font-size:16px;max-width:58ch}
.cta.cta-tight .body + div{margin-top:26px!important}
.cta h2{max-width:16ch;margin:22px auto 0}
.cta .body{max-width:56ch;margin:26px auto 0}
.foot{background:var(--charcoal);color:rgba(244,240,234,.62);font-size:14px;padding:0 0 40px}
.foot-in{
display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(30px,4vw,60px);
padding-top:60px;border-top:1px solid var(--line-light);
}
.foot .brand{color:var(--plaster);margin-bottom:18px}
.foot h5{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:20px}
.foot ul{list-style:none;display:grid;gap:12px}
.foot a{transition:color .4s}
.foot a:hover{color:var(--plaster)}
.foot .tag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,240,234,.5)}
.foot-btm{
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
margin-top:60px;padding-top:24px;border-top:1px solid var(--line-light);
font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,240,234,.45);
}
/* ---------- 09 REVEALS ---------- */
[data-r]{transition-delay:var(--d,0ms)}
[data-r="up"]{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
[data-r="up"].in{opacity:1;transform:none}
/* The curtain is applied to the ![]()
, never to the observed element itself.
clip-path on the observed element zeroes its visible area, so
IntersectionObserver reports ratio 0, .in is never added and the image
stays clipped forever. Clipping the child keeps the box observable. */
[data-r="img"]{overflow:hidden}
[data-r="img"] img{
clip-path:inset(0 0 100% 0);transform:scale(1.14);
transition:clip-path 1.3s var(--ease-curtain),transform 1.7s var(--ease);
transition-delay:var(--d,0ms);
}
[data-r="img"].in img{clip-path:inset(0 0 0 0);transform:scale(1)}
[data-r="line"]{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-curtain)}
[data-r="line"].in{transform:scaleX(1)}
/* ---------- 10 RESPONSIVE ---------- */
@media(max-width:1100px){
.exp{grid-template-columns:1fr;gap:52px}
.exp-card .m{aspect-ratio:16/10}
.jgrid{grid-template-columns:repeat(2,1fr)}
.pd-fact{grid-template-columns:repeat(2,1fr);gap:26px}
.team{grid-template-columns:repeat(2,1fr)}
.foot-in{grid-template-columns:1fr 1fr;gap:38px}
}
@media(max-width:900px){
.split,.feat-grid,.erow,.stage,.jfeature,.contact-grid,.philo-cols,.cols-2{grid-template-columns:1fr;gap:30px}
.split .m,.erow .m,.stage .m,.jfeature .m{aspect-ratio:16/11;order:-1}
/* Portraits are the exception: a 16/11 letterbox crops a standing figure
through the chest, and the arch curve then takes what is left of the
head. Keep them upright, flatten the arch, and bias the crop upwards so
the face stays in frame. */
.split .m.arch{aspect-ratio:3/4;border-radius:50% 50% 0 0 / 14% 14% 0 0}
.split .m.arch img{object-position:50% 12%}
.erow:nth-child(even) .m,.stage:nth-child(even) .m{order:-1}
.step{grid-template-columns:52px 1fr;gap:14px}
.step .txt{grid-column:2}
.step h3{margin-bottom:10px}
.values{grid-template-columns:1fr}
.pd-duo,.pd-trio{grid-template-columns:1fr;gap:12px}
.pd-duo .m,.pd-trio .m{aspect-ratio:4/3}
}
@media(max-width:760px){
body{font-size:16px}
.nav-links,.nav-cta{display:none}
.burger{display:block}
.nav{padding:16px var(--pad)}
.hero{height:92svh;min-height:480px}
.scroll-cue{display:none}
.phead{padding:calc(var(--pad) + 84px) 0 44px}
.phead-media{aspect-ratio:4/3}
.work-pair,.grid-work{grid-template-columns:1fr;gap:38px}
.work-pair .work-media,.work-lead .work-media{aspect-ratio:4/5}
.pcard .m{aspect-ratio:4/5}
.work-meta{flex-direction:column;align-items:flex-start;gap:16px}
.feat-media{aspect-ratio:4/3}
.details{grid-template-columns:1fr;gap:12px}
.details .m{aspect-ratio:16/11}
.jgrid{grid-template-columns:1fr;gap:44px}
.team{grid-template-columns:1fr;gap:38px}
.frow{grid-template-columns:1fr}
.foot-in{grid-template-columns:1fr;gap:38px}
.pd-wide{aspect-ratio:4/3}
.statement{max-width:100%}
}
@media(max-width:400px){
.filters button{padding:9px 15px;font-size:10.5px}
.choice label{padding:9px 14px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.hero-img{animation:none}
[data-r]{opacity:1!important;transform:none!important;clip-path:none!important}
[data-r] img{transform:none!important;clip-path:none!important}
*{transition-duration:.01ms!important}
}
@media print{
.nav,.drawer,.scroll-cue,.cta{display:none}
body{background:#fff}
}
/* ==========================================================================
11 — SCROLL-SCRUB HOMEPAGE
Cinematic scroll system: growing arch hero, word-by-word reveal,
sticky-stacking project panels, lifting cards. DZYN palette throughout.
========================================================================== */
/* ---- logo lockup (real brand asset, light/dark swap) ---- */
.brand{position:relative;display:block;width:clamp(122px,11vw,158px);line-height:0}
.brand img{width:100%;height:auto;display:block;transition:opacity .5s ease}
.brand .lg-d{position:absolute;inset:0;opacity:0}
.nav.solid .brand .lg-l,.nav.on-light .brand .lg-l{opacity:0}
.nav.solid .brand .lg-d,.nav.on-light .brand .lg-d{opacity:1}
.foot .brand{width:178px;margin-bottom:24px}
.foot .brand .lg-d{display:none}
.drawer .brand{width:150px;margin-bottom:26px}
.drawer .brand .lg-l{opacity:0}
.drawer .brand .lg-d{opacity:1}
/* ---- kicker with dot (reference style, brand colour) ---- */
.kicker{
display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;
font-size:11.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);
}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brass);flex:0 0 auto}
.kicker.on-dark{color:rgba(244,240,234,.68)}
.kicker.on-dark::before{background:var(--brass)}
/* ---- 01 HERO: arch grows and rises over the copy ---- */
.hero-scrub{
height:260vh;position:relative;
background:linear-gradient(180deg,#EFEAE1 0%,#E7E0D5 52%,#DED5C8 100%);
}
.hero-scrub .sticky{
position:sticky;top:0;height:100svh;overflow:hidden;
display:flex;align-items:center;justify-content:center;
}
.hero-scrub .copy{
position:relative;z-index:2;text-align:center;padding:0 var(--pad);
margin-top:-6vh;max-width:1100px;will-change:transform;
}
.hero-scrub h1{max-width:14ch;margin:0 auto;color:var(--charcoal)}
.hero-scrub .sub{margin:30px auto 0;max-width:60ch;color:var(--muted)}
.hero-scrub .acts{display:flex;gap:16px;justify-content:center;margin-top:40px;flex-wrap:wrap}
/* ---- hero arch: apex only at rest, grows and fills with the photograph ----
Width/height/bottom are driven from JS rather than transform:scale, so the
1.6px outline stays exactly 1.6px at every size instead of fattening. */
.hero-arch{
position:absolute;left:50%;bottom:0;z-index:3;
transform:translateX(-50%);
width:40vh;height:54vh;
border:1.6px solid var(--clay);
border-radius:50% 50% 0 0 / 38% 38% 0 0;
overflow:hidden;background:transparent;
will-change:width,height,bottom;
}
.hero-arch img{position:absolute;object-fit:cover;opacity:0;will-change:opacity,left,top;max-width:none}
/* trust pill */
.pill{
display:inline-flex;align-items:center;gap:14px;margin-bottom:38px;
background:rgba(255,255,255,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:8px 22px 8px 9px;
box-shadow:0 8px 30px rgba(80,60,40,.08);
}
.pill .faces{display:flex}
.pill .faces span{
width:32px;height:32px;border-radius:50%;border:2.5px solid #fff;margin-left:-10px;
background-size:cover;background-position:center;
}
.pill .faces span:first-child{margin-left:0}
.pill p{font-size:15px;font-weight:400;color:var(--charcoal)}
/* ---- 02 WORD-BY-WORD REVEAL ---- */
.reveal-sec{
height:270vh;background:var(--plaster);
/* the sticky text finishes centred, leaving ~half a viewport of dead space
below it. Pull the next section up over that empty band. */
margin-bottom:-11vh;
}
.reveal-sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:0 var(--pad)}
.reveal-text{
font-family:var(--serif);font-size:clamp(28px,5vw,74px);line-height:1.14;
font-weight:400;text-align:center;max-width:20ch;letter-spacing:-.01em;
}
.reveal-text .w{color:#DCD5C9;transition:color .12s linear}
.reveal-text .it{font-style:italic}
/* ---- 03 STICKY PROJECT PANELS ---- */
.panels{position:relative} /* bounds each panel's sticky range: without a
wrapper the panels are children of and
stay pinned for the whole rest of the page */
.panel{
position:sticky;top:0;height:100svh;overflow:hidden;
display:grid;place-items:center;text-align:center;color:var(--plaster);
}
.panel .bg{position:absolute;inset:0;will-change:transform}
.panel .bg img{width:100%;height:100%;object-fit:cover}
.panel .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,.24),rgba(20,16,12,.5))}
.panel .inner{position:relative;z-index:2;padding:0 var(--pad)}
.panel .cat{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:20px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.panel h3{font-size:clamp(34px,5.4vw,80px);line-height:1.02;text-shadow:0 4px 40px rgba(0,0,0,.4);color:var(--plaster)}
/* Location and year the studio recorded for the project, under the title. */
.panel .pmeta{
margin-top:16px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
color:var(--plaster);opacity:.86;text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.panel .loc{margin-top:18px;font-size:17px;opacity:.92;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.panel .btn{margin-top:32px}
/* ---- 04 EXPERTISE CARDS (lift on hover) ---- */
.scards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.scard{
background:#fff;border-radius:20px;padding:11px 11px 28px;
box-shadow:0 2px 18px rgba(80,60,40,.05);
transition:transform .45s var(--ease),box-shadow .45s;
}
.scard:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(80,60,40,.14)}
.scard .thumb{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4}
.scard .thumb img{transition:transform .8s var(--ease)}
.scard:hover .thumb img{transform:scale(1.06)}
.scard .tag{
position:absolute;top:13px;left:13px;background:var(--plaster);color:var(--charcoal);
padding:7px 16px;border-radius:999px;font-size:12px;letter-spacing:.06em;
}
.scard h4{font-size:21px;margin:22px 13px 8px}
.scard p{font-size:15px;color:var(--muted);margin:0 13px;line-height:1.45}
/* ---- 05 GRID-PAPER STUDIO SECTION ---- */
.paper{
position:relative;background:#F1ECE3;
background-image:linear-gradient(rgba(70,55,40,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(70,55,40,.055) 1px,transparent 1px);
background-size:74px 74px;
}
.paper .inner{max-width:900px;margin:0 auto;text-align:center;padding:0 var(--pad)}
.paper .kicker{background:rgba(255,255,255,.7);padding:8px 18px;border-radius:999px}
/* ---- 06 ROUNDED DARK CTA CARD ---- */
.cta-wrap{padding:clamp(70px,10vw,120px) var(--pad) clamp(24px,3vw,34px);background:#F1ECE3;
background-image:linear-gradient(rgba(70,55,40,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(70,55,40,.055) 1px,transparent 1px);
background-size:74px 74px;}
.cta-card{
position:relative;overflow:hidden;border-radius:26px;text-align:center;
background:var(--charcoal);color:var(--plaster);
padding:clamp(80px,11vw,130px) clamp(24px,5vw,60px) clamp(80px,10vw,120px);
max-width:var(--maxw);margin:0 auto;
}
.cta-card .bg{position:absolute;inset:0;opacity:.55;will-change:transform}
.cta-card .bg img{width:100%;height:100%;object-fit:cover}
.cta-card .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,.62),rgba(20,16,12,.78))}
.cta-card .inner{position:relative;z-index:2}
.cta-card h2{max-width:17ch;margin:0 auto;color:var(--plaster)}
.cta-card .sub{max-width:56ch;margin:24px auto 0;color:rgba(244,240,234,.76)}
/* ---- responsive for the scroll system ---- */
@media(max-width:1080px){
.scards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
.hero-scrub{height:250vh}
.hero-scrub .copy{margin-top:-6vh}
.pill{margin-bottom:26px}
.pill p{font-size:13.5px}
.pill .faces span{width:28px;height:28px}
.reveal-sec{height:220vh;margin-bottom:-8vh}
.reveal-text{max-width:100%}
.scards{grid-template-columns:1fr;gap:16px}
.panel h3{font-size:clamp(30px,8vw,44px)}
.cta-card{border-radius:18px}
.brand{width:116px}
}
@media(prefers-reduced-motion:reduce){
.hero-scrub,.reveal-sec{height:auto}
.hero-scrub .sticky,.reveal-sticky{position:relative;height:auto;padding-top:130px;padding-bottom:60px;display:block;text-align:center}
.panel{position:relative;height:78svh}
.reveal-text .w{color:var(--charcoal)!important}
}
/* ==========================================================================
12 — REAL PROJECT LIBRARY (48 projects across 3 categories)
========================================================================== */
/* count badge on the filter buttons */
.filters .ct{
display:inline-block;margin-left:8px;font-size:10px;letter-spacing:.06em;
opacity:.55;vertical-align:1px;
}
/* placeholder shown until fetch-images.py has pulled the Drive renders.
Designed rather than broken — a plaster panel with the brand arch. */
.m.awaiting,.bg.awaiting{
background:
linear-gradient(180deg,var(--plaster-2),var(--plaster-3));
position:relative;overflow:hidden;
}
.m.awaiting img,.bg.awaiting img{display:none}
.m.awaiting::before,.bg.awaiting::before{
content:"";position:absolute;left:50%;top:50%;
width:34%;aspect-ratio:.74;transform:translate(-50%,-58%);
border:1.4px solid rgba(176,141,87,.5);
border-radius:50% 50% 0 0 / 38% 38% 0 0;
}
.m.awaiting::after,.bg.awaiting::after{
content:"Photography to come";position:absolute;left:0;right:0;bottom:13%;
text-align:center;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:var(--bronze);
}
.bg.awaiting::after{color:rgba(244,240,234,.75)}
.bg.awaiting{background:linear-gradient(180deg,#5d5346,#3c352c)}
.bg.awaiting::before{border-color:rgba(244,240,234,.4)}
/* fields the studio still has to supply */
.pd-fact dd.tbd{color:#a49a8c;font-style:italic}
/* ---- PROJECT FACT STRIP ----
Location / Area / Category / Year, read as one horizontal line directly
under the project title and above the photography. Four equal columns
spanning the full measure, separated by hairline rules. On a phone it
folds to two columns and the rule moves to the second cell of each row. */
.pd-strip{
display:grid;grid-template-columns:repeat(4,1fr);
margin-top:clamp(26px,3.4vw,40px);padding-top:clamp(22px,2.6vw,30px);
border-top:1px solid var(--line);
}
.pd-strip > div{padding:0 clamp(14px,2vw,30px)}
.pd-strip > div:first-child{padding-left:0}
.pd-strip > div + div{border-left:1px solid var(--line)}
.pd-strip dt{
font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--bronze);margin-bottom:12px;
}
.pd-strip dd{
font-family:var(--serif);font-size:clamp(21px,2vw,30px);
line-height:1.16;color:var(--charcoal);
}
.pd-strip dd.tbd{color:#a49a8c;font-style:italic}
@media (max-width:760px){
.pd-strip{grid-template-columns:repeat(2,1fr);row-gap:26px}
.pd-strip > div{padding:0 18px}
.pd-strip > div:nth-child(odd){padding-left:0;border-left:0}
.pd-strip > div:nth-child(even){border-left:1px solid var(--line)}
}
.phead-tight{padding-bottom:clamp(24px,3vw,40px)}
@media (max-width:760px){
.pd-strip{grid-template-columns:repeat(2,1fr);gap:22px 26px}
.pd-strip dd{white-space:normal}
}
/* project gallery, built from projects-data.js */
.pd-gallery{margin:clamp(30px,4vw,56px) 0 0}
.pd-gallery .g-full{aspect-ratio:16/9;overflow:hidden;margin-bottom:clamp(12px,2vw,26px)}
.pd-gallery .g-duo{
display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,26px);
margin-bottom:clamp(12px,2vw,26px);
}
.pd-gallery .g-duo > div{aspect-ratio:3/4;overflow:hidden}
.pd-gallery img{transition:transform 1.2s var(--ease)}
.pd-gallery .g-full:hover img,.pd-gallery .g-duo > div:hover img{transform:scale(1.03)}
.pd-empty{
aspect-ratio:16/9;display:grid;place-items:center;text-align:center;
background:linear-gradient(180deg,var(--plaster-2),var(--plaster-3));
}
.pd-empty p{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.pd-empty .sub{
margin-top:12px;font-size:14px;letter-spacing:0;text-transform:none;
color:var(--muted);max-width:44ch;
}
@media(max-width:760px){
.pd-gallery .g-duo{grid-template-columns:1fr}
.pd-gallery .g-duo > div{aspect-ratio:4/3}
.pd-gallery .g-full{aspect-ratio:4/3}
}