/* ============================================================
   KANINE - REFLECTIONS UK/EU TOUR
   kanine.tours

   Palette is sampled from the client artwork, not chosen. Every
   stop in the poster's greyscale ramp has R > G > B - this is warm
   tarnished metal, not cool blue chrome - so the tokens keep that
   bias. There is NO accent hue anywhere on the page: on the poster
   light itself is the accent, and the design holds that line.
   ============================================================ */

/* Archivo Variable, both axes. The poster sets cities, dates and
   venues in one grotesque and varies only size, weight and tracking,
   so the page uses a single family across its full wght/wdth range
   rather than importing a second face. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260820-9") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --void:    #08080A;   /* page ground */
  --ink:     #131211;   /* panel base, warm black */
  --tarnish: #4B4844;   /* hairlines and plate edges ONLY - never text.
                           At 10px on the plate face it measures 1.9:1. */
  --steel:   #A29F99;   /* secondary text (artwork mid-tone) */
  --chrome:  #D7D6D5;   /* primary ink (artwork highlight) */
  --flare:   #FFFFFF;   /* specular only - sweep, focus, selection */

  /* The opaque flattening of .form__input over .panel over .bg.
     Used by the :-webkit-autofill box-shadow, which cannot be
     translucent. Recompute if either alpha changes. */
  --field-flat: #201F1E;

  --edge-lit:  rgba(255,255,255,.11);   /* top bevel */
  --edge-dark: rgba(0,0,0,.58);         /* bottom bevel */
}

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

/* html carries the ground colour, body stays transparent - an opaque
   body paints over the z-index:-1 .bg layer. */
html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: transparent;
  color: var(--chrome);
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   BACKGROUND - the poster, blurred to a metallic haze
   ============================================================ */
.bg {
  position: fixed; inset: 0; z-index: -1;
  background-image: url("/assets/images/bg-mobile-sm.webp?v=20260820-9");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* ONE vignette, not two stacked scrims. Two gradients multiply - a .86
   radial over a .94 linear leaves 0.8% of the image visible, which is why
   an earlier build read as a solid colour no matter how the artwork was
   baked. A single gradient keeps the alpha something you can reason about:
   80% of the image survives at the centre, 12% at the corners. */
.bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(118% 92% at 50% 34%,
    rgba(8,8,10,.26) 0%,
    rgba(8,8,10,.62) 50%,
    rgba(8,8,10,.91) 100%);
}
@media (max-aspect-ratio: 7/10) and (min-width: 501px) {
  .bg { background-image: url("/assets/images/bg-mobile.webp?v=20260820-9"); }
}
@media (min-aspect-ratio: 7/10) and (max-width: 1500px) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20260820-9"); }
}
@media (min-aspect-ratio: 7/10) and (min-width: 1501px) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20260820-9"); }
}

/* ============================================================
   SHELL
   ============================================================ */
.sheet {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.stage {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 40px);
}
.stage__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 5vw, 44px);
}

/* ============================================================
   ARTWORK - a plate in a bezel, lit from the top left
   ============================================================ */
.media { width: 100%; display: flex; justify-content: center; }
.art {
  margin: 0;
  width: 100%;
  max-width: 560px;
  position: relative;
  border-radius: 3px;
  padding: 1px;
  background: linear-gradient(160deg,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.06) 22%,
    rgba(0,0,0,.5) 58%,
    rgba(255,255,255,.16) 100%);
  box-shadow:
    0 26px 60px rgba(0,0,0,.72),
    0 4px 14px rgba(0,0,0,.5);
}
.art__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* ============================================================
   PANEL - a milled metal plate
   ============================================================ */
.signup { width: 100%; display: flex; justify-content: center; }
.panel {
  isolation: isolate;                 /* keeps the iti dropdown clickable */
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 4px;
  padding: 1px;
  background: linear-gradient(165deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.05) 26%,
    rgba(0,0,0,.55) 62%,
    rgba(255,255,255,.13) 100%);
  box-shadow: 0 26px 60px rgba(0,0,0,.66);
}
.panel__inner {
  position: relative;
  z-index: 1;
  border-radius: 3px;
  padding: clamp(24px, 4.5vw, 36px) clamp(20px, 4vw, 34px) clamp(26px, 4.5vw, 34px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 34%),
    rgba(19,18,17,.94);
}

/* one state visible at a time */
.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 14px;
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--steel);
}
.panel__hair {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tarnish), transparent);
}

.panel__title {
  margin: 0 0 14px;
  font-variation-settings: "wdth" 118, "wght" 800;
  font-size: clamp(1.9rem, 7vw, 2.75rem);
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--chrome);
  /* a single specular ridge across the caps, the way the poster's
     wordmark catches light - not an outline or a glow */
  background: linear-gradient(178deg,
    #FFFFFF 0%, #D7D6D5 34%, #7E7B76 52%, #EDECEA 68%, #A29F99 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.panel__title em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-variation-settings: "wdth" 88, "wght" 500;
  font-size: .40em;
  letter-spacing: .2em;
  -webkit-text-fill-color: var(--steel);
}

.panel__lede {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--steel);
}
.panel__lede strong { color: var(--chrome); font-variation-settings: "wdth" 100, "wght" 600; }

.panel__note {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--steel);
}
.panel__success-note {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--chrome);
}
.panel__success { text-align: center; }
.panel__success .panel__lede { margin-bottom: 0; }
.mark {
  display: block;
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  opacity: .92;
}

/* ============================================================
   PRESALE COUNTDOWN + SALE DATES

   These are ENGRAVED - dark inset shadow, light bottom edge - the exact
   inverse of the show plates above, which are raised with a light top edge.
   Same material vocabulary, and the direction of the light says which
   things you can act on and which are just telling you something.
   ============================================================ */
.sale { margin: 0 0 22px; }
.sale__label {
  margin: 0 0 8px;
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--steel);
}
.clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;                       /* wells never butt together */
}
.clock__well {
  display: block;
  padding: 10px 4px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 2px;
  background: rgba(0,0,0,.34);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.72), inset 0 -1px 0 rgba(255,255,255,.07);
  text-align: center;
}
.clock__num {
  display: block;
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: clamp(1.25rem, 5.4vw, 1.6rem);
  line-height: 1;
  color: var(--chrome);
  /* Archivo's default figures are proportional, so a seconds counter
     re-flows its own width every tick. Tabular locks the advance. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.clock__lbl {
  display: block;
  margin-top: 6px;
  font-variation-settings: "wdth" 92, "wght" 500;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--steel);
}
.clock__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--chrome);
}

.sale__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.sale__list li {
  padding: 8px 10px 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 2px;
  background: rgba(0,0,0,.24);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.6);
}
.sale__what {
  display: block;
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel);
}
.sale__when {
  display: block;
  margin-top: 3px;
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: 12.5px;
  letter-spacing: .01em;
  color: var(--chrome);
}

/* ============================================================
   THE SHOW PICKER  -  signature element
   Eight milled plates. Hover or focus sends a specular highlight
   travelling across the face; the tour is called Reflections, so
   the reflection is the interaction rather than an ornament.
   ============================================================ */
.shows {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  min-width: 0;                      /* fieldset defaults to min-content */
}
/* A <legend> must be the fieldset's first child, so the hint lives inside it
   as a second span rather than as a sibling paragraph. `width: 100%` is
   needed because a legend shrink-wraps its content by default. */
.shows__legend {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 0;
  margin: 0 0 10px;
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--steel);
}
.shows__hint {
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: 11.5px;
  letter-spacing: .01em;      /* reset the legend's tracking */
  text-transform: none;       /* and its caps */
  color: var(--steel);
}
.shows__rack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.show { display: block; cursor: pointer; }
/* The radio stays in the layout and focusable - never display:none,
   which drops it out of the tab order and off screen readers. */
.show input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.show__plate {
  position: relative;
  display: block;
  overflow: hidden;                  /* clips the travelling highlight */
  padding: 9px 30px 10px 12px;   /* right gutter clears the tick */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 46%, rgba(0,0,0,.16) 100%);
  box-shadow: inset 0 1px 0 var(--edge-lit), inset 0 -1px 0 var(--edge-dark);
  transition: border-color .22s ease, background-color .22s ease, transform .22s ease;
}
/* Multi-select affordance. A checkbox group has to look like one, or people
   assume the first plate they touch replaces the last. This is an engraved
   square that fills and takes a tick when the show is chosen. */
.show__tick {
  position: absolute;
  top: 9px; right: 9px;
  width: 15px; height: 15px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  background: rgba(0,0,0,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: background-color .2s ease, border-color .2s ease;
}
.show__tick::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #0B0B0C;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg) scale(.4);
  opacity: 0;
  transition: opacity .16s ease, transform .2s cubic-bezier(.22,.61,.36,1);
}
.show:hover .show__tick { border-color: rgba(255,255,255,.4); }
.show input:checked + .show__plate .show__tick {
  background: linear-gradient(180deg, #F2F1EF, #C6C4C0);
  border-color: rgba(255,255,255,.7);
}
.show input:checked + .show__plate .show__tick::after {
  opacity: 1;
  transform: rotate(42deg) scale(1);
}
/* the reflection itself */
.show__plate::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(104deg,
    transparent 32%,
    rgba(255,255,255,.14) 45%,
    rgba(255,255,255,.30) 50%,
    rgba(255,255,255,.14) 55%,
    transparent 68%);
  transform: translateX(-130%);
  transition: transform .62s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.show:hover .show__plate::after,
.show input:focus-visible + .show__plate::after { transform: translateX(130%); }

.show:hover .show__plate { border-color: rgba(255,255,255,.24); transform: translateY(-1px); }
.show input:focus-visible + .show__plate {
  border-color: var(--flare);
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: 2px;
}
.show input:checked + .show__plate {
  border-color: rgba(255,255,255,.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.045) 52%, rgba(0,0,0,.10) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.62),
    0 3px 16px rgba(0,0,0,.5);
}

.show__date {
  display: block;
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 10.5px;
  letter-spacing: .13em;
  color: var(--steel);          /* 6.4:1 on the plate face */
  transition: color .22s ease;
}
.show__city {
  display: block;
  margin: 1px 0 1px;
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: 15px;
  line-height: 1.08;
  letter-spacing: -.005em;
  text-transform: uppercase;
  overflow-wrap: break-word;    /* wrap, never clip - the plate hides overflow */
  color: var(--chrome);         /* 11.6:1 */
  transition: color .22s ease;
}
.show__venue {
  display: block;
  font-variation-settings: "wdth" 92, "wght" 500;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  color: var(--steel);          /* 6.4:1 on the plate face */
  transition: color .22s ease;
}
.show:hover .show__city { color: var(--chrome); }
.show input:checked + .show__plate .show__city  { color: var(--flare); }
.show input:checked + .show__plate .show__date,
.show input:checked + .show__plate .show__venue { color: var(--chrome); }

/* ============================================================
   FORM
   ============================================================ */
.form { display: block; }
.form__row { margin: 0 0 14px; }
.form__label {
  position: absolute; 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: 1px solid rgba(255,255,255,.13);
  border-radius: 2px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 var(--edge-lit);
  color: var(--chrome);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.3;
  transition: border-color .2s ease, background-color .2s ease;
}
.form__input::placeholder { color: #8A8782; }   /* 4.6:1 on the field */
.form__input:hover { border-color: rgba(255,255,255,.22); }
.form__input:focus {
  outline: none;
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
}

/* Chrome paints autofilled fields pale lavender and ignores
   background-color on :-webkit-autofill. The 1000px inset shadow is
   the only override, and it cannot be translucent - hence the
   pre-flattened --field-flat rather than the field's own rgba. */
.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 !important;
          box-shadow: 0 0 0 1000px var(--field-flat) inset !important;
  -webkit-text-fill-color: var(--chrome) !important;
  caret-color: var(--chrome);
  transition: background-color 9999s ease-in-out 0s;
}

/* Honeypot: display:none, never off-screen. Chrome and Edge autofill
   off-screen fields, which silently blocks real signups. */
.hp-row { display: none !important; }

.form__row--check { margin-top: 16px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--steel);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin: 1px 0 0;
  accent-color: #C9C7C4;
  cursor: pointer;
}
.form__check a { color: var(--chrome); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--flare); }

.form__error {
  margin: 6px 0 0;
  font-size: 11.5px;
  letter-spacing: .01em;
  color: #E7A9A2;                    /* the one non-neutral, and only on failure */
}
.form__error--global { margin-top: 12px; }

/* ============================================================
   BUTTON - a struck plate
   ============================================================ */
.btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 2px;
  background: linear-gradient(180deg, #EFEEEC 0%, #C8C6C2 52%, #A5A29D 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 3px 16px rgba(0,0,0,.5);
  color: #0B0B0C;
  font-family: inherit;
  font-variation-settings: "wdth" 106, "wght" 700;
  font-size: clamp(.82rem, 3.2vw, .95rem);
  letter-spacing: clamp(.06em, .5vw, .18em);
  text-transform: uppercase;
  white-space: nowrap;               /* shrink the type before it can wrap */
  cursor: pointer;
  transition: filter .2s ease, transform .12s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; filter: none; }

/* ============================================================
   intl-tel-input v25
   ============================================================ */
.iti { width: 100%; display: block; }
/* The vendor stylesheet owns the hidden state; until it loads the
   list and its search box flash open on first paint. */
.iti__dropdown-content.iti__hide { display: none !important; }
.iti__country-container { z-index: 3; }
.iti--separate-dial-code .iti__selected-country {
  background: rgba(255,255,255,.05);
  border-radius: 2px 0 0 2px;
}
.iti__selected-country:hover { background: rgba(255,255,255,.09); }
.iti__selected-dial-code { color: var(--steel); font-size: 14px; }
.iti__dropdown-content {
  background: #171615;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 3px;
  box-shadow: 0 20px 44px rgba(0,0,0,.72);
  color: var(--chrome);
}
/* Keep the vendor's horizontal padding: 30px left / 28px right are
   reserved for the absolutely positioned search icon and clear
   button. A padding shorthand wipes them and the magnifier lands on
   top of the word "Search". */
.iti__search-input {
  padding: 11px 30px 11px 32px;
  background: rgba(255,255,255,.05);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: var(--chrome);
  font-family: inherit;
  font-size: 14px;
}
.iti__search-input::placeholder { color: #8A8782; }
.iti__search-input:focus { outline: none; background: rgba(255,255,255,.09); }
.iti__country-list { scrollbar-width: thin; }
.iti__country { padding: 9px 12px; font-size: 14px; }
.iti__country.iti__highlight,
.iti__country:hover { background: rgba(255,255,255,.10); }
.iti__dial-code { color: var(--steel); }

/* ============================================================
   FOOTER - full width, Basslayerz shape in the chrome palette
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px clamp(16px, 4vw, 40px) 26px;
  background: rgba(8,8,10,.62);
  border-top: 1px solid rgba(255,255,255,.09);
  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(--steel); letter-spacing: .02em; }
.foot__legal a { color: var(--steel); text-decoration: none; }
.foot__legal a:hover { color: var(--flare); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--steel);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
}
.site-built a:hover { border-color: rgba(255,255,255,.4); color: var(--chrome); }

/* ============================================================
   LAYOUT - aspect-ratio thresholds, not device widths, so there is
   no gap at squarish window shapes (~570-900px wide).
   ============================================================ */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(30px, 4.4vw, 60px);
  }
  /* The panel gets a FIXED width and the artwork absorbs all the shrinking.
     With two flexible bases (640 + 480) both columns shrank proportionally
     at in-between window shapes: at 888px wide the panel fell to ~333px,
     which wrapped city names mid-word and pushed the title past its own
     edge. An image can be any width; a form cannot. */
  .media  { flex: 1 1 0; min-width: 0; max-width: 640px; }
  .signup { flex: 0 0 auto; width: 460px; min-width: 0; }
  .art    { max-width: min(640px, calc((100svh - 88px) * 0.8)); }
  .panel  { max-width: 460px; }
}

/* Landscape phones: wide enough to satisfy the two-column test but
   almost no height, so the desktop treatment renders cropped.
   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 { padding: 14px clamp(12px, 3vw, 26px); align-items: start; }
  .stage__inner {
    flex-direction: row;
    align-items: start;
    gap: 20px;
    min-height: 0;
  }
  /* .media needs an EXPLICIT basis. With a content-derived one the poster's
     intrinsic width becomes the column's claim and the panel gets squeezed
     to nothing. Size the column off the short viewport height, converting
     to width with the poster's own 4:5 ratio (w = h * 0.8).

     Note the calc nesting: `calc(100svh - 60px) * 0.8` is INVALID - the
     multiplication has to be inside the calc, or the whole declaration is
     dropped and .art silently falls back to the base max-width. */
  .media  { flex: 0 0 auto; min-width: 0; width: min(34vw, calc((100svh - 60px) * 0.8)); }
  .signup { flex: 1 1 auto; min-width: 0; }
  .panel  { max-width: none; }
  .art    { max-width: none; }
  .panel__inner { padding: 16px 18px 18px; }
  .panel__title { font-size: clamp(1.4rem, 3.6vw, 1.8rem); }
  .panel__lede  { font-size: 12.5px; margin-bottom: 14px; }
  .sale { margin-bottom: 14px; }
  .sale__label { margin-bottom: 6px; }
  .clock__well { padding: 6px 3px 5px; }
  .clock__num  { font-size: 1.1rem; }
  .clock__lbl  { margin-top: 3px; font-size: 8px; }
  .sale__list  { margin-top: 6px; }
  .sale__list li { padding: 5px 8px 6px; }
  .sale__when  { font-size: 11.5px; }
  .shows { margin-bottom: 14px; }
  .shows__rack { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .show__plate { padding: 6px 24px 7px 9px; }
  .show__tick  { top: 6px; right: 6px; width: 13px; height: 13px; }
  .show__tick::after { left: 3px; }
  .show__city  { font-size: 12.5px; font-variation-settings: "wdth" 96, "wght" 800; }
  .show__venue { font-size: 9.5px; letter-spacing: .06em; }
  .form__input { padding: 9px 12px; font-size: 14px; }
  .btn { margin-top: 12px; padding: 11px 16px; }
  .foot { padding: 10px clamp(12px, 3vw, 26px) 14px; }
}

/* Narrow phones: one plate per row - two columns squeeze
   "VICTORIA WAREHOUSE" past legibility below about 380px. */
@media (max-width: 379px) {
  .shows__rack { grid-template-columns: minmax(0, 1fr); }
  .sale__list  { grid-template-columns: minmax(0, 1fr); }
}

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

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.iti__selected-country:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  /* the reflection resolves to a static lit face rather than sweeping */
  .show__plate::after { transition: none; transform: translateX(130%); opacity: .35; }
  .show__tick, .show__tick::after { transition: none; }
  .show__plate, .show__city, .show__date, .show__venue,
  .form__input, .btn { transition: none; }
  * { scroll-behavior: auto; }
}