/* gallery.css: contra-04. Page layer on system.css. Motion: transform/opacity/clip-path only, driven by --p (core.js). */
.gal{overflow-x:clip}
.gal .vw{display:block;text-decoration:none;cursor:zoom-in}
.g-ph{margin:0}
.g-ph .aperture img{transition:transform 1.6s var(--ease-ramp)}
.g-ph .aperture img{transform:translate3d(0,calc((.5 - var(--p,.5)) * 9%),0) scale(1.14);transition:transform .2s linear}
.g-ph .aperture{transition:outline-color .3s}
.g-ph .aperture:focus-visible{outline:3px solid var(--sign);outline-offset:4px}
.g-cap{display:flex;gap:12px;align-items:baseline;margin-top:12px;font-size:.95rem;line-height:1.45;color:var(--steel);max-width:46ch}
.light .g-cap{color:#4d515a}
.g-no{color:var(--sign);flex:none}
.g-ph .aperture--wide{aspect-ratio:4/3}

/* ---------- opener: pinned zoom through the doorway ---------- */
.g-open{height:240vh;position:relative}
.g-stick{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;background:var(--ink)}
.g-front{position:absolute;inset:0;overflow:hidden}
.g-front img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  transform-origin:50% 78%;transform:scale(calc(1 + var(--p,0) * 2.4));will-change:transform}
/* scrim: photo scrim only (ink to transparent, linear) */
/* photo scrim under the fixed header so the brand and menu stay readable over the bright brick */
.g-open .g-stick::before{content:"";position:absolute;left:0;right:0;top:0;height:max(160px,calc(var(--hdr) + 96px));z-index:2;background:linear-gradient(to bottom,var(--ink) 0,rgba(13,15,20,.82) 45%,rgba(13,15,20,0) 100%);pointer-events:none}
.g-front::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,15,20,.92) 0,rgba(13,15,20,.55) 34%,rgba(13,15,20,0) 62%);opacity:calc(1 - var(--p,0) * 1.4)}
.g-into{position:absolute;left:50%;top:50%;width:min(52svh,78vw);transform:translate(-50%,-44%) scale(calc(.3 + var(--p,0) * .7));
  opacity:calc((var(--p,0) - .3) * 3);pointer-events:none}
.g-into .aperture{aspect-ratio:.62}
.g-into img{transform:none!important}
html:not(.js) .g-into{display:none} /* JS off: --p never set, so the decorative photo would sit invisible */
.g-title{position:absolute;left:0;right:0;bottom:0;padding-bottom:clamp(28px,7vh,80px);
  transform:translateY(calc(var(--p,0) * -12vh));opacity:calc(1 - var(--p,0) * 2.6)}
.g-kick{color:var(--sign);margin-bottom:14px}
.g-title h1{font-size:min(var(--t-mega),12.4vw);margin:0;white-space:nowrap}
.g-neil{font-size:var(--t-3);line-height:1.15;margin-top:clamp(14px,2.4vh,28px);max-width:22ch}
.g-by{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px;font-style:normal}
.g-by cite{margin:0;color:var(--brick)}
.light .g-by cite{color:var(--ink)}
.g-scroll{position:absolute;right:var(--edge);bottom:clamp(28px,7vh,80px);display:flex;align-items:center;gap:10px;color:var(--steel);opacity:calc(1 - var(--p,0) * 4)}
.g-scroll span{width:3px;height:44px;background:var(--sign);transform-origin:top;transform:scaleY(calc(.3 + var(--p,0)*4))}
@media (min-width:1100px){
  .g-title{display:grid;grid-template-columns:auto minmax(16rem,1fr);column-gap:var(--gutter);align-items:end}
  .g-title h1{font-size:min(var(--t-mega),10.2vw)}
  .g-title .g-kick{grid-column:1/-1}
  .g-neil{justify-self:end;margin:0 0 .4em}
}
@media (max-width:899px){ .g-open{height:170vh} .g-front img{transform-origin:50% 80%} .g-scroll{display:none} }

/* ---------- acts ---------- */
.g-act{padding-block:var(--sp-scene) 0}
.g-hd{display:flex;align-items:flex-end;gap:clamp(12px,2vw,28px);margin-bottom:clamp(28px,5vw,64px)}
.g-num{font-size:var(--t-1);color:var(--sign);font-stretch:75%;line-height:.8}
.light .g-num{color:var(--fascia)}
.g-hd h2{margin:0}
.rail{margin-top:var(--sp-scene)}

/* I outside / inside */
.g-pair{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:900px){
  .g-pair{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .g-pair .g-a{grid-column:1/span 6;margin-top:clamp(80px,14vw,240px)}
  .g-pair .g-b{grid-column:8/span 5}
}

/* II lifts: drawn two-post lift raises its car with --p */
.g-lgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px var(--gutter)}
.g-ldraw{grid-column:1/-1;max-width:300px}
.g-l1,.g-l4{grid-column:1/-1}
.g-lift{width:100%;height:auto;overflow:visible}
.g-lift .post rect{fill:var(--oxide)}
.g-lift .gnd,.g-lift .tick line{stroke:var(--steel);stroke-width:2}
.g-lift .car{transform:translateY(calc(352px - var(--p,1) * 260px))}
.g-lift .arm{stroke:var(--sign);stroke-width:6}
.g-lift .body{fill:none;stroke:var(--brick);stroke-width:3;stroke-linejoin:round}
.g-lift circle{fill:var(--ink);stroke:var(--brick);stroke-width:3}
@media (min-width:900px){
  .g-lgrid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .g-ldraw{grid-column:1/span 3;grid-row:1/span 2;position:sticky;top:calc(var(--hdr) + 8vh);max-width:none}
  .g-l1{grid-column:4/span 5;grid-row:1/span 2}
  .g-l2{grid-column:10/span 3;grid-row:1;margin-top:clamp(40px,8vw,140px)}
  .g-l3{grid-column:10/span 3;grid-row:2}
  .g-l4{grid-column:2/span 5;grid-row:3;margin-top:clamp(-120px,-6vw,-40px)}
}

/* III ramps: perspective rails converge on the hall; treads draw in with --p */
.g-rwrap{position:relative}
.g-rails{position:absolute;inset:auto 0 0 0;width:100%;height:min(70vh,640px);pointer-events:none}
.g-rails .rl path{fill:none;stroke:var(--sign);stroke-width:3;vector-effect:non-scaling-stroke}
.g-rails .tr line{stroke:var(--steel);stroke-width:2;vector-effect:non-scaling-stroke;opacity:calc(var(--p,1) * 2 - .3)}
.g-rails .rl{clip-path:inset(calc((1 - min(1, var(--p,1) * 1.6)) * 100%) 0 0 0)}
.g-rgrid{position:relative;display:grid;gap:28px var(--gutter);padding-bottom:clamp(40px,8vh,120px)}
@media (min-width:900px){
  .g-rgrid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
  .g-r1{grid-column:2/span 4;margin-bottom:clamp(60px,10vw,180px)}
  .g-r2{grid-column:8/span 4}
}
.g-r1 .g-cap,.g-r2 .g-cap{background:var(--ink);padding:8px 10px 8px 0}

/* IV bay: pinned on desktop, the reel drives sideways with --p; swipe on phones */
.g-track{display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--edge) 24px;scrollbar-width:thin;scrollbar-color:var(--sign) transparent}
.g-cel{flex:0 0 min(74vw,420px);scroll-snap-align:center}
.g-cel.wide{flex-basis:min(88vw,620px)}
.g-cel .aperture{height:min(58svh,520px);aspect-ratio:auto}
.g-brail{margin-top:20px}
@media (min-width:1100px){
  .g-bay{height:260vh;padding-top:0}
  .g-bstick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:var(--hdr)}
  .g-track{overflow:visible;scroll-snap-type:none;padding-bottom:0;width:max-content;transform:translateX(calc(var(--p,0) * (100vw - 100% - var(--edge) * 2)))}
  .g-cel{flex-basis:28vw}.g-cel.wide{flex-basis:42vw}
  .g-cel .aperture{height:min(60svh,640px)}
  .g-brail{transform-origin:left;transform:scaleX(var(--p,0))}
}

/* cuts between acts: a huge act numeral slides across while a sign-yellow wipe runs the width */
.g-cut{position:relative;height:clamp(220px,46vh,520px);overflow:hidden;margin-block:clamp(40px,8vh,110px) 0}
.g-cutn{position:absolute;top:50%;left:0;font-size:clamp(9rem,34vw,34rem);line-height:.8;white-space:nowrap;color:var(--ink-2);
  -webkit-text-stroke:2px var(--steel);transform:translate3d(calc(-30% + var(--p,.6) * 70vw),-50%,0)}
.g-wipe{position:absolute;left:0;right:0;top:50%;height:clamp(10px,1.6vh,18px);background:var(--sign);transform-origin:0 50%;
  transform:scaleX(min(1,calc(var(--p,1) * 1.8)))}
.g-cut + .g-act .g-num{display:none}
.g-cut + .g-act{padding-top:0}
.g-cut--light{background:var(--brick);margin-bottom:0}
.g-cut--light::before{content:"";position:absolute;inset:0;background:var(--ink);clip-path:inset(0 0 calc(var(--p,1) * 100%) 0)}
.g-cut--light .g-cutn{-webkit-text-stroke-color:var(--brick-2);z-index:1}
.g-cut--light .g-wipe{z-index:1;background:var(--ink);top:auto;bottom:0}
.g-cut--light + .g-all{margin-top:0}

/* V contact sheet (light section): small doorways in a row, colour comes up on hover/focus */
.g-all{padding-block:var(--sp-scene);margin-top:var(--sp-scene)}
.g-sheet{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:flex-end;height:clamp(300px,52vh,560px)}
.g-sheet li{flex:1 1 0;min-width:0;height:100%;transition:flex-grow .9s var(--ease-ramp)}
.g-sheet li:nth-child(3n+2){height:84%}.g-sheet li:nth-child(4n+3){height:70%}.g-sheet li:nth-child(5n+1){height:92%}
.g-sheet a{position:relative;display:block;height:100%;overflow:hidden;border-inline:4px solid var(--oxide);border-top:6px solid var(--brick-2);background:var(--ink)}
.g-sheet img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter .9s ease}
.g-sheet li:hover,.g-sheet li:focus-within{flex-grow:5}
.g-sheet:not(:hover):not(:focus-within) li:nth-child(1){flex-grow:5}
.g-sheet:not(:hover):not(:focus-within) li:nth-child(1) img,.g-sheet a:hover img,.g-sheet a:focus-visible img{filter:none}
.g-sheet span{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--sign);padding:4px 7px}
@media (max-width:899px){
  .g-sheet{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--edge) * -1);padding:0 var(--edge) 14px;gap:10px;align-items:flex-end}
  .g-sheet li{flex:0 0 38vw;height:auto!important;scroll-snap-align:start}
  .g-sheet li:nth-child(3n+2) a{aspect-ratio:.75}.g-sheet li:nth-child(4n+3) a{aspect-ratio:.9}
  .g-sheet a{aspect-ratio:.62;height:auto}
  .g-sheet img{filter:none}
  .g-sheet li:hover,.g-sheet li:focus-within,.g-sheet:not(:hover):not(:focus-within) li:nth-child(1){flex-grow:0}
}
.g-note{margin:28px 0 0;max-width:56ch;color:#4d515a}
.g-cta{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 0}
.light .btn--ghost{color:var(--ink)}

/* viewer */
.g-view{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:var(--ink);color:var(--brick)}
.g-view::backdrop{background:var(--ink)}
.g-view[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.v-top{display:flex;align-items:center;gap:16px;padding:12px var(--edge)}
.v-dial{width:48px;height:48px;flex:none}
.dial{width:100%;height:100%}
.dial .rim{fill:none;stroke:var(--line-d);stroke-width:3}
.dial .mk{stroke:var(--steel);stroke-width:3}
.dial .nd{stroke:var(--sign);stroke-width:4;stroke-linecap:square;transform-origin:60px 60px;transform:rotate(var(--a,0deg));transition:transform 1.2s var(--ease-ramp)}
.dial .hub{fill:var(--sign)}
.v-count{flex:1;margin:0}
.g-view button{min-width:52px;min-height:52px;background:none;border:2px solid var(--line-d);color:var(--brick);cursor:pointer;padding:0 18px;border-radius:0}
.g-view button:hover,.g-view button:focus-visible{border-color:var(--sign);color:var(--sign)}
.v-fig{margin:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 var(--edge)}
.v-fig img{max-width:100%;max-height:calc(100dvh - 200px);width:auto;height:auto;object-fit:contain;border-inline:6px solid var(--oxide);border-top:10px solid var(--brick-2)}
.v-fig figcaption{text-align:center;max-width:60ch;color:var(--steel)}
.v-nav{display:flex;justify-content:center;gap:14px;padding:10px var(--edge) calc(16px + env(safe-area-inset-bottom))}
.v-nav button{font-size:1.4rem}

@media (prefers-reduced-motion:reduce){
  .g-open{height:auto}
  .g-stick{position:relative;height:min(100svh,900px)}
  .g-front img{transform:none}
  .g-front::after{opacity:1}
  .g-into{display:none}
  .g-title{transform:none;opacity:1}
  .g-scroll{display:none}
  .g-lift .car{transform:translateY(92px)}
  .g-rails .rl{clip-path:none}.g-rails .tr line{opacity:1}
  .g-bay{height:auto}
  .g-bstick{position:relative;height:auto}
  .g-track{transform:none!important;overflow-x:auto;width:auto}
  .g-brail{transform:none}
  .g-sheet img{filter:none}
  .g-sheet li{transition:none}
  .g-ph .aperture img{transform:none!important}
  .g-cutn{transform:translate3d(10vw,-50%,0)}
  .g-wipe{transform:none}
  .g-cut--light::before{display:none}
}