/* ---- Open Sans (self-hosted variable, weight axis 300–800) ---- */
@font-face{font-family:"Open Sans";src:url(/fonts/opensans-var.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url(/fonts/opensans-italic-var.woff2) format("woff2");font-weight:300 800;font-style:italic;font-display:swap}

:root{
  --head-h:64px;
  --pad:28px;
  --fg:#111;
  --muted:#c0c0c0;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:"Open Sans",system-ui,Arial,sans-serif;color:var(--fg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}

/* ---- fixed header (always present) ---- */
.head{
  position:sticky;top:0;z-index:100;
  height:var(--head-h);background:#000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
}
.brand{font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.brand .name{font-weight:700;color:#fff}
.brand .tag{font-weight:600;color:#8a8a8a;margin-left:.35em}

/* ---- hamburger ---- */
.burger{width:34px;height:20px;position:relative;background:none;border:0;padding:0;cursor:pointer;display:block}
.burger span{position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:2px;transition:transform .4s cubic-bezier(.7,0,.2,1),opacity .2s ease}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:9px}
.burger span:nth-child(3){top:18px}
body.menu-open .burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---- black curtain menu (parks above, drops down from under the header) ---- */
.curtain{
  position:fixed;left:0;right:0;top:var(--head-h);bottom:0;z-index:90;
  background:#000;
  transform:translateY(-100%);
  transition:transform .6s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
body.menu-open .curtain{transform:translateY(0)}
.curtain ul{list-style:none;padding:9vh var(--pad) 0}
.curtain li{overflow:hidden}
.curtain a{
  display:inline-block;color:#fff;text-decoration:none;
  font-size:clamp(30px,6.5vw,68px);font-weight:300;line-height:1.45;letter-spacing:.005em;
  opacity:.85;transition:opacity .25s ease;
}
.curtain a:hover{opacity:1}

/* ---- landing (stays STUCK; the work section curtains up over it) ---- */
.landing{
  position:fixed;top:var(--head-h);left:0;right:0;z-index:1;
  display:flex;height:calc(100vh - var(--head-h));
}
.landing-left,.landing-right{width:50%;height:100%;overflow:hidden}
.landing-left picture,.landing-right picture{display:block;width:100%;height:100%}
.landing-left img,.landing-right img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.landing-right img{object-position:center top}

/* ---- work section: sits one screen down, slides up OVER the fixed landing ---- */
.work{
  position:relative;z-index:2;background:#fff;
  margin-top:calc(100vh - var(--head-h));
  min-height:100vh;
}
.work-bar{
  position:sticky;top:var(--head-h);z-index:5;background:#fff;
  display:flex;justify-content:center;gap:30px;align-items:center;
  height:56px;border-bottom:1px solid #ececec;
}
.work-bar button{
  background:none;border:0;padding:6px 2px;cursor:pointer;font:inherit;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#bdbdbd;transition:color .2s;
}
.work-bar button:hover{color:#111}
.work-bar button.active{color:#111}

.work-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:32px 24px;padding:44px var(--pad) 88px;
}
.tile.hide{display:none}
.tile .ph{
  aspect-ratio:1/1;background:#f2f3f5;display:flex;align-items:center;justify-content:center;
  color:#cfcfcf;font-size:12px;letter-spacing:.14em;
}
.tile figcaption{margin-top:11px;font-size:12px;line-height:1.5}
.tile .cat{display:block;margin-top:3px;color:#bdbdbd;font-size:10px;letter-spacing:.12em;text-transform:uppercase}

/* mobile: landing = artist image only, full-bleed */
@media (max-width:768px){
  .landing{display:block;height:calc(100vh - var(--head-h))}
  .landing-left{display:none}
  .landing-right{width:100%;height:100%}
  .work-bar{gap:18px}
  .work-bar button{letter-spacing:.1em}
}

/* ---- Lenis smooth scroll ---- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}