/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --paper:#ffffff;
  --bone:#f2f1ef;
  --ink:#000000;
  --graphite:#6e6e6e;
  --hair:rgba(0,0,0,.14);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  --gut:clamp(16px,2.4vw,32px);
  --rail:clamp(16px,2.4vw,32px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font:400 16px/1.55 "Instrument Sans",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
img{display:block;width:100%;height:100%;object-fit:cover;background:var(--bone)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-weight:400;letter-spacing:-.015em}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.serif{font-family:"Instrument Serif","Times New Roman",serif}
.meta{font-size:12.5px;line-height:1.4;color:var(--graphite)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   LOAD SEQUENCE
   ============================================================ */
#curtain{
  position:fixed;inset:0;z-index:200;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease),visibility .6s;
}
#curtain.done{opacity:0;visibility:hidden}
.curtain-mark{font-family:"Instrument Serif",serif;font-size:clamp(22px,3vw,34px);overflow:hidden}
.curtain-mark span{display:block;transform:translateY(105%);animation:rise .9s var(--ease) .1s forwards}
.curtain-rule{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--gut);height:1px;background:var(--hair)}
.curtain-rule::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;animation:draw 1.1s var(--ease-soft) forwards}
@keyframes rise{to{transform:none}}
@keyframes draw{to{transform:scaleX(1)}}

/* wipe used between home <-> gallery */
#wipe{position:fixed;inset:0;z-index:150;background:var(--paper);pointer-events:none;
  clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease-soft)}
#wipe.in{clip-path:inset(0 0 0 0)}
#wipe.out{clip-path:inset(100% 0 0 0);transition-duration:.55s}

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--gut);
  mix-blend-mode:difference;color:#fff;
  pointer-events:none;
}
.site-head>*{pointer-events:auto}
.wordmark{font-family:"Instrument Serif",serif;font-size:clamp(18px,1.7vw,22px);letter-spacing:.005em}
.head-nav{display:flex;gap:clamp(14px,2vw,28px);font-size:13.5px}
.head-nav a{position:relative;padding-bottom:2px}
.head-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.head-nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ============================================================
   HOME — the split
   ============================================================ */
.split{display:flex;height:100svh;width:100%}
.panel{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:block;
  clip-path:inset(0 0 100% 0);
  transition:flex-grow 1s var(--ease),clip-path .9s var(--ease-soft);
}
.ready .panel{clip-path:inset(0 0 0 0)}
.ready .panel:nth-child(1){transition-delay:0s,.05s}
.ready .panel:nth-child(2){transition-delay:0s,.14s}
.ready .panel:nth-child(3){transition-delay:0s,.23s}
.panel+.panel{box-shadow:-1px 0 0 var(--hair)}
.panel-media{position:absolute;inset:0;overflow:hidden}
.panel-media img{
  transform:scale(1.14);filter:grayscale(.45) contrast(1.02);
  transition:transform 1.4s var(--ease),filter 1s var(--ease);
}
.ready .panel-media img{transform:scale(1.06)}
.panel-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.44),rgba(0,0,0,.05) 46%,rgba(0,0,0,.1));
  transition:opacity .8s var(--ease)}
.panel-body{position:absolute;left:0;right:0;bottom:0;padding:var(--gut);color:#fff}
.panel-name{font-family:"Instrument Serif",serif;font-size:clamp(38px,4.6vw,68px);line-height:.98}
.panel-rule{height:1px;background:rgba(255,255,255,.55);margin:14px 0 0;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--ease)}
.panel-drawer{overflow:hidden;max-height:0;transition:max-height .8s var(--ease)}
.panel-note{padding-top:12px;max-width:30ch;font-size:14px;color:rgba(255,255,255,.88);
  opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease) .12s,transform .6s var(--ease) .12s}
.panel-count{padding-top:10px;font-size:12.5px;color:rgba(255,255,255,.6)}

@media(hover:hover){
  .split:hover .panel{flex-grow:.85}
  .split:hover .panel:hover{flex-grow:1.6}
  .panel:hover .panel-media img{transform:scale(1);filter:grayscale(0) contrast(1)}
  .panel:hover .panel-scrim{opacity:.75}
  .panel:hover .panel-rule{transform:scaleX(1)}
  .panel:hover .panel-drawer{max-height:140px}
  .panel:hover .panel-note{opacity:1;transform:none}
}
@media(hover:none){
  .panel-drawer{max-height:140px}
  .panel-note{opacity:1;transform:none}
  .panel-rule{transform:scaleX(1)}
  .panel-media img{filter:grayscale(0)}
}

/* ============================================================
   GALLERY
   ============================================================ */
.view[hidden]{display:none}
.gal-head{
  padding:calc(var(--gut)*4.2) var(--gut) calc(var(--gut)*1.4);
  display:grid;grid-template-columns:1fr minmax(0,38ch);gap:var(--gut);align-items:end;
  border-bottom:1px solid var(--hair);
}
.gal-title{font-family:"Instrument Serif",serif;font-size:clamp(46px,9vw,132px);line-height:.88;letter-spacing:-.02em}
.gal-intro{font-size:15px;color:var(--graphite);max-width:40ch;padding-bottom:6px}
.gal-back{display:inline-block;font-size:13.5px;color:var(--graphite);margin-bottom:18px}
.gal-back:hover{color:var(--ink)}

.grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:var(--gut);padding:var(--gut);
}
.tile{
  position:relative;overflow:hidden;cursor:pointer;
  clip-path:inset(0 0 14% 0);opacity:0;
  transition:clip-path .9s var(--ease-soft),opacity .8s var(--ease);
  content-visibility:auto;contain-intrinsic-size:600px;
}
.tile.in{clip-path:inset(0 0 0 0);opacity:1}
.tile-media{position:absolute;inset:0;overflow:hidden}
.tile img{transform:scale(1.001);transition:transform 1.1s var(--ease),filter .7s var(--ease)}
.tile-cap{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.5),transparent);
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .55s var(--ease);
}
.tile-cap h3{font-family:"Instrument Serif",serif;font-size:19px;line-height:1.1}
.tile-cap p{font-size:12px;color:rgba(255,255,255,.75)}
@media(hover:hover){
  .tile:hover img{transform:scale(1.045)}
  .tile:hover .tile-cap{opacity:1;transform:none}
  .grid:hover .tile:not(:hover) img{filter:saturate(.72) brightness(.97)}
}
.tile[data-span="4"]{grid-column:span 4}
.tile[data-span="5"]{grid-column:span 5}
.tile[data-span="6"]{grid-column:span 6}
.tile[data-span="7"]{grid-column:span 7}
.tile[data-span="8"]{grid-column:span 8}
.tile[data-span="12"]{grid-column:span 12}

/* next category */
.next{border-top:1px solid var(--hair);padding:calc(var(--gut)*2.4) var(--gut) calc(var(--gut)*2.8);display:block}
.next small{font-size:13px;color:var(--graphite);display:block;margin-bottom:10px}
.next-name{font-family:"Instrument Serif",serif;font-size:clamp(44px,8vw,112px);line-height:.9;display:inline-block;position:relative}
.next-name::after{content:"";position:absolute;left:0;bottom:.06em;width:100%;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.next:hover .next-name::after{transform:scaleX(1)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  background:var(--bone);padding:calc(var(--gut)*2.6) var(--gut) var(--gut);
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);align-items:start;
}
.foot-lead{grid-column:span 6;font-family:"Instrument Serif",serif;font-size:clamp(26px,3.4vw,46px);line-height:1.08;max-width:18ch}
.foot-lead a{position:relative;white-space:nowrap}
.foot-lead a::after{content:"";position:absolute;left:0;bottom:.1em;width:100%;height:1px;background:var(--ink);
  transform-origin:0 50%;transition:transform .6s var(--ease)}
.foot-lead a:hover::after{transform:scaleX(0);transform-origin:100% 50%}
.foot-col{grid-column:span 3;display:flex;flex-direction:column;gap:7px;font-size:13.5px}
.foot-col span{color:var(--graphite);margin-bottom:5px}
.foot-base{grid-column:span 12;display:flex;justify-content:space-between;
  border-top:1px solid var(--hair);padding-top:16px;margin-top:clamp(40px,7vw,90px)}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{
  position:fixed;inset:0;z-index:120;
  background:rgba(255,255,255,.97);backdrop-filter:saturate(1.1) blur(2px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.lb.open{opacity:1;visibility:visible}
.lb-stage{
  position:absolute;top:clamp(58px,9vh,86px);left:var(--gut);right:var(--gut);bottom:clamp(120px,18vh,164px);
  display:flex;align-items:center;justify-content:center;touch-action:pan-y;
}
.lb-stage img{
  width:auto;max-width:100%;height:100%;max-height:100%;object-fit:contain;background:none;
  opacity:0;transform:scale(.985);transition:opacity .5s var(--ease),transform .7s var(--ease);
}
.lb-stage img.shown{opacity:1;transform:none}
.lb-bar{position:absolute;left:var(--gut);right:var(--gut);display:flex;justify-content:space-between;align-items:center}
.lb-bar.top{top:var(--gut)}
.lb-cat{font-size:13.5px;color:var(--graphite)}
.lb-count{font-size:13.5px;font-variant-numeric:tabular-nums}
.lb-close{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;transition:background .35s var(--ease),transform .4s var(--ease)}
.lb-close:hover{background:var(--bone);transform:rotate(90deg)}
.lb-info{position:absolute;left:var(--gut);bottom:clamp(74px,11vh,104px);max-width:44ch}
.lb-info h2{font-family:"Instrument Serif",serif;font-size:clamp(20px,2.4vw,30px);line-height:1.1}
.lb-arrows{position:absolute;right:var(--gut);bottom:clamp(74px,11vh,104px);display:flex;gap:12px;align-items:center}
.lb-arrows .lb-count{margin-right:6px}
.lb-arrow{width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;display:grid;place-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.lb-arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.lb-arrow svg{width:15px;height:15px}
.strip{position:absolute;left:0;right:0;bottom:var(--gut);display:flex;gap:8px;padding:0 var(--gut);
  overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.strip::-webkit-scrollbar{display:none}
.strip button{flex:0 0 auto;width:62px;height:42px;overflow:hidden;opacity:.34;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.strip button:hover{opacity:.7}
.strip button[aria-current="true"]{opacity:1;transform:translateY(-3px)}

/* ============================================================
   CURSOR
   ============================================================ */
#cur{position:fixed;top:0;left:0;z-index:300;pointer-events:none;mix-blend-mode:difference;
  width:9px;height:9px;border-radius:50%;background:#fff;
  transform:translate3d(-50px,-50px,0);transition:width .4s var(--ease),height .4s var(--ease)}
#cur .lbl{position:absolute;inset:0;display:grid;place-items:center;font-size:11.5px;color:#000;opacity:0;
  transition:opacity .3s var(--ease)}
#cur.big{width:72px;height:72px;background:#fff}
#cur.big .lbl{opacity:1}
@media(hover:none),(pointer:coarse){#cur{display:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .gal-head{grid-template-columns:1fr;gap:20px;padding-top:calc(var(--gut)*3.6)}
  .foot-lead{grid-column:span 12}
  .foot-col{grid-column:span 6}
}
@media(max-width:760px){
  .split{flex-direction:column;height:auto}
  .panel{height:64svh;flex:none}
  .panel+.panel{box-shadow:0 -1px 0 var(--hair)}
  .grid{grid-template-columns:repeat(6,1fr)}
  .tile[data-span]{grid-column:span 6}
  .tile[data-span="4"]{grid-column:span 3}
  .lb-info{max-width:60%;bottom:clamp(70px,10vh,96px)}
  .lb-arrows{bottom:clamp(70px,10vh,96px)}
  .lb-stage{bottom:140px}
  .foot-base{flex-direction:column;gap:6px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .tile{clip-path:none;opacity:1}
  .panel{clip-path:none}
}