/* ============================================================
   Born on Road - homepage2 (version 2)
   OVERRIDE LAYER. Loaded AFTER style.css, which still supplies
   the panel, the form, the date picker, intl-tel-input, the
   clock mechanics and the footer. Only what version 2 does
   differently lives here.

   The difference: version 1 puts the whole poster on the left
   as one image on a blurred plate. Version 2 takes the client's
   supplied cut-outs and rebuilds the poster IN the page - the
   lockup and the date list sit directly on the unblurred
   photograph, and the form is the only opaque object on screen.

   The consequence that drives every decision below: top.png and
   dates.png are BLACK artwork on transparency. They can only sit
   on the pale part of that sky. So the left column carries a
   soft cloud haze behind it, and every piece of type in that
   column is the same asphalt black as the artwork - the column
   reads as printed onto the sky, not floated above it.
   ============================================================ */

/* ---------- background: the photograph, unblurred ---------- */
.v2 .bg {
  background-image: url("/assets/images/v2/v2-bg-mobile-1080.jpg?v=20260729-1");
  background-image: image-set(
    url("/assets/images/v2/v2-bg-mobile-1080.webp?v=20260729-1") type("image/webp"),
    url("/assets/images/v2/v2-bg-mobile-1080.jpg?v=20260729-1")  type("image/jpeg"));
  background-position: center top;
  background-size: cover;
}
@media (min-width: 880px) {
  .v2 .bg {
    background-image: url("/assets/images/v2/v2-bg-desktop-2400.jpg?v=20260729-1");
    background-image: image-set(
      url("/assets/images/v2/v2-bg-desktop-2400.webp?v=20260729-1") type("image/webp"),
      url("/assets/images/v2/v2-bg-desktop-2400.jpg?v=20260729-1")  type("image/jpeg"));
    background-position: center;
  }
}
/* The photo is dimmed rather than left at full strength. Not for mood: the
   two cut-outs are BLACK artwork, so what makes them readable is the
   difference between the pale haze under the column and everything around
   it. Dropping the photo back widens that gap - darkening uniformly would
   have closed it. (Adam, review round 4: "dim background so dates are more
   visible".) */
.v2 .bg::after {
  background:
    linear-gradient(180deg, rgba(1,16,46,.72) 0%, rgba(1,16,46,.56) 26%,
                            rgba(1,14,42,.52) 62%, rgba(1,12,36,.78) 100%);
}
.v2 .grain { opacity: .028; }

/* ============================================================
   CORNER MARKS
   The poster frames itself: target reticle top-left, globe
   top-right, UK TOUR tag bottom-left, reticle bottom-right.
   Same job here.

   Anchored to .stage, not the viewport, so the bottom pair sits
   above the footer instead of behind it. z-index -1 keeps them
   above the photo but under all content, so they can never cover
   the sign-up box on a narrow desktop window.

   Desktop only: on a phone the column already fills the width and
   these would either collide with the artwork or shrink to noise.
   ============================================================ */
.mark { display: none; }

@media (min-width: 880px) {
  .v2 .stage { position: relative; }

  .mark {
    display: block;
    position: absolute;
    z-index: -1;
    height: auto;
    opacity: .88;
    pointer-events: none;
  }
  .mark--tl {
    top:  clamp(14px, 1.8vw, 26px);
    left: clamp(14px, 1.8vw, 26px);
    width: clamp(21px, 1.9vw, 30px);
  }
  .mark--tr {
    top:   clamp(16px, 2.0vw, 28px);
    right: clamp(14px, 1.8vw, 26px);
    width: clamp(24px, 2.2vw, 34px);
  }
  .mark--bl {
    bottom: clamp(14px, 1.8vw, 26px);
    left:   clamp(14px, 1.8vw, 26px);
    width:  clamp(40px, 3.9vw, 61px);
  }
  /* rotated so its cross mirrors the top-left mark, the way the poster's
     corner furniture reads as a rotated pair rather than a repeat */
  .mark--br {
    bottom: clamp(14px, 1.8vw, 26px);
    right:  clamp(14px, 1.8vw, 26px);
    width:  clamp(21px, 1.9vw, 30px);
    transform: rotate(180deg);
  }
}

/* a sideways phone is wide enough to hit the desktop rule but has no room
   in the corners, so pull them back out */
@media (orientation: landscape) and (max-height: 540px) {
  .mark { display: none; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
/* .stage spans the FULL viewport on version 2 and the max-width moves to the
   inner wrapper. The corner marks are positioned against .stage, and while it
   was a centred 1280px box they landed in that box's corners - floating in
   from the page edges on any wider screen. Content stays centred either way. */
.v2 .stage { max-width: none; }
.v2 .stage__inner {
  /* Exactly the content box .stage used to produce: it was max-width 1280px
     INCLUDING its own padding, so the inner has to subtract that padding back
     off. Without the calc, going full-width silently handed the content an
     extra ~80px, which widened the left column and grew the dates back after
     they had been asked to shrink. */
  max-width: calc(1280px - 2 * clamp(16px, 4vw, 40px));
  margin-inline: auto;
  gap: clamp(28px, 3.4vw, 44px);
}

/* ---------- left column: the tour, printed on the sky ---------- */
.tour {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: 100%;
  max-width: 620px;
  animation: posterIn .9s cubic-bezier(.16,.84,.36,1) both;
}
/* THE CLOUD HAZE. Black artwork on a sky that is only pale in places, so the
   column brings its own pale place with it. Heavily feathered and off-centre
   so it reads as cloud rather than as a panel behind the type. */
.tour::before {
  content: "";
  position: absolute;
  inset: -7% -12% -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(60% 56% at 44% 48%,
    rgba(233,244,255,.88) 0%,
    rgba(223,238,253,.62) 44%,
    rgba(214,232,250,.26) 66%,
    rgba(210,230,250,0) 82%);
  filter: blur(30px);
  pointer-events: none;
}

/* The supplied top.png drops the poster's "LOUDER PRESENTS" line, so it is
   set in type here, centred over the lockup where the poster puts it.
   WHITE, not black: this line sits at the very top of the column, above the
   haze and on the deeper part of the sky, where black was unreadable (Adam,
   review round 3). White is what the poster itself uses for it anyway. The
   shadow is insurance for the pale-cloud case, not decoration. Margin is
   tight so the credit reads as part of the lockup, not a floating label. */
.tour__presents {
  margin: 0 0 6px;
  text-align: center;
  font-family: var(--narrow);
  font-weight: 700;
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: .44em;
  text-indent: .44em;              /* recentre: tracking hangs off the right */
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(1,14,42,.55);
}

.tour__lockup,
.tour__dates {
  display: block;
  width: 100%;
  height: auto;
}
/* Tight to the lockup. The gap was three things stacked: this margin, the
   date box's top padding, and ~15px of transparent glow padding that lives
   inside the bottom of top.png itself. Only the first two are ours to give
   back, so both go near zero. */
.tour__lockup { max-width: 100%; margin: 0 0 clamp(1px, 0.3vw, 4px); }
.tour__dates  { max-width: 100%; margin: 0 auto; }

/* The client's dates.png is internally inconsistent: its rules and diamonds
   are centred on the canvas (+1.5px of 1621) but the three date columns sit
   90px LEFT of centre (-5.55%). Nothing in the layout can satisfy both.
   We align on the DIAMONDS, because they are what the eye checks against the
   UK TOUR 2026 chip directly above them (Adam). Splitting the difference was
   tried and made that comparison visibly worse. The residual is the date
   columns sitting left in the supplied file; that needs a corrected export
   from the client, it cannot be fixed here. */

/* THE DATE FIELD. The column haze lifts the whole block, but the van sits
   directly under the dates and a bright vehicle with hard edges destroys
   black type no matter how far the page scrim is pushed. So the date list
   gets its own pool: brighter than the column haze, scoped to the block,
   and feathered hard enough at the edges that the van still reads around it
   rather than being masked by a panel. */
.tour__datesbox {
  position: relative;
  isolation: isolate;
  margin: 0 auto;
  max-width: 96%;
  padding: clamp(2px, 0.4vw, 5px) clamp(6px, 1.2vw, 12px);
}
.tour__datesbox::before {
  content: "";
  position: absolute;
  inset: -12% -9%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(54% 60% at 50% 50%,
    rgba(238,247,255,.80) 0%,
    rgba(230,243,254,.62) 40%,
    rgba(222,238,252,.28) 66%,
    rgba(218,236,252,0) 84%);
  filter: blur(24px);
  pointer-events: none;
}

/* ---------- right column: the only opaque object on the page ----------
   The countdown and the on-sale manifest live in here on version 2, next to
   the thing they are counting down to, so they keep the base sheet's
   light-on-dark treatment unchanged. No width override either: the box is
   the same 520px as version 1 (Adam, review round 4). */


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 880px) {
  /* start, not center: Adam wants the artwork column to begin level with the
     top of the sign-up box rather than float in the middle of it. */
  .v2 .stage__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    align-items: start;
  }
  .tour   { justify-self: start; }
  .v2 .panel { justify-self: end; }

  /* Dates: 10% smaller, no horizontal shift. -20px read as the wrong way,
     +30px and +10px as too far right, so this is the stop between them - and
     it is not an arbitrary one. At 0 the dates image is centred in the column,
     which puts the UK diamond directly under the UK TOUR 2026 chip, because
     both assets are centred on their own canvases. */
  .tour__dates { max-width: 90%; }
}

/* squarish windows: same split, tighter */
@media (min-width: 640px) and (max-width: 879px) and (min-aspect-ratio: 7/10) {
  .v2 .stage__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .tour { justify-self: start; max-width: 400px; }
  .v2 .panel { justify-self: end; }
}

/* stacked: the haze has to cover a taller, narrower column */
@media (max-width: 879px) {
  .tour { max-width: 560px; }
  .tour::before { inset: -5% -10%; }
}

@media (max-width: 400px) {
  .tour__presents { letter-spacing: .3em; text-indent: .3em; }
  .tour__dates { max-width: 100%; }
}

/* ============================================================
   PHONE LANDSCAPE / SHORT VIEWPORTS
   The tour column is two stacked images, so both get capped off
   the viewport HEIGHT rather than the column width - otherwise
   the pair is taller than a sideways phone. The panel keeps the
   base sheet's landscape compression (clock, manifest, fields).
   After the desktop blocks so it wins at equal specificity.
   ============================================================ */
@media (orientation: landscape) and (max-height: 540px) {
  .v2 .stage__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(14px, 2.4vw, 26px);
    align-items: center;
  }
  .tour { justify-self: start; max-width: 46vw; }
  .tour::before { inset: -6% -8%; filter: blur(18px); }
  .tour__presents { margin-bottom: 5px; font-size: 9.5px; letter-spacing: .3em; text-indent: .3em; }
  .tour__lockup { margin-bottom: 8px; max-height: 34svh; width: auto; }
  .tour__dates  { max-height: 34svh; width: auto; }
  .v2 .panel { justify-self: end; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tour { animation: none; }
}

/* desktop already has the van in the photograph, so the band is mobile-only.
   Declared BEFORE the media query that enables it: same specificity, so
   source order decides and a later rule would silently win. */
.vanband { display: none; }

/* ============================================================
   MOBILE: LET THE VAN BE SEEN
   The van is parked on the ground at the very bottom of both
   supplied photographs, and on a phone the bottom of the viewport
   is always the sign-up form. So a viewport-fixed background
   buries it behind the glass no matter what the scrim does.

   Two layers instead of one. The fixed layer is cropped to SKY
   ONLY, so it can never show a half-buried van. The van gets its
   own band at the foot of the page, framed as a landscape strip
   where the whole vehicle and all three people fit. The page then
   reads the way the poster does: type at the top, van at the
   bottom, and it lands as you finish the form.
   ============================================================ */
@media (max-width: 879px) {
  .v2 .bg {
    background-image: url("/assets/images/v2/v2-bg-mobile-sky-900.jpg?v=20260729-1");
    background-image: image-set(
      url("/assets/images/v2/v2-bg-mobile-sky-900.webp?v=20260729-1") type("image/webp"),
      url("/assets/images/v2/v2-bg-mobile-sky-900.jpg?v=20260729-1")  type("image/jpeg"));
    background-position: center top;
  }

  /* NO WHITE ANYTHING ON MOBILE.
     The old ellipse read as a smudge because on a phone the column fills the
     width, so its sides land on screen. Replacing it with a painted band was
     no better: it is still white paint over a photograph.

     The fix was the ASSET, not the overlay. The first sky crop took the top
     of the frame, which is the zenith - the darkest, cloudless part - so the
     black artwork needed something painted behind it. The crop now comes from
     lower in the same photograph, through the cirrus and down to the cumulus
     bank, which is naturally pale. The artwork sits on real sky and the scrim
     does nothing but darken the very top so the white credit line reads. */
  .tour::before,
  .tour__datesbox::before { display: none; }

  .v2 .bg::after {
    background: linear-gradient(180deg,
      rgba(1,16,46,.46)  0%,
      rgba(1,16,46,.22) 13%,
      rgba(1,16,46,.06) 34%,
      rgba(1,16,46,0)   58%,
      rgba(1,14,42,.20) 100%);
  }

  /* THE VAN BAND joins the page with a MASK, not a matching colour. Fading the
     photo itself to transparent lets the page's own sky show through the join,
     so there is nothing to colour-match and no step. The previous version
     painted a dark gradient on top, which only works if that dark happens to
     equal whatever sits above it. It did not, hence the hard line. */
  .vanband {
    display: block;
    position: relative;
    width: 100%;
    height: clamp(230px, 68vw, 330px);
    background-image: url("/assets/images/v2/v2-vanband-900.jpg?v=20260729-1");
    background-image: image-set(
      url("/assets/images/v2/v2-vanband-900.webp?v=20260729-1") type("image/webp"),
      url("/assets/images/v2/v2-vanband-900.jpg?v=20260729-1")  type("image/jpeg"));
    background-size: cover;
    background-position: center bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 26%, #000 52%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 26%, #000 52%);
  }
  .vanband::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(1,14,42,0) 55%, rgba(1,12,36,.30) 100%);
  }

  /* The box carries the darkening, not the sky. Mobile now shows real cloud
     behind the artwork, and a bright sky under a 15%-white panel washes the
     form out. Tinting the glass dark instead keeps the photograph as shot and
     puts the contrast exactly where the type needs it. Desktop is untouched:
     its background is already dimmed and the panel there is signed off. */
  .v2 .panel {
    background: rgba(3,17,44,.42);
    border-color: rgba(255,255,255,.20);
  }
  .v2 .form__input,
  .v2 .dsel__trigger { background: rgba(255,255,255,.10); }

  .foot { background: rgba(2,14,40,.62); }
}