/* ============================================================
   Nero Tour - nero.tours
   London + Bristol sign-up. Controller: Louder Entertainment Limited.

   DIRECTION
   The Welcome Reality cover: a night sky over a city, a thin diamond
   drawn in light (gold where it catches the city glow, electric blue
   where it falls into the dark), the NERO wordmark glowing at its
   centre. The sign-up borrows the diamond and nothing else. The city
   picker is the one loud element: each city carries a small diamond
   that fills gold when picked, and the picked tile takes the cover's
   gold-to-blue edge. Everything around it stays quiet, night on night.

   COLOUR - literal pixels sampled from Background.png:
     #0E1226  night       (sky mid-tone #13182E, deepened)
     #FFC94D  gold        (city glow inside the diamond)
     #4D91EA  volt        (the diamond's lower blue edge)
     #F2F4FA  white       (the wordmark)
   Night on gold measures 12.4:1, so gold carries the CTA with dark type.
   Volt is structure only (lines, focus, the blue half of the edge).

   TYPE - League Gothic (OFL) is close to the cover's billing block and
   carries titles, city names and buttons, uppercase as the cover sets
   them. Archivo Expanded carries reading copy: wide against condensed,
   a deliberate pairing rather than two neighbouring grotesques.
   ============================================================ */

@font-face {
  font-family: "League Gothic";
  src: url("/assets/fonts/LeagueGothic.woff2?v=20260930-1") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Exp";
  src: url("/assets/fonts/ArchivoExp.woff2?v=20260930-1") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --night:     #0E1226;   /* page ground */
  --night-2:   #121834;   /* panel base */
  --field:     #182042;   /* form field - OPAQUE on purpose, see autofill note */
  --white:     #F2F4FA;
  --dim:       #AEB6CE;   /* secondary copy, 8.9:1 on night-2 */
  --faint:     #7C86A6;   /* placeholders */
  --gold:      #FFC94D;
  --gold-hi:   #FFD673;
  --volt:      #4D91EA;
  --line:      rgba(77,145,234,.22);
  --line-2:    rgba(174,182,206,.32);
  --danger:    #FF9A8A;
  --whatsapp:  #25D366;

  --display: "League Gothic", "Arial Narrow", Impact, sans-serif;
  --body:    "Archivo Exp", "Helvetica Neue", Arial, sans-serif;

  --maxw: 560px;
  --panel-w: 440px;
}

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

/* `hidden` is only display:none in the UA stylesheet, so ANY author rule that
   sets display beats it. Keep this ABOVE everything that sets display. */
[hidden] { display: none !important; }

/* Ground colour lives on html, NOT body: an opaque body paints over .bg. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--night);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--body);
  font-weight: 400;
  color: var(--dim);
  background: transparent;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- ground: the plate, blurred and sunk under the art + panel.
   Chosen by aspect ratio, not width alone, so squarish windows never fall
   between the phone and desktop plates. The head preloads mirror these. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--night);
  background-image: url("/assets/images/bg-mobile-sm.webp?v=20261002-10");
  background-position: center;
  background-size: cover;
}
@media (max-aspect-ratio: 7/10) and (min-width: 501px) {
  .bg { background-image: url("/assets/images/bg-mobile.webp?v=20261002-10"); }
}
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20261002-10"); }
}
@media (min-aspect-ratio: 7/10) and (min-width: 1501px) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20261002-10"); }
}

/* ============================================================
   STAGE
   ============================================================ */
.stage {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;                 /* auto at EVERY breakpoint - never plain 0 */
  padding: clamp(18px, 4vw, 48px) clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
}
.stage__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
}

/* ---------- the artwork: full bleed, never boxed (2 Oct) ----------
   Phones, portrait tablets and narrow windows (default): the client's
   mobile_background, full width at its own proportions (6494 / 3117 = 2.083,
   so 208.3vw tall), SCROLLING with the page (Adam: a fixed backdrop let the
   panel slide up over NERO). It is the cover on top with the scene reflected
   in water below, for the form to sit on: the Louder logo ends at 58.3% of
   it = 121.4vw, where the panel starts. No side fades anywhere (they read as
   a box). If the form runs past the art's bottom, the fixed .bg is the art's
   own starry reflection, blurred, and the art's last 8% fades into it.
   Wide windows: see the full-screen block under RESPONSIVE. */
.art {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 208.3vw;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
}
.art__h1 { margin: 0; height: 100%; line-height: 0; display: flex; }
.art__h1 picture { display: contents; }
.art__img {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}
.stage { margin-top: calc(121.4vw + 6px); }

/* ============================================================
   SIGNUP PANEL
   ============================================================ */
.signup { justify-self: center; width: 100%; max-width: var(--panel-w); }
.panel {
  width: 100%;
  position: relative;
  isolation: isolate;             /* keeps the country dropdown above everything */
  background: rgba(18,24,52,.9);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 34px 80px -34px rgba(0,0,0,.95);
  overflow: visible;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel {
    background: rgba(18,24,52,.8);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
  }
}
.panel__inner { position: relative; z-index: 1; padding: clamp(22px, 3vw, 32px); }

/* --- state machine (app.js flips data-form-state on .panel) --- */
.panel__state { display: none; }
.panel[data-form-state="idle"]    .panel__idle    { display: block; }
.panel[data-form-state="otp"]     .panel__otp     { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; }

/* ============================================================
   PANEL COPY
   ============================================================ */
.panel__title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 3.5rem);
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
}
/* House pattern: the second line carries the accent. <em> keeps the emphasis
   in the markup; reset from italic because the face has none. */
.panel__title em { font-style: normal; color: var(--gold); }
.panel__lede {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dim);
  max-width: 44ch;
}
.panel__lede--last { margin-bottom: 20px; }
.panel__lede strong { color: var(--white); font-weight: 600; }
.panel__success-note { margin: 0 0 12px; color: var(--gold-hi); font-size: 14px; }

/* ============================================================
   CITIES - the signature. Two tiles; each carries a small diamond
   that fills gold when picked, and the picked tile takes the cover's
   gold (top-left) to volt (bottom-right) edge.
   ============================================================ */
.cities {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  min-width: 0;                   /* fieldsets default to min-content width */
}
/* A <legend> ignores normal block flow; float + width makes it a real block. */
.cities__legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
}
.cities__list {
  clear: both;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.city {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px 11px;
  border: 1px solid transparent;
  border-radius: 3px;
  background:
    linear-gradient(var(--field), var(--field)) padding-box,
    linear-gradient(var(--line-2), var(--line-2)) border-box;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease;
}
/* The checkbox stays in the accessibility tree and in tab order: it is only
   visually clipped, never display:none, so keyboard and screen readers work. */
.city input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  pointer-events: none;
}
.city__mark {
  flex: 0 0 auto;
  width: 11px; height: 11px;
  margin-left: 3px;
  transform: rotate(45deg);
  border: 1.5px solid var(--volt);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.city__name {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--white);
}
.city:hover {
  background:
    linear-gradient(#1C2550, #1C2550) padding-box,
    linear-gradient(var(--line-2), var(--line-2)) border-box;
}
/* picked: the diamond fills gold and glows; the edge becomes the cover's */
.city:has(input:checked) {
  background:
    linear-gradient(#1C2550, #1C2550) padding-box,
    linear-gradient(135deg, var(--gold) 0%, var(--gold) 30%, var(--volt) 75%) border-box;
}
.city:has(input:checked) .city__mark {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px 1px rgba(255,201,77,.65);
}
.city:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Fallback for browsers without :has() - the checkbox itself is shown and
   usable there; just less decorated. */
@supports not selector(:has(*)) {
  .city input { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; accent-color: var(--gold); }
  .city__mark { display: none; }
}
.cities.is-invalid .city {
  background:
    linear-gradient(var(--field), var(--field)) padding-box,
    linear-gradient(var(--danger), var(--danger)) border-box;
}

/* ============================================================
   GIG - the one show: date, venue, sale times. Set like a ticket stub:
   a volt rule top and bottom, the date in the billing face, the two sale
   times side by side underneath.
   ============================================================ */
.gig {
  margin: 14px 0 20px;
  padding: 13px 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.gig__date {
  margin: 0;
  font-family: var(--display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white);
}
.gig__venue { margin: 5px 0 0; font-size: 13px; color: var(--dim); }
/* presale countdown: four cells in the billing face, gold digits */
.countdown { margin: 13px 0 0; }
.countdown__label,
.countdown__live { margin: 0 0 7px; font-size: 11.5px; color: var(--dim); }
.countdown__live { display: none; font-size: 14px; font-weight: 600; color: var(--gold); }
.countdown__cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 0 6px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.countdown__n {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.countdown__u { font-size: 10.5px; color: var(--dim); }
.countdown.is-live .countdown__label,
.countdown.is-live .countdown__cells { display: none; }
.countdown.is-live .countdown__live { display: block; margin-bottom: 0; }

.gig__sales {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 0;
}
.gig__sale { margin: 0; }
.gig__sale dt { font-size: 11.5px; color: var(--dim); }
.gig__sale dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--white); }
.gig__sale:first-child dd { color: var(--gold); }   /* presale is the date that matters to a sign-up */

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin: 0 0 12px; }
/* labels stay for screen readers; placeholders carry the meaning visually */
.form__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.form__input {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--body);
  font-size: 16px;                /* 16px minimum or iOS zooms the page on focus */
  color: var(--white);
  background: var(--field);       /* OPAQUE - see the autofill rule below */
  border: 1px solid var(--line-2);
  border-radius: 3px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: var(--faint); }
.form__input:focus {
  outline: none;
  border-color: var(--volt);
  box-shadow: 0 0 0 3px rgba(77,145,234,.25);
}
.form__input--otp {
  font-family: var(--display);
  font-size: 34px;
  letter-spacing: .4em;
  text-align: center;
  text-indent: .4em;
}

/* Chrome paints autofilled inputs pale lavender and IGNORES background on
   :-webkit-autofill - a huge inset box-shadow is the only reliable override.
   The field is opaque, so its flattened colour is simply --field. Keep it
   opaque, or this value must be recomputed by compositing the stack. */
.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 var(--field) inset !important;
          box-shadow: 0 0 0 1000px var(--field) inset !important;
  -webkit-text-fill-color: var(--white) !important;
  caret-color: var(--white);
  transition: background-color 9999s ease-in-out 0s;
}

.form__error { margin: 7px 0 0; font-size: 12.5px; color: var(--danger); }
.form__error--global { margin-top: 14px; }

/* Honeypot. display:none ONLY - off-screen positioning stays an autofill
   target in Chrome/Edge, which fills it and silently blocks real signups. */
.hp-row { display: none !important; }

.form__row--check { margin: 16px 0 18px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--dim);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 1px 0 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.form__check a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--gold-hi); }

.form__resend { margin: 14px 0 0; font-size: 12.5px; color: var(--dim); text-align: center; }
.form__resend-btn {
  font: inherit;
  color: var(--gold);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.form__resend-btn:disabled { color: var(--dim); cursor: default; text-decoration: none; }

/* ---------- buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, filter .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
/* Night type on gold: 12.4:1. White would be 1.4:1. */
.btn--primary {
  color: var(--night);
  background: var(--gold);
  box-shadow: 0 12px 30px -14px rgba(255,201,77,.7);
}
.btn--primary:hover:not(:disabled) { background: var(--gold-hi); }
/* Dark green type on WhatsApp green: 7.9:1. White would be 1.98:1. */
.btn--whatsapp {
  color: #06301A;
  background: var(--whatsapp);
  margin-top: 4px;
}
.btn--whatsapp:hover { filter: brightness(1.06); }
.btn__icon { flex: 0 0 auto; width: 20px; height: 20px; }

.wa-hook { margin: 18px 0 12px; font-size: 13px; color: var(--dim); }
.wa-hook strong { color: var(--white); font-weight: 600; }

/* ============================================================
   intl-tel-input v25
   ============================================================ */
.iti { width: 100%; display: block; }
/* app.js re-measures and sets padding-left inline; sane default before it
   runs. Anything >= 80px breaks 320-390px viewports. */
.iti input.form__input { padding-left: calc(52px + 0.7rem); }
.iti__country-container { z-index: 3; }
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* Until the vendor stylesheet loads the list + search box flash open. */
.iti__dropdown-content.iti__hide { display: none !important; }
.iti__dropdown-content {
  background: var(--night-2);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  box-shadow: 0 26px 56px -18px rgba(0,0,0,.95);
  overflow: hidden;
}
.iti__search-input {
  /* Keep the vendor's horizontal padding reservation (icon left, clear
     button right). A padding shorthand that drops them puts the magnifier on
     top of the placeholder. */
  padding: 10px 30px 10px 32px;
  width: 100%;
  font-family: var(--body);
  font-size: 14px;
  color: var(--white);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid var(--line-2);
}
.iti__search-input::placeholder { color: var(--faint); }
.iti__search-input:focus { outline: none; background: #1E2750; }
.iti__country-list { background: var(--night-2); max-height: 240px; }
.iti__country { padding: 9px 12px; font-family: var(--body); font-size: 13.5px; color: var(--white); }
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(77,145,234,.2); }
.iti__dial-code { color: var(--dim); }
.iti__country-name { color: var(--white); }
.iti__selected-country { border-radius: 3px 0 0 3px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(242,244,250,.06); }
.iti__selected-dial-code { color: var(--white); font-family: var(--body); font-size: 15px; }
.iti__arrow { border-top-color: var(--dim); }
.iti__arrow--up { border-bottom-color: var(--dim); }

/* ============================================================
   FOOTER - fleet band, credit in a pill (basslayerz pattern)
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 16px clamp(16px, 4vw, 40px) 22px;
  background: rgba(14,18,38,.78);
  border-top: 1px solid var(--line);
  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: 11.5px; color: var(--dim); letter-spacing: .02em; }
.foot__legal a { color: var(--dim); 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: .04em;
  color: var(--dim);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--gold); color: var(--white); }
.site-built img { display: block; opacity: .9; }

/* ============================================================
   RESPONSIVE - aspect-ratio thresholds, not width alone
   ============================================================ */

/* FULL-SCREEN SCENE (desktop, landscape tablets, landscape phones): the
   client's landscape key art (background_v4, extended on the right to 2.8:1)
   fills the screen from the top down to the footer bar, anchored left, so
   the type near its top and bottom edges is never cropped and no fade or
   side strip shows on any normal window. Narrower screens lose some city on the right. Because the image is
   always 100svh tall, the diamond tip always sits ~0.81 x 100svh from the
   left edge, so the panel column starts at whichever is further right, 50%
   of the width or 80svh, plus a gap of clamp(40px, 5vw, 96px). */
@media (min-width: 640px) and (min-aspect-ratio: 8/7) {
  /* The art ends at the top of the footer bar, which has a fixed height here,
     so the bar never covers the Louder logo at the bottom of the artwork
     (Adam, 2 Oct: "the Louder logo is always visible on desktop"). */
  /* The footer bar is PINNED to the bottom of the window on wide screens, so
     the art always ends exactly on it, whatever the scroll position: no band
     of ground shows when the form is taller than a short window. */
  :root { --foot-h: 64px; }
  body { padding-bottom: var(--foot-h); }
  .foot {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
    height: var(--foot-h);
    padding-top: 0;
    padding-bottom: 0;
    flex-wrap: nowrap;
  }
  .art {
    position: fixed;
    inset: 0 0 var(--foot-h) 0;
    height: auto;
    overflow: hidden;
    /* no fade (Adam, 2 Oct): the art itself is extended on the right to
       2.8:1 (build_art_v2.py), wider than any browser window incl. ultrawide */
    -webkit-mask-image: none;
            mask-image: none;
  }
  .art__h1 { justify-content: flex-start; }   /* anchored left */
  /* Height-fitted so the top and bottom type is never cut. min-width is the
     safety net for windows wider than 2.8:1: the image then widens to the
     window and cover trims a sliver top and bottom, so no strip of ground
     ever shows down the right-hand side. */
  .art__img {
    width: auto;
    min-width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 0% 50%;
  }
  .stage {
    width: auto;
    max-width: none;
    /* a set gap after the diamond rather than centred in the space right of
       it, which sat the panel too far right (Adam, 2 Oct) */
    /* left edge of the panel: a gap past the diamond tip, but never so far
       right that the panel runs off the window (narrower windows slide it
       left over the city, still clear of NERO down to 8:7) */
    margin: 0 0 0 min(calc(max(50%, 80svh) + clamp(40px, 5vw, 96px)), calc(100% - var(--panel-w) - 32px));
    padding: clamp(18px, 3vw, 32px) clamp(16px, 3vw, 40px) clamp(18px, 3vw, 32px) 0;
    justify-content: flex-start;
  }
  .stage__inner { grid-template-columns: minmax(0, var(--panel-w)); justify-content: start; }
  .signup { justify-self: start; }
}

@media (max-width: 899px) {
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}

/* Phones: stack the footer rather than relying on the row wrapping. */
@media (max-width: 480px) {
  .foot { flex-direction: column; align-items: center; gap: 10px; padding-bottom: 20px; }
  .foot__left { flex-direction: column; align-items: center; gap: 10px; }
  .stage__inner { gap: 20px; }
  .panel__inner { padding: 22px 16px; }
  .city { padding: 12px 12px 10px; gap: 10px; }
  .city__name { font-size: 27px; }
}

/* --- landscape phones are a first-class layout ---
   844x390, 932x430, 667x375: the full-screen block above places art and
   panel; this only tightens the panel so it fits the short height. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage { padding: 10px clamp(10px, 2vw, 20px); align-items: flex-start; }
  .signup { justify-self: stretch; max-width: none; }
  .panel__inner { padding: 14px 16px; }
  .panel__title { font-size: 2.2rem; margin-bottom: 6px; }
  .panel__lede { font-size: 12.5px; margin-bottom: 6px; }
  .panel__lede--last { margin-bottom: 10px; }
  .cities { margin-bottom: 10px; }
  .cities__legend { margin-bottom: 6px; }
  .gig { margin: 8px 0 10px; padding: 8px 0 7px; }
  .gig__date { font-size: 24px; }
  .gig__sales { margin-top: 6px; }
  .countdown { margin-top: 7px; }
  .countdown__label { margin-bottom: 4px; }
  .countdown__cell { padding: 4px 0 3px; }
  .countdown__n { font-size: 22px; }
  .city { padding: 8px 12px 6px; }
  .city__name { font-size: 24px; }
  .form__row { margin-bottom: 9px; }
  .form__input { padding: 10px 13px; }
  .form__row--check { margin: 10px 0 12px; }
  .btn { padding: 9px 16px 8px; font-size: 23px; }
  .iti__country-list { max-height: 150px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   OPTION B - BOXED COVER (indexv2.html, body.layout-boxed)
   The first design: the whole cover in a frame on the left, panel on the
   right, over the blurred plate. Everything is scoped to .layout-boxed so
   index.html (full-bleed art) is untouched. The client picks one.
   ============================================================ */
.layout-boxed { --maxw: 1200px; }
.layout-boxed .stage { margin-top: 0; }
.layout-boxed .bill { justify-self: center; width: 100%; max-width: 440px; }
.layout-boxed .bill__h1 { margin: 0; line-height: 0; }
.layout-boxed .bill__poster {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(242,244,250,.08),
    0 40px 90px -36px rgba(0,0,0,.95),
    0 0 140px -40px rgba(77,145,234,.45);   /* the diamond's blue, spilling */
}
.layout-boxed .signup { justify-self: center; }

@media (max-width: 480px) {
  .layout-boxed .bill { max-width: 82vw; }
}

/* two column: cover left, panel right. The panel track is DEFINITE, never
   auto, so the fr track has something to distribute from. */
@media (min-width: 900px) and (min-aspect-ratio: 7/10) {
  .layout-boxed .stage { max-width: var(--maxw); }
  .layout-boxed .stage__inner {
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
    gap: clamp(32px, 4.5vw, 64px);
  }
  .layout-boxed .bill { justify-self: end; max-width: 600px; }
  /* Height-capped so the square cover never sets the page height. max-width
     is load-bearing: without it a tall window lets the cover run under the
     panel (gotcha 38). */
  .layout-boxed .bill__poster { width: auto; max-width: 100%; max-height: calc(100svh - 150px); margin-left: auto; }
  .layout-boxed .signup { grid-column: 2; justify-self: start; }
}

/* landscape phones: cover height-capped in a narrow sticky column */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .layout-boxed .stage { width: 100%; max-width: none; margin: 0 auto; }
  .layout-boxed .stage__inner { grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
  .layout-boxed .bill { justify-self: center; max-width: none; min-height: 0; position: sticky; top: 12px; }
  .layout-boxed .bill__poster { width: auto; max-width: 100%; max-height: calc(100svh - 24px); margin: 0; }
  .layout-boxed .signup { grid-column: 2; justify-self: stretch; max-width: none; }
}