/* Batch 56 (2026-10-06): gallery banner, viewer and the next-event promotion (handoff R2 rows GL-10, GL-11, GL-13 to GL-20). Enqueued on /explore/photo-gallery/ only, after the batch 55 sheet.
   B  banner   one box in the gallery-banner slot (after the header, before the selectors): art at a fixed 4:1 on wide screens with the words on a local support, art above the words under 1100px.
               The creatives sit in one grid cell (or one absolute box), so rotating never changes the height. Crossfade reads the batch 41 token; static under reduced motion and ?static=1.
   V  viewer   a floating picture card on a bright plaid surround; the ornament wall sits behind the header only, never over the photo (its own clip pair, resting); close, previous and next are outside the image.
   P  strip    the gallery-viewer promotion, structurally below the photo and the caption.
   Colors: headings red #ef2435 with the shared white edge (the om-headline-red rule), mint #68f8b3 for the kicker and dates, buttons are 10px rounded rectangles with a white edge. */

/* ---------- B. Banner ---------- */
body.om-album .gl56-banner{position:relative;box-sizing:border-box;margin:0 0 clamp(28px,3vw,40px);border:3px solid #000;border-radius:10px;overflow:hidden;background:#080808;isolation:isolate;color:#fff}
body.om-album .gl56-stage{position:relative;display:grid}
body.om-album .gl56-slide{grid-area:1/1;position:relative;min-width:0;opacity:0;visibility:hidden}
body.om-album .gl56-slide.is-active{opacity:1;visibility:visible}
html.rv33-js body.om-album .gl56-banner .gl56-slide{transition:opacity var(--om41-crossfade-ms,450ms) ease,visibility 0s linear var(--om41-crossfade-ms,450ms)}
html.rv33-js body.om-album .gl56-banner .gl56-slide.is-active{transition-delay:0s}
body.om-album .gl56-link{display:block;color:#fff;text-decoration:none;box-sizing:border-box}
body.om-album a.gl56-link:focus-visible{outline:3px solid #68f8b3;outline-offset:-7px}
body.om-album .gl56-art{display:block;position:relative;aspect-ratio:4/1;overflow:hidden;background:#0b0b0b}
body.om-album .gl56-art img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
body.om-album .gl56-copy{display:flex;flex-direction:column;align-items:flex-start;gap:8px;box-sizing:border-box;padding:16px 16px 14px;background:#080808;text-align:left}
body.om-album .gl56-kicker{display:block;font:700 12px/1.2 "OMHM Tomorrow",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}
body.om-album .gl56-tier{display:none}
body.om-album .gl56-text .gl56-tier{display:block;font:400 clamp(24px,2.4vw,30px)/1.1 "OMHM Backline",cursive;color:#68f8b3}
body.om-album .gl56-title{display:block;font-size:clamp(20px,5.6vw,26px);line-height:1.08}
body.om-album .gl56-when{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
/* the date line is the site's Backline date class (om17-date, set in the markup); the banner keeps the dates mint like the editorial choices do, and takes no extra margin */
body.om-album .gl56-when .gl56-date.om17-date{display:inline-block;margin:0!important;color:#68f8b3!important}
body.om-album .gl56-venue{font:600 14px/1.3 "OMHM Tomorrow",system-ui,sans-serif;color:#fff}
body.om-album .gl56-support{display:block;max-width:56ch;font:500 15px/1.4 "OMHM Tomorrow",system-ui,sans-serif;color:#fff}
body.om-album .gl56-cta{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;margin-top:4px;padding:10px 18px;border:2px solid #fff;border-radius:10px;background:#c91a2a;color:#fff;font:700 14px/1.2 "OMHM Tomorrow",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:center}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  body.om-album .gl56-cta{transition:transform var(--om41-hover-ms,180ms) ease,box-shadow var(--om41-hover-ms,180ms) ease}
  body.om-album a.gl56-link:hover .gl56-cta,body.om-album a.gl56-link:focus-visible .gl56-cta{transform:translateY(calc(var(--om41-hover-lift,2px) * -1));box-shadow:0 8px 18px rgba(0,0,0,.45)}
}
/* previous and next: below the creative on narrow screens, on the two edges on wide ones. Buttons, never anchors, so the whole creative stays one link. */
body.om-album .gl56-ctrls{display:flex;justify-content:flex-end;gap:10px;padding:0 16px 14px;background:#080808}
body.om-album .gl56-nav{position:static;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;min-height:44px;padding:0;border:2px solid #fff;border-radius:10px;background:#080808;color:#fff;font:700 20px/1 "OMHM Tomorrow",system-ui,sans-serif;cursor:pointer}
body.om-album .gl56-nav:focus-visible{outline:3px solid #68f8b3;outline-offset:3px}
@media(hover:hover){body.om-album .gl56-nav:hover{background:#c91a2a}}
@media(min-width:1100px){
  body.om-album .gl56-banner .gl56-stage{display:block;aspect-ratio:4/1}
  body.om-album .gl56-banner .gl56-slide{position:absolute;inset:0}
  body.om-album .gl56-banner .gl56-link{position:absolute;inset:0}
  body.om-album .gl56-banner .gl56-art{position:absolute;inset:0;aspect-ratio:auto}
  /* the words sit on a local near-black support that feathers into the art on its left edge; the feather is narrower than the left padding, so no word sits in it */
  body.om-album .gl56-banner .gl56-copy{position:absolute;top:0;right:0;bottom:0;width:62%;justify-content:center;gap:6px;padding:16px 84px 16px 100px;background:linear-gradient(90deg,rgba(5,5,5,0) 0,rgba(5,5,5,.9) 84px,rgba(5,5,5,.86) 100%)}
  body.om-album .gl56-banner .gl56-text .gl56-copy{width:100%;padding-left:84px;background:#080808}
  body.om-album .gl56-title{font-size:clamp(22px,2.3vw,32px)}
  body.om-album .gl56-ctrls{display:contents}
  body.om-album .gl56-nav{position:absolute;top:50%;translate:0 -50%;z-index:3;background:rgba(8,8,8,.88)}
  body.om-album .gl56-prev{left:10px}
  body.om-album .gl56-next{right:10px}
}

/* ---------- V. Viewer ---------- */
body.om-album dialog.album-dialog.gl56-viewer{box-sizing:border-box;width:min(1240px,calc(100vw - 20px));max-width:none;max-height:calc(100dvh - 20px);margin:auto;padding:clamp(12px,4vw,56px);overflow:auto;overscroll-behavior:contain;
  border:3px solid #000;border-radius:10px;color:#fff;background:#8f1b24 url('./journey-weave-tile.jpg') 0 0/187px 186px repeat}
body.om-album dialog.gl56-viewer::backdrop{background:rgba(0,0,0,.74)}
html.rv33-js body.om-album dialog.gl56-viewer[open]{animation:gl56-in var(--om41-modal-ms,200ms) ease-out both}
@keyframes gl56-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.om-album dialog.gl56-viewer .gl56-card{display:block;position:relative;box-sizing:border-box;overflow:hidden;border:3px solid #000;border-radius:10px;background:#080808}
body.om-album .gl56-vhead{position:relative;isolation:isolate;box-sizing:border-box;padding:clamp(16px,2.4vw,28px) clamp(70px,9vw,128px);text-align:center;background:#080808}
/* the wall layer: a clip box the size of the header (never the photo) holding one crop of an approved ornament wall; it rests, the dialog scrolls instead of the page */
body.om-album .gl56-vclip{display:block;position:absolute;z-index:-2;inset:0;overflow:hidden;pointer-events:none;background:#080808;font-style:normal}
body.om-album .gl56-vtree{display:block;position:absolute;inset:0;background:#0b0b0b url('./art-20261003/ornament-wall-b-1600.webp') 50% 38%/cover no-repeat}
@media(max-width:767px){body.om-album .gl56-vtree{background-image:url('./art-20261003/ornament-wall-portrait-940.webp');background-position:50% 30%}}
body.om-album .gl56-vhead-copy{position:relative;box-sizing:border-box;max-width:min(760px,100%);margin:0 auto;padding:12px 22px}
body.om-album .gl56-vhead-copy::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:14px;background:rgba(5,5,5,.9);box-shadow:0 0 16px 10px rgba(5,5,5,.5)}
body.om-album dialog.gl56-viewer .gl56-vtitle{margin:0 0 6px;font-size:clamp(24px,3vw,40px);line-height:1.06;text-wrap:balance}
body.om-album dialog.gl56-viewer .gl56-vsub{margin:0 0 4px;min-height:0;font:600 clamp(14px,1.5vw,17px)/1.4 "OMHM Tomorrow",system-ui,sans-serif;color:#fff}
body.om-album dialog.gl56-viewer .gl56-meta{margin:0;min-height:0;font:700 12px/1.3 "OMHM Tomorrow",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#68f8b3}
body.om-album dialog.gl56-viewer button.gl56-close{position:absolute;top:clamp(10px,1.6vw,18px);right:clamp(10px,1.6vw,18px);z-index:3}
body.om-album dialog.gl56-viewer :is(button.gl56-close,button.gl56-step){display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-height:44px;padding:10px 16px;border:2px solid #fff;border-radius:10px;background:rgba(8,8,8,.92);color:#fff;font:700 14px/1.2 "OMHM Tomorrow",system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
@media(hover:hover){body.om-album dialog.gl56-viewer :is(button.gl56-close,button.gl56-step):hover{background:#c91a2a}}
body.om-album .gl56-stage-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(8px,1.6vw,18px);padding:clamp(12px,2vw,20px) clamp(12px,2vw,22px) 6px}
body.om-album .gl56-photo{box-sizing:border-box;margin:0;height:clamp(240px,60dvh,760px);display:block;overflow:hidden;border-radius:10px;background:#0b0b0b;touch-action:pan-y}
body.om-album .gl56-photo img{display:block;width:100%;height:100%;object-fit:contain}
body.om-album dialog.gl56-viewer .gl56-caption{margin:0;min-height:24px;padding:8px clamp(14px,3vw,32px) 14px;text-align:center;font:500 14px/1.4 "OMHM Tomorrow",system-ui,sans-serif;color:#fff}
body.om-album .gl56-viewer-promo{padding:0 clamp(12px,2vw,22px) clamp(14px,2vw,22px)}
body.om-album .gl56-viewer-promo:empty{display:none;padding:0}
@media(max-width:699px){
  body.om-album dialog.gl56-viewer .gl56-meta{font-size:11px;letter-spacing:.08em}
  body.om-album .gl56-vhead{padding:60px 12px 14px}
  body.om-album .gl56-vhead-copy{padding:10px 14px}
  body.om-album .gl56-stage-row{grid-template-columns:1fr 1fr;grid-template-areas:"photo photo" "prev next";gap:10px}
  body.om-album .gl56-photo{grid-area:photo;height:clamp(220px,52dvh,560px)}
  body.om-album .gl56-step-prev{grid-area:prev;justify-self:start}
  body.om-album .gl56-step-next{grid-area:next;justify-self:end}
}

/* ---------- P. Viewer promotion strip: compact, below the photo ---------- */
body.om-album .gl56-strip{position:relative;box-sizing:border-box;border:3px solid #000;border-radius:10px;overflow:hidden;background:#080808;color:#fff}
body.om-album .gl56-strip .gl56-stage,body.om-album .gl56-strip .gl56-slide{display:block}
body.om-album .gl56-strip .gl56-link{display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);align-items:stretch}
body.om-album .gl56-strip .gl56-art{aspect-ratio:auto;min-height:100%}
body.om-album .gl56-strip .gl56-art img{position:absolute;inset:0}
body.om-album .gl56-strip .gl56-copy{gap:6px;padding:14px 18px}
body.om-album .gl56-strip .gl56-text .gl56-link{display:block}
body.om-album .gl56-strip .gl56-title{font-size:clamp(17px,1.8vw,22px)}
body.om-album .gl56-strip .gl56-when .gl56-date.om17-date{font-size:clamp(20px,1.8vw,24px)!important}
body.om-album .gl56-strip .gl56-support{font-size:14px}
@media(max-width:699px){
  body.om-album .gl56-strip .gl56-link{display:block}
  body.om-album .gl56-strip .gl56-art{aspect-ratio:3/1;min-height:0}
  body.om-album .gl56-strip .gl56-art img{position:static}
}
/* a short screen: the modal scrolls, the card never shrinks the photo below a usable height */
@media(max-height:560px){body.om-album .gl56-photo{height:clamp(200px,70dvh,420px)}}
@media(prefers-reduced-motion:reduce){
  body.om-album .gl56-banner .gl56-slide,body.om-album dialog.gl56-viewer[open],body.om-album .gl56-cta{transition:none;animation:none}
}
/* Batch C gallery (Umbra 7a, 14): the viewer stage is cleared on every navigation and shows a quiet static label while loading or after a failure (never the previous photo); on album pages the promotion banner sits below the photo grid, so its spacing moves to the top. No animation, no timer. */
body.om-album .gl56-photo{position:relative}
body.om-album .gl56-photo[data-state="loading"] img,body.om-album .gl56-photo[data-state="error"] img{visibility:hidden}
body.om-album .gl56-photo[data-state="loading"]::after,body.om-album .gl56-photo[data-state="error"]::after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;color:#e6e6e6;font:500 14px/1.4 "OMHM Tomorrow",system-ui,sans-serif}
body.om-album .gl56-photo[data-state="loading"]::after{content:attr(data-loading-text);content:attr(data-loading-text) / ""}
body.om-album .gl56-photo[data-state="error"]::after{content:attr(data-fallback-text);content:attr(data-fallback-text) / ""}
body.om-album .gl55-promo-slot.gl-c14-below{margin-top:clamp(28px,3vw,40px)}
body.om-album .gl55-promo-slot.gl-c14-below:empty{margin-top:0}
body.om-album .gl55-promo-slot.gl-c14-below .gl56-banner{margin:0}