
:root{
  --bg:#f4f2ed; --ink:#121210; --muted:#77736b; --line:rgba(18,18,16,.18); --white:#fff;
  --pad:clamp(18px,2.8vw,54px); --gap:clamp(14px,1.8vw,30px); --header-h:72px;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
picture{display:block}
::selection{background:#171716;color:#f4f2ed}
.site-header{position:fixed;z-index:50;inset:0 0 auto 0;height:var(--header-h);padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;color:#fff;transition:background .25s,color .25s,border-color .25s;mix-blend-mode:normal}
.site-header.scrolled{background:rgba(244,242,237,.94);color:var(--ink);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.07)}
.brand{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.site-nav{display:flex;gap:24px;align-items:center;font-size:12px;letter-spacing:.04em}
.site-nav a{position:relative}.site-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:currentColor;transition:right .25s}.site-nav a:hover:after,.site-nav a:focus-visible:after{right:0}
.menu-toggle{display:none;border:0;background:none;color:inherit;font:inherit;font-size:12px;letter-spacing:.04em;padding:8px 0}
.hero{position:relative;min-height:100svh;background:#111;overflow:hidden}
.hero picture,.hero img{width:100%;height:100%;position:absolute;inset:0}
.hero img{object-fit:cover;object-position:center 52%}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.02) 42%,rgba(0,0,0,.38))}
.hero-copy{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:clamp(26px,5vh,66px);color:white;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
.hero-name{font-size:clamp(28px,4.5vw,72px);line-height:.92;letter-spacing:-.045em;font-weight:500;margin:0 0 18px;text-transform:uppercase}
.hero-role{margin:0;font-size:clamp(13px,1.15vw,18px);line-height:1.45;letter-spacing:.02em}
.hero-role strong{display:block;font-weight:500;font-size:1.05em}.hero-year{font-size:11px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.section-head{padding:clamp(56px,7vw,108px) var(--pad) clamp(28px,3.8vw,52px);display:flex;justify-content:space-between;gap:30px;align-items:end}
.section-head h2{margin:0;font-size:clamp(22px,3vw,42px);line-height:1;font-weight:500;letter-spacing:-.03em}.section-head p{max-width:520px;margin:0;color:var(--muted);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.work-list{padding:0 var(--pad) clamp(90px,10vw,150px);display:flex;flex-direction:column;gap:clamp(68px,9vw,138px)}
.work-item{display:block}.work-visual{overflow:hidden;background:#d9d6cf}.work-visual img{width:100%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}.work-item:hover .work-visual img{transform:scale(1.012)}
.work-meta{display:flex;justify-content:space-between;gap:20px;padding-top:12px;border-top:1px solid var(--line);margin-top:12px;font-size:11px;letter-spacing:.05em;text-transform:uppercase}.work-meta span:last-child{color:var(--muted)}
.work-item.full{width:100%}.work-item.wide{width:min(86%,1450px)}.work-item.left{margin-right:auto}.work-item.right{margin-left:auto}.work-item.portrait{width:min(58%,900px)}.work-item.medium{width:min(76%,1150px)}
.about{padding:clamp(80px,10vw,160px) var(--pad);background:#11110f;color:#f4f2ed}.about-grid{display:grid;grid-template-columns:minmax(260px,.78fr) 1.35fr;gap:clamp(40px,8vw,140px);align-items:start}.about-photo img{width:100%;height:auto}.eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#aaa69d;margin:0 0 26px}.about h2{font-size:clamp(34px,5vw,78px);line-height:.96;letter-spacing:-.05em;font-weight:400;margin:0 0 36px;max-width:980px}.about-lead{font-size:clamp(17px,2vw,27px);line-height:1.3;max-width:880px;margin:0 0 42px;color:#ebe8e1}.about-small{max-width:780px;color:#bdb8ae;font-size:14px;line-height:1.55}.capabilities{margin-top:50px;border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:20px}.capabilities div{font-size:12px;letter-spacing:.035em}.about-actions{margin-top:42px;display:flex;gap:22px;font-size:12px}.text-link{border-bottom:1px solid currentColor;padding-bottom:3px}
.contact{padding:clamp(80px,10vw,160px) var(--pad) clamp(40px,5vw,70px)}.contact h2{font-size:clamp(42px,7vw,110px);font-weight:400;letter-spacing:-.06em;line-height:.9;margin:0 0 50px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;border-top:1px solid var(--line);padding-top:22px}.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-size:clamp(16px,1.6vw,24px)}.contact-note{max-width:420px;color:var(--muted);font-size:13px}.footer-row{margin-top:90px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .65s ease}.reveal.is-visible{opacity:1;transform:none}
/* project pages */
.project-page{background:var(--bg)}.project-page.dark{background:#10100f;color:#f3f0e9}.project-header{position:absolute;color:currentColor}.project-header.light{color:#121210}.project-header.dark{color:#f4f2ed}.project-header.scrolled{position:fixed}
.project-intro{padding:calc(var(--header-h) + 80px) var(--pad) clamp(40px,6vw,90px);display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end}.project-intro h1{font-size:clamp(40px,5.6vw,82px);font-weight:400;letter-spacing:-.055em;line-height:.9;margin:0;text-transform:uppercase}.project-info{max-width:560px;justify-self:end}.project-category{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:18px}.dark .project-category{color:#aaa69d}.project-desc{font-size:clamp(15px,1.5vw,20px);line-height:1.4;margin:0 0 24px}.project-role{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.dark .project-role{color:#aaa69d}
.project-stream{padding:0 var(--pad) clamp(90px,10vw,160px)}.project-img{margin:0 0 var(--gap)}.project-img img{width:100%}.project-hero-img{margin-bottom:clamp(60px,8vw,120px)}.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start;margin-bottom:var(--gap)}.pair.asym{grid-template-columns:1.28fr .72fr}.pair.reverse{grid-template-columns:.72fr 1.28fr}.portrait-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,90px);align-items:center;margin-bottom:clamp(80px,10vw,150px)}.portrait-row picture{max-width:820px}.portrait-copy{max-width:400px}.portrait-copy p{font-size:13px;color:var(--muted)}.dark .portrait-copy p{color:#aaa69d}.cinematic{width:100%;margin:0 auto clamp(70px,9vw,140px)}.cinematic img{width:100%}.project-next{border-top:1px solid var(--line);padding:clamp(45px,6vw,85px) var(--pad);display:flex;justify-content:space-between;align-items:end;gap:30px}.dark .project-next{border-color:rgba(255,255,255,.18)}.project-next small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px}.dark .project-next small{color:#aaa69d}.project-next strong{display:block;font-size:clamp(24px,4vw,58px);font-weight:400;letter-spacing:-.04em}.next-arrow{font-size:34px;font-weight:300}
/* responsive */
@media(max-width:900px){
  :root{--header-h:60px}
  .menu-toggle{display:block;z-index:2}.site-nav{position:fixed;inset:0;background:#f4f2ed;color:#121210;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:18px;padding:90px var(--pad) 34px;font-size:32px;line-height:1.1;transform:translateY(-105%);transition:transform .28s ease}.site-nav.open{transform:none}.site-nav a:after{display:none}
  .hero{min-height:92svh}.hero-copy{grid-template-columns:1fr;gap:24px}.hero-year{justify-self:start}.hero-name{font-size:clamp(34px,11vw,58px)}
  .section-head{padding:clamp(56px,7vw,108px) var(--pad) clamp(28px,3.8vw,52px);display:flex;justify-content:space-between;gap:30px;align-items:end}.section-head p{max-width:520px;margin:0;color:var(--muted);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
  .work-list{padding:0 var(--pad) clamp(90px,10vw,150px);display:flex;flex-direction:column;gap:clamp(68px,9vw,138px)}.work-item,.work-item.wide,.work-item.portrait,.work-item.medium{width:100%;margin:0}
  .work-meta{font-size:10px}
  .about-grid{grid-template-columns:1fr}.about-photo{max-width:520px}.capabilities{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}.contact-note{order:-1}.footer-row{gap:20px;flex-direction:column}
  .project-intro{grid-template-columns:1fr;padding-top:calc(var(--header-h) + 52px);gap:32px}.project-info{justify-self:start}.project-intro h1{font-size:clamp(40px,5.6vw,82px);font-weight:400;letter-spacing:-.055em;line-height:.9;margin:0;text-transform:uppercase}
  .pair,.pair.asym,.pair.reverse,.portrait-row{grid-template-columns:1fr}.portrait-row{gap:30px}.portrait-copy{order:-1}.project-stream{padding-left:0;padding-right:0}.project-stream>.project-img,.project-stream>.cinematic{margin-left:0;margin-right:0}.project-stream>.pair,.project-stream>.portrait-row{padding:0 var(--pad)}.project-stream>.project-hero-img{padding:0}
  .project-next{align-items:center}
}
@media(max-width:600px){
  .hero{min-height:82svh}
  .hero img{object-position:center center}.hero-copy{bottom:28px}.hero-role{font-size:13px}.hero-year{font-size:9px}.section-head{padding:clamp(56px,7vw,108px) var(--pad) clamp(28px,3.8vw,52px);display:flex;justify-content:space-between;gap:30px;align-items:end}.about{padding-top:75px}.about h2{font-size:38px}.about-lead{font-size:18px}.capabilities{grid-template-columns:1fr}.contact h2{font-size:52px}.contact-links{font-size:18px}.project-intro{padding-bottom:28px}.project-desc{font-size:15px}.project-next strong{font-size:28px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.work-visual img,.site-nav{transition:none}}
:focus-visible{outline:2px solid currentColor;outline-offset:5px}

/* V2 art-direction utilities */
html,body{overflow-x:clip}
.work-item.edge-work{width:calc(100% + var(--pad) + var(--pad));margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
.work-item.edge-work .work-meta{margin-left:var(--pad);margin-right:var(--pad)}
.nest-cover-diptych{display:grid;grid-template-columns:.75fr .8fr;gap:clamp(8px,.7vw,14px);align-items:start;background:var(--bg)}
.nest-cover-diptych picture,.nest-cover-diptych img{display:block;width:100%;height:auto}
.full-bleed{width:calc(100% + var(--pad) + var(--pad));margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))!important}
.full-bleed img{display:block;width:100%;height:auto}
.large-landscape{width:min(92%,1600px);margin-left:auto;margin-right:auto}
.portrait-opener{width:min(62%,980px);margin:0 auto clamp(65px,8vw,120px)}
.portrait-opener picture,.portrait-opener img{display:block;width:100%;height:auto}
.portrait-focus{width:min(62%,930px);margin:0 0 clamp(70px,9vw,130px)}
.portrait-focus.align-right{margin-left:auto}
.portrait-focus picture,.portrait-focus img{display:block;width:100%;height:auto}
.project-stream>.pair{margin-bottom:clamp(55px,7vw,110px)}
.project-stream>.cinematic.full-bleed{margin-bottom:clamp(60px,8vw,120px)}

@media(max-width:900px){
  .work-item.edge-work{width:calc(100% + var(--pad) + var(--pad));margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
  .nest-cover-diptych{grid-template-columns:1fr;gap:var(--gap)}
  .nest-cover-diptych picture:nth-child(2){margin-top:0}
  .work-item.edge-work .work-meta{margin-left:var(--pad);margin-right:var(--pad)}
  .full-bleed{width:100%;margin-left:0!important;margin-right:0!important}
  .large-landscape,.portrait-opener,.portrait-focus{width:100%;margin-left:0;margin-right:0}
  .portrait-opener,.portrait-focus{padding-left:var(--pad);padding-right:var(--pad)}
  .project-intro h1{font-size:clamp(38px,11vw,62px)}
}

@supports not (overflow:clip){html,body{overflow-x:hidden}}


/* V3 final cover system — image-led, full-width, no artificial crop */
.work-list{
  padding-left:0;
  padding-right:0;
  gap:clamp(58px,7vw,112px);
}
.work-item,
.work-item.full,
.work-item.wide,
.work-item.portrait,
.work-item.medium,
.work-item.edge-work{
  width:100%;
  margin-left:0;
  margin-right:0;
}
.work-cover .work-visual{
  width:100%;
  overflow:hidden;
  background:#d9d6cf;
}
.work-cover .work-visual picture,
.work-cover .work-visual img{
  display:block;
  width:100%;
  height:auto;
}
.work-cover:hover .work-visual img{transform:scale(1.006)}
.cover-diptych-grid{
  display:grid;
  grid-template-columns:minmax(0,var(--c1,1fr)) minmax(0,var(--c2,1fr));
  gap:0;
  align-items:start;
}
.cover-diptych-grid picture,
.cover-diptych-grid img{min-width:0;width:100%;height:auto}
.work-meta,
.work-item.edge-work .work-meta{
  margin:0;
  padding:14px var(--pad) 0;
  border-top:0;
}
.section-head{
  padding-top:clamp(72px,8vw,128px);
  padding-bottom:clamp(30px,3vw,46px);
}
.section-head h2{font-size:clamp(22px,2.6vw,38px)}
.project-intro h1{font-size:clamp(38px,4.8vw,68px)}
.project-desc{max-width:46ch}

/* Full-bleed on project pages uses the padded stream's own box model, not 100vw. */
.full-bleed{
  width:calc(100% + (2 * var(--pad)));
  margin-left:calc(-1 * var(--pad))!important;
  margin-right:calc(-1 * var(--pad))!important;
}
.full-bleed picture,.full-bleed img{display:block;width:100%;height:auto}

@media(max-width:900px){
  .work-list{padding-left:0;padding-right:0;gap:clamp(52px,10vw,86px)}
  .cover-diptych-grid{grid-template-columns:1fr;gap:0}
  .cover-diptych-grid picture + picture{margin-top:clamp(6px,1.6vw,10px)}
  .work-meta,.work-item.edge-work .work-meta{margin:0;padding:12px var(--pad) 0}
  .project-intro h1{font-size:clamp(38px,10vw,58px)}
}

@media(prefers-reduced-motion:reduce){
  .work-cover:hover .work-visual img{transform:none}
}
