/* --- zn reel ------------------------------------------------------------------
   The Stage / Reel viewer (fix-queue 63, 2026-09-13). A set of flat artwork
   (posters, brand-book spreads, boards) pins in the viewport for the length of
   its track and scrolling scrubs through it: one piece in focus at the centre,
   the neighbours peeking at the edges, smaller and dimmed, a counter top right.
   Emitted by _tools/zn_reel.py (from _tools/build_reel.py in place of a
   Squarespace gallery, from layout="reel" in _tools/build_case_v2.py) and driven
   by /sqs/zn-reel.js. Under 900px, on touch and under reduced motion the same
   markup is a horizontal snap strip, CSS only, no pin. Tokens only; the band
   sits on the page ground. The track runs --n pieces x --zn-reel-step of scroll. */
.zn-reel{ position:relative; z-index:1; margin:0; color:var(--v4-ink); font-family:var(--sans); line-height:1.4; letter-spacing:0; text-transform:none; box-sizing:border-box; --zn-reel-step:56vh }
.zn-reel *{ box-sizing:border-box; margin:0 }
.zn-reel-track{ position:relative; height:calc(var(--n,8) * var(--zn-reel-step) + 100vh) }
.zn-reel-stage{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  padding:clamp(18px,2.6vh,28px) clamp(20px,3vw,40px);
}
.zn-reel-head, .zn-reel-hint{
  font-family:var(--mono); font-size:var(--zn-label,12px); letter-spacing:var(--zn-label-track,.08em);
  text-transform:uppercase; color:var(--v4-mute); line-height:1.2;
}
.zn-reel-head{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; position:relative; z-index:20 }
.zn-reel-count{ font-variant-numeric:tabular-nums; white-space:nowrap }
.zn-reel-count b{ font-weight:500; color:var(--v4-ink) }
.zn-reel-sep{ margin:0 .45em }
.zn-reel-pieces{ position:relative; min-height:0 }
/* every piece fills the stage box and centres its image; the script moves and
   scales the whole box, so the transform origin is always the stage centre */
.zn-reel-piece{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; will-change:transform,opacity; transform-origin:50% 50%;
}
/* sized from --ar (width / height, set per piece) so the box exists before the image
   loads: width = the smaller of the width cap and the height cap times the ratio */
.zn-reel-piece img, .zn-reel-piece video{
  display:block; aspect-ratio:var(--ar,1.7778); height:auto;
  width:min(66vw, 1120px, calc(min(70vh,70svh) * var(--ar,1.7778)));
  background:var(--v4-paper-2); pointer-events:none;
  box-shadow:0 34px 64px -34px color-mix(in srgb, var(--v4-ink) 60%, transparent);
}
.zn-reel-piece.is-side img, .zn-reel-piece.is-side video{ pointer-events:auto; cursor:pointer }
.zn-reel-hint{ text-align:center; transition:opacity .6s ease; position:relative; z-index:20 }
.zn-reel.is-used .zn-reel-hint{ opacity:0 }
/* before the script runs, the first piece shows */
html:not(.zn-reel-js) .zn-reel-piece:first-child{ opacity:1 }

/* strip: phones, touch, reduced motion. The same markup as a snap scroller. */
@media (max-width:900px), (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce){
  .zn-reel{ padding:clamp(28px,5vw,48px) 0 }
  .zn-reel-track{ height:auto }
  .zn-reel-stage{ position:static; height:auto; overflow:visible; display:block; padding:0 }
  .zn-reel-head{ padding:0 20px 14px }
  .zn-reel-pieces{
    display:flex; align-items:center; gap:14px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    padding:0 20px 18px; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .zn-reel-pieces::-webkit-scrollbar{ display:none }
  .zn-reel-piece{ position:static; inset:auto; flex:0 0 auto; width:auto; display:block; opacity:1 !important; transform:none !important; pointer-events:auto; scroll-snap-align:center }
  .zn-reel-piece img, .zn-reel-piece video{ width:min(82vw, 640px, calc(62vh * var(--ar,1.7778))); height:auto; pointer-events:auto; cursor:default }
  .zn-reel-hint{ display:none }
}
/* --- end zn reel --- */