/* ==========================================================================
   Jubin Nautiyal UK Tour 2026 - jubinlive.com

   Direction: "the lit programme". The ground is a dark hall - espresso with a
   warm pool of light and a ghosted crop of the poster's OWN London skyline.
   The signup panel is warm PAPER, a recital programme held in that hall. Every
   colour below is sampled from the client artwork, not invented: the accent is
   the gold velvet armchair (#DDA241), the red is the brush "UK TOUR" lettering.

   Signature: the two show cards fill with gold button-tufted velvet when
   selected - the chair, rebuilt in CSS gradients.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS */
:root {
  /* ground */
  --ink:        #17110E;   /* poster's deepest shadow, warmed */
  --ink-2:      #241C17;   /* raised ground */
  --ink-line:   rgba(221, 162, 65, 0.20);

  /* paper (the panel) */
  --paper:      #EDE4D7;   /* the poster's lit floor */
  --paper-2:    #E4D8C7;   /* field wells - OPAQUE, see the autofill rule */
  --line:       #C9B8A0;
  --sepia:      #5E4E40;   /* secondary ink on paper */

  /* accent */
  --gold:       #DDA241;   /* THE CHAIR - the only chroma on the page */
  --gold-hi:    #F2C674;
  --gold-lo:    #C98F31;
  --red:        #9F0403;   /* the "UK TOUR" brush red - errors only */

  /* footer ink (sits on the dark ground, not on paper) */
  --muted:      #A2907E;

  /* Rajdhani stands in for Agency FB (which is commercial, Font Bureau). It is
     the closest OFL match to the trait that actually defines Agency: SQUARED
     bowls on a narrow, uniform-stroke, technical skeleton - compare the "o" in
     "London". One family carries both display and label roles here, which is
     how Agency FB is deployed in the wild, and it keeps two condensed sans
     faces from fighting each other. Weights shipped: 500 / 600 / 700. */
  --disp: "Rajdhani", "Helvetica Neue Condensed Bold", "Arial Narrow", sans-serif;
  --util: "Rajdhani", "Helvetica Neue Condensed Bold", "Arial Narrow", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --radius: 14px;
}

@font-face {
  font-family: "Rajdhani";
  src: url("/assets/fonts/Rajdhani-500.woff2?v=20260813-1") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("/assets/fonts/Rajdhani-600.woff2?v=20260813-1") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("/assets/fonts/Rajdhani-700.woff2?v=20260813-1") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing: border-box; }

/* The UA stylesheet's [hidden] rule is display:none at the LOWEST specificity,
   so any class that sets display beats it and the element shows anyway.
   .countdown__live{display:flex} would do exactly that - "Presale is live"
   six days early - and the same collision would stop the clock hiding when
   the plate seals. Keep this ABOVE everything that sets display, and never
   remove it. */
[hidden] { display: none !important; }

/* The base colour lives on html, NEVER on body: an opaque body paints over
   the z-index:-1 .bg layer and the whole page goes flat. */
html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100svh;
  background: transparent;
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
button { font: inherit; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
/* Honeypot: display:none, never off-screen positioning - Chrome and Edge
   autofill off-screen fields and then every real signup is silently dropped. */
.hp-row { display: none !important; }

/* ------------------------------------------------------------------- BG */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--ink);
  /* Plain url(), NOT image-set(): image-set with a type() hint is still too
     new, and an unparsed image-set invalidates the WHOLE background-image
     declaration - which would take the two gradients down with it and leave a
     flat brown page. WebP alone is safe everywhere back to Safari 14. */
  background-image:
    /* the poster's own skyline, ghosted - Eye, Tower Bridge, the river */
    url("/assets/images/haze-1200.webp?v=20260813-1"),
    /* warm pool of light, sitting behind the poster column */
    radial-gradient(90% 70% at 34% 42%, rgba(160, 108, 38, 0.42) 0%, rgba(160, 108, 38, 0) 62%),
    linear-gradient(168deg, var(--ink-2) 0%, var(--ink) 58%, #100B09 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: min(1200px, 78vw) auto, 100% 100%, 100% 100%;
  background-position: right -4vw bottom -2vh, center, center;
}
/* the phone never needs the 1200px crop - same picture, a third of the bytes */
@media (max-width: 760px) {
  .bg {
    background-image:
      url("/assets/images/haze-720.webp?v=20260813-1"),
      radial-gradient(105% 55% at 50% 30%, rgba(160, 108, 38, 0.40) 0%, rgba(160, 108, 38, 0) 64%),
      linear-gradient(168deg, var(--ink-2) 0%, var(--ink) 58%, #100B09 100%);
    background-size: 128vw auto, 100% 100%, 100% 100%;
    background-position: center bottom -1vh, center, center;
  }
}
/* fine grain so the flat gradients never band on wide screens */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------------------------- SHELL */
.sheet {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 44px) clamp(14px, 4vw, 40px);
}
.stage__inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 4vw, 46px);
  justify-items: center;
}

/* --------------------------------------------------------------- POSTER */
.poster {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.poster__art {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  /* a print on a wall: warm halo above, hard shadow below. Static, not a
     filter:drop-shadow - that recomputes from aliased alpha and haloes. */
  box-shadow:
    0 0 0 1px rgba(221, 162, 65, 0.24),
    0 26px 60px -18px rgba(0, 0, 0, 0.78),
    0 4px 14px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------- PANEL */
.signup { width: 100%; display: flex; justify-content: center; }
.panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  /* isolate + explicit stacking so nothing (least of all the country
     dropdown) can end up behind a decorative layer */
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(23, 17, 14, 0.10),
    0 30px 70px -22px rgba(0, 0, 0, 0.80);
}
/* a hairline gold edge, drawn as an inset shadow rather than a positioned
   pseudo-element - a positioned frame stacks above the form children and
   makes the flag dropdown unclickable */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(221, 162, 65, 0.35);
}
.panel__inner {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 4.4vw, 36px);
}
.panel__state { display: none; }
.panel[data-form-state="idle"]    .panel__idle    { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; }

.panel__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--util);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold-lo);
}
.panel__eyebrow-hair {
  display: block;
  width: 30px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--gold);
}
.panel__title {
  margin: 0 0 12px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(2.5rem, 6.6vw, 3.45rem);
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--ink);
  /* balance, never nowrap - a nowrap display title longer than the panel
     reads as "off-centre" at the max clamp */
  text-wrap: balance;
}
/* Rajdhani ships upright only. Left as italic the browser synthesises an
   oblique by shearing the glyphs, which on a narrow squared face bows the
   flat sides and reads as a rendering fault. The second line is distinguished
   by colour instead. */
.panel__title em {
  font-style: normal;
  color: var(--gold-lo);
}
.panel__lede {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sepia);
}
.panel__lede strong { color: var(--ink); font-weight: 600; }
.panel__success-note {
  margin: 0 0 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(221, 162, 65, 0.16);
  border: 1px solid rgba(221, 162, 65, 0.5);
  font-size: 14.5px;
  color: var(--ink);
}
/* state-scoped p rules would otherwise out-specify .panel__eyebrow and
   blow up its size/weight in the success state */
.panel__success p:not(.panel__eyebrow):not(.panel__success-note) { color: var(--sepia); }

/* ------------------------------------------------- PRESALE COUNTDOWN
   The fleet's usual countdown plate is dark glass; this panel is paper, so
   it is inverted - a recessed --paper-2 well (the same field colour as the
   inputs below it) with gold hairlines and ink numerals. It reads as a
   stamped panel on the programme rather than a widget dropped on top.

   Numerals are tabular so the plate does not jitter each second. */
.countdown { margin: 0 0 20px; }
.countdown__label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 9px;
}
.countdown__label-text {
  font-family: var(--util);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-lo);
}
.countdown__when {
  font-family: var(--util);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--sepia);
}
.countdown__clock {
  display: flex;
  align-items: stretch;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.cdseg {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 11px 6px 10px;
}
.cdseg + .cdseg { border-left: 1px solid var(--line); }
.cdseg__num {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.55rem, 5vw, 2rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.cdseg__unit {
  margin-top: 6px;
  font-family: var(--util);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sepia);
}
.countdown__live {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  font-family: var(--util);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(221, 162, 65, 0.18);
  border: 1px solid var(--gold);
  border-radius: 10px;
}
.countdown__dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-lo);
  animation: cd-pulse 2.4s ease-out infinite;
}
@keyframes cd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(221, 162, 65, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(221, 162, 65, 0); }
  100% { box-shadow: 0 0 0 0 rgba(221, 162, 65, 0); }
}

/* ------------------------------------------- SHOW SELECTOR (the signature)
   Two shows, so no dropdown - two cards, multi-select. Unselected they are
   quiet paper. Selected, each fills with the gold button-tufted velvet of
   the armchair in the poster: a diamond lattice of stitch points over a
   sheen gradient. That is the one loud moment on the page.

   The wire values ("Leicester" / "London") must match the CRM select options
   CHARACTER FOR CHARACTER - the labels here are display only. app.js joins
   the checked values with ", " and the CRM splits on the comma, which is
   also why no option label may ever contain one. */
.shows { margin: 0 0 20px; min-width: 0; }
.shows__legend {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 10px;
}
.shows__legend-text {
  font-family: var(--util);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
}
.shows__legend-note {
  font-family: var(--util);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sepia);
}
.shows__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.show { position: relative; display: block; cursor: pointer; min-width: 0; }
.show input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}
.show__face {
  position: relative;
  display: block;
  height: 100%;
  padding: 14px 13px 15px;
  border-radius: 11px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.show:hover .show__face { border-color: var(--gold-lo); }
.show:active .show__face { transform: translateY(1px); }
.show input:focus-visible + .show__face {
  outline: 3px solid var(--gold-lo);
  outline-offset: 2px;
}
.show__day {
  display: block;
  font-family: var(--util);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sepia);
}
.show__city {
  display: block;
  margin: 3px 0 1px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.45rem, 5.2vw, 1.78rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.show__venue {
  display: block;
  font-family: var(--util);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--sepia);
}
.show__tick {
  position: absolute;
  top: 11px; right: 11px;
  width: 21px; height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
  color: transparent;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.show__tick svg { width: 13px; height: 13px; }

/* --- selected: the chair --------------------------------------------- */
.show input:checked + .show__face {
  border-color: var(--gold-lo);
  background-color: var(--gold);
  background-image:
    /* stitch buttons at the lattice intersections */
    radial-gradient(circle at 50% 50%, rgba(23, 17, 14, 0.34) 0 1.8px, rgba(23, 17, 14, 0) 2.6px),
    /* the diamond quilt */
    linear-gradient( 45deg, rgba(23, 17, 14, 0.055) 0 25%, rgba(23, 17, 14, 0) 25% 75%, rgba(23, 17, 14, 0.055) 75%),
    linear-gradient(-45deg, rgba(23, 17, 14, 0.055) 0 25%, rgba(23, 17, 14, 0) 25% 75%, rgba(23, 17, 14, 0.055) 75%),
    /* velvet sheen */
    radial-gradient(120% 95% at 28% 8%, var(--gold-hi) 0%, var(--gold) 52%, var(--gold-lo) 100%);
  background-size: 34px 34px, 34px 34px, 34px 34px, 100% 100%;
  background-position: 17px 17px, 0 0, 0 0, 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 214, 0.55),
    inset 0 -10px 22px -12px rgba(23, 17, 14, 0.55);
}
.show input:checked + .show__face .show__day,
.show input:checked + .show__face .show__venue { color: #5A3D10; }
.show input:checked + .show__face .show__city  { color: var(--ink); }
.show input:checked + .show__face .show__tick {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--gold-hi);
}

/* ----------------------------------------------------------------- FORM */
.form { margin: 0; }
.form__row { margin: 0 0 14px; }
/* labels are sr-only, never display:none - the placeholder carries the
   meaning visually, the label carries it for a screen reader */
.form__label {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.form__input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;             /* 16px stops iOS zooming the page on focus */
  line-height: 1.3;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form__input::placeholder { color: rgba(94, 78, 64, 0.62); }
.form__input:focus {
  outline: none;
  border-color: var(--gold-lo);
  box-shadow: 0 0 0 3px rgba(221, 162, 65, 0.32);
}

/* Chrome paints autofilled fields pale lavender and IGNORES background /
   background-color on :-webkit-autofill. The only thing that works is a huge
   inset box-shadow - and its colour must be the OPAQUE flattening of the
   field's rendered stack. Here that is trivially exact: --paper-2 (#E4D8C7)
   is already fully opaque over an opaque paper panel, so an autofilled field
   is pixel-identical to an empty one beside it. */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus,
.form__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #E4D8C7 inset !important;
          box-shadow: 0 0 0 1000px #E4D8C7 inset !important;
  -webkit-text-fill-color: #17110E !important;
  caret-color: #17110E;
  /* without this Chrome flashes the lavender in before the shadow paints */
  transition: background-color 9999s ease-in-out 0s;
}

.form__row--check { margin: 16px 0 18px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sepia);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--gold-lo);
  cursor: pointer;
}
.form__check a { color: var(--ink); text-underline-offset: 2px; }
.form__check a:hover { color: var(--gold-lo); }

.form__error {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--red);
  font-weight: 500;
}
.form__error--global { margin-top: 12px; text-align: center; }

/* --------------------------------------------------------------- BUTTON */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 15px 18px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--util);
  font-weight: 700;
  text-transform: uppercase;
  /* shrink the type before it can ever wrap - an uppercase tracked label on
     a 320px viewport otherwise breaks to two lines */
  white-space: nowrap;
  font-size: clamp(0.95rem, 3.4vw, 1.08rem);
  letter-spacing: clamp(0.06em, 0.5vw, 0.14em);
  text-decoration: none;
  text-align: center;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn--primary {
  color: var(--ink);
  background-image: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 46%, var(--gold-lo) 100%);
  box-shadow: 0 8px 20px -10px rgba(221, 162, 65, 0.85), inset 0 1px 0 rgba(255, 244, 222, 0.7);
}
.btn--primary:hover { filter: brightness(1.06); }
.btn--primary:active { transform: translateY(1px); }
.btn--primary:disabled { opacity: 0.62; cursor: default; filter: none; transform: none; }

/* ------------------------------------------------- intl-tel-input (v25)
   The vendor stylesheet is light-themed already, so it needs tuning rather
   than a repaint. */

/* The dropdown's hidden state lives in the vendor stylesheet; until that
   loads, the full country list + search box flash open on first paint. */
.iti__dropdown-content.iti__hide { display: none !important; }

.iti { width: 100%; display: block; }
/* app.js re-measures the flag/dial-code chip and writes the real padding-left
   (with a sanity gate). This is only the pre-JS floor - anything near 80px
   breaks 320-390px viewports. */
.iti input.form__input { padding-left: calc(52px + 0.7rem); }

.iti__country-container:focus-within .iti__selected-country-primary {
  outline: 2px solid var(--gold-lo);
  outline-offset: -2px;
  border-radius: 9px 0 0 9px;
}
.iti__selected-country { border-radius: 9px 0 0 9px; }
.iti__selected-dial-code { color: var(--sepia); font-size: 15px; }

.iti__dropdown-content {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 22px 46px -14px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.iti__search-input {
  /* The vendor reserves padding-left:30px / padding-right:28px to clear the
     absolutely positioned search icon and clear button. A padding SHORTHAND
     wipes that reservation and the magnifier lands on top of the word being
     typed - keep the horizontal values. */
  padding: 10px 30px 10px 32px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
}
.iti__search-input::placeholder { color: rgba(94, 78, 64, 0.6); }
.iti__search-input:focus { outline: none; background: #EFE7DC; }
.iti__country-list { max-height: 232px; scrollbar-width: thin; }
.iti__country { padding: 9px 12px; font-size: 14.5px; color: var(--ink); }
.iti__country:hover, .iti__country.iti__highlight { background: rgba(221, 162, 65, 0.24); }
.iti__dial-code { color: var(--sepia); }

/* --------------------------------------------------------------- FOOTER
   Full-width bar across the bottom of the page, matching basslayerz. */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px clamp(16px, 4vw, 40px) 26px;
  background: rgba(12, 8, 6, 0.62);
  border-top: 1px solid var(--ink-line);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.foot__left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot__legal { margin: 0; font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
.foot__legal a { color: var(--muted); text-decoration: none; }
.foot__legal a:hover { color: var(--gold); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--gold); color: var(--paper); }
.site-built img { display: block; opacity: 0.9; }

/* =========================================================== RESPONSIVE
   Thresholds are ASPECT-RATIO based, not width alone: width-only breakpoints
   leave gaps at "in-between" window shapes (squarish desktop windows around
   570-900px) where neither the phone nor the desktop treatment applies. */

/* --- two columns: poster left, panel right ------------------------- */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
  }
  .poster { justify-self: end; max-width: 520px; }
  .signup { justify-content: flex-start; }
  .panel  { margin: 0; max-width: 470px; }
}

@media (min-width: 1100px) and (min-aspect-ratio: 7/10) {
  .poster { max-width: 560px; }
  .panel  { max-width: 500px; }
}

/* --- narrow phones ------------------------------------------------- */
@media (max-width: 400px) {
  .shows__grid { gap: 8px; }
  .show__face { padding: 12px 10px 13px; }
  .panel__inner { padding: 20px 18px 22px; }
  .cdseg { padding: 9px 3px 9px; }
  .cdseg__num { font-size: 1.45rem; }
  .cdseg__unit { font-size: 8.5px; letter-spacing: 0.12em; }
}

/* --- LANDSCAPE PHONES (a first-class layout, not an afterthought)
   844x390 / 932x430 / 667x375 all satisfy the desktop width+aspect test but
   have almost no height, so the desktop grid's 100svh art renders oversized
   and cramped. Placed AFTER the desktop blocks so it wins at equal
   specificity. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage {
    align-items: start;
    padding: 14px clamp(12px, 3vw, 26px) 14px;
  }
  .stage__inner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    min-height: 0;
  }
  .poster {
    max-width: none;
    width: auto;
    justify-self: end;
    min-height: 0;
  }
  .poster__art {
    width: auto;
    max-height: calc(100svh - 40px);
    max-width: 38vw;
  }
  .panel { max-width: 430px; min-height: 0; }
  .panel__inner { padding: 16px 18px 18px; }
  .panel__title { font-size: clamp(1.75rem, 4vw, 2.2rem); margin-bottom: 7px; }
  .panel__lede  { font-size: 13.5px; margin-bottom: 14px; }
  .panel__eyebrow { margin-bottom: 8px; font-size: 12px; }
  /* the clock costs ~90px of height the landscape panel does not have */
  .countdown { margin-bottom: 13px; }
  .countdown__label { margin-bottom: 6px; }
  .cdseg { padding: 7px 4px 7px; }
  .cdseg__num { font-size: 1.35rem; }
  .cdseg__unit { margin-top: 4px; font-size: 8.5px; letter-spacing: 0.12em; }
  .countdown__live { padding: 10px 13px; font-size: 13px; }
  .shows { margin-bottom: 13px; }
  .show__face { padding: 10px 11px 11px; }
  .show__city { font-size: 1.34rem; }
  .form__row { margin-bottom: 10px; }
  .form__input { padding: 10px 13px; }
  .form__row--check { margin: 12px 0 13px; }
  .btn { padding: 12px 16px; }
  .iti__country-list { max-height: 150px; }
}

/* ======================================================= LEGAL / PRIVACY
   A long document, so it gets the same treatment as the signup panel: a
   printed sheet of paper held in the dark hall. Reading a policy this long
   in light-on-dark is punishing; paper is both kinder and on-concept. */
.legal-wrap {
  padding: clamp(20px, 5vw, 56px) clamp(14px, 4vw, 40px);
}
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px) clamp(20px, 4.5vw, 56px) clamp(30px, 5vw, 56px);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow:
    0 0 0 1px rgba(221, 162, 65, 0.30),
    0 30px 70px -22px rgba(0, 0, 0, 0.80);
}
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--sepia);
  transition: border-color .16s ease, color .16s ease;
}
.legal__back:hover { border-color: var(--gold-lo); color: var(--ink); }
.legal__back-arrow {
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  transition: transform .16s ease;
}
.legal__back:hover .legal__back-arrow { transform: translateX(-3px); }
.legal__back-arrow svg { width: 13px; height: 13px; display: block; }
.legal__back-label { display: flex; flex-direction: column; line-height: 1.15; }
.legal__back-text {
  font-family: var(--util);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.legal__back-brand {
  font-family: var(--util);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.legal h1 {
  margin: 0 0 26px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.95rem, 5vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.legal h2 {
  margin: 34px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--util);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-lo);
}
.legal h3 {
  margin: 24px 0 8px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.005em;
}
.legal h4 {
  margin: 18px 0 6px;
  font-family: var(--util);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sepia);
}
.legal p, .legal li { font-size: 15px; line-height: 1.68; color: var(--sepia); margin: 0 0 0.85rem; }
.legal ul { padding-left: 1.15rem; margin: 0.5rem 0 1rem; }
.legal li { margin-bottom: 0.45rem; }
.legal li::marker { color: var(--gold-lo); }
.legal a:not(.legal__back) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(221, 162, 65, 0.75);
}
.legal a:not(.legal__back):hover { text-decoration-color: var(--gold-lo); color: var(--gold-lo); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal__meta {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--util);
  font-size: 12.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sepia);
}

/* ---------------------------------------------------------- A11Y / MOTION */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.form__check input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.panel a:focus-visible,
.form__check input:focus-visible { outline-color: var(--gold-lo); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}