@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap');

:root{
  --bg:#f5f3ef; --ink:#151515; --muted:#77736c; --line:#d9d5ce;
  --dark:#101010; --dark-muted:#aaa59d; --max:1500px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif;font-size:15px;line-height:1.55}
a{color:inherit;text-decoration:none}
a:hover{opacity:.55}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:20px 4vw;background:rgba(245,243,239,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-title{font-family:"Space Grotesk",sans-serif;font-size:19px;font-weight:600;letter-spacing:-.04em;text-transform:lowercase}
.site-nav{display:flex;gap:22px;align-items:center;font-size:12px;text-transform:lowercase}
.menu-toggle{display:none;background:none;border:0;font:inherit}
.hero{min-height:86vh;padding:12vh 4vw 10vh;max-width:var(--max);margin:auto;display:flex;flex-direction:column;justify-content:center}
.eyebrow,.section-number{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero h1{font:500 clamp(48px,8vw,125px)/.9 "Space Grotesk",sans-serif;letter-spacing:-.065em;max-width:1050px;margin:25px 0}
.hero-text{font-size:18px;max-width:530px;color:#555}
.scroll-link{margin-top:55px;font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.work-section,.info-section{padding:110px 4vw;max-width:var(--max);margin:auto}
.work-section.dark{max-width:none;background:var(--dark);color:#eee}
.section-heading{display:grid;grid-template-columns:90px minmax(0,650px);gap:20px;margin-bottom:65px}
.section-heading h2{font:500 clamp(38px,6vw,82px)/.95 "Space Grotesk",sans-serif;letter-spacing:-.055em;margin:0 0 18px}
.section-heading p{margin:5px 0;color:#666;max-width:650px}
.dark .section-heading p,.dark .small-note{color:var(--dark-muted)}
.small-note{font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.lead-title{font-size:18px!important;color:var(--ink)!important;font-weight:600}
.dark .lead-title{color:#eee!important}
.external-links,.video-links{display:flex;flex-wrap:wrap;gap:10px 25px;margin-top:25px;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.art-grid.compact{grid-template-columns:repeat(3,1fr)}
.art-card{margin:0}
.image-button{width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;text-align:left}
.image-button img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;background:#e7e3dc}
.image-button .placeholder{display:flex;aspect-ratio:4/3;background:linear-gradient(135deg,#e9e6df,#d7d2c9);align-items:flex-end;justify-content:space-between;padding:18px;color:#4d4943}
.image-button .placeholder span{font:500 36px "Space Grotesk"}
.image-button .placeholder small{max-width:45%;font-size:12px}
.image-button .placeholder em{position:absolute;transform:translateY(-8px);font-size:10px;text-transform:uppercase;letter-spacing:.1em;opacity:.6}
.image-button:not(.missing) .placeholder{display:none}
.art-card figcaption{font-size:11px;color:var(--muted);margin-top:10px}
.dark .art-card figcaption{color:#aaa59d}
.feature-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:5vw;align-items:center;margin-bottom:60px}
.feature-card{margin:0}
.media-placeholder{aspect-ratio:16/10;background:radial-gradient(circle at 30% 30%,#555,#222 55%,#111);position:relative}
.media-placeholder:after{content:"hero image placeholder";position:absolute;inset:auto 22px 18px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#aaa}
.feature-card figcaption{font-size:10px;color:#777;margin-top:8px}
.display-copy{font:400 clamp(28px,3vw,48px)/1.05 "Space Grotesk";letter-spacing:-.04em}
.button{display:inline-block;margin-top:15px;border:1px solid #777;padding:12px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.video-row{display:grid;grid-template-columns:1fr 1fr;gap:30px;border-top:1px solid var(--line);margin-top:70px;padding-top:35px}
.dark .video-row{border-color:#333}
.video-row h3{font:500 24px "Space Grotesk";margin:0 0 5px}
.video-row p{color:var(--muted);max-width:500px}
.info-grid{display:grid;grid-template-columns:1fr 1fr 1.4fr 1.2fr;gap:45px;border-top:1px solid var(--line);padding-top:35px}
.info-grid h3{font:500 18px "Space Grotesk";margin:0 0 20px}
.info-grid p{margin:0 0 9px;font-size:12px}
footer{border-top:1px solid var(--line);padding:30px 4vw;display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.lightbox{display:none;position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.94);align-items:center;justify-content:center;padding:5vw}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:84vh;object-fit:contain}
.lightbox p{position:absolute;left:5vw;bottom:2.5vw;color:#ddd;font-size:11px}
.lightbox-close{position:absolute;right:3vw;top:2vw;color:white;background:none;border:0;font-size:42px;cursor:pointer;font-weight:200}

@media(max-width:850px){
  .site-header{padding:16px 5vw}
  .menu-toggle{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
  .site-nav{display:none;position:absolute;top:59px;left:0;right:0;padding:20px 5vw;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:14px}
  .site-nav.open{display:flex}
  .hero{padding:12vh 5vw 8vh;min-height:75vh}
  .hero h1{font-size:56px}
  .work-section,.info-section{padding:75px 5vw}
  .section-heading{grid-template-columns:1fr;gap:10px;margin-bottom:40px}
  .section-number{margin-bottom:4px}
  .art-grid,.art-grid.compact{grid-template-columns:1fr 1fr;gap:18px}
  .feature-grid,.video-row,.info-grid{grid-template-columns:1fr}
  .info-grid{gap:35px}
}
@media(max-width:520px){
  .art-grid,.art-grid.compact{grid-template-columns:1fr}
  .hero h1{font-size:45px}
  .hero-text{font-size:16px}
}