/* Gallery page (body.gal). Site tokens only: #EC008C, #202121, #FFFFFF. */
.gal-bar,.gl-bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px}
.gl-chip{font:600 .9rem var(--font-head);padding:10px 22px;border-radius:100px;border:2px solid var(--line);background:#fff;color:#202121;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.gl-chip:hover{border-color:#202121}
.gl-chip[aria-pressed="true"]{background:#202121;border-color:#202121;color:#fff}
.gl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.gl-item{flex:0 1 calc((100% - 48px)/3);min-width:0}
.gl-item[hidden]{display:none}
.gl-tile{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;color:inherit;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.gl-tile:hover{transform:translateY(-6px);border-color:#EC008C;box-shadow:0 22px 40px -26px rgba(32,33,33,.45)}
.gl-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#FFF5FA}
.gl-media img,.gl-media video{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .8s var(--ease)}
.gl-tile:hover .gl-media img,.gl-tile:hover .gl-media video{transform:scale(1.05)}
.gl-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.gl-play i{width:64px;height:64px;border-radius:50%;background:#EC008C;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(32,33,33,.3);transition:transform .3s var(--ease)}
.gl-play .ic{width:26px;height:26px;margin-left:3px;stroke:none;fill:currentColor}
.gl-tile:hover .gl-play i{transform:scale(1.1)}
.gl-cap{display:flex;flex-direction:column;gap:4px;padding:18px 22px 22px}
.gl-cat{font:600 .72rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:#EC008C}
.gl-cap b{font:600 1.1rem/1.3 var(--font-head);color:#202121}
.gl-note{margin:40px 0 0;font-size:.85rem;color:#202121;text-align:center}
/* sections */
.gl-sec{margin:0 0 64px}.gl-sec[hidden]{display:none}
.gl-head{margin:0 0 28px;text-align:left}
.gl-head h2{font:700 clamp(1.5rem,2.6vw,2rem) var(--font-head);color:#202121;display:flex;align-items:center;gap:12px;margin:0 0 6px}
.gl-count{font:600 .8rem var(--font-body);background:#EC008C;color:#fff;border-radius:100px;padding:3px 12px}
.gl-head p{margin:0;color:#202121;}
/* sideways scrolling rows */
.gl-head{position:relative;padding-right:120px}
.gl-nav{position:absolute;right:0;top:0;display:flex;gap:8px}
.gl-arr{width:44px;height:44px;border-radius:50%;border:1.5px solid #202121;background:#fff;color:#202121;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .25s,color .25s,opacity .25s}
.gl-arr .ic{width:20px;height:20px}.gl-arr[data-dir="-1"] .ic{transform:rotate(180deg)}
.gl-arr:hover{background:#202121;color:#fff}.gl-arr:disabled{opacity:.3;pointer-events:none}
.gl.gl-scroll{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 18px;scrollbar-width:thin;scrollbar-color:#EC008C #eee}
.gl-scroll .gl-item{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start}
.gl-scroll::-webkit-scrollbar{height:8px}.gl-scroll::-webkit-scrollbar-thumb{background:#EC008C;border-radius:8px}.gl-scroll::-webkit-scrollbar-track{background:#FFF5FA;border-radius:8px}
.gl-empty{margin:0;padding:48px 24px;text-align:center;border:2px dashed var(--line);border-radius:22px;color:#202121;}
/* viewer */
html.glb-lock,html.glb-lock body{overflow:hidden}
.glb{position:fixed;inset:0;z-index:400;background:rgba(32,33,33,.94);display:flex;align-items:center;justify-content:center;padding:64px 72px 32px}
.glb[hidden]{display:none}
.glb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%}
.glb-stage{display:grid;place-items:center;max-width:min(1100px,100%);max-height:calc(100vh - 150px)}
.glb-stage img,.glb-stage video{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:12px;background:#202121}
.glb-stage iframe{width:min(1000px,calc(100vw - 144px));aspect-ratio:16/9;height:auto;border:0;border-radius:12px;background:#202121}
.glb-fig figcaption{color:#fff;text-align:center;font-size:.95rem}
.glb-fig figcaption small{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
.glb-btn{position:absolute;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .25s,color .25s}
.glb-btn .ic{width:22px;height:22px}
.glb-btn:hover{background:#fff;color:#202121}
.glb-x{top:16px;right:16px}
.glb-prev{left:16px;top:50%;margin-top:-24px}.glb-prev .ic{transform:rotate(180deg)}
.glb-next{right:16px;top:50%;margin-top:-24px}
.glb.single .glb-prev,.glb.single .glb-next{display:none}
@media(max-width:980px){.gl-item,.gl-scroll .gl-item{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:600px){.gl{gap:18px}.gl-item,.gl-scroll .gl-item{flex-basis:84%}.gl-head{padding-right:0}.gl-nav{position:static;margin-top:12px}.glb{padding:64px 16px 24px}.glb-stage iframe{width:calc(100vw - 32px)}.glb-prev{left:8px;top:auto;bottom:16px;margin:0}.glb-next{right:8px;top:auto;bottom:16px;margin:0}}

.gl-tile.ph{cursor:default}.gl-tile.ph:hover{transform:none;border-color:var(--line);box-shadow:none}.gl-tile.ph .gl-media{background:#202121}.gl-tile.ph .gl-play i{opacity:.85}

/* ===== Gallery: calm, slow-moving rows (built by js/gallery.js) ===== */
body.gal{overflow-x:clip}
.gl-sec.gl-live .gl-scroll,.gl-sec.gl-live .gl-nav{display:none}
.gl-sec.gl-live .gl-head{padding-right:0}
.gl-pause{margin-left:auto}

.gl-lanes{--lh:260px;position:relative;left:50%;width:100vw;margin:4px 0 0 -50vw;display:flex;flex-direction:column;gap:8px}
.gl-lane{position:relative;padding:10px 0;overflow:hidden;overflow:clip;touch-action:pan-y;cursor:grab;opacity:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#202121 6%,#202121 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#202121 6%,#202121 94%,transparent 100%)}
.gl-lane.drag{cursor:grabbing}
.gl-lanes.in .gl-lane{opacity:1;transition:opacity .8s ease var(--ld,0ms)}
.gl-track{position:relative;display:flex;width:max-content;height:var(--lh);margin:0;padding:0;list-style:none;will-change:transform}
.gl-track .gl-item{flex:0 0 auto;height:100%;width:calc(var(--lh) * 1.33);margin:0 20px 0 0}
.gl-track .gl-tile{position:relative;height:100%;border:0;border-radius:14px;overflow:hidden;box-shadow:0 10px 26px -18px rgba(32,33,33,.55);transition:transform .45s var(--ease),box-shadow .45s var(--ease);-webkit-user-drag:none}
.gl-track .gl-tile:hover,.gl-track .gl-tile:focus-visible{transform:none;border:0;box-shadow:0 18px 34px -18px rgba(32,33,33,.6)}
.gl-track .gl-media{flex:1;height:100%;aspect-ratio:auto}
.gl-track .gl-media img,.gl-track .gl-media video{pointer-events:none;-webkit-user-drag:none;transition:transform .9s var(--ease)}
.gl-track .gl-tile:hover .gl-media img,.gl-track .gl-tile:hover .gl-media video{transform:scale(1.04)}
.gl-track .gl-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;background:linear-gradient(to top,rgba(32,33,33,.85),rgba(32,33,33,0));transform:translateY(100%);transition:transform .4s var(--ease);pointer-events:none}
.gl-track .gl-tile:hover .gl-cap,.gl-track .gl-tile:focus-visible .gl-cap,.gl-track .ph .gl-cap{transform:none}
.gl-track .gl-cap b{color:#fff;font-size:1rem}
.gl-track .gl-cat{color:#fff;}
@media (hover:none){.gl-track .gl-cap{transform:none}}
@media (max-width:700px){
  .gl-lanes{--lh:190px}
  .gl-track .gl-item{margin-right:14px}
  .gl-track .gl-tile{border-radius:12px}
  .gl-pause{margin-left:0}
}

/* ===== Videos: all YouTube, 16:9 (1280 x 720) ===== */
.gl-item[data-type="video"] .gl-media{aspect-ratio:16/9}
.gl-sec[data-sec="video"] .gl-lanes{--lh:230px}
.gl-sec[data-sec="video"] .gl-track .gl-item{width:calc(var(--lh) * 16 / 9)}
.glb-stage{max-width:min(1280px,100%)}
.glb-stage iframe{width:min(1280px,calc(100vw - 144px),calc((100vh - 150px) * 16 / 9))}
@media (max-width:700px){
  .gl-sec[data-sec="video"] .gl-lanes{--lh:170px}
  .glb-stage iframe{width:calc(100vw - 32px)}
}
.gl-yt-embed{position:relative; width:100%; max-width:960px; margin:0 auto; aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:#202121; box-shadow:0 24px 50px -28px rgba(43,10,36,.55)}
.gl-yt-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.gl-yt-more{text-align:center; margin:16px 0 0; font-weight:600}
.gl-yt-more a{color:var(--magenta,#EC008C)}

/* ===== Viewer (photos + videos): reliable on phones ===== */
.glb{z-index:1000; height:100vh; height:100dvh; padding:64px 72px 32px; overscroll-behavior:contain; touch-action:none}
.glb-fig{min-width:0; width:100%}
.glb-stage{min-width:0; max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px)}
.glb-stage img,.glb-stage video{max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px); object-fit:contain}
.glb-x{top:calc(12px + env(safe-area-inset-top,0px)); right:12px; z-index:3; background:rgba(32,33,33,.7)}
.glb-btn{z-index:3; background:rgba(32,33,33,.55)}
.glb-yt{display:inline-block; margin-top:8px; padding:8px 16px; border-radius:100px; background:#EC008C; color:#fff; font-weight:600; font-size:.85rem; text-decoration:none}
@media (max-width:700px){
  .glb{padding:60px 12px calc(84px + env(safe-area-inset-bottom,0px))}
  .glb-stage{max-height:calc(100dvh - 190px)}
  .glb-stage img,.glb-stage video{max-height:calc(100dvh - 190px)}
  .glb-stage iframe{width:calc(100vw - 24px)}
  .glb-prev,.glb-next{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}

/* ===== Viewer v3: no big black gaps ===== */
.glb-navs{display:contents}
.glb.single .glb-navs{display:none}
.glb-fig figcaption{padding:0 12px}
@media (max-width:700px){
  .glb{flex-direction:column; justify-content:center; align-items:stretch; gap:10px; padding:52px 0 14px; padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)); background:rgba(32,33,33,.97)}
  .glb-fig{gap:10px; width:100%; max-height:none}
  .glb-stage{width:100%; max-width:100%; max-height:none}
  .glb-stage iframe{width:100vw; max-width:100%; border-radius:0}
  .glb-stage video{width:100%; max-width:100%; max-height:calc(100dvh - 170px); border-radius:0}
  .glb-stage img{width:100%; max-width:100%; height:auto; max-height:calc(100dvh - 170px); border-radius:0; object-fit:contain}
  .glb-navs{display:flex; justify-content:center; gap:18px}
  .glb-navs .glb-btn,.glb-navs .glb-prev,.glb-navs .glb-next{position:static; margin:0; width:44px; height:44px}
  .glb-x{top:calc(8px + env(safe-area-inset-top,0px)); right:10px}
}

/* viewer must be positioned against the screen, never against the page */
body.gal{animation:none !important; transform:none !important}
.glb{position:fixed; inset:0; width:100%; height:100vh; height:100dvh}