/* ============================================================
   Woodland Dance Project Bristol 2027 - first-access sign-up
   Client: Sell Out Events Ltd.

   DIRECTION: the same woods, at golden hour.
   The 2026 illustrated plate (squirrels, fairies, toadstools, the
   wooden speaker stacks) re-graded to late-afternoon sun: warm gold
   in the sky and light shafts, drifting motes, greens kept fresh,
   toadstools red and speaker cones blue. Close to 2026 on purpose,
   changed enough to read as a new year. Rejected on 2026-09-28:
   night grade (too dark and eerie), a plain daylight lift (same as
   2026) and a from-scratch pine print (too far from the original).

   COLOUR:
     #0C1C1D  panel ground (UI dark)
     #ECDBC3  logo lettering cream           (logo-559.png)
     #EACB6F  warm sun gold       -> the CTA and the title's hook
     #00AFF0  the 2026 lockup's date blue    (2026 hero-text.png)
     #81C4D3  misty clearing      -> links, focus
   On the panel: cream 13.2:1, amber 11.3:1, blue 7.1:1, mist 9.1:1.

   TYPE: Fraunces (OFL, soft storybook serif, true italic) for the
   edition line, titles and the button; the hand-drawn logo stays an
   image. Reading copy in the system sans.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces-var.woff2?v=20260928-5") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces-Italic-var.woff2?v=20260928-5") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --ground:    #071314;   /* page ground under the plate */
  --night:     #0C1C1D;   /* panel + UI dark */
  --field:     #12292B;   /* form field - OPAQUE on purpose, see autofill note */
  --cream:     #ECDBC3;   /* logo lettering: headings + typed text */
  --cream-dim: #AEBFBA;   /* reading copy, grey-green (9.3:1) */
  --firefly:   #EACB6F;   /* the CTA and the title's hook */
  --cone:      #00AFF0;   /* speaker-cone blue: the year */
  --moon:      #81C4D3;   /* links, focus */
  --line:      rgba(129,196,211,.24);
  --danger:    #F19A8A;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --maxw: 1180px;
}

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

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

/* Ground colour lives on html, NOT body: an opaque body background paints over
   the z-index:-2 .bg layer and the artwork disappears. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--ground);
}

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

/* ---------- the forest plate ----------
   Four plates chosen by aspect ratio rather than width alone, so squarish
   window shapes never fall between the phone and desktop crops. The preload
   conditions in the head mirror these four rules exactly. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--ground);
  background-image: url("/assets/images/bg-mobile-sm.webp?v=20260928-5");
  background-position: center 35%;
  background-size: cover;
}
@media (max-aspect-ratio: 7/10) and (min-width: 501px) {
  .bg { background-image: url("/assets/images/bg-mobile.webp?v=20260928-5"); }
}
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20260928-5"); background-position: center; }
}
@media (min-aspect-ratio: 7/10) and (min-width: 1501px) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20260928-5"); }
}
/* Scrim: sink the middle just enough for the logo and panel, leave the edges
   (squirrels, speakers, toadstools) at full strength. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 80% at 50% 52%,
    rgba(7,19,20,.42) 0%, rgba(7,19,20,.22) 50%, rgba(7,19,20,.02) 100%);
}

/* ============================================================
   STAGE
   ============================================================ */
.stage {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;                 /* auto at EVERY breakpoint - never plain 0 */
  padding: clamp(22px, 4vw, 54px) clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
}
.stage__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
}

/* ---------- the bill: logo + live edition line ---------- */
.bill {
  justify-self: center;
  width: 100%;
  max-width: 500px;
  text-align: center;
}
.bill__h1 { margin: 0; font-weight: inherit; }
.bill__logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  animation: riseIn .9s cubic-bezier(.16,.84,.36,1) both;
}
.bill__edition {
  display: block;
  margin-top: clamp(4px, 1vw, 10px);
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;      /* BRISTOL in capitals (client, 2026-09-28) */
  color: var(--cream);
  /* a soft dark halo, not a drop shadow: the plate behind is busy line work */
  text-shadow: 0 0 22px rgba(7,19,20,.9), 0 2px 3px rgba(7,19,20,.8);
  animation: riseIn .9s .18s cubic-bezier(.16,.84,.36,1) both;
}
.bill__year { color: var(--cone); }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   SIGNUP PANEL
   ============================================================ */
.signup { justify-self: center; width: 100%; max-width: 470px; }
.panel {
  width: 100%;
  position: relative;
  isolation: isolate;             /* keeps the country dropdown above everything */
  background: rgba(9,24,25,.86);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.9);
  animation: riseIn .9s .1s cubic-bezier(.16,.84,.36,1) both;
  overflow: visible;
}
.panel__inner { position: relative; z-index: 1; padding: clamp(24px, 3.4vw, 36px); }

/* --- 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="success"] .panel__success { display: block; }

/* ============================================================
   PANEL COPY
   ============================================================ */
.panel__title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 0;
  font-size: clamp(1.9rem, 4.6vw, 2.35rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  color: var(--cream);
  text-wrap: balance;
}
/* House two-line title; the hook is a TRUE italic here (Fraunces ships one),
   painted in the firefly amber. */
.panel__title em {
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
  color: var(--firefly);
}
.panel__lede {
  margin: 0 0 10px;
  font-size: 15.5px;
  color: var(--cream-dim);
  max-width: 44ch;
}
.panel__lede--last { margin-bottom: 22px; }
.panel__success .panel__lede--last { margin-bottom: 0; }
.panel__success-note { margin: 0 0 12px; color: var(--firefly); font-size: 15px; }

/* ============================================================
   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: 14px 15px;
  font-family: var(--body);
  font-size: 16px;                /* 16px minimum or iOS zooms the page on focus */
  color: var(--cream);
  background: var(--field);       /* OPAQUE - see the autofill rule below */
  border: 1px solid rgba(236,219,195,.16);
  border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: #7D908C; }
.form__input:focus {
  outline: none;
  border-color: var(--moon);
  box-shadow: 0 0 0 3px rgba(129,196,211,.18);
}

/* Chrome paints autofilled inputs pale lavender and IGNORES background on
   :-webkit-autofill; a huge inset box-shadow is the only reliable override.
   It cannot be translucent, which is why --field is opaque: the flattened
   colour of the field IS --field. Keep it opaque or recompute this. */
.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(--cream) !important;
  caret-color: var(--cream);
  transition: background-color 9999s ease-in-out 0s;   /* stops the lavender flashing in */
}

.form__error { margin: 7px 0 0; font-size: 13.5px; 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. */
.hp-row { display: none !important; }

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

/* ---------- button ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  font-family: var(--display);
  font-weight: 650;
  font-variation-settings: "opsz" 36, "SOFT" 100;
  font-size: 1.1rem;
  letter-spacing: .005em;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .65; cursor: default; }
/* Night text on the firefly amber: 11.1:1. The glow is the firefly's halo. */
.btn--primary {
  color: var(--night);
  background: var(--firefly);
  box-shadow: 0 0 0 0 rgba(234,203,111,0), 0 12px 26px -14px rgba(234,203,111,.7);
}
.btn--primary:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 0 28px -4px rgba(234,203,111,.55), 0 12px 26px -14px rgba(234,203,111,.7);
}

/* ============================================================
   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(--night);
  border: 1px solid rgba(129,196,211,.4);
  border-radius: 10px;
  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 clears the
     search icon, 28px right the clear button); a shorthand that drops them
     puts the magnifier on top of the placeholder. */
  padding: 10px 30px 10px 32px;
  width: 100%;
  font-family: var(--body);
  font-size: 14px;
  color: var(--cream);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid var(--line);
}
.iti__search-input::placeholder { color: #7D908C; }
.iti__search-input:focus { outline: none; background: #173133; }
.iti__country-list { background: var(--night); max-height: 240px; }
.iti__country {
  padding: 9px 12px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--cream);
}
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(129,196,211,.14); }
.iti__dial-code { color: var(--cream-dim); }
.iti__country-name { color: var(--cream); }
.iti__selected-country { border-radius: 10px 0 0 10px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(129,196,211,.10); }
.iti__selected-dial-code { color: var(--cream); font-family: var(--body); font-size: 15px; }
.iti__arrow { border-top-color: var(--cream-dim); }
.iti__arrow--up { border-bottom-color: var(--cream-dim); }

/* ============================================================
   FOOTER - standard fleet band, credit in the basslayerz pill
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px clamp(16px, 4vw, 40px) 24px;
  background: rgba(7,19,20,.72);
  border-top: 1px solid var(--line);
  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: 12.5px; color: var(--cream-dim); }
.foot__legal a { color: var(--cream-dim); text-decoration: none; }
.foot__legal a:hover { color: var(--firefly); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--cream-dim);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.site-built a:hover { border-color: var(--firefly); color: var(--cream); }
.site-built img { display: block; opacity: .9; }

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

/* --- two column: bill left, panel right --- */
@media (min-width: 900px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
    gap: clamp(36px, 5vw, 72px);
  }
  .bill   { justify-self: end; max-width: 520px; }
  .signup { justify-self: start; }
}

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

/* Phones: stack the footer as a centred column rather than relying on wrap,
   and hold the logo back so the form sits nearer the fold. */
@media (max-width: 480px) {
  .foot {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 22px;
  }
  .foot__left { flex-direction: column; align-items: center; gap: 10px; }
  .bill { max-width: min(340px, 82vw); }
  .stage { padding-top: clamp(18px, 4vw, 54px); }
  .stage__inner { gap: 20px; }
}

/* --- landscape phones are a first-class layout ---
   844x390, 932x430, 667x375: desktop-ish aspect with almost no height.
   Compact side-by-side, logo height-capped, tighter type. AFTER the desktop
   block so it wins at equal specificity. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage { padding: 14px clamp(12px, 3vw, 26px); align-items: flex-start; }
  .stage__inner {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    gap: 20px;
    align-items: center;
  }
  .bill { justify-self: center; max-width: none; min-height: 0; }
  /* width:auto needs max-width:100% in the same rule (gotcha 38) */
  .bill__logo { max-height: calc(100svh - 150px); width: auto; max-width: 100%; }
  .bill__edition { font-size: clamp(1.5rem, 4.4vw, 2.2rem); }
  .signup { justify-self: stretch; max-width: none; min-height: 0; }
  .panel__inner { padding: 16px 18px; }
  .panel__title { font-size: 1.4rem; margin-bottom: 8px; }
  .panel__lede { font-size: 13.5px; margin-bottom: 6px; }
  .panel__lede--last { margin-bottom: 12px; }
  .form__row { margin-bottom: 9px; }
  .form__input { padding: 10px 13px; }
  .form__row--check { margin: 11px 0 12px; }
  .btn { padding: 11px 16px; font-size: 1rem; }
  .iti__country-list { max-height: 150px; }
}

/* --- small phones --- */
@media (max-width: 400px) {
  .panel__inner { padding: 22px 18px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--moon);
  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;
  }
}