/* ============================================================
   CLOCKSTOCK 2027 - full line-up (indexv2.html only)
   Loaded AFTER style.css + lineup.css and scoped to body.page-lineup2,
   so the live homepage, lineup.html, venue.html and privacy/terms are
   untouched. Reuses lineup.css for the tree-ringed sky, socials and
   footer; everything about the bill itself is replaced here.

   Source: the client's "Vector Smart Object.png" (2275 x 2869, white
   on transparent). Every line is the client's own lettering, cut to
   assets/images/lineup2/*.webp (lossless), never re-typeset.

   --bw is the bill's width and stands in for the poster's 2275px frame:
   every width and gap below is (poster px / 2275) of it, so the bill
   keeps the poster's proportions at any size.

   Two deliberate departures from the poster:
   - the 31 undercard names are cut ONE NAME PER IMAGE and flow into
     lines (bullets between). At poster scale a phone would show them
     ~11px tall; flowing lets them sit at a readable size and still be
     the client's lettering. A small script hides any bullet that lands
     at the start of a line.
   - on a phone the undercard moves BELOW the sign-up card (headliners,
     lockup + date, card, then "plus joining"), so the form is not
     pushed under a 31-name list. Desktop keeps the poster's order.
   - the two white tags had knocked-out lettering (sky showed through,
     gold on white, unreadable); the knockouts are filled with the
     brand ink #171717. "SIGN UP NOW" + the URL are left out, as on
     lineup.html: the page is the sign-up, and the URL is the page.
   ============================================================ */

.page-lineup2 {
  --bw: min(calc(100vw - 28px), 470px);
  --act-scale: 0.046;                          /* name height / bill width on phones */
  --act-h: max(13px, calc(var(--bw) * var(--act-scale)));   /* floor: mid-width desktops */
}

/* ---------- bill sections ---------- */
.page-lineup2 .bill {
  position: relative;
  isolation: isolate;
  width: var(--bw);
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
.page-lineup2 .bill img {
  display: block;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 1px 1px rgba(140, 50, 0, 0.30)) drop-shadow(0 4px 18px rgba(140, 50, 0, 0.28));
}
:where(.page-lineup2 .bill) :where(p, ul, h2) { margin: 0; padding: 0; list-style: none; font: inherit; }

/* a pool of sky behind each section, so foliage never shows through the
   letters (phones; desktop swaps to one pool behind the whole column) */
.page-lineup2 .bill::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8% -16% -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 24, 0.62), rgba(255, 150, 24, 0.34) 55%, rgba(255, 150, 24, 0) 100%);
  pointer-events: none;
}
.page-lineup2 .bill-pool { display: none; }

/* --- head: main stage --- widths are each row's share of 2275 */
.page-lineup2 .bill--head > * { margin-left: auto; margin-right: auto; }
/* the lockup sits at the TOP, as on the previous homepage (Adam, 5 Oct),
   not in the poster's foot; sized off the poster like lineup.html's 38% */
.page-lineup2 .bill img.bill__mark { width: 38%; margin-bottom: 5%; }
.page-lineup2 .bill img.bill__tag-main { width: 15.12%; }
.page-lineup2 .bill__faithless { width: 71.82%; margin-top: 3.12%; }
.page-lineup2 .bill__excl      { width: 66.24%; margin-top: 2.20%; }
.page-lineup2 .bill__tong      { width: 42.90%; margin-top: 2.64%; }
.page-lineup2 .bill__guests    { width: 67.03%; margin-top: 2.99%; }

/* --- acts: "+ plus joining" tag, then the names --- */
.page-lineup2 .bill img.bill__tag-plus { width: 52.57%; }
.page-lineup2 .acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* poster: 76px name-to-name across a bullet, 23px between lines, 68px names */
  column-gap: calc(var(--act-h) * 1.118);
  row-gap: calc(var(--act-h) * 0.35);
  margin-top: calc(var(--bw) * 0.0237);
}
.page-lineup2 .acts li { position: relative; }
.page-lineup2 .acts img { height: var(--act-h); width: auto; }
/* the bullet sits IN the gap (absolute, takes no width), so hiding one
   at a line start can never reflow the line */
.page-lineup2 .acts li + li::before {
  content: "";
  position: absolute;
  top: 30.9%;
  left: calc(var(--act-h) * -0.559);
  width: calc(var(--act-h) * 0.353);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: url("/assets/images/lineup2/bullet.webp?v=20261005-1") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(140, 50, 0, 0.30));
}
.page-lineup2 .acts li.is-line-start::before { display: none; }

/* --- foot: the date, two lines centred. Widths come from lineup.css's
   .bill__day / .bill__park (65.7% / 51.2%), which is exactly the ratio of
   these two cuts (1091 : 849). --- */
.page-lineup2 .bill__foot { width: 100%; }

/* the poster's small print, live text */
.page-lineup2 .bill__info {
  margin: 5% auto 0;
  max-width: 34em;
  font-size: clamp(11.5px, 3vw, 13.5px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(140, 50, 0, 0.45), 0 0 14px rgba(140, 50, 0, 0.3);
}
.page-lineup2 .bill__info span { display: inline-block; white-space: nowrap; margin: 0 0.45em; }

/* ============================================================
   LAYOUT
   ============================================================ */
/* Phones / portrait: lockup + headliners, date, card, the undercard, then
   the socials at the very bottom (Adam, 5 Oct) */
.page-lineup2 .bill--head  { order: 1; }
.page-lineup2 .bill--foot  { order: 2; }
.page-lineup2 .signup      { order: 3; }
.page-lineup2 .bill--acts  { order: 4; margin-top: 10px; }
/* the names are scaled up off the poster ratio on narrow screens, so the
   "+ plus joining" tag above them is scaled up by the same factor */
@media (max-width: 767px) {
  .page-lineup2 .stage__inner { padding-top: 26px; gap: 22px; }
  .page-lineup2 .bill img.bill__tag-plus { width: 80%; }
  /* .signup's box is dissolved so the card and the socials become stage
     items in their own right and the socials can be ordered after the
     undercard. --panel-max still inherits through display:contents. */
  .page-lineup2 .signup { display: contents; }
  .page-lineup2 .signup > .panel { order: 3; width: 100%; animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
  .page-lineup2 .signup > .social { order: 5; }
}
@media (min-width: 768px) and (max-aspect-ratio: 7/10) {
  .page-lineup2 { --bw: min(72vw, 520px); --act-scale: 0.040; }
  .page-lineup2 .bill img.bill__tag-plus { width: 70%; }
}

/* Desktop: the poster in order down the left, card on the right */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  .page-lineup2 {
    --bw: clamp(300px, 40vw, 540px);
    --act-scale: 0.0299;                     /* the poster's own 68/2275 */
  }
  .page-lineup2 .stage__inner {
    max-width: 1160px;
    grid-template-columns: var(--bw) clamp(320px, 34vw, 470px);
    /* 1fr rows above and below take any height the card has over the
       bill, so the poster's gaps never stretch and the bill centres */
    grid-template-areas: ". card" "head card" "acts card" "foot card" ". card";
    grid-template-rows: 1fr auto auto auto 1fr;
    justify-content: center;
    align-content: center;
    column-gap: clamp(32px, 5vw, 80px);
    row-gap: 0;
  }
  .page-lineup2 .bill { margin: 0; }
  .page-lineup2 .bill::before { display: none; }
  .page-lineup2 .bill-pool {
    display: block;
    grid-area: 2 / 1 / 5 / 2;
    position: relative;
    z-index: 0;
    pointer-events: none;
  }
  .page-lineup2 .bill-pool::before {
    content: "";
    position: absolute;
    inset: -6% -22% -4%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 150, 24, 0.62), rgba(255, 150, 24, 0.34) 55%, rgba(255, 150, 24, 0) 100%);
  }
  .page-lineup2 .bill--head { grid-area: head; z-index: 1; }
  .page-lineup2 .bill img.bill__mark { width: 30%; }
  .page-lineup2 .bill--acts { grid-area: acts; z-index: 1; margin-top: calc(var(--bw) * 0.0387); }
  .page-lineup2 .bill--foot { grid-area: foot; z-index: 1; margin-top: calc(var(--bw) * 0.0536); }
  .page-lineup2 .signup { grid-area: card; align-self: center; width: auto; --panel-max: 100%; }
  .page-lineup2 .bill__info { font-size: clamp(11px, 0.95vw, 13.5px); }
}
/* landscape phones: no height to spare, so a narrow bill with names
   scaled up off the poster ratio */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .page-lineup2 { --bw: min(42vw, 330px); --act-scale: 0.042; }
  .page-lineup2 .bill img.bill__tag-plus { width: 74%; }
  .page-lineup2 .stage__inner { grid-template-columns: var(--bw) minmax(0, 1fr); align-content: start; }
  .page-lineup2 .signup { align-self: start; }
  .page-lineup2 .bill__info { font-size: 10.5px; }
}

/* ============================================================
   MOTION - the bill read out top to bottom, as in lineup.css.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .page-lineup2 .bill > *,
  .page-lineup2 .bill__foot > * {
    animation: bill-in var(--dur, 0.7s) cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) both;
  }
  .page-lineup2 .bill > .bill__foot { animation: none; }
}
.page-lineup2 .bill img.bill__mark    { --d: 0.05s; }
.page-lineup2 .bill img.bill__tag-main { --d: 0.30s; }
.page-lineup2 .bill__faithless { --d: 0.50s; --dur: 0.9s; }
.page-lineup2 .bill__excl      { --d: 0.80s; }
.page-lineup2 .bill__tong      { --d: 1.00s; --dur: 0.9s; }
.page-lineup2 .bill__guests    { --d: 1.35s; }
.page-lineup2 .bill img.bill__day  { --d: 1.55s; }
.page-lineup2 .bill img.bill__park { --d: 1.65s; }
.page-lineup2 .bill__info      { --d: 1.80s; }
.page-lineup2 .bill img.bill__tag-plus { --d: 1.95s; }
.page-lineup2 .acts            { --d: 2.10s; --dur: 0.9s; }