/* Batch 55 (2026-10-06): gallery index and album pages. Enqueued on /explore/photo-gallery/ only (index and every album), last in the gallery cascade,
   after the batch 41 background and motion tokens. Rows GL-01, GL-03 to GL-07, GL-09 of the handoff R2 reconciliation.
   H  header   one framed box inside the content width on the index and every album, with the approved ornament wall (wall-a crop) INSIDE it on batch 58's drift layer,
              behind the title block, which is the local support. One h1 per page.
   Y  years    nine real year cards (the data decides, 2016 to 2019 and 2021 to 2025). The year is the headline, red fill with the shared white edge; "Holiday Market"
              and the count are secondary. The whole card is one link. Dark support is local to each card, so the bright plaid stays visible.
   S  slot     the promo slot position, an empty element with no height. Batch 56 fills it.
   T  toolbar  the signed-in WordPress toolbar keeps its own stylesheet (enqueue block) and the sticky site header and anchors take its height. Nothing is hidden. */

/* ---------- T. Toolbar height (zero for visitors) ----------
   The toolbar is 32px, 46px from 783px down, and scrolls away with the page from 600px down. */
body.om-album{--gl55-bar:0px}
body.om-album.admin-bar{--gl55-bar:32px}
@media(max-width:782px){body.om-album.admin-bar{--gl55-bar:46px}}
@media(max-width:600px){body.om-album.admin-bar{--gl55-bar:0px}}
/* From 600px down WordPress makes the toolbar position:absolute, and the page body is itself positioned (it carries the plaid layer) and sits below the toolbar's html margin,
   so the toolbar would land on the site header (46px down). Pull it back to the top of the document. */
@media(max-width:600px){html body.om-album.admin-bar #wpadminbar{top:-46px}}
body.om-album.admin-bar .om-site-header{top:var(--gl55-bar)}
body.om-album.admin-bar .omhm26-skip{top:var(--gl55-bar)}
html body.om-mvp.om-album.admin-bar [id]:not(#wpadminbar,#wpadminbar *){scroll-margin-top:calc(var(--om-header-h) + var(--gl55-bar) + 16px)!important}
html body.om-mvp.om-album.admin-bar :is(a[href],button,input,select,textarea,summary,[tabindex]):not(header.om-site-header *,#wpadminbar,#wpadminbar *){scroll-margin-top:calc(var(--om-header-h) + var(--gl55-bar) + 12px)!important}

/* ---------- N. Tablet navigation (761 to 1100px) ----------
   The gallery route loads neither assets/approved-photo-placement.css nor assets/launch-ux.css, the two sheets that hold the shared tablet navigation rules ("keep the existing
   navigation usable through tablet widths", "use the existing menu before desktop links crowd"). Without them the desktop links and the Get Tickets button ran 137px past the viewport
   from 761 to 1100px (measured at 900, 1000 and 1030, signed in and signed out, with this sheet blocked). These are those rules, unchanged, so the header behaves as on every other route. */
@media(min-width:761px) and (max-width:1024px){
  body.om-mvp .om-site-header{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:10px 12px}
  body.om-mvp .om-site-menu{justify-self:end}
}
@media(min-width:761px) and (max-width:1100px){
  body.om-mvp .om-site-desktop{display:none}
  body.om-mvp .om-site-menu{display:block;margin-left:auto}
  body.om-mvp .om-site-menu summary{padding:12px;cursor:pointer}
  body.om-mvp .om-site-menu nav{position:absolute;top:100%;left:12px;right:12px;display:flex;flex-direction:column;padding:16px;background:#050505;border:2px solid #ff2638;border-radius:10px}
  body.om-mvp .om-site-menu nav a{padding:12px}
}

/* ---------- H. Header box with the ornament wall inside it ----------
   One framed box inside the content width (the same width as the selector grid): 2px red edge, 10px rounded corners like the other boxes. The wall (ornament-wall-a, 1600 file; the portrait wall under
   768px) is a crop contained inside the box on batch 58's drift layer (.tb58-clip holding .tb58-tree; the base rules and the scroll drift are batch 58's sheet and script, handle omhm26-tree-box-batch58).
   The copy block is the local support (om41-support) so the wall shows left and right of it and above and below it; the bright plaid shows around the box. */
body.om-album .album-heading.gl55-head{
  --tb58-host-travel:16;--tb58-shade:none;
  position:relative;isolation:isolate;box-sizing:border-box;margin:0 0 clamp(28px,3vw,40px);padding:clamp(30px,3.6vw,52px) clamp(14px,3vw,48px);
  background:#080808;border:3px solid #000;border-radius:10px;box-shadow:none;text-align:center;
}
body.om-album .gl55-head .tb58-tree{background-image:url('./art-20261003/ornament-wall-a-1600.webp');background-size:cover;background-position:50% 42%}
@media(max-width:767px){body.om-album .gl55-head .tb58-tree{background-image:url('./art-20261003/ornament-wall-portrait-940.webp');background-position:50% 36%}}
body.om-album .gl55-head-copy{position:relative;box-sizing:border-box;max-width:min(900px,100%);margin:0 auto;padding:clamp(24px,3vw,40px) clamp(22px,4vw,56px)}
/* The numbers live on the ::before (the batch 41 rule reads them there). Symmetric, dense under the words, feathered into the wall at every edge; the side feather is always narrower than the side padding, so no word sits in the feather. */
body.om-album .gl55-head-copy::before{
  --om41-support-a:.88;--om41-support-b:.82;--om41-support-angle:180deg;
  --om41-support-inset-x:0px;--om41-support-inset-y:0px;--om41-support-fx:clamp(12px,3.4vw,44px);--om41-support-fy:34px;--om41-support-radius:14px;
}
body.om-album .gl55-head-copy .album-kicker{margin:0 0 4px}
body.om-album .gl55-head-copy h1{margin:12px auto 14px}
body.om-album .gl55-head-copy .gl55-sub{margin:0 auto 10px;max-width:60ch;line-height:1.55;font-weight:600;color:#fff}
body.om-album .gl55-head-copy .gl55-back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;color:#fff;font-weight:700;text-underline-offset:4px}
@media(max-width:760px){
  body.om-album .album-heading.gl55-head{padding:26px 12px;margin-bottom:24px}
  body.om-album .gl55-head-copy{padding:22px 16px;margin:0}
  body.om-album .gl55-head-copy::before{--om41-support-a:.9;--om41-support-b:.86;--om41-support-fx:12px;--om41-support-fy:20px;--om41-support-radius:12px}
}

/* ---------- S. Promo slot position (documented in the template). Empty means no height and no margin. ---------- */
.gl55-promo-slot{display:block;margin:0;padding:0;border:0}
.gl55-promo-slot:empty{height:0;min-height:0;overflow:hidden}

/* ---------- Y. Year selector ---------- */
body.om-album .year-nav.gl55-years{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);
  margin:clamp(24px,3vw,36px) 0 clamp(24px,3vw,32px);padding:0;
}
@media(max-width:899px){body.om-album .year-nav.gl55-years{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:339px){body.om-album .year-nav.gl55-years{grid-template-columns:minmax(0,1fr)}}
body.om-album .gl55-years .gl55-year{
  position:relative;isolation:isolate;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;
  min-height:clamp(108px,9vw,128px);padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,24px);
  border:3px solid #000;border-radius:10px;color:#fff;text-decoration:none;font-size:14px;text-align:left;overflow:hidden;
  /* Local support: dense where the words sit, thinning toward the right so the bright plaid of the page reads through the card. */
  background:linear-gradient(100deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.8) 48%,rgba(5,5,5,.36) 100%);
  transition:transform var(--om41-hover-ms,180ms) ease,box-shadow var(--om41-hover-ms,180ms) ease,border-color var(--om41-hover-ms,180ms) ease;
}
body.om-album .gl55-years .gl55-year-num{display:block;font-size:clamp(30px,2.4vw,36px);line-height:1.05;letter-spacing:.01em}
body.om-album .gl55-years .gl55-year-label{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
body.om-album .gl55-years .gl55-year-count{display:block;font-size:13px;font-weight:500;color:#ececec;white-space:nowrap}
/* Active year: a persistent treatment that is not color alone (white edge, denser support, the Viewing tab), plus aria-current in the markup. */
body.om-album .gl55-years .gl55-year[aria-current]{border-color:#fff;background:linear-gradient(100deg,rgba(5,5,5,.95) 0%,rgba(5,5,5,.88) 48%,rgba(5,5,5,.55) 100%)}
body.om-album .gl55-years .gl55-year-now{position:absolute;top:10px;right:10px;padding:4px 9px;border-radius:6px;background:#fff;color:#080808;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.2}
body.om-album .gl55-years .gl55-year:focus-visible{outline:3px solid #68f8b3;outline-offset:3px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  body.om-album .gl55-years .gl55-year:hover,body.om-album .gl55-years .gl55-year:focus-visible{transform:translateY(calc(var(--om41-hover-lift,2px) * -1));box-shadow:0 10px 22px rgba(0,0,0,.4);border-color:#fff}
}
@media(prefers-reduced-motion:reduce){body.om-album .gl55-years .gl55-year{transition:none}}
@media(max-width:760px){
  body.om-album .gl55-years .gl55-year{min-height:104px;padding:14px 14px}
  body.om-album .gl55-years .gl55-year-num{font-size:clamp(25px,6.8vw,30px)}
  body.om-album .gl55-years .gl55-year-label{font-size:12px;letter-spacing:.06em}
  body.om-album .gl55-years .gl55-year-count{font-size:12px}
  body.om-album .gl55-years .gl55-year-now{top:8px;right:8px;font-size:10px;padding:3px 7px}
}
/* Wave G edges (2026-10-07): the header box edge is black 3 px; a 1 px white keyline just inside it, because the ornament wall sits behind. */
body.om-album .album-heading.gl55-head::after{content:"";position:absolute;inset:0;z-index:6;box-sizing:border-box;border:1px solid rgba(255,255,255,.85);border-radius:inherit;pointer-events:none}