/* Lifted verbatim out of index.html so the homepage and the pages under
   /more/ read the same rules rather than two copies that agree today.
   The scrolling belt. Read the comments before changing it: the
   scroll-not-transform and explicit-width decisions are both iPad bug fixes.
*/

  .studio-belt{ position:relative; width:100%; --belt-h:clamp(210px,40vw,420px); height:var(--belt-h); overflow:hidden; border-radius:8px; background:#0d0d0f; contain:paint; }
  /* The edges used to fade with a CSS mask. A mask forces this whole subtree
     through an expensive composited path, and on iPad that pushed the belts
     past Safari's tile budget — they rendered as blank black rectangles until
     you rotated the device. These two overlays fade the same 5% at each end. */
  .studio-belt::before, .studio-belt::after{ content:""; position:absolute; top:0; bottom:0; width:5%; z-index:3; pointer-events:none; }
  .studio-belt::before{ left:0; background:linear-gradient(90deg,var(--surface),rgba(17,17,19,0)); }
  .studio-belt::after{ right:0; background:linear-gradient(270deg,var(--surface),rgba(17,17,19,0)); }
  /* The track is scrolled, not transformed. Transforming something ~14,000px
     wide makes the browser rasterise a layer that size, which an iPad cannot
     hold — both belts drew as black rectangles until the device was rotated.
     Scrolling paints only what is on screen, whatever the content width. */
  .belt-scroll{ height:100%; overflow:hidden; scroll-behavior:auto; }
  .belt-track{ display:flex; height:100%; width:max-content; }
  /* Explicit width, not aspect-ratio: deriving the width from a percentage
     height while the <img> inside asks for width:100% of that same width is
     circular, and Safari on iPad resolved the cell and the image to different
     widths — which slid every caption onto its neighbour's photo. */
  .belt-item{ position:relative; height:100%; width:calc(var(--belt-h) * 16 / 9); flex:0 0 auto; overflow:hidden; }
  .belt-item img{ width:100%; height:100%; object-fit:cover; display:block; }
  .belt-item .s-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:60px 26px 20px; text-align:left; font-family:var(--display); font-weight:600; font-size:clamp(15px,1.4vw,21px); letter-spacing:-.01em; color:var(--paper); background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.66) 100%); pointer-events:none; }

  /* ---------- projects ---------- */
  /* The studio belt again, but square cells sized to match a folio card, so
     the two reels on the page read as the same object.

     A folio card is one third of the wrap, less two 20px gaps; the wrap is
     var(--maxw) capped, with 24px of padding each side. At 1280 that is
     (1120 - 48 - 40) / 3 = 344px. Floored at 190 so it does not collapse on a
     phone, where the folio grid drops to one column and a matching belt cell
     would fill the screen. */
  .studio-belt.belt-sq{
    --belt-h:clamp(190px, calc((min(100vw, var(--maxw)) - 88px) / 3), 344px);
  }
  .belt-sq .belt-item{ width:var(--belt-h); }
  .belt-item.ph{ border-right:1px solid var(--canvas); }
  .belt-item.ph .ph-mark{ position:absolute; inset:0; display:grid; place-items:center; opacity:.14; }
  .belt-item.ph .ph-mark img{ width:38%; }
  .projects-cta{ display:flex; justify-content:center; margin-top:clamp(26px,4vw,38px); }