/* ============================================================
   CRAIG DAVID PRESENTS TS5
   South Park, Oxford, Thursday 5 August 2027.
   Sign-up. Client: Supermodified Events & Marketing Ltd.

   DIRECTION - the poster rebuilt as the page, unframed.
   The client sent the artwork as layers. The sky plate, screened clouds,
   chrome rings and trees are the page background (bg-desktop / bg-mobile,
   rebuilt offline from the layers). Craig, the badge header, the CRAIG DAVID
   presents TS5 lockup and the guests block float on that ground at the
   artboard's own positions, recovered by template matching against
   full_artwork.png. Nothing is boxed: the left column is the poster itself.

   SIGNATURE - liquid chrome and Y2K capsules. The panel: big radius,
   thick white border, recessed capsule fields, a Y2K gel CTA (round 6).

   COLOUR - literal pixels of the layers:
     #15BAE1  sky       plate, upper middle
     #181818  ink       every type layer + the badge fill
     #FFFFFF  paper     badge type, panel slab
     #0A2E47  deep      the dark blue in the ring's reflections: panel body
   Ink on sky 7.7:1 (gel + CTA, at their darkest stop). White on deep 13:1.

   TYPE - Archivo variable (OFL), one family: wdth 62 / wght 850 caps for
   titles and the CTA (the free face nearest the poster's condensed badge
   and KURUPT FM type), wdth 100 for reading text.

   MOTION - one moment: Craig rises into place on load, the type follows.
   Off under prefers-reduced-motion.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-wdth.woff2?v=20261106-22") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --sky:     #15BAE1;
  --ink:     #181818;
  --paper:   #FFFFFF;
  --ember:   #A4481A;
  --deep:    #0A2E47;   /* panel body: the dark blue in the ring's reflections */
  --field:   #06223A;   /* capsule wells: OPAQUE on purpose, see the autofill rule */
  --ice:     #7FE3FA;   /* accent on the panel, 9.4:1 on --deep */
  --danger:  #FFB4A8;   /* errors on the panel */
  --soft:    #D3E6EE;   /* reading copy on the panel */
  --dim:     #A9C6D6;   /* small print + placeholders on the panel */
  --gel:     linear-gradient(180deg, #A8F0FF 0%, #4FD3F2 46%, #15BAE1 54%, #2CCBEF 100%);
  --rimline: linear-gradient(135deg, #FFFFFF 0%, #BFE3EF 30%, #5B7A8B 50%, #FFFFFF 62%, #D5C6FF 80%, #8BD8FF 100%);

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(18px, 4vw, 48px);
  --panel-w: 410px;
  --rim: 6px;           /* the panel's solid white border */
  --r-panel: 36px;
  --foot-h: 54px;
}

*, *::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). */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--sky);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font);
  font-stretch: 100%;
  color: var(--ink);
  background: transparent;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The poster's plate, fixed, full bleed. Portrait = 9x16 build, square-or-
   wider and landscape phones = the 16x9 artboard. Preloads in index.html
   mirror these queries exactly. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--sky);
  background-image: url("../images/bg-mobile.jpg?v=20261106-22");
  background-image: image-set(url("../images/bg-mobile.webp?v=20261106-22") type("image/webp"), url("../images/bg-mobile.jpg?v=20261106-22") type("image/jpeg"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}
@media (min-aspect-ratio: 1/1), (min-width: 560px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .bg {
    background-image: url("../images/bg-desktop.jpg?v=20261106-22");
    background-image: image-set(url("../images/bg-desktop.webp?v=20261106-22") type("image/webp"), url("../images/bg-desktop.jpg?v=20261106-22") type("image/jpeg"));
  }
}

/* clip, not hidden: hidden on one axis forces the other to auto and would
   clip the country dropdown. */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

/* ============================================================
   STAGE - base = phones / portrait: the poster restacked, then the form.
   ============================================================ */
.stage {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 var(--gutter);
}

/* Portrait (round 4, Adam 14:01-14:02 UTC): "Craig is too hidden", the
   ring "looks like it's coming from his right shoulder", and the special
   guests "need to be included". So: the poster's own text column, in its
   own order, on clear sky (no rings on bg-mobile since round 1), then Craig,
   with the panel covering only his bottom fifth (the flat waist crop).
     |    [ badges .......... ]    |
     |        CRAIG DAVID          |
     |          [ TS5 ]            |
     |   SPECIAL GUESTS: KURUPT FM |
     |   PATRICK NAZEMI . ABI FLYNN|
     |        Craig, centred       |
     |=========== panel ===========|
   DOM order stays header, Craig,
   lockup, guests; grid areas set the visual order (images only). */
.bill {
  --craig-w: min(66vw, 300px);
  --craig-h: calc(var(--craig-w) * 956 / 802);
  --rw: min(58.7vw, 340px);    /* the side rings */
  width: 100%;
  pointer-events: none;
}
.comp {
  display: grid;
  grid-template-areas: "head" "title" "guests" "craig";
  justify-items: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 14px var(--gutter) 0;
}
/* NB: no height here, and `.comp img {...}` (0,1,1) out-specifies any
   single-class rule below: that blew Craig up in v1 and kept the guests
   showing in round 3. Overrides of display/height use two classes. */
.comp img { display: block; max-width: 100%; }
.comp__header { grid-area: head; width: min(100%, 440px); height: auto; }
.comp__title  { grid-area: title; margin: 16px 0 0; }
.comp__lockup { width: min(64vw, 310px); height: auto; }
.comp .comp__guests { grid-area: guests; width: min(47vw, 250px); height: auto; margin-top: 10px; }
.comp__craig {
  grid-area: craig;
  width: var(--craig-w);
  height: auto;
  margin-top: 8px;
  /* the panel covers only the bottom fifth: the flat waist crop */
  margin-bottom: calc(var(--craig-w) * 956 / 802 * -.2);
  position: relative;
  z-index: 1;
}

/* ---- chrome (round 5, client: "another chrome element on desktop, two
   on mobile"). Rule learnt in rounds 1-4: a ring only works when it ENTERS
   FROM A SCREEN EDGE (as on the poster) and stays clear of the dark type and
   of Craig. Each file is cut flush on the side it leaves the artboard from,
   so that side is always pinned to a viewport edge. ---- */
.bill { position: relative; }
.comp { position: relative; z-index: 1; }      /* type + Craig above the rings */
.chrome { position: absolute; z-index: 0; height: auto; pointer-events: none; display: block; }
/* stacked layouts: top-left corner (behind the white-on-black badges) and the
   right edge beside the guests block, inside the sky gutter */
/* Client's portrait artwork (6 Nov): "two on the sides and one in the middle".
   Sides: the FULL ring from the PSD (3000px smart object), part off-screen, so
   there is no cut edge to hide; sizes + offsets measured from their 4:5 art.
   Middle: the halo behind Craig, sized from their 9:16 (85vw, 1.32 x our Craig),
   its top just under Craig's hairline. The trees sit in front of the halo's ends, as on the
   artwork. .bill's bottom edge = Craig's 80% line (the panel top). */
.chrome--side-l { width: var(--rw); left: calc(var(--rw) * -.605); top: min(37vw, 205px); }
.chrome--side-r { width: var(--rw); right: calc(var(--rw) * -.62); top: -5vw; }
.chrome--halo {
  width: calc(var(--craig-w) * 1.32);
  left: 50%;
  bottom: calc(var(--craig-h) * .13);   /* its ends sink INTO the trees (Adam: not hanging above) */
  transform: translateX(-50%);
}
/* no fade of its own: the deep-blue band feathers over it */
.chrome--trees { left: 0; bottom: -14px; width: 100%; }
.chrome--corner { display: none; }

/* The one load moment: Craig rises into place, the type follows. */
.comp__craig { animation: rise 1s cubic-bezier(.2,.7,.2,1) .05s both; }
.comp__header, .comp__lockup, .comp__guests { animation: settle .8s ease .35s both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(6%); }
  to   { opacity: 1; transform: none; }
}
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .comp__craig, .comp__header, .comp__lockup, .comp__guests { animation: none; }
}

/* ============================================================
   SIGN-UP PANEL (round 6, client: "basic and square ... the form fields
   are just white boxes", after a white box and a black badge).
   The poster's special material is its LIQUID CHROME, and chrome, capsules
   and gel buttons are also Craig David's own Y2K era. So the panel is a
   big-radius body in the deep blue of the ring's reflections, with a thick
   solid white border (Adam, 6 Nov), recessed capsule fields with chrome
   hairlines, and a gel CTA. No square corners anywhere.

   The border is the panel's own padding + background, NOT a pseudo-element, so
   nothing can stack above the country dropdown (gotcha 5), and there is no
   overflow:hidden for the same reason.
   ============================================================ */
.signup {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--panel-w);
  position: relative;          /* deliberately no z-index: Craig 1 < panel 3 */
}
/* Stacked layouts: the trees feather into solid deep blue, which runs down to
   the footer (Adam, 6 Nov). Full-bleed band behind the panel: z 0 and later in
   the DOM than the trees, so it fades OVER them but stays behind Craig (.comp
   z 1) and the panel (z 3). Eased stops, so no visible start or line. Two-up
   and landscape switch it off. */
.signup::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -104px;
  bottom: calc(-1 * var(--gutter));
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
    rgba(10,46,71,0) 0,
    rgba(10,46,71,.12) 26px,
    rgba(10,46,71,.42) 54px,
    rgba(10,46,71,.78) 80px,
    #0A2E47 104px);
  pointer-events: none;
}
.panel {
  width: 100%;
  position: relative;
  z-index: 3;
  padding: var(--rim);
  border-radius: var(--r-panel);
  background: var(--paper);    /* solid white border (Adam, 6 Nov: not chrome) */
  color: var(--paper);
  box-shadow: 0 34px 60px -30px rgba(0,50,80,.75);
}
.panel__inner {
  padding: 30px clamp(24px, 3vw, 32px) 30px;
  border-radius: calc(var(--r-panel) - var(--rim));
  background: var(--deep);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 14px 30px -18px rgba(127,227,250,.28);
}

/* --- 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: two lines, the hook in <em> (reset, painted ice). */
.panel__title {
  margin: 0 0 10px;
  font-stretch: 62%;
  font-weight: 850;
  font-size: clamp(2.4rem, 11vw, 3rem);
  line-height: .9;
  letter-spacing: .003em;
  text-transform: uppercase;
  color: var(--paper);
  text-wrap: balance;
}
.panel__title em { font-style: normal; color: var(--ice); }

.panel__lede {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--soft);
  max-width: 46ch;
}
.panel__lede strong { color: var(--paper); font-weight: 700; }
.panel__lede--small { font-size: 13.5px; margin-bottom: 0; }
.panel__success-note { margin: 0 0 12px; color: var(--ice); font-size: 14.5px; font-weight: 600; }

/* Phones: the form starts higher. */
@media (max-width: 559px) {
  .panel__inner { padding: 24px 22px 26px; }
  .panel__title { margin-bottom: 8px; font-size: clamp(2.1rem, 9.6vw, 2.5rem); }
  .panel__title br { display: none; }   /* one line: keeps the form on the first screen */
  .panel__title em { margin-left: .2em; }
  .panel__lede { font-size: 14.5px; margin-bottom: 14px; }
}

/* ---------- sale dates + presale countdown ----------
   Two capsules: presale is gel (it is the next thing that happens), on sale
   is chrome-rimmed. The clock sits under them, numbers only. */
.sale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 14px;
}
.sale__cell {
  min-width: 0;
  padding: 7px 14px 8px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--deep), var(--deep)) padding-box, var(--rimline) border-box;
}
.sale__cell--pre {
  background: var(--gel) padding-box, var(--rimline) border-box;
  color: var(--ink);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.7);
}
.sale__label, .sale__date { margin: 0; }
.sale__label {
  font-stretch: 62%;
  font-weight: 850;
  font-size: 1.15rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.sale__date { font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.sale__clock {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 2px 6px 0;
}
.sale__clock span { text-align: center; }
.sale__clock b {
  display: block;
  font-stretch: 62%;
  font-weight: 850;
  font-size: 1.9rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.sale__clock i { font-style: normal; font-size: 11px; line-height: 1.2; color: var(--dim); }
.sale__live {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  padding: 4px 0 2px;
  text-align: center;
  font-stretch: 62%;
  font-weight: 850;
  font-size: 1.4rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ice);
}
.sale.is-live .sale__clock { display: none; }
.sale.is-live .sale__live { display: block; }

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin: 0 0 10px; }
/* 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;
}
/* Recessed capsule with a thin chrome rim. Double background: the fill on
   the padding-box, the rim on the border-box behind a transparent border. */
.form__input {
  width: 100%;
  padding: 13px 20px;
  font-family: var(--font);
  font-size: 16px;                 /* 16px minimum or iOS zooms on focus */
  color: var(--paper);
  caret-color: var(--ice);
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: linear-gradient(var(--field), var(--field)) padding-box, var(--rimline) border-box;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.45);
  transition: box-shadow .18s ease;
}
.form__input::placeholder { color: var(--dim); opacity: 1; }
.form__input:focus {
  outline: none;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.45), 0 0 0 3px rgba(127,227,250,.55);
}

/* 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: --field, which is
   opaque on purpose. Chrome also drops the background rim here, so the
   border gets a solid chrome colour instead. */
.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(--paper) !important;
  caret-color: var(--paper);
  border-color: #BFE3EF;
  transition: background-color 9999s ease-in-out 0s;   /* stops the lavender flashing in */
}
.form__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset, 0 0 0 3px rgba(127,227,250,.55) !important;
          box-shadow: 0 0 0 1000px var(--field) inset, 0 0 0 3px rgba(127,227,250,.55) !important;
}

.form__error { margin: 6px 0 0 20px; font-size: 13px; font-weight: 600; color: var(--danger); }
.form__error--global { margin: 12px 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: 14px 0 16px; }
.form__row--check .form__error { margin-left: 33px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--soft);
  cursor: pointer;
}
/* Custom tick: a small chrome-rimmed capsule well; ticked = gel with an ink
   check. Still a real checkbox: keyboard, screen readers and app.js's
   .checked all work as normal. */
.form__check input {
  -webkit-appearance: none;
          appearance: none;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin: 0;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: linear-gradient(var(--field), var(--field)) padding-box, var(--rimline) border-box;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.form__check input::after {
  content: "";
  width: 11px; height: 6px;
  margin-top: -3px;
  border: solid var(--ink);
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg) scale(0);
  transition: transform .14s ease;
}
.form__check input:checked {
  background: var(--gel) padding-box, var(--rimline) border-box;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7);
}
.form__check input:checked::after { transform: rotate(-45deg) scale(1); }
.form__check input:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.form__note { margin: 8px 0 0 33px; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.form__note a { color: var(--paper); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.form__note a:hover { color: var(--ice); }

/* ---------- the CTA: a Y2K gel capsule, charcoal caps (7.7:1 at its darkest) ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px 13px;
  font-family: var(--font);
  font-stretch: 62%;
  font-weight: 850;
  font-size: clamp(1.3rem, 5vw, 1.55rem);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;             /* shrink the type before it can ever wrap */
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: filter .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
.btn--primary {
  color: var(--ink);
  background: var(--gel) padding-box, var(--rimline) border-box;
  box-shadow: inset 0 2px 1px rgba(255,255,255,.75), inset 0 -4px 7px rgba(0,80,110,.3), 0 10px 20px -10px rgba(21,186,225,.8);
}
.btn--primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn:focus { outline: none; }
.btn:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.form__note a:focus-visible,
.foot a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* ============================================================
   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(--field);
  border: 1.5px solid #BFE3EF;
  border-radius: 20px;
  box-shadow: 0 22px 44px -16px rgba(0,0,0,.7);
  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 (gotcha 33). */
  padding: 11px 30px 11px 32px;
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--paper);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid rgba(191,227,240,.3);
}
.iti__search-input::placeholder { color: var(--dim); }
.iti__search-input:focus { outline: none; background: var(--deep); }
.iti__country-list { background: var(--field); max-height: 240px; }
.iti__country {
  padding: 9px 14px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--paper);
}
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(127,227,250,.18); }
.iti__dial-code { color: var(--dim); }
.iti__country-name { color: var(--paper); }
.iti__selected-country { border-radius: 999px 0 0 999px; }
.iti__selected-country-primary { padding-left: 16px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(127,227,250,.12); }
.iti__selected-dial-code { color: var(--paper); font-family: var(--font); font-size: 15px; }
.iti__arrow { border-top-color: var(--soft); }
.iti__arrow--up { border-bottom-color: var(--soft); }

/* ============================================================
   FOOTER - full-width charcoal band (the badge fill), credit in a pill.
   Dark band, so the credit logo keeps its own colours.
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  min-height: var(--foot-h);
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--ink);
  position: relative;
  z-index: 3;
}
.foot__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot__legal { margin: 0; font-size: 12px; color: var(--paper); }
.foot__legal a { color: var(--paper); text-decoration: none; }
.foot__legal a:hover { color: var(--sky); }
.foot a:focus-visible { outline-color: var(--paper); }
/* the consent script 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-sm-consent-open] {
  margin-left: .75em;
  padding-left: .85em;
  border-left: 1px solid rgba(255,255,255,.4);
}
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  font-size: 12px;
  color: var(--paper);
  text-decoration: none;
  transition: border-color .18s ease;
}
.site-built a:hover { border-color: var(--sky); }
.site-built img { display: block; opacity: .9; }

@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; }
}

/* ============================================================
   COMPOSED POSTER - shared by desktop and landscape phones.
   .comp becomes the artboard's foreground box (x 104..1613, y 116..1080 on
   the 1920x1080 artboard = 1509 x 964) and every layer sits at its own
   artboard position, in percent of that box. Craig's flat waist crop sits
   on the box's bottom edge, which sits on the footer band.
   ============================================================ */
@media (min-width: 860px) and (min-aspect-ratio: 1/1),
       (min-width: 560px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .comp {
    position: relative;
    display: block;
    padding: 0;
    width: var(--comp-w);
    max-width: none;
    aspect-ratio: 1509 / 964;
  }
  .comp img { position: absolute; max-width: none; }
  .comp__header { left: 46.653%; top: 0;       width: 53.016%; margin: 0; }
  .comp__craig  { left: 0;       top: .83%;    width: 53.148%; margin: 0; }
  .comp__title  { position: static; margin: 0; }
  .comp__lockup { left: 46.388%; top: 17.012%; width: 53.612%; height: auto; }
  .comp .comp__guests { display: block; left: 55.931%; top: 60.166%; width: 34.526%; height: auto; margin: 0; }
}

/* ============================================================
   TWO-UP (>= 860 wide, square-or-wider window): poster left, sign-up right.
   One screen: stage + footer band share 100svh. The poster is sized from
   the height left over and the column width, whichever binds. The panel
   track is DEFINITE, never auto (gotcha 35).
   ============================================================ */
@media (min-width: 860px) and (min-aspect-ratio: 1/1) {
  .page { height: 100vh; height: 100svh; min-height: 680px; }
  .stage {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
    gap: clamp(28px, 3.5vw, 64px);
    padding: 0 clamp(24px, 5.5vw, 104px) 0 var(--gutter);
  }
  /* Round 1: the poster ran small with a band of empty sky above it. Craig
     now bleeds off the left edge (as on the artboard, where his arm is
     cropped), which buys the column ~8% more width and so ~8% more height. */
  .stage { padding-left: 0; }
  .bill {
    align-self: end;
    display: flex;
    justify-content: flex-start;
    --comp-w: min(108%, (100svh - var(--foot-h) - 28px) * 1509 / 964);
  }
  .comp { margin-left: calc(var(--comp-w) * -.075); }
  .signup { width: var(--panel-w); max-width: none; align-self: center; padding: 0; margin: 90px 0 24px; }
  /* two-up: the top-left ring lives in bg-desktop; the second ring is the
     right-hand hook, flush to the viewport's right edge (= minus the stage's
     right padding), crossing IN FRONT of the panel's top-right corner. It
     stops 105px into the panel, above the lede and right of the short title. */
  .chrome--side-l, .chrome--side-r, .chrome--halo, .chrome--trees { display: none; }
  .signup::after { display: none; }
  .chrome--corner {
    --cw: calc(var(--panel-w) * .5);
    display: block;
    z-index: 4;
    width: var(--cw);
    right: calc(-1 * clamp(24px, 5.5vw, 104px));
    top: calc(105px - var(--cw) * 545 / 338);
  }
  .foot { min-height: var(--foot-h); }
}
/* short desktop windows (1280x720 class): a tighter panel */
@media (min-width: 860px) and (min-aspect-ratio: 1/1) and (max-height: 820px) {
  .signup { margin: 34px 0 14px; }
  .panel__inner { padding: 22px 30px 22px; }
  /* the sale block says what the intro says; drop it so the form fits */
  .panel__idle .panel__lede { display: none; }
  .sale { margin-bottom: 12px; }
  .form__row { margin-bottom: 9px; }
  .form__row--check { margin: 10px 0 12px; }
}
/* tall short windows: let the page grow rather than crush the panel */
@media (min-width: 860px) and (min-aspect-ratio: 1/1) and (max-height: 700px) {
  .page { height: auto; }
  .bill { --comp-w: min(100%, 940px); }
}

/* --- landscape phones are a first-class layout (gotcha 27) ---
   844x390, 932x430, 667x375: wide but almost no height. Poster compact and
   sticky on the left, the panel compact and top-aligned on the right.
   Placed LAST so it wins at equal specificity. */
@media (min-width: 560px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .page { height: auto; min-height: 100svh; }
  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    align-items: start;
    gap: 18px;
    padding: 10px var(--gutter) 14px;
  }
  .bill {
    --comp-w: min(100%, (100svh - 30px) * 1509 / 964);
    position: sticky; top: 10px;
    display: flex; justify-content: center;
  }
  .signup { width: 350px; max-width: none; }
  .chrome { display: none; }   /* landscape phones: no height to spare */
  .signup::after { display: none; }
  .panel__inner { padding: 16px 22px 18px; }
  .panel__title { font-size: 2.1rem; margin-bottom: 8px; }
  .panel__lede { font-size: 13.5px; margin-bottom: 12px; }
  .form__row { margin-bottom: 9px; }
  .form__input { padding: 10px 12px; }
  .form__row--check { margin: 10px 0 12px; }
  .btn { padding: 11px 16px 10px; font-size: 1.25rem; }
}