/* ============================================================================
   Level Up Hobbies :: Roll For Adventure conversion (CLAUDE lane)
   styles.css -- layout + section library. Tokens live in tokens.css (load first).
   Grammar carried from roll-for-adventure/clone: Cinzel display, gold-as-ornament,
   flourish rule+diamond, torn rip (navy->cream, downward only), hex tiles, .ev
   cards, foil glare, d20, topographic rings. New: ember <em> accent, eyebrow,
   accordion, breadcrumb, prose+TOC, tier cards, ladder, points table, map panel.
   ============================================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  color:var(--cream);
  background:var(--navy-950);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
address{ font-style:normal; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
section,header,footer{ overflow-x:clip; }
.center{ text-align:center; }
.cta-row{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.wrap--narrow-center{ max-width:900px; text-align:center; }
.ico{ width:1em; height:1em; fill:var(--gold); flex:none; }

/* ---------- ground system: navy default, cream chapters ---------- */
.ground-cream{
  background:var(--paper);
  background-image:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.35),transparent 60%),
                   radial-gradient(80% 60% at 100% 100%,rgba(120,90,50,.08),transparent 70%);
  color:var(--body-ink);
}
:root{
  --body-ink:#2b3d68;            /* body text on cream */
  --head-ink:var(--navy-900);    /* headings on cream */
}
.ground-cream h1,.ground-cream h2,.ground-cream h3,.ground-cream h4{ color:var(--head-ink); }

/* the <em> accent: EMBER RED. Operator call 2026-07-16 - the red reads bad-ass against
   the navy/gold and it is what LIVE LUH already uses for <em>. Gold stays for action
   (buttons, ornament, rules); red is emphasis. Two accents, two jobs, no overlap. */
h1 em,h2 em,h3 em,.luh-hero__title em{ font-style:normal; color:var(--ember-lift); }
.ground-cream h1 em,.ground-cream h2 em,.ground-cream h3 em{ color:var(--ember); }

/* ---------- buttons (RFA verbatim + navy) ---------- */
.btn{
  --bfs:14px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--ff-body); font-weight:700; font-size:var(--bfs);
  letter-spacing:.11em; text-transform:uppercase;
  padding:15px 30px; border-radius:3px; cursor:pointer;
  border:1.5px solid transparent; transition:all .22s var(--ease);
  white-space:nowrap; text-align:center;
}
.btn--sm{ --bfs:12px; padding:9px 20px; letter-spacing:.13em; }
.btn--gold{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#04091e; border-color:var(--gold);
  box-shadow:0 6px 18px -8px rgba(255,201,60,.6);
  position:relative; overflow:hidden;
}
.btn--gold:hover{ background:linear-gradient(180deg,#ffe08a,var(--gold-bright)); transform:translateY(-2px); }
.btn--gold::after{ content:""; position:absolute; top:-40%; bottom:-40%; left:-70%; width:36%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5) 50%,transparent);
  transform:skewX(-18deg); pointer-events:none; }
.btn--gold:hover::after{ animation:sheen .65s var(--ease); }
@keyframes sheen{ to{ left:140%; } }
.btn--ghost{ background:transparent; color:var(--cream); border-color:var(--bronze); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-bright); background:rgba(255,201,60,.06); }
.ground-cream .btn--ghost{ color:var(--navy-850); border-color:var(--bronze); }
.ground-cream .btn--ghost:hover{ color:var(--navy-900); border-color:var(--gold-soft); background:rgba(255,184,0,.08); }
.btn--navy{
  background:linear-gradient(180deg,#0e2856,#081c48);
  color:var(--cream-2); border-color:var(--bronze);
}
.btn--navy:hover{ border-color:var(--gold); color:var(--gold-bright); }
.btn:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

/* ---------- section heads, eyebrow, flourish ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--ff-body); font-weight:700; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.eyebrow::before{ content:""; width:24px; height:1.5px; background:var(--gold); }
.ground-cream .eyebrow{ color:var(--bronze); }
.ground-cream .eyebrow::before{ background:var(--bronze); }
.sec-head{
  font-family:var(--ff-display); font-weight:700;
  font-size:var(--fs-h2); letter-spacing:.05em; text-transform:uppercase;
  color:var(--cream-2); text-align:center;
  display:flex; align-items:center; justify-content:center; gap:26px;
  margin-top:10px;
}
.sec-head__text{ display:inline-block; max-width:20ch; }
@media (min-width:960px){ .sec-head__text{ max-width:none; } }
.ground-cream .sec-head{ color:var(--head-ink); }
.sec-sub{
  text-align:center; color:var(--cream); opacity:.85;
  font-size:clamp(16px,1.25vw,19px); margin:12px auto 0; max-width:820px;
}
.ground-cream .sec-sub{ color:var(--body-ink); opacity:1; }
.sec-intro{ text-align:center; }
.sec-intro .eyebrow::before{ display:none; }

.flourish{ position:relative; width:90px; height:14px; flex:none; }
.flourish::before{
  content:""; position:absolute; top:50%; height:1.5px; width:100%;
  background:linear-gradient(90deg,transparent,var(--gold) 55%,var(--gold));
  transform:translateY(-50%);
}
.flourish::after{
  content:""; position:absolute; top:50%; width:9px; height:9px;
  background:var(--gold); transform:translate(0,-50%) rotate(45deg);
}
.flourish--l::before{ background:linear-gradient(90deg,var(--gold),var(--gold) 45%,transparent); }
.flourish--l::after{ right:-2px; }
.flourish--r::after{ left:-2px; }
/* section edge flourish (cream->navy transitions use this, never a rip) */
.sec-edge{ height:26px; position:relative; }
.sec-edge::before{ content:""; position:absolute; left:14%; right:14%; top:50%; height:1.5px; transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,var(--bronze) 22%,var(--gold) 50%,var(--bronze) 78%,transparent);
  opacity:.65; }
.sec-edge::after{ content:""; position:absolute; left:50%; top:50%; width:9px; height:9px;
  background:var(--gold); transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 12px rgba(255,201,60,.55); }

/* ---------- the rip (navy -> cream, downward only; max 3/page) ---------- */
.torn{
  /* THIS ELEMENT *IS* THE TEAR. .ripped's own mask does not render, so the cream section
     is a plain rectangle; this masked div is the only thing drawing the torn profile.
     I removed it once and the tear vanished - do not do that again.
     Why it used to mismatch: .ground-cream paints --paper PLUS a white radial wash
     (rgba(255,255,255,.35) at 50% 0%) that lifts its top; this div painted FLAT --paper,
     so it was always darker. Fix = carry the SAME wash. The section's wash is 80% of the
     SECTION height (~500px); this div is --rip-h+4 tall, so the equivalent vertical size
     is ~455% of its own box, which reproduces the same near-peak value across the tear. */
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  height:calc(var(--rip-h) + 4px);
  background-color:var(--paper);
  background-image:radial-gradient(120% 455% at 50% 0%,rgba(255,255,255,.35),transparent 60%);
  -webkit-mask-image:var(--rip-tile);
  -webkit-mask-size:var(--rip-w) var(--rip-h);
  -webkit-mask-position:bottom left;
  -webkit-mask-repeat:repeat-x;
  mask-image:var(--rip-tile);
  mask-size:var(--rip-w) var(--rip-h);
  mask-position:bottom left;
  mask-repeat:repeat-x;
}
.ripped{
  position:relative;
  margin-top:calc(-1 * var(--rip-h));
  padding-top:calc(var(--pad-inner) + var(--rip-h));
  -webkit-mask-image:var(--rip-tile),linear-gradient(#000,#000);
  -webkit-mask-size:var(--rip-w) var(--rip-h),100% calc(100% - var(--rip-h) + 1px);
  -webkit-mask-position:top left,bottom left;
  -webkit-mask-repeat:repeat-x,no-repeat;
  mask-image:var(--rip-tile),linear-gradient(#000,#000);
  mask-size:var(--rip-w) var(--rip-h),100% calc(100% - var(--rip-h) + 1px);
  mask-position:top left,bottom left;
  mask-repeat:repeat-x,no-repeat;
}

/* ---------- vertical rhythm: THREE tiers only (hero tier is the landing hero's own padding) ---------- */
.pad-chapter{ padding-block:var(--pad-chapter); }
.ripped.pad-chapter{ padding-top:calc(var(--pad-inner) + var(--rip-h)); }
.pad-inner{ padding-block:var(--pad-inner); }

/* ============================================================
   UTILITY BAR
   ============================================================ */
.utilbar{ background:#020615; border-bottom:1px solid rgba(255,201,60,.25); font-size:13px; }
.utilbar__in{ display:flex; align-items:center; justify-content:space-between; min-height:40px; }
.utilbar__left,.utilbar__right{ display:flex; align-items:center; gap:30px; }
.utilbar li{ display:flex; align-items:center; gap:8px; color:var(--cream); }
.utilbar .ico{ width:15px; height:15px; }
.utilbar a{ transition:color .18s var(--ease); }
.utilbar a:hover{ color:var(--gold-bright); }

/* ============================================================
   MAIN NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,#0c2456,#081a45);
  border-top:1px solid rgba(255,201,60,.5);
  border-bottom:1px solid rgba(255,201,60,.5);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.9);
}
.nav__in{ display:flex; align-items:center; gap:26px; min-height:76px; }
.nav__logo{ display:flex; align-items:center; }
.nav__logo img{ height:46px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:24px; margin-left:8px; }
.nav__links > a,.nav__drop > a{
  font-weight:600; font-size:15px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cream-2); padding:6px 2px; position:relative;
  display:inline-flex; align-items:center; gap:5px; transition:color .18s var(--ease);
}
.nav__links a:hover,.nav__drop > a:hover{ color:var(--gold-bright); }
.nav__links > a:not(.is-active)::after,.nav__drop > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--gold); transform:scaleX(0); transition:transform .24s var(--ease);
}
.nav__links > a:not(.is-active):hover::after,.nav__drop > a:hover::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--gold); }
.nav__links > a.is-active::after,.nav__drop > a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--gold);
  transform:none;
}
.caret{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; }
.nav__drop{ position:relative; }
.nav__menu{
  position:absolute; top:calc(100% + 12px); left:-14px; min-width:230px;
  background:#081a45; border:1px solid rgba(255,201,60,.45); border-radius:5px;
  padding:8px; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:all .2s var(--ease); box-shadow:0 20px 40px -20px rgba(0,0,0,.9); z-index:60;
}
.nav__menu a{ padding:9px 14px; font-size:14px; color:var(--cream); border-radius:4px; text-transform:none; letter-spacing:.02em; }
.nav__menu a:hover{ background:var(--navy-hover); color:var(--gold-bright); }
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu,.nav__menu.open{ opacity:1; visibility:visible; transform:translateY(0); }

.nav__search{ margin-left:auto; display:flex; align-items:center;
  border:1px solid rgba(255,201,60,.5); border-radius:5px; background:rgba(4,10,30,.6);
  overflow:hidden; min-width:230px; transition:border-color .2s var(--ease); }
.nav__search:focus-within{ border-color:var(--gold); }
.nav__search input{
  flex:1; background:transparent; border:0; color:var(--cream);
  font-family:var(--ff-body); font-size:14px; padding:11px 14px; min-width:0;
}
.nav__search input::placeholder{ color:rgba(231,217,197,.55); }
.nav__search input:focus{ outline:none; }
.nav__search button{ background:transparent; border:0; padding:0 14px; cursor:pointer; display:flex; align-items:center; }
.nav__search svg{ width:18px; height:18px; fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; }
.nav__search{ position:relative; overflow:visible; }
.nav__search-suggestions{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:95; max-height:min(31rem,70vh); overflow:auto; padding:7px; border:1px solid rgba(255,201,60,.62); border-radius:7px; background:#061538; box-shadow:0 24px 56px -18px rgba(0,0,0,.98); }
.nav__search-suggestions[hidden]{ display:none; }
.nav__search-suggestion{ display:grid; gap:2px; padding:10px 11px; border-radius:5px; color:var(--cream-2); text-decoration:none; }
.nav__search-suggestion:hover,.nav__search-suggestion.is-active,.nav__search-suggestion:focus-visible{ background:rgba(255,201,60,.14); color:var(--cream-2); outline:none; }
.nav__search-suggestion-title{ font-weight:800; line-height:1.25; }
.nav__search-suggestion-meta{ color:rgba(231,217,197,.72); font-size:12px; line-height:1.35; }
.nav__search-status{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nav__search-toggle{ display:none; flex:0 0 44px; width:44px; height:44px; align-items:center; justify-content:center; margin-left:auto; padding:0; border:1px solid rgba(255,201,60,.72); border-radius:5px; background:rgba(2,6,21,.48); color:var(--gold); cursor:pointer; }
.nav__search-toggle svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.nav__search-toggle:hover,.nav__search-toggle:focus-visible{ border-color:var(--gold-bright); background:rgba(255,201,60,.12); color:var(--gold-bright); }
.nav__search-toggle:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

.nav__cart{
  position:relative; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:94px; min-height:44px; padding:0 12px;
  border:1px solid rgba(255,201,60,.72); border-radius:5px; background:rgba(2,6,21,.48);
  color:var(--cream-2); font-size:13px; font-weight:750; letter-spacing:.07em; line-height:1; text-transform:uppercase;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.nav__cart:hover,.nav__cart:focus-visible{ border-color:var(--gold-bright); background:rgba(255,201,60,.12); color:var(--gold-bright); }
.nav__cart:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.nav__cart-icon{ width:20px; height:20px; fill:currentColor; }
.nav__cart-count{
  display:inline-grid; place-items:center; min-width:21px; height:21px; padding-inline:5px;
  border-radius:999px; background:var(--gold); color:var(--navy-950);
  font-size:11px; font-weight:900; letter-spacing:0;
}

.nav__burger{ display:none; background:transparent; border:0; cursor:pointer;
  width:44px; height:40px; margin-left:auto; padding:9px 8px; flex-direction:column; justify-content:space-between; }
.nav__burger span{ display:block; height:2.5px; background:var(--gold); border-radius:2px; transition:.25s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   luh-hero--landing (home)
   ============================================================ */
.luh-hero{ position:relative; overflow:hidden; background:var(--navy-950); isolation:isolate; }
/* 100vh contract: the countdown label's BOTTOM lands at the fold, so the
   marquee starts just under the viewport. 176px = utilbar(40) + nav(79)
   + countdown label(56) + its top border(1). min-height only stretches;
   content still wins on short screens. */
@media (min-width:960px){
  .luh-hero--landing{ display:flex; flex-direction:column; justify-content:center;
    min-height:calc(100vh - 176px); }
  .luh-hero--landing .luh-hero__in{ width:100%; }
}
.luh-hero__bg{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(46% 60% at 63% 46%, rgba(72,102,190,.4), rgba(36,52,120,.13) 50%, transparent 74%),
    radial-gradient(22% 30% at 66% 42%, rgba(150,178,246,.34), transparent 66%),
    radial-gradient(40% 64% at 96% 58%, rgba(150,96,42,.4), transparent 70%),
    radial-gradient(55% 74% at 80% 98%, rgba(84,56,28,.34), transparent 72%),
    radial-gradient(60% 80% at 30% 30%, rgba(6,14,40,.6), transparent 70%),
    linear-gradient(105deg,#04091e 0%,#061336 42%,#0a1f4d 72%,#05122f 100%);
}
.luh-hero__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center right; opacity:.92; }
.luh-hero__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,#03081c 0%,rgba(4,10,30,.92) 30%,rgba(4,10,30,.45) 55%,rgba(3,8,28,.15) 70%); }
.pre-rip{ position:relative; padding-bottom:calc(var(--rip-h) + 28px); }
.luh-hero__in{ position:relative; z-index:2; padding-top:clamp(34px,3vw,50px); padding-bottom:clamp(36px,3.2vw,54px);
  display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(32px,4vw,72px); align-items:center; }
.luh-hero__pill{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.pill{
  display:inline-flex; align-items:center; padding:6px 14px; border-radius:3px;
  border:1px solid var(--gold); color:var(--gold);
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.luh-hero__pill-after{ font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream); opacity:.85; }
.luh-hero__title{ font-family:var(--ff-display); text-transform:uppercase; line-height:var(--lh-display); letter-spacing:.01em; }
.luh-hero__title .row{ display:block; color:#f4f0e8; text-shadow:0 3px 24px rgba(0,0,0,.6); }
.luh-hero__title .row--big{ font-weight:700; font-size:var(--fs-display-big); }
.luh-hero__title .row--sm{ font-weight:600; font-size:var(--fs-display-sm); }
.luh-hero__lede{ margin-top:18px; color:var(--cream); font-size:clamp(16px,1.25vw,19px); line-height:1.6; opacity:.94; max-width:720px; }
.luh-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; }

/* inline capture (the "Be first in the door" form, moved into the hero) */
.luh-capture{ margin-top:18px; max-width:560px; }
.luh-capture .eyebrow{ margin-bottom:8px; }
.luh-capture__head{ font-family:var(--ff-display); font-weight:700; font-size:clamp(17px,1.35vw,21px);
  letter-spacing:.04em; text-transform:uppercase; color:var(--cream-2); margin-bottom:10px; }
.luh-capture__sub{ font-size:14px; line-height:1.6; color:var(--cream); opacity:.85; margin-bottom:14px; }
.luh-capture__row{ display:flex; gap:10px; }
.luh-capture__row input{
  flex:1; min-width:0; background:rgba(4,10,30,.6); border:1px solid rgba(255,201,60,.5);
  border-radius:4px; color:var(--cream); font-family:var(--ff-body); font-size:15px;
  padding:13px 14px; transition:border-color .2s var(--ease);
}
.luh-capture__row input::placeholder{ color:rgba(231,217,197,.5); }
.luh-capture__row input:focus{ outline:none; border-color:var(--gold); }
.luh-capture__note{ margin-top:7px; font-size:12.5px; color:var(--cream); opacity:.7; }
.luh-capture__success h3{ font-family:var(--ff-display); font-size:22px; color:var(--gold); letter-spacing:.05em; text-transform:uppercase; }
.luh-capture__success p{ margin-top:8px; font-size:14.5px; color:var(--cream); }

.luh-hero__aside{ display:flex; flex-direction:column; gap:18px; }
.luh-hero__plinth{
  background:linear-gradient(180deg,rgba(14,40,86,.55),rgba(6,19,54,.75));
  border:1px solid rgba(255,201,60,.5); border-radius:var(--radius-panel);
  padding:clamp(28px,2.6vw,48px) clamp(24px,2.4vw,44px);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9);
}
.luh-hero__plinth img{ width:100%; height:auto; }
.luh-hero__infos{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.luh-hero__info{
  border:1px solid rgba(255,201,60,.45); border-radius:var(--radius-card);
  background:rgba(4,10,30,.5); padding:18px 20px;
}
.luh-hero__info-label{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.luh-hero__info-val{ font-family:var(--ff-display); font-weight:600; font-size:clamp(16px,1.25vw,19px);
  color:var(--cream-2); line-height:1.35; letter-spacing:.03em; }

/* ============================================================
   luh-countdown + marquee (one navy band, two jobs)
   ============================================================ */
.luh-countdown{ background:#020615; border-top:1px solid rgba(255,201,60,.3); position:relative; z-index:4; }
.luh-countdown__in{ display:flex; align-items:center; justify-content:center; gap:16px; padding-block:14px; flex-wrap:wrap; }
.luh-countdown__label{ font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); }
.luh-countdown__label strong{ color:var(--gold); font-weight:800; }
.luh-countdown__days{ display:inline-flex; align-items:center; margin-left:12px; padding:3px 12px;
  border:1px solid var(--gold); border-radius:3px; color:var(--gold); font-weight:800; font-size:12.5px;
  letter-spacing:.12em; }
.luh-marquee{ overflow:hidden; border-top:1px solid rgba(255,201,60,.15); background:rgba(4,10,30,.5); }
.luh-marquee__scroll{ display:flex; width:max-content; animation:marquee 36s linear infinite; }
.luh-marquee__scroll:has(> :only-child){ animation:none; }
.luh-marquee__track{ display:flex; gap:0; width:max-content; }
.luh-marquee li{ display:flex; align-items:center; gap:26px; padding:10px 26px 10px 0;
  font-family:var(--ff-display); font-weight:600; font-size:14px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(231,217,197,.75); white-space:nowrap; }
.luh-marquee li::after{ content:""; width:7px; height:7px; background:var(--bronze); transform:rotate(45deg); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   luh-events-rail (the storefront, cream after the rip)
   ============================================================ */
.luh-events-rail .rail-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px; margin:44px 0 30px;
}
/* Each weekly event is a TRADING CARD laid on the paper ground: lit gold/bronze
   edge (the hex shell recipe, never a flat border), rounded card corners, the
   day chip set top-right like a mana cost, the game as the type line, times in
   an inset rules box, and the fee as the bottom-right corner stat. One device,
   applied consistently. */
.ev{
  display:flex; flex-direction:column; gap:0; position:relative;
  background:linear-gradient(180deg,var(--gold-soft),var(--bronze));
  border-radius:13px; padding:24px 20px 58px;
  color:var(--cream); isolation:isolate;
  box-shadow:0 10px 26px -16px rgba(10,31,77,.55);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.ev::before{ /* the card plate inside the lit edge */
  content:""; position:absolute; inset:2.5px; z-index:-1; border-radius:11px;
  background:linear-gradient(180deg,rgba(14,40,86,.97),rgba(5,16,46,.99));
}
.ev:hover{ transform:translateY(-4px); box-shadow:0 18px 38px -18px rgba(255,201,60,.4); }
.ev.is-tilting{ transition:none; }
/* day pip = mana cost, top-right */
.ev__day{ position:absolute; top:12px; right:12px; z-index:2;
  width:54px; height:54px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 30% 25%,#123061,#081c48 70%);
  border:1.5px solid var(--bronze); box-shadow:inset 0 1px 0 rgba(255,216,107,.25);
  font-family:var(--ff-display); font-weight:700; font-size:14px; letter-spacing:.1em;
  color:var(--gold); }
.ev__day small{ display:block; font-family:var(--ff-body); font-weight:700; font-size:7.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(231,217,197,.6); margin-top:1px; }
.ev .ev__title{ font-family:var(--ff-display); font-weight:700; font-size:clamp(16px,1.25vw,19px);
  letter-spacing:.04em; text-transform:uppercase; color:var(--cream-2); line-height:1.25;
  padding-right:56px; min-height:52px; }
/* ART WINDOW - the big art box a real card puts between the title bar and the
   type line, the piece this rail was missing. Hex shell recipe at card scale:
   thin gold gradient rim, the EVENT's own 3:2 plate (assets/img/events/,
   generated per event: league table / duel rows / round commander table /
   rope+compass / rune circle) shown full frame inside it. The per-tone hex
   gradients stay underneath as the lazy-load fallback. The foil glare rides
   over it. */
.ev__art{ display:block; margin-top:14px; padding:1.5px;
  border-radius:var(--radius-panel);
  background:linear-gradient(180deg,var(--gold-soft),var(--bronze)); }
.ev__art img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  object-position:50% 50%; border-radius:calc(var(--radius-panel) - 1.5px);
  background:var(--navy-900); }
.ev-chip{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:11px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--cream-2); }
/* type line ON THE CARD ONLY: thin rule + tone diamond, the way a card
   separates art from rules (events.html rows share .ev-chip and must not
   inherit the rule) */
.ev .ev-chip{ display:flex; padding-top:10px; border-top:1px solid rgba(255,201,60,.3); }
.ev-chip::before{ content:""; width:7px; height:7px; flex:none; transform:rotate(45deg); background:var(--gold); }
.ev-chip--pokemon::before{ background:#f5be3c; }
.ev-chip--mtg::before{ background:#9a6ed2; }
.ev-chip--onepiece::before{ background:#f0963c; }
.ev-chip--riftbound::before{ background:#4e86d8; }
/* rules text box, slightly inset like a card's text box */
.ev__box{ margin-top:12px; padding:12px 14px; border-radius:7px;
  background:rgba(2,8,24,.5); border:1px solid rgba(255,201,60,.16); }
.ev__box .ev__meta:first-child{ margin-top:0; }
.ev__meta{ margin-top:8px; font-size:14px; line-height:1.55; color:var(--cream); opacity:.9; }
.ev__note{ margin-top:6px; font-size:13px; font-weight:700; letter-spacing:.06em; color:rgba(231,217,197,.8); }
/* fee = the corner stat, bottom-right on the frame */
.ev__fee{ position:absolute; right:12px; bottom:12px; z-index:2; margin:0;
  padding:5px 13px; border-radius:7px;
  background:linear-gradient(180deg,#0e2856,#081c48); border:1px solid var(--bronze);
  font-family:var(--ff-display); font-weight:700; font-size:15px;
  letter-spacing:.08em; color:var(--seat-open); }
.ev__fee--free{ color:var(--gold); }
.ev__cta{ margin-top:auto; padding-top:16px; }
.rail-foot{ text-align:center; max-width:860px; margin:0 auto 26px; font-size:14.5px; }

/* ============================================================
   luh-cards--hex (Pick your starter, navy)
   ============================================================ */
.hexrow{ display:flex; flex-wrap:nowrap; gap:22px; justify-content:center; align-items:stretch;
  margin:40px auto 34px; perspective:900px; max-width:1560px; }
.hex{ position:relative; flex:1 1 0; min-width:0; max-width:250px; aspect-ratio:210/360;
  clip-path:polygon(50% 0,100% 14%,100% 86%,50% 100%,0 86%,0 14%);
  background:linear-gradient(180deg,var(--gold-soft),var(--bronze));
  transition:transform .45s var(--ease); transform-style:preserve-3d; }
.hex__img{ position:absolute; inset:2.5px; overflow:hidden;
  clip-path:polygon(50% 0,100% 14%,100% 86%,50% 100%,0 86%,0 14%); background:var(--navy-900); }
.hex__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* per-category lit ground - the mockup's signature device, now carried by the
   generated tone plates (assets/img/hex/). These gradients stay as the
   pre-load / no-image fallback and are keyed to the same per-tone colour. */
[data-tone="pokemon"]  :is(.hex__img,.ev__art img){ background:radial-gradient(70% 46% at 50% 38%,rgba(245,190,60,.85),transparent 60%),linear-gradient(180deg,#7a5a1c,#4a3410 55%,#1c1206); }
[data-tone="mtg"]      :is(.hex__img,.ev__art img){ background:radial-gradient(70% 45% at 50% 34%,rgba(150,110,210,.70),transparent 62%),linear-gradient(180deg,#2a2550,#141033 55%,#0a0a1c); }
[data-tone="onepiece"] :is(.hex__img,.ev__art img){ background:radial-gradient(70% 45% at 50% 34%,rgba(240,150,60,.75),transparent 60%),linear-gradient(180deg,#6b3d18,#3a2410 55%,#160d06); }
[data-tone="riftbound"] :is(.hex__img,.ev__art img){ background:radial-gradient(70% 45% at 50% 34%,rgba(70,150,220,.70),transparent 62%),linear-gradient(180deg,#123a5c,#0b2138 55%,#050f1c); }
[data-tone="lorcana"]  .hex__img{ background:radial-gradient(70% 45% at 50% 34%,rgba(40,180,140,.65),transparent 62%),linear-gradient(180deg,#0d3b30,#07231d 55%,#03110e); }
[data-tone="fab"]      .hex__img{ background:radial-gradient(70% 45% at 50% 34%,rgba(200,40,50,.60),transparent 62%),linear-gradient(180deg,#3c1016,#22090d 55%,#0e0406); }
[data-tone="dnd"]      .hex__img{ background:radial-gradient(70% 45% at 50% 34%,rgba(190,60,45,.70),transparent 60%),linear-gradient(180deg,#4a1712,#2a0e0b 55%,#120605); }
[data-tone="mini"]     .hex__img{ background:radial-gradient(64% 42% at 50% 36%,rgba(180,165,150,.50),transparent 62%),linear-gradient(180deg,#39322b,#221d18 55%,#0d0b09); }
[data-tone="ultrapro"] .hex__img{ background:radial-gradient(40% 30% at 68% 40%,rgba(210,170,110,.50),transparent 60%),radial-gradient(30% 26% at 34% 46%,rgba(120,150,170,.40),transparent 62%),linear-gradient(180deg,#2b2a2e,#1a1a1f 55%,#0c0c10); }
/* the real brand mark rides ON TOP of the tone plate (asset-identity: marks are
   the canonical uploads, keyed or feather-cropped, never redrawn) */
.hex__logo{ position:absolute; left:0; right:0; top:39%; transform:translateY(-50%);
  z-index:2; display:flex; justify-content:center; padding:0 9%; pointer-events:none; }
.hex__logo img{ width:100%; height:auto; filter:drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
/* scene-embedded marks (feathered crops) melt in with screen so their own dark
   ground disappears into the tone plate */
[data-tone="mtg"] .hex__logo img,
[data-tone="onepiece"] .hex__logo img,
[data-tone="riftbound"] .hex__logo img{ mix-blend-mode:screen; filter:none; }
[data-tone="riftbound"] .hex__logo{ padding:0 2%; }
/* full-width feathered crops: oversize past the clip so the WORDMARK, not the
   feather margin, spans the panel */
[data-tone="mtg"] .hex__logo{ left:-32%; right:-32%; padding:0; }
[data-tone="onepiece"] .hex__logo{ left:-7%; right:-7%; padding:0; }
[data-tone="pokemon"] .hex__logo{ padding:0 11%; }
.hex:hover{ transform:translateY(-6px); }
.hex.is-tilting{ transition:none; }
.hex:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:4px; }
.hex__glare{ position:absolute; inset:2.5px; z-index:4; pointer-events:none; opacity:0;
  clip-path:polygon(50% 0,100% 14%,100% 86%,50% 100%,0 86%,0 14%);
  background:radial-gradient(60% 46% at var(--gx,50%) var(--gy,40%),rgba(255,236,190,.28),rgba(255,214,120,.08) 46%,transparent 70%);
  transition:opacity .3s var(--ease); mix-blend-mode:screen; }
.hex:hover .hex__glare{ opacity:1; }
.hex__cap{ position:absolute; left:0; right:0; bottom:0; z-index:3;
  /* the caption sits low, where the hex is already pinching toward its point, so the
     usable width there is far less than the tile's max. 10px of side padding let the
     gold sub-line ("TRADING CARD GAME", "LEGEND STORY STUDIOS") run into the angled
     edges. Percentage padding tracks the taper at every viewport. */
  padding:52px 13% 15%; text-align:center; display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(180deg,transparent,rgba(3,7,22,.94) 66%);
  clip-path:polygon(50% 0,100% 14%,100% 86%,50% 100%,0 86%,0 14%); }
.hex__name{ font-family:var(--ff-display); font-weight:700; font-size:clamp(15px,1.15vw,17px);
  letter-spacing:.04em; text-transform:uppercase; color:var(--cream-2); line-height:1.15; }
.hex__sub{ font-size:clamp(8px,.62vw,9.5px); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); line-height:1.25;
  max-width:100%; overflow-wrap:break-word; }

/* ============================================================
   luh-cards--plaques (the tabletop side; kin to the hexes, wide
   cut-corner plaques instead of diamonds - complementary, not a clone)
   ============================================================ */
.plaquerow{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin:40px auto 8px; max-width:1180px; }
.plaque{ position:relative; display:block; aspect-ratio:16/9;
  clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px);
  background:linear-gradient(180deg,var(--gold-soft),var(--bronze));
  transition:transform .45s var(--ease); }
.plaque__img{ position:absolute; inset:2.5px; overflow:hidden; background:var(--navy-900);
  clip-path:polygon(19px 0,calc(100% - 19px) 0,100% 19px,100% calc(100% - 19px),calc(100% - 19px) 100%,19px 100%,0 calc(100% - 19px),0 19px); }
.plaque__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 32%; }
.plaque__logo{ position:absolute; left:0; right:0; top:40%; transform:translateY(-50%);
  z-index:2; display:flex; justify-content:center; padding:0 25%; pointer-events:none; }
.plaque__logo img{ width:100%; height:auto; filter:drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
/* the pewter plate reads washed-out at the bloom band; crop lower where the
   bench and minis actually are */
[data-tone="mini"] .plaque__img img{ object-position:center 62%; }
.plaque__cap{ position:absolute; left:2.5px; right:2.5px; bottom:2.5px; z-index:3;
  padding:44px 20px 13px; text-align:center; display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(180deg,transparent,rgba(3,7,22,.94) 72%);
  /* the cap is a RECTANGLE over a cut-corner plaque: without this its square bottom
     corners paint over the gold edge and the border reads broken at the angled cut.
     Match the inner (.plaque__img) 19px cut on the bottom two corners only. */
  clip-path:polygon(0 0,100% 0,100% calc(100% - 19px),calc(100% - 19px) 100%,19px 100%,0 calc(100% - 19px)); }
.plaque__name{ font-family:var(--ff-display); font-weight:700; font-size:clamp(15px,1.15vw,17px);
  letter-spacing:.04em; text-transform:uppercase; color:var(--cream-2); line-height:1.15; }
.plaque__sub{ font-size:clamp(8.5px,.68vw,10.5px); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); }
.plaque:hover{ transform:translateY(-6px); }
.plaque:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:4px; }

/* ============================================================
   luh-cards--reassure (newbies) + generic q-cards
   ============================================================ */
.qgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; margin:44px 0 30px; }
.qcard{
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,252,242,.25));
  border:1px solid rgba(184,144,31,.45); border-radius:var(--radius-card); padding:24px 22px;
}
.qcard__tag{ font-size:11px; font-weight:800; letter-spacing:.18em; color:var(--bronze); }
.qcard__title{ font-family:var(--ff-display); font-weight:700; font-size:17px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--head-ink); margin-top:8px; line-height:1.3; }
.qcard__body{ margin-top:10px; font-size:14.5px; line-height:1.62; color:var(--body-ink); }
.qfoot{ text-align:center; font-size:15px; display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.qfoot .pill-link,
.qfoot a{
  display:inline-flex; padding:5px 14px; border:1px solid var(--bronze); border-radius:3px;
  font-weight:800; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-850);
  transition:all .2s var(--ease);
}
.qfoot .pill-link:hover,
.qfoot a:hover{ border-color:var(--gold-soft); color:var(--navy-900); background:rgba(255,184,0,.1); }

/* ============================================================
   luh-cta-band (upgrade / router / ask / close)
   ============================================================ */
.luh-cta-band{ background:radial-gradient(90% 70% at 50% 0%,#0a1f4d,#03081c 70%); text-align:center; }
.luh-cta-band .wrap{ max-width:900px; }
.luh-cta-band__body{ margin:18px auto 0; font-size:clamp(15px,1.15vw,17px); line-height:1.7; color:var(--cream); opacity:.92; }
.luh-cta-band__cta{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.luh-cta-band .sec-head{ justify-content:center; }
.ground-cream.luh-cta-band{ background:var(--paper); }
.ground-cream .luh-cta-band__body{ color:var(--body-ink); opacity:1; }

/* ============================================================
   luh-pitch (steps / story / rooms / buylist / reaper)
   ============================================================ */
.luh-pitch__grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(32px,4vw,72px); align-items:start; margin-top:8px; }
.luh-pitch__body{ margin-top:18px; font-size:clamp(15px,1.15vw,17px); line-height:1.72; color:var(--cream); opacity:.92; }
.ground-cream .luh-pitch__body{ color:var(--body-ink); opacity:1; }
.luh-pitch__body + .luh-pitch__body{ margin-top:14px; }
.luh-pitch__cta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:26px; }
.luh-pitch h2{ font-family:var(--ff-display); font-weight:700; font-size:var(--fs-h2); letter-spacing:.04em;
  text-transform:uppercase; color:var(--cream-2); line-height:1.18; margin-top:12px; }
.ground-cream .luh-pitch h2,.luh-pitch.ground-cream h2{ color:var(--head-ink); }
.steps{ display:flex; flex-direction:column; gap:16px; }
.step{
  display:flex; gap:18px; align-items:flex-start;
  background:linear-gradient(180deg,rgba(14,40,86,.7),rgba(6,19,54,.7));
  border:1px solid rgba(255,201,60,.4); border-radius:var(--radius-card); padding:20px 22px;
}
.ground-cream .step{ background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,252,242,.25));
  border-color:rgba(184,144,31,.45); }
.step__num{ font-family:var(--ff-display); font-weight:700; font-size:24px; color:var(--gold); line-height:1; }
.ground-cream .step__num{ color:var(--bronze); }
.step__title{ font-family:var(--ff-display); font-weight:700; font-size:16px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--cream-2); }
.ground-cream .step__title{ color:var(--head-ink); }
.step__desc{ margin-top:6px; font-size:14.5px; line-height:1.6; color:var(--cream); opacity:.9; }
.ground-cream .step__desc{ color:var(--body-ink); opacity:1; }
/* steps as a standalone 3-across band */
.steps--row{ flex-direction:row; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:44px; }

/* reaper patch card */
.patch{
  border:1px solid rgba(255,201,60,.5); border-radius:var(--radius-panel);
  background:rgba(4,10,30,.55); padding:28px 30px;
}
.patch__top{ font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.patch__num{ font-family:var(--ff-display); font-weight:700; font-size:clamp(42px,5.1vw,74px); color:var(--cream-2); line-height:1.05; }
.patch__num sup{ color:var(--gold); font-size:.55em; }
.patch__bot{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream); opacity:.75; }
.patch__lines{ margin-top:18px; border-top:1px solid rgba(255,201,60,.25); padding-top:14px;
  display:flex; flex-direction:column; gap:7px; }
.patch__lines li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--cream); }
.patch__lines li::before{ content:""; width:6px; height:6px; background:var(--gold); transform:rotate(45deg); flex:none; }
.patch__foot{ display:flex; justify-content:space-between; margin-top:18px; font-size:12px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); }
.ext-links{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }
.ext-link{
  display:flex; flex-direction:column; padding:12px 18px; border:1px solid rgba(255,201,60,.45);
  border-radius:var(--radius-card); background:rgba(4,10,30,.4); transition:border-color .2s var(--ease);
}
.ext-link:hover{ border-color:var(--gold); }
.ext-link__top{ font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.ext-link__bot{ font-family:var(--ff-display); font-weight:600; font-size:15px; color:var(--cream-2); letter-spacing:.03em; }

/* ============================================================
   luh-visit (3 tickets) + map panel
   ============================================================ */
.luh-visit__head{ text-align:center; }
.luh-visit__head h2{ font-family:var(--ff-display); font-weight:700; font-size:var(--fs-h2);
  letter-spacing:.05em; text-transform:uppercase; line-height:1.2; margin-top:12px; }
/* color comes from the ground system: cream-2 on navy, head-ink via .ground-cream h2 */
.luh-visit:not(.ground-cream) .luh-visit__head h2{ color:var(--cream-2); }
.tickets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; margin-top:44px; }
.ticket{
  background:linear-gradient(180deg,rgba(14,40,86,.97),rgba(6,19,54,.99));
  border:1px solid rgba(255,201,60,.5); border-radius:var(--radius-panel); padding:26px 26px 24px;
  color:var(--cream); display:flex; flex-direction:column;
}
.ticket__label{ font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.ticket__big{ font-family:var(--ff-display); font-weight:700; font-size:clamp(20px,1.7vw,26px);
  letter-spacing:.03em; color:var(--cream-2); margin-top:12px; line-height:1.2; }
.ticket__sub{ margin-top:4px; font-size:15px; opacity:.9; }
.ticket__note{ margin-top:10px; font-size:13.5px; opacity:.75; }
.ticket__cta{ margin-top:auto; padding-top:20px; }
.hours{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.hours__row{ display:flex; justify-content:space-between; gap:12px; font-size:14.5px;
  border-bottom:1px dashed rgba(255,201,60,.2); padding-bottom:6px; }
.hours__row:last-child{ border-bottom:0; }
.hours__day{ color:var(--cream); opacity:.85; }
.hours__val{ color:var(--cream-2); font-weight:700; }
.hours__row.is-off .hours__day{ opacity:.55; }
.hours__row.is-off .hours__val{ color:var(--gold); font-family:var(--ff-script); font-size:17px; font-weight:700; text-transform:none; }
.phone-big em{ color:var(--ember-lift); font-style:normal; }

.contact-visit-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:26px; margin-top:44px; align-items:start; }
.tickets--stack{ grid-template-columns:1fr; margin-top:0; }
@media (max-width:960px){ .contact-visit-grid{ grid-template-columns:1fr; } }

/* map panel (contact): real Google cartography in the existing navy/gold frame */
.mappanel{
  position:relative; border:1px solid rgba(255,201,60,.5); border-radius:var(--radius-panel);
  background:#03081c; overflow:hidden; min-height:420px; padding:0; display:grid;
  grid-template-columns:minmax(0,1fr); grid-template-rows:300px auto;
}
.mappanel__embed{ display:block; width:100%; height:300px; min-width:0; border:0; background:#03081c; }
.mappanel__card{ position:relative; z-index:2; width:100%; max-width:none; background:#03081c;
  border:0; border-top:1px solid rgba(255,201,60,.4); border-radius:0; padding:18px 22px; }
.mappanel__card strong{ color:var(--cream-2); font-family:var(--ff-display); letter-spacing:.04em; }
.mappanel__card p{ font-size:14px; color:var(--cream); margin-top:4px; }
@media (max-width:600px){
  .mappanel{ min-height:390px; grid-template-rows:270px auto; }
  .mappanel__embed{ height:270px; }
}

/* ============================================================
   luh-subscribe (capture / follow)
   ============================================================ */
.luh-subscribe{ background:linear-gradient(180deg,#07173e,#03081c); text-align:center; }
.luh-subscribe .wrap{ max-width:820px; }
.luh-subscribe__sub{ margin:16px auto 0; font-size:clamp(15px,1.15vw,17px); line-height:1.7; opacity:.9; }
.luh-subscribe form{ margin:28px auto 0; max-width:520px; }
.luh-subscribe .luh-capture__row{ justify-content:center; }
.divider{ display:flex; align-items:center; gap:18px; margin:34px auto 22px; max-width:520px; }
.divider::before,.divider::after{ content:""; flex:1; height:1.5px;
  background:linear-gradient(90deg,transparent,var(--bronze)); }
.divider::after{ background:linear-gradient(90deg,var(--bronze),transparent); }
.divider span{ font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); }
.socials-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.social-card{
  display:flex; flex-direction:column; align-items:flex-start; padding:12px 18px; min-width:150px;
  border:1px solid rgba(255,201,60,.4); border-radius:var(--radius-card); background:rgba(4,10,30,.5);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.social-card:hover{ border-color:var(--gold); transform:translateY(-3px); }
.social-card__name{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.social-card__handle{ font-size:14px; color:var(--cream); margin-top:2px; }

/* ============================================================
   luh-hero--sub (inner heroes) + breadcrumb + launch card
   ============================================================ */
.luh-subhero{ position:relative; background:linear-gradient(180deg,#0a1f4d 0%,#061336 55%,#03081c 100%); }
.luh-subhero .wrap{ max-width:1100px; }
.crumb{ display:flex; align-items:center; gap:10px; font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:26px; }
.crumb a{ color:var(--gold); font-weight:700; transition:color .18s var(--ease); }
.crumb a:hover{ color:var(--gold-bright); }
.crumb__sep{ width:6px; height:6px; background:var(--bronze); transform:rotate(45deg); }
.crumb__cur{ color:var(--cream); opacity:.75; font-weight:600; }
.luh-subhero h1{ font-family:var(--ff-display); font-weight:700; font-size:clamp(24px,3.05vw,44px);
  letter-spacing:.03em; text-transform:uppercase; color:var(--cream-2); line-height:1.12; margin-top:14px; }
.luh-subhero__lede{ margin-top:20px; font-size:clamp(16px,1.25vw,19px); line-height:1.7; color:var(--cream);
  opacity:.92; max-width:780px; }
.luh-subhero__pills{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.luh-subhero__pills .pill{ border-color:rgba(255,201,60,.55); }
.launchcard{
  margin-top:30px; display:inline-flex; align-items:flex-start; gap:14px;
  border:1px solid rgba(255,201,60,.5); border-radius:var(--radius-card);
  background:rgba(4,10,30,.55); padding:16px 20px; max-width:640px;
}
.launchcard__star{ color:var(--gold); font-size:18px; line-height:1.3; }
.launchcard__title{ font-family:var(--ff-display); font-weight:700; font-size:15px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); }
.launchcard__sub{ font-size:14px; color:var(--cream); opacity:.9; margin-top:4px; }
.launchcard__sub a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

/* events page corner d20 + topo rings */
.has-d20{ position:relative; }
.events-d20{ position:absolute; top:6px; right:2%; z-index:2; opacity:.16; cursor:pointer; user-select:none; }
.events-d20 svg{ width:200px; height:200px; fill:none; stroke:var(--gold); stroke-width:1; }
.events-d20.rolling svg{ animation:d20spin 1.1s cubic-bezier(.3,.7,.2,1); }
@keyframes d20spin{ from{ transform:rotate(0); } to{ transform:rotate(720deg); } }
.events-d20 .d20num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-weight:700; font-size:56px; color:var(--gold);
  text-shadow:0 0 22px rgba(255,201,60,.65); opacity:0; transition:opacity .35s var(--ease); }
.events-d20.rolled{ opacity:.85; }
.events-d20.rolled .d20num{ opacity:1; }
.events-d20.nat20 svg{ stroke:var(--gold-bright); filter:drop-shadow(0 0 14px rgba(255,201,60,.8)); }
.has-topo{ position:relative; }
.has-topo::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-radial-gradient(circle at 4% 108%,transparent 0 64px,rgba(255,201,60,.05) 64px 65px);
  -webkit-mask-image:radial-gradient(55% 70% at 6% 100%,#000,transparent 70%);
  mask-image:radial-gradient(55% 70% at 6% 100%,#000,transparent 70%);
}
.has-topo > .wrap{ position:relative; z-index:1; }

/* ============================================================
   luh-filter (chips)
   ============================================================ */
.luh-filter .wrap{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 20px; border-radius:3px;
  border:1.5px solid var(--bronze); background:transparent; color:var(--cream);
  font-family:var(--ff-body); font-weight:700; font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; cursor:pointer; transition:all .2s var(--ease);
}
.chip:hover{ border-color:var(--gold); color:var(--gold-bright); }
.chip.is-active{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#04091e; border-color:var(--gold);
}
.ground-cream .chip{ color:var(--navy-850); }
.ground-cream .chip:hover{ color:var(--navy-900); }
.ground-cream .chip.is-active{ color:#04091e; }

/* ============================================================
   luh-events-list (weekly / monthly rows)
   ============================================================ */
.evrows{ display:flex; flex-direction:column; gap:18px; margin-top:44px; }
.evrow{
  display:grid; grid-template-columns:130px 1.6fr 1fr auto; gap:24px; align-items:center;
  border:1px solid rgba(184,144,31,.5); border-radius:var(--radius-card);
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,252,242,.3)); padding:22px 26px;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.evrow:hover{ border-color:var(--gold-soft); transform:translateY(-2px); }
.evrow__day{ text-align:center; }
.evrow__day-name{ font-family:var(--ff-display); font-weight:700; font-size:clamp(20px,1.7vw,26px);
  letter-spacing:.08em; color:var(--navy-900); display:block; }
.evrow__day-freq{ font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze); }
.evrow__name{ font-family:var(--ff-display); font-weight:700; font-size:clamp(17px,1.35vw,21px);
  letter-spacing:.03em; text-transform:uppercase; color:var(--head-ink); line-height:1.25; }
.evrow__format{ margin-top:8px; font-size:14px; line-height:1.6; color:var(--body-ink); }
.evrow__time{ font-weight:800; font-size:14.5px; color:var(--navy-850); letter-spacing:.04em; }
.evrow__extras{ margin-top:6px; font-size:13px; color:var(--body-ink); opacity:.85; }
.evrow__book{ text-align:right; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.evrow__fee{ font-family:var(--ff-display); font-weight:700; font-size:18px; color:var(--bronze); letter-spacing:.05em; }
.evrow__note{ font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--bronze); }
/* chips inherit cream text; on the cream weekly rows that was invisible
   (pre-existing run-1 bug, caught in the run-2 eyeball pass) */
.ground-cream .evrow .ev-chip{ color:var(--navy-850); }
/* dark variant (monthly band) */
.luh-events-list--dark{ background:radial-gradient(90% 70% at 50% 0%,#0a1f4d,#03081c 70%); color:var(--cream); }
.luh-events-list--dark .evrow{ background:linear-gradient(180deg,rgba(14,40,86,.7),rgba(6,19,54,.7));
  border-color:rgba(255,201,60,.45); }
.luh-events-list--dark .evrow:hover{ border-color:var(--gold); }
.luh-events-list--dark .evrow__day-name{ color:var(--cream-2); }
.luh-events-list--dark .evrow__day-freq{ color:var(--gold); }
.luh-events-list--dark .evrow__name{ color:var(--cream-2); }
.luh-events-list--dark .evrow__format,.luh-events-list--dark .evrow__extras{ color:var(--cream); }
.luh-events-list--dark .evrow__time{ color:var(--gold-bright); }
.luh-events-list--dark .evrow__fee,.luh-events-list--dark .evrow__note{ color:var(--gold); }
.evrows__empty{ text-align:center; padding:30px 0 6px; font-size:15px; opacity:.8; }

/* ============================================================
   luh-tiers (membership cards) + tabs
   ============================================================ */
.tier-tabs{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:40px; }
.tiergrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; margin-top:40px; }
.tier{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0e2856,#061336 70%,#03081c);
  border:1px solid rgba(255,201,60,.45); border-radius:var(--radius-panel);
  padding:28px 26px 26px; color:var(--cream);
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tier:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -20px rgba(0,0,0,.8); }
.tier.is-popular{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 18px 44px -22px rgba(255,201,60,.35); }
.tier.is-vip{
  border:1.5px solid transparent;
  background:
    linear-gradient(180deg,#0e2856,#061336 70%,#03081c) padding-box,
    linear-gradient(160deg,var(--gold-bright),var(--bronze) 55%,var(--gold-soft)) border-box;
}
.tier__flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  padding:4px 16px; border-radius:3px; white-space:nowrap;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#04091e;
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
/* The tier mark is a bundled bespoke SVG from assets/icons/luh-icon-catalog.json, not a
   generic lozenge. Catalog convention: viewBox 0 0 80 80, art fills the box. */
.tier__ball{ display:block; width:42px; height:42px; margin-bottom:14px; line-height:0;
  /* catalog SVGs fill their 80x80 viewBox as flat rects on purpose ("no padding around
     the artwork") - the ROUND is CSS. Without this they read as squares. */
  border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 2px rgba(0,0,0,.55), 0 3px 9px rgba(0,0,0,.5); }
.tier__ball svg{ width:100%; height:100%; display:block; }
.tier .tier__name{ font-family:var(--ff-display); font-weight:700; font-size:clamp(20px,1.7vw,26px);
  letter-spacing:.05em; text-transform:uppercase; color:var(--cream-2); line-height:1.15; }
/* navy cards keep light chrome even on a cream ground */
.tier .btn--ghost{ color:var(--cream); border-color:var(--bronze); }
.tier .btn--ghost:hover{ color:var(--gold-bright); border-color:var(--gold); background:rgba(255,201,60,.06); }
.tier__subtag{ margin-top:6px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.tier__tag{ margin-top:10px; font-size:14px; line-height:1.55; opacity:.88; }
.tier__price{ display:flex; align-items:baseline; gap:8px; margin-top:18px; }
.tier__price-num{ font-family:var(--ff-display); font-weight:700; font-size:clamp(28px,3vw,42px); color:var(--gold); }
.tier__price-per{ font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.7; }
.tier__seat{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-size:12px;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.tier__seat svg{ width:16px; height:16px; fill:var(--gold); }
.tier__welcome{ margin-top:14px; font-size:13.5px; border-top:1px solid rgba(255,201,60,.25);
  padding-top:14px; color:var(--gold-bright); }
.tier__features{ margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.tier__features li{ position:relative; padding-left:20px; font-size:14px; line-height:1.55; color:var(--cream); }
.tier__features li::before{ content:""; position:absolute; left:2px; top:9px; width:6px; height:6px;
  background:var(--gold); transform:rotate(45deg); }
.tier__cta{ margin-top:auto; padding-top:22px; display:flex; flex-direction:column; gap:10px; }
.tier__cta .btn{ width:100%; }
/* foil glare on VIP tiers + grail ladder card (pointer-tracked, like the hexes).
   NO overflow:hidden here: it clips the -13px flag banners; the glare clips itself
   via border-radius:inherit instead. */
.foil{ position:relative; }
.foil__glare{ position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; border-radius:inherit;
  background:radial-gradient(60% 46% at var(--gx,50%) var(--gy,40%),rgba(255,236,190,.26),rgba(255,214,120,.08) 46%,transparent 70%);
  transition:opacity .3s var(--ease); mix-blend-mode:screen; }
.foil:hover .foil__glare{ opacity:1; }

/* ============================================================
   luh-points-table
   ============================================================ */
.pts-table{ width:100%; border-collapse:collapse; margin-top:40px;
  border:1px solid rgba(255,201,60,.4); border-radius:var(--radius-card); overflow:hidden; }
.pts-table th,.pts-table td{ padding:16px 20px; text-align:left; font-size:14.5px;
  border-bottom:1px solid rgba(255,201,60,.18); }
.pts-table thead th{ font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); background:rgba(4,10,30,.6); }
.pts-table tbody th{ font-weight:700; color:var(--cream-2); }
.pts-table tbody th small{ display:block; font-weight:600; font-size:12px; color:var(--cream); opacity:.65; letter-spacing:.04em; }
.pts-table td{ color:var(--cream); }
.pts-table td small{ display:block; font-size:12px; opacity:.65; }
.pts-table tr.is-featured{ background:rgba(255,201,60,.08); }
.pts-table tr.is-featured td,.pts-table tr.is-featured th{ color:var(--gold-bright); }
.pts-table td.master-span{ font-style:normal; color:var(--gold); font-weight:700; }

/* ============================================================
   luh-ladder (points / pricing / rooms)
   ============================================================ */
.laddergrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; margin-top:44px; }
.rung{
  position:relative; display:flex; flex-direction:column; text-align:center;
  border:1px solid rgba(255,201,60,.45); border-radius:var(--radius-card);
  background:linear-gradient(180deg,rgba(14,40,86,.85),rgba(6,19,54,.9)); padding:30px 22px 24px;
  color:var(--cream);
  transition:transform .22s var(--ease), border-color .22s var(--ease);
}
.rung:hover{ transform:translateY(-4px); border-color:var(--gold); }
.ground-cream .rung{ background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,252,242,.3));
  border-color:rgba(184,144,31,.5); color:var(--body-ink); }
.rung.is-grail{
  border:1.5px solid transparent;
  background:
    linear-gradient(180deg,#0e2856,#061336 75%) padding-box,
    linear-gradient(160deg,var(--gold-bright),var(--bronze) 55%,var(--gold-soft)) border-box;
  color:var(--cream);
}
.rung__flag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:4px 14px;
  border-radius:3px; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#04091e;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.rung__big{ font-family:var(--ff-display); font-weight:700; font-size:clamp(28px,3vw,42px);
  color:var(--gold); line-height:1.05; }
.ground-cream .rung__big{ color:var(--bronze); }
.rung.is-grail .rung__big{ color:var(--gold-bright); }
.rung__sub{ font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  opacity:.7; margin-top:4px; }
.rung__label{ margin-top:14px; font-size:14.5px; line-height:1.55; }
.rung__value{ margin-top:10px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); }
.ground-cream .rung__value{ color:var(--bronze); }
.rung.is-grail .rung__value{ color:var(--gold); }

/* ============================================================
   luh-rates (two ways to earn)
   ============================================================ */
.rates{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; margin-top:44px; }
.rate{
  text-align:center; border:1px solid rgba(255,201,60,.45); border-radius:var(--radius-panel);
  background:linear-gradient(180deg,rgba(14,40,86,.75),rgba(6,19,54,.8)); padding:36px 26px;
}
.rate__num{ font-family:var(--ff-display); font-weight:700; font-size:clamp(42px,5.1vw,74px);
  color:var(--gold); line-height:1; }
.rate__num sub{ font-size:.35em; letter-spacing:.1em; text-transform:uppercase; vertical-align:baseline; }
.rate__label{ font-family:var(--ff-display); font-weight:700; font-size:17px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--cream-2); margin-top:12px; }
.rate__note{ margin-top:10px; font-size:14px; opacity:.85; max-width:360px; margin-inline:auto; }
.upgrade-line{ text-align:center; margin-top:30px; font-size:15.5px; }
.upgrade-line a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.upgrade-line a:hover{ color:var(--gold-bright); }

/* ============================================================
   luh-faq (native details accordion)
   ============================================================ */
.faq-list{ max-width:860px; margin:40px auto 0; display:flex; flex-direction:column; gap:14px; }
.faq{
  border:1px solid rgba(184,144,31,.5); border-radius:var(--radius-card);
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,252,242,.3));
}
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:18px 22px; font-family:var(--ff-display); font-weight:700; font-size:16px;
  letter-spacing:.03em; color:var(--head-ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq__diamond{ width:9px; height:9px; background:var(--bronze); transform:rotate(45deg);
  transition:transform .25s var(--ease), background .25s var(--ease); flex:none; }
.faq[open] .faq__diamond{ transform:rotate(90deg) scale(1.15); background:var(--gold-soft); }
.faq__a{ padding:0 22px 20px; font-size:14.5px; line-height:1.65; color:var(--body-ink); }
.faq__a ul{ padding-left:20px; list-style:disc; margin:8px 0; }
.faq__a p{ margin-top:8px; }
.faq__a p:first-child{ margin-top:0; }
/* dark-ground faq (rewards page) */
.faq-dark .faq{ background:linear-gradient(180deg,rgba(14,40,86,.7),rgba(6,19,54,.7)); border-color:rgba(255,201,60,.4); }
.faq-dark .faq summary{ color:var(--cream-2); }
.faq-dark .faq__a{ color:var(--cream); }
.faq-dark .faq__diamond{ background:var(--gold); }

/* ============================================================
   luh-callout (tldr / fineprint / othertcgs)
   ============================================================ */
.luh-callout__box{
  max-width:860px; margin:0 auto;
  border:1.5px solid var(--gold-soft); border-radius:var(--radius-panel);
  background:linear-gradient(180deg,#fffcf2,rgba(255,252,242,.6)); padding:30px 34px;
}
.luh-callout__kicker{ font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bronze); margin-bottom:10px; }
.luh-callout__label{ font-family:var(--ff-display); font-weight:700; font-size:18px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--head-ink); }
.luh-callout__body{ margin-top:12px; font-size:15px; line-height:1.7; color:var(--body-ink); }
.fineprint{ max-width:1100px; margin:0 auto; }
.fineprint__items{ margin-top:20px; columns:2; column-gap:34px; }
.fineprint__items li{ break-inside:avoid; margin-bottom:16px; font-size:14px; line-height:1.65; color:var(--body-ink); }
.tcg-chips{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:26px; }
.tcg-chip{ display:inline-flex; align-items:center; gap:10px; padding:10px 18px;
  border:1px solid rgba(184,144,31,.55); border-radius:3px;
  font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-850); }
.tcg-chip__badge{ font-size:10px; padding:3px 8px; border-radius:2px; letter-spacing:.12em;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#04091e; }
.tcg-chip__badge--soon{ background:transparent; border:1px solid var(--bronze); color:var(--bronze); }

/* strip (sub-close) */
.strip{ text-align:center; font-family:var(--ff-display); font-weight:600; font-size:clamp(15px,1.15vw,17px);
  letter-spacing:.1em; text-transform:uppercase; color:var(--cream-2); }
.strip .dot{ color:var(--gold); padding:0 10px; }

/* ============================================================
   luh-form (contact / sell / party / rewards)
   ============================================================ */
.luh-form .wrap{ max-width:860px; }
.formcard{
  border:1px solid rgba(255,201,60,.45); border-radius:var(--radius-panel);
  background:linear-gradient(180deg,rgba(14,40,86,.75),rgba(6,19,54,.85)); padding:36px 38px;
  margin-top:36px;
}
.ground-cream .formcard{ background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,252,242,.35));
  border-color:rgba(184,144,31,.55); }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.ffield{ display:flex; flex-direction:column; gap:7px; }
.ffield--full{ grid-column:1 / -1; }
.ffield label{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.ground-cream .ffield label{ color:var(--bronze); }
.ffield label .req{ color:var(--ember-lift); }
.ground-cream .ffield label .req{ color:var(--ember); }
.ffield input,.ffield select,.ffield textarea{
  background:rgba(4,10,30,.6); border:1px solid rgba(255,201,60,.45); border-radius:4px;
  color:var(--cream); font-family:var(--ff-body); font-size:15px; padding:12px 14px;
  transition:border-color .2s var(--ease); width:100%;
}
.ground-cream .ffield input,.ground-cream .ffield select,.ground-cream .ffield textarea{
  background:#fffcf2; border-color:rgba(184,144,31,.55); color:var(--navy-900);
}
.ffield input:focus,.ffield select:focus,.ffield textarea:focus{ outline:none; border-color:var(--gold); }
.ffield textarea{ min-height:130px; resize:vertical; }
.fcheck{ display:flex; align-items:flex-start; gap:12px; grid-column:1 / -1; font-size:14px; line-height:1.55; }
.fcheck input{ width:18px; height:18px; margin-top:2px; accent-color:var(--gold); flex:none; }
.fcheck a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.ground-cream .fcheck a{ color:var(--bronze); }
.fsubmit{ grid-column:1 / -1; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px; }
.fnote{ font-size:13px; opacity:.75; }
.fsuccess{ text-align:center; padding:26px 10px 6px; }
.fsuccess__eyebrow{ font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.fsuccess h3{ font-family:var(--ff-display); font-weight:700; font-size:26px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--cream-2); margin-top:10px; }
.ground-cream .fsuccess h3{ color:var(--head-ink); }
.fsuccess p{ margin:14px auto 0; max-width:560px; font-size:15px; line-height:1.65; }
.fsuccess__cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:24px; }

/* Provider-backed Smile wallet handoff. The destination remains provider-owned. */
.luh-smile-wallet .wrap{ max-width:960px; }
.luh-smile-wallet__card{ display:grid; gap:22px; }
.luh-smile-wallet__actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; width:min(100%,720px); margin:0 auto; }
.luh-smile-wallet__path{ display:grid; grid-template-rows:auto 1fr; gap:8px; min-width:0; }
.luh-smile-wallet__path p{ margin:0; color:var(--cream-2); font-size:13px; font-weight:800; letter-spacing:.03em; text-align:center; }
.luh-smile-wallet__actions .btn{ width:100%; min-width:0; max-width:100%; min-height:48px; }
.luh-smile-wallet__note,.luh-smile-wallet__setup{ margin:0 auto; max-width:700px; color:var(--cream); font-size:14px; line-height:1.55; text-align:center; opacity:.86; }

@media (max-width:760px){
  .luh-smile-wallet__card{ gap:24px; padding:28px 22px; }
  .luh-smile-wallet__actions{ grid-template-columns:minmax(0,1fr); width:100%; }
  .luh-smile-wallet__actions .btn{ padding-inline:18px; white-space:normal; }
}

/* ============================================================
   luh-prose (legal) + sticky TOC
   ============================================================ */
.luh-prose .wrap{ max-width:1100px; display:grid; grid-template-columns:240px 1fr; gap:clamp(32px,4vw,64px);
  align-items:start; }
.toc{ position:sticky; top:110px; border-left:2px solid rgba(184,144,31,.4); padding-left:20px; }
.toc__label{ font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bronze); margin-bottom:12px; }
.toc a{ display:block; padding:5px 0; font-size:13.5px; color:var(--body-ink); transition:color .18s var(--ease); }
.toc a:hover{ color:var(--navy-900); text-decoration:underline; text-underline-offset:3px; }
.prose{ max-width:var(--wrap-prose); }
.prose section + section{ margin-top:44px; }
.prose h2{ font-family:var(--ff-display); font-weight:700; font-size:clamp(17px,1.35vw,21px);
  letter-spacing:.04em; text-transform:uppercase; color:var(--head-ink);
  padding-bottom:10px; border-bottom:1.5px solid rgba(184,144,31,.4); margin-bottom:16px; }
.prose p{ margin-top:12px; font-size:15px; line-height:1.75; color:var(--body-ink); }
.prose ul{ margin:12px 0 0 20px; list-style:disc; }
.prose li{ margin-top:8px; font-size:15px; line-height:1.7; color:var(--body-ink); }
.prose a{ color:var(--bronze); text-decoration:underline; text-underline-offset:3px; }
.prose strong{ color:var(--navy-900); }
.prv-contact__note{ font-size:13.5px; opacity:.8; }

/* ============================================================
   luh-thanks (nat-20 card)
   ============================================================ */
.luh-thanks{ min-height:calc(100vh - 220px); display:flex; align-items:center;
  background:radial-gradient(90% 70% at 50% 10%,#0a1f4d,#03081c 75%); }
.thanks-card{
  max-width:620px; margin:0 auto; text-align:center;
  border:1px solid rgba(255,201,60,.5); border-radius:var(--radius-panel);
  background:rgba(4,10,30,.55); padding:52px 44px;
}
.thanks-card .events-d20{ position:static; opacity:1; cursor:default; display:inline-block; }
.thanks-card .events-d20 svg{ width:110px; height:110px; stroke:var(--gold-bright);
  filter:drop-shadow(0 0 14px rgba(255,201,60,.8)); }
.thanks-card .d20num-static{ position:relative; display:block; margin-top:-78px; margin-bottom:34px;
  font-family:var(--ff-display); font-weight:700; font-size:34px; color:var(--gold);
  text-shadow:0 0 22px rgba(255,201,60,.65); }
.thanks-card h1{ font-family:var(--ff-display); font-weight:700; font-size:clamp(28px,3vw,42px);
  letter-spacing:.05em; text-transform:uppercase; color:var(--cream-2); margin-top:8px; }
.thanks-card p{ margin-top:16px; font-size:15.5px; line-height:1.7; color:var(--cream); opacity:.92; }
.thanks-card .luh-cta-band__cta{ margin-top:30px; }

/* ============================================================
   shop collections grid (Phase A)
   ============================================================ */
.colgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:26px; margin-top:44px; }
.colcard{
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,#0e2856,#061336 75%,#03081c);
  border:1px solid rgba(255,201,60,.45); border-radius:var(--radius-panel); color:var(--cream);
  transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.colcard:hover{ transform:translateY(-5px); border-color:var(--gold); box-shadow:0 18px 44px -22px rgba(255,201,60,.3); }
.colcard__img{ aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid rgba(255,201,60,.35); }
.colcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.colcard:hover .colcard__img img{ transform:scale(1.04); }
.colcard__body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.colcard__tier{ font-size:10.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.colcard__name{ font-family:var(--ff-display); font-weight:700; font-size:clamp(17px,1.35vw,21px);
  letter-spacing:.04em; text-transform:uppercase; color:var(--cream-2); margin-top:8px; }
.colcard__desc{ margin-top:12px; font-size:14px; line-height:1.62; opacity:.9; }
.colcard__go{ margin-top:auto; padding-top:18px; font-size:12.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:8px; }
.colcard__go::after{ content:""; width:7px; height:7px; border-top:2px solid var(--gold);
  border-right:2px solid var(--gold); transform:rotate(45deg); }
.pickup-band{ text-align:center; }
.pickup-band__line{ max-width:760px; margin:16px auto 0; font-size:clamp(17px,1.35vw,21px);
  line-height:1.65; font-family:var(--ff-display); color:var(--cream-2); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:#03081c; border-top:1px solid rgba(255,201,60,.5); padding:52px 0 0; }
.footer__grid{ display:grid; grid-template-columns:1.4fr repeat(3,.85fr) 1.25fr; gap:34px; padding-bottom:40px; }
.footer__logo img{ height:56px; width:auto; }
.footer__tag{ margin-top:16px; font-size:14px; color:var(--cream); opacity:.8; max-width:300px; line-height:1.6; }
.footer__note{ margin-top:10px; font-size:12.5px; color:var(--cream); opacity:.55; max-width:300px; }
.socials{ display:flex; gap:14px; margin-top:20px; }
.socials a{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.16); transition:all .2s var(--ease); }
.socials svg{ width:19px; height:19px; fill:#fff; }
.socials a:hover{ border-color:var(--gold); background:rgba(255,201,60,.12); }
/* Clyde is a wide mark: 24 units across against roughly 18.6 tall, where the other four
   marks are near square. Rendered at the shared 19px it reads noticeably heavier than its
   neighbours, so it is set to 18px and the row reads as one set. Nothing else changes. */
.socials a[data-social="discord"] svg{ width:18px; height:18px; }
.footer__col h4,.footer__col .footer__heading{ font-family:var(--ff-body); font-weight:800; font-size:15px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--cream-2); margin-bottom:16px; }
.footer__col a{ display:block; color:var(--cream); opacity:.82; font-size:15px; padding:5px 0;
  transition:color .18s var(--ease),opacity .18s; }
.footer__col a:hover{ color:var(--gold-bright); opacity:1; }
.footer__hours table{ border-collapse:collapse; font-size:14.5px; }
.footer__hours th{ text-align:left; font-weight:400; color:var(--cream); opacity:.82; padding:3px 26px 3px 0; }
.footer__hours td{ color:var(--cream); opacity:.9; white-space:nowrap; }
.footer__hours tr.is-off td{ color:var(--gold); font-family:var(--ff-script); font-size:16px; }
.footer__bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.08); padding-top:20px; padding-bottom:26px;
  font-size:13.5px; color:rgba(231,217,197,.6); }
.footer__legal{ display:flex; align-items:center; gap:14px; }
.footer__legal a{ transition:color .18s var(--ease); }
.footer__legal a:hover{ color:var(--gold-bright); }
.footer__legal i{ color:var(--bronze); font-style:normal; }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:var(--rvd,0s); }
.rv-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1366px){
  .nav__links{ gap:16px; }
  .nav__search{ min-width:180px; }
  .nav__cart{ min-width:48px; width:48px; padding:0; gap:0; }
  .nav__cart-label{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .nav__cart-count{ position:absolute; top:3px; right:2px; min-width:18px; height:18px; padding-inline:4px; font-size:10px; box-shadow:0 0 0 2px #0a2050; }
}
@media (max-width:1180px){
  .nav{ overflow:visible; }
  .nav__in{ position:relative; }
  .nav__search-toggle{ display:inline-flex; }
  .nav__search{
    position:absolute; top:calc(100% + 8px); right:var(--pad); z-index:75;
    display:flex; width:min(48rem,calc(100% - (2 * var(--pad)))); min-width:0;
    margin-left:0; background:#081a45; border-color:rgba(255,201,60,.78);
    box-shadow:0 24px 56px -18px rgba(0,0,0,.98),0 0 0 1px rgba(255,201,60,.12);
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-8px) scale(.985); transform-origin:top right;
    transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s .18s;
  }
  body.nav-search-open .nav{ z-index:90; }
  body.nav-search-open::after{
    content:""; position:fixed; inset:0; z-index:80; pointer-events:none;
    background:rgba(2,6,21,.72); backdrop-filter:blur(2px);
  }
  body.nav-search-open .nav__search{
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
    transition:opacity .18s var(--ease),transform .18s var(--ease);
  }
  body.nav-search-open .nav__search-toggle{
    background:rgba(255,201,60,.16); border-color:var(--gold-bright);
    color:var(--gold-bright);
  }
  .nav__search input{ min-height:48px; font-size:16px; }
  .nav__search button{ min-width:48px; min-height:48px; justify-content:center; }
}
@media (max-width:1180px){
  .nav__search{ min-width:180px; }
  .nav__links{ gap:16px; }
  .luh-hero__in{ grid-template-columns:1fr; }
  .luh-hero__aside{ max-width:560px; }
  .luh-pitch__grid{ grid-template-columns:1fr; }
  .evrow{ grid-template-columns:110px 1.4fr 1fr auto; gap:18px; }
  .fineprint__items{ columns:1; }
  /* six hexes can't hold a single row below ~1100: break into 3+3 */
  .hexrow{ flex-wrap:wrap; gap:22px 3%; }
  .hex{ flex:0 0 30%; }
  .plaquerow{ grid-template-columns:1fr; max-width:640px; }
  .plaque{ aspect-ratio:16/8; }
}
@media (max-width:1100px){
  :root{ --pad:26px; }
  .nav__burger{ display:flex; }
  .nav__cart{ width:44px; min-width:44px; min-height:40px; border-color:transparent; background:transparent; }
  .nav__cart:hover,.nav__cart:focus-visible{ background:rgba(255,201,60,.1); }
  .nav__links{
    position:fixed; inset:117px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:#081a45; border-bottom:1px solid rgba(255,201,60,.4);
    padding:8px 26px 22px; margin:0; transform:translateY(-140%); visibility:hidden;
    transition:transform .3s var(--ease), visibility 0s .3s;
    max-height:calc(100vh - 117px); overflow:auto; z-index:70;
  }
  body.nav-open .nav__links{ transform:translateY(0); visibility:visible; transition:transform .3s var(--ease); }
  body.nav-open .nav{ z-index:80; }
  .nav__links > a,.nav__drop > a{ padding:14px 2px; border-bottom:1px solid rgba(255,255,255,.06); width:100%; }
  .nav__drop{ width:100%; }
  .nav__menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0;
    background:transparent; padding:0 0 8px 12px; display:none; }
  .nav__menu.open{ display:flex; }
  .nav__links a.is-active::after,.nav__links > a::after,.nav__drop > a::after{ display:none; }
  .utilbar__left li:nth-child(2){ display:none; }
  /* phone: the hero image's bright zones sit behind the copy; deepen the scrim */
  .luh-hero__scrim{ background:linear-gradient(180deg,rgba(3,8,28,.9) 0%,rgba(3,8,28,.78) 55%,rgba(3,8,28,.55) 100%); }
  .events-d20 svg{ width:140px; height:140px; }
  .events-d20 .d20num{ font-size:40px; }
  .evrow{ grid-template-columns:1fr; gap:12px; text-align:left; }
  .evrow__day{ text-align:left; display:flex; align-items:baseline; gap:12px; }
  .evrow__book{ align-items:flex-start; text-align:left; }
  .luh-prose .wrap{ grid-template-columns:1fr; }
  .toc{ position:static; border-left:0; padding-left:0; border-bottom:1.5px solid rgba(184,144,31,.4);
    padding-bottom:16px; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:620px){
  :root{ --pad:18px; --rip-w:780px; --rip-h:54px; }
  .luh-hero__in{ padding-top:44px; padding-bottom:64px; }
  .luh-hero__infos{ grid-template-columns:1fr; }
  .luh-capture__row{ flex-direction:column; }
  .luh-capture__row .btn{ width:100%; }
  .hexrow{ gap:16px 4%; }
  .hex{ flex:0 0 46%; min-width:0; }
  .sec-head{ gap:12px; flex-wrap:wrap; }
  .flourish{ width:44px; }
  .tickets{ grid-template-columns:1fr; }
  .rates{ grid-template-columns:1fr; }
  .laddergrid{ grid-template-columns:1fr; }
  .tiergrid{ grid-template-columns:1fr; }
  .colgrid{ grid-template-columns:1fr; }
  .qgrid{ grid-template-columns:1fr; }
  .fgrid{ grid-template-columns:1fr; }
  .ffield{ grid-column:1 / -1; }
  .pts-table{ display:block; overflow-x:auto; }
  .utilbar__left li:nth-child(3){ display:none; }
  .utilbar__in{ height:auto; padding-block:8px; gap:10px; flex-wrap:wrap; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bar{ flex-direction:column; text-align:center; }
  .luh-countdown__in{ flex-direction:column; gap:8px; text-align:center; }
  .steps--row{ grid-template-columns:1fr; }
  .luh-events-rail .rail-grid{ grid-template-columns:1fr; }
}
@media (max-width:400px){
  .luh-hero__title .row--big{ font-size:38px; }
  .hex{ flex:0 0 46%; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}


/* ---------- contrast by ground (the mockup's own rule) ----------
   Gold reads on navy; navy reads on cream. A gold button on a cream ground fades into
   it (#FFC93C on #ebe0cb is barely a step) - the mockup uses .btn--navy in its cream
   chapter for exactly this reason. Applied by ground so every page inherits it. */
.ground-cream .btn--gold{
  background:linear-gradient(180deg,#0e2856,#081c48);
  color:var(--cream-2); border-color:var(--bronze);
  box-shadow:0 8px 20px -10px rgba(10,31,77,.65);
}
.ground-cream .btn--gold:hover{
  background:linear-gradient(180deg,#123061,#0a2352);
  border-color:var(--gold); color:var(--gold-bright);
}
/* ghost buttons on cream need ink, not cream, or they vanish too */
.ground-cream .btn--ghost{ color:var(--head-ink); border-color:rgba(10,31,77,.45); }
.ground-cream .btn--ghost:hover{ color:#081c48; border-color:var(--head-ink); background:rgba(10,31,77,.06); }
/* Tier cards stay navy even when their containing chapter is cream. */
.ground-cream .tier .btn--ghost{ color:var(--cream); border-color:var(--bronze); }
.ground-cream .tier .btn--ghost:hover{ color:var(--gold-bright); border-color:var(--gold); background:rgba(255,201,60,.06); }

/* ---------- section separation ----------
   Chapters were reading as one long scroll. Give each ground change a real edge:
   a hairline + a soft inner lift at the navy->cream and cream->navy joins. */
.ground-cream + .ground-navy,
.ground-navy + .ground-cream,
.ground-cream + .cms-section-anchor + .ground-navy,
.ground-navy + .cms-section-anchor + .ground-cream{ position:relative; }
.ground-cream:not(.ripped){ box-shadow:inset 0 1px 0 rgba(10,31,77,.10), inset 0 -1px 0 rgba(10,31,77,.10); }

/* ---------- separating adjacent NAVY chapters ----------
   never-waitlisted / started-by-two-guys / cash-or-credit / texas-brand all sit on the
   same navy and ran together as one wall. Separate them the way the mockup does its
   dark stretch: a faint top glow-bleed + a hairline gold rule, so the eye gets a seam
   without a new colour band. Subtle on purpose - contrast, not decoration. */
.ground-navy + .ground-navy,
section:not([class*="ground-"]) + section:not([class*="ground-"]),
.ground-navy + .cms-section-anchor + .ground-navy,
section:not([class*="ground-"]) + .cms-section-anchor + section:not([class*="ground-"]),
section:not([class*="ground-"]) + .cms-section-anchor + script[type="application/ld+json"] + section:not([class*="ground-"]){
  position:relative;
}
.ground-navy + .ground-navy::before,
section:not([class*="ground-"]):not(.luh-hero) + section:not([class*="ground-"])::before,
.ground-navy + .cms-section-anchor + .ground-navy::before,
section:not([class*="ground-"]):not(.luh-hero) + .cms-section-anchor + section:not([class*="ground-"])::before,
section:not([class*="ground-"]):not(.luh-hero) + .cms-section-anchor + script[type="application/ld+json"] + section:not([class*="ground-"])::before{
  content:""; position:absolute; top:0; left:14%; right:14%; height:1.5px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bronze) 22%,var(--gold) 50%,var(--bronze) 78%,transparent);
  opacity:.55;
}
/* the mockup's dark-chapter pin: a small gold diamond centered on the seam
   (same device as .sec-edge, so the whole page speaks one language) */
.ground-navy + .ground-navy::after,
section:not([class*="ground-"]):not(.luh-hero) + section:not([class*="ground-"])::after,
.ground-navy + .cms-section-anchor + .ground-navy::after,
section:not([class*="ground-"]):not(.luh-hero) + .cms-section-anchor + section:not([class*="ground-"])::after,
section:not([class*="ground-"]):not(.luh-hero) + .cms-section-anchor + script[type="application/ld+json"] + section:not([class*="ground-"])::after{
  content:""; position:absolute; top:0; left:50%; width:9px; height:9px; pointer-events:none;
  background:var(--gold); transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 12px rgba(255,201,60,.55);
}

/* ============================================================
   ALT HERO VARIANT - rewritten after PIXEL-MEASURING the mockup
   (ALT-HERO-REFERENCE.png, 1672x941). Measured values, not guessed:
   - panel 452px = 27% of viewport (was ~34% = "way too wide")
   - buttons 46px tall; the two-button row ends flush with the capture row (~640px)
   - JOIN LIST is INTEGRATED in the input box: gold text, hairline left divider
   - text palette is COOL NEUTRAL: lede #bbb4b1, label #a09a98, note #858387,
     placeholder #7d787d - NOT the theme's warm cream (that read "heavy")
   - headline red body #dc4c37; gold button fill #ddac39 with navy text
   ============================================================ */
.luh-hero--alt .luh-hero__in{
  grid-template-columns:minmax(0,1fr) calc(clamp(392px,27vw,452px) + clamp(0px,6.6vw,110px));
  gap:clamp(36px,4.5vw,84px); align-items:start; }
/* the mockup's panel is 452px wide AND inset ~110px from the content edge (it reveals the
   minis). The column carries BOTH; the padding carves only the inset - so the panel itself
   measures the full clamp. (Earlier bug: padding carved the inset OUT of the panel.) */
.luh-hero--alt .luh-hero__aside{ padding-right:clamp(0px,6.6vw,110px); }
.luh-hero--alt .luh-hero__title{ line-height:1.12; }
.luh-hero--alt .luh-hero__title .row--big{ font-size:clamp(36px,3.65vw,70px); color:#f7f4ee; letter-spacing:.005em; }
.luh-hero--alt .luh-hero__title em{ color:#dc4c37; }
.luh-hero--alt .luh-hero__pill-after{ color:#c9c5c0; }
.luh-hero--alt .luh-hero__lede{ max-width:660px; font-weight:400;
  font-size:clamp(15.5px,1.05vw,18px); line-height:1.75; color:#bdb9b4; opacity:1; }

/* buttons: 46px tall, chevron + pin icons, row width == capture row width */
.luh-hero--alt .luh-hero__cta{ margin-top:28px; gap:18px; max-width:640px; }
.luh-hero--alt .luh-hero__cta .btn{ flex:1 1 0; padding:13px 18px; font-size:13.5px; letter-spacing:.13em;
  line-height:1.2; display:inline-flex; align-items:center; justify-content:center; gap:11px; }
.luh-hero--alt .btn__ico{ width:15px; height:15px; flex:none; }
.luh-hero--alt .btn--gold{ background:linear-gradient(180deg,#efbf4d,#d9a832); border-color:#d9a832; color:#03081c; }
.luh-hero--alt .btn--gold:hover{ background:linear-gradient(180deg,#f7cd66,#e3b23c); }
.luh-hero--alt .btn--ghost{ color:#d0c1a5; border-color:rgba(214,178,106,.55); }

/* capture: ONE row - [envelope label] [ input | JOIN LIST ] */
.luh-capture--inline{ margin-top:40px; max-width:640px; }
.luh-capture--inline .luh-capture__row{ display:flex; align-items:center; gap:16px; }
.luh-capture__inline-label{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:14.5px; font-weight:400; color:#a5a19b; letter-spacing:.01em; text-transform:none; }
.cap__ico{ width:17px; height:17px; color:#a5a19b; flex:none; }
.luh-capture__box{ flex:1 1 auto; display:flex; align-items:stretch; height:46px; min-width:0;
  border:1px solid rgba(210,182,110,.42); border-radius:6px; background:rgba(4,10,28,.55); overflow:hidden; }
.luh-capture__box input{ flex:1 1 auto; min-width:0; border:0; background:transparent; padding:0 14px;
  font-family:var(--ff-body); font-size:14.5px; color:#cfd3dc; }
.luh-capture__box input::placeholder{ color:#7d787d; }
.luh-capture__box input:focus{ outline:none; }
.luh-capture__box:focus-within{ border-color:rgba(240,200,110,.75); }
.luh-capture__join{ flex:none; border:0; background:transparent; cursor:pointer; padding:0 18px;
  font-family:var(--ff-body); font-weight:800; font-size:12.5px; letter-spacing:.15em; text-transform:uppercase;
  color:#c79a33; border-left:1px solid rgba(210,182,110,.28);
  transition:color .2s var(--ease), background .2s var(--ease); }
.luh-capture__join:hover{ color:#ffd86b; background:rgba(255,201,60,.06); }
.luh-capture--inline .luh-capture__note{ margin-top:12px; display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:#85888e; opacity:1; }
.note__ico{ width:12.5px; height:12.5px; color:#85888e; flex:none; }

/* the Opening Day panel: quiet glass, 27% column, cool hairline border */
.openday{ background:rgba(9,17,38,.42); border:1px solid rgba(196,206,228,.30);
  border-radius:14px; padding:26px 28px 26px;
  backdrop-filter:blur(13px); -webkit-backdrop-filter:blur(13px);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.7); }
.openday__ico{ width:19px; height:19px; color:#f0b73f; flex:none; }
.openday__ico--lg{ width:21px; height:21px; margin-top:3px; }
.openday__eyebrow{ display:flex; align-items:center; gap:10px; font-size:15.5px; font-weight:600;
  color:#f0b73f; letter-spacing:.01em; text-transform:none; }
.openday__date{ font-family:var(--ff-display); font-weight:700; font-size:clamp(26px,2.05vw,34px);
  color:#f4efe6; line-height:1.15; margin-top:8px; }
.openday__rule{ height:1px; margin:16px 0 18px;
  background:linear-gradient(90deg,rgba(240,200,110,.65),rgba(240,200,110,.12)); }
.openday__row{ display:flex; gap:13px; }
.openday__addr{ font-style:normal; display:flex; flex-direction:column; gap:1px; }
.openday__addr-line{ font-family:var(--ff-display); font-weight:600; font-size:18.5px; color:#eae5da; line-height:1.35; }
.openday__addr-note{ margin-top:5px; font-size:13.5px; font-style:italic; color:#98a0b2; }
.openday__hours{ margin-top:15px; display:flex; align-items:center; gap:12px;
  font-weight:700; font-size:15.5px; color:#e9e6df; }
.openday__eyebrow--list{ margin-top:26px; font-size:12px; font-weight:800; letter-spacing:.17em;
  text-transform:uppercase; color:#f0b73f; }
.openday__eyebrow--list::after{ content:""; flex:1 1 auto; height:1px; background:rgba(240,200,110,.25); }
.openday__events{ margin-top:14px; display:flex; flex-direction:column; gap:11px; }
.openday__events a{ display:flex; align-items:center; gap:13px; padding:14px 14px 14px 12px;
  border:1px solid rgba(230,205,140,.22); border-radius:10px; background:rgba(255,255,255,.03);
  transition:border-color .2s var(--ease), background .2s var(--ease); }
.openday__events a:hover{ border-color:rgba(255,201,60,.55); background:rgba(255,201,60,.05); }
.openday__ev-ico{ flex:none; width:38px; height:38px; border-radius:50%;
  border:1.5px solid rgba(255,201,60,.5); background:rgba(3,7,22,.55); display:grid; place-items:center; }
.openday__ev-ico svg{ width:20px; height:22px; fill:#f0b73f; }
.openday__ev-ico img{ width:24px; height:24px; display:block; }
.openday__ev-ico--star{ border-color:rgba(255,201,60,.85); }
.openday__ev-ico--star svg{ width:22px; height:22px; }
.openday__ev-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.openday__ev-name{ font-weight:700; font-size:15.5px; color:#e9e7ea; }
.openday__ev-meta{ font-size:12.5px; color:#98a0b5; }
.openday__ev-chev{ margin-left:auto; width:15px; height:15px; color:#f0b73f; flex:none; }

@media (max-width:960px){
  .luh-hero--alt .luh-hero__in{ grid-template-columns:1fr; }
  /* nowrap button text + flex:1 1 0 + the sheen's overflow:hidden CLIPS the label at
     phone widths ("SEE OPENING EVENTS" -> "OPENING EVENT"). Stack them full-width. */
  .luh-hero--alt .luh-hero__cta{ flex-direction:column; }
  .luh-hero--alt .luh-hero__cta .btn{ width:100%; flex:0 0 auto; }
  .luh-capture--inline .luh-capture__row{ flex-wrap:wrap; }
  .luh-capture__inline-label{ width:100%; }
  .luh-capture__box{ width:100%; }
}

/* filter fix: authored display beats [hidden] - re-assert for filterable rows */
.evrows [data-games][hidden]{ display:none !important; }

/* 2026-07 hero capture polish: make the opening-update form a single intentional card. */
.luh-hero--alt .luh-capture--inline{
  margin-top:22px;
  max-width:640px;
  padding:16px 18px 15px;
  border:1px solid rgba(204,184,132,.34);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(8,19,48,.82),rgba(4,11,30,.70));
  box-shadow:0 18px 34px -28px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.luh-capture--inline .luh-capture__head{ margin:0 0 12px; }
.luh-capture--inline .luh-capture__inline-label{
  display:flex;
  width:max-content;
  color:#efb943;
  font-size:12.5px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.luh-capture--inline .cap__ico{ width:17px; height:17px; color:#efb943; }
.luh-capture--inline .luh-capture__sub{
  margin:7px 0 0;
  color:#b9b8bb;
  font-size:13.5px;
  line-height:1.45;
  opacity:1;
}
.luh-capture--inline .luh-capture__box{
  width:100%;
  height:50px;
  border-color:rgba(210,182,110,.40);
  border-radius:6px;
  background:rgba(2,8,24,.64);
}
.luh-capture--inline .luh-capture__box input{
  padding:0 16px;
  font-size:14px;
}
.luh-capture--inline .luh-capture__join{
  min-width:148px;
  padding:0 20px;
  background:linear-gradient(180deg,#efbf4d,#d9a832);
  color:#071027;
  border-left:1px solid rgba(255,226,145,.26);
  font-size:12px;
  letter-spacing:.13em;
}
.luh-capture--inline .luh-capture__join:hover{
  color:#071027;
  background:linear-gradient(180deg,#f7cd66,#e3b23c);
}
.luh-capture--inline .luh-capture__note{
  margin-top:10px;
  font-size:11.5px;
  color:#92969f;
}
.luh-capture--inline .note__ico{ color:#9ba0aa; }
@media (max-width:560px){
  .luh-hero--alt .luh-capture--inline{ padding:15px; }
  .luh-capture--inline .luh-capture__box{ height:auto; flex-direction:column; overflow:visible; background:transparent; border:0; gap:8px; }
  .luh-capture--inline .luh-capture__box input{ min-height:48px; border:1px solid rgba(210,182,110,.40); border-radius:6px; background:rgba(2,8,24,.64); }
  .luh-capture--inline .luh-capture__join{ min-height:48px; border:0; border-radius:6px; }
}
.luh-capture--inline .luh-capture__sub{
  font-family:var(--ff-body);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}

/* 2026-07 alignment correction: keep the two hero panels visually grounded to the same baseline. */
@media (min-width:961px){
  .luh-hero--alt .luh-hero__aside{
    align-self:stretch;
  }
  .luh-hero--alt .openday{
    min-height:100%;
    display:flex;
    flex-direction:column;
  }
  .luh-hero--alt .openday__events{
    flex:1 1 auto;
  }
  .luh-hero--alt .openday__events li{
    display:flex;
  }
  .luh-hero--alt .openday__events a{
    width:100%;
  }
}

/* Final desktop baseline lock: the opening card and updates card end together. */
@media (min-width:961px){
  .luh-hero--alt .openday{height:100%;}
  .luh-hero--alt .openday__events{display:flex;flex-direction:column;}
  .luh-hero--alt .openday__events li{display:flex;flex:1 1 0;}
  .luh-hero--alt .openday__events a{height:100%;}
}

/* 2026-07 final hero balance: keep the opening-day card at its natural height and
   center it against the complete left-side content stack. This avoids stretching
   the event rows while preserving an intentional relationship between both columns. */
@media (min-width:961px){
  .luh-hero--alt .luh-hero__aside{
    align-self:center;
  }
  .luh-hero--alt .openday{
    min-height:0;
    height:auto;
    display:block;
  }
  .luh-hero--alt .openday__events{
    /* keep FLEX so the gap between rows survives - display:block killed it (gap is a
       no-op on block layout). Natural height, not stretched. */
    display:flex;
    flex-direction:column;
    gap:11px;
    flex:none;
  }
  .luh-hero--alt .openday__events li{
    display:flex;
    flex:none;
  }
  .luh-hero--alt .openday__events a{
    width:100%;
    height:auto;
  }
}

/* ============================================================
   FEATURED EVENT (Opening-day headliner: Marvel Double Header)
   Navy card, gold accents, two session tickets + register steps.
   ============================================================ */
.luh-featured-event{ background:radial-gradient(120% 90% at 50% 0%,rgba(255,201,60,.05),transparent 60%); }
.feat{ max-width:1040px; margin-inline:auto;
  background:linear-gradient(180deg,rgba(14,40,86,.55),rgba(6,19,54,.55));
  border:1px solid rgba(255,201,60,.42); border-radius:var(--radius-panel,16px);
  padding:clamp(24px,3vw,40px); box-shadow:0 24px 60px -30px rgba(0,0,0,.8); }
.feat__eyebrow{ display:flex; align-items:center; gap:9px; font-family:var(--ff-mono);
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.feat__star{ color:var(--gold); font-size:15px; }
.feat__title{ font-family:var(--ff-display); font-weight:700; font-size:clamp(30px,3.4vw,48px);
  color:var(--cream-2); line-height:1.08; margin-top:10px; text-transform:uppercase; letter-spacing:.01em; }
.feat__title em{ font-style:normal; color:var(--ember-lift); }
.feat__lede{ margin-top:12px; max-width:640px; color:var(--cream); font-size:clamp(15px,1.15vw,17px);
  line-height:1.65; opacity:.92; }
.feat__sessions{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px; }
.feat__session{ background:rgba(3,7,22,.5); border:1px solid rgba(255,201,60,.28);
  border-left:3px solid var(--gold); border-radius:12px; padding:20px 22px; }
.feat__session-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.feat__session-name{ font-family:var(--ff-display); font-weight:700; font-size:clamp(19px,1.5vw,23px);
  color:var(--cream-2); letter-spacing:.02em; }
.feat__session-time{ font-family:var(--ff-mono); font-weight:700; font-size:15px; color:var(--gold); white-space:nowrap; }
.feat__session-tag{ margin-top:6px; font-family:var(--ff-mono); font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-bright); }
.feat__session-body{ margin-top:11px; font-size:14.5px; line-height:1.6; color:var(--cream); opacity:.9; }
.feat__code{ margin-top:14px; font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(231,217,197,.7); display:flex; align-items:center; gap:10px; }
.feat__code-val{ font-family:var(--ff-mono); font-weight:700; font-size:16px; letter-spacing:.14em;
  color:#04091e; background:var(--gold); padding:4px 12px; border-radius:5px; }
.feat__session-buy{ margin-top:14px; }
.feat__register{ margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,201,60,.2); }
.feat__register-h{ font-family:var(--ff-mono); font-size:13px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); }
.feat__steps{ margin:12px 0 0; padding-left:22px; list-style:decimal; display:flex; flex-direction:column; gap:8px; }
.feat__steps li{ font-size:14.5px; line-height:1.6; color:var(--cream); opacity:.92; padding-left:4px; }
.feat__steps strong{ color:var(--cream-2); }
.feat__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; }
@media (max-width:720px){
  .feat__sessions{ grid-template-columns:1fr; }
}

/* ===== luh-product (PDP) =====
   Product-detail page: dark buybox + gallery, cream info panel, two recommendation
   rails, trust strip, pickup drawer. Tokens only; Cinzel (--ff-display) titles.
   One desktop layout; stacks at 1180 then 760. No horizontal overflow at 390. */
/* deeper, richer navy than the site default: mostly near-black navy-950 with a
   soft navy glow under the header, matching the source mockup's darker ground.
   Header + footer keep their own shell backgrounds. */
.page-product{
  background:
    radial-gradient(110% 55% at 50% -8%, rgba(14,40,86,.38), transparent 55%),
    var(--navy-950);
}
/* product article uses the SITE wrap (same gutters/padding as every other page) */

.product-shell{
  padding:clamp(20px,3vw,34px) 0 clamp(30px,4vw,46px);
  background:radial-gradient(80% 68% at 50% 0%, rgba(18,48,97,.28), transparent 68%);
}

/* ---------- breadcrumb ---------- */
.product-crumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  font-size:13px; color:rgba(231,217,197,.7); margin-bottom:22px;
}
.product-crumb a{ transition:color .18s var(--ease); }
.product-crumb a:hover{ color:var(--gold); }
.product-crumb i{ color:var(--bronze); font-style:normal; }
.product-crumb span[aria-current]{ color:rgba(231,217,197,.85); }

/* ---------- main grid: gallery ~55 / buybox ~45 (mockup proportions) ---------- */
.product-grid{
  display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
  gap:clamp(28px,2.8vw,46px); align-items:stretch;
}

/* ---------- gallery ---------- */
.product-gallery{ min-width:0; display:flex; flex-direction:column; }
.product-gallery__stage{
  position:relative; flex:1 1 auto; min-height:clamp(360px,52vh,620px); overflow:hidden;
  border:1px solid rgba(255,201,60,.42); border-radius:var(--radius-panel);
  background:var(--navy-900); box-shadow:0 26px 55px -34px rgba(0,0,0,.9);
}
.product-gallery__stage>img{ width:100%; height:100%; object-fit:cover; object-position:center 46%; }
.product-gallery__zoom{
  position:absolute; top:16px; right:16px; width:42px; height:42px; cursor:pointer;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,201,60,.55); background:rgba(3,8,28,.72); color:var(--cream-2);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.product-gallery__zoom:hover{ border-color:var(--gold); background:rgba(3,8,28,.9); }
.product-gallery__zoom svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; }
.product-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:16px; }
.product-thumb{
  padding:0; aspect-ratio:1/1; overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,201,60,.32); border-radius:var(--radius-card);
  background:var(--navy-900); transition:border-color .2s var(--ease);
}
.product-thumb img{ width:100%; height:100%; object-fit:cover; opacity:.72; transition:opacity .2s var(--ease); }
.product-thumb:hover img,.product-thumb.is-active img{ opacity:1; }
.product-thumb.is-active{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(255,201,60,.16); }
.product-thumb:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }

/* ---------- buybox ---------- */
.product-buybox{
  min-width:0; border:1px solid rgba(255,201,60,.42); border-radius:var(--radius-panel);
  background:linear-gradient(155deg, rgba(8,22,54,.92), rgba(3,9,28,.96));
  padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,32px) clamp(20px,2vw,26px);
  box-shadow:0 28px 60px -38px rgba(0,0,0,.95);
}
.product-kicker{
  font-family:var(--ff-body); font-size:12.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.product-title{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(30px,2.9vw,46px); line-height:1.08; letter-spacing:.01em;
  color:var(--cream-2); margin-top:12px;
}
.product-subtitle{ margin-top:14px; font-size:clamp(15px,1.1vw,17px); color:var(--cream); opacity:.86; }
.product-price{
  font-family:var(--ff-display); font-weight:700; font-size:clamp(28px,2.1vw,33px);
  line-height:1; color:var(--gold); margin-top:18px;
}
.product-stock{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin-top:13px; font-size:13px; color:rgba(231,217,197,.76);
}
.product-stock strong{ color:var(--ok-text); font-weight:700; }
.product-stock i{ color:var(--bronze); font-style:normal; }
.stock-dot{
  width:12px; height:12px; flex:none; border-radius:50%;
  border:2px solid var(--ok-text); position:relative;
}
.stock-dot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--ok-text); }
.product-rule{ height:1px; margin:22px 0 16px;
  background:linear-gradient(90deg, rgba(255,201,60,.45), rgba(255,201,60,.06)); }

/* ---------- fulfillment ---------- */
.fulfillment{ border:0; padding:0; margin:0; min-width:0; }
.fulfillment legend{ padding:0; font-size:12px; letter-spacing:.04em; color:rgba(231,217,197,.7); margin-bottom:10px; }
.fulfillment-option{
  position:relative; display:grid; grid-template-columns:auto auto 1fr auto;
  align-items:center; gap:13px; padding:15px; margin-bottom:9px; cursor:pointer;
  border:1px solid rgba(184,144,31,.5); border-radius:var(--radius-card);
  background:rgba(3,8,28,.4); transition:border-color .2s var(--ease), background .2s var(--ease);
}
.fulfillment-option:last-child{ margin-bottom:0; }
.fulfillment-option input{ position:absolute; opacity:0; pointer-events:none; }
.fulfillment-option__radio{
  width:18px; height:18px; flex:none; border-radius:50%; position:relative;
  border:1.5px solid rgba(255,201,60,.55);
}
.fulfillment-option.is-selected{ border-color:var(--gold); background:rgba(255,201,60,.05); }
.fulfillment-option.is-selected .fulfillment-option__radio::after{
  content:""; position:absolute; inset:4px; border-radius:50%; background:var(--gold);
}
.fulfillment-option__icon{ width:22px; height:22px; flex:none; color:var(--bronze); }
.fulfillment-option__copy{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.fulfillment-option__copy strong{ font-size:15px; color:var(--cream-2); }
.fulfillment-option__copy em{ font-style:normal; font-size:12px; color:var(--ok-text); }
.fulfillment-option__copy small{ font-size:12px; color:rgba(231,217,197,.66); }
.fulfillment-option__check{ width:22px; height:22px; flex:none; color:var(--gold); opacity:0; }
.fulfillment-option.is-selected .fulfillment-option__check{ opacity:1; }
.fulfillment-option input:focus-visible ~ .fulfillment-option__radio{ outline:2px solid var(--gold-bright); outline-offset:2px; }

/* ---------- quantity + add to cart ---------- */
.product-purchase{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; margin-top:14px; }
.quantity-control{ display:flex; align-items:center; gap:12px; font-size:12.5px; color:rgba(231,217,197,.82); }
/* addon-variant-clarity-v1: the variant/add-on <select> was the unstyled browser default (fugly
   on the dark buybox). Match the theme with a custom chevron. */
.quantity-control--variant{ align-items:stretch; flex-direction:column; gap:6px; }
.product-variant{
  -webkit-appearance:none; appearance:none;
  background:rgba(255,255,255,.04); color:var(--cream-2, #e7d9c5);
  border:1px solid rgba(214,178,106,.42); border-radius:10px;
  padding:.7em 2.2em .7em .9em; font:inherit; font-size:14px; line-height:1.2; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--gold, #d4a24a) 50%),
                   linear-gradient(135deg, var(--gold, #d4a24a) 50%, transparent 50%);
  background-position:calc(100% - 1.15em) 1.15em, calc(100% - .8em) 1.15em;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.product-variant:hover{ border-color:rgba(214,178,106,.7); }
.product-variant:focus-visible{ outline:2px solid var(--gold, #d4a24a); outline-offset:2px; }
.product-variant option{ background:#0a1226; color:#e7d9c5; }
.quantity-control__box{
  display:grid; grid-template-columns:42px 40px 42px; align-items:center; height:50px; overflow:hidden;
  border:1px solid rgba(255,201,60,.4); border-radius:var(--radius);
}
.quantity-control__box button{ height:100%; border:0; background:transparent; color:var(--cream-2);
  font-size:18px; line-height:1; cursor:pointer; transition:color .18s var(--ease); }
.quantity-control__box button:hover{ color:var(--gold); }
.quantity-control__box input{
  width:100%; height:100%; border:0; background:transparent; color:var(--cream-2);
  font:700 16px var(--ff-body); text-align:center; -moz-appearance:textfield; appearance:textfield;
}
.quantity-control__box input::-webkit-outer-spin-button,
.quantity-control__box input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.product-add{ height:50px; gap:10px; }
.product-add svg{ width:18px; height:18px; fill:currentColor; }
.pickup-details{
  display:block; width:100%; text-align:center; margin-top:14px; cursor:pointer;
  border:0; background:transparent; color:var(--gold);
  font-family:var(--ff-body); font-weight:700; font-size:12.5px;
  text-decoration:underline; text-underline-offset:4px; transition:color .18s var(--ease);
}
.pickup-details:hover{ color:var(--gold-bright); }
.pickup-details span{ text-decoration:none; }

/* ---------- assurances + wishlist/share ---------- */
.product-assurances{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(255,201,60,.2);
}
.product-assurances>div{ display:flex; gap:9px; }
.product-assurances svg{ width:22px; height:22px; flex:none; color:var(--gold); fill:none; stroke:currentColor; stroke-width:1.6; }
.product-assurances span{ display:flex; flex-direction:column; }
.product-assurances strong{ font-size:12px; color:var(--cream-2); }
.product-assurances small{ font-size:11px; color:rgba(231,217,197,.56); }
.product-actions{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px; color:rgba(231,217,197,.72); }
.product-actions button{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:0; background:none; color:inherit; font-family:var(--ff-body); font-size:13px;
  transition:color .18s var(--ease);
}
.product-actions button:hover{ color:var(--gold-bright); }
.product-actions svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.product-actions i{ width:1px; height:18px; background:rgba(255,201,60,.24); }

/* ---------- info panel (cream card on navy) ---------- */
.product-info.ground-cream{ background:transparent; box-shadow:none; padding:clamp(4px,1vw,10px) 0 clamp(28px,4vw,44px); }
.product-info__panel{
  display:grid; grid-template-columns:1.16fr .72fr .92fr; overflow:hidden;
  border:1px solid rgba(184,144,31,.45); border-radius:var(--radius-panel);
  background:var(--paper);
  background-image:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.5), transparent 60%);
}
.product-info__panel>article,.product-accordions{ padding:clamp(24px,2.2vw,32px) clamp(22px,2vw,34px); min-width:0; }
.product-info__panel>article+article,.product-accordions{ border-left:1px solid rgba(184,144,31,.26); }
.product-info h2{ font-family:var(--ff-display); font-weight:600; font-size:clamp(22px,1.9vw,28px); color:var(--head-ink); letter-spacing:.01em; }
.product-info__about p{ margin-top:12px; font-size:clamp(13.5px,1vw,15px); line-height:1.7; color:var(--body-ink); }
.store-note{
  position:relative; margin-top:22px; padding:16px 18px 16px 42px;
  border:1px solid rgba(184,144,31,.6); border-radius:var(--radius-card);
  background:rgba(255,255,255,.4);
}
.store-note::before{ content:""; position:absolute; left:18px; top:20px; width:9px; height:9px;
  background:var(--bronze); transform:rotate(45deg); }
.store-note__eyebrow{ font-family:var(--ff-display); font-weight:700; font-size:15px; color:var(--head-ink); }
.store-note p:not(.store-note__eyebrow){ margin-top:6px; font-size:13.5px; line-height:1.6; color:var(--body-ink); }
.product-info__contents ul{ margin-top:12px; display:flex; flex-direction:column; gap:9px; }
.product-info__contents li{ display:flex; align-items:flex-start; gap:10px; font-size:clamp(13.5px,1vw,15px); line-height:1.4; color:var(--body-ink); }
.product-info__contents li::before{
  content:"\2713"; flex:none; width:19px; height:19px; margin-top:1px;
  display:grid; place-items:center; border:1px solid var(--bronze); border-radius:50%;
  color:var(--bronze); font-size:11px; font-weight:800;
}
.product-accordions details{ border-bottom:1px solid rgba(184,144,31,.27); padding-bottom:12px; margin-bottom:12px; }
.product-accordions details:last-child{ border-bottom:0; padding-bottom:0; margin-bottom:0; }
.product-accordions summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:var(--ff-body); font-weight:800; font-size:14px; color:var(--head-ink);
}
.product-accordions summary::-webkit-details-marker{ display:none; }
.product-accordions summary::after{
  content:""; width:8px; height:8px; flex:none; margin-right:3px;
  border-right:2px solid var(--bronze); border-bottom:2px solid var(--bronze);
  transform:rotate(45deg); transition:transform .2s var(--ease);
}
.product-accordions details[open] summary::after{ transform:rotate(-135deg); }
.product-accordions dl{ margin:12px 0 0; }
.product-accordions dl div{
  display:flex; justify-content:space-between; gap:20px; padding:5px 0; font-size:13px;
  border-bottom:1px solid rgba(184,144,31,.16);
}
.product-accordions dl div:last-child{ border-bottom:0; }
.product-accordions dt{ font-weight:700; color:var(--head-ink); }
.product-accordions dd{ margin:0; text-align:right; color:var(--body-ink); }
.product-accordions details p{ margin-top:10px; font-size:13px; line-height:1.65; color:var(--body-ink); }

/* ---------- recommendations (two rails) ---------- */
.product-recommendations{ padding:clamp(4px,1vw,10px) 0 clamp(28px,4vw,40px); }
.recommendation-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,3vw,42px); }
.recommendation-col{ min-width:0; }
.recommendation-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.recommendation-head>div{ min-width:0; }
.recommendation-head h2{ font-family:var(--ff-display); font-weight:700; font-size:clamp(20px,1.7vw,26px); color:var(--cream-2); letter-spacing:.01em; }
.recommendation-head p{ margin-top:2px; font-size:13px; color:rgba(231,217,197,.62); }
.recommendation-head a{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  color:var(--gold); font-size:12.5px; font-weight:800; letter-spacing:.06em; transition:color .18s var(--ease);
}
.recommendation-head a:hover{ color:var(--gold-bright); }
.product-card-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.product-card-row--three{ grid-template-columns:repeat(3,1fr); }
.mini-product{
  display:flex; flex-direction:column; min-width:0; overflow:hidden; padding-bottom:14px;
  border:1px solid rgba(255,201,60,.3); border-radius:var(--radius-card);
  background:linear-gradient(180deg, rgba(9,25,61,.95), rgba(3,9,28,.95));
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.mini-product:hover{ transform:translateY(-3px); border-color:var(--gold); }
/* fixed height beats the <img height="1024"> presentational hint (which otherwise
   overrides aspect-ratio and makes object-fit:cover crop a tall strip) */
.mini-product img{ width:100%; height:168px; object-fit:cover; display:block; margin-bottom:2px; }
.mini-product__brand{ padding:12px 12px 0; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.mini-product strong{ padding:4px 12px 0; font-size:13px; line-height:1.28; color:var(--cream-2); }
.mini-product em{ padding:8px 12px 0; margin-top:auto; font-style:normal; font-family:var(--ff-display); font-weight:700; font-size:15px; color:var(--gold); }
/* the two rail columns are adjacent bare <section>s, so the global
   "adjacent non-ground sections" rule paints a seam hairline + gold diamond over
   the 2nd rail. Not in the reference. Suppress it (specificity beats the global). */
.page-product .product-recommendations .recommendation-col + .recommendation-col::before,
.page-product .product-recommendations .recommendation-col + .recommendation-col::after{ content:none; }

/* ---------- trust strip ---------- */
.product-trust{
  border-top:1px solid rgba(255,201,60,.25); border-bottom:1px solid rgba(255,201,60,.25);
  background:rgba(3,8,28,.7);
}
.product-trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.product-trust__grid>div{
  display:flex; align-items:center; gap:14px; min-width:0;
  padding:clamp(18px,2vw,26px) clamp(16px,1.6vw,24px);
  border-right:1px solid rgba(255,201,60,.16);
}
.product-trust__grid>div:last-child{ border-right:0; }
.product-trust svg{ width:34px; height:34px; flex:none; color:var(--gold); fill:none; stroke:currentColor; stroke-width:1.6; }
.product-trust span{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.product-trust strong{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-2); }
.product-trust small{ font-size:11.5px; line-height:1.4; color:rgba(231,217,197,.62); }

/* ---------- pickup drawer ---------- */
.pickup-drawer{ position:fixed; inset:0; z-index:200; }
.pickup-drawer[hidden]{ display:none; }
.pickup-drawer__backdrop{ position:absolute; inset:0; padding:0; border:0; cursor:pointer; background:rgba(0,0,0,.66); }
.pickup-drawer__panel{
  position:absolute; top:0; right:0; width:min(440px,92vw); height:100%; padding:44px 34px; overflow-y:auto;
  display:flex; flex-direction:column; align-items:flex-start;
  background:var(--navy-900); border-left:1px solid rgba(255,201,60,.45); box-shadow:-20px 0 60px rgba(0,0,0,.5);
}
.pickup-drawer__close{
  position:absolute; top:14px; right:18px; border:0; background:transparent; color:var(--cream-2);
  font-size:30px; line-height:1; cursor:pointer; transition:color .18s var(--ease);
}
.pickup-drawer__close:hover{ color:var(--gold); }
.pickup-drawer__panel .eyebrow{ margin-bottom:6px; }
.pickup-drawer__panel h2{ font-family:var(--ff-display); font-weight:700; font-size:clamp(26px,2.4vw,32px); color:var(--cream-2); margin-top:8px; }
.pickup-drawer__addr{ margin-top:14px; font-size:15px; line-height:1.6; color:var(--cream); }
.pickup-drawer__status{ margin-top:22px; color:var(--ok-text); font-weight:700; }
.pickup-drawer__note{ margin-top:4px; font-size:13px; color:rgba(231,217,197,.64); }
.pickup-drawer__panel .btn{ margin-top:26px; }

/* ---------- responsive: stack at 1180, single column at 760 ---------- */
@media (max-width:1180px){
  .product-grid{ grid-template-columns:1fr; gap:clamp(24px,4vw,36px); }
  .product-gallery,.product-buybox{ width:100%; max-width:820px; margin-inline:auto; }
  .product-info__panel{ grid-template-columns:1fr 1fr; }
  .product-accordions{ grid-column:1 / -1; border-left:0; border-top:1px solid rgba(184,144,31,.26); }
  .recommendation-grid{ grid-template-columns:1fr; }
  .product-trust__grid{ grid-template-columns:repeat(2,1fr); }
  .product-trust__grid>div:nth-child(2){ border-right:0; }
  .product-trust__grid>div:nth-child(1),
  .product-trust__grid>div:nth-child(2){ border-bottom:1px solid rgba(255,201,60,.16); }
}
@media (max-width:760px){
  .product-thumbs{ gap:8px; }
  .product-buybox{ padding:22px 18px; }
  .product-purchase{ grid-template-columns:1fr; align-items:stretch; }
  .product-add{ width:100%; }
  .product-assurances{ grid-template-columns:1fr; gap:14px; }
  .product-info__panel{ grid-template-columns:1fr; }
  .product-info__panel>article+article{ border-left:0; border-top:1px solid rgba(184,144,31,.26); }
  .product-card-row,.product-card-row--three{ grid-template-columns:repeat(2,1fr); }
  .product-trust__grid{ grid-template-columns:1fr; }
  .product-trust__grid>div{ border-right:0; border-bottom:1px solid rgba(255,201,60,.16); }
  .product-trust__grid>div:last-child{ border-bottom:0; }
}
@media (max-width:400px){
  .product-thumbs{ gap:6px; }
  .product-title{ font-size:27px; }
  .recommendation-head{ flex-wrap:wrap; }
}

/* ============================================================
   SHOP: collection grid + cart (commerce reskin; same idiom as
   the PDP block above: navy panels, gold hairlines, display type)
   ============================================================ */
/* ---------- collection listing ---------- */
.shop-collection__head{ max-width:860px; }
.shop-collection__title{
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(30px,3vw,48px); line-height:1.06; letter-spacing:.01em; color:var(--cream-2);
}
.shop-collection__intro{ margin-top:14px; font-size:clamp(15px,1.1vw,17px); line-height:1.65; color:var(--cream); opacity:.88; }
.shop-collection__intro p+p{ margin-top:10px; }
.shop-collection__empty,.shop-cart__empty{
  margin-top:30px; padding:26px 28px; font-size:15.5px; color:var(--cream);
  border:1px solid rgba(255,201,60,.3); border-radius:var(--radius-panel); background:rgba(6,19,54,.55);
}
.shop-grid{
  list-style:none; margin:34px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px;
}
.shop-card{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#0e2856,#061336 75%,#03081c);
  border:1px solid rgba(255,201,60,.4); border-radius:var(--radius-panel);
  transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.shop-card:hover{ transform:translateY(-5px); border-color:var(--gold); box-shadow:0 18px 44px -22px rgba(255,201,60,.3); }
.shop-card__link{ display:flex; flex-direction:column; height:100%; color:var(--cream); }
.shop-card__img{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  background:var(--navy-900); border-bottom:1px solid rgba(255,201,60,.3);
}
.shop-card__title{
  display:block; padding:16px 18px 0; font-family:var(--ff-display); font-weight:700;
  font-size:16.5px; line-height:1.3; letter-spacing:.03em; text-transform:uppercase; color:var(--cream-2);
}
.shop-card__price{
  display:block; margin-top:auto; padding:12px 18px 18px;
  font-family:var(--ff-display); font-weight:700; font-size:19px; color:var(--gold);
}
.shop-card__badge{
  position:absolute; top:12px; right:12px; padding:5px 11px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy-950); background:var(--cream-2);
}
.shop-card--sold-out .shop-card__img{ opacity:.45; }
.shop-card--sold-out .shop-card__title{ color:rgba(243,236,224,.62); }
.shop-card--sold-out .shop-card__price{ color:var(--bronze-dim); }
.shop-collection__pagination{
  display:flex; justify-content:center; gap:12px; margin-top:32px;
}

/* ---------- cart ---------- */
.shop-cart__title{
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(30px,3vw,48px); line-height:1.06; letter-spacing:.01em; color:var(--cream-2);
}
.shop-cart .shop-notice{
  margin-top:18px; padding:14px 18px; font-size:14.5px; line-height:1.55; color:var(--cream);
  border:1px solid rgba(255,201,60,.4); border-radius:var(--radius-card); background:rgba(255,201,60,.06);
}
.shop-cart .shop-notice--error{ border-color:rgba(232,86,63,.55); background:rgba(192,57,43,.14); color:var(--cream-2); }
.shop-cart__lines{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.shop-cart__line{
  display:grid; grid-template-columns:96px minmax(0,1fr) auto auto auto; align-items:center;
  gap:clamp(14px,1.8vw,26px); padding:16px 18px;
  border:1px solid rgba(255,201,60,.4); border-radius:var(--radius-panel);
  background:linear-gradient(155deg, rgba(8,22,54,.92), rgba(3,9,28,.96));
  box-shadow:0 28px 60px -38px rgba(0,0,0,.95);
}
.shop-cart__img{
  width:96px; height:96px; object-fit:cover; border-radius:var(--radius-card);
  border:1px solid rgba(255,201,60,.3); background:var(--navy-900);
}
.shop-cart__meta{ min-width:0; }
.shop-cart__product{
  font-family:var(--ff-display); font-weight:700; font-size:17.5px; line-height:1.25;
  letter-spacing:.02em; text-transform:uppercase; color:var(--cream-2); transition:color .18s var(--ease);
}
.shop-cart__product:hover{ color:var(--gold); }
.shop-cart__options,.shop-cart__unit{ margin-top:5px; font-size:13px; color:rgba(231,217,197,.72); }
.shop-cart__qty-form{ display:flex; align-items:center; gap:10px; }
.shop-cart__qty-label{ font-size:12.5px; color:rgba(231,217,197,.82); }
.shop-cart__qty{
  width:64px; height:44px; text-align:center; background:transparent; color:var(--cream-2);
  font:700 15px var(--ff-body); border:1px solid rgba(255,201,60,.4); border-radius:var(--radius);
}
.shop-cart__update,.shop-cart__remove{
  cursor:pointer; border:0; background:transparent; padding:0;
  font-family:var(--ff-body); font-weight:700; font-size:12.5px; color:var(--gold);
  text-decoration:underline; text-underline-offset:4px; transition:color .18s var(--ease);
}
.shop-cart__update:hover{ color:var(--gold-bright); }
.shop-cart__remove{ color:rgba(231,217,197,.6); }
.shop-cart__remove:hover{ color:var(--ember-lift); }
.shop-cart__line-total{ font-family:var(--ff-display); font-weight:700; font-size:19px; color:var(--gold); }
.shop-cart__discount{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:28px;
  font-size:13px; font-weight:700; letter-spacing:.04em; color:rgba(231,217,197,.82);
}
.shop-cart__discount input{
  height:44px; min-width:210px; padding:0 14px; background:rgba(3,8,28,.4); color:var(--cream-2);
  font:600 14px var(--ff-body); border:1px solid rgba(255,201,60,.4); border-radius:var(--radius);
  transition:border-color .2s var(--ease);
}
.shop-cart__discount input:focus{ outline:none; border-color:var(--gold); }
.shop-cart__codes{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.shop-cart__codes li{
  padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); border:1px solid rgba(255,201,60,.4); background:rgba(255,201,60,.07);
}
.shop-cart__totals{
  margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,201,60,.2);
  display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right;
}
.shop-cart__subtotal{
  display:flex; align-items:baseline; gap:18px;
  font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(231,217,197,.82);
}
.shop-cart__subtotal span:last-child{
  font-family:var(--ff-display); font-weight:700; font-size:clamp(24px,2vw,30px); letter-spacing:0; color:var(--gold);
}
.shop-cart__note{ font-size:12.5px; color:rgba(231,217,197,.6); }
.shop-cart__checkout-form{ margin-top:18px; display:flex; justify-content:flex-end; }
.shop-cart__checkout{ height:50px; min-width:230px; }

/* ---------- shop responsive ---------- */
@media (max-width:880px){
  .shop-cart__line{ grid-template-columns:72px minmax(0,1fr); }
  .shop-cart__img{ width:72px; height:72px; }
  .shop-cart__qty-form,.shop-cart__line-total,.shop-cart__remove-form{ grid-column:2; justify-self:start; }
  .shop-cart__checkout-form{ justify-content:stretch; }
  .shop-cart__checkout{ width:100%; }
}
@media (max-width:760px){
  .shop-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
  .shop-card__title{ font-size:14.5px; padding:13px 14px 0; }
  .shop-card__price{ font-size:16.5px; padding:10px 14px 14px; }
}

/* ---------- private Game Master sessions ---------- */
.luh-dm-sessions{ overflow:hidden; }
.dm-hero{ background:var(--navy-950); color:var(--cream); padding:68px 0 72px; border-bottom:1px solid rgba(255,201,60,.55); }
.dm-hero__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.8fr); gap:64px; align-items:center; }
.dm-hero__copy h1{ font-family:var(--ff-display); font-size:clamp(42px,5.1vw,74px); line-height:1.02; letter-spacing:.025em; text-transform:uppercase; color:var(--cream-2); margin:16px 0 22px; }
.dm-hero__copy h1 em{ font-style:normal; color:var(--ember-lift); }
.dm-hero__lede{ font-size:18px; line-height:1.7; max-width:680px; }
.dm-hero__actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:28px; }
.dm-text-link{ display:inline-flex; align-items:center; min-height:44px; color:var(--gold); font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.dm-text-link b{ font-size:18px; margin-left:7px; text-decoration:none; }
.dm-honesty{ border-left:3px solid var(--gold); padding:9px 0 9px 16px; margin-top:22px; max-width:630px; font-size:13.5px; line-height:1.55; color:rgba(255,249,231,.82); }
.dm-hero__art{ position:relative; min-height:480px; overflow:hidden; margin:0; border:1px solid rgba(255,201,60,.5); border-radius:var(--radius-panel); box-shadow:0 28px 70px rgba(0,0,0,.35); }
.dm-hero__art::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,8,28,.05),rgba(3,8,28,.86)); pointer-events:none; }
.dm-hero__art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 44%; }
.dm-hero__art figcaption{ position:absolute; z-index:1; left:28px; right:28px; bottom:28px; font-family:var(--ff-display); text-transform:uppercase; color:var(--cream-2); font-size:21px; line-height:1.35; letter-spacing:.06em; }
.dm-process{ padding-block:clamp(52px,5vw,72px); }
.dm-process .sec-intro h2,.dm-request__intro h2,.dm-roster .sec-intro h2{ font-family:var(--ff-display); text-transform:uppercase; color:var(--head-ink); font-size:var(--fs-h2); letter-spacing:.05em; margin:12px 0; }
.dm-steps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:34px; padding:0; }
.dm-steps li{ position:relative; padding:0 28px 0 58px; min-height:110px; }
.dm-steps li+li{ border-left:1px solid rgba(152,92,25,.25); }
.dm-steps span{ position:absolute; left:18px; top:0; color:#755000; font-weight:800; font-size:12px; letter-spacing:.12em; }
.dm-steps h3{ font-family:var(--ff-display); font-size:17px; line-height:1.25; margin:0 0 7px; color:var(--head-ink); text-transform:uppercase; }
.dm-steps p{ font-size:14px; line-height:1.55; color:var(--body-ink); }
.dm-options{ background:linear-gradient(180deg,#07173e,var(--navy-950)); color:var(--cream); scroll-margin-top:88px; }
.dm-option-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px; }
.dm-option-grid label{ display:block; position:relative; cursor:pointer; }
.dm-option-grid input{ position:absolute; opacity:0; pointer-events:none; }
.dm-option-card{ display:block; background:linear-gradient(180deg,rgba(14,40,86,.98),rgba(6,19,54,.99)); border:1px solid rgba(255,201,60,.48); border-radius:var(--radius-card); padding:22px; min-height:210px; transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease); }
.dm-option-card small{ display:block; color:var(--gold); font-style:normal; font-weight:800; font-size:11px; letter-spacing:.15em; text-transform:uppercase; }
.dm-option-card strong{ display:block; font-family:var(--ff-display); font-size:18px; line-height:1.25; margin:12px 0 9px; color:var(--cream-2); text-transform:uppercase; }
.dm-option-card em{ display:block; font-style:normal; font-size:14.5px; line-height:1.6; color:var(--cream); opacity:.86; }
.dm-option-grid label:hover .dm-option-card{ border-color:var(--gold); transform:translateY(-2px); }
.dm-option-grid input:focus-visible+.dm-option-card{ outline:3px solid var(--gold); outline-offset:4px; }
.dm-option-grid input:checked+.dm-option-card{ border-color:var(--ember-lift); box-shadow:0 0 0 2px rgba(221,76,55,.28),0 18px 40px rgba(0,0,0,.24); }
.dm-not-sure{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; margin:20px auto 0; color:var(--cream); cursor:pointer; }
.dm-not-sure input{ width:20px; height:20px; accent-color:var(--ember-lift); }
.dm-not-sure strong{ color:var(--gold); }
.dm-request{ scroll-margin-top:88px; }
.dm-request__grid{ display:grid; grid-template-columns:minmax(260px,.62fr) minmax(0,1.3fr); gap:54px; align-items:start; }
.dm-request__intro{ position:sticky; top:100px; }
.dm-form{ margin:0; max-width:none; }
.dm-form fieldset{ border:0; padding:0; margin:0 0 28px; }
.dm-form fieldset:last-of-type{ margin-bottom:20px; }
.dm-form legend{ font-family:var(--ff-display); font-size:17px; text-transform:uppercase; letter-spacing:.04em; color:var(--head-ink); border-bottom:1px solid rgba(152,92,25,.28); width:100%; padding-bottom:10px; margin-bottom:18px; }
.dm-form .ffield label{ color:#705000; }
.dm-form .ffield label span{ font-family:var(--ff-body); font-weight:700; letter-spacing:0; text-transform:none; color:#49546d; font-size:12px; }
.dm-form input,.dm-form select,.dm-form textarea{ border-color:#8e702f; }
.dm-form input:focus,.dm-form select:focus,.dm-form textarea:focus{ outline:3px solid rgba(10,31,77,.28); outline-offset:2px; border-color:var(--navy-700); }
.dm-form .fsubmit{ border-top:1px solid rgba(152,92,25,.28); padding-top:22px; }
.dm-form textarea{ min-height:116px; }
.dm-form .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.dm-roster__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:30px; }
.dm-profile{ display:grid; grid-template-columns:120px 1fr; gap:20px; padding:20px; border:1px solid rgba(152,92,25,.3); background:rgba(255,255,255,.26); }
.dm-profile img{ width:120px; height:120px; object-fit:cover; border-radius:var(--radius-card); }
.dm-profile h3{ margin:0 0 6px; font-family:var(--ff-display); text-transform:uppercase; color:var(--head-ink); }
.dm-profile p{ color:var(--body-ink); line-height:1.55; }
.dm-profile__specialties{ color:#705000!important; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.dm-profile--draft{ opacity:.72; border-style:dashed; }
.dm-profile__state{ display:inline-block; margin-bottom:7px; padding:4px 7px; background:#7f1d1d; color:#fff; font-size:11px; font-weight:800; text-transform:uppercase; }

@media(max-width:900px){
  .dm-hero__grid,.dm-request__grid{ grid-template-columns:1fr; }
  .dm-hero__art{ min-height:340px; }
  .dm-request__intro{ position:static; }
  .dm-steps{ grid-template-columns:1fr; gap:18px; }
  .dm-steps li{ min-height:0; padding:0 0 0 50px; }
  .dm-steps li+li{ border-left:0; }
  .dm-steps span{ left:8px; }
  .dm-option-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .dm-hero{ padding:38px 0 44px; }
  .dm-hero__grid{ gap:26px; }
  .dm-hero__copy h1{ font-size:36px; margin-bottom:18px; }
  .dm-hero__lede{ font-size:16px; }
  .dm-hero__actions{ align-items:stretch; gap:8px; margin-top:24px; }
  .dm-hero__actions .btn,.dm-text-link{ justify-content:center; width:100%; text-align:center; }
  .dm-text-link{ padding:5px; }
  .dm-honesty{ margin-top:16px; }
  .dm-hero__art{ min-height:255px; }
  .dm-hero__art figcaption{ left:18px; right:18px; bottom:18px; font-size:17px; }
  .dm-process{ padding-block:48px; }
  .dm-steps{ margin-top:26px; }
  .dm-option-grid{ grid-template-columns:1fr; margin-top:28px; }
  .dm-option-card{ min-height:0; padding:20px; }
  .dm-request__grid{ gap:20px; }
  .dm-form{ padding:22px 18px; }
  .dm-form .fgrid{ grid-template-columns:1fr; }
  .dm-form .ffield{ grid-column:1; }
  .dm-form .btn{ width:100%; }
  .dm-form .fsubmit{ text-align:center; }
  .dm-profile{ grid-template-columns:80px 1fr; gap:14px; }
  .dm-profile img{ width:80px; height:80px; }
}

/* LUH dynamic upcoming-events rail */
.luh-hours-now{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(.8rem,2.2vw,1.25rem);max-width:68rem;margin:clamp(1.3rem,3vw,2rem) auto 0;padding:clamp(.9rem,2.2vw,1.15rem) clamp(1rem,3vw,1.5rem);border:1px solid rgba(14,33,61,.2);border-radius:var(--radius-panel);background:linear-gradient(135deg,#081d48,#0b2d65);box-shadow:0 20px 46px -34px rgba(2,6,21,.85);color:var(--cream)}
.luh-hours-now__signal{width:.75rem;height:.75rem;border:2px solid rgba(255,255,255,.32);border-radius:50%;background:#dbab2d;box-shadow:0 0 0 .35rem rgba(219,171,45,.14)}
.luh-hours-now--open .luh-hours-now__signal{background:#71cf87;box-shadow:0 0 0 .35rem rgba(113,207,135,.15)}
.luh-hours-now--closed .luh-hours-now__signal{background:#f07f73;box-shadow:0 0 0 .35rem rgba(240,127,115,.14)}
.luh-hours-now__copy{min-width:0}
.luh-hours-now__eyebrow{margin:0;color:rgba(231,217,197,.7);font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.luh-hours-now__headline{margin:.14rem 0 0;color:var(--cream-2);font-family:var(--ff-display);font-size:clamp(1.15rem,2.1vw,1.5rem);font-weight:800;line-height:1.15}
.luh-hours-now__detail{display:flex;flex-wrap:wrap;gap:.2rem;margin:.28rem 0 0;color:rgba(231,217,197,.82);font-size:.82rem;line-height:1.45}
.luh-hours-now__link{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;padding:.6rem .85rem;border:1px solid rgba(255,201,60,.52);border-radius:var(--radius);color:var(--gold-bright);font-size:.72rem;font-weight:850;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.luh-hours-now__link:hover,.luh-hours-now__link:focus-visible{border-color:var(--gold);background:rgba(255,201,60,.1);color:var(--cream-2)}
.ev .ev__title a{color:inherit;text-decoration:none}
.ev .ev__title a:hover,.ev .ev__title a:focus-visible{color:var(--gold-bright);text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.18em}
.luh-event-carousel{position:relative;max-width:100%;margin:clamp(2rem,4vw,2.75rem) auto 1.75rem}
.luh-event-carousel__controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .75rem}
.luh-event-carousel__controls[hidden]{display:none}
.luh-event-carousel__status,.luh-event-carousel__hint{margin:0;color:rgba(14,33,61,.72);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.luh-event-carousel__buttons{display:flex;gap:.55rem}
.luh-event-carousel__button{display:inline-grid;width:2.75rem;height:2.75rem;padding:0;place-items:center;border:1px solid rgba(14,33,61,.28);border-radius:999px;background:var(--cream-2);color:var(--navy);font:900 1.05rem/1 var(--ff-body);cursor:pointer;transition:border-color .18s ease,background-color .18s ease,color .18s ease,transform .18s ease}
.luh-event-carousel__button:hover:not(:disabled),.luh-event-carousel__button:focus-visible{border-color:var(--navy);background:var(--navy);color:var(--gold-bright);transform:translateY(-1px)}
.luh-event-carousel__button:disabled{cursor:not-allowed;opacity:.38}
.luh-event-carousel .rail-grid{display:grid;grid-auto-columns:minmax(18rem,calc((100% - 2rem)/3));grid-auto-flow:column;grid-template-columns:none;gap:1rem;margin:0;padding:.25rem .1rem 1rem;overflow-x:auto;overscroll-behavior-inline:contain;scroll-behavior:smooth;scroll-padding-inline:.1rem;scroll-snap-type:inline mandatory;scrollbar-color:rgba(14,33,61,.42) rgba(14,33,61,.08);scrollbar-width:thin}
.luh-event-carousel .rail-grid:focus-visible{outline:3px solid var(--gold);outline-offset:.35rem}
.luh-event-carousel .rail-grid>.ev{min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.luh-event-carousel .rail-grid--single{display:grid;grid-auto-columns:minmax(18rem,54rem);max-width:54rem;margin-inline:auto;overflow:visible}
.luh-event-carousel__hint{margin:.25rem 0 0;text-align:right}
.luh-event-carousel__hint--enhanced{display:none}
.luh-event-carousel.is-enhanced .luh-event-carousel__hint--static{display:none}
.luh-event-carousel.is-enhanced.has-overflow .luh-event-carousel__hint--enhanced{display:block}
.ev__art{aspect-ratio:3/2;overflow:hidden}
.ev__art>img{height:100%}
.ev__art--empty{background:radial-gradient(circle at 50% 35%,rgba(255,201,60,.18),transparent 55%),linear-gradient(180deg,#0e2856,#081c48)}
.ev__placeholder{display:grid;height:100%;place-items:center;align-content:center;gap:.55rem;padding:clamp(.8rem,3vw,1.4rem);color:var(--cream);font-size:.66rem;font-weight:800;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.ev__placeholder img{width:min(48%,8rem);height:auto;opacity:.78;filter:saturate(.78)}
.rail-empty{max-width:44rem;margin:2rem auto;padding:1rem 1.25rem;border:1px solid rgba(14,33,61,.18);text-align:center}
@media(max-width:42rem){
  .luh-hours-now{grid-template-columns:auto minmax(0,1fr)}
  .luh-hours-now__link{grid-column:1/-1;width:100%}
  .luh-hours-now__detail{display:block}
  .luh-hours-now__detail>span{display:block}
  .luh-hours-now__detail>span[aria-hidden="true"]{display:none}
  .luh-event-carousel .rail-grid{grid-auto-columns:minmax(16.5rem,84vw)}
  .luh-event-carousel__hint{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .luh-event-carousel .rail-grid{scroll-behavior:auto}
  .luh-event-carousel__button{transition:none}
}

/* Level Up current-theme production polish */
.skip-link{
  position:fixed;z-index:10000;top:.75rem;left:.75rem;
  padding:.72rem 1rem;border:2px solid var(--gold);border-radius:var(--radius);
  color:var(--navy-950);background:var(--gold-bright);font-weight:850;
  box-shadow:0 8px 30px rgba(0,0,0,.45);transform:translateY(-220%);
  transition:transform .12s ease
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);outline:3px solid #fff;outline-offset:3px}
#main-content:focus{outline:none}
.utilbar a{display:inline-flex;align-items:center;min-height:24px}
input:not([type="hidden"]){min-height:24px}
.nav__logo{flex:0 0 auto}
.luh-countdown__days[hidden]{display:none!important}
.openday__hours-copy{display:grid;gap:.15rem;min-width:0}
.openday__hours-state{
  color:#f4efe6;font-size:.78rem;font-weight:850;letter-spacing:.08em;
  line-height:1.2;text-transform:uppercase
}
.openday__hours-detail{font-size:.84rem;font-weight:600;line-height:1.35;color:#e9e6df}
.openday__hours--open .openday__ico,.openday__hours--open .openday__hours-state{color:#71cf87}
.openday__hours--closed .openday__ico,.openday__hours--closed .openday__hours-state{color:#f08b7f}
.luh-search{
  min-height:clamp(34rem,64vh,52rem);color:var(--cream);
  background:radial-gradient(circle at 15% 10%,rgba(255,201,60,.1),transparent 26rem),
    linear-gradient(180deg,var(--navy-900),var(--navy-950));
}
.luh-search>.wrap{max-width:64rem}
.luh-search .sec-head{justify-content:flex-start;color:var(--cream-2)}
.luh-search__intro{max-width:46rem;margin-top:1rem;font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.65;color:rgba(231,217,197,.82)}
.luh-search__form{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;
  margin-top:clamp(1.5rem,4vw,2.75rem);padding:clamp(.75rem,2vw,1rem);
  border:1px solid rgba(255,201,60,.48);border-radius:var(--radius-panel);
  background:linear-gradient(145deg,rgba(12,36,86,.96),rgba(3,8,28,.96));
  box-shadow:0 28px 68px -42px rgba(0,0,0,.95);
}
.luh-search__input{
  width:100%;min-height:3.25rem;padding:.75rem 1rem;
  border:1px solid rgba(255,201,60,.36);border-radius:var(--radius);
  background:rgba(2,6,21,.74);color:var(--cream-2);
  font:600 1rem/1.35 var(--ff-body);outline:none;
}
.luh-search__input::placeholder{color:rgba(231,217,197,.56)}
.luh-search__input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,201,60,.14)}
.luh-search__meta,.luh-search__empty{margin-top:1.5rem;line-height:1.65;color:rgba(231,217,197,.8)}
.luh-search__empty{padding:1.25rem 1.4rem;border:1px solid rgba(255,201,60,.26);border-radius:var(--radius-panel);background:rgba(6,19,54,.56)}
.luh-search__group{margin-top:clamp(2rem,5vw,3.5rem)}
.luh-search__group-title{color:var(--gold);font-family:var(--ff-display);font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:.04em;text-transform:uppercase}
.luh-search__pages{display:grid;gap:.75rem;margin:1.25rem 0 0;padding:0;list-style:none}
.luh-search__page{padding:1rem 1.15rem;border:1px solid rgba(255,201,60,.28);border-radius:var(--radius-card);background:rgba(6,19,54,.62)}
.luh-search__page-link{color:var(--cream-2);font-family:var(--ff-display);font-size:1.08rem;font-weight:750}
.luh-search__page-link:hover,.luh-search__page-link:focus-visible{color:var(--gold-bright)}
.luh-search__page-desc{margin-top:.35rem;color:rgba(231,217,197,.72);line-height:1.55}
.mappanel__stage{
  position:relative;isolation:isolate;overflow:hidden;min-height:300px;
  background:radial-gradient(circle at 76% 26%,rgba(255,201,60,.18),transparent 18rem),
    repeating-linear-gradient(35deg,rgba(255,255,255,.025) 0 1px,transparent 1px 18px),#061336;
}
.mappanel__embed{position:absolute;inset:0;z-index:1;opacity:.62;filter:saturate(.72) contrast(1.08)}
.mappanel__fallback{
  position:relative;z-index:2;display:flex;width:100%;min-height:300px;max-width:none;
  flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(1.35rem,4vw,2.4rem);
  pointer-events:none;background:linear-gradient(90deg,rgba(3,8,28,.98) 0%,rgba(3,8,28,.9) 52%,rgba(3,8,28,.7) 100%);
}
.mappanel__fallback>*{pointer-events:auto}
.mappanel__fallback .eyebrow{margin-bottom:.55rem}
.mappanel__fallback strong{color:var(--cream-2);font-family:var(--ff-display);font-size:clamp(1.35rem,3vw,2rem);line-height:1.1}
.mappanel__fallback p{max-width:28rem;margin-top:.55rem;color:var(--cream);line-height:1.5}
.mappanel__fallback .btn{margin-top:1.15rem}
.product-info__body{font-size:1rem;line-height:1.72;color:var(--body-ink)}
.product-info__body>p,.product-info__body>ul,.product-info__body>ol,.product-info__body>blockquote{margin:0}
.product-info__body>:not(:first-child){margin-top:1rem}
.product-info__body ul,.product-info__body ol{padding-left:1.4rem}
.product-info__body li+li{margin-top:.45rem}
.product-info__body h2,.product-info__body h3,.product-info__body h4{color:var(--head-ink);font-family:var(--ff-display);line-height:1.2}
.product-info__body a{color:var(--ember);text-decoration:underline;text-underline-offset:.18em}
.shop-cart__empty{display:grid;justify-items:start;gap:1rem}
.shop-cart__empty p{margin:0}
@media(max-width:42rem){
  .luh-search__form{grid-template-columns:1fr}
  .luh-search__form .btn{width:100%}
  .mappanel__fallback{background:linear-gradient(90deg,rgba(3,8,28,.97),rgba(3,8,28,.82))}
}
@media(max-width:30rem){
  .sec-head{gap:10px;flex-wrap:nowrap}
  .sec-head>.flourish{width:32px}
  .sec-head>.sec-head__text{min-width:0;max-width:calc(100% - 84px)}
}

/* LUH desktop product viewport fit */
@media(min-width:720px){
  .product-gallery{
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    height:min(800px,calc(100vh - 220px));
    height:min(800px,calc(100dvh - 220px))
  }
  .product-gallery__stage{min-height:0;height:auto;flex:none}
  .product-gallery__stage>img{object-fit:contain}
  .product-thumbs{
    display:flex;
    gap:10px;
    margin-top:12px;
    padding:2px 2px 6px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-gutter:stable;
    scroll-snap-type:x proximity
  }
  .product-thumb{
    flex:0 0 clamp(64px,9vh,88px);
    scroll-snap-align:start
  }
}
@media(min-width:1181px){
  .product-grid{align-items:start}
  .product-buybox{
    align-self:start;
    max-height:min(800px,calc(100vh - 220px));
    max-height:min(800px,calc(100dvh - 220px));
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-gutter:stable
  }
}
@media(min-width:1181px) and (max-height:960px){
  .product-buybox{padding:18px 22px 16px}
  .product-title{font-size:clamp(28px,2.45vw,38px);margin-top:8px}
  .product-subtitle{margin-top:8px;font-size:15px}
  .product-price{margin-top:12px;font-size:28px}
  .product-stock{margin-top:9px}
  .product-rule{margin:14px 0 11px}
  .fulfillment legend{margin-bottom:7px}
  .fulfillment-option{gap:10px;padding:10px 12px;margin-bottom:6px}
  .product-purchase{gap:10px;margin-top:10px}
  .pickup-details{margin-top:10px}
  .product-assurances{gap:8px;margin-top:14px;padding-top:12px}
  .product-actions{margin-top:12px}
}


/* Shopify catalog discovery */
.nav__menu--catalog{max-height:min(70vh,32rem);overflow-y:auto;overscroll-behavior:contain;min-width:15rem}
.nav__menu-heading{display:block;padding:.65rem 1rem .32rem;color:var(--gold);font-family:var(--ff-display);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.nav__menu-heading:not(:first-child){border-top:1px solid rgba(255,201,60,.2);margin-top:.35rem;padding-top:.8rem}
.luh-live-catalog__head{max-width:52rem;margin-bottom:1.5rem}
.luh-live-catalog__head h2{margin:.25rem 0 .5rem}
.luh-live-catalog__links{display:grid;grid-template-columns:minmax(7rem,auto) 1fr;gap:.75rem 1rem;align-items:start;margin:1rem 0}
.luh-live-catalog__links>strong{color:var(--gold);font-family:var(--ff-display);letter-spacing:.04em}
.luh-live-catalog__links>div{display:flex;flex-wrap:wrap;gap:.5rem}
.luh-live-catalog__links a{display:inline-flex;padding:.42rem .72rem;border:1px solid rgba(255,201,60,.35);border-radius:999px;color:var(--cream);text-decoration:none}
.luh-live-catalog__links a:hover,.luh-live-catalog__links a:focus-visible{border-color:var(--gold);color:var(--gold-bright)}
.shop-card__brand{display:block;padding-inline:18px;font-size:.78rem;opacity:.78;margin-top:.18rem}
.shop-card__placeholder,.product-gallery__placeholder{display:grid;place-items:center;align-content:center;gap:.75rem;aspect-ratio:1/1;padding:clamp(1.25rem,5vw,3rem);background:radial-gradient(circle at 50% 30%,rgba(255,201,60,.12),transparent 55%),var(--navy-900);border-bottom:1px solid rgba(255,201,60,.3);color:var(--cream);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.shop-card__placeholder img,.product-gallery__placeholder img{width:min(62%,13rem);height:auto;opacity:.72;filter:saturate(.75)}
.product-gallery__placeholder{width:100%;height:100%;border-bottom:0}
.product-event-schedule{display:grid;gap:.22rem;margin:.7rem 0;padding:.65rem .8rem;border-left:3px solid var(--gold);background:rgba(255,201,60,.08)}
.product-event-schedule__label{color:var(--gold-bright);font-size:.68rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.product-event-schedule time{display:flex;flex-wrap:wrap;gap:.15rem .65rem;color:var(--cream-2);font-style:normal;line-height:1.35}
.product-event-schedule time strong{color:var(--cream);font-size:.93rem}
.product-event-schedule time span{font-size:.86rem}
.shop-cart__line--no-image{grid-template-columns:minmax(16rem,1fr) auto auto auto}
.luh-live-catalog .shop-collection__pagination span{align-self:center}
.evrow__name a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.16em}
.evrow__name a:hover,.evrow__name a:focus-visible{color:var(--bronze)}
.luh-event-detail{min-height:70vh;padding-top:clamp(8rem,12vw,11rem);color:var(--cream)}
.luh-event-detail__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(18rem,.9fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.luh-event-detail h1{max-width:18ch;margin:.35rem 0 1.35rem;font:700 clamp(2.5rem,6vw,5.5rem)/.98 var(--ff-display);letter-spacing:-.035em}
.luh-event-detail__schedule{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin:0 0 .8rem;color:var(--gold-bright);font-size:1.1rem}
.luh-event-detail__schedule span{color:var(--cream-2)}
.luh-event-detail__location{font-weight:750;color:var(--cream-2)}
.luh-event-detail__summary{max-width:64ch;margin-top:1.4rem;font-size:1.05rem;line-height:1.75}
.luh-event-detail__summary>:where(p,ul,ol,blockquote)+:where(p,ul,ol,blockquote){margin-top:1rem}
.luh-event-detail__summary :where(ul,ol){padding-left:1.35rem}
.luh-event-detail__summary li+li{margin-top:.4rem}
.luh-event-detail__includes{max-width:64ch;margin-top:1.75rem;padding:1.25rem;border:1px solid rgba(255,201,60,.25);background:rgba(255,255,255,.035)}
.luh-event-detail__includes h2{margin:0 0 .5rem;font:700 1.2rem var(--ff-display);color:var(--gold)}
.luh-event-detail__includes p{line-height:1.65}
.luh-event-detail__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.luh-event-detail__closed{max-width:34rem;padding:.75rem 1rem;border-left:3px solid var(--gold);color:var(--cream-2)}
.luh-event-detail figure{margin:0;overflow:hidden;border:1px solid rgba(255,201,60,.3);background:var(--navy-900);box-shadow:0 1.5rem 4rem rgba(0,0,0,.28)}
.luh-event-detail figure img{display:block;width:100%;height:auto;max-height:42rem;object-fit:contain}
.luh-event-gallery{margin-top:clamp(3rem,7vw,6rem);padding-top:clamp(2rem,5vw,3.5rem);border-top:1px solid rgba(255,201,60,.28)}
.luh-event-gallery>header{max-width:48rem;margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.luh-event-gallery>header h2{margin:.25rem 0 .5rem;font:700 clamp(2rem,4vw,3.5rem)/1 var(--ff-display)}
.luh-event-gallery__date+.luh-event-gallery__date{margin-top:clamp(2.25rem,5vw,4rem)}
.luh-event-gallery__date h3{margin:0 0 1rem;color:var(--gold-bright);font:700 clamp(1.2rem,2vw,1.55rem)/1.2 var(--ff-display)}
.luh-event-gallery__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,2vw,1.35rem)}
.luh-event-detail .luh-event-gallery figure{display:grid;grid-template-rows:auto minmax(0,auto);align-content:start;box-shadow:0 1rem 2.5rem rgba(0,0,0,.22)}
.luh-event-detail .luh-event-gallery figure img{width:100%;height:auto;max-height:none;aspect-ratio:4/3;object-fit:cover}
.luh-event-gallery figcaption{padding:.75rem .9rem;color:var(--cream-2);font-size:.86rem;line-height:1.5}
.luh-events-list__empty{max-width:46rem;margin:1rem auto 0;padding:1.25rem 1.5rem;border:1px solid rgba(14,33,61,.18);text-align:center}
.luh-events-list--dark .luh-events-list__empty{border-color:rgba(255,201,60,.28);color:var(--cream-2)}
.luh-events-pager{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1.5rem auto 0}
.luh-events-pager a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem .9rem;border:1px solid currentColor;font-weight:800}
.luh-events-pager span{font-size:.86rem;font-weight:750}
.luh-event-programs{margin-top:clamp(2.5rem,6vw,5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid rgba(14,33,61,.2)}
.luh-events-list--dark .luh-event-programs{border-top-color:rgba(255,201,60,.3)}
.luh-event-programs__intro{max-width:48rem;margin:0 0 clamp(1.25rem,3vw,2rem)}
.luh-event-programs__intro h3{margin:.25rem 0 .65rem;font:700 clamp(1.8rem,3.6vw,3rem)/1 var(--ff-display)}
.luh-event-programs__intro>p:last-child{max-width:42rem;line-height:1.65}
.luh-events-list--dark .luh-event-programs__intro h3{color:var(--cream)}
.luh-events-list--dark .luh-event-programs__intro>p:last-child{color:var(--cream-2)}
.luh-event-programs__list{margin-top:0}
.evrow--program{border-style:dashed}
.evrow--program .evrow__day-name{color:var(--bronze)}
.luh-events-list--dark .evrow--program .evrow__day-name{color:var(--gold-bright)}
.nav__search button,.luh-search__page-link{min-height:24px}
.luh-search__events{display:grid;gap:.75rem;margin:1.25rem 0 0;padding:0;list-style:none}
.luh-search__event{min-width:0}
.luh-search__event a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.55rem 1rem;min-height:44px;padding:.85rem 1rem;border:1px solid rgba(255,201,60,.28);border-radius:var(--radius-card);background:rgba(6,19,54,.62);color:var(--cream-2);text-decoration:none}
.luh-search__event a:hover,.luh-search__event a:focus-visible{border-color:var(--gold);background:rgba(12,36,86,.86)}
.luh-search__event-badge{padding:.22rem .45rem;border:1px solid rgba(255,201,60,.44);border-radius:999px;color:var(--gold-bright);font-size:.68rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.luh-search__event strong{min-width:0;font-family:var(--ff-display);font-size:1.04rem}
.luh-search__event a>span:last-child{color:rgba(231,217,197,.76);font-size:.88rem;text-align:right}
.luh-search__page-link{display:inline-flex;align-items:center}
.luh-search__pager{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1.5rem auto 0}
.luh-search__pager a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem .9rem;border:1px solid currentColor;font-weight:800}
.luh-search__pager span{font-size:.86rem;font-weight:750}
.openday__promo--expired{opacity:.55}
.openday__ev-featured{display:inline-flex;width:max-content;margin:0 0 .2rem;padding:.14rem .45rem;border:1px solid rgba(255,201,60,.6);border-radius:999px;color:var(--gold-bright);font-size:.63rem;font-weight:850;letter-spacing:.09em;line-height:1.3;text-transform:uppercase}
.openday__calendar-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;color:var(--gold-bright);font-size:.82rem;font-weight:750;text-decoration-thickness:.08em;text-underline-offset:.18em}
.openday__calendar-link svg{width:1rem;height:1rem;flex:none}
.openday__calendar-link:hover,.openday__calendar-link:focus-visible{color:var(--cream)}
.footer__legal a,.crumb a,.openday__calendar-link,.ev__title a,.evrow__name a,.product-crumb a,.pickup-details{min-height:24px}
.footer__legal a,.crumb a,.ev__title a,.evrow__name a,.product-crumb a,.pickup-details{display:inline-flex;align-items:center}
@media(max-width:64rem){.luh-event-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:55rem){.shop-cart__line--no-image{grid-template-columns:minmax(0,1fr)}.shop-cart__line--no-image .shop-cart__qty-form,.shop-cart__line--no-image .shop-cart__line-total,.shop-cart__line--no-image .shop-cart__remove-form{grid-column:1}}
@media(max-width:48rem){.luh-live-catalog__links{grid-template-columns:1fr}.nav__menu--catalog{max-height:none}.luh-event-detail__grid{grid-template-columns:1fr}.luh-event-detail>div>.luh-event-detail__grid>figure{order:-1}.luh-event-detail h1{font-size:clamp(2.35rem,13vw,4.25rem)}.luh-event-gallery__grid{grid-template-columns:1fr}.luh-search__event a{grid-template-columns:1fr;gap:.3rem}.luh-search__event-badge{width:max-content}.luh-search__event a>span:last-child{text-align:left}.shop-card__brand{padding-inline:14px}}

/* DELTA fix T: event-card rhythm. Titles wrapped to 1-3 lines, so every card started its
   image at a different Y and the rail read as ragged. Reserve a consistent title block and
   pin the meta/CTA to the bottom so cards align regardless of title length. */
.ev__title{
  min-height:3.2em;
  display:flex;
  align-items:flex-start;
}
.ev{
  display:flex;
  flex-direction:column;
}
.ev__box{ margin-top:auto; }
.ev__art{
  display:block;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:.5rem;
}
.ev__art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:640px){
  .ev__title{ min-height:0; }
}

/* DELTA slider polish: the CTA button and the price pill were separate siblings sitting at
   different baselines, so every card ended raggedly. Pair them in one aligned footer row pinned
   to the bottom of the card, and make the carousel arrows always available now that the rail
   carries the full upcoming set rather than five. */
.ev__foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding-top:.9rem;
}
.ev__foot .ev__cta{ margin:0; }
.ev__foot .ev__fee{
  margin:0;
  white-space:nowrap;
  align-self:center;
}
.luh-event-carousel__controls[hidden]{ display:flex !important; }
.luh-event-carousel__track{
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
}
.luh-event-carousel__track > .ev{ scroll-snap-align:start; }
@media (max-width:640px){
  .ev__foot{ flex-wrap:wrap; gap:.5rem; }
}

/* DELTA foot-align: .ev__fee is deliberately `position:absolute; right:12px; bottom:12px` -- the
   "corner stat" device used across the site. Inside the rail card that pulled the price pill out
   of flow, so the CTA and the price sat at different baselines and read as two loose objects.
   Return it to flow ONLY inside .ev__foot; every other .ev__fee keeps the corner-stat treatment. */
.ev .ev__foot .ev__fee{
  position:static;
  right:auto;
  bottom:auto;
  z-index:auto;
  align-self:center;
}
.ev .ev__foot{
  align-items:center;
  justify-content:space-between;
  gap:.85rem;
  padding-top:.95rem;
  border-top:1px solid rgba(255,201,60,.22);
}
.ev .ev__foot .btn{ margin:0; }

/* DELTA runes: the carousel arrows were two small chevrons parked top-right, easy to miss.
   Mount them on the LEFT and RIGHT edges, vertically centred on the card row, sized to be
   obvious, and dress them as arcane sigils: a gold rune ring, a spark ring that traces round on
   hover, a chevron, and a small lightning tick. Nerdy without being cheesy -- no emoji, no
   clipart, just the site's own gold-on-navy language. */
.luh-event-carousel{ position:relative; }
.luh-event-carousel__buttons{
  position:static;
}
.luh-event-carousel__button{
  position:absolute;
  top:46%;
  transform:translateY(-50%);
  z-index:6;
  width:58px;
  height:58px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  background:radial-gradient(circle at 50% 45%, rgba(12,26,58,.96), rgba(6,15,38,.99));
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.45), 0 0 0 1px rgba(255,201,60,.28) inset;
  transition:transform .18s ease, box-shadow .22s ease;
}
.luh-event-carousel__button--prev{ left:-6px; }
.luh-event-carousel__button--next{ right:-6px; }
@media (min-width:1100px){
  .luh-event-carousel__button--prev{ left:-26px; }
  .luh-event-carousel__button--next{ right:-26px; }
}
.luh-event-carousel__button:hover:not([disabled]){
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 8px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(255,201,60,.55) inset, 0 0 18px rgba(255,201,60,.28);
}
.luh-event-carousel__button[disabled]{ opacity:.32; cursor:default; }
.luh-rune{ width:38px; height:38px; overflow:visible; }
.luh-rune__ring{
  fill:none; stroke:rgba(255,201,60,.34); stroke-width:1.6;
}
.luh-rune__spark{
  fill:none; stroke:var(--gold-bright,#ffc93c); stroke-width:1.8;
  stroke-linecap:round;
  stroke-dasharray:14 105; stroke-dashoffset:0;
  opacity:.85;
  transition:stroke-dashoffset .55s ease;
}
.luh-event-carousel__button:hover .luh-rune__spark{ stroke-dashoffset:-119; }
.luh-rune__glyph{
  fill:none; stroke:var(--gold-bright,#ffc93c); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.luh-rune__bolt{
  fill:none; stroke:rgba(255,201,60,.55); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transition:opacity .2s ease;
}
.luh-event-carousel__button:hover .luh-rune__bolt{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .luh-event-carousel__button,.luh-rune__spark,.luh-rune__bolt{ transition:none; }
}
@media (max-width:760px){
  .luh-event-carousel__button{ width:48px; height:48px; }
  .luh-rune{ width:32px; height:32px; }
  .luh-event-carousel__button--prev{ left:2px; }
  .luh-event-carousel__button--next{ right:2px; }
}


/* DELTA foot-v2: the card footer showed a bordered "View event" button next to a bordered price
   pill. Two competing outlines at different widths, different baselines, so the bottom of every
   card read as two loose objects. Make the footer ONE control: the price sits above as a plain
   gold line (no pill, no second border) and the CTA becomes a full-width band across the bottom
   of the card. Bigger tap target too, which helps the mobile and AA targets. Scoped to .ev so
   the corner-stat .ev__fee everywhere else is untouched. */
.ev .ev__foot{
  flex-direction:column-reverse;   /* .ev__fee is last in DOM, so reverse puts price on top */
  align-items:stretch;
  gap:.45rem;
}
.ev .ev__foot .ev__fee{
  border:0;
  background:none;
  padding:0;
  border-radius:0;
  align-self:flex-end;
  font-size:13.5px;
  letter-spacing:.12em;
}
.ev .ev__foot .ev__cta{
  display:block;
  width:100%;
}
.ev .ev__foot .btn{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* DELTA rune-hover: .luh-event-carousel__button:hover:not(:disabled) is declared earlier in this
   file and sets its own background and border from the pre-rune button design. The rune block
   never re-declared background on hover, so hovering swapped the dark sigil for the old pale
   fill and the arrow looked like it went transparent. Own the hover state here. */
.luh-event-carousel__button:hover:not([disabled]),
.luh-event-carousel__button:focus-visible{
  background:radial-gradient(circle at 50% 45%, rgba(20,42,86,.99), rgba(8,19,46,1));
  border:0;
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 8px 26px rgba(0,0,0,.5),
             0 0 0 1px rgba(255,201,60,.75) inset,
             0 0 22px rgba(255,201,60,.38);
}
.luh-event-carousel__button:hover:not([disabled]) .luh-rune__ring,
.luh-event-carousel__button:focus-visible .luh-rune__ring{ stroke:rgba(255,201,60,.62); }
.luh-event-carousel__button:hover:not([disabled]) .luh-rune__glyph,
.luh-event-carousel__button:focus-visible .luh-rune__glyph{ stroke:#ffd76a; }


/* DELTA card-align: .ev .ev__title had min-height:52px, which at line-height 1.25 and the clamp's
   19px ceiling is exactly two lines. A three-line title ("Pokemon Standard Tournament") overflowed
   it and pushed that card's art window ~19px below its neighbours, so the rail read as ragged.
   Use an em floor of three lines so it tracks the clamp at every viewport and all the art windows
   line up. */
.ev .ev__title{
  min-height:3.75em;   /* 3 lines x line-height 1.25 */
}



/* DELTA card-glyph: replace the tone diamond with a purpose-drawn game glyph. These are single
   solid paths on a 24 viewBox with no hairlines, drawn to stay legible at 16px, and applied as a
   MASK so each one inherits that game's existing accent colour rather than adding a new palette.
   Only games with a glyph are overridden; anything else keeps the diamond. */
.ev .ev-chip--mtg::before,
.ev .ev-chip--pokemon::before,
.ev .ev-chip--onepiece::before,
.ev .ev-chip--riftbound::before{
  width:16px;
  height:16px;
  transform:none;
  border-radius:0;
  -webkit-mask-position:center;
          mask-position:center;
  -webkit-mask-size:contain;
          mask-size:contain;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}
.ev .ev-chip--mtg::before{
  -webkit-mask-image:url("/assets/icons/g-mtg.svg?v=1785453763");
          mask-image:url("/assets/icons/g-mtg.svg?v=1785453763");
}
.ev .ev-chip--pokemon::before{
  -webkit-mask-image:url("/assets/icons/g-pokemon.svg?v=1785453763");
          mask-image:url("/assets/icons/g-pokemon.svg?v=1785453763");
}
.ev .ev-chip--onepiece::before{
  -webkit-mask-image:url("/assets/icons/g-onepiece.svg?v=1785453763");
          mask-image:url("/assets/icons/g-onepiece.svg?v=1785453763");
}
.ev .ev-chip--riftbound::before{
  -webkit-mask-image:url("/assets/icons/g-riftbound.svg?v=1785453763");
          mask-image:url("/assets/icons/g-riftbound.svg?v=1785453763");
}

.ev .ev-chip--prerelease-sealed::before{
  width:16px; height:16px; transform:none; border-radius:0;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-image:url("/assets/icons/g-sealed.svg?v=1785453763");
          mask-image:url("/assets/icons/g-sealed.svg?v=1785453763");
}


/* DELTA evrow-glyph: the /events rows use the same .ev-chip markup as the rail, but the glyph
   rules were scoped to .ev, so the same game showed a glyph on the homepage and a diamond on the
   events page. One language across the site. */
.evrow .ev-chip--mtg::before,
.evrow .ev-chip--pokemon::before,
.evrow .ev-chip--onepiece::before,
.evrow .ev-chip--riftbound::before,
.evrow .ev-chip--prerelease-sealed::before{
  width:15px; height:15px; transform:none; border-radius:0;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.evrow .ev-chip--mtg::before{-webkit-mask-image:url("/assets/icons/g-mtg.svg?v=1785453953");mask-image:url("/assets/icons/g-mtg.svg?v=1785453953");}
.evrow .ev-chip--pokemon::before{-webkit-mask-image:url("/assets/icons/g-pokemon.svg?v=1785453953");mask-image:url("/assets/icons/g-pokemon.svg?v=1785453953");}
.evrow .ev-chip--onepiece::before{-webkit-mask-image:url("/assets/icons/g-onepiece.svg?v=1785453953");mask-image:url("/assets/icons/g-onepiece.svg?v=1785453953");}
.evrow .ev-chip--riftbound::before{-webkit-mask-image:url("/assets/icons/g-riftbound.svg?v=1785453953");mask-image:url("/assets/icons/g-riftbound.svg?v=1785453953");}
.evrow .ev-chip--prerelease-sealed::before{-webkit-mask-image:url("/assets/icons/g-sealed.svg?v=1785453953");mask-image:url("/assets/icons/g-sealed.svg?v=1785453953");}


/* DELTA newgame-tones: Lorcana, Digimon, Dragonball Super, Union Arena, Palworld and
   Star Wars Unlimited had no tone, so any event tagged with them rendered with the default
   gold diamond and generic art wash. Give each one an accent and an art gradient so it
   reads as a real game in the rail, the events rows and the hex art. Palette only, no
   brand marks. */
.ev-chip--lorcana::before{ background:#2fb894; }
.ev-chip--digimon::before{ background:#e8873a; }
.ev-chip--dragonball::before{ background:#f0a828; }
.ev-chip--unionarena::before{ background:#c04ad0; }
.ev-chip--palworld::before{ background:#3fb6c8; }
.ev-chip--starwars::before{ background:#5b8dd9; }
[data-tone="lorcana"] :is(.hex__img,.ev__art img){ background:radial-gradient(70% 45% at 50% 34%,rgba(47,184,148,.68),transparent 62%),linear-gradient(180deg,#1b2547,#101a34 55%,#070c1c); }
[data-tone="digimon"] :is(.hex__img,.ev__art img){ background:radial-gradient(70% 45% at 50% 34%,rgba(232,135,58,.68),transparent 62%),linear-gradient(180deg,#1b2547,#101a34 55%,#070c1c); }
[data-tone="dragonball"] :is(.hex__img,.ev__art img){ background:radial-gradient(70% 45% at 50% 34%,rgba(240,168,40,.68),transparent 62%),linear-gradient(180deg,#1b2547,#101a34 55%,#070c1c); }
[data-tone="unionarena"] :is(.hex__img,.ev__art img){ background:radial-gradient(70% 45% at 50% 34%,rgba(192,74,208,.68),transparent 62%),linear-gradient(180deg,#1b2547,#101a34 55%,#070c1c); }
[data-tone="palworld"] :is(.hex__img,.ev__art img){ background:radial-gradient(70% 45% at 50% 34%,rgba(63,182,200,.68),transparent 62%),linear-gradient(180deg,#1b2547,#101a34 55%,#070c1c); }
[data-tone="starwars"] :is(.hex__img,.ev__art img){ background:radial-gradient(70% 45% at 50% 34%,rgba(91,141,217,.68),transparent 62%),linear-gradient(180deg,#1b2547,#101a34 55%,#070c1c); }


/* DELTA events-calendar */
/* Level Up Hobbies events calendar.
 *
 * Uses the store's existing identity: navy field, cream paper, gold rules and small-cap labels,
 * red only as the accent shadow that already appears on the site's buttons. Serif headings, because
 * the rest of the site is serif and a sans calendar would read as a bolted-on widget.
 *
 * The month grid is a real <table>, so it stays a grid on every screen. On phones the cells get
 * smaller and the per-day detail moves into the agenda below rather than being crammed into a
 * 40px box, which is what made the earlier attempt unreadable. Nothing here relies on colour
 * alone: every state also carries text or a shape.
 */

.evcal {
  --nav:   #0B1B33;
  --cream: #F3EAD6;
  --gold:  #D4A24A;
  --red:   #C1272D;
  --rule:  rgba(212, 162, 74, .38);
  --ink:   #0B1B33;

  background: var(--cream);
  color: var(--ink);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--rule);
}

.evcal__head { margin-bottom: 1.25rem; }
.evcal__eyebrow {
  margin: 0 0 .35rem;
  font: 600 .72rem/1 inherit;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8a6a28;
}
.evcal__title {
  margin: 0;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  letter-spacing: .01em;
}

/* --- month navigation --------------------------------------------------- */
.evcal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem 0;
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--rule);
  margin-bottom: .9rem;
}
.evcal__month {
  margin: 0;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  letter-spacing: .02em;
  text-align: center;
  flex: 1 1 auto;
}
.evcal__navbtn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  /* 44px minimum so it clears the WCAG 2.5.8 target size the site was previously failing. */
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding: .45rem .8rem;
  color: var(--nav);
  text-decoration: none;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, .35);
  font-weight: 700;
  font-size: .9rem;
}
.evcal__navbtn:hover,
.evcal__navbtn:focus-visible { background: var(--gold); color: var(--nav); }
.evcal__navbtn--off { opacity: .3; cursor: default; }
.evcal__navlabel { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }

/* --- the grid ----------------------------------------------------------- */
.evcal__grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.evcal__grid th {
  padding: .5rem .25rem;
  font: 600 .7rem/1 inherit;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7d6229;
  border-bottom: 1px solid var(--rule);
}
.evcal__cell {
  vertical-align: top;
  border: 1px solid var(--rule);
  height: clamp(64px, 11vw, 118px);
  padding: 0;
  background: rgba(255, 255, 255, .22);
}
.evcal__cell--pad { background: transparent; border-color: transparent; }
.evcal__cell--today { box-shadow: inset 0 0 0 2px var(--gold); }
.evcal__cell--sel   { background: rgba(212, 162, 74, .22); }

.evcal__day {
  display: block;
  height: 100%;
  padding: .35rem .4rem;
  color: inherit;
  text-decoration: none;
}
.evcal__day--empty { color: rgba(11, 27, 51, .38); }
.evcal__cell--has .evcal__day:hover,
.evcal__cell--has .evcal__day:focus-visible { background: rgba(212, 162, 74, .3); }
.evcal__daynum { font-weight: 700; font-size: .92rem; }

/* Dots are a secondary cue only; the day number and the agenda carry the meaning. */
.evcal__dots { display: flex; gap: 3px; margin-top: 3px; }
.evcal__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nav); }
.evcal__dot--magic-the-gathering { background: #b8860b; }
.evcal__dot--pokemon             { background: #c62828; }
.evcal__dot--palworld            { background: #1f8a70; }
.evcal__dot--one-piece           { background: #d1495b; }
.evcal__dot--digimon             { background: #2f5d8f; }
.evcal__dot--riftbound           { background: #6a4c93; }

.evcal__mini { list-style: none; margin: .2rem 0 0; padding: 0; }
.evcal__minirow {
  font-size: .68rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evcal__minitime { font-weight: 700; margin-right: .2rem; }
/* cancelled-calendar-styling-v1: a cancelled date has to be legible as cancelled at a glance.
   The previous rule was line-through plus opacity .55, which at .68rem reads as "slightly faded"
   and is easy to scan past. Dark grey border marks the row as its own state, and the time is
   replaced by a red X, because the time is the one thing that no longer means anything. Brand red
   reused from the hero headline rather than a new colour. The X itself is never struck through. */
/* sealed-foil-gradient-v1: Prerelease Sealed reads as FOIL. Two changes Tyler asked for.
   1) The whole calendar row gets a GRADIENT BORDER, not a gradient bar on one edge. border-image
      is used deliberately: the double-background trick would need the row's own background colour
      restated, and this calendar paints cells with per-day art, so any solid inner layer would
      punch a hole in it. border-image composites over whatever is behind it.
   2) The ICON ITSELF becomes the gradient. The glyph is a CSS mask (g-sealed.svg), so painting a
      gradient as the element's background makes the mask clip the gradient to the glyph shape.
      That is a genuinely gradient icon rather than a gradient bar sitting on top of a flat one.
   Colours are DERIVED from the project, not invented: #68CBFB is the sealed accent already at
   line ~4754, and #EFBF4D is the gold already used by the hero button gradient. Cyan to gold to
   cyan is the holo shimmer of a sealed product, which is the point. */
/* prerelease-flag-foil-v1: foil coloured BY THE GAME. --evc-accent is the per-game colour
   (Magic gold, Palworld green, ...), so a prerelease of any game gets a holo foil in THAT game's
   colour, with two shimmer tones derived from it via color-mix. Keyed to the prerelease FLAG so
   the event keeps its real game colour instead of a fake prerelease-sealed game. */
.evcal__minirow[data-prerelease="1"],
.evcal__minirow[data-gk="prerelease-sealed"] {
  /* prerelease-foil-bold-v1: bolder so it reads at a glance - 3px, a bright white shimmer band,
     and a game-coloured glow. */
  border: 3px solid transparent !important;
  border-image: linear-gradient(120deg,
      var(--evc-accent, #68CBFB),
      color-mix(in srgb, var(--evc-accent, #68CBFB) 28%, #ffffff) 38%,
      #ffffff 50%,
      color-mix(in srgb, var(--evc-accent, #68CBFB) 28%, #ffffff) 62%,
      var(--evc-accent, #68CBFB)) 1 !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--evc-accent, #68CBFB) 60%, transparent),
              0 0 11px 1px color-mix(in srgb, var(--evc-accent, #68CBFB) 48%, transparent) !important;
}
/* A cancelled sealed date is still cancelled: grey wins over foil so the state is unambiguous. */
.evcal__minirow.is-cancelled[data-prerelease="1"],
.evcal__item.is-cancelled[data-prerelease="1"],
.evcal__minirow.is-cancelled[data-gk="prerelease-sealed"],
.evcal__item.is-cancelled[data-gk="prerelease-sealed"] {
  border-image: none !important;
  border: 1px solid #4a4a4f !important;
}
.ev [data-prerelease="1"] .ev-chip::before,
.evrow [data-prerelease="1"] .ev-chip::before,
.ev .ev-chip--prerelease-sealed::before,
.evrow .ev-chip--prerelease-sealed::before,
.evcal .ev-chip--prerelease-sealed::before {
  /* prerelease-flag-foil-v1: the sealed glyph filled with the GAME'S foil, not a fixed cyan-gold. */
  background-color: transparent !important;
  background-image: linear-gradient(135deg,
      var(--evc-accent, #68CBFB),
      color-mix(in srgb, var(--evc-accent, #68CBFB) 45%, #ffffff) 50%,
      var(--evc-accent, #68CBFB)) !important;
}
/* occurrence-reason-render-v1: structural only, inherits colour so no palette is invented. */
.evcal__why { display:block; width:100%; margin-top:.18rem; font-size:.66rem;
  line-height:1.3; opacity:.85; text-decoration:none; white-space:normal; }
.evcal__item.is-cancelled .evcal__why { text-decoration:none; }
.evcal__minirow.is-cancelled {
  text-decoration: line-through;
  opacity: .72;
  border: 1px solid #4a4a4f !important;
  border-radius: 4px;
  padding: 0 .18rem;
}
.evcal__minirow.is-cancelled .evcal__minitime {
  position: relative;
  color: transparent !important;
  text-decoration: none;
}
.evcal__minirow.is-cancelled .evcal__minitime::before {
  content: "\2715";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc4c37;
  font-weight: 800;
  text-decoration: none;
}
.evcal__more { font-size: .64rem; color: #7d6229; font-style: italic; }

/* Below roughly a phone width the cells cannot hold text legibly, so the mini list is
   dropped and the agenda underneath becomes the detail view. The grid itself stays. */
@media (max-width: 620px) {
  .evcal__mini { display: none; }
  .evcal__cell { height: 52px; }
  .evcal__daynum { font-size: .82rem; }
}

/* --- agenda ------------------------------------------------------------- */
.evcal__agenda { margin-top: 1.4rem; border-top: 2px solid var(--gold); padding-top: 1rem; }
.evcal__agenda:focus { outline: none; }
.evcal__agendahead { margin: 0 0 .75rem; font-size: 1.05rem; letter-spacing: .01em; }
.evcal__empty { margin: 0; color: rgba(11, 27, 51, .72); }
.evcal__empty a { color: #8a6a28; }

.evcal__list { list-style: none; margin: 0; padding: 0; }
.evcal__item {
  display: flex;
  gap: .85rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.evcal__item:last-child { border-bottom: 0; }
.evcal__itemtime {
  flex: 0 0 5.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.evcal__itembody { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.evcal__chip {
  font: 600 .64rem/1 inherit;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .25rem .45rem;
  border: 1px solid var(--rule);
  color: #7d6229;
}
/* Per-game chip tint, mirroring the dot colours so the two cues agree. The chip always
   carries the game NAME as text, so colour is never the only signal. */
.evcal__chip--magic-the-gathering { color: #8a6410; border-color: rgba(184,134,11,.5); }
.evcal__chip--pokemon             { color: #a01f1f; border-color: rgba(198,40,40,.45); }
.evcal__chip--palworld            { color: #14705a; border-color: rgba(31,138,112,.5); }
.evcal__chip--one-piece           { color: #a3364a; border-color: rgba(209,73,91,.45); }
.evcal__chip--digimon             { color: #24486f; border-color: rgba(47,93,143,.45); }
.evcal__chip--riftbound           { color: #55407a; border-color: rgba(106,76,147,.45); }

.evcal__minititle { font-weight: 600; }

.evcal__itemlink {
  color: var(--nav);
  font-weight: 700;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
.evcal__itemlink:hover { color: var(--red); }
.evcal__fee { font-weight: 700; color: #8a6a28; }
.evcal__fee--free { color: #1f7a4d; }
.evcal__flag {
  font: 700 .64rem/1 inherit;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .45rem;
  color: #fff;
  background: var(--red);
}
.evcal__item.is-cancelled .evcal__itemlink { text-decoration: line-through; opacity: .7; }

@media (max-width: 620px) {
  .evcal__item { flex-direction: column; gap: .3rem; }
  .evcal__itemtime { flex: none; }
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* The grid is the one thing allowed to scroll sideways if a narrow phone still overflows,
   so the page body never does. */
@media (max-width: 380px) {
  .evcal__grid { display: block; overflow-x: auto; }
}

/* Dark variant, so the calendar can alternate with the site's cream sections the way the
   events list already does. Same structure, inverted field. */
.evcal--dark {
  background: var(--nav);
  color: var(--cream);
  --ink: #F3EAD6;
}
.evcal--dark .evcal__eyebrow,
.evcal--dark .evcal__grid th,
.evcal--dark .evcal__more,
.evcal--dark .evcal__chip { color: var(--gold); }
.evcal--dark .evcal__cell { background: rgba(243, 234, 214, .06); }
.evcal--dark .evcal__navbtn { background: rgba(243, 234, 214, .08); color: var(--cream); }
.evcal--dark .evcal__navbtn:hover,
.evcal--dark .evcal__navbtn:focus-visible { background: var(--gold); color: var(--nav); }
.evcal--dark .evcal__day--empty { color: rgba(243, 234, 214, .35); }
.evcal--dark .evcal__itemlink { color: var(--cream); }
.evcal--dark .evcal__itemlink:hover { color: var(--gold); }
.evcal--dark .evcal__fee { color: var(--gold); }
.evcal--dark .evcal__fee--free { color: #6fcf97; }
.evcal--dark .evcal__empty { color: rgba(243, 234, 214, .75); }
.evcal--dark .evcal__cell--sel { background: rgba(212, 162, 74, .18); }
/* DELTA event-schedule-change */
.luh-event-detail__change{max-width:34rem;margin:.75rem 0 0;padding:.75rem 1rem;border-left:3px solid var(--gold);color:var(--cream-2)}
.luh-event-detail__change--cancelled{border-left-color:#c1272d}
.luh-event-detail__change--postponed{border-left-color:var(--gold-soft)}
/* DELTA buybox-viewport-fit */
@media (min-width:1024px) and (max-height:900px){
  .product-buybox{padding:16px 20px 14px}
  .product-buybox>*+*{margin-block-start:.55rem}
  .product-buybox .product-title{font-size:clamp(1.6rem,2.4vw,2.3rem);line-height:1.05;margin-block:0}
  .product-buybox .product-subtitle{margin-block:.35rem}
  .product-buybox .product-price{margin-block:.3rem}
  .product-event-schedule{padding:.5rem .75rem}
  .product-rule{margin-block:.6rem}
  .fulfillment{margin-block:.5rem}
  .fulfillment-option{padding:.55rem .7rem}
  .fulfillment-option__copy small{display:none}
  .product-buybox .product-trust,.product-buybox .product-trust *{font-size:.72rem;line-height:1.25}
}
@media (min-width:1024px) and (max-height:760px){
  .product-buybox{padding:12px 18px 12px}
  .product-buybox>*+*{margin-block-start:.4rem}
  .fulfillment-option__copy em{display:none}
  .product-buybox .product-subtitle{display:none}
}
/* DELTA view-cart-arrow */
.pickup-details>span[aria-hidden]{
  display:inline-block;
  margin-inline-start:.4em;
  text-decoration:none;
  transform:translateY(-.02em);
}
/* DELTA gallery-zoom */
.product-gallery__zoom{cursor:zoom-in}
.product-zoom{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(3,8,28,.92);backdrop-filter:blur(2px)}
.product-zoom.is-open{display:flex}
.product-zoom__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border:1px solid rgba(255,201,60,.28);box-shadow:0 2rem 5rem rgba(0,0,0,.55)}
.product-zoom__close{position:absolute;top:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,2vw,1.5rem);
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid rgba(255,201,60,.45);background:rgba(6,19,54,.85);color:var(--gold,#ffc93c);cursor:pointer}
.product-zoom__close svg{width:22px;height:22px}
.product-zoom__close:focus-visible{outline:2px solid var(--gold,#ffc93c);outline-offset:2px}
html.has-zoom-open{overflow:hidden}
/* DELTA calendar-overflow-fix */
.evcal__cell{height:auto;min-height:52px;overflow:hidden;position:relative}
.evcal__mini{max-width:100%;overflow:hidden}
.evcal__minirow{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evcal__grid{overflow:hidden}
.evcal{padding-block-end:clamp(2rem,5vw,3.5rem)}
@media (min-width:900px){
  .evcal__cell{min-height:88px}
}
/* DELTA calendar-cell-polish */
.evcal__cell{min-height:104px;padding:.4rem .45rem .45rem}
@media (min-width:900px){.evcal__cell{min-height:132px}}
.evcal__mini{display:flex;flex-direction:column;gap:.14rem;margin-top:.28rem}
.evcal__minirow{display:flex;align-items:center;gap:.3rem;font-size:.74rem;line-height:1.25}
.evcal__minidot{flex:0 0 auto;width:.44rem;height:.44rem;border-radius:50%;background:currentColor;opacity:.9}
.evcal__minitime{flex:0 0 auto;font-weight:700}
.evcal__minititle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evcal__more{margin-top:.2rem;font-size:.7rem;font-style:italic;opacity:.75}
.evcal__dots--hidden{display:none}
/* DELTA calendar-event-modal */
.evcal__minilink{display:flex;align-items:center;gap:.3rem;min-width:0;color:inherit;text-decoration:none;cursor:pointer}
.evcal__minilink:hover .evcal__minititle,.evcal__minilink:focus-visible .evcal__minititle{text-decoration:underline}
.evcal__minilink:focus-visible{outline:2px solid var(--gold,#d4a24a);outline-offset:1px}
.evmodal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(3,8,28,.86)}
.evmodal.is-open{display:flex}
.evmodal__card{position:relative;width:min(30rem,100%);padding:clamp(1.25rem,3vw,2rem);
  background:var(--cream,#f3ead6);color:var(--navy-900,#0b1b33);
  border:1px solid rgba(212,162,74,.5);box-shadow:0 2rem 5rem rgba(0,0,0,.5)}
.evmodal__close{position:absolute;top:.5rem;right:.5rem;width:44px;height:44px;display:inline-flex;
  align-items:center;justify-content:center;border:0;background:transparent;color:inherit;cursor:pointer}
.evmodal__close svg{width:20px;height:20px}
.evmodal__day{margin:0;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.evmodal__title{margin:.25rem 0 .6rem;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.15}
.evmodal__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 1rem}
.evmodal__time{font-weight:700}
.evmodal__fee{color:#8a6a1f;font-weight:700}
.evmodal__go{display:inline-block;padding:.6rem 1rem;min-height:44px;line-height:1.6;
  border:1px solid rgba(212,162,74,.7);font-weight:700;text-decoration:none;color:inherit}
.evmodal__go:hover,.evmodal__go:focus-visible{background:rgba(212,162,74,.18)}
.evmodal.is-cancelled .evmodal__title{text-decoration:line-through;opacity:.7}
html.has-evmodal-open{overflow:hidden}


/* DELTA calendar-aesthetic-v2
 *
 * Brighter month grid, navy selected day, and an image-backed selected-day agenda.
 *
 * Palette is the store's own: navy #0B1B33, cream #F3EAD6, gold #D4A24A, red #C1272D. The grid
 * surface goes white so the calendar reads as paper on the cream section rather than cream on
 * cream, which is what made the old grid feel flat and hard to scan.
 *
 * Game accents are keyed on cms_luh_event_game_key() output. Every accent below is also carried
 * by a text label, so colour is never the only signal.
 */
.evcal{ --evc-paper:#FFFDF9; --evc-line:#E4DAC4; --evc-muted:#6B6152; --evc-accent:var(--gold); }

/* Game accents. Chosen for legibility on white and cream, not for franchise fidelity. */
.evcal [data-gk="mtg"]        { --evc-accent:#B8860B; }
.evcal [data-gk="pokemon"]    { --evc-accent:#C62828; }
.evcal [data-gk="onepiece"]   { --evc-accent:#D1495B; }
.evcal [data-gk="one-piece"]  { --evc-accent:#D1495B; }
.evcal [data-gk="digimon"]    { --evc-accent:#2F5D8F; }
.evcal [data-gk="riftbound"]  { --evc-accent:#6A4C93; }
.evcal [data-gk="palworld"]   { --evc-accent:#1F8A70; }
/* lorcana-pink-v2: originally #2F7D6A, hue 165 - the SAME hue as palworld's #1F8A70, so the two
   games were indistinguishable. v1 used #C2185B, chosen against the calendar PAPER (#FFFDF9),
   which was the wrong surface: the calendar this actually renders on is dark navy #061A30, where
   #C2185B scored only 2.98:1 and sat perceptually close to pokemon #C62828 (dE 33). #FF7BAC is
   7.25:1 on #061A30 and dE 49 from that red, so it is both more legible and clearly not the red. */
.evcal [data-gk="lorcana"]    { --evc-accent:#FF7BAC; }
.evcal [data-gk="fab"]        { --evc-accent:#8A4B2A; }
.evcal [data-gk="yugioh"]     { --evc-accent:#8A5A00; }
.evcal [data-gk="dragonball"], .evcal [data-gk="dragonball-super"] { --evc-accent:#C2610A; }
.evcal [data-gk="unionarena"], .evcal [data-gk="union-arena"]      { --evc-accent:#8E3B96; }
.evcal [data-gk="starwars"],   .evcal [data-gk="star-wars-unlimited"] { --evc-accent:#3A6EA5; }
.evcal [data-gk="dnd"], .evcal [data-gk="dungeons-dragons"], .evcal [data-gk="d-d"] { --evc-accent:#A33A2E; }

/* The dot and chip now inherit the same accent, so one rule feeds every marker. */
.evcal__dot, .evcal__minidot{ background:var(--evc-accent) !important; } /* overrides the older
    per-game rules that keyed on a vocabulary the markup never emitted */
.evcal__chip{ color:var(--evc-accent); border-color:color-mix(in srgb, var(--evc-accent) 45%, transparent); }

/* --- month grid ------------------------------------------------------------------------- */
.evcal__grid{ background:var(--evc-paper); border:1px solid var(--evc-line); border-radius:4px; }
.evcal__grid thead th{ background:#FCFAF5; border-bottom:1px solid var(--evc-line);
  font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; padding:.6rem .3rem; }
.evcal__cell{ border-right:1px solid var(--evc-line); border-bottom:1px solid var(--evc-line);
  background:var(--evc-paper); }
.evcal__cell:nth-child(7n){ border-right:0; }
.evcal__cell--pad{ background:#FAF7EF; }
.evcal__daynum{ font-weight:800; }
.evcal__cell--today .evcal__daynum{ display:inline-flex; align-items:center; justify-content:center;
  width:1.65rem; height:1.65rem; border-radius:50%; background:var(--gold); color:#0B1B33; }
.evcal__cell--sel{ background:linear-gradient(180deg,#0B1B33,#07152E); color:#FFF; }
.evcal__cell--sel .evcal__day,
.evcal__cell--sel .evcal__minilink,
.evcal__cell--sel .evcal__more{ color:#FFF; }
.evcal__cell--sel .evcal__daynum{ color:#FFF; }
.evcal__cell--sel.evcal__cell--today .evcal__daynum{ color:#0B1B33; }

/* --- legend ----------------------------------------------------------------------------- */
.evcal__legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.1rem;
  margin:.9rem 0 0; padding:0; list-style:none; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--evc-muted); }
.evcal__legenditem{ display:inline-flex; align-items:center; gap:.4rem; }
.evcal__legenddot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--evc-accent); }

/* --- selected-day agenda ---------------------------------------------------------------- */
.evcal__agendahead{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.5rem 1rem; }
.evcal__agendacount{ font-size:.74rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--evc-muted); }
.evcal__list{ display:grid; gap:.4rem; margin:0; padding:0; list-style:none; }
.evcal__item{ display:grid; grid-template-columns:clamp(9rem,17vw,13rem) auto minmax(0,1fr) auto;
  align-items:center; gap:.9rem; padding:.45rem .8rem .45rem .45rem;
  background:var(--evc-paper); border:1px solid var(--evc-line);
  border-left:3px solid var(--evc-accent); border-radius:4px; }
.evcal__art{ display:block; overflow:hidden; border-radius:3px; background:#0B1B33; aspect-ratio:16/5; }
.evcal__art img{ display:block; width:100%; height:100%; object-fit:cover; }
.evcal__art--empty{ background:linear-gradient(135deg,var(--evc-accent),#0B1B33); }
.evcal__itemtime{ font-size:1.05rem; font-weight:800; white-space:nowrap; }
.evcal__itembody{ display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; min-width:0; }
.evcal__itemlink{ font-weight:700; text-decoration:none; color:inherit; }
.evcal__itemlink:hover, .evcal__itemlink:focus-visible{ text-decoration:underline;
  text-decoration-color:var(--evc-accent); text-underline-offset:3px; }
.evcal__viewall{ display:flex; justify-content:center; margin-top:1.1rem; }
.evcal__viewall a{ display:inline-flex; align-items:center; min-height:44px; padding:0 1.15rem;
  border:1px solid rgba(212,162,74,.7); border-radius:4px; background:var(--evc-paper);
  color:var(--ink); font-size:.72rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; }
.evcal__viewall a:hover, .evcal__viewall a:focus-visible{ background:rgba(212,162,74,.16); }

@media (max-width:820px){
  .evcal__item{ grid-template-columns:clamp(7rem,26vw,10rem) minmax(0,1fr);
    grid-template-areas:"art time" "art body" "art fee"; row-gap:.15rem; }
  .evcal__art{ grid-area:art; align-self:start; }
  .evcal__itemtime{ grid-area:time; }
  .evcal__itembody{ grid-area:body; }
  .evcal__fee{ grid-area:fee; }
}
@media (max-width:520px){
  .evcal__item{ grid-template-columns:1fr; grid-template-areas:"art" "time" "body" "fee"; }
  .evcal__art{ aspect-ratio:16/6; }
}


/* DELTA calendar-nerdy-v3  (see fix-calendar-nerdy.py for the reasoning behind each block) */
.evcal{
  --evc-panel:#0B1B33; --evc-panel-2:#06122A;
  --evc-hair:rgba(212,162,74,.24);
  --evc-hair-strong:rgba(212,162,74,.58);
  --evc-on-panel:#F3EAD6;
  --evc-dim:rgba(243,234,214,.30);
}

/* --- 1+2. the panel: navy, textured, gold-ticked ------------------------------------------- */
.evcal__grid{
  position:relative;
  background:
    repeating-linear-gradient(135deg, rgba(212,162,74,.030) 0 2px, transparent 2px 7px),
    linear-gradient(180deg,var(--evc-panel) 0%,var(--evc-panel-2) 100%);
  border:1px solid var(--evc-hair-strong);
  border-radius:3px;
  box-shadow:0 1.5rem 3.2rem rgba(6,20,43,.30), inset 0 0 0 1px rgba(212,162,74,.10);
  color:var(--evc-on-panel);
  overflow:hidden;
}
.evcal__grid thead th{
  background:rgba(212,162,74,.11);
  border-bottom:1px solid var(--evc-hair-strong);
  color:var(--gold);
  font-size:.66rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase;
  padding:.72rem .3rem;
}
.evcal__cell{
  background:transparent;
  border-right:1px solid var(--evc-hair);
  border-bottom:1px solid var(--evc-hair);
  color:var(--evc-on-panel);
}
.evcal__cell:nth-child(7n){ border-right:0; }
.evcal__cell--pad{ background:rgba(3,8,24,.40); }
.evcal__cell--pad .evcal__daynum{ color:rgba(243,234,214,.14); }
.evcal__day--empty .evcal__daynum{ color:var(--evc-dim); font-weight:600; }
.evcal__daynum{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.05rem; font-weight:700; color:var(--evc-on-panel);
}
.evcal__cell--has .evcal__daynum{ color:var(--gold); font-weight:800; }
.evcal__cell--today .evcal__daynum{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.8rem; height:1.8rem; border-radius:50%;
  background:var(--gold); color:#06122A;
}
.evcal__cell--sel{
  background:linear-gradient(180deg,rgba(212,162,74,.16),rgba(212,162,74,.05));
  box-shadow:inset 0 0 0 2px var(--gold);
}
.evcal__cell--sel .evcal__daynum{ color:var(--gold); }

/* event chips inside a day */
.evcal__minirow{
  border-left:3px solid var(--evc-accent,var(--gold));
  background:rgba(243,234,214,.075);
  border-radius:2px;
  padding:.17rem .3rem .17rem .34rem;
}
.evcal__minirow:hover{ background:rgba(243,234,214,.15); }
.evcal__minilink{ color:var(--evc-on-panel); }
.evcal__minidot{ display:none; }             /* the accent bar already carries the colour */
.evcal__minitime{ color:var(--gold); font-weight:800; font-size:.7rem; }
.evcal__minititle{ color:var(--evc-on-panel); font-weight:600; }
.evcal__more{ color:var(--gold); font-style:normal; font-weight:800; opacity:1;
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; }

.evcal__month{ font-family:Georgia,'Times New Roman',serif; letter-spacing:.02em; }
.evcal__legend{ color:#7A6746; font-weight:700; }

/* --- 3. per-game art plate ------------------------------------------------------------------ */
.evcal__art{ background:#0B1B33; }
.evcal__art--empty{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px),
    linear-gradient(135deg, var(--evc-accent,var(--gold)) 0%, #0B1B33 78%);
}

/* --- 4/5. ONE divider treatment: the site's hairline-and-diamond, never a cream-on-cream tear */
.evcal__head{ border-bottom:0 !important; padding-bottom:.35rem; }  /* the solid rule it used to
    draw competed with the diamond divider directly above it */
.evcal__head::after{
  content:""; display:block; position:relative; height:26px; margin-top:.4rem;
}
.evcal__head::before{ content:none; }
.evcal .evcal__head + .evcal__nav{ margin-top:.2rem; }

/* Kill the torn edge that separates the calendar from the upcoming list. Both bands are cream, so
 * that tear has no colour change to describe and reads as a broken graphic. The tears that DO
 * separate navy from cream are untouched. */
.luh-events-list.ground-cream.ripped::before,
.luh-events-list.ground-cream.ripped::after{ display:none !important; }
.luh-events-list.ground-cream.ripped{
  padding-top:0 !important; background-image:none !important;
}
.luh-events-list.ground-cream.ripped > *:first-child{ margin-top:0; }

/* --- 6. the view-all control ---------------------------------------------------------------- */
.evcal__viewall{ margin-top:1.5rem; margin-bottom:.2rem; }
.evcal__viewall a{
  background:var(--evc-panel); border:1px solid var(--gold); color:var(--gold); letter-spacing:.1em;
}
.evcal__viewall a:hover, .evcal__viewall a:focus-visible{ background:var(--gold); color:#06122A; }
.evcal{ padding-block-end:clamp(2.4rem,5vw,3.6rem); }


/* DELTA calendar-tear-v4
 * The calendar and the upcoming list are both cream, so the rip between them has no colour change
 * to describe and only ever looked broken. Undo the mask AND the negative margin it pairs with.
 * The navy-to-cream tears elsewhere on the page are untouched and still do their job.
 */
.luh-events-list.ground-cream.ripped{
  -webkit-mask-image:none !important;
  mask-image:none !important;
  margin-top:0 !important;
  padding-top:var(--pad-inner) !important;
}
/* One divider treatment across the section: the site's own hairline with a gold diamond. */
.evcal__viewall{ padding-bottom:.6rem; }


/* DELTA calendar-cards-v5  (see fix-calendar-cards.py for why each block exists) */

/* --- event days carry their game's artwork --------------------------------------------------
 * --day-art is set inline on the cell from the first event on that day. Dimmed hard so the
 * numerals and chips stay legible; the point is a hint of the world, not a photo gallery.
 */
.evcal__cell--has{
  background-image:
    linear-gradient(180deg, rgba(6,18,42,.86) 0%, rgba(6,18,42,.93) 100%),
    var(--day-art, none);
  background-size:cover, cover;
  background-position:center, center;
}
.evcal__cell--has:hover{
  background-image:
    linear-gradient(180deg, rgba(6,18,42,.74) 0%, rgba(6,18,42,.88) 100%),
    var(--day-art, none);
}
.evcal__cell--sel.evcal__cell--has{
  background-image:
    linear-gradient(180deg, rgba(212,162,74,.20) 0%, rgba(6,18,42,.90) 100%),
    var(--day-art, none);
}

/* --- the selected-day events become CARDS, not list rows ------------------------------------ */
.evcal__list{ gap:.75rem; }
.evcal__item{
  position:relative;
  overflow:hidden;
  gap:0;
  padding:0;
  grid-template-columns:clamp(8rem,15vw,11.5rem) minmax(0,1fr);
  align-items:stretch;
  min-height:7.2rem;
  border:1px solid rgba(212,162,74,.42);
  border-left:0;
  border-radius:3px;
  background:linear-gradient(135deg,#10294E 0%,#0B1B33 46%,#06122A 100%);
  color:#F3EAD6;
  box-shadow:0 .9rem 2rem rgba(6,20,43,.30);
  transition:transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.evcal__item:hover{
  transform:translateY(-2px);
  border-color:var(--evc-accent,var(--gold));
  box-shadow:0 1.3rem 2.6rem rgba(6,20,43,.42);
}
/* the foil sheen the rail cards already use */
.evcal__item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 34%, rgba(243,234,214,.09) 47%, transparent 60%);
}
/* the accent lives on the art edge, not as a stray left border */
.evcal__item::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:4px; z-index:2;
  background:var(--evc-accent,var(--gold));
}

.evcal__art{
  grid-area:auto; align-self:stretch; height:auto; aspect-ratio:auto;
  border-radius:0; position:relative;
}
.evcal__art img{ width:100%; height:100%; object-fit:cover; }
/* the art bleeds into the card body instead of stopping at a hard rectangle edge */
.evcal__art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,27,51,0) 55%, rgba(11,27,51,.92) 100%);
}

.evcal__itemtime{
  position:absolute; z-index:3; left:calc(clamp(8rem,15vw,11.5rem) + .1rem); top:.85rem;
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.18rem; font-weight:700; color:var(--gold); letter-spacing:.01em;
}
.evcal__itembody{
  grid-column:2; z-index:3;
  display:flex; flex-direction:column; align-items:flex-start; gap:.42rem;
  padding:2.6rem 1.1rem 1rem 1.1rem;
}
.evcal__chip{
  order:-1;
  padding:.16rem .5rem; border-radius:2px;
  background:var(--evc-accent,var(--gold)); border:0; color:#06122A;
  font-size:.62rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
}
.evcal__itemlink{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.06rem,1.6vw,1.34rem); font-weight:700; line-height:1.16; color:#F3EAD6;
}
.evcal__itemlink:hover, .evcal__itemlink:focus-visible{
  color:var(--gold); text-decoration-color:var(--gold);
}
.evcal__fee{
  display:inline-flex; align-items:center; padding:.2rem .55rem;
  border:1px solid rgba(212,162,74,.55); border-radius:2px;
  color:var(--gold); font-size:.76rem; font-weight:800; letter-spacing:.04em;
}
.evcal__fee--free{ border-color:rgba(120,190,150,.6); color:#8FD3AA; }
.evcal__item.is-cancelled{ opacity:.62; }
.evcal__item.is-cancelled .evcal__itemlink{ text-decoration:line-through; }

.evcal__agendahead{ color:var(--ink); }
.evcal__agendacount{ color:#7A6746; }

@media (max-width:640px){
  .evcal__item{ grid-template-columns:1fr; grid-template-areas:"art" "body"; min-height:0; }
  .evcal__art{ grid-area:art; aspect-ratio:16/6; }
  .evcal__art::after{
    background:linear-gradient(180deg, rgba(11,27,51,0) 40%, rgba(11,27,51,.94) 100%);
  }
  .evcal__itemtime{ position:static; padding:.9rem 1rem 0; }
  .evcal__itembody{ grid-area:body; padding:.35rem 1rem 1rem; }
}


/* DELTA calendar-marks-v6  (see fix-calendar-marks.py) */

/* --- the d20 on the section eyebrow ---------------------------------------------------------- */
.evcal__eyebrow{ display:inline-flex; align-items:center; gap:.5rem; }
.evcal__eyebrow::before{
  content:""; width:1.15rem; height:1.15rem; flex:0 0 auto;
  background:url("/assets/icons/events/dice-d20.png") center/contain no-repeat;
  opacity:.92;
}

/* --- game mark watermark on event days ------------------------------------------------------- */
.evcal__cell--has{ position:relative; }
.evcal__cell--has::before{
  content:""; position:absolute; right:.3rem; top:.28rem; z-index:0;
  width:2.5rem; height:2.5rem;
  background-image:var(--day-mark, none);
  background-size:contain; background-position:center; background-repeat:no-repeat;
  opacity:.22; filter:saturate(.85);
  pointer-events:none;
}
.evcal__cell--has .evcal__day,
.evcal__cell--has .evcal__mini{ position:relative; z-index:1; }
.evcal__cell--sel::before{ opacity:.34; }

/* --- the medallion on each day card ---------------------------------------------------------- */
.evcal__art{ position:relative; }
.evcal__mark{
  position:absolute; z-index:4; right:-1.35rem; top:50%; transform:translateY(-50%);
  width:2.9rem; height:2.9rem; border-radius:50%;
  background:#06122A center/62% no-repeat;
  border:1px solid rgba(212,162,74,.75);
  box-shadow:0 .4rem 1rem rgba(0,0,0,.45), inset 0 0 0 3px rgba(6,18,42,.9);
}
.evcal__item:hover .evcal__mark{ border-color:var(--gold); }
@media (max-width:640px){
  .evcal__mark{ right:auto; left:1rem; top:auto; bottom:-1.45rem; transform:none; }
  .evcal__itembody{ padding-top:1.9rem; }
}


/* DELTA calendar-cardfit-v7
 * The card owns its height; the art fills it. Previously the art's intrinsic ratio drove the card
 * and left a large empty navy field under the title.
 */
.evcal__item{
  min-height:0;
  height:clamp(6.6rem, 9vw, 8.2rem);
  grid-template-columns:clamp(9rem,17vw,13rem) minmax(0,1fr);
}
.evcal__art{
  height:100%; min-height:0; align-self:stretch;
}
.evcal__art img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Time and title stack together and sit centred, instead of the time floating absolutely. */
.evcal__itemtime{
  position:static; left:auto; top:auto;
  font-size:1.02rem; line-height:1.1; margin:0;
}
.evcal__itembody{
  padding:0 1.15rem; justify-content:center; gap:.3rem;
}
.evcal__item{ align-items:center; }
.evcal__itemlink{ font-size:clamp(1rem,1.45vw,1.22rem); }
.evcal__chip{ padding:.12rem .42rem; font-size:.58rem; }
.evcal__fee{ padding:.14rem .45rem; font-size:.72rem; }

/* Medallion sized against the real card height, and pulled fully onto the seam. */
.evcal__mark{
  width:3.3rem; height:3.3rem; right:-1.65rem;
  background-size:58%;
}

@media (max-width:640px){
  .evcal__item{ height:auto; }
  .evcal__art{ height:auto; aspect-ratio:16/6; }
  .evcal__itembody{ padding:.5rem 1rem 1rem; justify-content:flex-start; }
  .evcal__itemtime{ padding:.9rem 1rem 0; }
}


/* DELTA calendar-rowfill-v8: lay the card out ACROSS its width. */
.evcal__item{
  grid-template-columns:clamp(9rem,16vw,12.5rem) minmax(7rem,auto) minmax(0,1fr) auto;
  align-items:center;
  column-gap:1.4rem;
}
.evcal__itemtime{
  grid-column:2; display:flex; flex-direction:column; align-items:flex-start; gap:.4rem;
  padding-left:1.1rem; font-size:1.1rem;
}
.evcal__itembody{
  grid-column:3; display:flex; flex-direction:row; align-items:center; flex-wrap:wrap;
  gap:.7rem; padding:0;
}
.evcal__chip{ order:0; }
.evcal__itemlink{ order:1; font-size:clamp(1.02rem,1.5vw,1.3rem); }
.evcal__fee{ grid-column:4; justify-self:end; margin-right:1.2rem; order:0; }
.evcal__flag{ grid-column:4; justify-self:end; margin-right:1.2rem; }

@media (max-width:900px){
  .evcal__item{
    grid-template-columns:clamp(8rem,26vw,11rem) minmax(0,1fr) auto;
    column-gap:1rem;
  }
  .evcal__itemtime{ grid-column:2; padding-left:0; }
  .evcal__itembody{ grid-column:2; }
  .evcal__fee, .evcal__flag{ grid-column:3; margin-right:.9rem; }
}
@media (max-width:640px){
  .evcal__item{ grid-template-columns:1fr; }
  .evcal__itemtime,.evcal__itembody,.evcal__fee,.evcal__flag{
    grid-column:1; justify-self:start; margin-right:0;
  }
  .evcal__itembody{ padding:0 1rem .2rem; }
  .evcal__fee{ margin:0 0 .9rem 1rem; }
}


/* DELTA calendar-dividers-v9: one divider (the rip), not four. */
.evcal::before, .evcal::after{ display:none !important; content:none !important; }
.evcal{ border-top:0 !important; padding-top:clamp(1rem,2.4vw,1.9rem) !important; }
.evcal__head::after{ display:none !important; content:none !important; }
.evcal__head{ margin-bottom:.75rem !important; padding-bottom:0 !important; }
.evcal__nav{
  border-top:0 !important; border-bottom:0 !important;
  margin-top:0 !important; margin-bottom:.6rem !important;
  padding-top:0 !important;
}
.evcal__eyebrow{ margin-bottom:.3rem; }
.evcal__title{ margin:0; }


/* DELTA calendar-filter-v10
 * `hidden` is a UA display:none and loses to any author display rule. These rows and cards both
 * set display, so the filter set the attribute and nothing moved. Restore the attribute's meaning.
 */
.evcal__minirow[hidden], .evcal__item[hidden], .evcal [data-games][hidden]{ display:none !important; }
/* A day whose events are all filtered out should read as quiet, not as a broken cell. */
.evcal__cell--has:has(.evcal__mini > li:not([hidden])) { }
.evcal__cell--has:not(:has(.evcal__minirow:not([hidden]))){
  background-image:none;
}
.evcal__cell--has:not(:has(.evcal__minirow:not([hidden])))::before{ opacity:.06; }


/* DELTA calendar-litedge-v11 - lit/laser-cut gold panel. Recipe: LIT-EDGES.md. Zero `border`. */
.evcal__panel{
  --oct: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px,
                 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px));
  position:relative; isolation:isolate; margin-top:.4rem;
}
/* LAYER 1 underglow - ambient halo cast behind the panel. Blur on wrapper, clip on inner (RULE A). */
.evcal__underglow{position:absolute;inset:-14px;z-index:0;pointer-events:none;filter:blur(18px);opacity:.8}
.evcal__underglow i{position:absolute;inset:0;clip-path:var(--oct);
  background:radial-gradient(circle at 50% 100%, rgba(212,162,74,.34), transparent 38%),
             radial-gradient(circle at 12% 0%, rgba(232,196,120,.16), transparent 30%)}
/* LAYER 2 edge bloom - hover only, so idle is crisp instead of a muddy haze (RULE C). */
.evcal__edgeglow{position:absolute;inset:-1px;z-index:0;pointer-events:none;filter:blur(10px);
  opacity:.22;transition:opacity .45s ease}
.evcal__edgeglow i{position:absolute;inset:0;clip-path:var(--oct);
  background:linear-gradient(108deg,#F3D488 0%,#D4A24A 34%,#B98524 62%,#F0DFA8 100%)}
.evcal__panel:hover .evcal__edgeglow{opacity:.6}
/* LAYER 3 shell - the clipped shape filled with the bright gradient. THIS is the lit rim (RULE B). */
.evcal__shell{position:absolute;inset:0;clip-path:var(--oct);z-index:1;
  background:linear-gradient(108deg,#F3D488 0%,#D4A24A 30%,#8C6316 58%,#F0DFA8 100%)}
/* LAYER 4 fill - same clip, inset by the rim thickness, dark. Shell+fill = the lit edge. */
.evcal__fill{position:absolute;inset:1.6px;clip-path:var(--oct);z-index:2;overflow:hidden;
  background:repeating-linear-gradient(135deg, rgba(212,162,74,.028) 0 2px, transparent 2px 7px),
             linear-gradient(180deg,#0B1B33 0%,#06122A 100%);
  box-shadow:inset 0 0 70px rgba(0,0,0,.5)}
/* drifting motes - the "manifested" read, masked so they fade toward the rim */
.evcal__fill::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle, rgba(243,212,136,.85) .8px, transparent 1.6px),
    radial-gradient(circle, rgba(212,162,74,.55) .6px, transparent 1.4px);
  background-size:120px 90px, 70px 130px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%, #000 62%, transparent 100%);
          mask-image:radial-gradient(ellipse at 50% 45%, #000 62%, transparent 100%);
  animation:evcal-motes 26s linear infinite}
@keyframes evcal-motes{
  0%{background-position:0 0, 0 0}
  100%{background-position:120px -90px, -70px -130px}
}
/* LAYER 5 hot spots - bottom light bar + corner nodes */
.evcal__lightbar{position:absolute;left:18px;right:18px;bottom:0;height:8px;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 90px 9px at 50% 80%, rgba(255,246,220,.5), rgba(212,162,74,.34) 24%, transparent 58%),
             linear-gradient(90deg, transparent, #D4A24A 42%, #F3D488 50%, #D4A24A 58%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 60%);
          mask-image:linear-gradient(to bottom, transparent, #000 60%)}
.evcal__cornerlight{position:absolute;left:0;top:0;width:54px;height:54px;z-index:3;pointer-events:none;
  background:radial-gradient(circle 4px at 0% 0%, rgba(255,246,224,.95), transparent 86%),
             radial-gradient(circle 22px at 0% 0%, rgba(212,162,74,.16), transparent 72%)}
/* LAYER 6 content - the real table, above every effect layer */
.evcal__panel .evcal__grid{position:relative;z-index:5;background:transparent;border:0;
  box-shadow:none;border-radius:0;margin:0}
.evcal__panel .evcal__grid thead th{background:rgba(212,162,74,.10)}
@media (prefers-reduced-motion: reduce){
  .evcal__fill::after{animation:none}
  .evcal__edgeglow{transition:none}
}
@media (max-width:640px){
  .evcal__panel{--oct:polygon(0 10px,10px 0,calc(100% - 10px) 0,100% 10px,
    100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px))}
}


/* DELTA calendar-interior-v12 - tuned in devtools, scored, then saved. */
/* candidate: give the INTERIOR the same wonder the frame already has */

/* 1. Selected day reads as CAST, not outlined: a soft gold bloom from inside the cell. */
.evcal__cell--sel{
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(243,212,136,.30), transparent 62%),
    linear-gradient(180deg, rgba(212,162,74,.13), rgba(6,18,42,.90)) !important;
  box-shadow: inset 0 0 0 1px rgba(243,212,136,.85),
              inset 0 6px 26px rgba(243,212,136,.16),
              0 0 22px rgba(212,162,74,.18);
}
.evcal__cell--sel .evcal__daynum{
  color:#0B1B33 !important; background:linear-gradient(180deg,#F6E3A8,#D4A24A);
  box-shadow:0 0 12px rgba(243,212,136,.6), 0 0 3px rgba(255,250,235,.9);
}

/* 2. Day numbers gain presence. They were dim and small against a dark panel. */
.evcal__daynum{ font-size:1.16rem !important; }
.evcal__cell--has .evcal__daynum{
  text-shadow:0 0 10px rgba(212,162,74,.45), 0 0 2px rgba(243,212,136,.5);
}

/* 3. Event chips get a lit left edge instead of a flat bar, matching the panel's language. */
.evcal__minirow{
  border-left:0 !important;
  box-shadow: inset 2px 0 0 var(--evc-accent,#D4A24A),
              inset 6px 0 10px -6px var(--evc-accent,#D4A24A);
  background:linear-gradient(90deg, rgba(243,234,214,.13), rgba(243,234,214,.045)) !important;
}
.evcal__minirow:hover{
  box-shadow: inset 2px 0 0 #F3D488, inset 10px 0 16px -8px #F3D488;
}

/* 4. Motes: readable as motes, still quiet. Was opacity .5 at sub-pixel size. */
.evcal__fill::after{ opacity:.72 !important; }

/* 5. Weekday header reads as an engraved rail. */
.evcal__grid thead th{
  text-shadow:0 0 8px rgba(212,162,74,.35);
  box-shadow:inset 0 -1px 0 rgba(243,212,136,.28);
}

/* 6. The day cards below inherit the panel language so they stop looking bolted on. */
.evcal__item{
  border-color:rgba(212,162,74,.34) !important;
  box-shadow:0 .8rem 1.8rem rgba(6,20,43,.34), inset 0 0 0 1px rgba(243,212,136,.10);
}
.evcal__item:hover{ box-shadow:0 1.1rem 2.4rem rgba(6,20,43,.46), inset 0 0 0 1px rgba(243,212,136,.30); }


/* DELTA calendar-collapse-v13 - quiet weeks collapse, event weeks keep their height. */
/* A month for this store has ~3 event days. Six equal tall rows means the panel is 90% void,
   which no amount of lighting fixes. Weeks with nothing onrows collapse to a quiet strip; weeks
   that carry events keep their full height. :has() is the whole mechanism, no JS. */
.evcal__grid tbody tr:not(:has(.evcal__cell--has)) .evcal__cell{
  min-height:52px !important; height:52px !important; padding-top:.3rem; padding-bottom:.3rem;
}
.evcal__grid tbody tr:not(:has(.evcal__cell--has)) .evcal__daynum{
  font-size:.92rem !important; opacity:.5;
}
/* Weeks that DO have events get a touch more room and a faint lift, so the eye goes there. */
.evcal__grid tbody tr:has(.evcal__cell--has) .evcal__cell{
  min-height:138px !important;
}
/* The lit rim currently notches oddly at the bottom-left; even the chamfers out. */
.evcal__panel{
  --oct: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px,
                 100% calc(100% - 18px), calc(100% - 18px) 100%,
                 18px 100%, 0 calc(100% - 18px)) !important;
}


/* DELTA calendar-mobile-v14 */
/* Phones: 7 columns in ~318px is 45px each. Mini rows cannot live in 45px, so they force the
   table past the panel and Friday/Saturday get clipped with no way to reach them. Revert to what
   this calendar was designed to do on phones (see the partial's docblock): the cell carries the
   day number and a coloured dot per event, and the agenda beneath carries the detail. */
@media (max-width:560px){
  .evcal__grid{ table-layout:fixed; width:100%; }
  .evcal__cell{ padding:.28rem .12rem !important; min-height:0 !important; height:auto !important; }
  .evcal__grid tbody tr:has(.evcal__cell--has) .evcal__cell{ min-height:0 !important; height:auto !important; }
  .evcal__grid tbody tr:not(:has(.evcal__cell--has)) .evcal__cell{ height:auto !important; min-height:0 !important; }
  .evcal__mini{ display:none !important; }
  .evcal__dots{ display:flex !important; gap:2px; justify-content:center; margin-top:3px; }
  .evcal__dots--hidden{ display:flex !important; }
  .evcal__dot{ width:5px; height:5px; border-radius:50%; }
  .evcal__daynum{ font-size:.86rem !important; }
  .evcal__cell--today .evcal__daynum{ width:1.4rem; height:1.4rem; }
  .evcal__grid thead th{ font-size:.54rem; letter-spacing:.02em; padding:.45rem .05rem; }
  .evcal__day{ display:flex; flex-direction:column; align-items:center; }
  /* the cell is now short, so the day artwork wash would overpower it */
  .evcal__cell--has{ background-image:none !important; }
  .evcal__cell--has::before{ opacity:.14; width:1.5rem; height:1.5rem; right:.1rem; top:.1rem; }
}

/* Phone cards: v8 put art, time, body and price all in grid-column 1 without declaring ROWS, so
   they landed in the same cell and overlapped the artwork. Declare explicit stacked areas. */
@media (max-width:640px){
  .evcal__item{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-areas:"art" "time" "body" "fee" !important;
    height:auto !important; row-gap:.1rem;
    align-items:start !important;
    padding-bottom:.85rem;
  }
  .evcal__art{ grid-area:art !important; aspect-ratio:16/7; height:auto !important; }
  .evcal__art::after{ background:linear-gradient(180deg, rgba(11,27,51,0) 45%, rgba(11,27,51,.92) 100%) !important; }
  .evcal__itemtime{ grid-area:time !important; padding:.6rem 1rem 0 !important; }
  .evcal__itembody{ grid-area:body !important; padding:.1rem 1rem 0 !important; flex-wrap:wrap; }
  .evcal__fee, .evcal__flag{ grid-area:fee !important; justify-self:start !important;
    margin:.35rem 0 0 1rem !important; }
  .evcal__mark{ right:auto !important; left:1rem !important; top:auto !important;
    bottom:auto !important; transform:none !important; display:none !important; }
}


/* DELTA calendar-mobile-polish-v15 */
@media (max-width:560px){
  /* 1. The chamfer is a desktop-scale detail. At phone width the cut corners are large relative
        to the panel and the page shows through them as grey triangles, which reads as a broken
        graphic rather than a laser-cut edge. Square the shape on phones and keep the lit rim. */
  .evcal__panel{
    --oct: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
  }
  /* 2. The bottom hot-bar is tuned for a wide panel. At 318px it is a bright streak across the
        whole base and looks like a glitch. Corner node alone carries the light. */
  .evcal__lightbar{ display:none !important; }
  .evcal__cornerlight{ width:34px; height:34px; }

  /* 3. RESTORE the collapse. The v14 phone rules set every row to height:auto, which undid v13
        and brought the empty-month void straight back. Re-assert it at phone scale. */
  .evcal__grid tbody tr:not(:has(.evcal__cell--has)) .evcal__cell{
    height:34px !important; min-height:34px !important; padding:.2rem .1rem !important;
  }
  .evcal__grid tbody tr:not(:has(.evcal__cell--has)) .evcal__daynum{ opacity:.42; font-size:.78rem !important; }
  .evcal__grid tbody tr:has(.evcal__cell--has) .evcal__cell{
    height:auto !important; min-height:58px !important;
  }
}


/* DELTA calendar-heroband-v16 */
/* The section order now places the calendar ABOVE the rip, so it shares the hero's band. It was
   still painting its own cream background, which cut a pale frame between the hero and the panel
   and broke the continuity. Carry the hero's dark field through instead, and let the rip below
   the filters stay the single navy-to-cream transition on the page. */
.evcal{
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(16,41,78,.55), transparent 62%),
    linear-gradient(180deg, #0B1B33 0%, #081A31 100%) !important;
  color:#F3EAD6 !important;
}
.evcal__eyebrow{ color:var(--gold) !important; }
.evcal__title{ color:#F3EAD6 !important; }
.evcal__month{ color:#F3EAD6 !important; }
.evcal__navbtn{ background:rgba(243,234,214,.06) !important; border-color:rgba(212,162,74,.45) !important;
  color:#F3EAD6 !important; }
.evcal__navbtn:hover{ background:rgba(212,162,74,.16) !important; }
.evcal__navbtn--off{ opacity:.3; }
.evcal__agendahead{ color:#F3EAD6 !important; }
.evcal__agendacount{ color:rgba(243,234,214,.62) !important; }
.evcal__legend{ color:rgba(243,234,214,.66) !important; }
/* the filter bar sits directly beneath and already owns the rip; give the seam some air */
.evcal{ padding-block-end:clamp(1.6rem,3.5vw,2.6rem) !important; }


/* DELTA calendar-contain-v17 */
/* 1. The underglow was tuned for a CREAM band, where a soft outward halo reads as ambient light.
      On the dark band it has nothing to sit against and reads as a grey smear leaking off both
      edges. Pull it inside the panel so it lights the rim rather than the page. */
.evcal__underglow{ inset:2px !important; filter:blur(10px) !important; opacity:.5 !important; }

/* 2. The grid ran flush to the lit rim, so event chips in the first and last columns touch the
      gold and read as covering it. Inset the grid inside the frame. */
.evcal__panel .evcal__grid{ margin:6px !important; width:calc(100% - 12px) !important; }

/* 3. The bottom hot-bar stopped 18px short of each corner, leaving a bright streak that ends in
      mid-air. Span it properly and soften it. */
.evcal__lightbar{ left:6px !important; right:6px !important; height:5px !important; opacity:.7; }

/* 4. Give the calendar its own rip into the section below, so the epic torn edge is not lost just
      because the filter bar (which owns the page's other rip) now sits after the calendar. */
.evcal{ position:relative; }


/* DELTA filter-tiles-v18 */
/* ---- borrowed from the reference: filter TILES, not text chips -------------------------------
   The reference's strongest idea is the filter row: a bracketed tile carrying the game's glyph.
   We already ship those glyphs (assets/icons/g-*.svg, pokeball.svg) and were not using them here.
   Structure and corner brackets are borrowed; the icons, colours and game list are ours. */
.luh-filter .chip{
  position:relative;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:.42rem;
  min-width:6.4rem; min-height:5.6rem;
  padding:.9rem .6rem .7rem;
  border:1px solid rgba(212,162,74,.22) !important;
  border-radius:2px;
  background:linear-gradient(180deg, rgba(16,41,78,.55), rgba(6,18,42,.85)) !important;
  font-size:.6rem; letter-spacing:.1em;
}
/* the glyph */
.luh-filter .chip::before{
  content:""; width:2.1rem; height:2.1rem; margin-bottom:.1rem;
  background-position:center; background-repeat:no-repeat; background-size:contain;
  opacity:.92; transition:transform .18s ease, opacity .18s ease;
}
.luh-filter .chip:hover::before{ transform:translateY(-2px) scale(1.06); opacity:1; }
.luh-filter .chip[data-filter="all"]::before{ background-image:url("/assets/icons/events/dice-d20.png"); }
.luh-filter .chip[data-filter="pokemon"]::before{ background-image:url("/assets/icons/g-pokemon.svg"); }
.luh-filter .chip[data-filter="mtg"]::before{ background-image:url("/assets/icons/g-mtg.svg"); }
.luh-filter .chip[data-filter="onepiece"]::before{ background-image:url("/assets/icons/g-onepiece.svg"); }
.luh-filter .chip[data-filter="riftbound"]::before{ background-image:url("/assets/icons/g-riftbound.svg"); }
.luh-filter .chip[data-filter="dnd"]::before{ background-image:url("/assets/img/marks/mark_dnd.png"); }
/* luh-brand-icons-v3: the official emblem, not the wide wordmark squeezed into a square. */
.luh-filter .chip[data-filter="lorcana"]::before{ background-image:url("/assets/icons/lorcana-emblem.png"); }
/* games with no glyph get the duel-cards mark rather than an empty box */
.luh-filter .chip[data-filter="digimon"]::before,
.luh-filter .chip[data-filter="dragonball"]::before,
.luh-filter .chip[data-filter="unionarena"]::before,
.luh-filter .chip[data-filter="palworld"]::before,
.luh-filter .chip[data-filter="starwars"]::before,
.luh-filter .chip[data-filter="casual"]::before{
  background-image:url("/assets/icons/events/duel-cards.png"); opacity:.55;
}
/* corner brackets: the laser-cut read WITHOUT a chamfer, which is what broke on phones */
.luh-filter .chip::after{
  content:""; position:absolute; inset:4px; pointer-events:none;
  border:0 solid var(--gold,#D4A24A);
  border-top-width:1px; border-left-width:1px;
  clip-path:polygon(0 0,34% 0,34% 1.5px,1.5px 1.5px,1.5px 34%,0 34%);
  opacity:.75;
}
.luh-filter .chip.is-active, .luh-filter .chip[aria-pressed="true"]{
  border-color:var(--gold,#D4A24A) !important;
  background:linear-gradient(180deg, rgba(212,162,74,.20), rgba(6,18,42,.9)) !important;
  color:#F3EAD6 !important;
}
.luh-filter .chip.is-active::after{ opacity:1; }
@media (max-width:640px){
  .luh-filter .chip{ min-width:4.6rem; min-height:4.4rem; font-size:.52rem; padding:.6rem .35rem .5rem; }
  .luh-filter .chip::before{ width:1.5rem; height:1.5rem; }
}

/* The g-*.svg glyphs are monochrome with a dark fill, so on the navy tile they were nearly
   invisible. Tint them to brand gold. The mark_*.png files are full-colour logos and are left
   alone: a filter would wreck them. */
.luh-filter .chip[data-filter="pokemon"]::before,
.luh-filter .chip[data-filter="mtg"]::before,
.luh-filter .chip[data-filter="onepiece"]::before,
.luh-filter .chip[data-filter="riftbound"]::before,
.luh-filter .chip[data-filter="digimon"]::before,
.luh-filter .chip[data-filter="dragonball"]::before,
.luh-filter .chip[data-filter="unionarena"]::before,
.luh-filter .chip[data-filter="palworld"]::before,
.luh-filter .chip[data-filter="starwars"]::before,
.luh-filter .chip[data-filter="casual"]::before{
  filter: brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(680%) hue-rotate(2deg) brightness(94%) contrast(89%);
}
.luh-filter .chip.is-active::before{ filter:none; }
.luh-filter .chip.is-active[data-filter="pokemon"]::before,
.luh-filter .chip.is-active[data-filter="mtg"]::before,
.luh-filter .chip.is-active[data-filter="onepiece"]::before,
.luh-filter .chip.is-active[data-filter="riftbound"]::before{
  filter: brightness(0) invert(1);
}


/* DELTA cell-chips-v19 */
/* Borrowed from the comp: the event marker inside a day cell is a bold OUTLINED box in the game's
   colour, not a hairline bar. On a dark grid a 3px edge bar reads as a scratch; a bordered plate
   reads as a card you can click. Colour comes from our existing --evc-accent map, so nothing new
   is invented and every game already has one. */
.evcal__minirow{
  border-left:0 !important;
  border:1px solid var(--evc-accent,#D4A24A) !important;
  border-radius:2px !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--evc-accent,#D4A24A) 22%, transparent),
      color-mix(in srgb, var(--evc-accent,#D4A24A) 9%, transparent)) !important;
  box-shadow:0 0 10px -3px var(--evc-accent,#D4A24A) !important;
  padding:.2rem .34rem !important;
}
.evcal__minirow:hover{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--evc-accent,#D4A24A) 36%, transparent),
      color-mix(in srgb, var(--evc-accent,#D4A24A) 16%, transparent)) !important;
  box-shadow:0 0 14px -2px var(--evc-accent,#D4A24A) !important;
}
/* the time leads in the accent, the title stays cream so it is the readable part */
.evcal__minitime{ color:var(--evc-accent,#D4A24A) !important; font-size:.66rem !important; }
.evcal__minititle{ color:#F3EAD6 !important; font-weight:600 !important; }

/* Fallback for browsers without color-mix, so the chip never loses its fill. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .evcal__minirow{ background:rgba(243,234,214,.10) !important; }
}


/* DELTA game-glyphs-v20 - real glyphs for the six games that had none. Gold is baked into the
   PNG, so these must NOT inherit the tint filter used on the monochrome SVG set. */
.luh-filter .chip[data-filter="digimon"]::before{ background-image:url("/assets/icons/games/glyph_digimon.png") !important; }
.luh-filter .chip[data-filter="dragonball"]::before{ background-image:url("/assets/icons/games/glyph_dragonball.png") !important; }
.luh-filter .chip[data-filter="unionarena"]::before{ background-image:url("/assets/icons/games/glyph_unionarena.png") !important; }
/* luh-brand-icons-v3: the official Palworld OFFICIAL CARD GAME mark, not a drawn stand-in. */
.luh-filter .chip[data-filter="palworld"]::before{ background-image:url("/assets/icons/palworld-emblem.png") !important; }
.luh-filter .chip[data-filter="starwars"]::before{ background-image:url("/assets/icons/games/glyph_starwars.png") !important; }
.luh-filter .chip[data-filter="casual"]::before{ background-image:url("/assets/icons/games/glyph_casual.png") !important; }
.luh-filter .chip[data-filter="digimon"]::before,
.luh-filter .chip[data-filter="dragonball"]::before,
.luh-filter .chip[data-filter="unionarena"]::before,
.luh-filter .chip[data-filter="palworld"]::before,
.luh-filter .chip[data-filter="starwars"]::before,
.luh-filter .chip[data-filter="casual"]::before{
  filter:none !important; opacity:.95 !important;
}
.luh-filter .chip.is-active[data-filter="digimon"]::before,
.luh-filter .chip.is-active[data-filter="dragonball"]::before,
.luh-filter .chip.is-active[data-filter="unionarena"]::before,
.luh-filter .chip.is-active[data-filter="palworld"]::before,
.luh-filter .chip.is-active[data-filter="starwars"]::before,
.luh-filter .chip.is-active[data-filter="casual"]::before{
  filter:brightness(1.25) !important;
}


/* DELTA calendar-twocol-v21 - today | what's next, side by side. */
.evcal__agenda{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.6rem 2rem; align-items:start; }
.evcal__agendahead{ grid-column:1; }
.evcal__list{ grid-column:1; }
.evcal__empty{ grid-column:1; }
.evcal__viewall{ grid-column:1 / -1; }
.evcal__next{ grid-column:2; grid-row:1 / span 2; min-width:0; }
.evcal__nexthead{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin:0 0 .6rem; font-size:1rem; font-weight:800; letter-spacing:.02em; }
.evcal__nextlist{ display:grid; gap:.4rem; margin:0; padding:0; list-style:none; }
.evcal__nextrow{
  display:grid; grid-template-columns:3.4rem minmax(0,1fr) auto; align-items:center; gap:.8rem;
  padding:.5rem .7rem;
  border:1px solid rgba(212,162,74,.30); border-left:3px solid var(--evc-accent,#D4A24A);
  border-radius:3px; background:rgba(243,234,214,.05);
}
.evcal__nextrow:hover{ background:rgba(243,234,214,.11); border-color:var(--evc-accent,#D4A24A); }
.evcal__nextdate{ display:flex; flex-direction:column; align-items:center; line-height:1.05; }
.evcal__nextdate b{ font-family:Georgia,serif; font-size:1.05rem; color:var(--gold,#D4A24A); }
.evcal__nextdate span{ font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.evcal__nextbody{ min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.evcal__nextname{ font-size:.9rem; font-weight:700; line-height:1.2; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.evcal__nextname a{ color:inherit; text-decoration:none; }
.evcal__nextname a:hover{ text-decoration:underline; text-decoration-color:var(--evc-accent,#D4A24A); }
.evcal__nextmeta{ font-size:.7rem; opacity:.72; }
.evcal__nextfee{ font-size:.72rem; font-weight:800; color:var(--gold,#D4A24A); white-space:nowrap; }
@media (max-width:900px){
  .evcal__agenda{ grid-template-columns:1fr; }
  .evcal__agendahead,.evcal__list,.evcal__empty,.evcal__viewall,.evcal__next{ grid-column:1; }
  .evcal__next{ grid-row:auto; margin-top:.5rem; }
}


/* DELTA upcoming-rows-v24 */
/* Now written against the ACTUAL structure (read from the partial, not guessed):
   li.evrow has exactly FOUR direct children -
     .evrow__day | <div>(name+format) | <div>(time+extras) | .evrow__book
   The two middle divs are anonymous block stacks. Last attempt gridded .evrow but left those
   stacks untouched and narrowed them, so the title and description wrapped MORE and the row got
   TALLER. Flatten the stacks, kill the <p> margins, clamp the description, cut the 22px padding. */
.luh-events-list.ground-cream .evrow{
  display:grid !important;
  grid-template-columns: 9.5rem minmax(0,1fr) minmax(0,10rem) auto;
  align-items:center;
  column-gap:1.1rem;
  padding:.55rem .9rem !important;
  min-height:0 !important;
}
.luh-events-list.ground-cream .evrow > *{ min-width:0; }
/* the two anonymous wrappers stop being vertical stacks */
.luh-events-list.ground-cream .evrow > div:nth-child(2),
.luh-events-list.ground-cream .evrow > div:nth-child(3){
  display:flex; flex-direction:column; gap:.1rem; min-width:0;
}
.luh-events-list.ground-cream .evrow p,
.luh-events-list.ground-cream .evrow h3,
.luh-events-list.ground-cream .evrow h4{ margin:0 !important; }
.luh-events-list.ground-cream .evrow__day{ display:flex; flex-direction:column; gap:.05rem; }
.luh-events-list.ground-cream .evrow__day-name{ font-size:.82rem; font-weight:800; white-space:nowrap; }
.luh-events-list.ground-cream .evrow__day-freq{ font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; opacity:.7; }
.luh-events-list.ground-cream .evrow__name{ font-size:.98rem !important; line-height:1.2 !important;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.luh-events-list.ground-cream .evrow__format{
  font-size:.74rem !important; opacity:.72; line-height:1.25 !important;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.luh-events-list.ground-cream .evrow__time{ font-size:.76rem !important; white-space:nowrap; }
.luh-events-list.ground-cream .evrow__extras{
  font-size:.68rem !important; opacity:.68;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.luh-events-list.ground-cream .evrow__book{
  display:flex; align-items:center; gap:.5rem; white-space:nowrap;
}
.luh-events-list.ground-cream .evrow__fee{ font-size:.8rem !important; font-weight:800; }
.luh-events-list.ground-cream .evrow__note{ display:none; }
.luh-events-list.ground-cream .evrows{ gap:.4rem !important; }
@media (max-width:900px){
  .luh-events-list.ground-cream .evrow{
    grid-template-columns: 1fr auto; row-gap:.25rem; padding:.7rem .9rem !important;
  }
  .luh-events-list.ground-cream .evrow > div:nth-child(2){ grid-column:1/-1; }
  .luh-events-list.ground-cream .evrow > div:nth-child(3){ grid-column:1; }
  .luh-events-list.ground-cream .evrow__book{ grid-column:2; }
}


/* DELTA calendar-cohesion-v26 */
/* Bracketry from the comp, on OUR lit panel.
   Their technique: four 26px corner marks at 7px inset, one shape mirrored with scaleX/scaleY(-1).
   We have no spare markup hooks left on the panel, so the two corner pairs ride on the existing
   .evcal__shell and .evcal__fill pseudo-elements. Layered ABOVE the shell so the gold reads
   against our glow rather than being washed out by it. */
.evcal__panel{ --brk: 26px; --brk-in: 7px; --brk-w: 2px; }

/* top-left + bottom-right on the shell */
.evcal__shell::before,
.evcal__shell::after{
  content:""; position:absolute; z-index:6; pointer-events:none;
  width:var(--brk); height:var(--brk);
  border:0 solid var(--gold,#D4A24A);
  filter:drop-shadow(0 0 4px rgba(212,162,74,.55));
}
.evcal__shell::before{
  left:var(--brk-in); top:var(--brk-in);
  border-left-width:var(--brk-w); border-top-width:var(--brk-w);
}
.evcal__shell::after{
  right:var(--brk-in); bottom:var(--brk-in);
  border-right-width:var(--brk-w); border-bottom-width:var(--brk-w);
}
/* top-right + bottom-left on the fill */
.evcal__fill::before{
  content:""; position:absolute; z-index:6; pointer-events:none;
  width:var(--brk); height:var(--brk);
  right:calc(var(--brk-in) - 1px); top:calc(var(--brk-in) - 1px);
  border:0 solid var(--gold,#D4A24A);
  border-right-width:var(--brk-w); border-top-width:var(--brk-w);
  filter:drop-shadow(0 0 4px rgba(212,162,74,.55));
  background:none !important;
  -webkit-mask-image:none !important; mask-image:none !important;
  animation:none !important; opacity:1 !important;
  inset:auto;
}
.evcal__panel::after{
  content:""; position:absolute; z-index:6; pointer-events:none;
  width:var(--brk); height:var(--brk);
  left:calc(var(--brk-in) - 1px); bottom:calc(var(--brk-in) - 1px);
  border:0 solid var(--gold,#D4A24A);
  border-left-width:var(--brk-w); border-bottom-width:var(--brk-w);
  filter:drop-shadow(0 0 4px rgba(212,162,74,.55));
}
/* a hair more inset so the grid never collides with the bracket arms */
.evcal__panel .evcal__grid{ margin:10px !important; width:calc(100% - 20px) !important; }
@media (max-width:640px){
  .evcal__panel{ --brk:16px; --brk-in:5px; --brk-w:1.5px; }
  .evcal__panel .evcal__grid{ margin:7px !important; width:calc(100% - 14px) !important; }
}

/* ---- 1. PERF: motes must not repaint every frame -------------------------------------------
   The old rule animated background-position, which forces a full repaint of the panel on every
   frame for 26s, forever. Same look, but as a transform on an oversized layer: the compositor
   moves an existing texture, no repaint, no layout. will-change promotes it once rather than
   thrashing. Still fully disabled under prefers-reduced-motion. */
.evcal__fill::after{
  animation:none !important;
  inset:-40% !important;
  background-size:120px 90px, 70px 130px !important;
  will-change:transform;
  animation:evcal-drift 40s linear infinite !important;
}
@keyframes evcal-drift{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(120px,-90px,0); }
}
@media (prefers-reduced-motion: reduce){
  .evcal__fill::after{ animation:none !important; }
}

/* ---- 2. COHESION: the month title IS the header, inside the frame ---------------------------
   The comp has no separate heading block: the month sits centred inside the calendar's own
   frame with the nav flanking it, one continuous gold field. Ours had a detached
   "WHAT'S ON / Event calendar" label above the panel in different colours, so it read as two
   unrelated objects and did not lead into the calendar. */
.evcal__head{
  text-align:center !important;
  margin-bottom:.2rem !important;
}
.evcal__eyebrow{
  justify-content:center; display:inline-flex !important;
  color:var(--gold,#D4A24A) !important; opacity:.85;
  font-size:.68rem !important; letter-spacing:.22em !important;
}
.evcal__title{
  font-family:Georgia,'Times New Roman',serif !important;
  font-size:clamp(1.4rem,2.2vw,2rem) !important;
  color:#F3EAD6 !important; opacity:.9;
  letter-spacing:.04em; text-transform:uppercase;
}
/* nav row becomes the panel's own header bar: arrows flank a centred month */
.evcal__nav{
  display:grid !important; grid-template-columns:3rem minmax(0,1fr) 3rem;
  align-items:center; justify-items:center;
  max-width:none; margin:0 auto .5rem !important; padding:.2rem 0 !important;
}
.evcal__month{
  font-family:Georgia,'Times New Roman',serif !important;
  font-size:clamp(1.7rem,3vw,2.6rem) !important;
  color:var(--gold,#D4A24A) !important;
  letter-spacing:.06em; text-transform:uppercase;
  text-shadow:0 0 18px rgba(212,162,74,.35);
  margin:0 !important;
}
/* ornaments either side of the month, matching the comp's flourishes */
.evcal__month::before, .evcal__month::after{
  content:"\2725"; margin:0 .7rem; font-size:.5em; opacity:.6; vertical-align:middle;
}
.evcal__navbtn{
  width:2.6rem; height:2.6rem; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(212,162,74,.55) !important; border-radius:3px;
  background:rgba(6,18,42,.55) !important; color:var(--gold,#D4A24A) !important;
}
.evcal__navlabel{ display:none; }


/* DELTA calendar-cardalign-v27 */

/* 1. Three tracks, because the card has exactly three grid children: art, time, body.
      The 4th track existed only to receive .evcal__fee, which is nested and never arrived. */
.evcal__item{
  /* The art was taking 200px of a 663px card (it renders inside the calendar's own column, not
     the full page width), which left the title 156px and made it collide with the fee. The art
     is decorative; the title is the content. Rebalanced in the title's favour. */
  grid-template-columns:clamp(7.5rem,13vw,10rem) minmax(5.5rem,auto) minmax(0,1fr);
  column-gap:1.1rem;
  align-items:center;
  padding-left:4px;            /* the accent bar edges the card instead of covering the art */
}
.evcal__art{ grid-column:1; }
.evcal__itemtime{
  grid-column:2;
  /* clear the medallion, which overhangs the seam by half its width now that it is visible */
  padding-left:2.3rem;
}
.evcal__itembody{ grid-column:3; }

/* 2. The body gets its OWN grid so the fee anchors to the card's right edge, and the chip,
      title and fee share one baseline instead of wrapping onto separate lines.
      Columns are assigned explicitly, not by source order: when an event has no game the chip
      is absent, and positional placement would slide the title and fee one column left.

      grid-row:1 is NOT redundant. calendar-rowfill-v8 still sets order:1 on the title and
      order:0 on the fee, and `order` drives grid AUTO-PLACEMENT, not just flex order. With
      auto rows the placement cursor visited chip(col1), then fee(col3), and since the sparse
      algorithm never moves the cursor backwards the title could no longer fit in row 1 and was
      pushed to a second row. Measured: bodyRows "24.89px 24.11px", title 24px below the chip.
      Pinning every child to row 1 makes the layout independent of any leftover order rule. */
.evcal__itembody{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto;
  align-items:center;
  column-gap:.85rem; row-gap:0;
  padding:0 1.2rem 0 0;
  min-width:0;
}
.evcal__itembody > .evcal__chip{ grid-column:1; grid-row:1; order:0; justify-self:start; margin:0; }
/* NO justify-self on the title. justify-self:start sizes a grid item to fit-content, which for
   nowrap text is max-content, so the box escapes its own minmax(0,1fr) track and lands on top of
   the fee: measured -6px and -64px of overlap on the two live cards. Leaving it stretched makes
   the box exactly the track width, which is what makes wrapping and min-width:0 mean anything.
   Titles wrap to two lines rather than ellipsing, because "MTG Commander FNM Event" truncated to
   "MTG Commander FNM..." loses the part that says what the event is. The card is 130px tall and
   the body is centred, so two lines cost nothing. */
.evcal__itembody > .evcal__itemlink{
  grid-column:2; grid-row:1; order:0; min-width:0;
  white-space:normal; overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  font-size:clamp(.98rem,1.35vw,1.16rem); line-height:1.24;
}
.evcal__itembody > .evcal__fee,
.evcal__itembody > .evcal__flag{
  grid-column:3; grid-row:1; order:0; justify-self:end; margin:0; white-space:nowrap;
}

/* 3. Release the art's clip so the medallion is whole. The art contains only an
      object-fit:cover img and an inset:0 gradient, neither of which can overflow, and the
      card's own overflow:hidden still trims the outer corners. */
.evcal__art{ overflow:visible; }
.evcal__art img{ border-radius:inherit; }
.evcal__mark{ z-index:5; }

@media (max-width:900px){
  /* art over a single copy column; the medallion still rides the art's right edge */
  .evcal__item{ grid-template-columns:clamp(8rem,26vw,11rem) minmax(0,1fr); column-gap:1rem; }
  .evcal__itemtime{ grid-column:2; padding-left:.2rem; align-self:end; }
  .evcal__itembody{ grid-column:2; align-self:start; padding-right:1rem; }
}
@media (max-width:640px){
  /* stacked: the medallion drops below the art, so nothing needs horizontal clearance */
  .evcal__item{ grid-template-columns:1fr; padding-left:4px; }
  .evcal__art,.evcal__itemtime,.evcal__itembody{ grid-column:1; }
  .evcal__itemtime{ padding:1.9rem 1rem 0; }
  .evcal__itembody{
    grid-template-columns:auto minmax(0,1fr);
    padding:.35rem 1rem .9rem 1rem; row-gap:.35rem;
  }
  /* stacked: chip and fee share the meta row, the title wraps freely on its own row below.
     Rows are explicit here for the same order-vs-auto-placement reason as above. */
  .evcal__itembody > .evcal__chip{ grid-column:1; grid-row:1; }
  .evcal__itembody > .evcal__fee,
  .evcal__itembody > .evcal__flag{ grid-column:2; grid-row:1; justify-self:end; }
  .evcal__itembody > .evcal__itemlink{
    grid-column:1 / -1; grid-row:2; white-space:normal; overflow:visible; text-overflow:clip;
  }
}


/* DELTA calendar-mobile-v28 */
@media (max-width:640px){

  /* ---- 1. the card: artwork on top, then ONE row of time + details ------------------------- */
  .evcal__item{
    grid-template-columns:auto minmax(0,1fr) !important;
    grid-template-areas:"art art" "time body" !important;
    grid-template-rows:auto auto !important;
    height:auto !important; min-height:0 !important;
    align-items:stretch !important;
    padding-left:4px !important;
    column-gap:0 !important; row-gap:0 !important;
  }
  .evcal__art{
    grid-area:art !important;
    height:clamp(6.5rem,28vw,8.25rem) !important;
    aspect-ratio:auto !important;
    overflow:visible !important;          /* keeps the badge whole, as on desktop */
    position:relative !important;
  }
  .evcal__art img{ width:100% !important; height:100% !important; object-fit:cover !important; }

  .evcal__itemtime{
    grid-area:time !important;
    align-self:center !important; justify-self:start !important;
    padding:.72rem 0 .85rem .95rem !important;
    font-size:1rem !important; line-height:1.1 !important;
  }

  /* the body carries chip + fee on one meta line and the title beneath, so the price is
     readable at a glance without the title being pushed off its own row */
  .evcal__itembody{
    grid-area:body !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    column-gap:.7rem !important; row-gap:.28rem !important;
    padding:.72rem .95rem .85rem .8rem !important;
    min-width:0 !important;
  }
  /* grid-area:auto first, to clear the inherited named-area placement described above */
  .evcal__itembody > .evcal__chip{
    grid-area:auto !important; grid-column:1 !important; grid-row:1 !important;
    justify-self:start !important; margin:0 !important;
  }
  .evcal__itembody > .evcal__fee,
  .evcal__itembody > .evcal__flag{
    grid-area:auto !important; grid-column:2 !important; grid-row:1 !important;
    justify-self:end !important; margin:0 !important; white-space:nowrap !important;
  }
  .evcal__itembody > .evcal__itemlink{
    grid-area:auto !important; grid-column:1 / -1 !important; grid-row:2 !important;
    display:block !important; -webkit-line-clamp:none !important;
    white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
    font-size:1.02rem !important; line-height:1.3 !important;
    padding:.3rem 0 !important; min-height:1.5rem;   /* WCAG 2.5.8: was 19px tall */
  }

  /* ---- 2. the game badge, back, and inside the artwork ------------------------------------- */
  .evcal__mark{
    display:block !important;
    left:auto !important; right:.7rem !important;
    top:auto !important; bottom:.7rem !important;
    transform:none !important;
    width:2.6rem !important; height:2.6rem !important;
    z-index:5 !important;
  }

  /* ---- 3. brackets stop crossing the grid -------------------------------------------------- */
  .evcal__panel{ --brk:13px !important; --brk-in:3px !important; --brk-w:1.5px !important; }
  .evcal__panel .evcal__grid{ margin:16px !important; width:calc(100% - 32px) !important; }

  /* ---- 4. tap targets --------------------------------------------------------------------- */
  .evcal__day{ min-height:44px !important; }

  /* ---- 5. the month must not wrap and orphan its flourishes -------------------------------- */
  .evcal__month{
    white-space:nowrap !important;
    font-size:clamp(1.45rem,6.6vw,2.1rem) !important;
  }
  .evcal__month::before, .evcal__month::after{ margin:0 .45rem !important; }
  .evcal__nav{ grid-template-columns:2.75rem minmax(0,1fr) 2.75rem !important; }
  .evcal__navbtn{ width:2.75rem !important; height:2.75rem !important; }
}


/* DELTA mobile-drawer-v29
   The drawer was fixed at a hardcoded top:117px, which matched the header's bottom only at
   scroll 0. Scrolled, the sticky header's bottom is 78px, leaving a 39px strip of page content
   showing between the header and the menu. Anchoring to the header itself removes the constant.
   Scoped to the width at which the drawer is actually used. */
@media (max-width:900px){
  header nav[aria-label]{
    position:absolute !important;
    top:100% !important;
    left:0 !important; right:0 !important;
    width:100% !important;
    /* percentage resolves against the containing block (the header), so this is
       "viewport minus header height" without hardcoding either one */
    max-height:calc(100svh - 100%) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;
  }
}


/* DELTA calendar-badge-v30 */

/* ---- 1. the game token: a plate, not a disc -------------------------------------------------
   contain (not a percentage) is what guarantees a 5.71:1 wordmark and a 1.02:1 roundel both fit
   whole. background-origin:content-box keeps the padding as real breathing room around the art. */
.evcal__mark{
  position:absolute; z-index:5;
  left:.7rem; right:auto; bottom:.7rem; top:auto; transform:none;
  width:clamp(4.4rem,12vw,5.4rem); height:2.05rem;
  border-radius:.42rem;
  background-color:rgba(237,227,204,.95);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-origin:content-box;
  padding:.26rem .4rem;
  box-sizing:border-box;
  border:1px solid rgba(212,162,74,.85);
  box-shadow:0 .35rem .85rem rgba(3,10,24,.5), inset 0 0 0 1px rgba(255,255,255,.35);
}
.evcal__item:hover .evcal__mark{ border-color:var(--gold,#D4A24A); }

/* ---- 2. mobile: the body must fill its track ------------------------------------------------
   justify-self:start sizes a grid item to its content, so the body sat 166px wide inside a
   268px column and the price floated in the middle of the card. */
@media (max-width:640px){
  .evcal__itembody{ justify-self:stretch !important; width:auto !important; }
  .evcal__itemtime{ justify-self:start !important; }
  .evcal__mark{
    left:.65rem !important; right:auto !important;
    bottom:.65rem !important; top:auto !important;
    width:clamp(4.6rem,26vw,6rem) !important; height:2.1rem !important;
  }
}


/* DELTA calendar-badgeaspect-v31
   The plate takes its aspect from the mark it holds, so contain fills it exactly and the
   parchment behind never shows. Measured opaque bounding boxes, not guesses. */
.evcal__mark{
  --mk-ar:2.4;                                  /* fallback for an unmapped game */
  width:min(calc(var(--mk-ar) * 2.05rem), 62%);
  aspect-ratio:var(--mk-ar);
  height:auto;
  padding:0;
  background-size:contain;
  background-origin:padding-box;
  background-position:center;
}
.evcal__item[data-gk="mtg"] .evcal__mark{ --mk-ar:5.71; }
.evcal__item[data-gk="dnd"] .evcal__mark{ --mk-ar:3.54; }
.evcal__item[data-gk="onepiece"] .evcal__mark{ --mk-ar:2.95; }
.evcal__item[data-gk="riftbound"] .evcal__mark{ --mk-ar:2.33; }
.evcal__item[data-gk="lorcana"] .evcal__mark{ --mk-ar:2.26; }
.evcal__item[data-gk="mini"] .evcal__mark{ --mk-ar:1.98; }
.evcal__item[data-gk="fab"] .evcal__mark{ --mk-ar:1.96; }
.evcal__item[data-gk="ultrapro"] .evcal__mark{ --mk-ar:1.42; }
.evcal__item[data-gk="pokemon"] .evcal__mark{ --mk-ar:1.02; }

@media (max-width:640px){
  .evcal__mark{
    width:min(calc(var(--mk-ar) * 2.1rem), 52%) !important;
    height:auto !important;
    aspect-ratio:var(--mk-ar) !important;
  }
}


/* DELTA past-grid-v32 */

/* ---- past events: three across ------------------------------------------------------------- */
@media (min-width:901px){
  .luh-events-list--dark .evrows{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:1.1rem !important;
    margin-top:2rem !important;
  }
  .luh-events-list--dark .evrow{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-content:start;
    gap:.5rem !important;
    padding:1.05rem 1.1rem !important;
    text-align:left;
    height:100%;
  }
  .luh-events-list--dark .evrow > *{ min-width:0; }
  /* day and cadence read as one line, not two stacked labels */
  .luh-events-list--dark .evrow__day{
    display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap;
  }
  /* the two anonymous wrappers are vertical stacks here, which is correct in a card */
  .luh-events-list--dark .evrow > div:nth-child(2),
  .luh-events-list--dark .evrow > div:nth-child(3){
    display:flex; flex-direction:column; gap:.18rem; min-width:0;
  }
  /* price and button on one baseline, pinned to the card's floor so the row lines up */
  .luh-events-list--dark .evrow__book{
    display:flex; align-items:center; justify-content:flex-start;
    gap:.7rem; flex-wrap:wrap; margin-top:auto; padding-top:.35rem;
  }
  .luh-events-list--dark .evrow p,
  .luh-events-list--dark .evrow h3,
  .luh-events-list--dark .evrow h4{ margin:0 !important; }
}

/* two across in the middle band, where three would squeeze the titles */
@media (min-width:641px) and (max-width:900px){
  .luh-events-list--dark .evrows{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:1rem !important;
  }
  .luh-events-list--dark .evrow{
    display:grid !important; grid-template-columns:minmax(0,1fr) !important;
    align-content:start; gap:.45rem !important; padding:.95rem 1rem !important; height:100%;
  }
  .luh-events-list--dark .evrow__day{ display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
  .luh-events-list--dark .evrow__book{ margin-top:auto; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
  .luh-events-list--dark .evrow p,
  .luh-events-list--dark .evrow h3,
  .luh-events-list--dark .evrow h4{ margin:0 !important; }
}

/* ---- mobile: stop every field being its own full-width line ------------------------------- */
@media (max-width:640px){
  .luh-events-list--dark .evrows{ gap:.55rem !important; }
  .luh-events-list--dark .evrow{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center;
    column-gap:.8rem !important; row-gap:.25rem !important;
    padding:.75rem .9rem !important;
  }
  .luh-events-list--dark .evrow > *{ min-width:0; }
  .luh-events-list--dark .evrow__day{
    grid-column:1 / -1; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  }
  .luh-events-list--dark .evrow > div:nth-child(2){
    grid-column:1 / -1; display:flex; flex-direction:column; gap:.12rem;
  }
  .luh-events-list--dark .evrow > div:nth-child(3){
    grid-column:1; display:flex; flex-direction:column; gap:.12rem;
  }
  .luh-events-list--dark .evrow__book{
    grid-column:2; display:flex; flex-direction:column; align-items:flex-end;
    gap:.3rem; margin:0; text-align:right;
  }
  .luh-events-list--dark .evrow p,
  .luh-events-list--dark .evrow h3,
  .luh-events-list--dark .evrow h4{ margin:0 !important; }
}


/* DELTA past-clamp-v33
   A card in a grid must not be sized by its longest paragraph. The full text is one click away
   on the event page, so this clamps rather than truncates anything the visitor cannot recover. */
@media (min-width:641px){
  .luh-events-list--dark .evrow__format{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
    overflow:hidden; line-height:1.45;
  }
  .luh-events-list--dark .evrow__extras{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden; line-height:1.4;
  }
}
@media (max-width:640px){
  .luh-events-list--dark .evrow__format{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden; line-height:1.4;
  }
  .luh-events-list--dark .evrow__extras{ display:none; }   /* it repeats the format on mobile */
}


/* DELTA upcoming-mobile-v35
   Mobile rows were 209px because date, copy and time each took their own band. Lifting the time
   onto the date's line and clamping the format brings a row to roughly 150px without dropping
   any field. Scoped to the cream (upcoming) list; the dark archive list has its own rules. */
@media (max-width:640px){
  .luh-events-list.ground-cream .evrows{ gap:.5rem !important; }

  .luh-events-list.ground-cream .evrow{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    column-gap:.7rem !important; row-gap:.22rem !important;
    padding:.62rem .8rem !important;
    align-items:center;
  }
  .luh-events-list.ground-cream .evrow > *{ min-width:0; }

  /* row 1: date left, time right ------------------------------------------------------------
     display:contents dissolves the wrapper so .evrow__time and .evrow__extras become grid items
     of the ROW. Without it the time cannot leave its own band and share the date's line. */
  .luh-events-list.ground-cream .evrow__day{
    grid-column:1 !important; grid-row:1 !important;
    display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap;
  }
  .luh-events-list.ground-cream .evrow > div:nth-child(3){ display:contents !important; }
  .luh-events-list.ground-cream .evrow__time{
    grid-column:2 !important; grid-row:1 !important;
    justify-self:end; text-align:right; white-space:nowrap; margin:0 !important;
  }

  /* row 2: chip, title, format in column 1, with the price/action block BESIDE it in column 2.
     Giving .evrow__book its own full-width row is what made the first attempt at this WORSE
     (209px -> 252px): it added a whole band where the old layout had the button sitting next to
     the copy. Keeping it in column 2 costs no extra height because the copy is taller than it. */
  .luh-events-list.ground-cream .evrow > div:nth-child(2){
    grid-column:1 !important; grid-row:2 !important;
    display:flex; flex-direction:column; align-items:flex-start; gap:.14rem; min-width:0;
  }
  /* align-items:flex-start sizes a flex child to MAX-CONTENT, so a long title ignored the
     column and ran under the price block: measured .evrow__name reaching x=356 while column 1
     ends at 215. This is the same fit-content trap as justify-self:start on a grid item, in its
     flex form. Capping at 100% makes the title wrap inside its own column instead. */
  .luh-events-list.ground-cream .evrow > div:nth-child(2) > *{ max-width:100%; min-width:0; }
  /* v24 compacted the DESKTOP row with `overflow:hidden; white-space:nowrap` on the title, but
     wrote it without a media query, so on mobile it hard-clipped event names mid-word:
     "POKEMON STANDARI", "PALWORLD PRERELE", "MTG TWO-HEADED G". A truncated event name is worse
     than a taller row, so titles wrap here instead. */
  .luh-events-list.ground-cream .evrow__name,
  .luh-events-list.ground-cream .evrow__name a{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere;
  }
  .luh-events-list.ground-cream .evrow__format{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden; line-height:1.35;
  }

  /* extras on its own full-width line under both columns, held to one line -------------------- */
  .luh-events-list.ground-cream .evrow__extras{
    grid-column:1 / -1 !important; grid-row:3 !important;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;
    overflow:hidden; margin:0 !important;
  }

  /* price + action, stacked in column 2 alongside the copy rather than under it */
  .luh-events-list.ground-cream .evrow__book{
    grid-column:2 !important; grid-row:2 !important;
    display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
    gap:.28rem; margin:0 !important; text-align:right; white-space:nowrap;
  }
  .luh-events-list.ground-cream .evrow__fee{ margin:0 !important; }
  .luh-events-list.ground-cream .evrow__note{ margin:0 !important; }
  .luh-events-list.ground-cream .evrow__buy{ margin-left:auto; }

  .luh-events-list.ground-cream .evrow p,
  .luh-events-list.ground-cream .evrow h3,
  .luh-events-list.ground-cream .evrow h4{ margin:0 !important; }
}


/* DELTA calendar-bracketsquare-v37
   The chamfer came from a reference that was shared for its GLOW, not its cut corners, and it
   is what the square corner brackets have been fighting. Square the panel so the brackets have
   a real corner to frame. Glow, lit rim and layered edges are deliberately left alone. */
/* !important is required, not decorative: an earlier rule sets the chamfer with !important
   (`.evcal__panel{--oct:polygon(0 18px,18px 0,...)!important}`), so a plain declaration loses
   no matter how late it appears. The mobile block only squared correctly because it already
   carried !important; desktop kept its cut corners for exactly this reason. */
.evcal__panel{
  --oct: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}
.evcal__underglow i,
.evcal__edgeglow i,
.evcal__shell,
.evcal__fill{
  -webkit-clip-path: var(--oct);
  clip-path: var(--oct);
  border-radius: 3px;
}

/* With a true rectangle the brackets can sit ON the corner instead of across a cut. Slightly
   longer arms and a tighter inset now that there is a corner to hug. */
.evcal__panel{ --brk: 22px; --brk-in: 6px; --brk-w: 2px; }

/* Keep the grid clear of the arms: inset must exceed the bracket's reach (inset + length). */
.evcal__panel .evcal__grid{
  margin: 30px !important;
  width: calc(100% - 60px) !important;
}

@media (max-width:640px){
  .evcal__panel{ --brk: 14px; --brk-in: 4px; --brk-w: 1.5px; }
  .evcal__panel .evcal__grid{
    margin: 20px !important;
    width: calc(100% - 40px) !important;
  }
}

/* ============================================================================================
   DELTA events-console-v39
   The events console: one dark instrument made of a framed calendar, an icon filter rail, the
   selected day, and what is on next.

   Why this block resets so much of what is above it. The calendar picked up decorative layers one
   patch at a time (corner brackets, a clip-path chamfer, an edge glow, a lit bar), each correct on
   its own and none of them aware of the others. Stacked, they collided: that is the "borders
   overlap awkwardly" report. The frame below replaces all of it with the layered construction the
   supplied reference actually uses, so the decorations it supersedes are switched off here rather
   than left to fight it. The reset is scoped to .evcal__frame, so nothing outside the calendar
   changes.

   The frame is FOUR distinct surfaces, not one border with a big shadow. Outward to inward:
     .evcal__glow::after   a faint outer hairline
       (a real gap)
     .evcal__glow          the bright ring, and the only element that carries the bloom
       (a wider gap, the shell's padding)
     .evcal__panel         the calendar's own border
     the dark interior, kept dark on purpose so the bloom never washes the grid out
   Collapsing any of these into the next one loses the border, gap, border reading.
   ============================================================================================ */

/* ---- per-game colour, re-spaced ------------------------------------------------------------
   These were picked one game at a time, so neighbours were never compared: Pokemon red sat next
   to One Piece pink, and Magic's gold sat next to Prerelease Sealed's default gold. The set below
   is laid out on the OKLCH hue circle (perceptually even, unlike HSL) and measured: the closest
   pair of the fifteen is dE00 14.0, the two reported pairs are 24.4 and 50.3, and the six games
   that share the current month are 21.8 apart at their closest. Same-hue families are separated
   by LIGHTNESS instead of hue, which is what makes them readable at chip size.
   Every one of these is overridable per site in the CMS (Events calendar section). */
.evcal [data-gk="dnd"], .evcal [data-gk="dungeons-dragons"], .evcal [data-gk="d-d"] { --evc-accent:#BE464D; }
.evcal [data-gk="pokemon"]      { --evc-accent:#FE674C; }
.evcal [data-gk="fab"]          { --evc-accent:#9F5E25; }
.evcal [data-gk="dragonball"], .evcal [data-gk="dragonball-super"] { --evc-accent:#F29A2D; }
.evcal [data-gk="mtg"], .evcal [data-gk="magic"] { --evc-accent:#EABE4A; }
.evcal [data-gk="yugioh"]       { --evc-accent:#8C8B38; }
.evcal [data-gk="mini"]         { --evc-accent:#92AF83; }
.evcal [data-gk="palworld"]     { --evc-accent:#5DD786; }
.evcal [data-gk="lorcana"]      { --evc-accent:#37B2B4; }
.evcal [data-gk="prerelease-sealed"], .evcal [data-gk="sealed"] { --evc-accent:#68CBFB; }
.evcal [data-gk="starwars"], .evcal [data-gk="star-wars-unlimited"] { --evc-accent:#3C89EA; }
.evcal [data-gk="digimon"]      { --evc-accent:#AEB1FF; }
.evcal [data-gk="riftbound"]    { --evc-accent:#A85BE1; }
.evcal [data-gk="unionarena"], .evcal [data-gk="union-arena"] { --evc-accent:#EE91E2; }
.evcal [data-gk="onepiece"], .evcal [data-gk="one-piece"] { --evc-accent:#EE4C92; }
.evcal [data-gk="casual"]       { --evc-accent:#D9C9A3; }

/* ---- the shell ------------------------------------------------------------------------------ */
.evcal__frame{
  position:relative;
  isolation:isolate;
  z-index:6;
  width:min(100% - 2 * var(--pad, 24px), 1180px);
  margin:26px auto 0;
  padding:10px;
}
/* Atmospheric bloom. Wider than it is tall so the light reads as coming from the frame rather
   than from a rectangle behind it. Blurred and low opacity: it must never touch the grid. */
.evcal__frame::before{
  content:"";
  position:absolute;
  inset:-20px -36px -12px;
  z-index:-2;
  border-radius:18px;
  background:
    radial-gradient(at 50% 2%,   rgba(255,213,122,.38), transparent 58%),
    radial-gradient(at 0%  48%,  rgba(255,177,39,.29),  transparent 33%),
    radial-gradient(at 100% 48%, rgba(255,177,39,.29),  transparent 33%),
    radial-gradient(at 50% 100%, rgba(255,192,62,.24),  transparent 58%);
  opacity:.42;
  filter:blur(11px);
  pointer-events:none;
}
/* Sparse motes around the perimeter. Fixed positions, not an animation: the reference is the
   ceiling for effect here, and a moving field would pull attention off the dates. */
.evcal__frame::after{
  content:"";
  position:absolute;
  inset:-19px -37px -9px;
  z-index:-1;
  pointer-events:none;
  opacity:.82;
  filter:drop-shadow(0 0 4px rgba(255,177,42,.9));
  background:
    radial-gradient(circle at 2% 18%,  #FFD37B 0, #FFD37B 1px, transparent 2px),
    radial-gradient(circle at 7% 55%,  #E99C27 0, #E99C27 1px, transparent 2px),
    radial-gradient(circle at 11% 88%, #FFD47F 0, #FFD47F 1px, transparent 2px),
    radial-gradient(circle at 20% 2%,  #F6B73D 0, #F6B73D 1px, transparent 2px),
    radial-gradient(circle at 42% 0%,  #FFE0A0 0, #FFE0A0 1px, transparent 2px),
    radial-gradient(circle at 67% 1%,  #EFAA32 0, #EFAA32 1px, transparent 2px),
    radial-gradient(circle at 88% 5%,  #FFD67F 0, #FFD67F 1px, transparent 2px),
    radial-gradient(circle at 98% 28%, #EFAA32 0, #EFAA32 1px, transparent 2px),
    radial-gradient(circle at 96% 76%, #FFDB8B 0, #FFDB8B 1px, transparent 2px),
    radial-gradient(circle at 84% 99%, #EFAA32 0, #EFAA32 1px, transparent 2px),
    radial-gradient(circle at 50% 100%,#FFD67F 0, #FFD67F 1px, transparent 2px),
    radial-gradient(circle at 17% 98%, #F2AA32 0, #F2AA32 1px, transparent 2px);
}

/* ---- ring 2: the bright inner ring, and ring 1 on its ::after ------------------------------- */
.evcal__glow{
  position:absolute;
  inset:1px;
  z-index:1;
  border:1px solid rgba(255,229,163,.94);
  border-radius:5px;
  pointer-events:none;
  box-shadow:
    0 0 2px  rgba(255,249,224,.98),
    0 0 6px  rgba(255,220,137,.86),
    0 0 12px rgba(255,183,45,.56),
    0 0 22px rgba(242,148,22,.25),
    inset 0 0 4px rgba(255,239,193,.42);
  filter:drop-shadow(0 0 5px rgba(255,190,54,.52));
}
.evcal__glow::after{
  content:"";
  position:absolute;
  inset:-3px;
  border:1px solid rgba(255,223,146,.55);
  border-radius:7px;
  box-shadow:0 0 8px rgba(255,181,38,.42), 0 0 14px rgba(236,142,16,.14);
}

/* ---- the panel ------------------------------------------------------------------------------ */
/* Everything the frame supersedes. These belong to earlier passes and are what collided. */
.evcal__frame .evcal__underglow,
.evcal__frame .evcal__edgeglow,
.evcal__frame .evcal__shell,
.evcal__frame .evcal__fill,
.evcal__frame .evcal__lightbar,
.evcal__frame .evcal__cornerlight{ display:none !important; }
.evcal__frame .evcal__panel::before,
.evcal__frame .evcal__panel::after{ content:none !important; }

.evcal__frame .evcal__panel{
  position:relative;
  z-index:3;
  display:block;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  border:1px solid rgba(224,175,80,.78) !important;
  border-radius:3px !important;
  background:
    radial-gradient(at 50% 57%, rgba(27,66,99,.22) 0%, rgba(13,41,66,.11) 34%, transparent 64%),
    linear-gradient(180deg, rgba(8,28,47,.992), rgba(3,17,31,.996)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,227,160,.09),
    inset 0 0 38px rgba(0,0,0,.25),
    0 18px 50px rgba(0,0,0,.42) !important;
}

/* ---- toolbar: the month lives INSIDE the frame ----------------------------------------------- */
/* The track widths are the REAL control widths, not the ones this file would like them to be.
   The nav buttons are held at 44px by the site's tap-target rule (WCAG 2.5.8), so two of them plus
   their gap need 94px. Sizing the column at 76px did not shrink the buttons, it pushed them out of
   the cell, and at 360px that put one of them off screen entirely. Shrinking the buttons instead
   would have fixed the layout by breaking the accessibility work. */
.evcal__toolbar{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 94px;
  align-items:center;
  gap:8px;
  min-height:68px;
  padding:0 12px;
  border-bottom:1px solid rgba(212,162,74,.28);
}
.evcal__toolbar .evcal__month{
  margin:0;
  font-family:var(--serif, "EB Garamond", Georgia, serif);
  font-size:clamp(1.5rem, 2.6vw, 2.35rem);
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.05;
  text-align:center;
  text-transform:uppercase;
  color:var(--gold-hot, #FFC952);
  text-shadow:0 0 18px rgba(255,201,82,.28);
}
/* The two small ornaments either side of the month, from the reference. Decorative only. */
.evcal__toolbar .evcal__month::before,
.evcal__toolbar .evcal__month::after{
  content:"\2726";
  display:inline-block;
  margin:0 .55em;
  font-size:.42em;
  vertical-align:.42em;
  color:rgba(184,136,58,.95);
}
.evcal__toolbar .evcal__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.evcal__frame .evcal__navbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid rgba(212,162,74,.55);
  border-radius:2px;
  background:linear-gradient(180deg, rgba(19,42,68,.85), rgba(6,20,36,.9));
  color:var(--gold, #D4A24A);
  font-size:.95rem;
  line-height:1;
  text-decoration:none;
  transition:border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.evcal__frame .evcal__navbtn:hover,
.evcal__frame .evcal__navbtn:focus-visible{
  border-color:rgba(255,201,82,.9);
  color:var(--gold-hot, #FFC952);
  box-shadow:0 0 10px rgba(255,187,49,.35);
}
.evcal__frame .evcal__navbtn--off{ opacity:.28; pointer-events:none; }
.evcal__frame .evcal__navbtn--today span[aria-hidden]{ font-size:.6rem; }

/* ---- grid ------------------------------------------------------------------------------------ */
.evcal__frame .evcal__grid{
  position:relative;
  z-index:5;
  width:100% !important;
  margin:0 !important;
  border:0;
  border-collapse:collapse;
  background:transparent;
  table-layout:fixed;
}
.evcal__frame .evcal__grid thead th{
  padding:.55rem .25rem;
  background:rgba(212,162,74,.10);
  border-bottom:1px solid rgba(212,162,74,.30);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold, #D4A24A);
}
.evcal__frame .evcal__cell{
  border:1px solid rgba(212,162,74,.16);
  vertical-align:top;
}
/* Day art was reading louder than the events sitting on top of it. Kept, because it is what makes
   this calendar look like a game store's and not a booking widget, but pushed back so the chips
   win. The art is painted as the cell's own background layer, not a pseudo-element, so this has
   to deepen the scrim above it rather than lower an opacity. */
.evcal__frame .evcal__cell--has{
  background-image:
    linear-gradient(180deg, rgba(6,18,42,.905) 0%, rgba(6,18,42,.955) 100%),
    var(--day-art, none) !important;
}
.evcal__frame .evcal__cell--has:hover{
  background-image:
    linear-gradient(180deg, rgba(6,18,42,.82) 0%, rgba(6,18,42,.90) 100%),
    var(--day-art, none) !important;
}
.evcal__frame .evcal__cell--pad{ background:rgba(0,0,0,.18); }

/* Selected day: a thin gold outline and a low interior light. Never a filled gold block, which
   loses the date number and shouts louder than the day's events. */
.evcal__frame .evcal__cell--sel{
  box-shadow:
    inset 0 0 0 1px var(--gold-hot, #FFC454),
    inset 0 0 22px rgba(255,189,64,.10),
    0 0 13px rgba(255,187,49,.27);
}
.evcal__frame .evcal__cell--sel.evcal__cell--has{
  background-image:
    linear-gradient(145deg, rgba(74,58,24,.42), rgba(3,17,29,.94)),
    var(--day-art, none) !important;
}
.evcal__frame .evcal__cell--sel:not(.evcal__cell--has){
  background-image:linear-gradient(145deg, rgba(36,37,30,.32), rgba(3,17,29,.40));
}
/* Filtered out: dimmed, not removed. The shape of the month is information too. */
.evcal__frame .evcal__cell--dim{ opacity:.34; }
.evcal__frame .evcal__cell--dim .evcal__minirow{ display:none; }
.evcal__frame .evcal__day:focus-visible{
  outline:2px solid var(--gold-hot, #FFC952);
  outline-offset:-2px;
}

/* ---- the game filter rail --------------------------------------------------------------------- */
.evcal__filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  width:min(100% - 2 * var(--pad, 24px), 1180px);
  margin:18px auto 0;
  padding:0;
  list-style:none;
}
.evcal .evcal__gf{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:104px;
  min-height:80px;
  padding:10px 6px;
  border:1px solid rgba(212,162,74,.42);
  border-radius:1px;
  background:
    radial-gradient(circle at 50% 26%, rgba(112,82,31,.20), transparent 54%),
    linear-gradient(180deg, rgba(20,26,40,.96), rgba(5,13,22,.99));
  color:var(--cream-text, #F4EAD4);
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.evcal .evcal__gf::after{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(212,162,74,.13);
  pointer-events:none;
}
/* "All events" is the only chip with no game behind it, so it takes the house gold. Setting the
   fallback on .evcal__gf itself instead would beat the per-game rules on specificity and every
   icon in the rail would come out gold, which is exactly what the first pass did. */
.evcal .evcal__gf[data-filter="all"]{ --evc-accent:var(--gold, #D4A24A); }
.evcal .evcal__gficon{
  width:28px;
  height:28px;
  fill:var(--evc-accent, var(--gold, #D4A24A));
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--evc-accent) 45%, transparent));
}
/* prerelease-filter-v1: the Prerelease filter chip uses the sealed icon as a FOIL GRADIENT (not
   gold). A masked span lets the glyph clip a gradient background. */
.evcal .evcal__gficon--foil{
  display:inline-block; width:28px; height:28px; vertical-align:middle; fill:none;
  -webkit-mask:url("/assets/icons/g-sealed.svg?v=1785453763") center/contain no-repeat;
          mask:url("/assets/icons/g-sealed.svg?v=1785453763") center/contain no-repeat;
  background:linear-gradient(135deg, #68CBFB, #EFBF4D 45%, #ffffff 55%, #68CBFB);
  filter:drop-shadow(0 0 6px color-mix(in srgb, #68CBFB 45%, transparent));
}
.evcal .evcal__gflabel{
  font-size:.6rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  line-height:1.15;
  text-align:center;
  color:rgba(244,234,212,.82);
}
.evcal .evcal__gf:hover{ border-color:color-mix(in srgb, var(--evc-accent) 60%, transparent); transform:translateY(-1px); }
.evcal .evcal__gf.is-active{
  border-color:var(--evc-accent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--evc-accent) 35%, transparent),
             0 0 16px color-mix(in srgb, var(--evc-accent) 32%, transparent);
}
.evcal .evcal__gf.is-active .evcal__gflabel{ color:#FFF6E2; }
.evcal .evcal__gf:focus-visible{ outline:2px solid var(--gold-hot, #FFC952); outline-offset:2px; }

/* The old legend was a row of dots with no behaviour. The rail replaces it. */
.evcal .evcal__legend{ display:none !important; }

/* The standalone chip bar has stood down, but its section still holds the tear that leads into
   the cream feed. Without this it also holds its full inner padding, which reads as a band of
   empty navy between the console and the tear: the same dead space this redesign removes higher
   up the page.

   Zero is too far the other way. The tear is drawn with a negative offset so it bites up into the
   section above it, and with no padding at all it bit through the "See every upcoming event"
   button. This keeps a measured 48px of clearance under the button and drops the rest. */
.luh-filter--railed{ padding-block:48px 0 !important; }

/* ---- selected day + what is next --------------------------------------------------------------- */
.evcal__agenda{
  display:grid;
  grid-template-columns:minmax(0,51fr) minmax(0,49fr);
  gap:18px;
  align-items:start;
  width:min(100% - 2 * var(--pad, 24px), 1180px);
  margin:18px auto 0 !important;
  padding:0 !important;
  border:0 !important;
}
.evcal__agenda > .evcal__daycol{ min-width:0; }
.evcal__agenda .evcal__next{ min-width:0; margin:0 !important; }
.evcal__agendahead,
.evcal__nexthead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(212,162,74,.3);
  font-family:var(--serif, Georgia, serif);
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--cream-text, #F4EAD4);
}
.evcal__agendacount{
  font-family:var(--sans, Inter, Arial, sans-serif);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold, #D4A24A);
}

/* Compact rows. The console is a scanning surface: the full description belongs to the feed
   further down the page, not to a row someone reads while deciding which day to click.
 *
 * These carry !important and a three-class prefix on purpose. The row picked up 113 separate
 * declarations across earlier passes, several of them !important inside media queries (a full
 * "art / time / body / fee" stacked layout among them). A polite rule here loses to those and the
 * row renders as the old tall card with the time floating over the middle of it. */
.evcal .evcal__list,
.evcal .evcal__nextlist{ display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; }
.evcal .evcal__agenda .evcal__item{
  display:grid !important;
  grid-template-columns:62px 34px minmax(0,1fr) auto !important;
  grid-template-areas:none !important;
  align-items:center !important;
  column-gap:10px !important;
  row-gap:0 !important;
  height:auto !important;
  min-height:58px !important;
  padding:8px 12px !important;
  border:1px solid rgba(212,162,74,.26);
  border-left:3px solid var(--evc-accent, var(--gold));
  border-radius:2px;
  background:linear-gradient(90deg, rgba(243,234,214,.07), rgba(243,234,214,.02));
}
.evcal .evcal__agenda .evcal__item > .evcal__art{ display:none !important; }
.evcal .evcal__agenda .evcal__itemtime{
  grid-area:auto !important;
  grid-column:auto !important;
  display:block !important;
  position:static !important;
  margin:0 !important;
  padding:0 !important;
  font-size:.78rem !important;
  font-weight:700;
  line-height:1.2 !important;
  letter-spacing:.02em;
  color:var(--gold-hot, #FFC952);
  white-space:nowrap;
}
.evcal .evcal__agenda .evcal__itemicon{
  grid-area:auto !important;
  grid-column:auto !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
}
.evcal .evcal__agenda .evcal__itembody{
  grid-area:auto !important;
  grid-column:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:2px !important;
  padding:0 !important;
}
.evcal .evcal__agenda .evcal__fee,
.evcal .evcal__agenda .evcal__flag{
  grid-area:auto !important;
  grid-column:auto !important;
  justify-self:end !important;
  margin:0 !important;
  order:0 !important;
}
.evcal .evcal__agenda .evcal__itemlink{
  order:0 !important;
  font-size:.94rem !important;
}
.evcal .evcal__agenda .evcal__chip{ display:none !important; }   /* the meta line names the game */
.evcal .evcal__itemicon img{ width:34px; height:34px; object-fit:contain; }
.evcal .evcal__itemglyph{ width:26px; height:26px; fill:var(--evc-accent, var(--gold)); }
.evcal .evcal__itembody{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.evcal .evcal__itemlink{
  font-size:.94rem;
  font-weight:600;
  line-height:1.25;
  color:var(--cream-text, #F4EAD4);
  text-decoration:none;
}
.evcal .evcal__itemlink:hover{ text-decoration:underline; text-underline-offset:3px; }
.evcal .evcal__itemmeta{
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--evc-accent, var(--gold));
}
.evcal .evcal__fee,
.evcal .evcal__nextfee{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
  color:var(--gold-hot, #FFC952);
}
.evcal .evcal__fee--free{ color:#8FE0A8; }
.evcal .evcal__item.is-cancelled{ opacity:.6; }

.evcal .evcal__nextrow{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:7px 12px;
  border:1px solid rgba(212,162,74,.26);
  border-left:3px solid var(--evc-accent, var(--gold));
  border-radius:2px;
  background:linear-gradient(90deg, rgba(243,234,214,.06), rgba(243,234,214,.015));
}
.evcal .evcal__nextdate{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.evcal .evcal__nextdate b{ font-size:1.15rem; font-weight:700; color:var(--gold-hot, #FFC952); }
.evcal .evcal__nextdate span{ font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold, #D4A24A); }
/* Long titles must wrap inside their track. "One Piece Weekly - Standard Constructed (Thursdays)"
   is a real event name, and as an inline anchor with nothing to constrain it, its box ran 130px
   past a 360px viewport. min-width:0 is the part that actually does the work: a grid child
   defaults to min-content, so the track refuses to shrink below the longest unbreakable run. */
.evcal .evcal__nextbody,
.evcal .evcal__nextname{ min-width:0; }
.evcal .evcal__nextname a{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
  font-size:.9rem; font-weight:600; color:var(--cream-text, #F4EAD4); text-decoration:none;
}
.evcal .evcal__nextmeta{ overflow-wrap:anywhere; }
.evcal .evcal__agenda .evcal__itemlink{ overflow-wrap:anywhere; }
.evcal .evcal__nextname a:hover{ text-decoration:underline; text-underline-offset:3px; }
.evcal .evcal__nextmeta{ font-size:.68rem; color:rgba(174,183,193,.9); }
.evcal .evcal__viewall{ margin:12px 0 0; text-align:right; }

.evcal__empty{ margin:0; padding:14px 2px; font-size:.86rem; color:rgba(174,183,193,.92); }

/* A month is being fetched. Restrained on purpose: a spinner over a calendar that is still
   perfectly readable is noise. */
.evcal.is-loading .evcal__frame{ opacity:.55; transition:opacity .12s ease; }

/* ---- responsive ------------------------------------------------------------------------------- */
@media (max-width:900px){
  .evcal__agenda{ grid-template-columns:1fr; gap:22px; }
  .evcal__toolbar{ min-height:58px; grid-template-columns:44px minmax(0,1fr) 94px; }
  .evcal .evcal__gf{ width:auto; min-height:66px; }
  .evcal__filters{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
  .evcal .evcal__gficon{ width:24px; height:24px; }
}
@media (max-width:560px){
  .evcal__frame{ padding:7px; margin-top:18px; }
  .evcal__frame::before{ inset:-14px -18px -8px; }
  .evcal__frame::after{ inset:-13px -19px -6px; }
  /* The buttons stay 44px (tap target). Only the gap and the padding come down, so the toolbar
     fits a 360px screen without touching the accessibility floor. */
  .evcal__toolbar{ min-height:52px; padding:0 6px; gap:4px;
                   grid-template-columns:44px minmax(0,1fr) 92px; }
  /* The title has to fit the middle track, which is only ~110px once two 44px buttons and the
     padding are accounted for. Sized against the viewport rather than fixed, and the two ornaments
     are dropped: at this width they cost about 2em and are the difference between the month
     sitting in its cell and running underneath the buttons. */
  /* Below 430px the three-across toolbar leaves the month about 110px, and the only way to fit
     "AUGUST 2026" in that is 12px type, which is too small to read as the calendar's heading. So
     the arrows keep the top line and the month takes a full-width second line, still inside the
     panel. Nothing is hidden: both arrows and the jump-to-today control stay exactly where they
     were, which is why this is a row change and not a "drop a button on mobile" change. */
  .evcal__toolbar{ row-gap:2px; padding-bottom:6px; }
  .evcal__toolbar > a:first-child,
  .evcal__toolbar > span:first-child{ grid-row:1; grid-column:1; }
  .evcal__toolbar .evcal__actions{ grid-row:1; grid-column:3; }
  .evcal__toolbar .evcal__month{ grid-row:2; grid-column:1 / -1; }

  /* !important is not decoration here. The v28 mobile pass set
     `.evcal__month{font-size:clamp(1.45rem,6.6vw,2.1rem)!important}` back when the month was a
     full-width heading above the frame with the whole viewport to itself. Inside a 110px toolbar
     cell that is 24px of type in 110px of space, and !important beats higher specificity, so the
     polite version of this rule lost and the title ran under the buttons. Sized to FIT rather
     than to be clipped: overflow:hidden alone would just cut "2026" in half. */
  .evcal__toolbar .evcal__month{
    font-size:clamp(1.02rem, 4.6vw, 1.5rem) !important;
    letter-spacing:.02em !important;
    min-width:0;
    overflow:hidden;
    white-space:nowrap !important;
  }
  .evcal__toolbar .evcal__month::before,
  .evcal__toolbar .evcal__month::after{ content:none !important; margin:0 !important; }
  .evcal .evcal__item{ grid-template-columns:52px 28px minmax(0,1fr); row-gap:2px; padding:8px 10px; }
  .evcal .evcal__item .evcal__fee,
  .evcal .evcal__item .evcal__flag{ grid-column:3; justify-self:start; }
  .evcal .evcal__itemicon,
  .evcal .evcal__itemicon img{ width:28px; height:28px; }
  .evcal__filters{ gap:5px; }
  .evcal .evcal__gf{ min-height:58px; padding:8px 4px; gap:4px; }
  .evcal .evcal__gflabel{ font-size:.54rem; letter-spacing:.06em; }
}

@media (prefers-reduced-motion:reduce){
  .evcal .evcal__gf,
  .evcal__frame .evcal__navbtn,
  .evcal.is-loading .evcal__frame{ transition:none; }
  .evcal .evcal__gf:hover{ transform:none; }
}

/* ============================================================================================
   DELTA hero-console-v40
   The intro and the calendar become ONE composition.

   The report: "GAME NIGHT, EVERY WEEK." sat left-aligned in the old narrow hero, the calendar
   carried its own eyebrow and title, and the background changed to a lighter blue exactly where
   the calendar began, so the calendar read as pasted into a second section.

   Measured before this block, at 1440:
     .luh-subhero  linear-gradient(#0a1f4d, #061336 55%, #03081c)   <- fades DOWN to near black
     .evcal        radial-gradient(120% 80% at 50% 0%, rgba(16,41,78,.55) ...)  <- opens LIGHTER
   Two gradients meeting at a hard edge. That is the seam, and no amount of margin fixes it.

   Also measured: 79px of subhero bottom padding + 30px of evcal top padding + a 77px heading
   block + 26px of frame margin = about 212px between the paragraph and the calendar. The target
   is 24 to 34.

   What this does NOT do: it does not restructure the two CMS section instances into one parent.
   They are sibling section_instances rendered by the CMS insertion slot, and nesting them would
   mean changing the CMS render model for one page. Making the two sections share one continuous
   field, one width and one centre line achieves the composition the report is actually about.
   ============================================================================================ */

/* ---- one continuous field ------------------------------------------------------------------
   Both sections now paint the SAME base, so there is no edge to see. The depth that used to come
   from a full-width lighter band now comes from a soft radial sitting behind the calendar only:
   localised depth instead of a horizontal stripe. */
.luh-subhero.pad-inner{
  background:linear-gradient(180deg, #071a33 0%, #061a30 62%, #061a30 100%) !important;
  padding-block:clamp(22px, 3vw, 38px) 0 !important;
}
.evcal{
  background:
    radial-gradient(120% 62% at 50% 30%, rgba(20,52,92,.34), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #061a30 0%, #051629 58%, #03101f 100%) !important;
  padding-block:0 clamp(2rem, 5vw, 3.5rem) !important;
}

/* ---- the intro: centred, compact, on the calendar's centre line ---------------------------- */
.luh-subhero .wrap{
  width:min(100% - 40px, 760px) !important;
  max-width:min(100% - 40px, 760px) !important;
  margin-inline:auto !important;
  text-align:center !important;
}
.luh-subhero .luh-subhero__eyebrow,
.luh-subhero .eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  margin:0 0 8px !important;
  text-align:center !important;
}
/* The two fine gold rules either side of the eyebrow, from the reference. Decorative only. */
.luh-subhero .luh-subhero__eyebrow::before,
.luh-subhero .luh-subhero__eyebrow::after,
.luh-subhero .eyebrow::before,
.luh-subhero .eyebrow::after{
  content:"";
  height:1px;
  width:clamp(18px, 5vw, 54px);
  background:linear-gradient(90deg, rgba(212,162,74,0), rgba(212,162,74,.75));
}
.luh-subhero .luh-subhero__eyebrow::after,
.luh-subhero .eyebrow::after{ background:linear-gradient(90deg, rgba(212,162,74,.75), rgba(212,162,74,0)); }

.luh-subhero h1{
  margin:0 0 10px !important;
  text-align:center !important;
}
.luh-subhero .luh-subhero__lede,
.luh-subhero .lede{
  max-width:60ch;
  margin:0 auto !important;
  text-align:center !important;
}
/* The breadcrumb keeps its own line and does not push the intro off centre. */
.luh-subhero .crumb,
.luh-subhero nav[aria-label="Breadcrumb"]{ justify-content:center; text-align:center; }

/* ---- the calendar's own heading block is gone --------------------------------------------- */
/* Removed from the template, not hidden here. This rule only closes the gap it used to occupy,
   for any cached page still carrying the old markup. */
.evcal .evcal__head{ display:none !important; }

/* ---- width: the calendar leads, and everything under it agrees with it --------------------- */
/* 1280 of 1440 is 89 percent of the viewport: dominant, still clear of the edge, and the same
   line as the filter rail and the two event columns so the whole console reads as one object. */
.evcal__frame,
.evcal__filters,
.evcal__agenda{
  width:min(100% - 48px, 1280px) !important;
  margin-inline:auto !important;
}
.evcal__frame{ margin-top:clamp(18px, 2.2vw, 30px) !important; }
.evcal__filters{ margin-top:clamp(12px, 1.4vw, 20px) !important; }
.evcal__agenda{ margin-top:clamp(18px, 2.2vw, 26px) !important; }

@media (max-width:900px){
  .evcal__frame,
  .evcal__filters,
  .evcal__agenda{ width:min(100% - 28px, 1280px) !important; }
}
@media (max-width:560px){
  .luh-subhero .wrap{ width:min(100% - 28px, 760px) !important; }
  .evcal__frame,
  .evcal__filters,
  .evcal__agenda{ width:min(100% - 20px, 1280px) !important; }
}

/* ---- the torn seam ---------------------------------------------------------------------------
   Three separate faults met at this one edge, all measured from the rendered pixels rather than
   guessed:

     navy above the tear   #081A31   (the console)
     navy in the teeth     #03081C   <- the page background showing through a transparent section
     the bar on the seam   #FFC93C   <- .pre-rip's 9px top edge, left behind
     cream in the tear     #F1E9DA   <- lifted by a white wash
     cream below           #EBE0CB   (the section)

   1. The gold edge belonged to the filter chip bar. Now that the bar stands down (the icon rail
      lives in the console), the edge is a stripe sitting on nothing. It goes with its owner.
   2. The teeth were never given a colour: the section is transparent, so they showed whatever the
      page background is, which is darker than the console that ends directly above them. The
      strip now carries the console's own ending navy, so the tear reads as the console tearing.
   3. The tear painted a white wash to match a wash on .ground-cream. That section no longer has
      one (its background-image computes to none), so the compensation had nothing left to
      compensate for and simply made the tear lighter than the paper below it. */
.luh-filter--railed::before,
.luh-filter--railed::after{ content:none !important; display:none !important; }

.luh-filter--railed{
  background:#03101f !important;      /* matches the console's last stop, so there is no step */
}

.luh-filter--railed .torn{
  background-image:none !important;   /* the wash it was matching no longer exists */
  background-color:var(--paper) !important;
}


/* ============================================================================================
   DELTA seam-width-v41
   Two things: the dark bar between the intro and the calendar, and the console's width.

   THE BAR. Both sections were painting the right colour, which is why matching the gradients did
   not fix it. Measured: .luh-subhero ends at y=385, .evcal starts at y=415, and the 30px between
   them is the page background showing through. What holds them apart is a
   <span class="cms-section-anchor"> the CMS emits between section instances. It is INLINE, so it
   generates a line box roughly one line-height tall, in a gap neither section paints.

   It is an anchor target for #slug links, so it is not removed: it is taken out of the flow while
   staying in the document, which keeps the anchor working and closes the gap.
   ============================================================================================ */
.cms-section-anchor{
  display:block !important;
  height:0 !important;
  line-height:0 !important;
  font-size:0 !important;
  overflow:hidden !important;
}

/* ---- width ------------------------------------------------------------------------------------
   The console goes from 1280 to 1384 at a 1440 viewport (about 8 percent wider), and the side
   gutter from 80px to 28px.

   Why not the full 10 percent: the frame's atmospheric bloom is drawn 36px OUTSIDE the frame on
   each side. A gutter narrower than that clips the glow, or pushes the document wider than the
   viewport and creates a horizontal scrollbar. So the bloom is brought in to 24px horizontally
   first, and the frame then widens into the room that frees. The glow still reads the same; it
   just no longer needs 36px of air it was not using visibly. */
.evcal__frame,
.evcal__filters,
.evcal__agenda{
  width:min(100% - 56px, 1384px) !important;
}
.evcal__frame::before{ inset:-20px -24px -12px !important; }
.evcal__frame::after{  inset:-19px -25px -9px  !important; }

@media (max-width:900px){
  .evcal__frame,
  .evcal__filters,
  .evcal__agenda{ width:min(100% - 24px, 1384px) !important; }
  .evcal__frame::before{ inset:-14px -14px -8px !important; }
  .evcal__frame::after{  inset:-13px -15px -6px !important; }
}
@media (max-width:560px){
  .evcal__frame,
  .evcal__filters,
  .evcal__agenda{ width:min(100% - 16px, 1384px) !important; }
  .evcal__frame::before{ inset:-10px -8px -6px !important; }
  .evcal__frame::after{  inset:-9px -9px -5px !important; }
}

/* ---- the 30px strip, and the width cap --------------------------------------------------------
   THE STRIP. Measured: .luh-subhero ends at y=385, .evcal starts at y=415, both margins compute to
   0px, both sections are siblings of the same block parent with no padding or gap, and the anchor
   between them is now 0px tall. Tested and ruled out: parent font-size 0 (still 30), removing the
   anchor entirely (still 30), flow-root on the subhero (still 30), hairline padding on .evcal
   (still 30, so it is not the frame's top margin collapsing through), extra padding on the subhero
   (still 30, it just makes the section taller). A -30px margin on .evcal closes it exactly.

   Rather than pull a section up by a negative margin, which moves real layout to hide a strip, the
   strip is PAINTED: the wrapper that holds both sections carries the same navy they meet at, so
   there is nothing to see. The cream sections below paint their own background and are unaffected,
   and the tear keeps its own darker navy set above.

   THE WIDTH CAP. .evcal carries padding-inline:40px, so the frame's own width rule was resolving
   against a 1360px content box, not the 1440px viewport, and capped at 1302. The section's inline
   padding is removed and the gutter is owned by the frame's width rule alone, which is what makes
   the calendar actually reach 1384. */
/* The sections are DIRECT children of <main id="main-content">, not of a wrapper div, which is
   why an earlier `main > div` selector matched nothing. The cream sections paint their own
   background over this, and the tear strip paints its own, so only the unowned strip is
   affected. */
.page-events #main-content{ background:#061a30; }

.evcal{ padding-inline:0 !important; }


/* ============================================================================================
   DELTA rip-clearance-v42
   REGRESSION FIX, mine, from the same night.

   The hero-console pass (v40) tightened the events hero with:

       .luh-subhero.pad-inner{ padding-block: clamp(22px,3vw,38px) 0 !important; }

   `padding-block` is a shorthand for BOTH block edges, so that set padding-bottom to 0. The
   selector carries no page scope, so it applied to the subhero on EVERY page, and it silently
   removed the clearance that `.pre-rip` reserves for the torn edge:

       --rip-h: 84px
       .ripped  { margin-top: -84px }                       the cream section pulls UP 84px
       .pre-rip { padding-bottom: calc(var(--rip-h) + 28px) } the hero reserves 112px for it

   With that reservation zeroed, the tear pulled up over live content. Measured after the deploy:
   the badge row (.pill) ended 84px INSIDE the tear on party.html, subscriptions.html and
   sell.html. The rips are not the problem and are not touched; the space they need was taken
   away from them.

   Two changes, in order of importance:
   1. The events-only tightening is scoped to the events page and only ever sets padding-TOP, so
      it can never take the tear's clearance again on any page.
   2. Every section that immediately precedes a torn section reserves the tear's height, whether
      or not somebody remembered to add .pre-rip. The CMS emits an anchor <span> between section
      instances, so the sibling selector has to look past it. This is what stops the next new
      page from having the same bug.
   ============================================================================================ */

/* 1. undo the sitewide half of the v40 rule, and re-scope it.

      NOT with `unset`. Padding is not an inherited property, so `unset` resolves to `initial`,
      which is 0: it does not remove the earlier declaration, it replaces it with nothing. That
      left every hero on the site with no padding at all. The value has to be restated. */
.luh-subhero.pad-inner{ padding-block:var(--pad-inner) !important; }
.page-events .luh-subhero.pad-inner{
  padding-top:clamp(22px, 3vw, 38px) !important;
  padding-bottom:0 !important;   /* the events page has no tear directly under the hero */
}

/* 2. the reservation is structural, not something to remember per page.
      A section followed by a torn section always keeps the tear's height clear, plus breathing
      room, so the tear reads as an edge rather than a crop. */
.pre-rip{ padding-bottom:calc(var(--rip-h) + 34px) !important; }
:where(section):has(+ .cms-section-anchor + .ripped),
:where(section):has(+ .ripped){
  padding-bottom:calc(var(--rip-h) + 34px) !important;
}
/* The events page's own strip owns its spacing and must not gain a second reservation. */
.page-events .luh-filter--railed{ padding-bottom:0 !important; }


/* ============================================================================================
   DELTA mobile-grid-v43
   The month grid must always be seven equal columns that span the panel.

   Reproduced at 360px: the first row measured [31,31,31,31,31,37,40]. `table-layout:fixed` only
   fixes the ALGORITHM; without an explicit width the first row's cells still distribute by their
   content, so the days that carry event chips claim more width and the empty days are squeezed.
   On a phone that reads as a lopsided calendar with the week pushed to one side.

   Fixing it by width rather than by hoping: every cell is exactly one seventh, the table is told
   to fill its panel, and the chips inside are allowed to shrink instead of setting a floor.
   min-width:0 is the part that actually lets them: a grid/flex child defaults to min-content, so
   without it a long event title keeps its column wide no matter what the table says.
   ============================================================================================ */
.evcal__panel .evcal__grid{
  width:100% !important;
  table-layout:fixed !important;
  border-collapse:collapse;
}
.evcal__panel .evcal__grid thead th,
.evcal__panel .evcal__grid tbody td{
  width:14.2857% !important;
  max-width:14.2857% !important;
  overflow:hidden;
}
.evcal__panel .evcal__grid .evcal__mini,
.evcal__panel .evcal__grid .evcal__minirow,
.evcal__panel .evcal__grid .evcal__minilink{
  min-width:0 !important;
  max-width:100% !important;
}
.evcal__panel .evcal__grid .evcal__minititle{
  min-width:0 !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* At the narrowest phones the gutter has to stay wider than the bloom, or the glow paints past
   the viewport and the document scrolls sideways. Measured at 320px: 4px of overflow. The gutter
   goes to 14px a side and the bloom to 10px, which keeps 4px of clearance. */
@media (max-width:400px){
  .evcal__frame,
  .evcal__filters,
  .evcal__agenda{ width:min(100% - 28px, 1384px) !important; }
  .evcal__frame::before{ inset:-10px -10px -6px !important; }
  .evcal__frame::after{  inset:-9px  -9px  -5px !important; }
}


/* ============================================================================================
   DELTA console-naming-v44
   Alignment in the two event panels.

   Reported: "text and button alignments for that are also a problem". In the compact rows the
   price and the action were laid out by whatever the row's content happened to be, so a row with
   a short title and a row with a long one put their price in different places, and FREE sat on a
   different baseline from $10. The columns are now declared, not inferred.
   ============================================================================================ */
.evcal .evcal__nexthead > span,
.evcal .evcal__agendahead > span{ letter-spacing:.01em; }

/* the price column is a fixed track, so every price starts on the same line regardless of title */
.evcal .evcal__nextrow{
  grid-template-columns:46px minmax(0,1fr) minmax(64px, max-content) !important;
  align-items:center !important;
}
.evcal .evcal__nextfee{
  justify-self:end !important;
  text-align:right !important;
  align-self:center !important;
  white-space:nowrap;
}
.evcal .evcal__agenda .evcal__item{
  grid-template-columns:62px 34px minmax(0,1fr) minmax(64px, max-content) !important;
}
.evcal .evcal__agenda .evcal__fee,
.evcal .evcal__agenda .evcal__flag{
  justify-self:end !important;
  text-align:right !important;
  align-self:center !important;
}
/* the two headings sit on one baseline with their counts */
.evcal .evcal__agendahead,
.evcal .evcal__nexthead{ align-items:baseline !important; min-height:34px; }


/* ============================================================================================
   DELTA event-modal-v45
   The event card that opens from a calendar day.

   Reported: it looked like a generic dialog, and "the link to the event is just a bordered box,
   not obvious that's the event page". Both are addressed by what the card is made of, not by
   decoration: a real picture at the top, the game's own accent down the edge, and an action that
   is shaped like an action.
   ============================================================================================ */
.evmodal__card{
  overflow:hidden;
  border:1px solid rgba(224,175,80,.75) !important;
  border-radius:3px !important;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(27,66,99,.28), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #08203a, #04121f) !important;
  box-shadow:0 0 0 1px rgba(255,227,160,.09) inset, 0 26px 70px rgba(0,0,0,.6) !important;
  padding:0 !important;
}
/* the game's colour runs down the edge, so the card is identifiably that game's event */
.evmodal__card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--evc-accent, var(--gold, #D4A24A));
}

.evmodal__art{
  position:relative;
  aspect-ratio:64/27;
  background:linear-gradient(135deg, color-mix(in srgb, var(--evc-accent, #D4A24A) 34%, #0b1b33), #061626);
  border-bottom:1px solid rgba(212,162,74,.34);
}
.evmodal__art img{ width:100%; height:100%; object-fit:cover; display:block; }
/* a soft floor under the glyph so it stays legible on any photo */
.evmodal__art::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:56%;
  background:linear-gradient(180deg, rgba(4,16,28,0), rgba(4,16,28,.72));
  pointer-events:none;
}
.evmodal__glyph{
  position:absolute; right:12px; bottom:10px; z-index:2;
  width:34px; height:34px;
  fill:var(--evc-accent, var(--gold, #D4A24A));
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.75));
}
.evmodal__body{ padding:16px 18px 18px; }

/* the action reads as an action: filled, with an arrow that moves on hover */
.evmodal__go{
  display:inline-flex !important;
  align-items:center;
  gap:.55rem;
  margin-top:14px;
  padding:.72rem 1.15rem !important;
  border:1px solid var(--gold, #D4A24A) !important;
  border-radius:2px;
  background:linear-gradient(180deg, rgba(212,162,74,.22), rgba(212,162,74,.10)) !important;
  color:var(--gold-hot, #FFC952) !important;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none !important;
  transition:background .16s ease, border-color .16s ease;
}
.evmodal__go:hover{
  background:linear-gradient(180deg, rgba(255,201,82,.3), rgba(255,201,82,.14)) !important;
  border-color:var(--gold-hot, #FFC952) !important;
}
.evmodal__goarrow{ width:16px; height:16px; transition:transform .16s ease; }
.evmodal__go:hover .evmodal__goarrow{ transform:translateX(3px); }
.evmodal__go:focus-visible{ outline:2px solid var(--gold-hot, #FFC952); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .evmodal__go, .evmodal__goarrow{ transition:none; }
  .evmodal__go:hover .evmodal__goarrow{ transform:none; }
}

/* The card used to be cream, so its type was the navy ink. Turning the surface dark without
   turning the type over left the day and title at #061336 on #08203a: technically present,
   effectively invisible. Contrast is stated here rather than assumed, and checked after. */
.evmodal__card .evmodal__day{
  margin:0 0 6px !important;
  font-size:.68rem !important;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold, #D4A24A) !important;
}
.evmodal__card .evmodal__title{
  margin:0 0 10px !important;
  font-family:var(--serif, "EB Garamond", Georgia, serif);
  font-size:clamp(1.25rem, 2.2vw, 1.6rem) !important;
  line-height:1.18;
  color:var(--cream-text, #F4EAD4) !important;
}
.evmodal__card .evmodal__meta{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem .8rem;
  margin:0 !important;
  color:rgba(244,234,212,.92) !important;
}
.evmodal__card .evmodal__time{ font-size:.92rem !important; color:rgba(244,234,212,.92) !important; }
.evmodal__card .evmodal__fee{
  font-size:.92rem !important;
  font-weight:700;
  color:var(--gold-hot, #FFC952) !important;
}
.evmodal__card .evcal__chip{
  color:var(--evc-accent, var(--gold)) !important;
  border:1px solid color-mix(in srgb, var(--evc-accent, #D4A24A) 45%, transparent) !important;
  background:transparent !important;
  padding:.16rem .5rem;
  border-radius:2px;
  font-size:.6rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.evmodal__card .evmodal__close{
  color:var(--cream-text, #F4EAD4) !important;
  z-index:3;
}


/* ============================================================================================
   DELTA rail-clamp-v46
   The homepage event rail: titles stop moving the artwork, and long descriptions stop stretching
   the card.

   Measured across the six live cards at 1440:
     .ev__title   68px on five cards (2 lines at 22.5px), 113px on "One Piece Weekly - Standard
                  Constructed (Thursdays)" (4 lines). The art sits BELOW the title, so its top
                  went from 107px to 152px on that one card: a 45px step in a row of otherwise
                  identical cards. That is the shifting artwork.
     .ev__meta    22px on five cards (9 to 30 characters), 174px on the same card (241 characters).

   The fix is a RESERVED box, not just a clamp. Clamping alone stops the overflow but a one-line
   title still leaves the art higher than a two-line one, so the row stays ragged. Giving the
   title a min-height of exactly two lines means every card's art starts on the same line whether
   the title runs to one line or four.
   ============================================================================================ */
.luh-events-rail .ev__title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  min-height:calc(2 * 22.5px);      /* two lines, reserved, so the art never moves */
  margin-bottom:.35rem;
}
.luh-events-rail .ev__title a{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* The description is the card's summary, not the event page. Three lines is enough to say what it
   is; the full text lives one click away and is not truncated there. */
.luh-events-rail .ev__box .ev__meta:last-of-type{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

@media (max-width:700px){
  /* Narrower cards wrap sooner, so the reserved title box grows with them rather than clipping a
     word that would have fitted on desktop. */
  .luh-events-rail .ev__title,
  .luh-events-rail .ev__title a{ -webkit-line-clamp:3; }
  .luh-events-rail .ev__title{ min-height:calc(2 * 22.5px); }
}


/* ============================================================================================
   DELTA tiers-v47
   Subscription tiers: a card you can actually see, and a reveal that fires.
   ============================================================================================ */
.tier__more{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin:.6rem 0 0;
  padding:.5rem .85rem;
  border:1px solid rgba(11,27,51,.28);
  border-radius:2px;
  background:transparent;
  color:#0b1b33;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.tier__more:hover{ border-color:rgba(11,27,51,.55); background:rgba(11,27,51,.05); }
.tier__more:focus-visible{ outline:2px solid var(--gold, #D4A24A); outline-offset:2px; }
.tier__morecaret{ width:14px; height:14px; transition:transform .18s ease; }
.tier__more[aria-expanded="true"] .tier__morecaret{ transform:rotate(180deg); }

@media (prefers-reduced-motion:reduce){
  .tier__more, .tier__morecaret{ transition:none; }
}


/* ============================================================================================
   DELTA hover-v49
   Tier hover: one behaviour, and nothing warps.

   Two measured causes.

   1. .tier__ball carried `transition: all`. That animates every animatable property, including
      ones no rule intended to move, so the game ball distorted on mouseover instead of simply
      lifting with its card. `all` is never the right list: it opts in to every future property
      as well.

   2. Hover transitions differed card to card. The reveal animation leaves its own transition on
      an element while it is still revealing, complete with a stagger delay, so hovering a card
      that had just appeared used a 0.55s curve delayed by up to 0.35s, while a settled card used
      0.25s with no delay. Same gesture, visibly different response. The hover transition is now
      stated on the element itself and the reveal's transition is confined to the reveal.
   ============================================================================================ */
.tier__ball{
  transition:transform .22s cubic-bezier(.4,.2,.2,1), filter .22s ease !important;
  will-change:transform;
}
.tier:hover .tier__ball{
  transform:translateY(-2px) scale(1.04);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

/* One hover behaviour for every card, whatever the reveal is doing. Stated after the reveal rule
   and on the element itself, so a card that has just faded in responds exactly like one that has
   been sitting there. */
.tier{
  transition:transform .22s cubic-bezier(.4,.2,.2,1),
             box-shadow .22s cubic-bezier(.4,.2,.2,1),
             border-color .22s ease !important;
}
/* while a card is still revealing, the reveal owns the transition; it hands back on completion */
.tier.rv{
  transition:opacity .55s cubic-bezier(.4,.2,.2,1) var(--rvd, 0s),
             transform .55s cubic-bezier(.4,.2,.2,1) var(--rvd, 0s) !important;
}

@media (prefers-reduced-motion:reduce){
  .tier, .tier__ball, .tier:hover .tier__ball{ transition:none !important; transform:none !important; }
}

/* ============================================================================================
   DELTA past-gallery-v51
   The past-event gallery page, and the cap that keeps /events from turning into an archive.

   Two rules about colour before anything else:

   1. Per-game accents already run through ONE custom property, --evc-accent, keyed by data-gk.
      That map was scoped to .evcal, so on a page with no calendar it did nothing. The map is
      restated here for :is(.evcal, .luh-pastgal) so both surfaces read the same source. The
      values are byte-identical to the ones above; this widens the selector, it does not
      recolour anything.
   2. The CMS colour override (the inline <style id="evcal-game-colors"> the calendar emits)
      is matched by the same widened selector in the render half, so a colour Joe sets on the
      calendar section reaches this page too instead of being silently ignored here.
   ============================================================================================ */
:is(.evcal, .luh-pastgal) [data-gk="mtg"]        { --evc-accent:#B8860B; }
:is(.evcal, .luh-pastgal) [data-gk="pokemon"]    { --evc-accent:#C62828; }
:is(.evcal, .luh-pastgal) [data-gk="onepiece"]   { --evc-accent:#D1495B; }
:is(.evcal, .luh-pastgal) [data-gk="one-piece"]  { --evc-accent:#D1495B; }
:is(.evcal, .luh-pastgal) [data-gk="digimon"]    { --evc-accent:#2F5D8F; }
:is(.evcal, .luh-pastgal) [data-gk="riftbound"]  { --evc-accent:#6A4C93; }
:is(.evcal, .luh-pastgal) [data-gk="palworld"]   { --evc-accent:#1F8A70; }
/* lorcana-pink-v2: this later block is the one that actually wins the cascade, and it covers the
   past gallery too. Both copies are set so the value cannot drift if either block is edited. */
:is(.evcal, .luh-pastgal) [data-gk="lorcana"]    { --evc-accent:#FF7BAC; }
:is(.evcal, .luh-pastgal) [data-gk="fab"]        { --evc-accent:#8A4B2A; }
:is(.evcal, .luh-pastgal) [data-gk="yugioh"]     { --evc-accent:#8A5A00; }
:is(.evcal, .luh-pastgal) [data-gk="dragonball"], :is(.evcal, .luh-pastgal) [data-gk="dragonball-super"] { --evc-accent:#C2610A; }
:is(.evcal, .luh-pastgal) [data-gk="unionarena"], :is(.evcal, .luh-pastgal) [data-gk="union-arena"]      { --evc-accent:#8E3B96; }
:is(.evcal, .luh-pastgal) [data-gk="starwars"],   :is(.evcal, .luh-pastgal) [data-gk="star-wars-unlimited"] { --evc-accent:#3A6EA5; }
:is(.evcal, .luh-pastgal) [data-gk="dnd"], :is(.evcal, .luh-pastgal) [data-gk="dungeons-dragons"], :is(.evcal, .luh-pastgal) [data-gk="d-d"] { --evc-accent:#A33A2E; }
:is(.evcal, .luh-pastgal) [data-gk="prerelease-sealed"] { --evc-accent:#7A6A2E; }

.luh-pastgal{ --pg-line:#E4DAC4; --pg-muted:#6B6152; --evc-accent:var(--gold); }

.luh-pastgal .sec-lede{
  max-width:62ch; margin:14px auto 0; text-align:center;
  color:var(--body-ink); font-size:clamp(15px,1.05vw,17px); line-height:1.65;
}
.luh-pastgal__empty{
  margin:26px auto 0; max-width:52ch; text-align:center; color:var(--pg-muted);
}

/* ---- the rail: jump to one event, or filter to it ------------------------------------------ */
.pastgal__rail{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin:26px auto 0; max-width:1100px;
}
.pastgal__chip{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px;                       /* WCAG 2.5.8 target size, same floor as the filter rail */
  padding:8px 14px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--evc-accent) 42%, transparent);
  background:#FFFDF9; color:var(--head-ink);
  font-family:var(--ff-body); font-size:13px; font-weight:700; letter-spacing:.04em;
  text-decoration:none; transition:background .18s var(--ease), border-color .18s var(--ease);
}
.pastgal__chip:hover,
.pastgal__chip:focus-visible{
  background:color-mix(in srgb, var(--evc-accent) 12%, #FFFDF9);
  border-color:var(--evc-accent);
}
.pastgal__chip.is-active{
  background:color-mix(in srgb, var(--evc-accent) 18%, #FFFDF9);
  border-color:var(--evc-accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--evc-accent) 45%, transparent);
}
.pastgal__chiplabel{ white-space:nowrap; }
.pastgal__chipcount{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  background:color-mix(in srgb, var(--evc-accent) 22%, transparent);
  color:var(--head-ink); font-size:11px; font-weight:800; font-variant-numeric:tabular-nums;
}

/* ---- one panel per event ------------------------------------------------------------------- */
.pastgal__panels{ display:grid; gap:22px; margin:30px auto 0; max-width:1100px; }

.pastgal__series{
  background:#FFFDF9;
  border:1px solid var(--pg-line);
  border-left:3px solid var(--evc-accent);
  border-radius:5px;
  padding:clamp(16px, 2vw, 24px);
}
.pastgal__series[hidden]{ display:none; }

/* A grid, not a wrapping flex row. With flex-wrap the tally dropped onto its own line under a
   long description and read as a stray sentence in the body copy instead of a count in the
   corner. Two columns keeps it in the corner at every width the panel is wide enough for. */
.pastgal__head{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:start;
  gap:12px 20px; padding-bottom:14px; border-bottom:1px solid var(--pg-line);
}
.pastgal__headtext{ min-width:0; }

/* The game chip was built for the dark event rows: cream text, which on this cream card
   measured rgb(243,236,224) on rgb(255,253,249) and was effectively invisible.

   The accent alone does not fix it. Measured against this card's #FFFDF9, four of the game
   accents fall under the 4.5:1 that 11px bold uppercase needs (mtg 3.20, onepiece 4.29,
   palworld 4.19, dragonball 4.13) and the gold default is 2.28. Mixing 62 percent accent with
   the navy ink keeps every game's hue and puts the worst case at 4.70, with the named games at
   6.17 and above. The label stays identifiably that game's colour and is legible on cream. */
.luh-pastgal .ev-chip{
  margin-top:0;
  color:color-mix(in srgb, var(--evc-accent) 62%, #0B1B33);
}
.luh-pastgal .ev-chip::before{
  background:color-mix(in srgb, var(--evc-accent) 62%, #0B1B33);
}
.pastgal__title{ margin:6px 0 0; font-size:clamp(19px, 1.6vw, 24px); line-height:1.2; }
.pastgal__title a{ color:inherit; text-decoration:none; }
.pastgal__title a:hover,
.pastgal__title a:focus-visible{
  text-decoration:underline; text-decoration-color:var(--evc-accent); text-underline-offset:3px;
}
.pastgal__format{ margin:5px 0 0; color:var(--pg-muted); font-size:14px; }
.pastgal__tally{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px; margin:0;
  color:var(--pg-muted); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; text-align:right;
}

/* ---- the dates under each panel ------------------------------------------------------------ */
.pastgal__dates{ list-style:none; margin:0; padding:0; display:grid; gap:18px; padding-top:16px; }
.pastgal__date{ min-width:0; }
.pastgal__datelabel{
  margin:0 0 8px; font-size:13px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--head-ink);
}
.pastgal__datelabel a{ color:inherit; text-decoration:none; }
.pastgal__datelabel a:hover,
.pastgal__datelabel a:focus-visible{
  text-decoration:underline; text-decoration-color:var(--evc-accent); text-underline-offset:3px;
}
/* A date with no photos yet is a record line, not a hole: it keeps its own rule and steps back. */
.pastgal__date--bare .pastgal__datelabel{ color:var(--pg-muted); font-weight:700; }

.pastgal__shots{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.pastgal__shot figure{ margin:0; }
.pastgal__shot a{ display:block; border-radius:4px; overflow:hidden; background:#F3EEE2; }
.pastgal__shot img{
  display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover;
  transition:transform .3s var(--ease);
}
.pastgal__shot a:hover img,
.pastgal__shot a:focus-visible img{ transform:scale(1.03); }
.pastgal__shot figcaption{
  margin-top:6px; color:var(--pg-muted); font-size:12.5px; line-height:1.45;
}
.pastgal__more{ margin:8px 0 0; font-size:13px; }
.pastgal__more a{ color:var(--head-ink); text-decoration-color:var(--evc-accent); }

.pastgal__through{ margin:18px 0 0; }
.pastgal__foot{
  margin:22px auto 0; max-width:52ch; text-align:center;
  color:var(--pg-muted); font-size:13.5px;
}
.pastgal__foot[hidden]{ display:none; }

@media (max-width:640px){
  .pastgal__head{ grid-template-columns:1fr; }
  .pastgal__tally{ align-items:flex-start; text-align:left; flex-direction:row; gap:12px; }
  .pastgal__shots{ grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); }
  .pastgal__chiplabel{
    /* Long series names would otherwise force the rail to scroll sideways on a phone. */
    max-width:52vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

@media (prefers-reduced-motion:reduce){
  .pastgal__shot img{ transition:none; }
  .pastgal__shot a:hover img,
  .pastgal__shot a:focus-visible img{ transform:none; }
}

/* ---- a WCAG 2.5.8 shortfall this delta measured, fixed where it lives -----------------------
   .btn--sm renders 39.2px tall (9px padding + 19.2px line box + border) everywhere it is used:
   the event rows, the ticket buttons, the shop rows, and now the gallery's through-links. The
   minimum target under WCAG 2.5.8 (AA) is 44px. This is a min-height only, so nothing changes
   width, nothing reflows, and the label stays centred: the button gains 4.8px of vertical hit
   area. Fixed on the class rather than on this page's copy of it, because the same 5px was
   missing on every other page that uses it. */
.btn--sm{ min-height:44px; }

/* ---- /events: the cap's through-link -------------------------------------------------------
   The Past Events grid now stops at a fixed number of series and hands the rest to the gallery.
   This is the line that does the handing over, so the cap never reads as content going missing. */
.luh-events-archive-link{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px;
  margin:26px auto 0; text-align:center;
}
.luh-events-archive-link p{
  margin:0; color:var(--cream); opacity:.86; font-size:14.5px;
}
.luh-events-list.ground-cream .luh-events-archive-link p{ color:var(--body-ink); opacity:1; }

/* ============================================================================================
   DELTA seo-pass-v53
   The event flyer reserves its space before it loads.

   Measured: three event pages shipped the flyer with no width or height, so the browser gave it
   zero height until the bytes arrived and then reflowed everything below it. The width/height
   attributes now on the tag give the browser a RATIO to hold; these rules make sure that ratio
   is a reserved box rather than a forced shape, so a flyer of any proportion is shown whole
   inside it instead of being stretched to 4:3.
   ============================================================================================ */

/* DELTA flyer-revert-v54: the .luh-event-detail__flyer rules from seo-pass-v53 are withdrawn.
   They forced a 4:3 box with overflow:hidden onto a 3:4 portrait flyer and cropped its
   announcement text. The markup no longer emits the class; these two rules stay only to make the
   withdrawal explicit to anyone reading the stylesheet, and are deliberately inert. */
.luh-event-detail__flyer{ aspect-ratio:auto; overflow:visible; }
.luh-event-detail__flyer img{ height:auto; object-fit:fill; }

/* ============================================================================================
   DELTA frame-decor-v56
   The calendar's outer decoration was being clipped on mobile.

   .evcal__frame::before (glow) and ::after (the gold dot ring) are positioned with a NEGATIVE
   inset, so they deliberately paint OUTSIDE the frame's box. That is what gives the layered
   border its depth. It only works if the frame has at least that much room beside it.

   Measured against the rules actually in force:

     band        frame side margin        decoration horizontal inset      result
     default     28px  (100% - 56px)      36px                             8px clipped
     <=900px     12px  (100% - 24px)      36px  (no override in this band) 24px clipped
     <=560px      8px  (100% - 16px)      19px                             11px clipped

   So the gold ring ran off both edges on every phone and tablet width. On the reported device the
   left edge shows as a cut vertical line and the right side runs off screen.

   WHY NO CHECK CAUGHT IT: getBoundingClientRect() does not measure pseudo-elements, so every
   per-element overflow probe was blind to it, and body{overflow-x:hidden} meant
   scrollWidth - clientWidth stayed 0. The page reported "no horizontal scroll" while decoration
   was being cut off. test-frame-decor.py reads the computed inset instead and is the check that
   can see this.

   The fix brings the decoration in to fit the margin that exists, rather than widening the margin,
   because the calendar was widened on purpose and should not give that back. The ring is a
   decoration: at phone size a few px of spread reads the same and now reads WHOLE.
   ============================================================================================ */

/* 561px to 900px: 12px of margin, so the decoration gets 8px and keeps a 4px safety gap. */
@media (max-width:900px){
  .evcal__frame::before{ inset:-14px -8px -8px !important; }
  .evcal__frame::after { inset:-13px -8px -6px !important; }
}

/* <=560px: only 8px of margin, so 5px out with a 3px safety gap. */
@media (max-width:560px){
  .evcal__frame::before{ inset:-12px -5px -7px !important; }
  .evcal__frame::after { inset:-11px -5px -5px !important; }
}

/* ==============================================================================================
   MARKER DELTA featured-and-gradients-v60

   Appended, because this stylesheet resolves by source order and the per-game accent map is
   redefined twice further up. Anything that has to win goes last.

   WHAT LANDS HERE

   1. --evc-accent-image, a per-game GRADIENT. A gradient is an image, not a colour, so it cannot
      travel through --evc-accent, which the rules above feed into `color`, `border-color` and
      `box-shadow`, none of which accept one. It gets its own property, it is applied only to
      shapes whose background can take an image, and the solid accent is left exactly as it was
      so text and chips keep their measured contrast. A game with no gradient is untouched by
      every rule in this block, because var(--evc-accent-image, none) resolves to none.

   2. The featured treatment, driven off the `featured` tick box that already existed in the
      events workspace and that neither of these two sections had ever rendered.

   TWO CONSTRAINTS THAT DECIDED THE IMPLEMENTATION, both checked in this file rather than assumed:

   a. The ring is an OUTLINE with a negative outline-offset, so it is drawn inside the border box.
      An outer glow was not available: .evcal__cell, .evcal__mini and .evcal__grid are all
      overflow:hidden, and the rail track is overflow-x:auto with .1rem of inline padding, so a
      box-shadow glow is sliced off in both places. Staying inside also keeps it clear of the
      frame decoration that had to be pulled in at phone widths after it clipped at the viewport.

   b. It is an outline rather than a pseudo-element because the pseudo-elements are taken:
      .evcal__item::after is the foil sheen, .evcal__item::before is the accent bar, and
      .ev::before is the card plate. An outline needs neither, and it does not affect layout.

   Colour is never the only signal. Every featured row also carries a visible "Featured" label
   and a visually hidden one, so the state survives greyscale, low vision and reduced motion.
   ============================================================================================ */

/* --- 1. gradients ---------------------------------------------------------------------------
   Each host below draws its accent as a border or an inset box-shadow, neither of which can hold
   an image, so the gradient goes on a thin overlay bar in the same place. With no gradient set,
   background-image is none and the bar is invisible, leaving the existing accent untouched. */

.evcal__minirow{ position:relative; }
.evcal__minirow::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  border-radius:2px 0 0 2px;
  background-image:var(--evc-accent-image, none);
  background-size:100% 100%;
  pointer-events:none;
}

/* The agenda row already has a real 4px accent bar on ::before, so the image just layers onto it. */
.evcal__item::before{
  background-image:var(--evc-accent-image, none);
  background-size:100% 100%;
}
/* prerelease-textbar-v1: Tyler likes the gradient LEFT BAR (vertical stripe) in the text sections.
   Give a prerelease row the game-coloured FOIL on that bar (the built-in --evc-accent-image hook),
   widened with a glow so it is noticeable. Grid cells keep the full foil border; text rows get the
   stripe. */
.evcal__item[data-prerelease="1"], .evcal__nextrow[data-prerelease="1"],
.evcal__item[data-gk="prerelease-sealed"], .evcal__nextrow[data-gk="prerelease-sealed"] {
  --evc-accent-image: linear-gradient(180deg, var(--evc-accent, #68CBFB), color-mix(in srgb, var(--evc-accent, #68CBFB) 28%, #ffffff) 50%, var(--evc-accent, #68CBFB));
}
.evcal__item[data-prerelease="1"]::before, .evcal__nextrow[data-prerelease="1"]::before,
.evcal__item[data-gk="prerelease-sealed"]::before, .evcal__nextrow[data-gk="prerelease-sealed"]::before {
  width:5px !important;
  box-shadow:0 0 8px 0 color-mix(in srgb, var(--evc-accent, #68CBFB) 60%, transparent);
}
/* prerelease-textbar-v1: the short "Prerelease" badge, game-coloured like the Featured tag. */
.evcal__pretag{
  display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; line-height:1; padding:.32em .55em; border-radius:2px;
  margin-right:.45rem; color:#0b1b33;
  background:linear-gradient(120deg, var(--evc-accent, #68CBFB),
     color-mix(in srgb, var(--evc-accent, #68CBFB) 35%, #ffffff) 55%, var(--evc-accent, #68CBFB));
}

.evcal__nextrow{ position:relative; }
.evcal__nextrow::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background-image:var(--evc-accent-image, none);
  background-size:100% 100%;
  pointer-events:none;
}

/* The filter chip carries the spectrum as a hairline under its label, which reads as foil without
   putting a rainbow behind 11px uppercase text. Invisible when no gradient is set. */
.evcal__gf{ position:relative; }
.evcal__gf::after{
  content:"";
  position:absolute;
  left:.7rem; right:.7rem; bottom:.4rem;
  height:2px;
  border-radius:2px;
  background-image:var(--evc-accent-image, none);
  background-size:100% 100%;
  pointer-events:none;
}

/* --- 2. featured ------------------------------------------------------------------------------
   One ring, four hosts, drawn inside the box. */
.evcal__minirow.is-featured,
.evcal__item.is-featured,
.evcal__nextrow.is-featured,
.ev.is-featured{
  outline:2px solid var(--evc-accent, var(--gold, #d4a24a));
  outline-offset:-2px;
  animation:luh-featured-pulse 2.8s ease-in-out infinite;
}

/* The mini row is about 20px tall inside a 104px cell, so it takes a hairline, not a 2px ring. */
.evcal__minirow.is-featured{
  /* v70: the month-grid chip is ~20px tall, already carries its own border, and sits on a busy
     cell. A 1px inset ring that pulses down to 45% transparency is invisible at that size, which
     is what shipped and what Joe reported: the rainbow was visible, the highlight was not. Hold
     the ring at full strength here and add a tint the chip itself can carry. The pulse stays on
     the larger surfaces (agenda item, next-up row, rail card) where it actually reads. */
  outline-width:1px;
  outline-offset:-1px;
  animation:none;
  outline-color:var(--evc-accent, var(--gold, #d4a24a));
  background:color-mix(in srgb, var(--evc-accent, var(--gold, #d4a24a)) 22%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .evcal__minirow.is-featured{ background:rgba(212,162,74,.22); }
}

/* The rail card is the one big surface, and it reads --ev-accent, which the per-event colour
   override writes as an inline custom property. */
.ev.is-featured{
  --evc-accent:var(--ev-accent, var(--gold, #d4a24a));
  outline-offset:-3px;
}

@keyframes luh-featured-pulse{
  0%,100%{ outline-color:color-mix(in srgb, var(--evc-accent, var(--gold, #d4a24a)) 45%, transparent); }
  50%    { outline-color:var(--evc-accent, var(--gold, #d4a24a)); }
}

/* --- 3. the label -----------------------------------------------------------------------------
   Small, uppercase, carrying the accent so it ties back to the ring. */
.ev__featured,
.evcal__featuredtag{
  display:inline-block;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
  padding:.32em .55em;
  border-radius:2px;
  color:#0b1b33;
  background:var(--evc-accent, var(--gold, #d4a24a));
}
/* Laid over the artwork, so it adds no height. These cards are grid siblings in a horizontal
   carousel and an extra element in the flow drops the featured card's title, art and footer out
   of line with every card beside it. .ev__art is overflow:hidden, so the badge is clipped to the
   art box and cannot escape the card. */
.ev__art{ position:relative; }
.ev__featured{
  position:absolute;
  top:.45rem;
  left:.45rem;
  z-index:2;
  background:var(--ev-accent, var(--gold, #d4a24a));
  box-shadow:0 1px 6px rgba(3,8,28,.45);
}
.evcal__featuredtag{ margin-right:.45rem; }

/* --- 4. reduced motion ------------------------------------------------------------------------
   The ring stays, held at the animation's bright end. Nothing moves. */
@media (prefers-reduced-motion:reduce){
  .evcal__minirow.is-featured,
  .evcal__item.is-featured,
  .evcal__nextrow.is-featured,
  .ev.is-featured{
    animation:none;
    outline-color:var(--evc-accent, var(--gold, #d4a24a));
  }
}

/* Anchor target for the three same-page "upcoming events" links in luh-events-calendar.
   The header is position:sticky top:0, so a bare fragment jump parks the heading underneath
   it. 88px matches the value already used by .dm-options and .dm-request rather than a new
   invented number. */
#upcoming{ scroll-margin-top:88px; }

/* Mega-menu columns (2026-08-06 header declutter): catalog groups render as side-by-side
   columns in a wide panel on desktop; display:contents keeps the mobile stacked list
   exactly as it was. Shop All renders as a full-width footer row of the panel. */
.nav__menu-group{display:contents}
.nav__menu-group+.nav__menu-group .nav__menu-heading{border-top:1px solid rgba(255,201,60,.2);margin-top:.35rem;padding-top:.8rem}
.nav__menu a.nav__menu-all{color:var(--gold);font-weight:700}
.nav__menu a.nav__menu-all:hover{color:var(--gold-bright)}
@media (min-width:1181px){
  .nav__menu--catalog{display:flex;flex-wrap:wrap;gap:0 2.2rem;max-height:none;overflow:visible;min-width:max-content;padding:1.05rem 1.3rem 1.1rem}
  .nav__menu--catalog .nav__menu-group{display:block;min-width:13.5rem}
  .nav__menu--catalog .nav__menu-group+.nav__menu-group{border-left:1px solid rgba(255,201,60,.18);padding-left:2.2rem}
  .nav__menu--catalog .nav__menu-group+.nav__menu-group .nav__menu-heading{border-top:0;margin-top:0;padding-top:.35rem}
  .nav__menu--catalog .nav__menu-group .nav__menu-heading{padding:.35rem 1rem .5rem}
  .nav__menu--catalog .nav__menu-group a{display:block}
  .nav__menu--catalog a.nav__menu-all{flex-basis:100%;margin-top:.7rem;padding-top:.9rem;border-top:1px solid rgba(255,201,60,.2);text-align:center}
}

/* Mega-menu width fix: abspos shrink-to-fit + flex-wrap collapsed the panel to one
   column; pin a two-column panel width instead. (2026-08-06) */
@media (min-width:1181px){
  .nav__menu--catalog{width:35.5rem;min-width:0}
  .nav__menu--catalog .nav__menu-group{flex:1 1 13.5rem;min-width:13.5rem}
}

/* Mega-menu direction fix: base .nav__menu is a column flex for simple dropdowns;
   the catalog panel must flow row-wise. (2026-08-06) */
@media (min-width:1181px){
  .nav__menu--catalog{flex-direction:row;align-items:flex-start}
}
/* ============================================================
   EXPANDABLE MERCHANDISING ROWS  (expandable-merch-rows-v1)

   Scoped to min-width:1181px. Below that the existing media queries
   already wrap the hex row and drop plaques to 1-up and already tolerate
   any count, so they are deliberately untouched.

   The fixed-count assumptions live only in the desktop range:
     .hexrow    flex-wrap:nowrap  -> a 7th game compresses every tile
                250px -> 175px, clips the hex points and runs the gold
                sub-line into the angled edge.
     .plaquerow grid repeat(3,1fr) -> a 4th/5th plaque leaves a hole in
                the last column instead of centring.

   BALANCED, NOT JUST WRAPPED. Plain flex-wrap drops a 7th game onto its
   own row as a lone orphan. Each quantity band sets the row width AND the
   tile basis together, so exactly N tiles land per row at any viewport:
   tile basis = (row - (N-1) * gap) / N means N tiles plus their gaps fill
   the row exactly, and the row cap keeps the tile at or under its natural
   max size. Setting only one of the two lets an extra tile squeeze on.

     hexes    1-6 -> one row    7-8 -> 4/row   9-10 -> 5/row
              11-12 -> 6/row    13+ -> 7/row
     plaques  1-3 -> one row    4 -> 2/row     5-6 -> 3/row   7+ -> 4/row

   Last row is never short by more than one tile, every tile in a section
   is the same width, and each row stays centred on the page axis.
   ============================================================ */
@media (min-width:1181px){

  /* ---- Pick your starter (hexes) ---- */
  .hexrow{ --hex-gap:22px; --hex-max:250px; gap:var(--hex-gap);
           flex-wrap:wrap; row-gap:30px; }
  .hex{ container-type:inline-size; min-width:0; max-width:var(--hex-max); }
  .hexrow .hex{ flex:1 1 0; }                    /* 1-6: unchanged */

  .hexrow:has(.hex:nth-child(7)){  max-width:calc(4 * var(--hex-max) + 3 * var(--hex-gap)); }
  .hexrow:has(.hex:nth-child(7))  .hex{ flex:0 1 calc((100% - 3 * var(--hex-gap)) / 4); }

  .hexrow:has(.hex:nth-child(9)){  max-width:calc(5 * var(--hex-max) + 4 * var(--hex-gap)); }
  .hexrow:has(.hex:nth-child(9))  .hex{ flex:0 1 calc((100% - 4 * var(--hex-gap)) / 5); }

  .hexrow:has(.hex:nth-child(11)){ max-width:1560px; }
  .hexrow:has(.hex:nth-child(11)) .hex{ flex:0 1 calc((100% - 5 * var(--hex-gap)) / 6); }

  .hexrow:has(.hex:nth-child(13)){ max-width:1560px; }
  .hexrow:has(.hex:nth-child(13)) .hex{ flex:0 1 calc((100% - 6 * var(--hex-gap)) / 7); }

  /* the caption was sized off the VIEWPORT, so it could not know the tile
     had narrowed. Sizing it off the TILE keeps the name clear of the
     angled edges at any count. 21% reproduces today's 52px at 250px. */
  .hex__cap{ padding:21% 13% 15%; }
  .hex__name{ font-size:clamp(12px, 9.2cqw, 17px); }
  .hex__sub{ font-size:clamp(7.5px, 5cqw, 9.5px); }

  /* ---- Cards down. Dice out. (plaques) ---- */
  .plaquerow{ --plaq-gap:24px; --plaq-max:377px; display:flex; flex-wrap:wrap;
              justify-content:center; gap:var(--plaq-gap); row-gap:30px; }
  /* 377px is the exact width the 3-up grid produces today, so three
     plaques are pixel-unchanged. */
  .plaque{ container-type:inline-size; min-width:0; max-width:var(--plaq-max);
           flex:0 1 calc((100% - 2 * var(--plaq-gap)) / 3); }

  /* exactly 4 balances 2+2 rather than leaving a lone plaque */
  .plaquerow:has(.plaque:nth-child(4)):not(:has(.plaque:nth-child(5))){
           max-width:calc(2 * var(--plaq-max) + 1 * var(--plaq-gap)); }
  .plaquerow:has(.plaque:nth-child(4)):not(:has(.plaque:nth-child(5))) .plaque{
           flex:0 1 calc((100% - 1 * var(--plaq-gap)) / 2); }

  .plaquerow:has(.plaque:nth-child(7)) .plaque{
           flex:0 1 calc((100% - 3 * var(--plaq-gap)) / 4); }
  .plaque__name{ font-size:clamp(12px, 5.2cqw, 17px); }
}
/* ============================================================
   NEW TILE WIRING  (expandable-merch-tiles-v1)
   Companion to expandable-merch-rows-v1. Adds the three new tones:
   palworld (hex row), warhammer and nerdgear (plaque row).

   Per-tone logo sizing for the three new marks. styles.css already
   uses this pattern (see [data-tone="riftbound"] .hex__logo).

   WHY IT IS NEEDED. Every existing plaque mark is WIDE (mark_dnd is
   640 x 189, ratio 3.4:1) so the default .plaque__logo padding of
   0 25% lands it at 26% of tile height. Both new plaque marks are
   near-square (mark_warhammer 861 x 841, mark_nerdgear 1106 x 900),
   so at the same padding they render 87% and 72% of tile height and
   collide with the caption.

   Numbers measured in the real tile geometry at 1440, against the
   live D&D plaque as the control (26% of tile height):

     warhammer  0 25% -> 184px, 87%, OVERLAPS caption
                0 40% ->  74px, 35%, OVERLAPS
                0 43% ->  52px, 24%, clear      <- chosen
     nerdgear   0 25% -> 153px, 72%, OVERLAPS
                0 40% ->  61px, 29%, clear
                0 41% ->  55px, 26%, clear      <- chosen, matches control exactly

   Palworld needs NO override. Its mark is 1410 x 499 (2.8:1), close
   enough to the existing hex marks that the default 0 9% renders it
   60px tall in a 357px tile with the caption starting 79px below the
   logo. Verified by render, not assumed.
   ============================================================ */

[data-tone="warhammer"] .plaque__logo{ padding:0 33%; }
[data-tone="nerdgear"]  .plaque__logo{ padding:0 29%; }

/* FALLBACK GROUND ONLY. The real plates (hexbg_palworld.jpg,
   hexbg_warhammer.jpg, hexbg_nerdgear.jpg) are uploaded and serving 200.
   .hex__img and .plaque__img are containers with the plate <img> inside
   them, so these backgrounds sit BEHIND the plate and are visible only if
   it fails to load. Without them .plaque__img falls back to a flat
   var(--navy-900) and a broken plate reads as an empty tile.
   Hues are the measured v2 slots, not guesses: palworld 60deg,
   warhammer 100deg, nerdgear 280deg. Minimum separation from any
   existing tone in the same row is 30deg. */
/* Stops are SAMPLED from the plates themselves (bloom band, mid, foot),
   not picked by eye, so a fallback and its plate cannot drift apart. */
[data-tone="palworld"] .hex__img{
  background:radial-gradient(66% 43% at 50% 35%,rgba(131,148,49,.55),transparent 62%),
             linear-gradient(180deg,#2f2f1b,#282817 55%,#040508); }
[data-tone="warhammer"] .plaque__img{
  background:radial-gradient(66% 43% at 50% 35%,rgba(56,148,56,.55),transparent 62%),
             linear-gradient(180deg,#303b2a,#293224 55%,#1c2016); }
[data-tone="nerdgear"] .plaque__img{
  background:radial-gradient(66% 43% at 50% 35%,rgba(109,34,148,.55),transparent 62%),
             linear-gradient(180deg,#22152a,#1d1224 55%,#020205); }
/* ============================================================
   EXPANDABLE MERCH ROWS, TABLET/NARROW BAND  (expandable-merch-rows-v2)
   Companion to expandable-merch-rows-v1, which scoped itself to
   min-width:1181px on the reasoning that the existing narrow-band media
   queries "already wrap and already tolerate any count". They do wrap.
   They do NOT balance, and that only became visible once a 7th game
   actually existed on the page.

   Live behaviour with 7 games before this block:

     621-1180px   .hex{flex:0 0 30%} + base max-width:250px  -> 3 + 3 + 1
     <=620px      .hex{flex:0 0 46%}                         -> 2 + 2 + 2 + 1

   The 3-up case is the bad one: a lone Palworld hex centred in a 717px
   row with roughly a full tile of dead space either side. Read on the
   live page at 1100 and 768, not inferred.

   WHY 4-UP. With greedy flex wrapping the only lever is tiles-per-row,
   so a count N strands a single tile whenever N mod cols == 1. At 3-up
   that is N = 7, 10, 13. Cost is tile width, measured on the live page:

     viewport   3-up tile   4-up tile
       1180        250         250      (row already wider than 4x250)
       1100        250         238
        900        250         193
        768        215         163      same size the phone band ships
        660        182         138

   163px is a width this design already uses at 390px, so the trade is
   real but bounded. Below 621px the 2-up band keeps its 2+2+2+1: a
   full-size trailing tile on a narrow column reads as an ordinary grid
   tail, not as a stranded orphan, which is the thing being avoided.

   ROW WIDTH AND BASIS MUST BE SET TOGETHER, same as v1. Basis alone does
   not work here because base .hex carries max-width:250px, which wins
   over a larger percentage basis and quietly lets an extra tile onto the
   row. That is how 9 items rendered 4+4+1 at 1180 even with a 3-up basis.
   Column-gap in this band is 3% of the ROW, so the row width that fits
   exactly N capped tiles is  250N / (1 - 0.03(N-1)) :

     3-up -> 798px      4-up -> 1099px      5-up -> 1420px

   COVERAGE CEILING, stated rather than hidden: counts 7 through 13 are
   balanced here. 16 would strand again at 3-up and is not covered.
   Seven games is the real count; the rest is headroom.
   ============================================================ */
@media (min-width:621px) and (max-width:1180px){

  /* 7, 8 -> 4-up (4+3, 4+4) */
  .hexrow:has(.hex:nth-child(7)):not(:has(.hex:nth-child(9))){ max-width:1099px; }
  .hexrow:has(.hex:nth-child(7)):not(:has(.hex:nth-child(9))) .hex{
    flex:0 0 calc((100% - 3 * 3%) / 4); }

  /* 9 -> 3-up (3+3+3). Without the row cap the 250px tile cap yields 4+4+1. */
  .hexrow:has(.hex:nth-child(9)):not(:has(.hex:nth-child(10))){ max-width:798px; }
  .hexrow:has(.hex:nth-child(9)):not(:has(.hex:nth-child(10))) .hex{
    flex:0 0 calc((100% - 2 * 3%) / 3); }

  /* 10, 11, 12 -> 4-up (4+4+2, 4+4+3, 4+4+4) */
  .hexrow:has(.hex:nth-child(10)):not(:has(.hex:nth-child(13))){ max-width:1099px; }
  .hexrow:has(.hex:nth-child(10)):not(:has(.hex:nth-child(13))) .hex{
    flex:0 0 calc((100% - 3 * 3%) / 4); }

  /* 13, 14, 15 -> 5-up (5+5+3, 5+5+4, 5+5+5) */
  .hexrow:has(.hex:nth-child(13)){ max-width:1420px; }
  .hexrow:has(.hex:nth-child(13)) .hex{
    flex:0 0 calc((100% - 4 * 3%) / 5); }
}
/* ============================================================
   SINGLE-LINE MERCH ROWS  (single-line-rows-v1)
   Requested 2026-08-10: all games on one line, all tabletop plaques on
   one row, both alphabetical. Supersedes the desktop quantity bands in
   expandable-merch-rows-v1 (which balanced 7 into 4+3 and 5 into 3+2).
   Those bands still govern 621-1180px, where one line does not fit, and
   the phone bands are untouched.

   Ordering is DATA, not CSS: items are sorted alphabetically in
   content.json, so Studio, the page, and the nav's brand curation (which
   reads these items) all agree.

   WHAT ONE LINE COSTS, measured live:
     hexes    1920 -> 198px/tile   1440 -> 175px   (was 250px at 4+3)
     plaques  1920 -> 285px/tile   1440 -> 253px   (was 377px at 3+2)

   PER-TONE PADDING WAS THE WRONG MECHANISM AND IS NOT USED HERE.
   The first attempt re-tuned [data-tone] .plaque__logo padding, on the
   reasoning that the plaque is a fixed 16:9 so mark-height / tile-height
   would be viewport independent. It is not: .plaque__name is a clamp(),
   so as the tile narrows the caption keeps its pixel height and eats a
   growing SHARE of the tile. Measured requirement for the same tone:

       warhammer   1920 -> 37.5%     1440 -> 39.1%     1181 -> 43.4%
       dnd         1920 -> 11%       1440 -> 13.7%     1181 -> 51.4%

   At 1181 the figure goes past 50%, i.e. the solution is negative: with
   the logo centred at top:40% there is no room for a mark at all above
   the caption. Any single fixed padding is therefore either colliding at
   the narrow end or wasting the tile at the wide end.

   WHAT IS USED INSTEAD: give the logo an explicit BAND that ends above
   the caption and let the image fit inside it. `bottom:54%` reserves the
   top 46% of the tile, `align-items:center` centres in that band, and
   `max-height:100%` with `width:auto` lets each mark bind on whichever
   axis runs out first: wide marks (dnd 3.4:1) bind on width, near-square
   marks (warhammer 1.02:1) bind on height. It is self-adjusting at every
   viewport with no per-tone values, so a future mark of any aspect is
   handled without a new rule.

   The existing per-tone paddings stay for below 1280px, where the plaque
   is 3+2 or 1-up and they are already correct.

   FLOOR IS 1280px, NOT 1181px. At 1181 the seven hexes come out 138px
   wide and "FLESH AND BLOOD" wraps again, and the plaque marks drop to a
   4px clearance. Measured at 1280 the row is comfortable (153px hexes,
   221px plaques, 22-24px clearance), so single-line starts there and
   1181-1279 keeps the balanced 4+3 / 3+2 from expandable-merch-rows-v1,
   which is clean at that width rather than merely legal.
   ============================================================ */
@media (min-width:1280px){

  /* ---- Pick your starter: one line at any count ---- */
  .hexrow{ flex-wrap:nowrap; max-width:1560px; }
  .hexrow:has(.hex:nth-child(7)),
  .hexrow:has(.hex:nth-child(9)),
  .hexrow:has(.hex:nth-child(11)),
  .hexrow:has(.hex:nth-child(13)){ max-width:1560px; }
  .hexrow:has(.hex:nth-child(7))  .hex,
  .hexrow:has(.hex:nth-child(9))  .hex,
  .hexrow:has(.hex:nth-child(11)) .hex,
  .hexrow:has(.hex:nth-child(13)) .hex{ flex:1 1 0; }
  /* "FLESH AND BLOOD" is the longest name and, alphabetically, leads the
     row. Retuned so it stays on one line in the narrower tile instead of
     wrapping and lifting its caption off the shared baseline. */
  .hex__name{ font-size:clamp(10px, 6.0cqw, 14px); letter-spacing:.06em; }

  /* ---- Cards down. Dice out.: one row ---- */
  .plaquerow{ flex-wrap:nowrap; max-width:1560px; }
  .plaquerow .plaque,
  .plaquerow:has(.plaque:nth-child(4)):not(:has(.plaque:nth-child(5))) .plaque,
  .plaquerow:has(.plaque:nth-child(7)) .plaque{ flex:1 1 0; }

  /* the self-fitting logo band described above */
  .plaquerow .plaque__logo{
    top:2.5px; bottom:54%; transform:none;
    display:flex; align-items:center; justify-content:center;
    padding:0 11%; }
  .plaquerow .plaque__logo img{
    width:auto; max-width:100%; max-height:100%; }
}


/* DELTA calendar-why-placement-v1
 * The cancelled-event note was rendering into the 62px TIME column, wrapping ~90 characters over
 * nine lines while the rest of the card sat empty. `.evcal .evcal__agenda .evcal__item` is a four
 * column grid (time / icon / body / fee) and every other child is placed explicitly; `.evcal__why`
 * had no placement, so auto-placement put it in row 2 column 1. It is a direct child of the item,
 * not of .evcal__itembody, so the body's inner grid never caught it. Sit it under the title and
 * let it run to the end of the card.
 *
 * Scoped to the agenda deliberately: .evcal__item in other contexts uses two or three column
 * templates, where 3 / -1 would invent an implicit column. The note is emitted in exactly one
 * place (luh-events-calendar.php:869, cancelled occurrences with a supLabel or reason).
 */
.evcal .evcal__agenda .evcal__item > .evcal__why{
  grid-column:3 / -1;
  width:auto;
  margin-top:.15rem;
  padding-bottom:2px;
  align-self:start;
}

/* luh-seeall-clickable-v1: "See all N" was inert text; it is a link now. */
.evcal__more .evcal__morelink{ color:inherit; text-decoration:none; cursor:pointer; display:block; }
.evcal__more .evcal__morelink:hover{ text-decoration:underline; }

/* ==========================================================================
   luh-request-v1 :: Request a card or product
   ==========================================================================
   Extends the existing form system rather than restating it. The panel, the
   grid, the fields, the labels, the buttons and the success block are all the
   site's own .formcard / .fgrid / .ffield / .btn / .fsuccess rules; everything
   below is only what the request form adds on top: the type tiles, the per-item
   fieldsets, help text, inline field errors, the error summary, and the search
   zero-results call to action.

   Tokens only. No new colour, no new face, no second design system.
   ========================================================================== */

/* The request form carries more per row than the contact form, so it gets the
   wider of the two measures. Everything else on the page keeps its own. */
.luh-request-section .wrap{ max-width:1000px; }
.luh-request-section .luh-request__clarify{
  margin:22px auto 0; max-width:760px; text-align:center;
  font-size:14.5px; line-height:1.7; color:var(--cream); opacity:.82;
}

.luh-request .formcard{ margin-top:26px; }

/* ---- screen-reader-only text (no existing utility on this site) ---------- */
.luh-request .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- hidden really means hidden ------------------------------------------
   The `hidden` attribute is a UA rule at zero specificity, and this site's own
   `.fgrid{display:grid}` and `.ffield{display:flex}` both outrank it. Without
   this, a hidden type panel and every conditional field still paint, so the form
   shows all four request types at once and asks a Raw-card requester for a
   grading company. Restated inside the component, where it cannot be outranked
   by a later rule either. */
.luh-request[hidden],
.luh-request [hidden]{ display:none !important; }

/* ---- error summary ------------------------------------------------------- */
.luh-request__errors{
  border:1px solid var(--ember-lift); border-radius:var(--radius);
  background:rgba(232,86,63,.09); padding:16px 18px; margin-bottom:26px;
}
.luh-request__errors:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }
.luh-request__errors-title{
  font-family:var(--ff-body); font-weight:800; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ember-lift);
}
.luh-request__errors-list{ margin:10px 0 0; padding-left:20px; }
.luh-request__errors-list li{ font-size:14.5px; line-height:1.6; color:var(--cream); }
.luh-request__errors-list a{ color:var(--cream); text-decoration:underline; text-underline-offset:3px; }
.luh-request__errors-list a:hover{ color:var(--gold); }

/* ---- one requested item -------------------------------------------------- */
.luh-request__item{
  border:1px solid rgba(255,201,60,.28); border-radius:var(--radius-card);
  background:rgba(4,10,30,.28); padding:22px 22px 24px; margin:0 0 20px;
}
.luh-request__item + .luh-request__item{ margin-top:20px; }
/* A bordered fieldset punches a gap in its own border for the legend, which
   breaks the panel outline. Floating the legend takes it out of that mechanism
   and renders it as an ordinary block header; flow-root contains the float
   without overflow:hidden, which would clip the focus ring on the controls. */
.luh-request__item{ display:flow-root; }
.luh-request__item-legend{
  float:left; display:flex; align-items:center; justify-content:space-between;
  gap:16px; width:100%; padding:0 0 14px;
}
.luh-request__item-num{
  font-family:var(--ff-display); font-weight:700; font-size:15px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
}
.luh-request__remove{
  background:none; border:1px solid rgba(232,86,63,.5); border-radius:var(--radius);
  color:var(--ember-lift); font-family:var(--ff-body); font-weight:700;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 14px; min-height:36px; cursor:pointer;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.luh-request__remove:hover{ border-color:var(--ember-lift); color:var(--cream-2); }
.luh-request__remove:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }

/* ---- request-type tiles -------------------------------------------------- */
.luh-request__typelabel{
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
}
.luh-request__tiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.luh-request__tile{ display:block; position:relative; cursor:pointer; }
/* The real radio stays in the accessibility tree and keeps keyboard arrow
   behaviour; it is only visually replaced, never removed. */
.luh-request__tile-input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.luh-request__tile-body{
  display:flex; flex-direction:column; gap:5px; height:100%;
  border:1px solid rgba(255,201,60,.32); border-radius:var(--radius-card);
  background:rgba(4,10,30,.5); padding:16px 16px 16px 40px;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.luh-request__tile-check{
  position:absolute; left:15px; top:19px; width:12px; height:12px;
  border:1px solid var(--bronze); transform:rotate(45deg);
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.luh-request__tile-title{
  font-family:var(--ff-body); font-weight:800; font-size:13.5px;
  letter-spacing:.04em; color:var(--cream-2); line-height:1.3;
}
.luh-request__tile-hint{ font-size:12.5px; line-height:1.5; color:var(--cream); opacity:.72; }
.luh-request__tile:hover .luh-request__tile-body{ border-color:rgba(255,201,60,.6); }
.luh-request__tile-input:checked + .luh-request__tile-body{
  border-color:var(--gold); background:rgba(18,48,97,.62);
}
.luh-request__tile-input:checked + .luh-request__tile-body .luh-request__tile-check{
  background:var(--gold); border-color:var(--gold);
}
.luh-request__tile-input:focus-visible + .luh-request__tile-body{
  outline:2px solid var(--gold-bright); outline-offset:3px;
}

/* ---- fields -------------------------------------------------------------- */
.luh-request__panel{ margin-top:22px; }
.luh-request .ffield__help{
  font-size:12.5px; line-height:1.55; color:var(--cream); opacity:.66; margin-top:2px;
}
.luh-request .ffield__err{
  font-size:12.5px; line-height:1.5; font-weight:700; color:var(--err-text); margin-top:2px;
}
.luh-request [aria-invalid="true"]{ border-color:var(--err); }

/* ---- add another item ---------------------------------------------------- */
.luh-request__additem{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:4px 0 26px; border-bottom:1px solid rgba(255,201,60,.18); margin-bottom:26px;
}
.luh-request__add{ padding:12px 22px; }

/* ---- contact block ------------------------------------------------------- */
.luh-request__contact{ border:0; padding:0; margin:0; }
.luh-request__contact .sec-subhead{
  font-family:var(--ff-display); font-weight:700; font-size:17px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cream-2);
  padding:0; margin-bottom:16px;
}
.luh-request__privacy{ margin-top:16px; }
.luh-request__optin{
  display:flex; align-items:flex-start; gap:11px; margin-top:14px;
  font-size:13.5px; line-height:1.6; color:var(--cream); opacity:.85; cursor:pointer;
}
.luh-request__optin input{
  width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--gold);
}
.luh-request__optin input:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }

/* ---- actions + success --------------------------------------------------- */
.luh-request__actions{
  border-top:1px solid rgba(255,201,60,.18); padding-top:24px; margin-top:26px;
}
.luh-request__actions .fnote{ flex-basis:100%; }
/* Focus lands here after a successful submit, so the ring is real and wanted.
   A 4px offset put it through the paragraph above; 2px keeps it on the panel. */
.luh-request__success{ margin-top:10px; }
.luh-request__success:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
.luh-request__success-extra{ font-weight:700; color:var(--gold); }
.luh-request__success-actions{
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; margin-top:26px;
}

/* ---- search: zero results ------------------------------------------------ */
.luh-search__request{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-top:1.75rem; padding:22px 24px;
  border:1px solid rgba(255,201,60,.4); border-radius:var(--radius-panel);
  background:linear-gradient(180deg,rgba(14,40,86,.6),rgba(6,19,54,.75));
}
.luh-search__request-copy{
  margin:0; font-size:15.5px; line-height:1.6; color:var(--cream-2); flex:1 1 320px;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1020px){
  .luh-request__tiles{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:620px){
  .luh-request .formcard{ padding:24px 18px; }
  .luh-request__item{ padding:18px 15px 20px; }
  .luh-request__tiles{ grid-template-columns:1fr; gap:10px; }
  .luh-request__tile-body{ padding:14px 14px 14px 38px; min-height:44px; }
  .luh-request__tile-check{ top:17px; }
  /* 16px keeps mobile Safari from zooming the viewport on focus. */
  .luh-request .ffield input,
  .luh-request .ffield select,
  .luh-request .ffield textarea{ font-size:16px; min-height:46px; }
  .luh-request .ffield textarea{ min-height:110px; }
  .luh-request__actions .btn,
  .luh-request__add,
  .luh-request__success-actions .btn,
  .luh-search__request .btn{ width:100%; }
  .luh-request__item-legend{ align-items:flex-start; }
  .luh-search__request{ padding:18px 16px; }
}

/* Motion here is limited to scrolling a revealed panel into view, which the
   script already skips under a reduced-motion preference. This keeps any
   transition above from animating for those visitors too. */
@media (prefers-reduced-motion:reduce){
  .luh-request *,
  .luh-search__request *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ==========================================================================
   luh-request-polish-v1 :: hero badge row + tile typography
   ==========================================================================
   MEASURED, not guessed. At 1440 the hero badge row sits in a 680px container
   (the hero .wrap is capped at 760px) while three badges plus their gaps come to
   721px, so the third dropped to a second line. And .luh-subhero__pills had
   justify-content:normal, so that second line sat hard left under a hero whose
   eyebrow, h1 and lede are all centred. The result read as broken rather than as
   a deliberate wrap.

   This is a PRE-EXISTING component issue, not one this feature introduced: the
   Contact page's three badges measure 785px in the same 680px container and wrap
   the same way. Fixing it here fixes it there too.

   Two changes, both scoped to the hero badge row:
     1. centre the row, so any wrap looks intentional at every width;
     2. tighten padding and tracking just enough that three badges fit on one line
        at desktop. Measured saving is about 65px against a 41px overflow.
   ========================================================================== */

.luh-subhero__pills{
  justify-content:center;
  align-items:center;
  row-gap:10px;
}

/* Tracking stays clearly letterspaced, just less extravagant, so the row fits
   the measure the hero already imposes. */
.luh-subhero__pills .pill{
  padding:6px 11px;
  letter-spacing:.1em;
  white-space:nowrap;
}

@media (max-width:620px){
  /* One per line on a phone reads better than two ragged rows; nowrap above
     would otherwise force a horizontal overflow on the longest badge. */
  .luh-subhero__pills{ flex-direction:column; align-items:center; }
  .luh-subhero__pills .pill{ white-space:normal; text-align:center; }
}

/* ---- request-type tiles -------------------------------------------------
   "Individual card" sat on one line while the other three titles took two,
   so the hint text started at different heights across the row. Balanced
   wrapping evens the ragged edge where the browser supports it, and a min-height
   on the title keeps the hints aligned where it does not. */
.luh-request__tile-title{
  text-wrap:balance;
  min-height:2.6em;
  display:flex;
  align-items:flex-start;
}
@media (max-width:620px){
  .luh-request__tile-title{ min-height:0; display:block; }
}

/* ==========================================================================
   luh-contact-routing-v1 :: the Contact page subject as a real router
   ==========================================================================
   Picking "Request a card or product" is a mode switch, not just a label on an
   email. The JS already sets `hidden` on every [data-contact-generic] field and
   disables its controls, but `hidden` is a UA rule at zero specificity and this
   file's own `.ffield{display:flex}` and `.fsubmit{display:flex}` outrank it, so
   the message box and the Send button stayed on screen, dead to the touch, and
   the switch read as "nothing happened". Same defeat the request component had
   to restate for itself; this is the contact form's half of it.
   ========================================================================== */
.luh-form [data-contact-generic][hidden],
.luh-form [data-contact-hint][hidden]{ display:none !important; }

/* The routing question leads the form, so it gets a little air under it before
   the fields it governs. */
.luh-form .ffield--subject{ margin-bottom:2px; }

/* Confirmation, in the visitor's own line of sight, that the choice did
   something. Shown only while the request branch is open. */
.luh-form .ffield__hint{
  margin:2px 0 0; font-size:13.5px; line-height:1.55;
  color:var(--cream); opacity:.8;
}
.ground-cream .luh-form .ffield__hint{ color:var(--navy-900); opacity:.72; }

/* In request mode the contact panel is down to the routing question alone, and a
   bordered card holding one dropdown above a second bordered card reads as two
   competing forms. Drop the chrome so the question sits as a lead-in to the
   request card below it. :has() is the whole test; a browser without it keeps
   the panel, which is only slightly heavier, never broken. */
.luh-form .formcard:has([data-contact-generic][hidden]){
  background:none; border:0; padding:0; margin-bottom:-22px;
}
.luh-form .formcard:has([data-contact-generic][hidden]) .fgrid{ gap:0; }

/* ==========================================================================
   luh-shop-hero-cta-v1 :: the inner-page hero can carry its own action row
   ==========================================================================
   The Shop page opened with the hero and then a full-width band in a different
   blue, both built the same way: gold eyebrow, two-tone serif headline, centered
   paragraph. Back to back they read as the page repeating itself, and a shopper
   scrolled past a thousand pixels of prose before the first product. The band's
   buttons now sit in the hero that already introduced the page, so there is one
   panel at the top instead of two saying the same thing twice.

   Renders only for a hero instance that sets a primary CTA. Every other subhero
   on the site is untouched.
   ========================================================================== */
.luh-subhero__cta{
  display:flex; flex-wrap:wrap; gap:14px;
  justify-content:center; margin-top:30px;
}
@media (max-width:640px){
  .luh-subhero__cta{ flex-direction:column; align-items:stretch; }
  .luh-subhero__cta .btn{ width:100%; justify-content:center; }
}

/* ==========================================================================
   luh-select-appearance-v1 :: dropdowns have to be readable on iOS
   ==========================================================================
   Safari paints a native <select> with the system control look and ignores the
   author background. Measured on the live site in WebKit 26.4 at iPhone 13: the
   control painted rgb(244,244,244) while its computed backgroundColor said
   rgba(4,10,30,.6), and the cream text sat on top of that at roughly 1.1:1
   contrast. Every dropdown on the site was affected, ten of them on /request
   alone. The Contact page's subject field is the one that got noticed, reported
   as "mobile has no option to set the contact type", because on a phone it looks
   like an empty pale box rather than a control with a value in it.

   Turning the native appearance off is what makes WebKit honour the background
   these controls already declare. Chrome painted them correctly all along and
   only loses its own arrow here, which is why the chevron is supplied for both.
   Two rules because `.ground-cream .ffield select` sets the `background`
   shorthand at higher specificity and would otherwise drop the chevron.
   ========================================================================== */
.ffield select{
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ffc93c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
  padding-right:40px;
}
.ground-cream .ffield select{
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23b8901f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
  padding-right:40px;
}