/* ============================================================
   Chelmsford Summer Series: Five - sign-up, chelmsford.live/five/
   Fri 27 Aug 2027, Central Park, Chelmsford. Louder Entertainment.
   Built 30 Oct 2026 from the oflynn engine.

   Brief: artwork left (NOT boxed), sign-up right; 16+ clearly visible with
   the under-18s line smaller in brackets; pre-sale countdown + general sale
   date (Adam, 30 Oct).

   The client sent the poster as LAYERS, so the left column rebuilds it live
   instead of boxing the flat poster: the tunnel plate is the page ground, the
   chrome FIVE logo sits above the band cut-out, and the CHELMSFORD lockup +
   date/venue sit over the dark floor at their feet, as on the poster.

   Palette, sampled from literal pixels of the layers:
     --orange  #F05C20  FIVE logo + CHELMSFORD lockup ink (240,92,32)
                        5.5:1 on --panel, so it can carry text and the CTA
     --ink     #06080D  floor of the tunnel plate (6,8,13): page ground
     --ice     #E2E9EA  tunnel light (226,233,234): headings, typed text
     --mist    #AEB6BC  body copy, 9.0:1 on --panel
     --mist-dim #8A939A placeholders/meta, 5.8:1 on --panel
     --panel   #11141B  ink lifted one step so the box separates from the floor
   Type: Instrument Serif Italic (OFL) = the artwork's own date/venue serif,
   and the same face chelmsford.live uses; Archivo variable (OFL) for UI.
   Both self-hosted, both already on the parent site.
   ============================================================ */

@font-face {
  font-family: "Instrument";
  src: url("/five/assets/fonts/InstrumentSerif-Italic.woff2?v=20261030-1") format("woff2");
  font-weight: 400;
  font-style: normal;   /* the file IS the italic; no synthetic slant on top */
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/five/assets/fonts/Archivo-var.woff2?v=20261030-1") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --orange: #F05C20;
  --orange-hi: #FF7339;
  --ink: #06080D;
  --ice: #E2E9EA;
  --white: #FFFFFF;
  --mist: #AEB6BC;
  --mist-dim: #8A939A;
  --panel: #11141B;
  --panel-edge: rgba(226,233,234,.14);
  --field: #1B1F28;          /* OPAQUE: it is also the autofill shadow colour */
  --line: rgba(226,233,234,.12);
  --line-hi: #343A45;
  --danger: #FF8F86;
  --whatsapp: #25D366;
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument", Georgia, "Times New Roman", serif;
  --panel-w: 28.5rem;   /* widened from 25rem (Adam, 30 Oct: box a bit thin) */
}

*, *::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; }

/* Ground colour lives on html, NOT body (gotcha 16): an opaque body paints
   over the fixed .bg plate. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font);
  color: var(--mist);
  background: transparent;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
:focus-visible { outline: 2px solid var(--orange-hi); outline-offset: 3px; }

/* ---------- the tunnel plate (fixed, behind everything) ----------
   Portrait crop by default; the wide plate from the two-column gate. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--ink) url("/five/assets/images/bg-mobile-720.webp?v=20261030-1") center top / cover no-repeat;
}
@media (min-width: 560px) {
  .bg { background-image: url("/five/assets/images/bg-mobile-1080.webp?v=20261030-1"); }
}

.page { flex: 1 0 auto; display: flex; flex-direction: column; overflow-x: clip; }

/* ============================================================
   STAGE - stacked by default (phones, tablets portrait):
   the poster, then sign-up, then the presenters row.
   ============================================================ */
.stage {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(22px, 6vw, 48px) clamp(12px, 3.5vw, 40px) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "bill" "signup" "presenters";
  justify-items: center;
  align-content: start;
  row-gap: clamp(26px, 6vw, 44px);
}
/* width:100% (never content-sized): .bill is a size container, and a
   container contributes zero width to content sizing (gotcha 35). */
.bill { grid-area: bill; width: 100%; max-width: 520px; container-type: inline-size; }
.signup { grid-area: signup; width: 100%; max-width: var(--panel-w); }
.presenters { grid-area: presenters; }

/* ============================================================
   THE BILL - the poster rebuilt from its layers. Sizes are in cqw so the
   whole composition scales as one piece with its column.
   ============================================================ */
.bill__h1 { margin: 0; line-height: 0; font-size: 1rem; }
.bill__logo {
  display: block;
  width: 88%;
  height: auto;
  margin: 0 auto -1.5cqw;      /* tucks the logo's bevel shadow onto the heads, as on the poster */
  position: relative;
  z-index: 2;
}

/* Band cut-out, cropped at the shins: the poster sinks the legs into the
   dark floor under the type, and the crop keeps the form closer to the top
   on phones. The ::after ramp is that floor. */
.bill__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 2037 / 1610;
  overflow: hidden;
  border-radius: 0 0 22px 22px;   /* soft bottom corners (Adam, 30 Oct) */
}
.bill__band {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.bill__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(6,8,13,0) 38%, rgba(6,8,13,.55) 58%, rgba(6,8,13,.9) 78%, var(--ink) 97%);
  pointer-events: none;
}
.bill__credits {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.5cqw;
  z-index: 1;
  text-align: center;
}
.bill__lockup {
  display: block;
  width: 50%;
  height: auto;
  margin: 0 auto 3cqw;
}
.bill__when {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(15px, 5.2cqw, 31px);
  line-height: 1.18;
  color: var(--white);
  text-shadow: 0 1px 14px rgba(6,8,13,.8);
}
.bill__when span { display: block; }

/* ---------- 16+ : the one loud mark after the art (brief: "clear 16+
   easily visible", then the under-18s line smaller, in brackets) ---------- */
/* Sits on its OWN solid ink pill: below the band the plate is still bright
   on phones (Adam, 30 Oct: the note was unreadable on mobile), so the row
   carries its own ground and reads wherever the plate puts it. */
.age {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3.4cqw, 16px);
  width: fit-content;
  max-width: 96%;
  margin: clamp(14px, 4cqw, 22px) auto 0;
  padding: 7px 20px 7px 7px;
  background: var(--ink);
  border: 1px solid rgba(240,92,32,.45);
  border-radius: 999px;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}
.age__badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(56px, 14cqw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 850;
  font-stretch: 112%;
  font-size: clamp(22px, 5.6cqw, 31px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.age__note {
  margin: 0;
  text-align: left;
  font-size: clamp(14px, 3.4cqw, 15.5px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--white);   /* ~19:1 on the ink pill */
  max-width: 24ch;
}

/* ---------- presenters: heart, Louder (from the poster's logo row) ---------- */
.presenters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 0;
}
.presenters img { display: block; width: auto; }
.presenters__heart { height: 24px; }
.presenters__louder { height: 38px; }   /* the sunburst makes it taller; wordmarks optically equal */

/* ============================================================
   PANEL
   ============================================================ */
.panel {
  position: relative;
  isolation: isolate;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(226,233,234,.08),
    0 30px 80px -26px rgba(0,0,0,.75);
}
.panel__inner { position: relative; z-index: 1; padding: clamp(24px, 3vw, 34px); }

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

/* House title pattern (Be first / for tickets.): the hook in the accent.
   The face is already italic, so em only changes colour. */
.panel__title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2.3rem, 9vw, 2.9rem);
  line-height: .98;
  letter-spacing: -0.005em;
  color: var(--ice);
  text-wrap: balance;
}
.panel__title em { font-style: normal; color: var(--orange); }
.panel__lede {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mist);
  max-width: 38ch;
}
.panel__lede--last { margin-bottom: 20px; }
.panel__lede strong { color: var(--ice); font-weight: 600; }
.panel__success-note { margin: 0 0 12px; color: var(--ice); font-size: 14.5px; }

/* ---------- pre-sale countdown + general sale date ----------
   app.js counts to data-target (UTC offset carried in the attribute, so
   every visitor counts to the same instant); at zero, .is-live swaps the
   clock for the "live now" line. */
.sale {
  margin: 0 0 20px;
  padding: 12px 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.countdown__label { margin: 0 0 7px; font-size: 13px; color: var(--mist); }
.countdown__label strong { color: var(--ice); font-weight: 600; }
.countdown__clock { display: flex; }
.countdown__unit {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 4px;
}
.countdown__unit + .countdown__unit { border-left: 1px solid var(--line); }
.countdown__unit b {
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.countdown__unit small { margin-top: 4px; font-size: 11.5px; color: var(--mist-dim); }
.countdown__live { display: none; margin: 0; font-size: 14.5px; color: var(--orange); font-weight: 600; }
.countdown.is-live .countdown__label,
.countdown.is-live .countdown__clock { display: none; }
.countdown.is-live .countdown__live { display: block; }
.sale__gen { margin: 10px 0 0; font-size: 13px; color: var(--mist); }
.sale__gen strong { color: var(--ice); font-weight: 600; }

/* ============================================================
   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;
}
.form__input {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font);
  font-size: 16px;                 /* 16px minimum or iOS zooms on focus */
  color: var(--ice);
  background: var(--field);        /* OPAQUE - see the autofill rule below */
  border: 1px solid var(--line-hi);
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: var(--mist-dim); opacity: 1; }
.form__input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240,92,32,.28);
}
.form__input--otp {
  font-weight: 700;
  font-size: 22px;
  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 on
   :-webkit-autofill - a huge inset box-shadow is the only reliable override.
   It must be the flattened OPAQUE colour of the field, which is simply --field
   because the field is opaque on purpose. Keep it opaque. */
.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(--ice) !important;
  caret-color: var(--ice);
  transition: background-color 9999s ease-in-out 0s;   /* stops the lavender flashing in */
}

.form__error { margin: 7px 0 0; font-size: 13px; color: var(--danger); }
.form__error--global { margin-top: 14px; }

/* Honeypot. display:none ONLY - off-screen positioning stays an autofill
   target in Chrome/Edge, which fills it and silently blocks real signups.
   The markup also carries the hidden attribute (belt and braces). */
.hp-row { display: none !important; }

.form__row--check { margin: 16px 0 18px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mist);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--orange);
  cursor: pointer;
}
/* Privacy line under the marketing tick box (kept out of the consent box itself). */
.form__note { margin: 10px 0 0 29px; font-size: 12px; line-height: 1.5; color: var(--mist); }
.form__note a { color: var(--ice); text-decoration: underline; text-underline-offset: 2px; }
.form__note a:hover { color: var(--orange-hi); }

.form__resend {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--mist-dim);
  text-align: center;
}
.form__resend-btn {
  font: inherit;
  color: var(--ice);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.form__resend-btn:disabled { color: var(--mist-dim); 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-weight: 750;
  font-stretch: 108%;
  font-size: clamp(1rem, 3.6vw, 1.06rem);
  white-space: nowrap;             /* shrink the type before it can ever wrap */
  text-align: center;
  text-decoration: none;           /* <a class="btn"> needs this */
  border: 0;
  border-radius: 12px;             /* same corner as the fields: one family of shapes */
  cursor: pointer;
  transition: transform .12s ease, background-color .18s ease, filter .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
.btn--primary { color: var(--ink); background: var(--orange); }   /* 6.0:1 */
.btn--primary:hover:not(:disabled) { background: var(--orange-hi); }
.btn--whatsapp {
  color: #06301A;                  /* 7.33:1 on the WhatsApp green */
  background: var(--whatsapp);
  margin-top: 4px;
}
.btn--whatsapp:hover { filter: brightness(1.06); }
.btn__icon { flex: 0 0 auto; width: 19px; height: 19px; }

.wa-hook { margin: 18px 0 12px; font-size: 13.5px; color: var(--mist); }
.wa-hook strong { color: var(--ice); font-weight: 600; }

/* ============================================================
   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(--panel);
  border: 1px solid var(--line-hi);
  border-radius: 12px;
  box-shadow: 0 26px 56px -18px rgba(0,0,0,.94);
  overflow: hidden;
}
.iti__search-input {
  /* Keep the vendor's horizontal padding reservation (30px left for the search
     icon, 28px right for the clear button). A padding SHORTHAND that drops them
     puts the magnifier on top of the placeholder. */
  padding: 10px 30px 10px 32px;
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ice);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid var(--line-hi);
}
.iti__search-input::placeholder { color: var(--mist-dim); }
.iti__search-input:focus { outline: none; background: #252A35; }
.iti__country-list { background: var(--panel); max-height: 240px; }
.iti__country {
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ice);
}
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(226,233,234,.10); }
.iti__dial-code { color: var(--mist-dim); }
.iti__country-name { color: var(--ice); }
.iti__selected-country { border-radius: 12px 0 0 12px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(226,233,234,.08); }
.iti__selected-dial-code { color: var(--ice); font-family: var(--font); font-size: 15px; }
.iti__arrow { border-top-color: var(--mist-dim); }
.iti__arrow--up { border-bottom-color: var(--mist-dim); }

/* ============================================================
   FOOTER - standard fleet band (basslayerz pattern), credit in a pill.
   position + z-index keep it above the fixed plate.
   ============================================================ */
.foot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px clamp(16px, 4vw, 40px) 26px;
  background: var(--ink);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.foot__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot__legal { margin: 0; font-size: 12px; color: var(--mist-dim); }
.foot__legal a { color: var(--mist-dim); text-decoration: none; }
.foot__legal a + a { margin-left: .9em; }
.foot__legal a:hover { color: var(--ice); }
/* louder-consent.js drops "Cookie settings" in right after the privacy link
   with only a text space between them; give it a real gap and a divider. */
.foot__legal [data-louder-consent-open] {
  margin-left: .75em;
  padding-left: .85em;
  border-left: 1px solid var(--line-hi);
}
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(226,233,234,.16);
  border-radius: 999px;
  font-size: 12px;
  color: var(--mist-dim);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.site-built a:hover { color: var(--ice); border-color: var(--orange); }
/* the credit logo is teal-on-dark artwork: dark band, so a bare opacity only */
.site-built img { display: block; opacity: .9; }

/* Phones: stack the footer rather than relying on the row wrapping. */
@media (max-width: 899px) {
  .foot { justify-content: center; text-align: center; }
  .foot__right { justify-content: center; }
}
@media (max-width: 480px) {
  .foot { flex-direction: column; align-items: center; gap: 10px; padding-bottom: 22px; }
  .foot__right { flex-direction: column; align-items: center; gap: 10px; }
}

/* ============================================================
   TWO COLUMNS - artwork left (unboxed), sign-up right.
   Aspect-ratio gate (7/10), not orientation, so squarish desktop windows get
   it too (gotcha 20); plus landscape phones, tuned in the block after.
   The bill is sized off the viewport HEIGHT as well as its track, so the
   whole poster (logo to 16+) fits one screen: logo .29w + figure .79w +
   16+ row ~.2w = ~1.28w.
   ============================================================ */
@media (min-width: 900px) and (min-aspect-ratio: 7/10),
       (min-width: 560px) and (min-aspect-ratio: 13/10) and (max-height: 520px) {
  .bg { background-image: url("/five/assets/images/bg-desktop-1600.webp?v=20261030-1"); background-position: center 40%; }
  .stage {
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ".          signup"
      "bill       signup"
      "presenters signup"
      ".          signup";
    column-gap: clamp(36px, 5vw, 96px);
    row-gap: clamp(18px, 3vh, 30px);
    align-items: center;
    justify-items: center;
    padding-top: clamp(28px, 4vh, 56px);
    padding-bottom: clamp(28px, 4vh, 56px);
    min-height: calc(100svh - 64px);
  }
  .bill { max-width: min(640px, calc((100svh - 150px) / 1.3)); }
  .signup { align-self: center; }
}
@media (min-width: 1700px) and (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/five/assets/images/bg-desktop-2560.webp?v=20261030-1"); }
}

/* --- landscape phones are a first-class layout (gotcha 27) ---
   844x390 / 932x430 / 667x375: almost no height. Compact everything, start
   at the top, let the page scroll rather than squash. AFTER the block above
   so it wins at equal specificity. */
@media (min-width: 560px) and (min-aspect-ratio: 13/10) and (max-height: 520px) {
  .stage {
    --panel-w: 23rem;
    min-height: 0;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "bill       signup"
      "presenters signup"
      ".          signup";
    align-items: start;
    padding-top: 18px;
    padding-bottom: 18px;
    column-gap: 28px;
    row-gap: 14px;
  }
  /* height-capped: never more than the screen is tall (gotcha 38 shape) */
  .bill { max-width: min(100%, calc((100svh - 40px) / 1.3)); }
  .signup { align-self: start; }
  .panel__inner { padding: 18px 20px; }
  .panel__title { font-size: 1.95rem; margin-bottom: 8px; }
  .panel__lede { font-size: 14px; margin-bottom: 12px; }
  .sale { margin-bottom: 14px; padding: 9px 0; }
  .countdown__unit b { font-size: 1.45rem; }
  .form__row { margin-bottom: 9px; }
  .form__row--check { margin: 12px 0 14px; }
  .btn { padding: 12px 16px; }
  .presenters { gap: 20px; }
  .presenters__heart { height: 18px; }
  .presenters__louder { height: 29px; }
}

@media (max-width: 400px) {
  .panel__inner { padding: 22px 18px; }
  .countdown__unit b { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* screen-reader-only text (the "16+" badge is aria-hidden; this says it in words) */
.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;
}