/* ============================================================================
   UNIÓN , 06 Tickets and the money path. Lane T owns this file.

   No hex, no font name, no easing curve and no duration here: every value is a
   var() from tokens.css. Composed from the seven devices; this file only places
   them and adds the few shapes the money path needs that no device covers
   (the ladder's rung grid, the lanyard pass, the barcode zone, the fact rows).

   PROPOSED TOKENS are marked with a /* PROPOSED TOKEN *​/ comment and listed in
   evidence/T.md. There are two, both about a stub-based grid.
   ============================================================================ */

/* PROPOSED TOKEN , the widest a single ticket or pass may run before it stops
   reading as a printed object and starts reading as a page section. Measured off
   the S10 starred build (920px) and the ticket mockups on mockups-A/B. */
.t-page{--ticket-max:920px}
/* PROPOSED TOKEN , the lanyard pass's aspect, measured off the VIP / ARTIST /
   BACKSTAGE mockups: a portrait card a little taller than 3:2. */
.t-page{--pass-ratio:.66}

/* ----------------------------------------------------------------------------
   T1 , TIER LADDER AS A LEVEL METER  (starred set-06 K2)
   Measured off the starred shot: the rungs are separated by a HAIRLINE only, with
   a heavier rule closing the top and the bottom of the whole ladder. The meter
   sits hard right at a fixed column. The gone rung is struck through and dimmed;
   its meter stands full height at low opacity, because the level is spent, not
   absent. The next rungs sit almost flat. The tag sits between the title and the
   meter, not over either.
   ---------------------------------------------------------------------------- */
.t-ladder{max-width:var(--ticket-max);border-top:var(--rule) solid currentColor;
  border-bottom:var(--rule) solid currentColor}
/* MEASURED off the lab's `.k2-step`, fifth pass: `padding:16px 0`, `gap:20px`,
   and a FIXED meter column. `--s4` is 16px and `--s5` is 24px, so the padding is
   exact and the column gap is the nearest token, 24px against the lab's 20px.
   The description's own top margin is the lab's 3px, near enough `--s1`. */
.t-rung{display:grid;grid-template-columns:minmax(0,1fr) auto 92px;
  gap:var(--s1) var(--s5);align-items:center;
  padding:var(--s4) 0;border-bottom:1px solid var(--hairline-on-dark)}
.t-ladder > .t-rung:last-child{border-bottom:0}
.t-rung__t{margin:0;font:900 clamp(20px,2.4vw,34px)/.9 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase;
  padding-top:.12em;overflow:visible}
/* the lab sets 13px here; --size-small is 14px and is the nearest token. */
.t-rung__x{grid-column:1;margin:3px 0 0;font-size:var(--size-small);opacity:.8}
/* MEASURED off the lab's `.k-tag` and `.k2-` rules, fifth pass. My labels were
   `.d-label--sm` at 10px, about half the approved size, and the meter column was
   auto rather than the lab's fixed 92px. The label is a label-in-slab, not a
   chip: 900 / 15px / 62% caps with 6px 12px 5px padding, which lands it at the
   ~33px tall Louis starred, similar in weight to the rung's sub line. */
.t-rung .d-label{grid-column:2;grid-row:1;justify-self:end;
  padding:6px 12px 5px;font:900 15px/1 var(--font);
  font-stretch:var(--wdth-condensed);letter-spacing:.02em}
/* the meter column is FIXED at the lab's 92px, so every reading sits on one edge */
.t-rung .d-wave{grid-column:3;grid-row:1;justify-self:end;width:92px;
  justify-content:flex-end}
/* The drawn glyph in a rung. NOT used by T1, which is the approved port and uses
   the bar meter on every rung. This sizing exists only for the T1b proposal, and
   is set to the bar meter's measured 58px (5 bars at 10px, 4 gaps at 4px) so the
   two can be compared in the same column without a size difference confusing it. */
.t-rung__glyph{grid-column:3;grid-row:1;justify-self:end;width:58px;flex:none;
  display:flex;align-items:center;min-height:46px}
.t-rung__glyph svg{width:100%;height:auto;overflow:visible}

/* GONE , spent. Struck, dimmed, meter full but flat in colour. */
.t-rung.is-gone{opacity:.55}
.t-rung.is-gone .t-rung__t{text-decoration:line-through;text-decoration-thickness:var(--rule)}
/* NEXT , not open yet: the meter barely stands. */
.t-rung.is-next .d-wave i{transform:scaleY(.16);opacity:.45}
.t-rung.is-next .d-wave i:nth-child(3){transform:scaleY(.2)}
/* LIVE , the only rung in stage colour. */
.t-rung.is-live .t-rung__t{color:var(--cream)}

@media(max-width:700px){
  .t-rung{grid-template-columns:minmax(0,1fr) auto}
  .t-rung .d-wave,.t-rung__glyph{grid-column:2;grid-row:1}
  .t-rung .d-label{grid-column:1;grid-row:3;justify-self:start;margin-top:var(--s2)}
}

/* ----------------------------------------------------------------------------
   T2 , THE WAITING ROOM  (starred set-06 K4)
   The one pattern treatment Louis has liked, carried faithfully: the river runs
   leftward through a WINDOW that fades at both edges, and a yellow rule marks
   where you are. The window is .pattern-slot, so Louis's drawn artwork drops in
   without a rebuild. The number is display type; the facts below are pink-edged
   rows, black-on-dark-cream, never inside the pattern.
   ---------------------------------------------------------------------------- */
.t-queue{max-width:var(--ticket-max)}
.t-queue__n{display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;
  margin-top:var(--s4)}
.t-queue__n b{font:900 clamp(64px,13vw,150px)/1 var(--font);
  font-stretch:var(--wdth-condensed);letter-spacing:-.02em;
  padding-top:.12em;overflow:visible}
.t-queue__n span{padding-bottom:var(--s4);opacity:.85}

/* the window. Height and fade are the slot's own variables, not new values. */
.t-queue__win{position:relative;margin:var(--s5) 0 var(--s2);
  --pattern-height:150px;--pattern-fade:12%}
/* REVERTED, third pass. I had opened the stroke overlap from the slot's -34px out
   to -8px, arguing the ink budget. K4 is a STARRED, approved component and the
   dense mass is what Louis chose, so that was a redesign and it is undone: T2
   uses .pattern-slot's own run geometry, unmodified. The observation now lives
   beside it as T2b, clearly marked as a proposal, behind its own modifier class
   so it can never leak into the approved component. A class, not an id selector:
   no component CSS on this page depends on page position. */
.t-queue__win--sparse .pattern-slot__run u-svg{margin-right:-8px}
/* YOU ARE HERE , a yellow rule standing through the whole window, as measured on
   the starred shot: it overhangs the window top and bottom rather than sitting
   inside it, so it reads as a marker laid over the wait. */
.t-queue__you{position:absolute;top:calc(var(--s3) * -1);bottom:calc(var(--s3) * -1);
  width:5px;background:var(--yellow);left:var(--at,38%);z-index:var(--z-raise)}
.t-queue__you::after{content:"YOU";position:absolute;top:calc(var(--s5) * -1);left:0;
  font:700 var(--size-micro)/1 var(--font);letter-spacing:var(--track-micro);
  color:var(--yellow)}

.t-facts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s7);margin-top:var(--s5)}
.t-facts > div{border-left:var(--rule-heavy) solid var(--primary);padding-left:var(--s3)}
.t-facts b{display:block;font:900 20px/1.1 var(--font);
  font-stretch:var(--wdth-condensed)}
.t-facts .t-micro{display:block;opacity:.8}

/* ----------------------------------------------------------------------------
   T3 , WAITLIST AS A TICKET STUB  (starred set-10 S10)
   The email capture IS the ticket. Measured off the starred shot: the body is
   cream inside a heavy black border, the stub is pink with a dashed perforation
   at the join, the label sits flush top-left, and the field and its button are
   one welded black-bordered unit with no gap between them.
   ---------------------------------------------------------------------------- */
.t-wait{max-width:var(--ticket-max);display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  border:var(--rule-heavy) solid var(--black);background:var(--cream);
  color:var(--black);position:relative;border-radius:var(--radius-slab)}
.t-wait__main{padding:var(--s5) var(--s6) var(--s6);min-width:0}
.t-wait__main .d-label{margin-bottom:var(--s4)}
.t-wait__h{font:900 clamp(26px,3.6vw,48px)/.95 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase;
  margin:0 0 var(--s3);max-width:16ch;padding-top:.12em;overflow:visible}
.t-wait__p{margin:0 0 var(--s5);font-size:var(--size-small);max-width:44ch;line-height:1.5}

/* the field and its button are ONE object: shared border, no gap. */
.t-field{display:flex;flex-wrap:wrap;max-width:520px}
.t-field label{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.t-field input{flex:1 1 220px;min-width:0;appearance:none;
  border:var(--rule-heavy) solid var(--black);border-radius:var(--radius-slab);
  background:var(--cream);color:var(--black);
  font:400 var(--size-body)/1 var(--font);padding:var(--s4);min-height:var(--tap-min)}
.t-field input::placeholder{color:var(--black);opacity:.45}
/* MEASURED, second pass: a NEGATIVE offset drew the ring inside the field's own
   3px border, where it was invisible, so the forced focus cell read identically
   to rest. The ring sits outside the border, which is also what the system's
   focus rule says: 3px solid, offset 3px. */
.t-field input:focus-visible,.t-field input.is-focus{
  outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}
.t-field input.is-error{background:var(--coral)}
.t-go{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s3);
  border:var(--rule-heavy) solid var(--black);border-left:0;
  border-radius:var(--radius-slab);background:var(--black);color:var(--cream);
  font:900 18px/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase;padding:0 var(--s5);min-height:var(--tap-min);
  transition:background var(--dur-state) var(--ease-out),
             color var(--dur-state) var(--ease-out)}
.t-go u-svg{width:32px;flex:none}
.t-go:hover,.t-go.is-hover{background:var(--primary);color:var(--black)}
.t-go:active,.t-go.is-active{transform:scale(.96,1.06)}
.t-go.is-focus{outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}
.t-go.is-disabled,.t-go[disabled]{opacity:.45;cursor:not-allowed}
/* MEASURED, second pass: at 390 the button wrapped under the field and sat as a
   short orphan block with a stray gap beside it. Wrapped, it takes the full width
   and re-welds to the field's bottom edge, so the two stay one object. */
@media(max-width:520px){
  .t-go{flex:1 0 100%;border-left:var(--rule-heavy) solid var(--black);
    border-top:0;justify-content:center}
}

/* the stub. Dashed perforation on the join, pink field, barcode, zone. */
.t-wait__stub{border-left:var(--rule-heavy) dashed var(--black);
  background:var(--primary);color:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s4);padding:var(--s5) var(--s3);text-align:center;
  transition:transform var(--dur-tear) var(--ease-verb-tear)}
.t-wait__stub p{margin:0;font:700 10px/1.6 var(--font);
  letter-spacing:var(--track-micro);text-transform:uppercase}
.t-bar{display:flex;gap:2px;height:52px;align-items:stretch}
.t-bar i{display:block;background:var(--black);width:3px}
.t-bar i:nth-child(3n){width:6px}
.t-bar i:nth-child(4n){width:2px}
.t-bar i:nth-child(5n){height:86%;align-self:flex-end}

/* TORN , the verb. The stub leaves along the perforation and the receipt lands. */
.t-wait.is-torn{overflow:visible}
.t-wait.is-torn .t-wait__stub{transform:translate(26%,8%) rotate(7deg);
  z-index:var(--z-raise);box-shadow:none}
.t-wait__done{position:absolute;inset:0 190px 0 0;display:none;
  background:var(--black);color:var(--cream);
  padding:var(--s6);align-content:center;gap:var(--s4)}
.t-wait.is-torn .t-wait__done{display:grid}
.t-wait__done p{margin:0;max-width:44ch}

@media(max-width:700px){
  .t-wait{grid-template-columns:1fr}
  .t-wait__stub{border-left:0;border-top:var(--rule-heavy) dashed var(--black);
    flex-direction:row;gap:var(--s5)}
  .t-wait.is-torn .t-wait__stub{transform:translate(8%,34%) rotate(4deg)}
  .t-wait__done{inset:0 0 132px 0}
}

/* ----------------------------------------------------------------------------
   T4 , THE TICKET TIER CARD, A FULL PERFORATED TICKET
   The ticket mockups are a body and a coloured stub with a barcode, so the tier
   card IS that object rather than a card with a price in it. Built on .d-stub's
   anatomy, widened for the included list.
   ---------------------------------------------------------------------------- */
.t-tiers{display:grid;gap:var(--s5);max-width:var(--ticket-max)}
.t-tkt{display:grid;grid-template-columns:minmax(0,1fr) 150px;
  border:var(--rule-heavy) solid var(--black);background:var(--cream);color:var(--black);
  border-radius:var(--radius-slab);position:relative;overflow:hidden}
.t-tkt__main{padding:var(--s5);min-width:0;display:grid;gap:var(--s3);align-content:start}
.t-tkt__top{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.t-tkt__t{margin:0;font:900 clamp(22px,2.6vw,36px)/.9 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase;
  padding-top:.12em;overflow:visible}
.t-tkt__price{font:900 22px/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase}
.t-inc{margin:0;padding:0;list-style:none;display:grid;gap:var(--s2)}
.t-inc li{display:flex;align-items:flex-start;gap:var(--s3);
  font-size:var(--size-small);line-height:1.45}
.t-inc li::before{content:"";flex:0 0 auto;width:14px;height:14px;margin-top:3px;
  background:var(--dc,var(--primary))}
.t-tkt__stub{border-left:var(--rule-heavy) dashed var(--black);
  background:var(--dc,var(--primary));color:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s3);padding:var(--s5) var(--s3);text-align:center}
.t-tkt__stub p{margin:0;font:700 10px/1.6 var(--font);
  letter-spacing:var(--track-micro);text-transform:uppercase}
.t-tkt--main{--dc:var(--stage-main)}
.t-tkt--grove{--dc:var(--stage-grove)}
.t-tkt--corner{--dc:var(--stage-corner)}

/* states, forced so they read still */
.t-tkt.is-low .d-label{background:var(--stage-corner)}
/* MEASURED, fifth pass: `opacity:.55` on the whole card dimmed lane C's stamp
   along with everything else, so the stamp rendered washed out and grey. The
   approved mechanism is the opposite: the STUB's copy drops back and the stamp
   stays vivid, because the stamp is the only thing that should read. So the
   dimming is applied to the card's own parts, never to the stamp's subtree. */
.t-tkt.is-sold > .t-tkt__main,
.t-tkt.is-sold > .t-tkt__stub{opacity:.55}
.t-tkt.is-sold{border-color:var(--hairline)}
.t-tkt.is-sold .t-tkt__t{text-decoration:line-through;text-decoration-thickness:var(--rule)}
.t-tkt.is-held .t-tkt__stub{background:transparent;
  box-shadow:inset 0 0 0 var(--rule) var(--hairline)}
.t-tkt.is-focus{outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}

/* THE SOLD OUT STAMP IS NOT DEFINED HERE.
   It is starred (set-03 A10, scored 87) and belongs to lane C, which ships it as
   `.c-sold__stamp` on a `.c-sold` wrapper. I had built a `.t-stamp` duplicate,
   which is exactly the redefinition LANES.md forbids; it is deleted and the tier
   card restates lane C's markup instead. Its angle is part of the approved
   mechanism ("stamps down over the stub at an angle"), so it stays as he
   starred it; the no-slanted-type ruling applies to my UNSTARRED parts, and
   none of those carries rotated type.

   MEASURED, fourth pass: lane C's `.c-sold` wrapper carries `max-width:420px`
   for its own flat card, so putting it on `.t-tkt` rendered the sold ticket at
   half the width of its siblings. The wrapper is NOT needed here: `.c-sold__stamp`
   only wants a positioned ancestor and the `.is-sold` flag to unhide it, and the
   ticket already is one. So the ticket takes `.is-sold` alone and hosts lane C's
   stamp element directly, with their drawing rule untouched. */
.t-tkt{position:relative}
.t-tkt.is-sold .c-sold__stamp{display:block}
/* it lands on the BODY's empty side, never over the stub's date or barcode:
   a stamp must not cover information. Lane C centres it on a card with no stub;
   this ticket has one, so the centre is nudged into the body. */
.t-tkt .c-sold__stamp{left:34%}
@media(max-width:700px){.t-tkt .c-sold__stamp{left:50%;top:30%}}

@media(max-width:700px){
  .t-tkt{grid-template-columns:1fr}
  .t-tkt__stub{border-left:0;border-top:var(--rule-heavy) dashed var(--black);
    flex-direction:row;gap:var(--s5)}
}

/* ----------------------------------------------------------------------------
   T5 , BASKET SUMMARY + STEPPER + PAYMENT PLAN + PROMO
   Restated markup, not redefined behaviour: the stepper and its chips come from
   controls.html. This is only the layout that holds them.
   ---------------------------------------------------------------------------- */
.t-basket{max-width:640px;border:var(--rule-heavy) solid var(--black);
  background:var(--cream);color:var(--black);border-radius:var(--radius-slab)}
.t-basket__row{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.t-basket > .t-basket__row:last-child{border-bottom:0}
.t-basket__row b{font:900 18px/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase}
.t-basket__row--total{background:var(--black);color:var(--cream)}
.t-basket__row--total b{font-size:24px}

.t-step{display:inline-flex;align-items:stretch;gap:var(--s3);align-items:center}
.t-step button{appearance:none;cursor:pointer;border:0;border-radius:var(--radius-slab);
  background:var(--black);color:var(--cream);
  width:var(--tap-min);height:var(--tap-min);
  font:900 22px/1 var(--font);font-stretch:var(--wdth-condensed);
  transition:transform var(--dur-squash) var(--ease-verb-squash)}
.t-step button:hover,.t-step button.is-hover{transform:scale(1.06,.92)}
.t-step button.is-focus{outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}
.t-step button.is-disabled,.t-step button[disabled]{opacity:.45;cursor:not-allowed}
.t-step output{min-width:2ch;text-align:center;
  font:900 26px/1 var(--font);font-stretch:var(--wdth-condensed)}
.t-chips{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}

.t-promo{display:flex;flex-wrap:wrap;max-width:420px;margin-top:var(--s4)}
.t-promo input{flex:1 1 180px;min-width:0;appearance:none;
  border:var(--rule-heavy) solid var(--black);border-radius:var(--radius-slab);
  background:var(--cream);color:var(--black);padding:var(--s3) var(--s4);
  font:400 var(--size-small)/1 var(--font);min-height:var(--tap-min)}
.t-promo input::placeholder{color:var(--black);opacity:.45}
.t-promo button{appearance:none;cursor:pointer;
  border:var(--rule-heavy) solid var(--black);border-left:0;
  border-radius:var(--radius-slab);background:var(--black);color:var(--cream);
  font:900 14px/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase;letter-spacing:.06em;padding:0 var(--s4);
  min-height:var(--tap-min)}
.t-promo button:hover{background:var(--primary);color:var(--black)}

/* ----------------------------------------------------------------------------
   T6 , CHECKOUT STEP INDICATOR
   The soundwave as progress, driven by UNION.wave meter mode: one drawn glyph per
   step, standing to its own level. Done steps stand full, the live one is in
   stage colour, the ones ahead sit low.
   ---------------------------------------------------------------------------- */
.t-steps{display:flex;align-items:flex-end;gap:var(--s2);flex-wrap:wrap;
  margin:0;padding:0;list-style:none;counter-reset:s}
.t-steps li{flex:1 1 130px;min-width:0;display:grid;gap:var(--s2);
  padding-top:var(--s3);border-top:var(--rule) solid currentColor;opacity:.4}
.t-steps li.is-done,.t-steps li.is-current{opacity:1}
.t-steps li.is-current{border-top-color:var(--primary)}
.t-steps__g{width:64px;height:auto;flex:none}
.t-steps__g svg{width:100%;height:auto;overflow:visible}
.t-steps li b{font:900 15px/1.1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase}
.t-steps li .t-micro{opacity:.75}

/* ----------------------------------------------------------------------------
   T7 , ORDER CONFIRMATION , the ticket itself
   ---------------------------------------------------------------------------- */
.t-conf{max-width:var(--ticket-max)}
.t-conf__wallet{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.t-wallet{appearance:none;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:var(--s3);
  border:var(--rule) solid currentColor;border-radius:var(--radius-slab);
  background:transparent;color:inherit;padding:var(--s3) var(--s5);
  min-height:var(--tap-min);
  font:900 14px/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase;letter-spacing:.06em;
  transition:background var(--dur-state) var(--ease-out),
             color var(--dur-state) var(--ease-out)}
.t-wallet:hover,.t-wallet.is-hover{background:var(--cream);color:var(--black)}
.t-wallet.is-focus{outline:var(--focus-width) solid var(--focus-colour-on-dark);
  outline-offset:var(--focus-offset)}
.t-wallet u-svg{width:26px;flex:none}

/* the confirmation's barcode ZONE: wide, printed, with its reference below it */
.t-zone{background:var(--cream);color:var(--black);
  border:var(--rule-heavy) solid var(--black);border-radius:var(--radius-slab);
  padding:var(--s5);display:grid;gap:var(--s3);justify-items:center;
  max-width:420px;margin-top:var(--s5)}
.t-zone .t-bar{height:78px;width:100%;justify-content:center}
.t-zone code{font:700 var(--size-micro)/1 var(--font);
  letter-spacing:var(--track-micro);background:none;padding:0}

/* ----------------------------------------------------------------------------
   T8 , THE PASS , lanyard style, from the VIP / ARTIST / BACKSTAGE mockups
   The one place pattern is allowed all over, because the strap is a physical
   object with a printed skin. The card itself keeps its pattern to ONE band.
   The mascot sits on pink or cream, never on the black card.
   ---------------------------------------------------------------------------- */
.t-passes{display:flex;gap:var(--s6);flex-wrap:wrap;align-items:stretch}
/* MEASURED, second pass: aspect-ratio forced the content out of the card at both
   widths (the mascot's legs crossed the foot rule and the stack mark landed under
   the foot text). The card now sizes to its content and the FACE carries the
   ratio instead, so the proportion is kept without clipping anything. */
.t-pass{width:260px;max-width:100%;flex:none;display:flex;flex-direction:column;
  border:var(--rule-heavy) solid var(--black);border-radius:var(--radius-slab);
  background:var(--cream);color:var(--black)}
/* the punch slot at the top, the thing that makes it a pass and not a card.
   It sits INSIDE the band's breathing room rather than taking a row of its own. */
.t-pass__punch{flex:none;display:flex;align-items:center;justify-content:center;
  padding:var(--s3) 0}
.t-pass__punch::before{content:"";width:64px;height:9px;background:var(--black);
  border-radius:var(--radius-round)}
.t-pass__band{background:var(--dc,var(--primary));color:var(--black);
  padding:var(--s3) var(--s4) var(--s4);text-align:center;margin:0;
  font:900 clamp(20px,2.4vw,30px)/1 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase}
.t-pass__band small{display:block;font:700 10px/1.6 var(--font);
  letter-spacing:var(--track-micro);margin-top:var(--s2);font-stretch:normal}
/* the face carries the pass's proportion and CLIPS nothing: the mark is sized to
   sit inside it with room, measured rather than guessed. */
.t-pass__face{flex:1 1 auto;display:grid;place-items:center;padding:var(--s5);
  aspect-ratio:1;min-height:0}
.t-pass__face .d-mascot{width:min(150px,86%)}
.t-pass__face > u-svg{width:min(150px,80%)}
.t-pass__foot{padding:var(--s3) var(--s4);border-top:1px solid var(--hairline);
  font:700 10px/1.6 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase;text-align:center;margin:0}
.t-pass--vip{--dc:var(--stage-main)}
.t-pass--artist{--dc:var(--stage-grove)}
.t-pass--crew{--dc:var(--stage-corner)}
/* the black pass: the card is dark, so the mascot does NOT go on it. The face
   carries the wordmark instead, and the mascot stays on the pink band variants. */
.t-pass--night{background:var(--black);color:var(--cream)}
.t-pass--night .t-pass__face u-svg{width:70%}
.t-pass--night .t-pass__punch::before{background:var(--cream)}

/* The strap. Pattern all over is allowed here, and ONLY here on this page,
   because a lanyard is a printed physical object and the brief names that as the
   exception.

   MEASURED, second pass: .pattern-slot__run is a HORIZONTAL flex row, so in a
   64px-wide column it laid one stroke out sideways and the rest fell off the
   edge; the render showed a single stump floating beside the cards. The strap
   turns the run vertical and keeps the slot's own Y fade, so the print runs the
   length of the webbing and dissolves at both ends instead of being cut. */
.t-strap{width:58px;flex:none;align-self:stretch;min-height:320px;
  border:var(--rule) solid var(--black);border-radius:var(--radius-slab);
  background:var(--black);overflow:hidden;
  --pattern-fade:5%}
.t-strap .pattern-slot{height:100%}
.t-strap .pattern-slot__run{flex-direction:column;justify-content:center;
  left:0;right:0;top:auto;bottom:auto;height:auto}
.t-strap .pattern-slot__run u-svg{width:100%;margin-right:0;margin-bottom:-18px}
.t-strap .pattern-slot__run u-svg:nth-child(4n+1){width:82%;transform:translateX(-8%) rotate(-12deg)}
.t-strap .pattern-slot__run u-svg:nth-child(4n+2){width:104%;transform:translateX(6%) rotate(8deg)}
.t-strap .pattern-slot__run u-svg:nth-child(4n+3){width:90%;transform:translateX(10%) rotate(-6deg)}
.t-strap .pattern-slot__run u-svg:nth-child(4n){width:112%;transform:translateX(-6%) rotate(14deg)}

@media(max-width:700px){
  .t-pass{width:100%;max-width:260px}
  .t-strap{display:none}
}

/* ----------------------------------------------------------------------------
   T9 , FACT ROWS, NOTICES, COUNTDOWN
   Entry policy, refunds and resale. Plain on purpose: this is information someone
   needs, so no display pair, no pattern, nothing cream on coral.
   ---------------------------------------------------------------------------- */
.t-rows{max-width:var(--ticket-max);border-top:var(--rule) solid currentColor}
.t-row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:var(--s3) var(--s5);padding:var(--s4) 0;
  border-bottom:1px solid var(--hairline)}
.t-row dt{margin:0;font:700 var(--size-micro)/1.35 var(--font);
  letter-spacing:var(--track-micro);text-transform:uppercase;opacity:.75}
.t-row dd{margin:0;font-size:var(--size-small);line-height:1.5;max-width:60ch}
@media(max-width:700px){.t-row{grid-template-columns:1fr;gap:var(--s2)}}

/* the countdown, as flat turning blocks. No WebGL, no 3D: the brief allows the
   flat flip and this is a money surface, so legibility wins over the trick. */
.t-count{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:flex-end}
.t-count div{display:grid;gap:var(--s2);justify-items:center}
.t-count b{display:grid;place-items:center;min-width:86px;padding:var(--s3) var(--s4);
  background:var(--black);color:var(--cream);border-radius:var(--radius-slab);
  font:900 clamp(30px,4vw,54px)/1 var(--font);font-stretch:var(--wdth-condensed);
  font-variant-numeric:tabular-nums}
.t-count .t-micro{opacity:.75}

/* a notice, black on yellow where it is a warning someone must not miss */
.t-notice{display:flex;gap:var(--s4);align-items:flex-start;
  background:var(--care);color:var(--black);padding:var(--s4) var(--s5);
  border-radius:var(--radius-slab);max-width:var(--ticket-max)}
.t-notice p{margin:0;font-size:var(--size-small);line-height:1.5;max-width:60ch}
.t-notice .d-wave{flex:none}

/* small shared helper: a row of state cells needs the dark treatment inline */
.t-onblack{background:var(--black);color:var(--cream)}