/* ==========================================================================
   The SOS Band UK Tour 2027 - sosbandtour.com

   Identity comes from the band's own artwork, not invented:
   - --gold  #E8AE1E  median of the gold logo pixels (tall black artwork)
   - --red   #C21E25  median of the red dot-dash rule under that logo, which
                      is S-O-S in Morse; it becomes the page's signal motif
   - --stage #000000  literal black the band cut-out was supplied on, so the
                      photo and the page share one ground with no seam
   The logo is a potrace vector of the supplied gold lockup.

   Type: Big Shoulders (OFL, self-hosted). Stencil cut for the panel title
   only, solid cut for everything else set large. Body is the system
   Helvetica stack.

   Structure follows the shared signup engine: aspect-ratio breakpoints, plus
   a dedicated short-viewport block for landscape phones.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Big Shoulders";
  src: url("/assets/fonts/BigShoulders.woff2?v=20260922-4") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Big Shoulders Stencil";
  src: url("/assets/fonts/BigShouldersStencil.woff2?v=20260922-4") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --stage:     #000000;
  --gold:      #E8AE1E;
  --gold-hot:  #F7C744;   /* lip of the button */
  --gold-deep: #B9850E;   /* foot of the button; black text on it is 7.4:1 */
  --red:       #C21E25;   /* structure only: 3.9:1 on black, never text */
  --red-hot:   #F0343C;
  --ivory:     #F5F1E8;
  --smoke:     #ABA597;   /* secondary text, 8.3:1 on the panel */
  --panel:     #0D0B08;

  /* The field background flattened to one opaque value: a .05 white field
     over the .92 panel over black. :-webkit-autofill ignores `background`,
     only an inset box-shadow can override it, and a shadow cannot be
     translucent. */
  --field-flat: #191714;

  --panel-w: 29rem;
  --hair: rgba(245, 241, 232, .15);

  --display: "Big Shoulders", "Arial Narrow", Helvetica, Arial, sans-serif;
  --stencil: "Big Shoulders Stencil", "Big Shoulders", "Arial Narrow", sans-serif;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

/* `html` carries the base colour, NOT `body`: an opaque body paints over the
   z-index:-1 fixed .bg layer. */
html {
  background: var(--stage);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: transparent;
  color: var(--ivory);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.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. Chrome/Edge autofill treats an
   off-screen field as visible, fills it, and the submit guard then drops a
   real signup. The markup also carries the `hidden` attribute. */
.hp-row { display: none !important; }

img { max-width: 100%; }

/* ---------- background ----------
   Stage black plus film grain. The grain is there to break up banding in the
   dark gold spotlight, which 8-bit panels otherwise draw as visible rings. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 60% at 50% 115%, rgba(194, 30, 37, .10), transparent 60%),
    var(--stage);
}
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/images/grain.png?v=20260922-4");
  opacity: .05;
  mix-blend-mode: screen;
}

/* ---------- shell ---------- */
.sheet {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.stage { flex: 1 0 auto; }
.stage__inner {
  width: min(74rem, 100%);
  margin: 0 auto;
  padding: clamp(1.25rem, 5vw, 2.5rem) clamp(1rem, 5vw, 2.5rem) 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 5vw, 2.5rem);
}

/* ---------- brand column ---------- */
.brand {
  width: min(100%, 30rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* The logo and the band share one width box so the overlap is a fixed
   proportion at every size: percentage margins resolve against the box
   WIDTH, so -13% always lands the hats over the lower quarter of the logo. */
.brand__stage {
  position: relative;
  width: 100%;
  isolation: isolate;
}
/* Spotlight over the logo. A pseudo-element on the column rather than a
   baked background, so it follows the logo through every layout. */
.brand__stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 22%;
  width: 150%;
  aspect-ratio: 1.3;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(232, 174, 30, .30) 0%,
    rgba(232, 174, 30, .13) 45%,
    rgba(232, 174, 30, 0) 100%);
  pointer-events: none;
}
.brand__logo {
  margin: 0 auto;
  width: 88%;
  line-height: 0;
}
.brand__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.brand__band {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-top: -13%;
  /* feet dissolve into the stage floor instead of stopping at a cut line */
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
}

.brand__bill {
  margin-top: -.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}
.brand__tour {
  margin: .35rem 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.45rem, 6.2vw, 2.1rem);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ivory);
}
.brand__guests {
  margin: 0;
  font-size: .95rem;
  color: var(--smoke);
}
.brand__guests strong {
  display: block;
  margin-top: .1rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.3rem, 5vw, 1.65rem);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- the Morse signal ----------
   The page's one piece of unprompted motion: S-O-S keys out once on load at
   Morse rhythm, each mark lighting in turn, then holds lit. */
.morse {
  display: block;
  width: min(13rem, 62%);
  height: auto;
  overflow: visible;
}
.morse__m {
  fill: var(--red);
  opacity: .22;
  animation: key .22s ease-out forwards;
}
.morse__m:nth-child(1) { animation-delay: .55s; }
.morse__m:nth-child(2) { animation-delay: .75s; }
.morse__m:nth-child(3) { animation-delay: .95s; }
.morse__m:nth-child(4) { animation-delay: 1.3s; }
.morse__m:nth-child(5) { animation-delay: 1.6s; }
.morse__m:nth-child(6) { animation-delay: 1.9s; }
.morse__m:nth-child(7) { animation-delay: 2.25s; }
.morse__m:nth-child(8) { animation-delay: 2.45s; }
.morse__m:nth-child(9) { animation-delay: 2.65s; }
@keyframes key {
  0%   { opacity: .22; fill: var(--red); }
  45%  { opacity: 1;   fill: var(--red-hot); }
  100% { opacity: 1;   fill: var(--red); }
}

/* ---------- panel ---------- */
.signup { width: 100%; display: flex; justify-content: center; }
.panel {
  position: relative;
  width: min(var(--panel-w), 100%);
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(232, 174, 30, .075) 0%, rgba(232, 174, 30, 0) 38%),
    rgba(13, 11, 8, .92);
  border: 1px solid rgba(245, 241, 232, .12);
  border-radius: 4px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .6),
    0 22px 44px -16px rgba(0, 0, 0, .9),
    0 30px 80px -40px rgba(232, 174, 30, .30),
    inset 0 1px 0 rgba(245, 241, 232, .06);
  /* keeps the light line below from stacking above the country dropdown */
  isolation: isolate;
}
/* Light across the top edge, brightest at the centre. Under the content and
   never takes pointer events, or it re-breaks the flag menu. */
.panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 174, 30, .15) 18%,
    rgba(247, 199, 68, .95) 50%,
    rgba(232, 174, 30, .15) 82%,
    transparent 100%);
}
.panel__inner {
  position: relative;
  z-index: 1;
  padding: clamp(1.35rem, 4.6vw, 2rem);
}

/* exactly one state visible at a time */
.panel__state { display: none; }
.panel__state:focus { outline: none; }
.panel[data-form-state="idle"]    .panel__idle    { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; text-align: center; }

.panel__title {
  margin: 0 0 .55rem;
  font-family: var(--stencil);
  font-weight: 800;
  font-size: clamp(2.3rem, 9vw, 3rem);
  line-height: .92;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--ivory);
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 0 28px rgba(232, 174, 30, .18);
}
/* house pattern: the hook line in the accent, reset from italic */
.panel__title em {
  font-style: normal;
  color: var(--gold);
}
.panel__title--small { font-size: clamp(1.9rem, 7.5vw, 2.4rem); }
.panel__lede {
  margin: 0 0 1.3rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--smoke);
  max-width: 36ch;
}
.panel__success .panel__lede { margin-inline: auto; }
.panel__hint {
  margin: .9rem 0 0;
  font-size: .88rem;
  color: var(--smoke);
}
.panel__success-note {
  margin: 0 0 .75rem;
  font-size: .95rem;
  color: var(--ivory);
}
.panel__stamp {
  display: block;
  width: min(100%, 17rem);
  margin: 0 auto 1.25rem;
  height: auto;
}

/* ---------- form ---------- */
.form__row { margin-bottom: .8rem; }
/* labels stay for screen readers; placeholders carry the meaning visually */
.form__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.form__input {
  width: 100%;
  padding: .82rem .9rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--hair);
  border-radius: 3px;
  color: var(--ivory);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.3;
  /* Recessed, with a dim gold bar on the foot drawn as an INSET SHADOW,
     never border-bottom-width: a border width change on focus reflows the
     field and the form twitches as you tab through it. */
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, .45),
    inset 0 -2px 0 0 rgba(232, 174, 30, .35);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.form__input::placeholder { color: rgba(171, 165, 151, .75); }
.form__input:focus {
  outline: none;
  border-color: rgba(232, 174, 30, .75);
  background: rgba(255, 255, 255, .075);
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, .4),
    inset 0 -2px 0 0 var(--gold),
    0 0 0 1px rgba(232, 174, 30, .4),
    0 6px 22px -8px rgba(232, 174, 30, .5);
}
/* Chrome paints autofilled fields pale lavender and ignores `background`.
   The fill is the flattened opaque stack, and the foot bar is repeated
   because this rule is !important and box-shadow is one property. */
.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-flat) inset,
                      inset 0 -2px 0 0 rgba(232, 174, 30, .35) !important;
          box-shadow: 0 0 0 1000px var(--field-flat) inset,
                      inset 0 -2px 0 0 rgba(232, 174, 30, .35) !important;
  -webkit-text-fill-color: var(--ivory) !important;
  caret-color: var(--ivory);
  transition: background-color 9999s ease-in-out 0s;
}

.form__error {
  margin: .4rem 0 0;
  font-size: .88rem;
  color: #FF7A70;   /* 7.1:1 on the panel */
}
.form__error--global { margin-top: .8rem; }

/* ---------- show picker ----------
   Set out like the date block on a tour poster: city, hall, date.
   Multi-select: each row is a checkbox, any combination can be ticked. */
.shows {
  border: 0;
  padding: 0;
  margin: .2rem 0 1rem;
  min-width: 0;   /* fieldsets carry a min-content floor that breaks grids */
}
.shows__legend {
  padding: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ivory);
}
.shows__hint {
  margin: .1rem 0 .6rem;
  font-size: .88rem;
  color: var(--smoke);
}
.show { display: block; position: relative; }
.show + .show { margin-top: .45rem; }
/* kept focusable - never display:none, or the group drops out of tab order */
.show input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.show__face {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .66rem .9rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--hair);
  border-radius: 3px;
  cursor: pointer;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* A square tick box, not a round dot: round markers read as radio buttons,
   i.e. "pick one", and this group is multi-select. */
.show__dot {
  width: 1.25rem; height: 1.25rem;
  border-radius: 3px;
  border: 1px solid rgba(245, 241, 232, .38);
  background: rgba(255, 255, 255, .05) no-repeat 50% 50% / 80% 80%;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.show__where { display: flex; flex-direction: column; min-width: 0; }
.show__city {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ivory);
}
.show__venue {
  margin-top: .2rem;
  font-size: .86rem;
  line-height: 1.25;
  color: var(--smoke);
}
.show__when {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold);
}
@media (hover: hover) {
  .show:hover .show__face {
    border-color: rgba(232, 174, 30, .55);
    background: rgba(232, 174, 30, .06);
  }
  .show:hover .show__dot { border-color: rgba(232, 174, 30, .75); }
}
.show input:focus-visible + .show__face {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.show input:checked + .show__face {
  background: linear-gradient(180deg, rgba(232, 174, 30, .16), rgba(232, 174, 30, .07));
  border-color: var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 0 1px rgba(232, 174, 30, .35),
    0 10px 26px -14px rgba(232, 174, 30, .7);
}
.show input:checked + .show__face .show__dot {
  background-color: var(--gold);
  border-color: var(--gold-hot);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.6l3.1 3.1 6.5-7.4'/%3E%3C/svg%3E");
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 14px -3px rgba(232, 174, 30, .8);
}

/* ---------- consent ---------- */
.form__row--check { margin-top: 1rem; }
.form__check {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--smoke);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  -webkit-appearance: none;
          appearance: none;
  width: 1.25rem; height: 1.25rem;
  margin: .05rem 0 0;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(245, 241, 232, .32);
  border-radius: 3px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 80% 80%;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.form__check input:hover { border-color: rgba(232, 174, 30, .75); }
.form__check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.form__check input:checked {
  background-color: var(--gold);
  border-color: var(--gold-hot);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 14px -3px rgba(232, 174, 30, .8);
  /* %23 for the '#' - an unencoded hash truncates the data URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.6l3.1 3.1 6.5-7.4'/%3E%3C/svg%3E");
}
.form__check a { color: var(--ivory); text-underline-offset: 2px; }
.form__check a:hover { color: var(--gold); }

/* ---------- button ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.15rem;
  padding: .85rem 1rem .8rem;
  border: 0;
  border-radius: 3px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease, filter .18s ease;
}
.btn--primary {
  /* Light falls down the face: hot lip, logo gold, deep foot. Black text is
     checked against the darkest band (--gold-deep): 7.4:1. */
  background: linear-gradient(180deg, var(--gold-hot) 0%, var(--gold) 50%, var(--gold-deep) 100%);
  color: #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 0 rgba(0, 0, 0, .25),
    0 2px 4px rgba(0, 0, 0, .55),
    0 14px 30px -12px rgba(232, 174, 30, .6);
}
.btn--primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -2px 0 rgba(0, 0, 0, .25),
    0 3px 6px rgba(0, 0, 0, .55),
    0 18px 38px -12px rgba(232, 174, 30, .75);
}
.btn--primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .35), 0 4px 12px -6px rgba(232, 174, 30, .6);
}
.btn--primary:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.btn:disabled { opacity: .65; cursor: default; transform: none; }

/* ---------- footer (house pattern: credit in a pill) ---------- */
.foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .6rem 1rem;
  padding: 1rem clamp(1rem, 5vw, 2.5rem) 1.25rem;
  border-top: 1px solid rgba(245, 241, 232, .08);
  font-size: .8rem;
  color: var(--smoke);
}
.foot__left { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.foot__legal { margin: 0; }
.foot__legal a { color: inherit; text-underline-offset: 2px; }
.foot__legal a:hover { color: var(--ivory); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(245, 241, 232, .18);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease;
}
.site-built a:hover { border-color: var(--gold); color: var(--ivory); }
.site-built img { display: block; opacity: .9; }
@media (max-width: 480px) {
  .foot, .foot__left { flex-direction: column; justify-content: center; text-align: center; }
}

/* ---------- intl-tel-input ---------- */
/* The vendor stylesheet owns the dropdown's hidden state; until it loads the
   full country list paints open. */
.iti__dropdown-content.iti__hide { display: none !important; }
.iti { width: 100%; display: block; }
/* ~63px clears the flag + dial code; app.js re-measures at runtime. Anything
   at or above 80px breaks 320-390px viewports. */
.iti input.form__input { padding-left: calc(52px + 0.7rem); }
.iti__country-container { z-index: 3; }
.iti__selected-dial-code { color: var(--ivory); }
.iti__arrow { border-top-color: var(--smoke); }
.iti__arrow--up { border-bottom-color: var(--smoke); }
.iti__dropdown-content {
  background: var(--panel);
  border: 1px solid var(--hair);
  color: var(--ivory);
}
.iti__country-list { background: var(--panel); }
.iti__dial-code { color: var(--smoke); }
.iti__country.iti__highlight { background: rgba(232, 174, 30, .2); }
.iti__country:hover { background: rgba(232, 174, 30, .14); }
/* Keep the vendor's reserved horizontal padding: a shorthand here wipes the
   30px/28px that clear the search icon and clear button, and the magnifier
   lands on top of the word "Search". */
.iti__search-input {
  padding: 9px 30px 9px 32px;
  background: rgba(255, 255, 255, .05);
  color: var(--ivory);
  border: 0;
  border-bottom: 1px solid var(--hair);
}

/* ==========================================================================
   Two columns. Gated on aspect ratio AND width so squarish desktop windows
   (~570-900px) can't fall into a gap between phone and desktop rules.
   ========================================================================== */
@media (min-aspect-ratio: 7/10) and (min-width: 768px) {
  .stage {
    display: flex;
    align-items: center;
    min-height: calc(100svh - 4rem);
  }
  .stage__inner {
    /* the panel track is DEFINITE, never `auto`: an `fr` sibling next to an
       `auto` track sized from a percentage has no basis and collapses */
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
    align-items: center;
    justify-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-block: 2.5rem;
  }
  /* Brand height is ~0.99 x its width plus ~9rem of billing, so the width is
     capped by the viewport HEIGHT as well: at 1366x768 the whole column
     still fits above the fold. */
  .brand { width: min(100%, 36rem, calc(100svh - 16rem)); min-width: 20rem; }
  .panel { width: 100%; }
}

/* ==========================================================================
   Landscape phones (844x390, 932x430, 667x375). They pass the width and
   aspect tests above but have almost no height. Placed AFTER the desktop
   block so it wins at equal specificity.
   ========================================================================== */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage { align-items: flex-start; min-height: 0; }
  .stage__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    align-items: start;
    gap: clamp(1rem, 3vw, 2rem);
    padding-block: 1rem;
  }
  .brand { width: min(100%, calc(100svh - 3rem)); min-width: 0; }
  .brand__tour { font-size: 1.2rem; }
  .brand__guests { font-size: .8rem; }
  .brand__guests strong { font-size: 1.1rem; }
  .brand__bill { gap: .35rem; }
  .panel__inner { padding: 1rem 1.1rem; }
  .panel__title { font-size: 1.9rem; }
  .panel__lede { margin-bottom: .8rem; font-size: .9rem; }
  .form__row { margin-bottom: .55rem; }
  .form__input { padding: .62rem .8rem; }
  .shows { margin-bottom: .6rem; }
  .show + .show { margin-top: .3rem; }
  .show__face { padding: .45rem .75rem; }
  .show__city { font-size: 1.15rem; }
  .btn { margin-top: .75rem; padding: .7rem 1rem .65rem; }
  .panel__stamp { width: min(100%, 11rem); margin-bottom: .6rem; }
}

/* very narrow phones */
@media (max-width: 360px) {
  .panel__inner { padding: 1.1rem .9rem; }
  .show__face { gap: .55rem; padding: .6rem .65rem; }
  .show__city { font-size: 1.2rem; }
  .show__venue { font-size: .8rem; }
  .show__when { font-size: 1rem; }
}

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