/* ===========================================================
   THE REDEMPTION TOUR — vintage gig-poster design system
   =========================================================== */

:root{
  --wall:    #15110c;
  --wall-2:  #1d1810;
  --paper:   #efe3cc;
  --paper-2: #e7d8b9;
  --paper-3: #ddc9a3;
  --ink:     #1b1611;
  --ink-soft:#4a3f31;
  --red:     #cf3a22;
  --red-dk:  #a82a16;
  --gold:    #c2901f;
  --teal:    #1f6f68;
  --line:    #2a2118;
  --shadow:  rgba(10,7,3,.55);

  --f-display: 'Anton', 'Arial Narrow', sans-serif;
  --f-type:    'Special Elite', 'Courier New', monospace;
  --f-script:  'Caveat', cursive;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(120% 90% at 50% -10%, #241d14 0%, var(--wall) 55%, #0e0b07 100%);
  color:var(--ink);
  font-family:var(--f-type);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}

/* film-grain + halftone overlays applied app-wide */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.06; mix-blend-mode:multiply;
}
.vignette{
  position:fixed; inset:0; z-index:8999; pointer-events:none;
  box-shadow: inset 0 0 220px 60px rgba(0,0,0,.7);
}

/* ---------- shared paper surface ---------- */
.paper{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.05)),
    var(--paper);
  color:var(--ink);
}
.paper::after{
  /* paper fiber / foxing speckle */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(120,90,40,.10) 0 1px, transparent 1px),
    radial-gradient(circle at 78% 62%, rgba(120,90,40,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 42% 88%, rgba(120,90,40,.07) 0 1px, transparent 1px);
  background-size:140px 140px, 90px 90px, 160px 160px;
  opacity:.7; mix-blend-mode:multiply;
}

/* halftone helper */
.halftone{
  background-image:radial-gradient(var(--ink) 1.1px, transparent 1.2px);
  background-size:6px 6px;
}

/* ---------- type helpers ---------- */
.display{ font-family:var(--f-display); font-weight:400; line-height:.86;
  letter-spacing:.01em; text-transform:uppercase; }
.script{ font-family:var(--f-script); font-weight:700; line-height:.9; }
.type{ font-family:var(--f-type); }
.tracked{ letter-spacing:.34em; text-transform:uppercase; }
.tracked-sm{ letter-spacing:.22em; text-transform:uppercase; }

/* a rule with a centered word */
.rule-word{
  display:flex; align-items:center; gap:14px;
  text-transform:uppercase; letter-spacing:.3em; font-size:12px;
}
.rule-word::before,.rule-word::after{
  content:""; height:2px; background:var(--ink); flex:1; opacity:.8;
}

/* ===========================================================
   STAGE / SCALING
   =========================================================== */
#root{ position:relative; z-index:1; }
.stage{
  min-height:100vh; width:100%;
  display:flex; align-items:flex-start; justify-content:center;
  padding:46px 20px 80px;
}

/* ===========================================================
   TOP MARQUEE TICKER
   =========================================================== */
.ticker{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  background:var(--ink); color:var(--paper);
  border-bottom:2px solid var(--gold);
  overflow:hidden; white-space:nowrap;
  font-family:var(--f-type); font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; height:30px; display:flex; align-items:center;
}
.ticker__track{ display:inline-flex; gap:0; will-change:transform;
  animation:marq 32s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__track span{ padding:0 26px; }
.ticker__track span b{ color:var(--gold); font-weight:400; }
@keyframes marq{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ===========================================================
   POSTER (hero)
   =========================================================== */
.poster{
  width:100%; max-width:780px; margin-top:24px;
  border:3px solid var(--ink);
  box-shadow:0 30px 70px -20px var(--shadow), 0 4px 0 var(--gold);
  padding:30px 30px 26px;
}
.poster__frame{ border:2px solid var(--ink); padding:26px 26px 22px; position:relative; }
.poster__tape{
  position:absolute; width:120px; height:30px; background:rgba(207,180,120,.45);
  border:1px dashed rgba(80,60,20,.4);
  top:-16px; transform:rotate(-4deg); left:50%; margin-left:-60px;
  backdrop-filter:blur(1px);
}

.presents{ text-align:center; color:var(--ink-soft); margin-bottom:6px; }
.poster__kicker{ text-align:center; font-size:13px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--red); margin:10px 0 4px; }

.poster__title{ text-align:center; position:relative; }
.poster__title .l1{ font-size:clamp(56px,15vw,128px); color:var(--ink); display:block; }
.poster__title .l1 em{ font-style:normal; color:var(--red);
  -webkit-text-stroke:0; }
.poster__amp{ display:block; font-family:var(--f-script); color:var(--gold);
  font-size:clamp(30px,7vw,56px); line-height:.5; margin:2px 0; }
.poster__script{
  position:relative; text-align:center; color:var(--red);
  font-family:var(--f-script); font-weight:700;
  font-size:clamp(48px,13vw,108px); line-height:.8; margin:-6px 0 2px;
  transform:rotate(-3deg);
}
.poster__script::after{
  content:""; display:block; width:48%; height:3px; background:var(--gold);
  margin:2px auto 0; border-radius:2px; transform:rotate(.4deg);
}

/* headliner photo */
.headliner{
  position:relative; margin:20px auto 8px; width:min(380px,82%);
  border:3px solid var(--ink); background:var(--ink);
  box-shadow:6px 6px 0 var(--gold);
}
.headliner img{ display:block; width:100%; aspect-ratio:3/4; height:auto;
  object-fit:cover; object-position:center top; filter:contrast(1.06) saturate(1.05); }
.headliner__tab{
  position:absolute; top:-3px; left:-3px; background:var(--red); color:var(--paper);
  font-family:var(--f-display); font-size:15px; letter-spacing:.14em;
  padding:6px 14px; text-transform:uppercase;
}
.headliner__name{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(0deg, rgba(0,0,0,.82), transparent);
  color:var(--paper); font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(26px,6vw,42px); letter-spacing:.02em; padding:34px 14px 10px;
  text-align:center; line-height:.9;
}
.headliner__name small{ display:block; font-family:var(--f-type);
  font-size:12px; letter-spacing:.3em; color:var(--gold); margin-top:4px; }

.poster__venue{ text-align:center; margin:18px 0 6px; }
.poster__venue .city{ font-family:var(--f-display); font-size:clamp(26px,6vw,40px);
  text-transform:uppercase; letter-spacing:.02em; }
.poster__dates{ text-align:center; font-family:var(--f-display);
  font-size:clamp(34px,9vw,62px); color:var(--ink); letter-spacing:.04em; }
.poster__dates .yr{ color:var(--red); }
.poster__dates .dot{ color:var(--gold); }

.quotes{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px;
  margin:14px 0 6px; font-size:12.5px; color:var(--ink-soft); text-align:center; }
.quotes b{ color:var(--ink); }
.stars{ color:var(--gold); letter-spacing:2px; }

.poster__finefooter{ text-align:center; font-size:11px; letter-spacing:.06em;
  color:var(--ink-soft); margin-top:16px; line-height:1.5; }

/* big stamp CTA */
.cta-stamp{
  display:block; margin:18px auto 6px; cursor:pointer; border:none;
  background:var(--red); color:var(--paper);
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(22px,5vw,34px); letter-spacing:.06em;
  padding:16px 30px; position:relative;
  box-shadow:5px 5px 0 var(--ink); transition:transform .08s, box-shadow .08s;
}
.cta-stamp:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.cta-stamp:active{ transform:translate(4px,4px); box-shadow:1px 1px 0 var(--ink); }

/* ===========================================================
   GENERIC PANEL (dates / rider / ticket screens)
   =========================================================== */
.panel{ width:100%; max-width:920px; margin-top:24px; }
.panel__head{ text-align:center; margin-bottom:8px; }
.panel__step{ color:var(--gold); font-size:12px; letter-spacing:.34em;
  text-transform:uppercase; }
.panel__title{ font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(34px,8vw,64px); line-height:.92; margin:6px 0 4px; }
.panel__title em{ font-style:normal; color:var(--red); }
.panel__sub{ color:var(--ink-soft); max-width:540px; margin:0 auto;
  font-size:14px; line-height:1.5; }
.panel.paper{ padding:30px 26px 28px; border:3px solid var(--ink);
  box-shadow:0 30px 70px -20px var(--shadow), 0 4px 0 var(--gold); }

/* nav buttons */
.navrow{ display:flex; justify-content:space-between; align-items:center;
  gap:14px; margin-top:24px; }
.btn{ font-family:var(--f-display); text-transform:uppercase; cursor:pointer;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink);
  letter-spacing:.06em; font-size:18px; padding:12px 22px;
  box-shadow:4px 4px 0 var(--ink); transition:transform .08s, box-shadow .08s, opacity .15s; }
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.btn--red{ background:var(--red); color:var(--paper); border-color:var(--ink); }
.btn--ghost{ background:transparent; box-shadow:none; border:none;
  color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--gold); font-family:var(--f-type);
  letter-spacing:.04em; font-size:13px; padding:8px 6px; opacity:.85; }
.btn--ghost:hover{ transform:none; color:var(--red); opacity:1; }
/* On the dark-wall panels (no .paper surface), light the ghost button up */
.panel:not(.paper) .btn--ghost{ color:var(--paper); }
.panel:not(.paper) .btn--ghost:hover{ color:var(--gold); }
.btn:disabled{ opacity:.35; cursor:not-allowed; transform:none;
  box-shadow:4px 4px 0 var(--ink); }
.btn--big{ font-size:24px; padding:16px 30px; }

/* ===========================================================
   DATE CARDS
   =========================================================== */
.nights{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px; }
@media(max-width:760px){ .nights{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:440px){ .nights{ grid-template-columns:1fr; } }
.night{
  position:relative; text-align:center; cursor:pointer; background:var(--paper-2);
  border:2px solid var(--ink); padding:0 0 18px; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:4px 4px 0 rgba(27,22,17,.25);
}
.night:hover{ transform:translateY(-6px) rotate(-.6deg);
  box-shadow:8px 12px 0 rgba(27,22,17,.3); }
.night--on{ background:var(--paper); box-shadow:6px 6px 0 var(--red);
  transform:translateY(-4px); border-color:var(--red); }
.night--preferred{ border-color:var(--gold); }
.night--preferred.night--on{ border-color:var(--red); }
.night__pref-badge{ position:absolute; top:8px; left:8px; z-index:5;
  background:var(--gold); color:var(--ink); font-size:9px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:3px 7px;
  border:1px solid var(--ink); box-shadow:2px 2px 0 rgba(27,22,17,.3); }
.night__top{ background:var(--ink); color:var(--paper); padding:10px 8px 8px;
  position:relative; }
.night--on .night__top{ background:var(--red); }
.night__no{ font-family:var(--f-display); font-size:13px; letter-spacing:.3em; }
.night__day{ font-family:var(--f-display); font-size:30px; letter-spacing:.04em;
  text-transform:uppercase; line-height:1; }
.night__perf{ height:14px; background:
  radial-gradient(circle at 7px 50%, var(--wall) 0 4px, transparent 4.5px) 0 0/14px 14px repeat-x;
  margin:0 -2px; }
.night__bignum{ font-family:var(--f-display); font-size:64px; line-height:.9;
  margin:12px 0 0; }
.night__mon{ font-size:12px; letter-spacing:.34em; color:var(--ink-soft);
  text-transform:uppercase; }
.night__bill{ font-family:var(--f-script); font-size:30px; color:var(--red);
  line-height:.9; margin:10px 6px 2px; }
.night__tag{ font-size:12px; color:var(--ink-soft); padding:0 14px; line-height:1.4;
  min-height:84px; }
.night__demand{ font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:8px; }
.night__bar{ height:7px; width:74%; margin:5px auto 0; background:var(--paper-3);
  border:1px solid var(--ink); position:relative; overflow:hidden; }
.night__bar i{ position:absolute; inset:0 auto 0 0; background:var(--red); }
.night__pick{ position:absolute; top:8px; right:8px; width:22px; height:22px;
  border-radius:50%; border:2px solid var(--paper); }
.night--on .night__pick{ background:var(--paper); box-shadow:inset 0 0 0 4px var(--red); }

/* ===========================================================
   RIDER (contract)
   =========================================================== */
.rider{ background:var(--paper); }
.rider__doc{ border:2px solid var(--ink); padding:22px 22px 8px; margin-top:14px;
  background:repeating-linear-gradient(180deg, transparent 0 30px, rgba(80,60,20,.05) 30px 31px); }
.rider__field{ display:flex; align-items:flex-end; gap:10px; margin-bottom:18px;
  flex-wrap:wrap; }
.rider__field label{ font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); }
.rider__field input{ flex:1; min-width:200px; font-family:var(--f-script);
  font-size:30px; color:var(--red); background:transparent; border:none;
  border-bottom:2px solid var(--ink); padding:0 6px 2px; outline:none; }
.rider__field input::placeholder{ color:rgba(160,120,60,.5); }
.rider__cue{ font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); opacity:.8; margin:0 0 4px; }

.clause{ display:flex; gap:14px; padding:12px 0; border-top:1px dashed rgba(60,45,20,.4);
  cursor:pointer; align-items:flex-start; }
.clause:last-of-type{ border-bottom:1px dashed rgba(60,45,20,.4); }
.clause__box{ flex:none; width:26px; height:26px; border:2px solid var(--ink);
  background:var(--paper); display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); color:var(--red); font-size:22px; margin-top:1px;
  transition:transform .1s, box-shadow .1s, background .1s; }
.clause:hover .clause__box{ box-shadow:3px 3px 0 var(--red); transform:translate(-1px,-1px); }
.clause--on .clause__box{ background:var(--ink); transform:rotate(-4deg); box-shadow:none; }
.clause--on .clause__box::after{ content:"✓"; color:var(--gold); }
.clause__txt{ font-size:13.5px; line-height:1.5; }
.clause__txt b{ color:var(--red); }

.perks{ margin-top:22px; border:2px dashed var(--ink); padding:18px 20px;
  background:var(--paper-2); }
.perks h4{ font-family:var(--f-display); text-transform:uppercase; margin:0 0 4px;
  font-size:22px; letter-spacing:.06em; }
.perks h4 span{ color:var(--gold); }
.perks ul{ list-style:none; margin:8px 0 0; padding:0; }
.perks li{ position:relative; padding:7px 0 7px 30px; font-size:13.5px; line-height:1.45;
  border-bottom:1px dotted rgba(60,45,20,.3); }
.perks li:last-child{ border-bottom:none; }
.perks li::before{ content:"★"; position:absolute; left:4px; top:7px; color:var(--red); }

.agree-note{ text-align:center; font-size:12px; color:var(--ink-soft);
  margin-top:14px; min-height:18px; }
.agree-note.warn{ color:var(--red); }

/* ===========================================================
   TICKET STUB
   =========================================================== */
.ticket-wrap{ perspective:1400px; margin-top:6px; }
.confirm-banner{ text-align:center; margin-bottom:14px; }
.confirm-banner .script{ color:var(--gold); font-size:clamp(40px,9vw,72px); display:block;
  line-height:.8; }
.confirm-banner p{ color:var(--paper); margin:6px 0 0; font-size:13px; letter-spacing:.06em; }

.ticket{
  display:grid; grid-template-columns:1fr 200px; background:var(--paper);
  border:3px solid var(--ink); box-shadow:0 30px 60px -16px #000, 8px 8px 0 var(--gold);
  position:relative; overflow:hidden; animation:ticketIn .6s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes ticketIn{ from{ transform:translateY(40px) rotate(-2deg); opacity:0; } }
@media(max-width:620px){ .ticket{ grid-template-columns:1fr; } }

.ticket__main{ padding:22px 24px 20px; position:relative; }
.ticket__top{ display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom:2px solid var(--ink); padding-bottom:10px; gap:10px; }
.ticket__brand{ font-family:var(--f-display); text-transform:uppercase; line-height:.86;
  font-size:26px; }
.ticket__brand em{ font-style:normal; color:var(--red); }
.ticket__brand small{ display:block; font-family:var(--f-script); color:var(--gold);
  font-size:30px; line-height:.6; }
.ticket__admit{ text-align:right; }
.ticket__admit .big{ font-family:var(--f-display); font-size:22px; }
.ticket__admit .sm{ font-size:10px; letter-spacing:.2em; color:var(--ink-soft); }

.ticket__body{ display:grid; grid-template-columns:96px 1fr; gap:16px; margin-top:14px; align-items:center;}
.ticket__photo{ width:96px; height:96px; border:2px solid var(--ink); object-fit:cover;
  box-shadow:3px 3px 0 var(--red); }
.tgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 16px; }
.tcell label{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); display:block; }
.tcell .v{ font-family:var(--f-display); text-transform:uppercase; font-size:19px;
  line-height:1; margin-top:2px; }
.tcell .v.red{ color:var(--red); }
.tcell .v.sm{ font-size:15px; }

.ticket__perksline{ margin-top:14px; padding-top:10px; border-top:1px dashed rgba(60,45,20,.5);
  font-size:11px; color:var(--ink-soft); line-height:1.5; }
.ticket__perksline b{ color:var(--ink); }

.ticket__order{ display:flex; justify-content:space-between; align-items:center;
  margin-top:12px; font-size:10px; letter-spacing:.12em; color:var(--ink-soft); }

/* perforation + stub */
.ticket__stub{ position:relative; background:var(--ink); color:var(--paper);
  padding:18px 14px; display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; text-align:center; }
.ticket__stub::before{ /* perforation line */
  content:""; position:absolute; left:-1px; top:0; bottom:0; width:2px;
  background:radial-gradient(circle at 1px 6px, var(--paper) 0 2.4px, transparent 2.8px) 0 0/2px 13px repeat-y; }
@media(max-width:620px){
  .ticket__stub::before{ left:0; right:0; top:-1px; bottom:auto; width:auto; height:2px;
    background:radial-gradient(circle at 6px 1px, var(--paper) 0 2.4px, transparent 2.8px) 0 0/13px 2px repeat-x; }
}
.stub__no{ font-family:var(--f-display); font-size:13px; letter-spacing:.2em;
  color:var(--gold); }
.stub__seat{ font-family:var(--f-display); font-size:24px; line-height:.9; text-transform:uppercase; }
.stub__seat .red{ color:var(--red); }
.barcode{ display:flex; gap:2px; height:54px; align-items:stretch; margin:6px 0; }
.barcode i{ width:2px; background:var(--paper); }
.stub__scan{ font-size:9px; letter-spacing:.16em; color:rgba(239,227,204,.6); }

/* SOLD OUT stamp overlay */
.soldout{ position:absolute; top:50%; left:50%; z-index:30;
  transform:translate(-50%,-50%) rotate(-16deg) scale(1.4); opacity:0;
  border:6px double var(--red); color:var(--red); padding:8px 22px 6px;
  font-family:var(--f-display); font-size:46px; letter-spacing:.1em;
  text-transform:uppercase; pointer-events:none;
  text-shadow:0 0 1px var(--red); border-radius:6px;
  background:rgba(239,227,204,.04);
  display:flex; flex-direction:column; align-items:center; line-height:.95; }
.soldout__kicker{ font-family:var(--f-type); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; opacity:.85; margin-bottom:4px; white-space:nowrap; }
.soldout.show{ animation:stampIn .5s cubic-bezier(.2,1.6,.4,1) .2s both; }
@keyframes stampIn{ 0%{opacity:0; transform:translate(-50%,-50%) rotate(-16deg) scale(2.6);}
  100%{opacity:.92; transform:translate(-50%,-50%) rotate(-16deg) scale(1);} }

.screenshot-hint{ text-align:center; color:var(--paper); font-size:12px;
  letter-spacing:.12em; margin:16px 0 2px; opacity:.85; }

/* confetti */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:8500; overflow:hidden; }
.confetti i{ position:absolute; top:-20px; width:9px; height:14px;
  animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(108vh) rotate(720deg); opacity:.9; } }

/* fade/slide transitions between screens */
.screen-enter{ animation:screenIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes screenIn{ from{ opacity:0; transform:translateY(18px) scale(.99); } }

/* tiny helper */
.center{ text-align:center; }
.mt8{ margin-top:8px; } .mt16{ margin-top:16px; } .mt24{ margin-top:24px; }

/* ===========================================================
   MOBILE-FIRST REFINEMENTS
   =========================================================== */
.soldout{ font-size:clamp(30px,11vw,46px); }

@media(max-width:620px){
  .stage{ padding:42px 12px 64px; }
  .poster{ padding:16px 14px 16px; margin-top:14px;
    box-shadow:0 18px 44px -18px var(--shadow), 0 3px 0 var(--gold); }
  .poster__frame{ padding:18px 12px 14px; }
  .poster__tape{ width:96px; }
  .presents{ font-size:10px; letter-spacing:.18em; }
  .rule-word{ letter-spacing:.16em; gap:8px; }
  .poster__kicker{ font-size:11px; letter-spacing:.2em; }
  .headliner{ width:min(320px,90%); }
  .headliner img{ aspect-ratio:4/5; }
  .quotes{ font-size:11.5px; }
  .poster__finefooter{ font-size:10px; }

  .panel{ margin-top:14px; }
  .panel.paper{ padding:20px 14px 22px; }
  .panel__sub{ font-size:13px; }
  .rider__doc{ padding:16px 13px 4px; }
  .rider__field input{ font-size:26px; min-width:160px; }
  .clause__txt{ font-size:13px; }
  .clause__box{ width:24px; height:24px; }
  .perks{ padding:14px 14px; }
  .perks h4{ font-size:19px; }
  .perks li{ font-size:12.5px; }

  .ticker{ font-size:10px; height:28px; }

  .btn{ font-size:16px; padding:11px 15px; box-shadow:3px 3px 0 var(--ink); }
  .btn--big{ font-size:18px; padding:14px 18px; }
  .btn--ghost{ font-size:12px; }
  .navrow{ gap:10px; }

  .confirm-banner p{ font-size:12px; }
  .ticket__main{ padding:18px 15px 16px; }
  .ticket__brand{ font-size:22px; }
  .ticket__brand small{ font-size:26px; }
  .ticket__admit .big{ font-size:18px; }
  .ticket__order{ font-size:9px; gap:6px; flex-wrap:wrap; }
  .ticket__stub{ padding:16px 12px; flex-direction:row; flex-wrap:wrap;
    justify-content:space-around; gap:10px; }
}

/* phones: stack ticket holder block, keep details readable */
@media(max-width:400px){
  .ticket__body{ grid-template-columns:1fr; justify-items:center; gap:12px; }
  .ticket__photo{ width:104px; height:104px; }
  .tgrid{ width:100%; gap:9px 14px; }
  .night__bignum{ font-size:56px; }
}