/* UNIÓN , layout for the lineup page only. Phase 1 owns this file.
   LAYOUT ONLY and IN TOKENS ONLY: no hex, no font name, no easing, no duration.
   Nothing here may change how an included component looks. */

/* ------------------------------------------------------------- FOLD 1, HERO
   The page's one dominant idea is Q1, the river-filled display type. It is a
   1200x430 SVG that wants to be BIG, so it takes the wide track and the lead
   paragraph sits beside it in a narrow one, dropped down so the fold is not two
   columns starting on the same line. Asymmetric on purpose.
   ---------------------------------------------------------------------------- */
.hero-lineup{padding-block:var(--s8) var(--s9)}
.hl__grid{display:grid;gap:var(--s7);
  grid-template-columns:minmax(0,1.6fr) minmax(260px,.75fr);
  align-items:start}
/* the aside drops down the fold rather than topping out level with the type:
   the eye lands on the display first, which is the whole point of the fold. */
.hl__aside{display:grid;gap:var(--s5);justify-items:start;align-content:start;
  padding-top:var(--s8)}
.hl__lead{margin:0;max-width:40ch;font-size:var(--size-body);line-height:1.45}
/* the eyebrow sits above the type block, not above the whole grid */
.hl__type > .s__eye{margin-bottom:var(--s5)}

/* Q1 RUNS FULL WIDTH ON THE BLACK HERO.
   Inside the letterforms the river is laid over a CREAM rectangle: that cream
   is the ground breaking through, and it is what makes the word read at all.
   The design system's own spec page puts the component on .spec-stage--black
   for exactly that reason. This hero's ground is now black too, so the type
   needs no plate and no frame: it takes the full measure, which is what a
   display word set at 176 was drawn to do. The aside drops BELOW it rather
   than beside it, so nothing narrows the type.
   (Measured, on coral: "PEOPLE." at 76 against the headline's 176 vanished
   into the page. That is the defect the black ground fixes.) */
.hero-lineup .hl__grid{grid-template-columns:minmax(0,1fr)}
/* the aside runs as a ROW under the type: the lead paragraph takes the measure
   it needs and the two pills sit beside it. Flex, not grid-auto-flow:column,
   because `grid-auto-columns:max-content` let the paragraph size to its own
   content and push 405px of it off a 390px screen. Measured: the overflow gate
   caught P.hl__lead and A.u-pill at 16-405. min-width:0 is the part that
   actually holds it in. */
.hero-lineup .hl__aside{padding-top:var(--s6);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s4) var(--s5)}
.hero-lineup .hl__lead{flex:1 1 34ch;min-width:0;max-width:56ch}
.hero-lineup .hl__aside > .u-pill{flex:none}
@media (max-width:760px){
  .hero-lineup .hl__aside{flex-direction:column;align-items:stretch}
  .hero-lineup .hl__lead{flex:none;max-width:none}
  .hero-lineup .hl__aside > .u-pill{align-self:start}
}

/* ------------------------------------------------------ THE TWO-PART LEAD
   A fold head that is a headline and a paragraph SIDE BY SIDE rather than
   stacked, so the display type has something to dwarf. Used on the stages, the
   clashes, the announcement and the waitlist folds, flipped on one of them so
   no two consecutive folds open the same way.
   ---------------------------------------------------------------------------- */
.ls-lead{display:grid;gap:var(--s6) var(--s7);
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  align-items:end;margin-bottom:var(--s7)}
.ls-lead--flip{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:start}
.ls-lead .s__h{margin-bottom:0}
.ls-lead .s__lead{margin-bottom:0}

/* ----------------------------------------------------------- FOLD 3, STAGES
   The tabs are the navigation lane's own .n-tabs, composed here because that
   lane ships framed specimens rather than a shell. The panel below them is a
   real L-stage include, one per stage.
   ---------------------------------------------------------------------------- */
.ls-tabs{margin-bottom:var(--s6)}
/* at 390 three tabs on one row put each one under a thumb's width. They scroll
   sideways instead, which is a row of three full-size targets rather than three
   squeezed ones, and the track is the only thing that moves. */
.ls-panel{padding-top:var(--s2)}
.ls-panel[hidden]{display:none}

/* --------------------------------------------------------- FOLD 6, THE DAY
   TWO LAYOUTS, NOT ONE REFLOWED. E1 is a three-column board built to be read
   across; E7 is the same day built for one thumb, with its own sticky stage
   tabs. Above the phone width the board shows and the phone list does not;
   at the phone width they swap. Neither is a degraded version of the other.
   ---------------------------------------------------------------------------- */
.ls-day-phone{display:none}

/* --------------------------------- TWO FOLDS THAT ARE THE DESKTOP'S ONLY
   The bill poster (L1) and the clash timeline (E2) are both sized against a
   wide container, and both stop working below it rather than merely looking
   tight: L1's third name tier lands at about seven pixels and E2's set blocks
   at 22, eighteen of them under the 44px floor. Neither is squeezed and
   neither is overridden; each is replaced at the phone by the fold built for
   the phone, and a line says where that is. Saying so is better than a page
   that silently drops a thing the desktop has.
   ---------------------------------------------------------------------------- */
.ls-bill-note,.ls-clash-note{display:none;margin:0;max-width:40ch;
  font-size:var(--size-small);line-height:1.5}

/* THE LEAD'S SECOND COLUMN SITS ON THE HEADLINE'S LAST BASELINE.
   MEASURED BOTH WAYS. A two-part lead puts a four-line display headline
   beside a three-line paragraph, so one column is always shorter than the
   other and the difference shows as bare ground wherever the short one is
   not. Top-aligned it measured 410/413/404px of bare ground BELOW the
   paragraph; bottom-aligned it measures 318/318/287px ABOVE it. Bottom wins
   on the measurement and on the look: the paragraph and the headline's last
   line share a baseline, which is an alignment the eye reads as deliberate,
   where a paragraph stopping short in mid-air is not. The residual gap is the
   headline's own column being taller, and it is reported below as the known
   false reading it is. */
.ls-lead{align-items:end}
.ls-lead > :last-child{padding-bottom:var(--s2)}

/* ================================================================== 1024 ==== */
@media (max-width:1024px){
  .hl__grid{grid-template-columns:minmax(0,1fr)}
  .hl__aside{padding-top:0}
  .ls-lead,.ls-lead--flip{grid-template-columns:minmax(0,1fr);align-items:start}
}

/* ================================================================== 640 =====
   THE PHONE IS ITS OWN LAYOUT.
   ============================================================================ */
@media (max-width:640px){
  .hero-lineup{padding-block:var(--s6) var(--s7)}
  .hl__aside > .u-pill{width:100%;justify-content:space-between}

  /* the day board is replaced, not narrowed: E7 is the schedule designed for
     a thumb, and E1's three columns at 390 would be three unreadable slivers. */
  .ls-day-wide{display:none}
  .ls-day-phone{display:block}

  /* and the two folds the phone does not get, each with its line saying where
     the same facts are instead */
  .ls-bill-wide,.ls-clash-wide{display:none}
  .ls-bill-note,.ls-clash-note{display:block}

  /* three stage tabs at 390 are wider than the screen, so the row scrolls
     rather than wrapping into three half-height targets. Each tab keeps its
     full drawn size and its own thumb pad. */
  .ls-tabs{flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ls-tabs::-webkit-scrollbar{display:none}
  .ls-tabs .n-tab{flex:0 0 auto}
}


/* THE STAGE TABS AT PHONE WIDTH. A sideways-scrolling row hid the third stage:
   "The Corner" showed a third of its label and nothing said there was more to
   the right. Three stages is a short list. On a phone the tabs stack, one full
   width row each, every label whole and every target a full thumb pad. This
   rule comes last so it beats the scroller above. */
@media (max-width:760px){
  .ls-tabs{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible;
    flex-wrap:wrap}
  .ls-tabs .n-tab{width:100%;justify-content:flex-start;white-space:normal;
    min-height:var(--tap-min)}
}


/* ------------------------------------------------- FOLD 2, THE SOUND'S LEAD
   The two-part lead again, with the display line in the WIDER track this time:
   "What is already on the bill" is set at display size over three lines and it
   is the fold's focus. The sentence beside it is the subordinate half and it
   is what closes the 54% of bare pink the fold used to show at 1440.
   ---------------------------------------------------------------------------- */
.ls-lead--sound{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:end;margin-bottom:var(--s6)}

/* ----------------------------------------------------------- FOLD 3, V-BLOCK
   IT NEEDS THE WHOLE FOLD, and that is the measurement, not a preference.
   .v-block is `grid-template-columns:minmax(0,1fr) minmax(0,300px)` and its
   scene is a perspective box whose left margin is `clamp(--s5,8vw,140px)`. In
   a half-width column the 300px side track takes most of the row, the 1fr
   scene track collapses toward the slab's own width, and the slab's margin
   pushes it across its own heading. At full fold width the 1fr track is wide
   enough for the slab to sit a fifth in with open ground to its right and the
   heading and picks to sit clear in their 300px track, which is the layout it
   was drawn as. So it gets the width and nothing shares the row with it.
   ---------------------------------------------------------------------------- */
[data-include="V-block"]{display:block;width:100%;min-width:0}
/* THE ROOMS ROW. Words left, block right, centred on each other. The slab's own
   left margin (up to 140px, drawn for a full-width black stage) is what pushed
   it across a narrower column, so inside this row it is pulled in: that is
   where the block SITS, not how it looks. */
.ls-rooms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--s7);align-items:center;margin-bottom:var(--s8)}
.ls-rooms .s__h{margin-bottom:var(--s5)}
.ls-rooms .s__lead{margin-bottom:0}
.ls-rooms .v-block__scene{margin-left:var(--s4)}
@media (max-width:1100px){
  .ls-rooms{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .ls-rooms .v-block__scene{margin-left:0}
}
/* the fold's own lead and the block share a row at 1440: the block's side
   track sat under two-thirds of a screen of bare cream otherwise, which is
   the wasted-space note this pass is closing. The lead is the fold's words,
   the block is its object, and they read across. */
#stages .ls-lead{margin-bottom:var(--s6)}

/* the strip under it is the CONTROL, and its label says so, so the fold does
   not read as the same picker twice */
.ls-tabs-eye{display:block;margin-bottom:var(--s3)}

/* ---------------------------------------------------------- THE EMPTY STATE
   The mascot beside the line about the wait. He is on CREAM, which is one of
   his three grounds. `min-width:150px` is the system's own floor and the
   helper enforces it; the cap here is so he is a device in the fold and not
   the fold. He sits on his own row with the line beside him and nothing
   overlaps him: the row is a grid, not a stack with a negative margin.
   ---------------------------------------------------------------------------- */
.ls-wait{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s5) var(--s6);align-items:center;
  margin-top:var(--s6);padding-top:var(--s6);
  border-top:var(--rule) solid var(--black)}
.ls-wait .u-mascot{width:clamp(150px,16vw,220px)}
.ls-wait__say{margin:0;max-width:34ch;
  font-size:var(--size-body);line-height:1.4}

/* ------------------------------------------------ FOLD 6, THE LOAD STATE
   C-skeleton above the board. It is a stroke drawing per row, so it gets the
   board's own measure rather than the full bleed, and a rule under it marks
   where the load state ends and the stated board begins.
   ---------------------------------------------------------------------------- */
.ls-skel{margin-bottom:var(--s7);max-width:640px}
.ls-alert{margin-bottom:var(--s7)}

@media (max-width:1024px){
  .ls-lead--sound{grid-template-columns:minmax(0,1fr);align-items:start}
}

@media (max-width:640px){
  /* the slab and its picks stack at the phone, which the component does
     itself; all this does is stop the fold's own margin doubling up */
  [data-include="V-block"]{margin-bottom:var(--s7)}
  .ls-wait{grid-template-columns:minmax(0,1fr);justify-items:start}
  .ls-wait .u-mascot{width:150px}
  .ls-skel{max-width:none}
}


/* ------------------------------------------------------ FOLD 2, THE BILL
   The bill is the page's main object and it is on the page in BOTH states, so
   it needs a head that works in both and a ground that is not the hero's.
   THE GROUND IS CREAM, not black. L-bill carries its own dark poster plate, so
   it frames itself; putting it on black would have been the hero's ground twice
   in a row, which the site's own rule forbids, and the plate would have
   disappeared into the fold.
   ---------------------------------------------------------------------------- */
.ls-billhead{display:grid;gap:var(--s6) var(--s7);
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  align-items:end;margin-bottom:var(--s7)}
.ls-billhead .s__h{margin-bottom:0}
.ls-billhead .s__lead{margin-bottom:0;padding-bottom:var(--s2)}

/* THE POSTER IS CENTRED IN ITS FOLD, which is how a bill is hung. It has a
   width below which its own cqw type stops being readable, so it is capped
   rather than stretched across a 1440 measure. */
.ls-bill-wide{max-width:980px;margin-inline:auto}
.ls-bill-phone{display:none}

@media (max-width:1024px){
  .ls-billhead{grid-template-columns:minmax(0,1fr);align-items:start}
  .ls-billhead .s__lead{padding-bottom:0}
}

/* ================================================== THE PHONE'S OWN BILL ====
   At 390 the poster's third tier is about seven pixels of type. It is replaced
   by L-announce, the sweep, which is the same names in the same order at a size
   a thumb can read, and which carries its own scroll-in. Not a shrunk poster.
   ============================================================================ */
@media (max-width:640px){
  .ls-bill-wide{display:none}
  .ls-bill-phone{display:block}
}

/* the bill is the fold: no head above it, so it takes more of the width */
.ls-bill-wide{max-width:1180px}
#bill{padding-block:var(--s7) var(--s8)}