/* ============================================================
   WAH LEEDS - Worried About Henry, O2 Academy Leeds
   Saturday 28 November 2026. Lineup revealed soon.
   Sign-up. Client: Louder Entertainment.

   DIRECTION
   No event poster was supplied, only the WAH brand kit (wordmark, face
   roundel, fonts), and the kit is strictly black and white. So the page
   IS the kit, at full size, with no boxes (Adam: "more full screen than
   boxed"): the left is a full-bleed black field carrying the wordmark,
   LEEDS and the facts, with the face drawn so big it runs off the edges.
   The right is the kit's other colour, a full-height white sheet, and the
   form sits straight on it. The two halves are each other's negative.

   COLOUR - literal values from the kit (WAH Branding NEW 2025-02.jpg is
   #000000 ground + #FFFFFF mark). No accent: the brand has none.
     #000000 black, #FFFFFF white
     #3D3D3D soft ink on white   10.87:1
     #6B6B6B hint on white        5.33:1
     #B3261E error on white       6.57:1
   The only colour on the page is the WhatsApp button's own green.

   TYPE - Big Shoulders Display Black (SIL OFL), the free match for the
   kit's Bulevar Poster (squared bowls, condensed, heavy). Bulevar is "all
   rights reserved" and the kit's Helvetica Neue is commercial, so neither
   ships. Body is the system Helvetica stack: no file, no licence.
   The panel titles' second line is OUTLINED rather than coloured, the
   house "hook" device rendered in a palette that has no accent.

   MOTION - the face's pupils (face.js): one entrance glance, then worried
   darting, pointer-follow and look-at-the-focused-field. Nothing else
   moves. All of it is off under reduced motion.
   ============================================================ */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("/assets/fonts/BigShouldersDisplay-900.woff2?v=20261003-1") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --black:    #000000;
  --white:    #FFFFFF;
  --ink-soft: #3D3D3D;
  --hint:     #6B6B6B;
  --danger:   #B3261E;
  --field:    #FFFFFF;    /* OPAQUE on purpose, see the autofill rule */
  --whatsapp: #25D366;

  --display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --body:    "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", "Liberation Sans", sans-serif;

  --gutter: 16px;
}

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

/* The `hidden` attribute is only display:none in the UA stylesheet, the weakest
   layer of the cascade, so ANY author rule that sets display beats it. Keep
   this rule ABOVE everything that sets display, and never remove it. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--black);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--body);
  color: var(--black);
  background: transparent;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ============================================================
   PAGE (stacked by default: phones, portrait tablets, squarish windows)
   ============================================================ */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   THE ART - full-bleed black field
   ============================================================ */
.art {
  container: art / inline-size;
  position: relative;
  overflow: hidden;               /* the face bleeds; this is the crop */
  background: var(--black);
  color: var(--white);
  padding: 22px var(--gutter) 24px;
}
/* the grid lives one level in, so the container query below can restyle it
   (a container query cannot restyle its own container) */
.art__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "mark" "row" "face";
  row-gap: 14px;
}

.art__h1 { grid-area: mark; margin: 0; font-weight: inherit; line-height: 0; }
.wordmark { display: block; width: 100%; height: auto; fill: currentColor; }

/* LEEDS + the three facts, side by side under the wordmark */
.art__row {
  grid-area: row;
  display: flex;
  align-items: flex-end;
  gap: 4cqw;
}
.art__city {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--display);
  font-weight: 900;
  /* LEEDS advances 2.187em (measured from the woff2): 20cqw = 44% of the column */
  font-size: 20cqw;
  line-height: .8;
  text-transform: uppercase;
  letter-spacing: -.005em;
}
.art__facts {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  font-family: var(--display);
  font-weight: 900;
  font-size: 4.35cqw;
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: .01em;
  /* the billing rule of a poster, above the facts */
  border-top: max(2px, .5cqw) solid currentColor;
  padding-top: .45em;
  margin-bottom: .1em;
}

/* the face: always the WHOLE roundel (Adam, 3 Oct: cropping it off the
   bottom read as the face disappearing). The svg fills its slot and the
   viewBox's default "meet" scales the roundel to fit, centred. */
.face-wrap {
  grid-area: face;
  position: relative;
  width: min(48%, 220px);         /* phones: small, so the form shows on first screen (Adam, 3 Oct) */
  justify-self: center;
  aspect-ratio: 1;
  margin-top: 6px;
}
.face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--white);
}

/* ============================================================
   THE SHEET - full-height white column, no box
   ============================================================ */
.sheet {
  position: relative;
  isolation: isolate;
  flex: 1 0 auto;
  background: var(--white);
  padding: 30px var(--gutter) 0;
  display: flex;
  flex-direction: column;
}

.signup {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
.panel {
  position: relative;
  isolation: isolate;             /* keeps the country dropdown on top */
}

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

/* ============================================================
   PANEL COPY
   ============================================================ */
.panel__title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.7rem, 13vw, 3.4rem);
  line-height: .9;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--black);
}
/* House pattern: the second line is the hook. No accent colour exists, so
   it is outlined, in the weight of the face's line work. */
.panel__title em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--black);
}
@supports not (-webkit-text-stroke: 1px black) {
  .panel__title em { color: var(--black); }
}
.panel__lede {
  margin: 0 0 10px;
  font-size: 15.5px;
  color: var(--ink-soft);
  max-width: 46ch;
}
.panel__lede--last { margin-bottom: 22px; }
.panel__lede strong { color: var(--black); font-weight: 700; }
.panel__success-note { margin: 0 0 12px; color: var(--black); font-size: 14.5px; font-weight: 700; }

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin: 0 0 12px; }
/* labels stay for screen readers; placeholders carry the meaning visually */
.form__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Pills, after the roundel. */
.form__input {
  width: 100%;
  padding: 14px 20px;
  font-family: var(--body);
  font-size: 16px;                /* 16px minimum or iOS zooms the page on focus */
  color: var(--black);
  background: var(--field);       /* OPAQUE - see the autofill rule below */
  border: 2px solid var(--black);
  border-radius: 999px;
  transition: box-shadow .18s ease;
}
.form__input::placeholder { color: var(--hint); opacity: 1; }
/* focus: a second ring outside the first, like the roundel's double line */
.form__input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--black);
}
.form__input--otp {
  font-family: var(--display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .42em;
  text-align: center;
  text-indent: .42em;             /* re-centres text that tracking pushes left */
}

/* Chrome paints autofilled inputs pale lavender and IGNORES background /
   background-color on :-webkit-autofill - a huge inset box-shadow is the only
   reliable override. It must be the field's FLATTENED OPAQUE colour, which is
   trivially --field here because the field is opaque white on white. */
.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(--black) !important;
  caret-color: var(--black);
  transition: background-color 9999s ease-in-out 0s;   /* stops the lavender flashing in */
}

.form__error { margin: 7px 0 0 20px; font-size: 13.5px; font-weight: 700; color: var(--danger); }
.form__error--global { margin: 14px 0 0; text-align: center; }

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

.form__row--check { margin: 18px 0 20px; }
.form__row--check .form__error { margin-left: 0; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  margin: 1px 0 0;
  accent-color: var(--black);
  cursor: pointer;
}
.form__check a { color: var(--black); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.form__resend {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
}
.form__resend-btn {
  font: inherit;
  font-weight: 700;
  color: var(--black);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.form__resend-btn:disabled { color: var(--hint); cursor: default; text-decoration: none; }

/* ---------- buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px 14px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.15rem, 5vw, 1.35rem);
  line-height: 1.1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;            /* shrink the type before it can ever wrap */
  text-align: center;
  text-decoration: none;          /* <a class="btn"> needs this, <button> doesn't */
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .12s ease;
}
.btn:disabled { opacity: .6; cursor: default; }
/* White on black, 21:1. Hover/focus adds the roundel's outer ring. */
.btn--primary { color: var(--white); background: var(--black); }
.btn--primary:hover:not(:disabled),
.btn--primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--black); }
.btn--primary:active:not(:disabled) { transform: scale(.985); }
.btn--whatsapp {
  color: #06301A;                 /* 7.33:1 on the WhatsApp green */
  background: var(--whatsapp);
  margin-top: 4px;
}
.btn--whatsapp:hover,
.btn--whatsapp:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--white), 0 0 0 5px #0B7A3B; }
.btn__icon { flex: 0 0 auto; width: 20px; height: 20px; }

.wa-hook { margin: 18px 0 12px; font-size: 14px; color: var(--ink-soft); }
.wa-hook strong { color: var(--black); font-weight: 700; }

/* ---------- WAH app (idle + success, every WAH build) ---------- */
.appcta { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.16); }
.appcta__hook {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.55rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.appcta__hook em { font-style: normal; color: transparent; -webkit-text-stroke: 1.2px var(--black); }
@supports not (-webkit-text-stroke: 1px black) {
  .appcta__hook em { color: var(--black); }
}
.appcta__copy { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.appcta__badges { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 14px; }
.appcta__badge { display: inline-flex; line-height: 0; border-radius: 8px; }
.appcta__badge img { height: 44px; width: auto; display: block; }
.appcta__badge:hover img { opacity: .82; }

/* ============================================================
   intl-tel-input v25
   ============================================================ */
.iti { width: 100%; display: block; }
/* app.js re-measures and sets padding-left inline; this is the sane default
   before it runs. Anything >= 80px breaks 320-390px viewports. */
.iti input.form__input { padding-left: calc(52px + 0.7rem); }
.iti__country-container { z-index: 3; }
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* Until the vendor stylesheet loads, the hidden state does not exist and the
   whole list plus search box flashes open on first paint. */
.iti__dropdown-content.iti__hide { display: none !important; }

.iti__dropdown-content {
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 18px;
  box-shadow: 0 22px 44px -16px rgba(0,0,0,.45);
  overflow: hidden;
}
.iti__search-input {
  /* Keep the vendor's horizontal padding reservation: 30px left clears the
     absolutely positioned search icon, 28px right clears the clear button. A
     padding SHORTHAND that drops them puts the magnifier on top of the
     placeholder text. Set the vertical values, keep the horizontal ones. */
  padding: 11px 30px 11px 32px;
  width: 100%;
  font-family: var(--body);
  font-size: 15px;
  color: var(--black);
  background: #F2F2F2;
  border: 0;
  border-bottom: 2px solid var(--black);
}
.iti__search-input::placeholder { color: var(--hint); }
.iti__search-input:focus { outline: none; background: #E8E8E8; }
.iti__country-list { background: var(--white); max-height: 240px; }
.iti__country {
  padding: 9px 12px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--black);
}
.iti__country:hover,
.iti__country.iti__highlight { background: #EDEDED; }
.iti__dial-code { color: var(--hint); }
.iti__country-name { color: var(--black); }
/* the flag chip follows the pill's curve */
.iti__selected-country { border-radius: 999px 0 0 999px; padding-left: 8px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: #EDEDED; }
.iti__selected-dial-code { color: var(--black); font-family: var(--body); font-size: 16px; }
.iti__arrow { border-top-color: var(--ink-soft); }
.iti__arrow--up { border-bottom-color: var(--ink-soft); }

/* ============================================================
   FOOTER - house footer, credit in a pill. Sits on white, so the
   credit logo (white wordmark + teal roundel, drawn for dark bands) is
   darkened and saturated, never invert()ed (that turns the teal red).
   ============================================================ */
.foot {
  margin-top: 34px;
  padding: 16px 0 22px;
  border-top: 1px solid rgba(0,0,0,.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.foot__legal { margin: 0; font-size: 12px; color: var(--ink-soft); letter-spacing: .01em; }
.foot__legal a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.foot__legal a:hover { color: var(--black); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(0,0,0,.28);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.site-built a:hover { color: var(--black); border-color: var(--black); }
.site-built img { display: block; filter: brightness(.36) saturate(1.45); }

/* ============================================================
   WIDE: art left, sheet right, both full height.
   Aspect-ratio threshold, not width alone (no gaps at squarish windows).
   ============================================================ */
@media (min-width: 900px) and (min-aspect-ratio: 7/10) {
  :root { --sheet-w: clamp(420px, 36vw, 580px); }
  .page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sheet-w);
    align-items: stretch;
  }

  /* The art becomes a SIZE container: full viewport height, sticky, and the
     wordmark / LEEDS / face are all sized off its real box, so nothing is a
     viewport guess. Its width is definite (1fr beside a definite sheet
     track), so containment cannot collapse it (gotcha 35). */
  .art {
    container: art / size;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding: clamp(24px, 4.5vh, 52px) clamp(28px, 3.6vw, 64px);
  }
  .art__in {
    height: 100%;
    grid-template-rows: auto auto minmax(0, 1fr);
    row-gap: clamp(14px, 2.6vh, 30px);
  }
  /* never let the wordmark eat the height on short, wide windows */
  .wordmark { width: min(100%, 92cqh); }
  .art__city { font-size: min(20cqw, 15cqh); }
  .art__facts { font-size: min(4.35cqw, 3.3cqh); border-top-width: max(2px, .4cqh); }

  /* the face takes all the height that is left, whole */
  .face-wrap {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    height: 100%;
    margin: 0;
    justify-self: stretch;
  }
  /* a little smaller than the full slot (Adam, 3 Oct), centred in it */
  .face { top: 9%; bottom: auto; height: 82%; }

  .sheet {
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(28px, 6vh, 72px) clamp(28px, 3.4vw, 60px) 0;
  }
  .signup { margin: auto; max-width: 420px; }
  .panel__title { font-size: clamp(3rem, 4.1vw, 4.2rem); }
  .panel__title em { -webkit-text-stroke-width: 2px; }
  .foot {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
  }

  /* Wide art column (big desktops): LEEDS and the facts stack bottom-left,
     the face takes the right and runs off the bottom-right corner. */
  @container art (min-aspect-ratio: 5/4) {
    .art__in {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
      grid-template-areas: "mark mark" "row face";
      column-gap: 3cqw;
    }
    .art__row {
      flex-direction: column;
      align-items: flex-start;
      gap: 2.2cqh;
      align-self: end;
      padding-bottom: 7cqh;
    }
    .art__city { font-size: min(24cqh, 17cqw); }
    .art__facts { font-size: min(3.5cqh, 2.6cqw); align-self: stretch; flex: 0 0 auto; }
  }
}
/* ---------- small phones ---------- */
@media (max-width: 400px) {
  .panel__lede { font-size: 15px; }
}

/* --- landscape phones are a first-class layout (gotcha 27) ---
   844x390, 932x430, 667x375: wide but almost no height. Compact
   side-by-side; the art column is height-capped and sticky, the sheet
   scrolls. Placed AFTER the wide blocks so it wins at equal specificity. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  :root { --sheet-w: 52vw; }
  .page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sheet-w);
  }
  .art {
    container: art / size;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding: 14px 18px;
  }
  .art__in {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "mark" "row" "face";
    row-gap: 8px;
  }
  .wordmark { width: 100%; }
  .art__row { flex-direction: row; align-items: flex-end; align-self: auto; padding: 0; gap: 4cqw; }
  .art__city { font-size: min(20cqw, 17cqh); }
  .art__facts { font-size: min(4.35cqw, 3.7cqh); flex: 1 1 auto; }
  .face-wrap { width: 100%; max-width: none; aspect-ratio: auto; height: 100%; margin: 0; }
  .sheet {
    min-height: 100vh;
    min-height: 100svh;
    padding: 18px 22px 0;
  }
  .signup { max-width: none; margin: auto; }
  .panel__title { font-size: 2.1rem; margin-bottom: 8px; }
  .panel__lede { font-size: 13px; margin-bottom: 6px; }
  .panel__lede--last { margin-bottom: 12px; }
  .form__row { margin-bottom: 9px; }
  .form__input { padding: 10px 16px; }
  .form__row--check { margin: 10px 0 13px; }
  .btn { padding: 11px 16px 10px; font-size: 1.1rem; }
  .appcta { margin-top: 16px; padding-top: 12px; }
  .appcta__badge img { height: 38px; }
  .iti__country-list { max-height: 150px; }
  .foot { margin-top: 16px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding: 12px 0 14px; }
}

/* ============================================================
   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: 2.5px solid var(--black);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}