/* WAH Leeds indexv2. Worried About Henry, artwork dated Sat 28 Nov 2026 (HEADERv2.png),
   20:00-02:00, "02 Academy Leeds" (as printed on the client's 6 Oct HEADER.png).
   Client: Louder Entertainment.

   Layout, geometry and component styling are the WAH tour family, forked from
   wah-bristol-dec26 (itself wah-bournemouth geometry, signed off 2026-09-10).
   Only the identity tokens and the artwork-driven measurements changed:
     --accent  #BA74C1, the literal orchid sampled out of HEADER.png, LINEUP.png
               and FOOTER.png (identical in all three)
     --bone    #F4EBEE, the client's own warm white from the same layers
     --void    #0C0F11, the bottom-left pixel of desktop_background.png

   CONTRAST (re-run for this accent, never inherited): white on #BA74C1 is
   3.30:1 and FAILS, dark ink #140A16 is 5.86:1, so .btn--primary keeps DARK
   text. The accent as small label text on the panel is 5.83:1, no tint needed.

   Standing client rules: NO scrim over the scene, NO backdrop-blur on the
   panel. Corners rounded: panel 14px, inputs 10px, buttons full pills.
   This file is used ONLY by indexv2.html; index.html keeps style.css. */

:root {
  --accent:      #BA74C1;
  --accent-hi:   #CF95D5;
  --bone:        #F4EBEE;
  --bone-soft:   rgba(244,235,238,.76);
  --bone-ghost:  rgba(244,235,238,.16);
  --void:        #0C0F11;
  --panel:       rgba(8,11,13,.92);
  --panel-edge:  rgba(244,235,238,.14);
  --gold:        #A88F67;
  --wa:          #0E7A6D;
  --wa-hi:       #139184;
  --panel-w:   468px;
  /* Reserved right-hand strip the content must not enter, so the plate face
     always has clear air. Viewport-relative because the face is positioned by
     object-position, not by pixels. Straight from wah-bournemouth. */
  --mask-zone: 0px;
  --r-panel: 14px;
  --r-btn:   999px;
  --r-input: 10px;
  --display: "Anton", "Arial Narrow", sans-serif;
  --body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@font-face { font-family:"Anton";  src:url(/assets/fonts/Anton-400.woff2) format("woff2");  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow"; src:url(/assets/fonts/Barlow-400.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow"; src:url(/assets/fonts/Barlow-500.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow"; src:url(/assets/fonts/Barlow-600.woff2) format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow"; src:url(/assets/fonts/Barlow-700.woff2) format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--void);
  color: var(--bone);
  font-family: var(--body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--accent-hi); }

/* ---------- Background ---------------------------------------------------
   Desktop fits the plate by HEIGHT and pins it right, so the face is never
   force-cropped vertically (the mistake Cardiff kept hitting with `cover`).
   Any area left beside it is --void, which IS the image's own edge pixel, so
   there is no visible seam. ---------------------------------------------- */
.bg {
  position: fixed; inset: 0; z-index: -2;
  background-color: var(--void);
  background-repeat: no-repeat;
  /* Client mobile file with the face LOWERED 110px (Adam, 2026-10-05: it
     sat under the header). Plate now y ~13-60% of the frame (450 and 225 were too far). Vertical moves
     must be made in the image: on most phones `cover` fits by HEIGHT, so
     background-position-y does nothing. Anchored RIGHT TOP: right so the face
     is never sliced, top so that on short phones (375x667, fitted by WIDTH)
     the crop comes off the empty bottom instead of pushing the face up. */
  background-image: url(/assets/images/v2/bg-mobile-1080.webp?v=20261005-8);
  background-position: right top;
  background-size: cover;
}
@media (min-aspect-ratio: 7/10) {
  .bg {
    background-image: url(/assets/images/v2/bg-desktop-1920.webp?v=20261005-8);
    /* Anchored right so the plate sits on the right edge and runs off it, the
       wah-bournemouth treatment. Client desktop file used as supplied (1.43:1):
       plate measured at x 76-100%, y 18-89%, so `cover` on a 16:9 screen trims
       ~10% top and bottom and the plate still sits whole inside the frame. */
    background-position: right center;
    background-size: cover;
  }
}
@media (min-aspect-ratio: 7/10) and (min-width: 1921px) {
  .bg { background-image: url(/assets/images/v2/bg-desktop-2560.webp?v=20261005-8); }
}
@media (max-aspect-ratio: 7/10) and (min-resolution: 2x) {
  .bg { background-image: url(/assets/images/v2/bg-mobile-1344.webp?v=20261005-8); }
}

/* Portrait: the plate SCROLLS AWAY with the page instead of staying fixed
   (Adam, 2026-10-05: the form scrolled over the face). The layer covers the
   first screen only and its last 14% fades into --void, which is the page
   colour below it, so there is no seam. Landscape/desktop stay fixed. */
@media (max-aspect-ratio: 7/10) {
  .bg { position: absolute; inset: 0 0 auto 0; height: 100svh; }
  .bg::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%;
    background: linear-gradient(to bottom, rgba(12,15,17,0), var(--void));
  }
}

/* Fine grain, barely there. Keeps large flat voids from banding on OLED. */
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.55'/></svg>");
}

/* ---------- Stage -------------------------------------------------------- */
.stage { flex: 1 1 auto; width: 100%; }
/* Single column is the BASE, for every width below the two-column breakpoint.
   .bill is display:contents at all sizes so its children sit directly on this
   grid and can be ordered (stacked) or placed into named areas (two-column).
   Order: masthead, line-up, sign-up, marks. */
.stage__inner {
  width: 100%; max-width: 1500px; margin: 0 auto;
  padding: clamp(1.4rem, 3.4vw, 3.2rem) clamp(1.1rem, 3.6vw, 3.4rem);
  display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 3vw, 3rem);
}
.bill__h1     { order: 1; }
.bill__lineup { order: 2; }
.signup       { order: 3; }
.bill__marks  { order: 4; }

/* ---------- Bill (client's own layers) ----------------------------------- */
.bill { display: contents; }
.bill__h1 { margin: 0; }
.bill__lockup { display: block; width: 100%; max-width: 700px; height: auto; }
.bill__lineup { display: block; width: 100%; max-width: 318px; height: auto; }
.bill__marks { display: grid; gap: .95rem; justify-items: start; }
.bill__pill { display: inline-flex; line-height: 0; }
.bill__pill img { display: block; width: 100%; max-width: 320px; height: auto; }
.bill__pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.bill__partners { display: block; width: 100%; max-width: 175px; height: auto; }

/* ---------- Stacked layout sizing ------------------------------------------
   Applies at every width below the two-column breakpoint, portrait and
   landscape alike. Line-up leads, directly under the masthead (Adam,
   2026-09-10), which is also wah-bournemouth's own stacked order.
   GEOMETRY NOTE, read before changing the line-up width. Size this by CAP
   HEIGHT, never by copying a sibling site's pixel width. Measured off the
   alpha row-profile, this Leeds art's tallest type run is 0.1723 of its width
   (Bristol 0.1524, Bournemouth 0.2262, Birmingham 0.1431). Widths below are
   chosen to render the family's caps: 215px = 37px mobile (Adam asked smaller than the 43px family size), 340px = 58px
   desktop, 355px = 61px at >=1280, 215px = 37px landscape phone.
   No max-height, that crushes a portrait image. */
/* Masthead only. drop-shadow follows the alpha channel of this transparent
   PNG, so it haloes the letterforms rather than laying a box over the artwork,
   which is how the type holds without the scrim this client has banned.
   ⛔ Deliberately NOT applied to .bill__lineup: Adam removed it there on
   2026-09-10 because the outer stop read as a shadow sitting under the image.
   Do not reinstate it on the line-up. */
.bill__lockup {
  filter: drop-shadow(0 1px 3px rgba(5,8,10,.95))
          drop-shadow(0 0 14px rgba(5,8,10,.85))
          drop-shadow(0 0 34px rgba(5,8,10,.55));
}

.bill__lineup   { max-width: min(62%, 215px); }   /* ~37px caps; was 250px, Adam 2026-10-05: smaller on mobile */
.bill__lockup   { max-width: 100%; }
.bill__marks    { gap: .8rem; }
.bill__pill img { max-width: 280px; }
.bill__partners { max-width: 150px; }
.panel          { max-width: 100%; }

/* ---------- Panel -------------------------------------------------------- */
.signup { display: block; }
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--r-panel);
  /* No backdrop-filter. Deliberate: rejected by this client. */
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 2px 0 rgba(244,235,238,.05) inset;
  max-width: 470px;
}
.panel__inner { padding: clamp(1.3rem, 2.2vw, 1.9rem); }

.panel__state { 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; }

.panel__title {
  margin: 0 0 .7rem;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 2.85rem);
  line-height: .96; letter-spacing: .012em; text-transform: uppercase;
  color: var(--bone);
}
.panel__title em { font-style: normal; color: var(--accent); }
.panel__lede { margin: 0 0 .7rem; font-size: 15px; line-height: 1.55; color: var(--bone-soft); text-wrap: pretty; }
.panel__lede strong { color: var(--bone); font-weight: 600; }
.panel__lede--last { margin-bottom: 1.25rem; }
.panel__success-note { margin: 0 0 .7rem; font-size: 15px; color: var(--accent-hi); }

/* The form element itself carries no box styling; the panel provides it. */
.form { margin: 0; }

/* app.js swaps this span's text for the busy label on submit, so it needs to
   be a real box, not just inherited button text. */
.btn__text { display: inline-block; }

/* ---------- Form --------------------------------------------------------- */
.form__row { margin-bottom: 1rem; }
.form__label {
  display: block; margin-bottom: .3rem;
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--bone-soft);
}
.form__input {
  width: 100%; display: block;
  padding: .72rem .8rem;
  background: rgba(0,0,0,.42);
  border: 1px solid var(--bone-ghost);
  border-radius: var(--r-input);
  color: var(--bone);
  font-family: var(--body); font-size: 16px; line-height: 1.3;
  transition: border-color .14s ease, background-color .14s ease;
}
.form__input::placeholder { color: rgba(244,235,238,.34); }
.form__input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0,0,0,.58);
  box-shadow: 0 1px 0 var(--accent);
}
.form__input--otp { letter-spacing: .42em; font-size: 20px; text-align: center; }

/* MANDATORY on new builds. Without it Chrome paints an autofilled field pale
   lavender over a dark form. The inset shadow has to be re-derived per palette,
   which is why it is not retrofitted fleet-wide. */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--bone);
  -webkit-box-shadow: 0 0 0 1000px #050708 inset;
  caret-color: var(--bone);
  transition: background-color 9999s ease-out 0s;
}

/* Honeypot. display:none, NEVER off-screen: Chrome/Edge autofill treats an
   off-screen input as a live target, fills it, and the submit guard then
   silently discards a real signup. */
.hp-row { display: none !important; }

.form__row--check { margin-bottom: 1.2rem; }
.form__check { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; cursor: pointer; }
.form__check input {
  width: 18px; height: 18px; margin: 1px 0 0;
  accent-color: var(--accent); flex: none;
}
.form__check span { font-size: 13px; line-height: 1.5; color: var(--bone-soft); }
.form__check a { color: var(--accent-hi); }

.form__error { margin: .35rem 0 0; font-size: 12.5px; color: #FF8A7A; }
.form__error--global { margin-top: .8rem; }
.form__resend { margin: .85rem 0 0; font-size: 13px; color: var(--bone-soft); text-align: center; }
.form__resend-btn {
  background: none; border: 0; padding: 0;
  color: var(--accent-hi); font: inherit; text-decoration: underline; cursor: pointer;
}

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; padding: .85rem 1rem;
  border: 0; border-radius: var(--r-btn);
  font-family: var(--display); font-weight: 400;
  font-size: 19px; letter-spacing: .045em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .14s ease, transform .12s ease;
}
.btn:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.btn--primary { background: var(--accent); color: #140A16; }
.btn--primary:hover { background: var(--accent-hi); }
.btn--primary:active { transform: translateY(1px); }
.btn--primary[disabled] { opacity: .6; cursor: default; }
.btn--whatsapp { background: var(--wa); color: #fff; margin-top: .35rem; }
.btn--whatsapp:hover { background: var(--wa-hi); }
.btn__icon { width: 20px; height: 20px; flex: none; }
.wa-copy { margin: 1.1rem 0 .6rem; font-size: 14px; line-height: 1.5; color: var(--bone-soft); }
.wa-copy strong { color: var(--bone); font-weight: 600; }

/* ---------- App CTA (both idle and success states) ----------------------- */
.appcta { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--bone-ghost); }
.appcta__hook {
  margin: 0 0 .5rem;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.05; letter-spacing: .02em; text-transform: uppercase;
  color: var(--bone);
}
.appcta__hook em { font-style: normal; color: var(--accent); }
.appcta__copy { margin: 0; font-size: 14px; line-height: 1.55; color: var(--bone-soft); text-wrap: pretty; }
.appcta__badges { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1rem; }
.appcta__badge { display: inline-flex; line-height: 0; }
.appcta__badge img { height: 44px; width: auto; display: block; transition: transform .15s ease; }
.appcta__badge:hover img { transform: translateY(-2px); }
.appcta__badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Footer ------------------------------------------------------- */
.foot {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  align-items: center; justify-content: space-between;
  padding: 1rem clamp(1.1rem, 3.6vw, 3.4rem) 1.4rem;
  border-top: 1px solid var(--bone-ghost);
  margin-top: auto;
}
.foot__left { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }
.foot__legal { margin: 0; font-size: 12.5px; color: var(--bone-soft); }
.foot__legal a { color: var(--bone-soft); }
.foot__legal a:hover { color: var(--accent-hi); }
/* The Furiosa credit is an outlined PILL, matching wah-bournemouth and the
   rest of the fleet. It reads as a stamp, not as body text. */
.site-built { margin: 0; }
.site-built a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  font-size: 11px; letter-spacing: .04em;
  color: var(--bone-soft); text-decoration: none;
  border: 1px solid var(--bone-ghost);
  border-radius: 999px;
  transition: border-color .15s ease, color .15s ease;
}
.site-built a:hover { border-color: var(--accent); color: var(--bone); }
.site-built img { display: block; opacity: .9; }

/* Footer centres on a phone: at that width the two ends of a space-between
   row sit against opposite edges and read as two unrelated fragments. */
@media (max-width: 700px) {
  .foot { justify-content: center; text-align: center; gap: .7rem; }
  .foot__left { justify-content: center; width: 100%; }
  .foot__legal, .site-built { width: auto; }
}

/* ---------- intl-tel-input ------------------------------------------------ */
.iti { width: 100%; display: block; }
.iti__dropdown-content {
  background: #0C1114; color: var(--bone);
  border: 1px solid var(--panel-edge); border-radius: var(--r-input);
}
.iti__country.iti__highlight, .iti__country:hover { background: rgba(186,116,193,.20); }
.iti__dial-code { color: var(--bone-soft); }
/* Vertical padding only. A `padding` shorthand here wipes the vendor's
   reserved padding-left:30px and the magnifier lands on the word "Search". */
.iti__search-input {
  padding: 9px 30px 9px 32px;
  background: #0C1114; color: var(--bone);
  border: 0; border-bottom: 1px solid var(--panel-edge); border-radius: 0;
}

/* ---------- Desktop / landscape --------------------------------------------
   wah-bournemouth geometry: the lockup spans the top, the line-up sits left,
   the panel sits immediately right of it (NOT at the far right), and the whole
   block hugs the left with --mask-zone reserved on the right so the plate face
   is never covered. --------------------------------------------------------- */
@media (min-aspect-ratio: 7/10) and (min-width: 1250px) {
  :root { --mask-zone: max(28vw, 37vh); }
  .stage__inner {
    align-content: center;
    justify-content: start;
    column-gap: clamp(26px, 3.6vw, 54px);
    row-gap: clamp(12px, 1.8vw, 22px);
    grid-template-columns: minmax(240px, 340px) minmax(0, var(--panel-w));
    grid-template-areas:
      "lockup lockup"
      "lineup panel"
      "marks  panel";
    padding-right: calc(clamp(1.1rem, 3.6vw, 3.4rem) + var(--mask-zone));
    min-height: calc(100svh - 62px);
    max-width: none;
    margin: 0;
  }
  .bill__h1     { grid-area: lockup; margin-bottom: clamp(6px, 1.4vw, 18px); }
  .bill__lineup { grid-area: lineup; align-self: start; }
  .bill__marks  { grid-area: marks;  align-self: start; }
  .signup       { grid-area: panel;  align-self: start; }
  .bill__lockup { max-width: min(100%, 760px); }
  /* 340px x 0.1723 = ~58px caps. See the GEOMETRY NOTE above. */
  .bill__lineup { max-width: min(100%, 340px); }
  .panel { max-width: var(--panel-w); margin: 0 auto 0 0; }
}
@media (min-width: 1280px) and (min-aspect-ratio: 7/10) {
  :root { --mask-zone: max(22vw, 31vh); }
  .stage__inner { grid-template-columns: minmax(280px, 355px) minmax(0, var(--panel-w)); }
  .bill__lockup { max-width: min(100%, 860px); }
  .bill__lineup { max-width: min(100%, 355px); }   /* ~61px caps */
}

/* Landscape phone. Real orientation, not an afterthought: at these heights the
   bill has to shrink hard or the panel falls below the fold entirely. */
@media (min-width: 640px) and (orientation: landscape) and (max-height: 560px) {
  :root { --mask-zone: max(14vw, 22vh); }
  .stage__inner {
    padding-block: .8rem;
    column-gap: 1.1rem; row-gap: .55rem;
    align-content: start; min-height: 0;
    justify-content: start;
    grid-template-columns: minmax(150px, 190px) minmax(0, 360px);
    grid-template-areas:
      "lockup lockup"
      "lineup panel"
      "marks  panel";
    padding-right: calc(clamp(1.1rem, 3.6vw, 3.4rem) + var(--mask-zone));
  }
  .bill__h1     { grid-area: lockup; margin-bottom: 0; }
  .bill__lineup { grid-area: lineup; align-self: start; }
  .bill__marks  { grid-area: marks;  align-self: start; }
  .signup       { grid-area: panel;  align-self: start; }
  .panel        { max-width: 360px; margin: 0 auto 0 0; }
  .bill__lockup { max-width: min(420px, 40vw); }
  .bill__lineup { max-width: min(215px, 24vw); }
  .bill__partners { max-width: 130px; }
  .bill__pill img { max-width: 220px; }
  .panel__inner { padding: 1rem; }
  .panel__title { font-size: 1.7rem; }
  .panel__lede { font-size: 13.5px; }
  .appcta { margin-top: 1rem; padding-top: .9rem; }
  .appcta__badge img { height: 38px; }
  .foot { padding-block: .6rem .8rem; }
}

@media (max-aspect-ratio: 7/10) {
  .stage__inner { gap: 1.35rem; }
  /* Portrait only: BOTH marks centre under the stacked bill, the
     worriedabouthenry.com pill and the partner-logo row (Adam, 2026-09-10).
     Deliberately NOT in the landscape-phone / two-column blocks, which keep
     justify-items: start so the marks stay flush with the column above. */
  .bill__marks { justify-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}