/* ============================================================
   Presale sign-up. Client: Louder Entertainment.

   NOTE: artist, venue and date are deliberately absent from this comment.
   This file is publicly fetchable while the show is unannounced; add them
   at announce if wanted, never before.

   DIRECTION
   Full-screen, built from the client's layers rather than a boxed poster.
   Wide viewports: the client's composed studio plate fills the screen,
   pinned bottom-left at exactly the viewport height, and the billing and
   date layers are placed in svh against that plate's own geometry, so they
   stay locked to the figure at any window size. The form sits on the empty
   studio grey to the right. Portrait: billing on the plain studio ground,
   then the transparent figure at full width so its opaque floor meets the
   screen edges with no seam, then the form.

   COLOUR - literal pixels off the supplied layers:
     #3F484D -> #1F2123  the plate's right edge, top to bottom (wide fill)
     #1F2123             the studio floor (lower ground, footer)
     #B3B2AB             the backdrop grey (secondary copy on the panel)
     #F26522             the lockup orange (button, title hook, numerals)
     #0A76AB             the lockup's hard offset shadow
     #17222D             the suit navy (the sign-up card)
   NO black text anywhere (Adam, 25 Sep): white on orange everywhere. White on
   #F26522 is 3.75:1, which passes only as LARGE text, so the button label is
   19px/800 (large-bold threshold 18.66px) with the lockup's blue text shadow;
   the small countdown badge sits on the deeper #D9531A (4.0:1). Small orange
   text on the panel uses the lifted #FF8A4C (5.2:1).

   TYPE - one family, two extremes. Archivo variable: width 62 / weight
   900 caps for display, which lands on the poster's condensed black
   grotesque, and normal width for every line people actually read.

   SIGNATURE - the countdown. Its numerals are set exactly like the
   poster lockup: condensed black caps in orange over a hard blue offset
   shadow. That shadow appears nowhere else on the page.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260925-1") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --floor:     #1F2123;   /* studio floor: lower ground + footer */
  --panel:     #17222D;   /* sign-up card, OPAQUE */
  --field:     #0E161E;   /* form fields, OPAQUE - see the autofill rule */
  --line:      rgba(179,178,171,.18);
  --line-hi:   rgba(179,178,171,.34);

  --white:     #FFFFFF;
  --studio:    #B3B2AB;   /* backdrop grey - secondary copy */
  --studio-lo: #8B8F93;   /* hints, placeholders */

  --orange:    #F26522;   /* lockup orange */
  --orange-hi: #FF8A4C;   /* small orange text on the panel */
  --orange-dn: #D9531A;   /* pressed */
  --blue:      #0A76AB;   /* lockup shadow */

  --danger:    #FF8F7A;
  --whatsapp:  #1B9E4B;   /* deeper WhatsApp green so a WHITE label holds (large text) */

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --maxw: 1080px;
}

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

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

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

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

/* ============================================================
   SCENE
   Default (portrait / narrow) = STACKED: billing on the plain studio
   ground, the figure at full width, the date over its floor, then the form.
   The WIDE block further down re-places the same three layers over the
   client's composed plate.
   ============================================================ */
.stage {
  flex: 1 0 auto;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bill {
  position: relative;
  width: 100%;
  margin: 0;
  padding-top: 0;
  background: url("/assets/images/ground-1920.webp?v=20260925-2") center top / cover no-repeat, var(--floor);
  overflow: hidden;
  text-align: center;
}
/* The figure's floor is opaque but its bottom row is not one colour
   (#282B2A beside the suit, near-black under it, #6D6D6B at the right), so a
   short fade takes it into the flat floor the form sits on. */
.bill::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16%;
  background: linear-gradient(180deg, rgba(31,33,35,0), var(--floor));
  pointer-events: none;
  z-index: 5;
}
/* POSTER COORDINATES. The figure layer IS the poster canvas (1920x2400),
   and the client's billing, date and partner layers were cut from that same
   canvas, so every layer is placed at its exact poster position: 1 poster px
   = 100/1920 vw here (and 1/24 svh on the wide plate). That is what puts the
   hair through the gap in the billing's SUMMER - 2027 rule: the rule layer
   is masked where the head crosses it, so the head reads as in FRONT of the
   line. Never resize or nudge one layer on its own, or the head misses the
   gap. Billing (122,95) w1686 - date (116,1962) w719 - partners (1568,2175). */
.bill__h1 { margin: 0; position: absolute; z-index: 3; left: 6.354vw; top: 4.948vw; width: 87.81vw; }
.bill__billing {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  animation: riseIn .9s cubic-bezier(.16,.84,.36,1) both;
}
/* The head must read as IN FRONT of the SUMMER - 2027 rule (Adam, 25 Sep).
   The client's billing layer only had a fixed gap in the rule, so the line
   showed through the semi-transparent hair strands. billing-1686.webp now
   has the rule rebuilt solid and then knocked out by the FIGURE'S OWN ALPHA
   at poster coordinates, so it works over the plate and over this layer
   alike. The figure is also stacked above the billing (z 4 > 3); its
   transparent top was cleaned to alpha 0, so it veils nothing. */
.bill__figure {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 4;
}
.bill__when {
  position: absolute;
  z-index: 6;
  left: 6.042vw;
  top: 102.19vw;
  margin: 0;
  width: 37.45vw;
}
/* partners sit on the plate only in the wide layout; stacked, they are in the footer */
.bill__partners { display: none; }
.bill__when img { display: block; width: 100%; height: auto; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.signup {
  position: relative;
  z-index: 7;   /* above the bill's fade (5) and date (6): it overlaps the bill's foot */
  width: 100%;
  max-width: 572px;
  padding: 0 16px clamp(28px, 6vw, 56px);
  margin-top: -4vw;
}

/* ============================================================
   SIGN-UP PANEL
   ============================================================ */
/* The card lifts off the photograph: top-lit suit-navy surface, a hairline
   highlight on the top edge, and a two-layer shadow (a tight contact shadow
   plus a long soft throw) so it reads as an object sitting in the studio,
   not a flat rectangle pasted on it (Adam, 25 Sep: "really flat looking"). */
.panel {
  width: 100%;
  position: relative;
  isolation: isolate;             /* keeps the country dropdown above everything */
  background: linear-gradient(180deg, #1E2C3A 0%, var(--panel) 38%, #131C25 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: clamp(24px, 3.2vw, 40px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 6px rgba(0,0,0,.28),
    0 28px 60px -18px rgba(0,0,0,.62),
    0 60px 120px -40px rgba(10,20,30,.55);
  animation: riseIn .9s .12s cubic-bezier(.16,.84,.36,1) both;
}
.panel__inner { position: relative; z-index: 1; }

/* --- 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; }

/* ============================================================
   STEPPER - top of the card (Adam, 25 Sep)
   Numbered discs joined by a rule: upcoming = outline, current = solid
   lockup orange, done = orange ring + orange tick. Driven by the same
   data-form-state app.js already flips.
   ============================================================ */
/* One compact row (Adam, 25 Sep: the stacked discs + labels took too much
   room): disc and label inline, a flexible rule between steps. */
.spine {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.spine__step {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--studio-lo);
  white-space: nowrap;
  transition: color .3s ease;
}
.spine__step:last-child { flex: 0 0 auto; }
/* connector: fills the space to the next step */
.spine__step:not(:last-child)::after {
  content: "";
  flex: 1 1 auto;
  min-width: 12px;
  height: 2px;
  margin: 0 10px 0 3px;
  border-radius: 2px;
  background: rgba(179,178,171,.18);
  transition: background-color .3s ease;
}
.spine__n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-stretch: 75%;
  font-weight: 800;
  font-size: 12px;
  color: var(--studio);
  border: 1.5px solid rgba(179,178,171,.34);
  background: #111A22;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.spine__t { overflow: hidden; text-overflow: ellipsis; }

/* current */
.panel[data-form-state="idle"]    .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="otp"]     .spine__step:nth-child(2) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(3) .spine__n {
  background: var(--orange); border-color: var(--orange); color: var(--white);
  box-shadow: 0 0 0 3px rgba(242,101,34,.18);
}
.panel[data-form-state="idle"]    .spine__step:nth-child(1),
.panel[data-form-state="otp"]     .spine__step:nth-child(2),
.panel[data-form-state="success"] .spine__step:nth-child(3) { color: var(--white); font-weight: 600; }
/* done: orange ring + orange tick on the dark disc (Adam 25 Sep: not blue).
   The current step is the SOLID orange disc, so done and current still differ. */
.panel[data-form-state="otp"]     .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(-n+2) .spine__n {
  background-color: #111A22; border-color: var(--orange); color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F26522' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.panel[data-form-state="otp"]     .spine__step:nth-child(1),
.panel[data-form-state="success"] .spine__step:nth-child(-n+2) { color: var(--studio); }
.panel[data-form-state="otp"]     .spine__step:nth-child(1)::after,
.panel[data-form-state="success"] .spine__step:nth-child(-n+2)::after { background: var(--orange); }

/* No mobile number = the CRM skips the SMS code. All three steps stay on
   screen (house rule: the flow reads as three named stages with Verify
   visibly skipped, never reshaped into two). Verify simply never advances:
   it keeps its not-yet-reached look through success, and so does its
   connector into Confirm. `.spine` in the chain is for specificity only. */
.panel[data-form-state][data-otp="off"] .spine .spine__step--verify { color: var(--studio-lo); font-weight: 500; }
.panel[data-form-state][data-otp="off"] .spine .spine__step--verify .spine__n {
  background: #111A22; background-image: none; border-color: rgba(179,178,171,.34); color: var(--studio); box-shadow: none;
}
.panel[data-form-state][data-otp="off"] .spine .spine__step--verify::after { background: rgba(179,178,171,.18); }

/* ============================================================
   COUNTDOWN - an inset tile between the intro and the fields.
   Numerals set like the poster lockup: condensed black caps in orange
   over the hard blue offset shadow. That shadow appears nowhere else.
   ============================================================ */
/* Centred unit (Adam, 25 Sep: left-aligned row under plain text "looks a
   bit naff"). The caption is an orange badge straddling the tile's top
   edge; each unit sits in its own rounded cell, centred. */
.clock {
  position: relative;
  margin: 24px 0 22px;
  padding: 26px 12px 14px;
  border-radius: 16px;
  text-align: center;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(242,101,34,.14), rgba(242,101,34,0) 70%),
    linear-gradient(180deg, #0E171F, #0B1218);
  border: 1px solid rgba(242,101,34,.32);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.35);
}
.clock__cap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 5px 14px;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  background: var(--orange-dn);
  text-shadow: 0 1px 0 rgba(10,118,171,.55);
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(242,101,34,.6);
}
.clock__cells {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.clock__cell {
  margin: 0;
  min-width: 0;
  padding: 10px 0 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.05);
}
.clock__n {
  display: block;
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(2.2rem, 7vw, 2.75rem);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--orange);
  text-shadow: .055em .055em 0 var(--blue);   /* the poster lockup's own shadow */
  font-variant-numeric: tabular-nums;
}
.clock__u {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--studio);
}
/* at zero: numerals go, the badge comes into the tile as the message */
.clock.is-open { padding: 16px 12px; }
.clock.is-open .clock__cells { display: none; }
.clock.is-open .clock__cap { position: static; transform: none; display: inline-block; white-space: normal; font-size: 14px; }

/* ============================================================
   PANEL COPY
   ============================================================ */
.panel__title {
  margin: 0 0 14px;
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 2.9rem);
  line-height: .98;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
}
/* House pattern: the second line carries the hook, in the lockup orange.
   <em> so the emphasis is in the markup; reset from italic. */
.panel__title em { font-style: normal; color: var(--orange); }

.panel__lede {
  margin: 0 0 12px;
  font-size: 15.5px;
  color: var(--studio);
  max-width: 50ch;
}
.panel__lede--last { margin-bottom: 22px; }
.panel__lede strong { color: var(--white); font-weight: 700; }
.panel__success-note { margin: 0 0 14px; color: var(--orange-hi); font-size: 14.5px; }

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin: 0 0 14px; }
.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: 14px 15px;
  font-family: var(--font);
  font-size: 16px;                /* 16px minimum or iOS zooms on focus */
  color: var(--white);
  background: var(--field);       /* OPAQUE - see the autofill rule */
  border: 1px solid var(--line-hi);
  border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: var(--studio-lo); }
.form__input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(242,101,34,.22);
}
.form__input--otp {
  font-stretch: 62%;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: .4em;
  text-align: center;
  text-indent: .4em;              /* re-centres text that tracking pushes left */
}

/* Chrome paints autofilled inputs pale lavender and IGNORES background on
   :-webkit-autofill; a huge inset box-shadow is the only reliable override.
   The shadow cannot be translucent, so it must equal the field's flattened
   rendered colour. Fields are opaque on purpose, so that is --field. */
.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__hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--studio-lo); }
.form__error { margin: 7px 0 0; font-size: 13px; color: var(--danger); }
.form__error--global { margin-top: 14px; }

/* Honeypot. display:none (plus the hidden attribute in the markup). NEVER
   off-screen positioning: Chrome/Edge autofill fills off-screen fields and
   the real signup is then silently dropped. */
.hp-row { display: none !important; }

.form__row--check { margin: 20px 0 22px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--studio);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--orange);
  cursor: pointer;
}
.form__check a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--orange-hi); }

.form__resend { margin: 16px 0 0; font-size: 13px; color: var(--studio); text-align: center; }
.form__resend-btn {
  font: inherit;
  color: var(--orange-hi);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.form__resend-btn:disabled { color: var(--studio-lo); cursor: default; text-decoration: none; }

/* ---------- buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  font-family: var(--font);
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(1rem, 4vw, 1.1rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;            /* shrink the type before it can ever wrap */
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
/* The lockup's blue offset shadow, echoed small under the primary action;
   it presses flat on :active. */
.btn--primary {
  color: var(--white);
  font-size: 19px;               /* large-bold text: white on orange needs it */
  text-shadow: 0 2px 0 rgba(10,118,171,.7);
  background: linear-gradient(180deg, #FF7A3A, var(--orange));
  box-shadow: 0 4px 0 var(--blue), 0 14px 24px -10px rgba(242,101,34,.55);
}
.btn--primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--blue), 0 6px 14px -8px rgba(242,101,34,.5); }
.btn--primary:hover:not(:disabled) { background: linear-gradient(180deg, #FF8748, #FF6D2B); }
.btn--whatsapp { color: var(--white); font-size: 19px; background: var(--whatsapp); margin-top: 6px; box-shadow: 0 14px 24px -12px rgba(37,211,102,.5); }
.btn--whatsapp:hover { filter: brightness(1.06); }
.btn__icon { flex: 0 0 auto; width: 20px; height: 20px; }

.wa-hook { margin: 20px 0 12px; font-size: 13.5px; color: var(--studio); }
.wa-hook strong { color: var(--white); font-weight: 700; }

/* ============================================================
   intl-tel-input v25
   ============================================================ */
.iti { width: 100%; display: block; }
/* app.js re-measures and sets padding-left inline; sane default until then.
   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 sheet loads, the list + search box flash open. */
.iti__dropdown-content.iti__hide { display: none !important; }

.iti__dropdown-content {
  background: var(--field);
  border: 1px solid var(--line-hi);
  border-radius: 12px;
  box-shadow: 0 26px 56px -22px rgba(0,0,0,.7);
  overflow: hidden;
}
.iti__search-input {
  /* Keep the vendor's horizontal reservation (icon left, clear button
     right). A padding shorthand that drops it puts the magnifier on top
     of the placeholder. */
  padding: 10px 30px 10px 32px;
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--white);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid var(--line-hi);
}
.iti__search-input::placeholder { color: var(--studio-lo); }
.iti__search-input:focus { outline: none; background: #131D27; }
.iti__country-list { background: var(--field); max-height: 240px; }
.iti__country { padding: 9px 12px; font-family: var(--font); font-size: 14px; color: var(--white); }
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(242,101,34,.16); }
.iti__dial-code { color: var(--studio); }
.iti__country-name { color: var(--white); }
.iti__selected-country { border-radius: 10px 0 0 10px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(242,101,34,.10); }
.iti__selected-dial-code { color: var(--white); font-family: var(--font); font-size: 15px; }
.iti__arrow { border-top-color: var(--studio); }
.iti__arrow--up { border-bottom-color: var(--studio); }
/* the vendor's search icon is drawn dark for light dropdowns */
.iti__search-icon { opacity: .7; filter: invert(1); }

/* ============================================================
   FOOTER - standard fleet band, credit in a pill
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 20px clamp(18px, 4vw, 44px) 28px;
  background: #16181A;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 5;
  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(--studio); letter-spacing: .02em; }
.foot__legal a { color: var(--studio); text-decoration: none; }
.foot__legal a:hover { color: var(--orange-hi); }
.foot__links { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
/* Organiser logos, stacked layout: centred under the sign-up card (Adam,
   25 Sep: not in the footer on mobile). Wide: on the plate, see below. */
.stage__partners { display: block; width: 140px; height: auto; margin: 4px auto clamp(28px, 7vw, 48px); position: relative; z-index: 4; }

.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--studio);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  transition: border-color .18s ease, color .18s ease;
}
.site-built a:hover { border-color: var(--orange); color: var(--white); }
/* White wordmark + teal roundel, drawn for dark bands: use as-is. */
.site-built img { display: block; opacity: .9; }

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

/* --- WIDE: the client's composed plate, full screen ---
   The plate (3976x2400) is drawn at exactly 100svh tall, pinned
   bottom-left. Past its right edge, a MIRRORED copy of its last quarter
   (scene-wide-edge, fading into the sampled edge colour) continues it with
   no seam, then that strip's own last pixel column repeats, so ultra-wide
   windows extend the studio instead of stretching it.
   The plate holds the figure at the SAME pixel coordinates as the poster
   (crown y563, verified), so the layers use the poster positions at
   1/24 svh per poster px. padding-left 75.4svh (the billing's right edge)
   is what guarantees the form never covers the billing or the figure.

   Two entry conditions: roomy windows, and landscape phones (which have
   the width but almost no height). */
@media (min-aspect-ratio: 5/4) and (min-width: 900px),
       (min-aspect-ratio: 3/2) and (min-width: 640px) and (max-height: 520px) {
  .stage {
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 28px clamp(16px, 5vw, 96px) 28px calc(75.4svh + 32px);
  }
  .stage::before {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 100vh;
    height: 100svh;
    z-index: 0;
    background:
      url("/assets/images/scene-wide-1920.webp?v=20260925-2") left bottom / auto 100% no-repeat,
      url("/assets/images/scene-wide-edge.webp?v=20260925-2") 165.7svh bottom / auto 100% no-repeat,
      url("/assets/images/scene-wide-fill.webp?v=20260925-2") left bottom / auto 100% repeat-x,
      #1F2123;
  }
  .bill {
    position: absolute;
    inset: 0 auto auto 0;
    width: 76svh;
    height: 100vh;
    height: 100svh;
    padding: 0;
    background: none;
    overflow: visible;
    z-index: 1;
  }
  .bill::after { display: none; }
  .bill__figure { display: none; }   /* the plate already carries the figure */
  .bill__h1 { top: 3.958svh; left: 5.083svh; width: 70.25svh; }
  .bill__when { left: 4.833svh; top: 81.75svh; width: 29.96svh; }
  .bill__partners { display: block; position: absolute; margin: 0; left: 65.33svh; top: 90.625svh; width: 9.75svh; height: auto; }
  .stage__partners { display: none; }
  .signup { width: min(520px, 100%); max-width: none; padding: 0; margin: 0; }   /* 520 not 440: Adam 25 Sep, "too thin" */
}
@media (min-aspect-ratio: 5/4) and (min-width: 900px) and (min-height: 1000px),
       (min-aspect-ratio: 5/4) and (min-width: 900px) and (min-resolution: 1.5dppx),
       (min-aspect-ratio: 3/2) and (min-width: 640px) and (max-height: 520px) and (min-resolution: 1.5dppx) {
  .stage::before {
    background-image:
      url("/assets/images/scene-wide-2560.webp?v=20260925-2"),
      url("/assets/images/scene-wide-edge.webp?v=20260925-2"),
      url("/assets/images/scene-wide-fill.webp?v=20260925-2");
  }
}

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

/* Phones: stack the footer as a centred column so it never reads as
   left-aligned at ~390px. */
@media (max-width: 480px) {
  .foot { flex-direction: column; align-items: center; gap: 12px; padding-bottom: 24px; }
  .foot__left { flex-direction: column; align-items: center; gap: 12px; }
  .panel { padding: 22px 18px; }
}

/* --- landscape phones: compact panel on top of the WIDE layout --- */
@media (min-aspect-ratio: 3/2) and (min-width: 640px) and (max-height: 520px) {
  .stage { padding: 12px 16px 12px calc(75.4svh + 16px); align-items: flex-start; }
  .signup { width: min(420px, 100%); }
  .panel { padding: 16px 18px; }
  .clock { margin: 18px 0 12px; padding: 20px 10px 10px; }
  .clock__cap { font-size: 11.5px; }
  .clock__cell { padding: 6px 0 5px; }
  .clock__n { font-size: 2rem; }
  .clock__u { margin-top: 4px; font-size: 11px; }
  .spine { margin-bottom: 12px; }
  .panel__title { font-size: 1.7rem; margin-bottom: 8px; }
  .panel__lede { font-size: 13px; margin-bottom: 7px; }
  .panel__lede--last { margin-bottom: 12px; }
  .form__row { margin-bottom: 10px; }
  .form__input { padding: 10px 13px; }
  .form__row--check { margin: 12px 0 14px; }
  .btn { padding: 12px 16px; }
  .iti__country-list { max-height: 150px; }
}

@media (max-width: 400px) {
  .spine__step { font-size: 11px; }
  .clock__cap { font-size: 11.5px; padding: 5px 11px; }
  .clock__cells { gap: 6px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible { outline: 2px solid var(--orange-hi); 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;
  }
}

/* ============================================================
   GENSALE: two ticket buttons (gensale.html, Adam 2026-10-01)
   One orange primary per seller, stacked, seller name on a second
   line. White on orange, as the sign-up button.
   ============================================================ */
.sellers { display: grid; gap: 16px; margin-top: 6px; }
.btn--seller { flex-direction: column; gap: 2px; padding-top: 12px; padding-bottom: 11px; }
.btn__sub {
  font-stretch: 100%;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  opacity: .95;
}
@media (min-aspect-ratio: 3/2) and (min-width: 640px) and (max-height: 520px) {
  .sellers { gap: 12px; }
  .btn--seller { padding-top: 9px; padding-bottom: 8px; }
}