/* UNIÓN , layout for the Home page only.
   LAYOUT ONLY and IN TOKENS ONLY. No hex, no font name, no easing, no duration:
   every value is a var() off the design system's tokens.css, or a plain
   geometric number that carries no brand decision. */

/* ------------------------------------------------------------- THE ROOMS ----
   Fold 3. "One park, three rooms" used to be a headline over a small cube
   picker, which left most of a cream fold empty with one block in it: the fold
   said "three stages" and then did not show three stages.

   Now the three rooms ARE the fold. One column each, each in its own stage
   colour off the system's own tokens (--stage-main pink, --stage-grove coral,
   --stage-corner yellow), filling the width and running to the bottom of the
   fold. They are three SLABS, not three cards: no radius, no shadow, a heavy
   black rule, flush to each other so the three colours meet edge to edge and
   read as one striped object rather than a grid of boxes.
   ---------------------------------------------------------------------------- */
.rooms{list-style:none;margin:var(--s7) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  /* flush, sharing one rule between neighbours rather than doubling it */
  gap:0;border:var(--rule-heavy) solid var(--black)}

.rooms__r{display:grid;align-content:start;gap:var(--s3);
  padding:var(--s6) var(--s5) var(--s7);min-width:0;
  background:var(--stage);color:var(--black);
  border-left:var(--rule-heavy) solid var(--black)}
.rooms__r:first-child{border-left:0}
.rooms__r--main{--stage:var(--stage-main)}
.rooms__r--grove{--stage:var(--stage-grove)}
.rooms__r--corner{--stage:var(--stage-corner)}

/* the index sits top-left at display weight: the thing that makes three
   columns read as an ordered list rather than three unrelated panels */
.rooms__n{font:900 var(--size-head)/.8 var(--font);
  font-stretch:var(--wdth-condensed);
  padding-bottom:var(--s3);margin-bottom:var(--s2);
  border-bottom:var(--rule) solid var(--black)}

/* the room's NAME is the biggest thing in its column, and it is allowed to be
   big: this fold's whole job is the three of them */
.rooms__h{margin:0;font:900 var(--size-display)/.86 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase;
  /* a condensed 900 at display size clips its own ascenders against a tight
     line box; the padding is the same fix .park-figure__n already carries */
  padding-top:.06em;overflow:visible;
  /* NEVER break a word. overflow-wrap:anywhere put "THE CORNE / R" across two
     lines at 1440, which is a broken mark, not a tight column. The name wraps
     between words or it takes a narrower size; it does not get cut in half. */
  overflow-wrap:normal;word-break:keep-all;hyphens:none;
  /* the size is capped against the COLUMN, not the viewport, so a long name
     shrinks to fit its own third instead of pushing out of it */
  font-size:min(var(--size-display),20cqw)}
/* the column is the container the name measures itself against */
.rooms__r{container-type:inline-size}

/* what you hear there, set as the label under the name */
.rooms__w{margin:0;font:900 var(--size-title)/1.1 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase;
  letter-spacing:.02em}

.rooms__b{margin:var(--s3) 0 0;font-size:var(--size-body);line-height:1.4;
  max-width:34ch}

.rooms__f{margin:var(--s5) 0 0;display:grid;gap:var(--s2);
  border-top:var(--rule) solid var(--black);padding-top:var(--s4)}
.rooms__f > div{display:flex;gap:var(--s3);align-items:baseline;
  justify-content:space-between}
.rooms__f dt{margin:0;font:700 var(--size-micro)/1.2 var(--font);
  text-transform:uppercase;letter-spacing:.14em}
.rooms__f dd{margin:0;font:900 var(--size-small)/1.2 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase;text-align:right}

/* Tablet: three columns at 768 squeeze a condensed display name to nothing, so
   the first room takes the full width and the other two share a row. The
   striped object survives; the columns stop fighting. */
@media (max-width:900px){
  .rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rooms__r{border-left:0;border-top:var(--rule-heavy) solid var(--black)}
  .rooms__r:first-child{grid-column:1 / -1;border-top:0}
  .rooms__r--corner{border-left:var(--rule-heavy) solid var(--black)}
}

/* Phone: its OWN layout, not the desktop one shrunk. One room a band, stacked,
   each band the full width so the three colours still run down the page as a
   stripe. The body copy stays: the phone is not a summary of the desktop. */
@media (max-width:640px){
  .rooms{grid-template-columns:1fr;margin-top:var(--s6)}
  .rooms__r{grid-column:1 / -1;padding:var(--s5) var(--s4) var(--s6);
    border-left:0;border-top:var(--rule-heavy) solid var(--black)}
  .rooms__r:first-child{border-top:0}
  .rooms__b{max-width:none}
}

/* ----------------------------------------------------- ONE ASK, NOT TWO ----
   Home asked for the waitlist twice, back to back: the "Hear it first" fold and
   then, a few hundred pixels below it, the footer's own newsletter stub with
   the same label and the same field. Asked twice in one breath, an ask reads as
   a form to get past rather than the thing the page is for.

   The FOLD stays: it is the page's one clear call, it carries the tear-off
   stub and the toast, and it is the thing the hero's pill points at. The
   footer's copy is hidden on Home only, and only on Home: every other page
   keeps it, because on those pages it is the only place it is asked and the
   rubric wants the waitlist within one action from anywhere.

   Hidden, not deleted, and the footer partial is untouched: the footer is the
   shell's, shared by eight pages, and this is a Home-page composition
   decision. The field is removed from the tab order too, or a keyboard walk
   still lands in a control nobody can see.
   ---------------------------------------------------------------------------- */
body[data-page="index"] .n-foot__news{display:none}

/* ------------------------------------------------------- THE PARK FOLD ------
   Fold 5. See the note in site.css: no photograph exists yet, so the fold
   carries the pack's own figures as type. It used to do that with two small
   near-empty boxes, "28" and "2", which read as decoration rather than as the
   fold's content. The slot for the photograph that is still missing is marked
   in the markup, so nobody has to guess what goes there.
   ---------------------------------------------------------------------------- */
/* the number and its unit on ONE baseline, which is what makes a figure read as
   a measurement rather than as a box with a big digit in it */
.park-fig{display:grid;gap:var(--s2);align-content:start;min-width:0}
.park-fig__n{font:900 var(--size-display)/.8 var(--font);
  font-stretch:var(--wdth-condensed);padding-top:.06em;overflow:visible}
.park-fig__u{font:900 var(--size-title)/1.05 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase;
  max-width:18ch}
.park-fig__note{margin:0;font:700 var(--size-micro)/1.35 var(--font);
  text-transform:uppercase;letter-spacing:.14em;opacity:.75;max-width:26ch}

/* the figures run as a ROW of three on one rule, which is the structure the
   numbers were missing: they are three readings of the same site, not three
   objects sitting at different heights */
.park-figs{display:grid;gap:var(--s6);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:var(--s6) 0 0;padding-top:var(--s5);
  border-top:var(--rule-heavy) solid var(--black)}

/* the photograph that does not exist yet. A marked, empty, sized slot: it holds
   the fold's proportion open so the layout does not change shape the day the
   picture lands, and it says plainly what it is waiting for. Never a poster
   mockup: those carry invented facts in their pixels. */
/* At 16:7 across the full width this was a vast empty dashed box, and an empty
   box that big is the loudest thing on the fold: the placeholder outshouted the
   figures it was standing beside. It is a NOTE about a missing asset, so it is
   sized like one: a single shallow band on the same rule as the figures, deep
   enough to be unmistakably a reserved slot and no deeper. */
.park-slot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--s2) var(--s4);
  margin-top:var(--s2);padding:var(--s4) var(--s5);
  border:var(--rule) dashed var(--black);
  background:none;color:var(--black)}
.park-slot__l{flex:none;font:900 var(--size-small)/1.2 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase;
  letter-spacing:.06em}
.park-slot__n{margin:0;flex:1 1 32ch;min-width:0;
  font-size:var(--size-small);line-height:1.4;opacity:.8}

@media (max-width:900px){
  .park-figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
}
@media (max-width:640px){
  .park-figs{grid-template-columns:1fr;gap:var(--s5)}
  .park-slot{padding:var(--s4)}
}
.park-go{margin-top:var(--s6)}

/* ==========================================================================
   THE HERO , FOUR THINGS, AND THE ORDER IS THE HIERARCHY.
   Fixed by Louis: the drawn wordmark is THE focus; then the date and place;
   then the ONE action; then the facts and the countdown. One quiet supporting
   element, the river, behind the mark and never over it.
   It used to hold seven things, including a mascot and a sticker. Both are out
   by ruling: a hero with seven things in it has no focus, it has a crowd.
   390 first; the desktop is the variation.
   ========================================================================== */

/* H1, THE HERO'S ONE QUIET SUPPORTING ELEMENT. Three things it has to get
   right, each of which it got wrong first:

   1. IT SITS BEHIND THE MARK, AND BEHIND NOTHING ELSE. At `inset:0` the layer
      covered the whole fold and the strokes ran across the facts list: "STAGES
      / THREE" and "TICKETS" were read over a pink stroke. The system's rule is
      flat , nothing in the ribbon layer sits behind a word , and the hero's
      own ruling puts the river "behind or below the wordmark, never over it".
      So it is bounded to the top of the fold and stops above the facts.
   2. IT TAKES A REAL HEIGHT. `.pattern-slot` ships
      `height:var(--pattern-height,150px)`, and an explicit height beats
      `inset`, so left alone the slot is a 150px strip and the river is cut by
      it. The height is set through the system's OWN variable.
   3. ITS EDGES FADE, on both axes, rather than stopping. Ruling 4, and the
      same treatment the join bands and the statement fold use. */

.hero > .s__in{position:relative;z-index:var(--z-body)}

/* PHONE FIRST. One column. The mark is the full width of the gutter box, the
   date and place sit under it, one action under that, then the facts. The hero
   does not try to fill the viewport: a short hero that is completely read
   beats a tall one that is half read. */
.hero__say{min-width:0}
.hero__side{min-width:0}

/* ==========================================================================
   THE STATEMENT FOLD , the text-fill set-piece.
   Pinned, scrubbed, one word at a time. The rest state is the finished
   sentence at full size, which is what is read with JS off.
   ========================================================================== */
.fill{position:relative}
#statement .s__in{display:block;width:100%}
.fill__words{margin:0;display:grid;gap:0;
  position:relative;z-index:var(--z-body)}

/* THE TYPE IS SIZED TO THE GUTTER BOX, ON WIDTH ALONE, and the height term is
   gone with the pin. There is no screen to fit inside any more: the fold is as
   tall as its own type, so the only job left is that the LONGEST LINE spans
   the box.

   The size is derived from a MEASUREMENT, not guessed. Set at a known size in
   the system's own cut, the three rows measure 5.38em, 2.56em and 5.79em, so
   "COMING HOME." is the longest and it is the one that has to span. The size
   is therefore the box divided by 5.79, which puts that line hard against both
   gutters and "THIS IS UNIÓN." just inside them. Every row is the SAME size:
   three display lines set to three different sizes to force a flush edge is a
   justified block, not a statement, and the system has no justified voice.

   LOUIS, 21 SEP: CENTRED. "A lot of the design system is centre-aligned", and
   he is right that it works better here: left-aligned, the three rows made a
   ragged right edge that drew the eye to the gap rather than to the words, and
   "HOME." looked stranded at the end of a short line. Centred, the three rows
   read as one block with a shared axis, the short middle row is deliberate
   rather than accidental, and "HOME." sits under the middle of the line above
   it instead of hanging off it. The fill reads better centred too: the ink
   arrives along a spine rather than sweeping in from one margin.

   `.fill__row` is `text-wrap:balance`-free on purpose: the breaks are the
   template's, written out as rows, so they are the same on every machine. */
#statement .s__in{text-align:center}
.fill__row{display:block;white-space:nowrap}
.fill__w{display:inline-block;margin:0;
  /* the BOX is the page measure, not the window: past 1440 the fold's content
     is capped, and sizing off 100vw ran "COMING HOME." out of the right edge at
     2560 (measured: it read "COMING HO"). */
  font:900 calc((min(100vw, var(--measure)) - (var(--gutter) * 2)) / 5.79)/.86 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase;
  /* the acute on Ó sits above the line box at this weight and line-height */
  padding-top:.18em;overflow:visible}
/* the fold is the type plus token padding, and nothing else */
#statement .fill{padding-block:var(--s7)}

@media (max-width:640px){
  /* PHONE. The same three rows, and they are the right three: broken any other
     way, "HOME." is orphaned on a line of its own at a fifth of the box, which
     is the thing Louis said did not feel right. Kept together with "COMING",
     the longest row is still "COMING HOME." and it still sets the size, so
     every line reaches across the box the same way it does at 1440. */
  #statement .fill{padding-block:var(--s6)}
}

/* ==========================================================================
   THE STAGES AS THE PINNED SEQUENCE.
   The turning block sits beside the slides; one room is on the screen at a
   time. Unpinned (no GSAP, or reduced motion) the slides are a plain stack and
   the block sits above them, which reads perfectly well.
   ========================================================================== */
.stages__pin{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter);
  display:grid;gap:var(--s7);align-items:center}
.stages__block{min-width:0}
.stages__slides{list-style:none;margin:0;padding:0;min-width:0}
.stages__s{display:grid;align-content:start;gap:var(--s3);
  padding-left:var(--s5);
  border-left:var(--rule-heavy) solid var(--stage,var(--black))}
.stages__s--main{--stage:var(--stage-main)}

/* ============================================================== 1025 and up */
@media (min-width:1025px){
  .stages__pin{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}

/* ==========================================================================
   THE WAITLIST FOLD.
   The tear stub on one side, the river button on the other, so the two
   mechanisms Louis starred are read as one action rather than two.
   ========================================================================== */
.wait{display:grid;gap:var(--s7);align-items:start}
.wait__go{display:grid;gap:var(--s5);align-content:start}
.wait__n{margin:0;max-width:40ch;font-size:var(--size-body);line-height:1.5}
@media (min-width:1025px){
  .wait{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
}

/* ==========================================================================
   THE HERO'S BALANCE AT 1440, MEASURED AND FIXED.
   The first build put the mascot, the facts strip and the countdown in one
   right-hand column and the mark, the line and the actions in the left. The
   right column measured 1108px and the left 559px, so the fold ran to 1366px
   with 550px of empty coral under the left column: a fold half as full as it
   is tall, which the wasted-space gate exists to catch.

   The fix is the GRID, not padding. Above 1025 the hero is three cells on two
   rows: the say column spans the full height on the left, the mascot sits top
   right at its own scale, and the facts and the countdown sit UNDER him rather
   than in a stack that outruns the mark. Nothing about how any of them looks
   changes; only which cell each sits in.
   ========================================================================== */
/* (the three-cell hero grid was removed with the mascot; site.css carries the
   two-column opener) */

/* ==========================================================================
   THE PARK FIGURES' DISPLAY NUMBER OVERFLOWS ITS OWN LINE BOX.
   Measured at 1440: `.park-fig__n` is set at line-height .82, so the glyph's
   Range rect runs 8px past the bottom of its box and lands on the unit line
   under it. The text-over-text gate read it as a collision and it was right:
   two sets of glyphs were 8px into each other, which at display weight is
   visible as a touch rather than a gap.

   The fix is the SPACE, not the line-height: the number keeps the compression
   it was drawn with (that is the type's own decision, upstream) and the unit
   is pushed clear of it.
   ========================================================================== */
.park-fig__n{padding-bottom:.12em}
.park-fig__u{margin-top:var(--s2)}

/* ==========================================================================
   THE STAGE SLIDE'S HEADLINE OVERFLOWS ITS OWN LINE BOX, the same defect the
   park figures had and for the same reason: `.rooms__h` is display weight at a
   line-height under 1, so the glyphs run past the box and land 2px into the
   word line under them. Two px at that weight is a touch, not a gap, and the
   text-over-text gate is right to call it.
   The compression stays (it is the type's own decision, upstream); the space
   below it is what moves.
   ========================================================================== */
.stages__s .rooms__h{padding-bottom:.1em}
.stages__s .rooms__w{margin-top:var(--s2)}

/* ==========================================================================
   THE STAGES PIN AT 390: THE WORDS COME FIRST, THE BLOCK IS A MARKER.
   Measured on the phone: the turning block ran 529px tall and the slide's copy
   started at 5727 in an 844px viewport, so through the whole pin the reader saw
   the block and never reached a single word about the stage. A pinned sequence
   whose content is below the fold is a pin that costs scroll and gives nothing.

   So below 1025 the order inverts and the block is held down: the slide's
   headline and copy lead, and the block sits under them at a size that reads as
   a marker for which stage is up rather than as the fold itself. It keeps its
   own SWING verb and its three picks, untouched; only how much room it takes
   changes, which is layout, and layout is this file's to decide.
   ========================================================================== */
@media (max-width:1024px){
  .stages__pin{grid-template-columns:minmax(0,1fr);gap:var(--s5);
    align-items:start}
  /* the words first */
  .stages__slides{order:1}
  .stages__block{order:2;
    /* a third of the screen at most, so the slide always has two thirds */
    max-height:28svh;overflow:hidden;
    display:grid;justify-items:center}
  .stages__block .spec-stage{width:100%}
  /* and the slide's own copy is the size it deserves when it is the fold */
  .stages__s{padding-left:var(--s4)}
}


/* THE STATEMENT. Words are inline-blocks (each is a transform target), so the
   space between two words on one line is given back as a margin.

   THE PHONE OVERRIDE THAT USED TO LIVE HERE IS DELETED. It put every WORD on
   its own line at 26vw, which is five lines on a phone, and it was sized off
   `svh` because the fold was pinned to a screen. With the pin gone there is no
   screen to fill, and one word a line orphans "HOME." on a line of its own:
   exactly what Louis said did not feel right. The three rows above are the
   break at every width now, and the size is derived from the longest of them
   in one place rather than twice. */
.fill__row .fill__w + .fill__w{margin-left:.22em}

/* ==========================================================================
   NO FOLD IS A DEAD BAND. quick.py measured sound 34%, stages 40% and park
   34% empty at 1440: folds carrying a screen-and-a-bit of ground around a
   screen of content. The fix is the SPACE, in tokens, and nothing is added to
   fill the gap: a fold that needs decoration to justify its height is a fold
   that was too tall.
   ========================================================================== */
@media (min-width:1025px){
  #sound,#stages,#park{padding-block:var(--s8)}
  /* the internal gaps come in with the fold, or the fold only moves its empty
     ground from the outside to the inside */
  .rooms{margin-top:var(--s6)}
  .park-figs{gap:var(--s5)}
}

/* THE STAGES HEAD: heading left, the turning block right, in its own cell. */
.stages__head{display:grid;gap:var(--s6);align-items:end}
.stages__block{min-width:0}
@media (min-width:1025px){
  .stages__head{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
}

/* THE OPENER, as the first version had it. */
.hero__sub{margin:var(--s5) 0 0;max-width:44ch;
  font-size:var(--size-body);line-height:1.45}
@media (max-width:640px){.hero__sub{margin-top:var(--s4)}}

/* ==========================================================================
   THE LINEUP ON HOME.
   The same two components the lineup page uses, swapped at the same width,
   so the two pages cannot drift. The bill is centre-aligned, which is the
   component's own form, and it is capped rather than stretched across a 1440
   measure: its type is set in cqw, so a wider box only makes it bigger, never
   better. `L-announce` is the phone's, because at 390 the bill's third tier
   sets at about seven pixels (measured on the lineup page).
   ========================================================================== */
.home-bill-wide{max-width:980px;margin-inline:auto}
.home-bill-phone{display:none}
.home-bill-go{margin-top:var(--s7)}
@media (max-width:640px){
  .home-bill-wide{display:none}
  .home-bill-phone{display:block}
  .home-bill-go{margin-top:var(--s6)}
}


/* THE BILL IS THE SECTION. The block runs the width of the fold on the fold's own
   black, so the plate and the ground are one surface; one action, centred under
   it, as the bill itself is centred. */
.home-bill .home-bill-wide{max-width:1180px;margin-inline:auto}
.home-bill-act{margin:var(--s7) 0 0;text-align:center}
.home-bill .home-bill-go{margin-top:0}
@media (max-width:640px){.home-bill-act{margin-top:var(--s6)}
  .home-bill-act .u-pill{width:100%;justify-content:space-between}}
/* the bill carries its own padding; the section's on top of it doubled the black
   above the first line to ~190px. The section gives way. */
.home-bill{padding-block:var(--s6) var(--s8)}
@media (max-width:640px){.home-bill{padding-block:var(--s7) var(--s7)}}

/* the waitlist fold's head row: headline left, the mascot in the bare right half */
.wait-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s7);
  align-items:end;margin-bottom:var(--s6)}
.wait-head .s__h{margin-bottom:0}
.wait-head__m{--mascot-w:clamp(180px,20vw,300px);margin-right:clamp(0px,6vw,96px)}
@media (max-width:760px){
  .wait-head{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .wait-head__m{--mascot-w:170px;margin:0;justify-self:end;grid-row:1}
}