:root{
  --green:#14231c; --green-2:#1c3128; --deep:#0b1410; --cream:#f4efe4; --paper:#ece5d5;
  --ink:#1d1d1b; --gold:#c9a961; --gold-d:#8a6d2c; --muted:#5f5e57;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:300 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
em{font-style:italic;color:var(--gold)}
img{display:block;max-width:100%}
strong{font-weight:500}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:10px;z-index:30;background:var(--gold);color:var(--green);padding:8px 14px}
.skip:focus{left:10px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* nav */
.nav{position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;
  padding:22px 6vw;z-index:20;color:var(--cream);transition:background .4s,padding .4s}
.nav.solid,.nav.open{background:rgba(14,25,20,.95);backdrop-filter:blur(8px);padding:14px 6vw}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:500 22px var(--serif);letter-spacing:.02em}
.nav nav a{margin-left:34px;text-decoration:none;font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;
  padding-bottom:4px;border-bottom:1px solid transparent}
.nav nav a:hover{opacity:1;color:var(--gold)}
.nav nav a[aria-current]{opacity:1;border-color:var(--gold)}
.menu{display:none;background:none;border:0;width:34px;height:24px;position:relative;cursor:pointer}
.menu span:not(.sr){position:absolute;left:4px;right:4px;height:1px;background:var(--cream);transition:transform .3s}
.menu span:first-child{top:8px}.menu span:nth-child(2){top:16px}
.nav.open .menu span:first-child{transform:translateY(4px) rotate(45deg)}
.nav.open .menu span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* photographs: black and white with grain */
.hero-photo,.photo-band::before{position:absolute;inset:0;background:var(--img-lg,var(--img)) var(--pos,center)/cover no-repeat;
  filter:grayscale(1) contrast(1.05)}
.hero,.page-hero,.photo-band,.plate,.teaser-art{position:relative;isolation:isolate}
.hero::after,.page-hero::after,.photo-band::after,.plate::after,.teaser-art::after{content:"";position:absolute;inset:0;
  background-image:var(--grain);opacity:.22;mix-blend-mode:overlay;pointer-events:none;z-index:2}
.plate img,.teaser-art img{filter:grayscale(1) contrast(1.05)}

/* hero */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 6vw 90px;color:var(--cream);overflow:hidden;background:var(--deep)}
.hero-photo{--img:url(img/hero-1200.jpg);--img-lg:url(img/hero-2400.jpg);--pos:center 35%;animation:slowzoom 30s ease-out both}
@keyframes slowzoom{from{transform:scale(1.08)}to{transform:none}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(11,20,16,.94) 0%,rgba(11,20,16,.75) 42%,rgba(11,20,16,.25) 100%),
             linear-gradient(0deg,rgba(11,20,16,.85),transparent 40%)}
.hero-inner{position:relative;z-index:3;max-width:760px}
.hero h1,.page-hero h1{font:400 clamp(48px,7.5vw,104px)/1.02 var(--serif);margin:18px 0 28px;letter-spacing:-.01em}
.hero .lede,.page-hero .lede{max-width:540px;opacity:.88}
.eyebrow{position:relative;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:500}
.ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px}
.btn{padding:15px 34px;border:1px solid var(--gold);background:var(--gold);color:var(--green);text-decoration:none;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;transition:background .3s,color .3s}
.btn:hover{background:transparent;color:var(--gold)}
.btn.ghost{background:transparent;color:var(--cream)}
.btn.ghost:hover{background:var(--gold);color:var(--green)}
.hero-cap{position:absolute;right:6vw;bottom:30px;z-index:3;font:italic 400 15px var(--serif);color:rgba(244,239,228,.7);text-align:right}
.hero-cap span,figcaption span{display:block;font:500 10px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-style:normal}
.scroll{position:absolute;left:50%;bottom:34px;z-index:3;width:1px;height:60px;background:linear-gradient(var(--gold),transparent);
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25;transform:translateY(8px)}}

/* inner page hero */
.page-hero{min-height:68vh;display:flex;flex-direction:column;justify-content:flex-end;padding:160px 6vw 90px;color:var(--cream);background:var(--deep);overflow:hidden}
.page-hero.short{min-height:100vh;justify-content:center}
.page-hero::before{content:"";position:absolute;inset:0;filter:grayscale(1) contrast(1.05);z-index:0;
  background:linear-gradient(90deg,rgba(11,20,16,.92),rgba(11,20,16,.6) 55%,rgba(11,20,16,.3)),linear-gradient(0deg,rgba(11,20,16,.85),transparent 55%),
    var(--img-lg,var(--img)) var(--pos,center)/cover no-repeat}
.page-hero .hero-inner{z-index:3}

/* bands */
.band{padding:130px 6vw}
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s,transform 1s}
.rv.in{opacity:1;transform:none}
.band h2{font:400 clamp(36px,4.6vw,60px)/1.1 var(--serif);margin:14px 0 40px}
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:8vw;align-items:start}
.split h2{margin-bottom:0}
.prose p{margin-bottom:1.2em;max-width:620px}
.prose a:not(.link){text-decoration-color:var(--gold);text-underline-offset:3px}
.dark{background:var(--green);color:var(--cream)}
.paper{background:var(--paper)}
.small{font-size:14px;color:var(--muted)}
.dark .small{color:rgba(244,239,228,.6)}

/* statement */
.statement{text-align:center;padding-bottom:110px}
.big{font:400 clamp(28px,3.4vw,46px)/1.3 var(--serif);max-width:1050px;margin:0 auto}
.big em{color:var(--gold-d)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);max-width:1050px;margin:80px auto 0;border-top:1px solid rgba(138,109,44,.35)}
.facts div{padding:26px 10px 0}
.facts dt{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-d);font-weight:500}
.facts dd{font:400 30px var(--serif);margin-top:6px}
.small-facts{grid-template-columns:repeat(3,1fr);margin:0 0 34px;text-align:left}
.small-facts div{padding:18px 10px 0 0}.small-facts dd{font-size:24px}

/* photo + text */
.split-photo{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}
.split-photo.flip .plate{order:2}
.plate{margin:0}
.plate img{width:100%;aspect-ratio:4/5;object-fit:cover;outline:1px solid rgba(201,169,97,.6);outline-offset:-14px;box-shadow:0 40px 70px -40px rgba(0,0,0,.6)}
figcaption{margin-top:16px;font:italic 400 16px var(--serif);color:var(--muted)}
.plate::after{bottom:auto;aspect-ratio:4/5}

/* photo band */
.photo-band{overflow:hidden;background:var(--deep)}
.photo-band::before{content:"";z-index:-1;opacity:.35}
.photo-band>.rv{position:relative;z-index:3}
.photo-band .hero-cap{bottom:24px}
.photo-band{padding-bottom:160px}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(201,169,97,.3)}
.pillars.four{grid-template-columns:repeat(4,1fr)}
.pillars article{padding:44px 40px 10px 0}
.pillars article:nth-child(2){transition-delay:.15s}
.pillars article:nth-child(3){transition-delay:.3s}
.num{font:italic 400 30px var(--serif);color:var(--gold)}
.pillars h3,.card h3{font:500 28px/1.2 var(--serif);margin:10px 0 12px}
.pillars p{opacity:.82;font-size:16px}

/* work teaser */
.teaser{display:grid;grid-template-columns:1.1fr 1fr;gap:6vw;align-items:center}
.teaser-art{margin:0;aspect-ratio:16/11;display:grid;place-items:center;text-align:center;overflow:hidden;background:var(--deep);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.6)}
.teaser-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform 6s ease-out}
.teaser-art:hover img{transform:scale(1.05)}
.teaser-art::before{content:"";position:absolute;inset:18px;border:1px solid rgba(201,169,97,.6);z-index:3}
.teaser-art>span{position:relative;z-index:3;font:italic 400 40px/1.15 var(--serif);color:var(--paper);letter-spacing:.04em;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.teaser-art figcaption{position:absolute;left:34px;bottom:30px;z-index:3;text-align:left;color:rgba(244,239,228,.75);font-size:14px;margin:0}
.link{font-size:13px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--green);
  border-bottom:1px solid var(--gold);padding-bottom:4px;font-weight:500}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{display:flex;flex-direction:column;padding:40px 34px 36px;background:var(--cream);border:1px solid rgba(138,109,44,.25);text-decoration:none;
  transition:transform .4s,box-shadow .4s,border-color .4s}
.paper .card{background:var(--cream)}
.band:not(.paper) .card{background:var(--paper)}
a.card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(0,0,0,.35);border-color:var(--gold)}
.card p{flex:1;margin-bottom:24px;color:var(--muted)}
.card .link,.card>a{align-self:flex-start}
.card>a{color:var(--green);text-decoration-color:var(--gold);text-underline-offset:4px;font-weight:400;word-break:break-all}
.card .num{color:var(--gold-d)}

/* sheets, press */
.sheet{border-top:1px solid rgba(138,109,44,.35)}
.sheet div{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid rgba(138,109,44,.2)}
.sheet dt{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-d);font-weight:500;padding-top:5px}
.sheet dd{font:400 21px var(--serif)}
.sheet a{text-decoration-color:var(--gold)}
.boiler{font:italic 400 24px/1.5 var(--serif);border-left:2px solid var(--gold);padding-left:28px;margin-bottom:22px}
.assets{display:flex;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.asset{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 36px;border:1px solid rgba(138,109,44,.3);text-decoration:none;font-size:13px;letter-spacing:.1em}
.asset:hover{border-color:var(--gold)}
.dark-asset{background:var(--green);color:var(--cream)}

/* contact */
.contact{text-align:center}
.contact:not(.paper){background:var(--paper)}
.contact .lede{color:var(--muted);max-width:620px;margin:0 auto}
.mail{display:inline-block;margin:18px 0 22px;font:400 clamp(24px,3.6vw,46px) var(--serif);text-decoration:none;border-bottom:1px solid var(--gold);word-break:break-all}
.mail:hover{color:var(--gold-d)}

/* legal pages */
.legal-page{padding-top:170px;max-width:900px;margin:0 auto}
.legal-page h1{font:400 clamp(44px,6vw,76px)/1.05 var(--serif);margin:14px 0 10px}
.legal-prose{margin-top:50px}
.legal-prose h2{font:500 30px var(--serif);margin:46px 0 14px}
.legal-prose p{max-width:none}
.credits{padding-left:22px}
.credits li{margin-bottom:18px}

/* footer */
footer{background:var(--deep);color:rgba(244,239,228,.62);padding:80px 6vw 40px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:5vw;padding-bottom:50px;border-bottom:1px solid rgba(201,169,97,.18)}
.foot-grid h4{font:500 11px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.foot-grid a{display:block;text-decoration:none;margin-bottom:10px}
.foot-grid a:hover{color:var(--cream)}
.foot-about p{max-width:340px;margin-bottom:12px}
.foot-about a{color:var(--cream)}
.foot-brand{display:flex;align-items:center;gap:12px;color:var(--cream);font:500 22px var(--serif);margin-bottom:18px}
.foot-legal{padding-top:30px;font-size:12.5px}
.foot-legal p{margin-bottom:6px}
.todo{color:#e08a6c}

@media (max-width:980px){
  .pillars.four{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-about{grid-column:1/-1}
}
@media (max-width:820px){
  .menu{display:block}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(14,25,20,.97);padding:10px 7vw 26px}
  .nav.open nav{display:block}
  .nav nav a{display:block;margin:0;padding:14px 0;border-bottom:1px solid rgba(201,169,97,.15)}
  .split,.teaser,.pillars,.pillars.four,.split-photo,.cards{grid-template-columns:1fr}
  .split-photo.flip .plate{order:0}
  .facts{grid-template-columns:1fr 1fr}
  .sheet div{grid-template-columns:1fr;gap:4px}
  .band{padding:90px 7vw}
  .hero-cap{left:7vw;right:auto;text-align:left;bottom:22px}
  .scroll{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-photo,.scroll{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .teaser-art img{transition:none}
}
@media (max-width:820px){.hero::before,.page-hero::before{background-color:rgba(11,20,16,.35)}.hero::before{background:linear-gradient(0deg,rgba(11,20,16,.95),rgba(11,20,16,.7) 60%,rgba(11,20,16,.55))}}

/* metallic gold: polished brass, light from above with a horizon line, plus a travelling glint */
:root{
  --metal:linear-gradient(180deg,#e9d39a 0%,#d9bb74 35%,#c4a159 50%,#b8954f 58%,#cdb06a 80%,#dcc386 100%);
  --metal-d:linear-gradient(180deg,#9c7a38 0%,#8e6d2e 45%,#7f6128 58%,#8a6a2e 80%,#977638 100%);
  --glint:linear-gradient(105deg,transparent 42%,rgba(255,248,225,.35) 50%,transparent 58%);
}
em,.num,.eyebrow,.hero-cap span,figcaption span,.foot-grid h4,.team-role{
  background-image:var(--glint),var(--metal);background-size:250% 100%,100% 100%;background-position:150% 0,0 0;
  background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.band:not(.dark) :is(em,.num,.eyebrow,dt,.team-role),.big em{background-image:var(--metal-d);color:transparent}
h1 em,h2 em{animation:glint 7s ease-in-out infinite;padding-right:.08em}
@keyframes glint{0%,70%{background-position:150% 0,0 0}100%{background-position:-50% 0,0 0}}
.btn{background:var(--metal);border-color:#b88d3c;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);transition:filter .3s,color .3s}
.btn:hover{background:var(--metal);color:var(--green);filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:#c9a24e;box-shadow:none}
.btn.ghost:hover{background:var(--metal);color:var(--green)}
@media (prefers-reduced-motion:reduce){h1 em,h2 em{animation:none}}

/* team */
.team-intro{max-width:760px;margin:22px 0 10px;opacity:.86}
.team-role{display:block;font:500 11px var(--sans);letter-spacing:.28em;text-transform:uppercase;margin-top:6px}
