/* =========================================================
   DIRECTION A · DECK — "the page is a card table"
   Royal flush in spades: A♠ hero, K♠ the night, Q♠ tickets, J♠ venue,
   10♠ last year + partner, then the flush fans out. FAQ/contact/footer
   are normal page content below the table.

   Two modes, one DOM:
   - BASE (no JS, prefers-reduced-motion, old browsers): every card is a
     normal in-flow section styled as a playing card. No motion.
   - html.deck-on (set in <head> before first paint, so CLS = 0): the cards
     stack inside a sticky stage; deck.js maps native scroll position to
     transform/opacity. Scroll is never locked or hijacked.
   ========================================================= */
:root{
  --navy-deep:#050818; --navy:#0B1130; --navy-glow:#16204F; --felt:#0A1336;
  --gold-hi:#F7DB82; --gold:#D9A52E; --gold-mid:#B07A1A; --gold-lo:#6E4510;
  --cream:#F6EBC8; --muted:#C9BC95; --red:#B5121B; --red-text:#E2454D;
  --paper:#FBF4DF;
  --line:rgba(217,165,46,.32);
  --f-display:'Playfair Display',Georgia,serif;
  --f-body:'Cormorant Garamond',Georgia,serif;
  --f-label:'Cinzel',Georgia,serif;
  --gutter:20px; --max:1180px;
  --hh:56px;               /* header height */
  --bb:69px;               /* phone buy bar height (48 btn + 2x10 pad + 1 rule) */
  --metal:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 42%,var(--gold-mid) 58%,var(--gold-hi) 78%,var(--gold) 100%);
  /* motion tokens (mirrored in DESIGN.md > Motion and deck.js) */
  --ease-deal:cubic-bezier(.65,0,.35,1);
  --ease-flip:cubic-bezier(.45,0,.25,1);
  --dur-ui:160ms; --dur-reveal:420ms;
}
@media (min-width:900px){:root{--gutter:48px;--hh:76px;--bb:0px}}
/* focus/anchor scrolling clears the sticky header and the phone buy bar */
html{scroll-padding-top:calc(var(--hh) + 12px);scroll-padding-bottom:calc(var(--bb) + 12px)}
.skip{position:fixed}
body{background:var(--navy-deep);color:var(--cream);font:500 19px/1.5 var(--f-body);font-variant-numeric:lining-nums}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.metal{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.label{font:700 max(11px,.66em)/1.3 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:max(44px,2.7em);padding:0 1.3em;border-radius:999px;font:700 max(12px,.72em)/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;transition:transform var(--dur-ui),box-shadow var(--dur-ui)}
.btn--gold{background:var(--metal);color:var(--navy-deep);box-shadow:0 0 0 1px var(--gold-lo) inset,0 8px 30px rgba(217,165,46,.28)}
.btn--gold:hover{transform:translateY(-1px)}
.btn--line{background:rgba(217,165,46,.08);color:var(--gold-hi);box-shadow:0 0 0 1.5px var(--gold) inset}
.btn--line:hover{background:rgba(217,165,46,.16)}

/* ---------------- Header: crest + card-pip nav (= progress) ---------------- */
.top{position:sticky;top:0;z-index:30;height:var(--hh);background:var(--navy-deep);border-bottom:1px solid rgba(217,165,46,.16)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%}
.mono{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;flex:none}
.mono__crest{height:40px;width:auto}
.mono__rule,.mono__txt{display:none}
.mono__txt{font:700 13px/1.15 var(--f-label);letter-spacing:.18em;color:var(--cream)}
.top .btn{display:none;min-height:44px;font-size:12px;padding:0 18px}
.pips{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.pips a{display:flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;text-decoration:none;color:var(--cream)}
.pip{display:grid;place-items:center;width:26px;height:36px;border-radius:5px;font:900 14px/1 var(--f-display);color:var(--gold);
  background:var(--navy);box-shadow:0 0 0 1px var(--gold-mid) inset;transition:transform var(--dur-ui),background-color var(--dur-ui),color var(--dur-ui)}
.pip small{display:block;font-size:10px;margin-top:-6px}
.pips a[aria-current="true"] .pip{background:var(--metal);color:var(--navy-deep);transform:translateY(-3px);box-shadow:0 0 0 1px var(--gold-lo) inset,0 4px 10px rgba(0,0,0,.5)}
.pips.is-flush a[data-card] .pip{background:var(--metal);color:var(--navy-deep);box-shadow:0 0 0 1px var(--gold-lo) inset}
.pips:not(.is-flush) a.is-dealt .pip{color:var(--muted);box-shadow:0 0 0 1px rgba(217,165,46,.35) inset}
.pips a:hover .pip{transform:translateY(-2px)}
.pip__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pips .pips__faq{display:none}
@media (min-width:900px){
  .mono__crest{height:54px}.mono__rule{display:block;width:1px;height:40px;background:var(--line)}.mono__txt{display:block}
  .top .btn{display:inline-flex;white-space:nowrap}
  .pips{gap:10px}
  .pips .pips__faq{display:flex}
  .pip--joker{font-size:13px;color:var(--red-text)}
  .pip--joker small{font:700 7px/1 var(--f-label);letter-spacing:.04em;margin-top:-3px;color:var(--gold)}
}
/* text labels next to the pips only where they fit (header = crest 180 + nav + button 120) */
@media (min-width:1280px){
  .pips{gap:4px}
  .pips a{padding:0 6px}
  .pip__t{position:static;width:auto;height:auto;overflow:visible;clip:auto;font:700 12px var(--f-label);letter-spacing:.12em;text-transform:uppercase}
}
@media (min-width:1400px){.pips{gap:6px}}   /* 12px pushed the header button 22px past the 1180px container (crest 178 + labelled pips 703 + button 140) */

/* ---------------- The table + cards (BASE = stacked sections) ---------------- */
.table{position:relative;padding:20px 0 calc(28px + var(--bb));
  background:radial-gradient(ellipse 90% 60% at 50% 35%,var(--navy-glow) 0%,var(--felt) 50%,var(--navy-deep) 100%)}
.table__steps{display:none}
.stage{position:relative}
.pcard{position:relative;width:min(92vw,var(--max));margin:0 auto 24px;color:var(--cream);font-size:19px;scroll-margin-top:calc(var(--hh) + 12px)}
@media (min-width:900px){.pcard{font-size:20px;margin-bottom:40px}}
.pcard__face{position:relative;height:100%;border-radius:18px;padding:1em 1.05em;overflow:hidden;
  background:radial-gradient(ellipse 110% 70% at 50% 0%,var(--navy-glow) 0%,var(--navy) 55%,#080D26 100%);
  box-shadow:0 0 0 1.5px var(--gold-mid),0 0 0 3px var(--navy-deep),0 0 0 3.6px rgba(217,165,46,.55),0 22px 50px -12px rgba(0,0,0,.75);
  display:flex;flex-direction:column}
/* inner foil frame, like a printed card border */
.pcard__face::before{content:"";position:absolute;inset:7px;border-radius:12px;border:1px solid rgba(217,165,46,.38);pointer-events:none}
/* faint centre pip (watermark) */
.pcard__mark{position:absolute;left:50%;top:52%;width:62%;max-width:420px;aspect-ratio:1;transform:translate(-50%,-50%);color:var(--gold);opacity:.05;pointer-events:none}
.pcard__mark svg{width:100%;height:100%}
.pcard__back,.pcard__shadow{display:none}
.deck-on .pcard__face{position:relative;z-index:1}
.deck-on .pcard__shadow{display:block;position:absolute;z-index:0;left:-6%;right:-6%;top:4%;bottom:-9%;border-radius:40px;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,.32) 55%,transparent)}
@media (min-width:900px){.pcard__face{border-radius:22px;padding:1.4em 1.6em}.pcard__face::before{inset:10px;border-radius:15px}}

/* corner indices */
/* rank + SVG spade. Line-height 1.1 + padding so no descender (J, Q) is cut; lining figures for the 10 (the font
   shorthand resets font-variant, which had set an old-style "1o").
   The bottom-right index is NOT turned 180deg: a screen card is never turned round, and turned, the J read as "ſ" and
   the spade as a heart (client feedback). Both corners read the same way up, as in digital card games. */
.idx{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;width:1.25em;font:900 max(22px,1.38em)/1.1 var(--f-display);font-variant-numeric:lining-nums;color:var(--gold-hi);pointer-events:none;padding-bottom:.04em}
.idx__s{display:block;width:.8em;height:.8em;margin-top:.08em;color:var(--gold-hi)}
.idx--10{letter-spacing:-.03em}
.idx--tl{top:13px;left:13px}
.idx--br{right:13px;bottom:13px}
@media (min-width:900px){.idx{font-size:max(30px,1.7em)}.idx--tl{top:22px;left:24px}.idx--br{right:24px;bottom:22px}}

/* card body layout */
.pc{position:relative;z-index:1;display:flex;flex-direction:column;gap:.6em;flex:1;min-height:0;padding-bottom:2.1em} /* keeps content clear of the bottom-right index */
/* the index is taller now (bigger rank + SVG spade): the last row of copy keeps clear of its column instead of the card
   giving up a whole row of height. */
.pc__body > p:last-child,.pc__foot{padding-right:1.6em}
.pc__body > .partner:last-child{margin-right:2.3em}
/* the index sits 13-24px in from the face edge; the copy area ends a little higher on short cards */
@container (max-height:780px){#tickets .tix{gap:.6em}#tickets .tk{padding:.8em .9em}}
.pc__top{padding:0 2.2em;text-align:center;min-height:2.6em;display:flex;align-items:center;justify-content:center}
.pc__foot{padding:0 2.2em;text-align:center;margin-top:auto}
.pc h2{font:900 2.05em/1.06 var(--f-display);margin:0;letter-spacing:-.01em;padding-bottom:.06em}
.pc p{margin:0}
.lead{color:#D8CCA6;font-size:1.02em;line-height:1.35;max-width:36ch}
.court{display:none}
.pc__body{display:flex;flex-direction:column;gap:.75em;flex:1;justify-content:center;min-height:0}
.deck-on .pc__body{gap:clamp(.6em,2.1cqh,1.5em)}
.hero .pc__body{gap:clamp(.6em,2.6cqh,1.6em);justify-content:space-around}
.hero__cta + .hero__dress{margin-top:-.3em}
.hero__head + .hero__sub{margin-top:-.1em}

/* A♠ HERO */
.hero__marks{display:flex;align-items:center;gap:.7em}
.hero__marks .crest{height:5.2em;width:auto;flex:none}  /* ~80-100px on phones: +25%+ vs the 64px a3 hero (Forge) */
.hero__marks .rule{width:1px;align-self:stretch;background:var(--line)}
.hero__kicker{font-size:max(11px,.62em);line-height:1.55;text-align:left}
.hero__kicker span{display:block}
.hero__kicker em{font-style:normal;color:var(--cream)}
.hero__head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.4em}
.hero h1{margin:0;font:900 3.9em/.9 var(--f-display);letter-spacing:-.02em}
.hero h1 span{display:block}
.hero__batch{width:5.6em;height:auto}
.hero__sub{font:600 max(13px,.9em)/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}
.hero__meta{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.1em .9em;font:600 .95em/1.3 var(--f-body)}
.hero__meta li{display:flex;align-items:center;gap:.45em}
.hero__meta li::before{content:"♦";color:var(--red-text);font-size:.6em}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em;max-width:22em}
.chip{--c:#283A8C;position:relative;width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle,var(--c) 0 54%,transparent 55%),repeating-conic-gradient(var(--gold) 0 12deg,var(--c) 12deg 30deg);box-shadow:0 0 0 2px var(--gold),0 0 0 4px rgba(5,8,24,.9),0 6px 14px rgba(0,0,0,.45)}
.chip::after{content:"";position:absolute;inset:13%;border-radius:50%;box-shadow:0 0 0 1px rgba(247,219,130,.55)}
.chip:nth-child(even){--c:#7A0E16}
.chip span{font:900 1.3em/1 var(--f-display);color:var(--gold-hi);font-variant-numeric:lining-nums tabular-nums}
.chip small{display:block;margin-top:3px;font:700 max(10px,.55em)/1 var(--f-label);letter-spacing:.1em;color:#FFF6DC;text-transform:uppercase}
.hero__cta{display:grid;gap:.5em}
.hero__dress{font:italic 600 1.08em var(--f-body);color:var(--cream)}

/* K♠ THE NIGHT */
.incl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0;padding:0;list-style:none}
.incl li{background:rgba(11,17,48,.92);padding:.7em .7em;display:flex;gap:.5em;align-items:flex-start;min-height:3.6em}
.incl .s{font:1em/1.15 var(--f-display);color:var(--gold);flex:none}
.incl li:nth-child(4n+2) .s,.incl li:nth-child(4n+3) .s{color:var(--red-text)}
.incl b{font:700 1.02em/1.15 var(--f-display);color:var(--cream)}

/* Q♠ TICKETS */
.tix{display:grid;gap:.8em}
#tickets .pc__body{justify-content:space-evenly}
.tk{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.45em .8em;padding:1em .95em;border-radius:12px;background:rgba(5,8,24,.55);box-shadow:0 0 0 1px var(--line) inset}
.tk--feature{box-shadow:0 0 0 1.5px var(--gold) inset}
.tk h3{margin:0;font:900 1.35em/1 var(--f-display)}
.tk__who{font:600 max(11px,.6em) var(--f-label);letter-spacing:.14em;color:#D8CCA6;text-transform:uppercase}
.tk__price{font:900 1.9em/1 var(--f-display);text-align:right;font-variant-numeric:lining-nums}
.tk__per{grid-column:1/-1;color:#D8CCA6;font-size:.95em;line-height:1.25}
.tk .btn{grid-column:1/-1;width:100%}
.tag{display:inline-block;padding:.35em .65em;border-radius:999px;font:700 max(11px,.6em)/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase}
.tag--now{background:var(--red);color:#fff}
.tix__note{color:#D8CCA6;font-size:.9em;line-height:1.3}
.tk__pricebox{display:flex;flex-direction:column;align-items:flex-end;gap:.3em}
.tix__note s{color:var(--cream)}
.pay{color:#D8CCA6;font-size:.95em;line-height:1.35}
.pay b{color:var(--cream)}

/* J♠ VENUE */
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.45em 1em;font-size:1.02em;line-height:1.3}
.facts dt{font:700 max(11px,.62em)/2 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.facts dd{margin:0}
.facts small{color:var(--muted)}
.venue__map{display:grid;place-items:center;aspect-ratio:16/9;border-radius:12px;text-align:center;color:var(--muted);font-size:.85em;line-height:1.3;padding:1em;
  background:linear-gradient(transparent 49.5%,rgba(217,165,46,.18) 50%,transparent 50.5%) 0 0/36px 36px,linear-gradient(90deg,transparent 49.5%,rgba(217,165,46,.18) 50%,transparent 50.5%) 0 0/36px 36px,rgba(5,8,24,.6);box-shadow:0 0 0 1px var(--line) inset}
.venue__map strong{display:block;font:900 1.4em var(--f-display);color:var(--gold)}
.venue-grid{display:grid;gap:.9em}

/* 10♠ LAST YEAR + PARTNER */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.gal div{aspect-ratio:1;border-radius:9px;border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted);font:600 max(10px,.52em) var(--f-label);letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:4px;background:rgba(5,8,24,.5)}
.partner{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.4em .9em;padding:.8em .9em;border-radius:12px;background:var(--cream);color:var(--navy)}
.partner .label{color:var(--gold-lo)}
.partner h3{margin:0;font:900 1.3em/1.05 var(--f-display);color:var(--navy)}
.partner__off{font:900 2.3em/.86 var(--f-display);color:var(--red);text-align:center}
.partner__off small{display:block;font-size:.42em;letter-spacing:.08em;margin-top:.35em}
.partner p{grid-column:1/-1;font-size:.9em;line-height:1.3}
.partner a{font-weight:700;display:inline-block;padding:6px 0}

/* FINALE: the flush */
.finale{position:relative;text-align:center;padding:2em var(--gutter) 1em}
.fan{position:relative;height:9.6em;width:min(100%,16em);margin:0 auto 3em;font-size:1.25em}
.mc{position:absolute;bottom:0;left:50%;width:5.4em;height:7.6em;margin-left:-2.7em;border-radius:.5em;background:var(--paper);color:#0B1130;
  box-shadow:0 0 0 1.5px var(--gold-mid) inset,-6px 4px 10px -4px rgba(5,8,24,.6);transform-origin:50% 115%;font-family:var(--f-display)}
.mc b{position:absolute;top:.35em;left:.45em;font-size:1.15em;line-height:.9;text-align:center}
.mc b small{display:block;font-size:.8em}
.mc i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:2.6em}
.mc:nth-child(5) i{color:var(--gold-mid)}
.mc:nth-child(1){transform:rotate(-28deg)}.mc:nth-child(2){transform:rotate(-14deg)}.mc:nth-child(4){transform:rotate(14deg)}.mc:nth-child(5){transform:rotate(28deg)}
.finale h2{font:900 clamp(40px,10vw,76px)/1.12 var(--f-display);margin:0 0 .2em;padding-bottom:.12em}
.finale p{margin:0 auto 1.2em;max-width:34ch;text-wrap:balance;color:var(--muted);font-size:1.05em;line-height:1.35}
.finale__cta{display:grid;gap:10px;max-width:520px;margin:0 auto}
.finale__cta .btn{white-space:nowrap;min-height:52px;font-size:14px}
@media (min-width:600px){.finale__cta{grid-template-columns:1fr 1fr}}

/* ---------------- DESKTOP card layouts (landscape cards) ---------------- */
@media (min-width:900px){
  .pc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);grid-template-rows:auto 1fr;column-gap:2.4em;row-gap:.8em;align-content:start}
  .pc__top{grid-column:1/-1;justify-content:flex-start;padding:0 0 0 2.6em}
  .pc__body{grid-column:2}
  .pc__foot{display:none}
  /* court art: printed straight on the card face (no inner frame, no caption), split from the copy by one foil
     hairline, so the desktop card reads as ONE card, not a card with a second card inside it */
  .court{grid-column:1;grid-row:2;display:grid;place-items:center;align-self:stretch;min-height:0;position:relative;
    background:radial-gradient(closest-side,rgba(217,165,46,.12),transparent)}
  .court::after{content:"";position:absolute;top:6%;bottom:6%;right:-1.2em;width:1px;background:linear-gradient(transparent,var(--line) 20%,var(--line) 80%,transparent)}
  .court__in{display:flex;flex-direction:column;align-items:center;gap:0}
  /* big rank: line-height 1.15 + padding-bottom so the J hook / Q tail sit inside the box that background-clip:text paints */
  .court b{display:block;font:900 clamp(5em,22cqh,8.5em)/1.15 var(--f-display);padding:0 .06em .14em;margin-bottom:-.02em}
  .court svg{width:clamp(3.4em,14cqh,5.2em);height:clamp(3.4em,14cqh,5.2em);color:var(--gold)}
  .pc h2{font-size:2.7em}
  .lead{font-size:1.1em}
  .hero .pc{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  .hero .pc__body{grid-column:1;grid-row:2}
  .hero .court{grid-column:2}
  .hero h1{font-size:clamp(5.6em,11cqh,7.4em)}
  .pcard__mark{display:none}
  .hero__head{display:block}
  .hero__head .hero__batch{display:none}
  .hero__cta{display:flex;flex-wrap:wrap;gap:.6em}
  .court__batch{width:min(15em,80%);height:auto;position:relative;z-index:1}
  .court--ace svg{position:absolute;width:min(20em,90%);height:auto;aspect-ratio:1;color:var(--navy-glow);opacity:1}
  .hero .court::after{right:auto;left:-1.2em}
  .court--ace{position:relative;overflow:hidden}
  .incl{grid-template-columns:repeat(4,minmax(0,1fr))}  /* minmax(0,…): long items wrap instead of pushing the grid past the card (stacked at 915×412) */
  .incl li{flex-direction:column;justify-content:space-between;min-height:6.2em;padding:.9em}
  .incl b{font-size:1.15em}
  .tix{grid-template-columns:1fr 1fr;gap:1em}
  .tk{padding:1.1em 1.2em;grid-template-columns:1fr}
  .tk__price{text-align:left;font-size:2.4em;margin:.1em 0}
  .tk__pricebox{align-items:flex-start}
  .venue-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4em;align-items:center}
  .venue__map{display:grid;place-items:center;aspect-ratio:4/3;border-radius:14px;text-align:center;color:var(--muted);font-size:.8em;padding:1em;
    background:linear-gradient(transparent 49.5%,rgba(217,165,46,.18) 50%,transparent 50.5%) 0 0/40px 40px,linear-gradient(90deg,transparent 49.5%,rgba(217,165,46,.18) 50%,transparent 50.5%) 0 0/40px 40px,var(--navy);box-shadow:0 0 0 1px var(--line) inset}
  .venue__map strong{display:block;font:900 1.4em var(--f-display);color:var(--gold)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .gal div{aspect-ratio:16/10}
  .partner{grid-template-columns:auto 1fr auto;padding:1.1em 1.4em}
  .partner p{grid-column:2}
  .partner__off{grid-row:1/span 2}
  .fan{height:10em;font-size:1.5em}
  .mc{width:7.4em;height:10.4em;margin-left:-3.7em}
}

/* ---------------- DECK MODE (JS + motion allowed) ---------------- */
/* no scroll-snap in deck mode: snapping fought the scrubbed deal and felt jerky (client: "smoother") */
.deck-on .table{padding:0;margin-top:calc(-1 * var(--hh))}
.deck-on .table__steps{display:block;position:relative;margin-top:-100svh;pointer-events:none}
.deck-on .table__steps span{display:block;height:100svh}
.deck-on .stage{position:sticky;top:0;height:100svh;overflow:hidden;overflow:clip;perspective:1800px}
.deck-on .pcard{position:absolute;margin:0;left:4vw;right:4vw;width:auto;
  top:calc(var(--hh) + 10px);bottom:calc(var(--bb) + env(safe-area-inset-bottom) + 16px);
  container-type:size;
  transform-origin:50% 60%}
/* layers are fixed for the whole scroll: promoting/demoting at a switch (the old .is-live) re-rasterised whole card
   faces on that frame (the client's "jitter at the switch"). The 5 cards + the deal shadow (its opacity animates on
   every deal frame, so inside the card layer it forced a card repaint per frame) have their own layers. The back
   overlay stays in the card layer: it flips once per switch, at 90deg when the card is edge-on, and as 5 extra
   full-card layers it cost more compositing than it saved (A/B in design/qa/README.md). */
.deck-on .pcard{will-change:transform}
.deck-on .pcard__shadow{will-change:opacity}
.deck-on .pcard__face{font-size:clamp(13.5px,min(2.72cqh,5.3cqw),20px)}
/* card back = an overlay on the same plane; deck.js shows it while the card is face-down (single-plane flip, cheap to composite) */
.deck-on .pcard__back{display:block;position:absolute;inset:0;z-index:4;border-radius:18px;opacity:0;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,rgba(217,165,46,.22) 0 1px,transparent 1px 13px),
    repeating-linear-gradient(-45deg,rgba(217,165,46,.22) 0 1px,transparent 1px 13px),
    radial-gradient(ellipse at 50% 50%,var(--navy-glow),var(--navy-deep));
  box-shadow:0 0 0 1.5px var(--gold-mid),inset 0 0 0 12px var(--navy-deep),inset 0 0 0 13px var(--gold-mid)}
.deck-on .pcard__back img{position:absolute;left:50%;top:50%;width:46%;max-width:240px;height:auto;transform:translate(-50%,-50%);
  padding:7%;border-radius:50%;background:var(--navy-deep);box-shadow:0 0 0 1.5px var(--gold),0 0 0 6px var(--navy-deep),0 0 0 7px rgba(217,165,46,.5)}
@media (min-width:900px){
  .deck-on .pcard{left:50%;right:auto;width:min(1180px,calc(100vw - 2 * var(--gutter)));margin-left:calc(min(1180px,calc(100vw - 2 * var(--gutter))) / -2);top:calc(var(--hh) + 16px);bottom:24px}
  .deck-on .pcard__back{border-radius:22px}
  .deck-on .stage{perspective:4200px}
}
/* the dealt-out cards go to the felt; the flush sits under the deck */
.deck-on .finale{position:absolute;inset:var(--hh) 0 var(--bb);display:flex;flex-direction:column;justify-content:center;padding-top:0;padding-bottom:2vh}
.deck-on .finale{will-change:opacity}
.deck-on .finale .mc{will-change:transform}
/* Safety net (rev 4): the card body scrolls inside the card if copy ever outgrows it (a committee edit, a third
   ticket tier), instead of being clipped with no way to reach it. Fitted cards never overflow, so normally there is
   nothing to scroll and no scroller is created. The 6px padding/negative margin keeps focus rings inside the clip.
   Scroll chains to the page at either end (no overscroll-behavior), so it can never trap the reader. */
.deck-on .pc{overflow-y:auto;overflow-x:hidden;padding:6px 6px calc(2.1em + 6px);margin:-6px;scrollbar-width:thin;scrollbar-color:var(--gold-mid) transparent}
/* short phones: secondary lines leave the card so every card still fits. Informational copy is visually hidden,
   not display:none, so screen readers still get it (rev 4). The map placeholder and the duplicate "See tickets" link
   carry no information of their own and are removed. */
@container (max-height:640px){
  .venue__map{display:none}
}
@container (max-height:600px){
  .hero__dress,.hero__sub,.tix__note,.lead{position:absolute!important;width:1px;height:1px;margin:0!important;padding:0!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pc__foot{display:none}
  .hero__marks .crest{height:4.2em}
}
@container (max-height:520px){
  .count{max-width:18em}
  .tk__per{position:absolute!important;width:1px;height:1px;margin:0!important;padding:0!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---------------- Below the table: FAQ, contact, footer ---------------- */
.after section{padding:64px 0;border-top:1px solid rgba(217,165,46,.14)}
@media (min-width:900px){.after section{padding:96px 0}}
.after h2{font:900 clamp(34px,7vw,56px)/1.02 var(--f-display);margin:8px 0 20px}
.after .label{font-size:13px}
.after .lead{font-size:20px;margin:0 0 24px}
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:64px;padding:12px 0;font:700 21px/1.25 var(--f-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"♠";color:var(--gold);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq p{margin:0 0 20px;color:var(--muted);max-width:62ch}
.after .btn{font-size:14px;min-height:52px}
footer{padding:56px 0 calc(40px + var(--bb));color:var(--muted);font-size:16px;border-top:1px solid rgba(217,165,46,.14)}
.foot{display:grid;gap:28px}
@media (min-width:900px){.foot{grid-template-columns:auto 1fr auto;align-items:center}}
.foot__marks{display:flex;gap:16px;align-items:center}
.foot__crest{height:64px;width:auto}.foot__batch{height:72px;width:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot nav a{display:inline-flex;min-height:44px;align-items:center;text-decoration:none}

/* Mobile sticky buy bar (always reachable) */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(var(--bb) + env(safe-area-inset-bottom));padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--navy-deep);border-top:1px solid var(--gold-mid);box-shadow:0 -12px 28px rgba(0,0,0,.55)}
.buybar p{margin:0;font-size:16px;line-height:1.2}.buybar b{display:block;font:900 20px var(--f-display);color:var(--gold-hi)}
.buybar .btn{min-height:48px;padding:0 20px;font-size:14px}
@media (min-width:900px){.buybar{display:none}}