/* ============================================================
   Worried About Henry · Arena MK · Sat 31 Oct 2026
   Pre-sale sign-up — index2.html rebrand on the 2026-08-04 artwork kit.

   Loaded ONLY by index2.html. index.html keeps style.css untouched.

   ------------------------------------------------------------
   DIRECTION — "one spine, left rail, medallion breathes right".

   The kit hands over five separate pieces (header, date, line-up,
   URL pill, logo row) instead of Plymouth's single baked lockup, and
   the date arriving as its OWN object is the thing this page is built
   around. It becomes a marquee: the date art sits astride a crimson
   hairline that runs the full width of the page and fades out before
   it can touch the medallion. Everything else hangs beneath it.
   That rule is the only ornament on the page — no glass, no blur, no
   gradients, no second accent.

   Both plates crop the medallion hard against the RIGHT edge, so all
   UI lives in a left rail and .hero reserves a gutter (--mask-zone)
   that nothing may cross at any window shape.

   ------------------------------------------------------------
   COLOUR — sampled, not chosen. header/date/linup/footer.png all
   return the same two values, and the plates bottom out at #040506:

     type    #F4EBEE      accent  #A03239      plate  #040506

   The accent is DARK (2.86:1 on the plate), so unlike Plymouth's
   light terracotta it can never carry type on the background. It is
   used strictly as fill, rule and border; the one place text sits on
   it is the filled CTA pill, where bone-on-crimson measures 6.1:1.
   Nothing here invents a third hue to get around that.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --ink:        #06080A;   /* dominant plate pixel, rounded to a flat base */
  --ink-deep:   #030405;
  --bone:       #F4EBEE;   /* exact type colour, all four artwork files    */
  --bone-dim:   rgba(244, 235, 238, 0.64);
  --bone-faint: rgba(244, 235, 238, 0.44);
  --crimson:    #A03239;   /* exact accent, date/line-up/footer art        */
  --crimson-lift: #BE3B44; /* hover only — same hue, lifted for feedback   */
  --danger:     #F58891;   /* light tint: errors must be readable on ink   */

  --rule:       rgba(160, 50, 57, 0.55);   /* the artwork's pill stroke    */
  --rule-soft:  rgba(244, 235, 238, 0.13);
  --field-flat: #121416;   /* field-over-panel-over-plate, flattened
                              (gotcha 30 — autofill shadow can't be rgba)  */

  --display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --sans:    "Barlow", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --label:   "Barlow Condensed", "Barlow", Arial, sans-serif;

  --panel-w:   468px;
  --mask-zone: 0px;        /* widened at the two-column breakpoint         */
  --pad-x:     clamp(18px, 5vw, 56px);
}

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

/* gotcha 16: html carries the base colour so body can stay transparent over
   the fixed .bg layer. An opaque body paints over z-index:-1. */
html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: transparent;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }

.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 plate ---------- */
/* Client photography, unprocessed: resize only. No scrim and no blur — the
   same call the art director made on Cardiff and Plymouth. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;   /* tall plate: medallion sits top-right */
}

/* Which PLATE is loaded is decided by <picture> in the HTML, and this is the
   matching anchor rule — the two conditions must stay identical or a squarish
   window gets the wide crop pinned to its centre and loses the medallion off
   the right edge entirely. Deliberately NOT tied to the layout breakpoints
   below: the plate switches at 640px, the two-column layout at 1250px, and in
   between the wide crop is simply a right-anchored backdrop. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) {
  .bg img { object-position: right center; }
}

/* ---------- Stage ---------- */
.stage {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.hero {
  flex: 1 1 auto;
  display: grid;
  /* Tight by default and opened up only where it earns it (.lineup, .panel
     below). The artwork is one poster cut into pieces, so the pieces have to
     sit like a poster — a uniform 24px band between every block reads as the
     gaps Adam kept flagging, not as rhythm. */
  row-gap: clamp(9px, 1.4vw, 15px);
  column-gap: clamp(15px, 2.4vw, 24px);
  align-content: start;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;                /* gotcha 10: auto at EVERY breakpoint */
  padding: clamp(22px, 4.2vw, 48px) var(--pad-x) clamp(26px, 4vw, 44px);
  padding-right: calc(var(--pad-x) + var(--mask-zone));
  grid-template-areas:
    "head"
    "date"
    "lineup"
    "panel"
    "endmark";
}

/* ---------- Header art (title + venue pills) ---------- */
.head { grid-area: head; }
.head img { width: min(100%, 620px); }

/* ============================================================
   THE LEFT RAIL — date, line-up, endmark.
   ------------------------------------------------------------
   THE RULE THAT KEEPS BEING RELEARNED ON THIS PROJECT: the panel
   must never SPAN grid rows. When it does, and it is taller than
   the column beside it (it usually is — the idle form runs ~620px),
   the surplus height is shared out between the rows it spans and
   opens holes between the left-hand items. That is the "too far
   apart" note on the original build, and it is what put an empty
   band above the sign-up box and another under the line-up in the
   first cut of this page (Adam, 2026-08-04).

   So on wide layouts the whole rail is ONE grid item — a flex
   column that sizes to its own content and sits align-self:start —
   opposite a panel occupying exactly one row.

   Narrow layouts want a different ORDER, not a different structure:
   the form has to come before the URL pill and the logo row or it
   gets pushed down the page. Rather than duplicate the markup, the
   rail dissolves with display:contents and its three children place
   themselves straight into .hero's areas.
   ============================================================ */
.rail { display: contents; }

/* The date is one fact and the line-up is the reason anyone signs up, so the
   date is deliberately the smaller of the two (Adam, 2026-08-04). It hangs
   directly off the title with almost no air between them — they are two
   halves of the same poster header. */
.datestub { grid-area: date; margin-top: -2px; }
.datestub img { width: min(42%, 158px); }

.lineup { grid-area: lineup; margin-top: clamp(4px, 1vw, 10px); }
.lineup img { width: min(92%, 340px); }

/* ---------- Endmark: URL pill + partner logos ---------- */
.endmark {
  grid-area: endmark;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
  min-width: 0;
}
.wahurl {
  display: block;
  width: fit-content;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.wahurl img { width: min(74%, 258px); }
.wahurl:hover { opacity: 0.82; transform: translateY(-1px); }
.partners img { width: min(84%, 300px); }

/* ============================================================
   PANEL — the sign-up card
   gotcha 5: isolate the stacking context and never lay an absolute frame
   over the children, or the country dropdown becomes unclickable.
   ============================================================ */
.panel {
  grid-area: panel;
  isolation: isolate;
  width: 100%;
  max-width: var(--panel-w);
  /* The one place a real gap belongs — art column above, form below. It lives
     in this shorthand rather than a separate margin-top rule because .panel's
     margin is re-declared per breakpoint (gotcha 10 keeps `auto` in the mix),
     and a standalone margin-top would be silently reset by every one of them. */
  margin: clamp(6px, 1.4vw, 14px) auto 0 0;
  padding: clamp(20px, 3.4vw, 30px);
  background: rgba(6, 8, 10, 0.90);   /* legibility without a blur */
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}

/* State machine: exactly one wrapper visible. Each carries its own
   eyebrow + title + lede or the idle copy shows through. */
.panel__idle, .panel__otp, .panel__success { display: none; }
.panel[data-form-state="idle"]    .panel__idle,
.panel[data-form-state="otp"]     .panel__otp,
.panel[data-form-state="success"] .panel__success { display: block; }

/* The accent's one turn as a text background. Filled, not outlined: the
   artwork's pills are already outlined and doing that job overhead, and
   crimson type on the plate would measure 2.9:1. */
.panel__eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 14px 4px;
  border-radius: 999px;
  background: var(--crimson);
  font-family: var(--label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1.25;
}

.panel__title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 2.8rem);
  line-height: 0.96;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  text-wrap: balance;            /* gotcha 8: never nowrap a display title */
  color: var(--bone);
}
/* Second line stays bone and drops to 62% opacity rather than turning
   crimson — see the colour note at the top. */
.panel__title em {
  display: block;
  font-style: normal;
  color: rgba(244, 235, 238, 0.62);
}

.panel__lede {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bone-dim);
}
.panel__lede strong { color: var(--bone); font-weight: 600; }

/* gotcha 7: scope state paragraphs so they can't out-specify the eyebrow */
.panel__success p:not(.panel__eyebrow) {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bone-dim);
}
.panel__success-note {
  padding: 11px 14px;
  border-left: 2px solid var(--crimson);
  background: rgba(160, 50, 57, 0.16);
  color: var(--bone) !important;
  font-size: 14px;
}

/* ============================================================
   FORM
   ============================================================ */
/* gotcha 2: display:none ONLY. Off-screen positioning gets autofilled by
   Chrome/Edge, which silently blocks real signups. */
.form__honeypot { display: none !important; }

.form__row { position: relative; margin-bottom: 14px; }

/* Labels are sr-only, not display:none — placeholders carry the meaning
   visually, labels stay for screen readers. */
.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;
}

/* Square-ish corners = data entry; pills are reserved for actions. */
.form__input {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 16px;               /* 16px min or iOS zooms on focus */
  line-height: 1.3;
  color: var(--bone);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--rule-soft);
  border-radius: 5px;
  transition: border-color 0.18s ease, background 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.form__input::placeholder { color: var(--bone-faint); }
.form__input:hover { border-color: rgba(244, 235, 238, 0.26); }
.form__input:focus {
  outline: none;
  border-color: var(--crimson-lift);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(160, 50, 57, 0.30);
}

/* gotcha 30: :-webkit-autofill ignores background; only a huge inset shadow
   wins, and it must be the FLATTENED opaque stack (field over panel over
   plate = #121416), never 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(--bone) !important;
  caret-color: var(--bone);
  transition: background-color 9999s ease-in-out 0s;
}

.form__input--otp {
  font-family: var(--display);
  font-size: 1.75rem;
  letter-spacing: 0.42em;
  text-align: center;
  padding: 14px 10px 12px;
  text-indent: 0.42em;           /* recentre against the trailing tracking */
}

.form__error {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--danger);
}
.form__error--global { margin-top: 12px; text-align: center; }

/* Consent tick */
.form__row--check { margin: 16px 0 20px; }
.form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bone-dim);
}
.form__check input[type="checkbox"] {
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--crimson);
  cursor: pointer;
  flex: none;
}
/* Links stay bone with a crimson underline: crimson type on the panel is
   2.9:1, so the accent carries the signal and the text carries the contrast. */
.form__check a,
.panel a {
  color: var(--bone);
  text-decoration-color: var(--crimson-lift);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.form__check a:hover, .panel a:hover { text-decoration-color: var(--bone); }

/* ---------- Buttons: the filled pill is the one solid moment ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  font-family: var(--label);
  font-weight: 700;
  /* gotcha 26: shrink type before an uppercase tracked label can wrap */
  white-space: nowrap;
  font-size: clamp(0.92rem, 3.6vw, 1.06rem);
  letter-spacing: clamp(0.05em, 0.4vw, 0.11em);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn--primary {
  color: var(--bone);            /* 6.1:1 on #A03239 */
  background: var(--crimson);
  box-shadow: 0 8px 26px rgba(160, 50, 57, 0.30);
}
.btn--primary:hover:not(:disabled) {
  background: var(--crimson-lift);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(160, 50, 57, 0.42);
}
.btn:disabled { opacity: 0.62; cursor: progress; transform: none; }
.btn__arrow { font-size: 1.05em; line-height: 1; }

/* Outlined pill = secondary action (WhatsApp) */
.btn--ghost {
  color: var(--bone);
  background: transparent;
  border-color: var(--rule);
  margin-top: 12px;
}
.btn--ghost:hover { border-color: var(--crimson-lift); background: rgba(160, 50, 57, 0.14); }
.btn--ghost svg { width: 17px; height: 17px; flex: none; }
/* .panel a sets a text-decoration-color; the ghost button is a link too and
   must not inherit an underline. Declared after it on purpose. */
.panel a.btn { text-decoration: none; }

.form__resend {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--bone-faint);
}
.form__resend-btn {
  padding: 4px 12px 3px;
  font: inherit;
  font-weight: 600;
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
}
.form__resend-btn:hover:not(:disabled) { background: rgba(160, 50, 57, 0.16); }
.form__resend-btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- App download block ---------- */
.appcta {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
}
.appcta__hook {
  margin: 0 0 7px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.16rem;
  line-height: 1.14;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--bone);
}
.appcta__hook em { font-style: normal; color: rgba(244, 235, 238, 0.62); }
.appcta__copy {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--bone-dim);
}
.appcta__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.appcta__badge { display: block; transition: opacity 0.2s ease, transform 0.2s ease; }
.appcta__badge img { height: 40px; width: auto; }
.appcta__badge:hover { opacity: 0.85; transform: translateY(-1px); }

/* ============================================================
   FOOTER — full-width bar
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px var(--pad-x) 26px;
  background: rgba(3, 4, 5, 0.66);
  border-top: 1px solid var(--rule-soft);
  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;
  letter-spacing: 0.02em;
  color: var(--bone-faint);
}
.foot__legal a { color: var(--bone-faint); text-decoration: none; }
.foot__legal a:hover { color: var(--bone); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bone-faint);
  text-decoration: none;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--rule); color: var(--bone); }
.site-built img { display: block; opacity: 0.9; }

/* ============================================================
   INTL-TEL-INPUT v25 — dropdown + search box
   ============================================================ */
.iti { width: 100%; display: block; }
.iti__tel-input, .iti input[type="tel"] { width: 100%; }

/* gotcha 19: until the vendor stylesheet lands the list paints open */
.iti__dropdown-content.iti__hide { display: none !important; }

.iti--separate-dial-code .iti__selected-country,
.iti__selected-country {
  background: transparent;
  border-radius: 5px 0 0 5px;
}
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(255, 255, 255, 0.05); }
.iti__selected-dial-code { color: var(--bone); font-size: 15px; }
.iti__arrow { border-top-color: var(--bone-faint); }
.iti__arrow--up { border-bottom-color: var(--bone-faint); }

.iti__dropdown-content {
  background: #0E1113;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.66);
  overflow: hidden;
}
/* gotcha 33: keep the vendor's horizontal reservation (30px left / 28px
   right) or the magnifying glass lands on top of the word "Search". */
.iti__search-input {
  width: 100%;
  padding: 10px 30px 10px 32px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--bone);
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 0;
}
.iti__search-input::placeholder { color: var(--bone-faint); }
.iti__search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-bottom-color: var(--crimson-lift);
}
.iti__country-list {
  max-height: 248px;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.iti__country-list::-webkit-scrollbar { width: 8px; }
.iti__country-list::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 999px;
}
.iti__country {
  padding: 9px 14px;
  font-size: 14px;
  color: var(--bone-dim);
}
.iti__country.iti__highlight,
.iti__country:hover {
  background: rgba(160, 50, 57, 0.30);
  color: var(--bone);
}
.iti__country-name { color: inherit; }
.iti__dial-code { color: var(--bone-faint); }
.iti__divider { border-bottom-color: var(--rule-soft); }

/* ============================================================
   RESPONSIVE
   gotcha 20: aspect-ratio thresholds, not width alone, or squarish
   desktop windows fall in a gap between treatments.
   ============================================================ */
/* Two columns need rail(240) + panel(468) + gap(30) = 738px of content plus
   the reserved medallion gutter and the page padding, so the switch is at
   1250px — the same figure the Plymouth build settled on for the same
   composition. Below it the stacked flow runs. */
@media (min-width: 1250px) and (min-aspect-ratio: 7/10) {
  /* The medallion's bright core starts at 81.0% of the desktop plate's width
     and the plate is 1.484:1 (both measured). With object-fit:cover the
     rendered width is max(viewport width, viewport height x 1.484), so the
     reserve has to be max(vw, vh)-based; a vw-only clamp undershoots badly on
     squarish windows where the plate is cropped sideways. 22% rather than 19%
     clears the dark chain that rings the core, not just the red. */
  :root {
    --mask-zone: max(22vw, 33vh);
    --pad-x: clamp(24px, 4vw, 110px);
  }

  /* --mask-zone is viewport-relative because the medallion is positioned
     against the VIEWPORT, so .hero must span the viewport too. Capping and
     centring it means a 2880px screen reserves the gutter inside a 1560px
     box and the panel collapses. Anchor left — which is the left-rail idea
     anyway — and the gutter lines up with where the medallion really is. */
  /* TWO ROWS ONLY, and the panel occupies exactly one of them. The rail
     reassembles into a single flex column so the date, line-up and endmark
     size to themselves instead of being pushed apart to fill the panel's
     height. See the long note on .rail above — this is the whole fix for
     both empty bands. */
  .hero {
    max-width: none;
    margin: 0;
    align-content: center;
    column-gap: clamp(26px, 3.4vw, 52px);
    row-gap: clamp(10px, 1.4vw, 18px);
    grid-template-columns: minmax(240px, 360px) minmax(0, var(--panel-w));
    /* EVERY area a child claims must exist here. .endmark is a SIBLING of the
       panel, not a child of .rail, so when this template omitted an endmark
       area its `grid-area: endmark` resolved against line names that do not
       exist — the grid grew implicit tracks (440px 203px 0px 203px), the
       panel was squeezed to 203px and the endmark landed 1200px down the
       page. Both of Adam's "sign-up box is thin and tall" and "footer is in
       the completely wrong place" were this one bug. */
    /* The panel spans down the right while the endmark tucks straight under
       the line-up instead of waiting for the panel's full height to clear
       (Adam, 2026-08-04). The trailing 1fr row is what makes that safe: a
       spanning panel normally pushes its surplus height into the rows it
       spans and reopens a gap under the line-up, but a flexible track soaks
       up all of it, so the rail and endmark rows stay content-sized. */
    grid-template-areas:
      "head    head"
      "rail    panel"
      "endmark panel"
      ".       panel";
    grid-template-rows: auto auto auto 1fr;
    justify-content: start;
  }

  .rail {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.3vw, 16px);
    grid-area: rail;
    align-self: start;
    min-width: 0;
    /* NO align-items:flex-start. It makes each child shrink-to-fit, and a
       shrink-to-fit parent cannot resolve `width: min(100%, Npx)` on the art
       inside it — the line-up silently rendered 300px instead of its 440px
       cap. Default stretch gives the children the column's real width. */
  }
  /* Children are flex items now; their grid-area declarations are inert. */
  .datestub     { margin: 0; }
  .datestub img { width: min(100%, 185px); }
  .lineup       { margin: 0; }
  .lineup img   { width: min(100%, 360px); }

  /* Bottom row, but the pill and the logos stay stacked and locked to the
     left exactly as the supplied footer.png has them (Adam, 2026-08-04) —
     spreading them across the full width pulled the lock-up apart. */
  .endmark      { justify-self: start; align-self: start; gap: 11px; margin-top: clamp(4px, 1vw, 12px); }
  .wahurl img   { width: min(100%, 250px); }
  .partners img { width: min(100%, 290px); }

  .head img { width: min(100%, 760px); }
  .panel    { margin: 0; align-self: start; }
}

/* Wide desktop. The gutter is a fixed share of the viewport but the two
   columns are not, so past ~1400px the leftover lands as dead air between the
   panel and the medallion. Spend it on the line-up, which is what people
   actually read here. Budget at 1440x900: 1008px of content area against
   440 + 468 + 49 = 957. */
@media (min-width: 1440px) and (min-aspect-ratio: 7/10) {
  .hero { grid-template-columns: minmax(300px, 450px) minmax(0, var(--panel-w)); }
  .head img     { width: min(100%, 880px); }
  .datestub img { width: min(100%, 205px); }
  .lineup img   { width: min(100%, 450px); }
}

/* Landscape phones (gotcha 27): desktop-ish aspect, almost no height.
   Placed AFTER the desktop blocks so it wins at equal specificity. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 560px) {
  /* Trimmed to the medallion's bright core rather than its chain: at 844x390
     the plate scales by width, the core starts at 81% = 684px, and 18vw =
     152px lands the panel's right edge well clear of it. Over-reserving here
     steals the width the line-up needs to stay legible. */
  :root { --mask-zone: max(18vw, 27vh); }

  .hero {
    align-content: start;
    align-items: start;
    min-height: 0;
    row-gap: 9px;
    column-gap: clamp(14px, 2.2vw, 24px);
    padding-top: 14px;
    padding-bottom: 14px;
    grid-template-columns: minmax(150px, 210px) minmax(0, 360px);
    /* endmark area must exist here too — see the note in the desktop block. */
    grid-template-areas:
      "head    head"
      "rail    panel"
      "endmark panel"
      ".       panel";
    grid-template-rows: auto auto auto 1fr;
  }

  /* Restated, not inherited: the desktop block above is gated on min-width
     1250px, which a rotated phone never satisfies, so without these the rail
     would still be display:contents from the base and its children would fall
     into grid areas this layout does not define. */
  .rail {
    display: flex;
    flex-direction: column;
    gap: 7px;
    grid-area: rail;
    align-self: start;
    min-width: 0;
  }

  .head img     { width: min(100%, 540px); }
  .datestub     { margin: 0; }
  .datestub img { width: min(100%, 122px); }
  /* no max-height on the line-up: capping height crushes a portrait image
     to a sliver of its width */
  .lineup       { margin: 0; }
  .lineup img   { width: min(100%, 210px); }
  .endmark      { justify-self: start; gap: 7px; margin-top: 4px; }
  .wahurl img   { width: min(100%, 178px); }
  .partners img { width: min(100%, 198px); }

  /* A rotated phone has ~390px of height and the full idle panel needs ~490px,
     which buries the CTA below the fold. Everything below is about getting
     eyebrow → title → email → phone → consent → button onto one screen. The
     idle lede goes entirely: in this layout the header art already states the
     event, the marquee states the date and the line-up sits beside the panel,
     so it is the one genuinely redundant block. It is kept in the OTP and
     success states, where it carries instructions. */
  .panel { padding: 14px 16px; }
  .panel__eyebrow { margin-bottom: 8px; padding: 4px 11px 3px; font-size: 11px; }
  /* line-height 0.96 is fine at 2.8rem but collides at 1.3rem */
  .panel__title { font-size: 1.3rem; line-height: 1.06; margin-bottom: 10px; }
  .panel__idle .panel__lede { display: none; }
  .panel__otp .panel__lede,
  .panel__success p:not(.panel__eyebrow) { margin-bottom: 12px; font-size: 12.5px; }

  .form__row { margin-bottom: 10px; }
  .form__input { padding: 10px 12px; }
  .form__row--check { margin: 10px 0 11px; }
  .form__check { font-size: 11.5px; line-height: 1.45; }
  .btn { padding: 11px 18px; }

  .appcta { margin-top: 14px; padding-top: 12px; }
  .appcta__badge img { height: 34px; }
  .foot { padding-top: 12px; padding-bottom: 14px; }
}

/* Portrait phones and tablets */
@media (max-width: 899px) {
  .hero { justify-items: start; }
  /* gotcha 10: keep auto in the mix. Top value matches the base rule so the
     art-to-form gap survives this breakpoint. */
  .panel { margin: clamp(6px, 1.4vw, 14px) auto 0 0; }

  /* The mobile plate puts the medallion across rows 14.5%–50.2%, cols
     62.5%–100%, so on a phone the line-up does sit over its left flank.
     Reserving that band was tried on this project and read as "huge empty
     space, line-up in the wrong place", and it pushed the line-up below the
     fold. The medallion stays a backdrop. Do not reintroduce the reserve. */
}
@media (max-width: 560px) {
  /* The line-up runs large here: it is the reason people sign up, and on the
     tall plate it has the whole width to itself. The date pays for it. */
  .hero         { row-gap: clamp(8px, 2vw, 13px); }
  .datestub img { width: min(38%, 142px); }
  .lineup img   { width: min(94%, 322px); }
  .wahurl img   { width: min(62%, 190px); }
  .partners img { width: min(72%, 220px); }
  .appcta__badge img { height: 36px; }
  .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(--crimson-lift);
  outline-offset: 2px;
  border-radius: 4px;
}

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