/* Worried About Henry - Document, Bristol. Sat 5 December 2026, 19:00-03:00.
   Client: Louder Entertainment. Venue partner: Document.

   Identity is taken from the client's own artwork, not invented:
     --orange  is the literal accent sampled out of Header.png
     --bone    is the client's own warm off-white from the wordmark
     --void    is the literal corner pixel of desktop_background.png, so the
               area beside a height-fitted background is seamless

   Two standing rules for this client, both learned the hard way on Cardiff and
   on the previous Bristol build:
     1. NO scrim over the scene. Do not dim the artwork.
     2. NO backdrop-blur on the panel. Legibility comes from an opaque panel
        ground only. Both were rejected outright as "dimming/blurring".

   Layout and corner treatment follow wah-bournemouth (Adam, 2026-09-10):
   lockup across the top, line-up left, panel centre-left, and the plate
   running off the RIGHT edge in a reserved --mask-zone. Corners are ROUNDED,
   not square: panel 14px, buttons full pills. */

:root {
  --orange:      #E07900;
  --orange-hi:   #F59A2E;
  --bone:        #F4EBEE;
  --bone-soft:   rgba(244,235,238,.76);
  --bone-ghost:  rgba(244,235,238,.16);
  --void:        #0A0E10;
  --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(--orange-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;
  /* Recropped to cut the empty top flank: the supplied file has the plate
     starting 29% down, which read as dead space above the bill. It now starts
     ~10% down. Anchored RIGHT, not centre: this file's plate already runs to
     x 99%, so a centre anchor sliced its right side off. */
  background-image: url(/assets/images/bg-mobile-1080.webp?v=20260910-15);
  background-position: right center;
  background-size: cover;
}
@media (min-aspect-ratio: 7/10) {
  .bg {
    background-image: url(/assets/images/bg-desktop-1920.webp?v=20260910-15);
    /* Anchored right so the plate sits on the right edge and runs off it, the
       wah-bournemouth treatment. `cover` rather than `auto 100%`: the recropped
       frame is 1.52:1, so on anything wider a height-fit would leave a flat
       void beside it. Cover trims top/bottom instead, which the plate has room
       for (it occupies y 17-85% of 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/bg-desktop-2560.webp?v=20260910-15); }
}
@media (max-aspect-ratio: 7/10) and (min-resolution: 2x) {
  .bg { background-image: url(/assets/images/bg-mobile-1344.webp?v=20260910-15); }
}

/* 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(--orange); outline-offset: 4px; }
.bill__partners { display: block; width: 100%; max-width: 200px; 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: each city's line-up
   art has different type-to-block proportions, so the same width renders a
   different size. Measured off the alpha row-profile, this Bristol art's
   tallest type run is 0.1524 of its width, against wah-bournemouth's 0.2262
   and Birmingham's 0.1431. So Bournemouth's shipped mobile width of 190px
   renders 43px caps there but only 29px here, which is why copying it looked
   tiny. 282px reproduces Bournemouth's 43px mobile caps exactly. This bill has
   12 type runs against Bournemouth's 7, so it is taller at any given cap size.
   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(78%, 282px); }
.bill__lockup   { max-width: 100%; }
.bill__marks    { gap: .8rem; }
.bill__pill img { max-width: 280px; }
.bill__partners { max-width: 176px; }
.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(--orange); }
.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(--orange-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(--orange);
  background: rgba(0,0,0,.58);
  box-shadow: 0 1px 0 var(--orange);
}
.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 #0B1013 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(--orange); flex: none;
}
.form__check span { font-size: 13px; line-height: 1.5; color: var(--bone-soft); }
.form__check a { color: var(--orange-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(--orange-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(--orange); color: #120A02; }
.btn--primary:hover { background: var(--orange-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(--orange); }
.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(--orange); 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(--orange-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(--orange); 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(224,121,0,.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, 380px) 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); }
  /* 380px x 0.1524 = ~58px caps; Bournemouth renders ~63px at 280px.
     See the GEOMETRY NOTE above before changing this. */
  .bill__lineup { max-width: min(100%, 380px); }
  .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, 400px) minmax(0, var(--panel-w)); }
  .bill__lockup { max-width: min(100%, 860px); }
  .bill__lineup { max-width: min(100%, 400px); }   /* ~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(240px, 26vw); }
  .bill__partners { max-width: 150px; }
  .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; }
}