/* ============================================================
   FSOE 1000 - style-v2.css
   Venue + line-up announcement (2026-09-03).

   Loaded by indexv2.html AFTER style.css. style.css is deliberately
   left untouched so the live index.html cannot regress while v2 is
   under review. Every rule below either

     (a) re-clamps something style.css sized for the OLD near-square
         lockup, which v2 replaces with a wide one, or
     (b) adds the new .lineup section.

   Each block mirrors a media condition in style.css and repeats it in
   the SAME ORDER, so equal-specificity rules resolve the same way and
   this file simply wins by coming later. If you reorder style.css,
   reorder here too.

   At promotion time these can be folded back into style.css.
   ============================================================ */


/* ============================================================
   1. LOCKUP  -  876x489 square (0.98:1)  ->  1738x489 wide (3.55:1)
   ============================================================
   The mark is now 3.6x wider than it is tall, so it is sized by WIDTH
   against its container and the height falls out of the ratio. Matching
   the old lockup's HEIGHT would have made it span far past the column;
   matching its WIDTH would have shrunk it to a thin strip with no
   presence. Both are wrong - these widths target the same optical mass
   the square mark had, roughly 90% of the brand column on desktop.

   Bonus: the wide mark is much SHORTER than the square one (146px vs
   346px at desktop size), which hands vertical space back to the
   landscape-phone layout where every pixel costs a form field.
   ------------------------------------------------------------ */

/* base - portrait flow, mirrors style.css `width: min(66vw, 320px)` */
.brand__lockup {
  width: min(84vw, 430px);
}

/* desktop two-column, mirrors style.css @media (min-width:768) and (min-aspect-ratio:7/10)
   Column is ~1.05fr of a 1280px grid, so roughly 578px at the cap; 520px fills it
   without crowding the gutter. Keeps style.css's `margin: 0` left-align. */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  .brand__lockup { width: min(46vw, 520px); }
}

/* PORTRAIT phones + narrow, mirrors style.css @media (max-aspect-ratio:7/10),(max-width:767px) */
@media (max-aspect-ratio: 7/10), (max-width: 767px) {
  .brand__lockup { width: min(86vw, 380px); }
}

/* Portrait tablets (>=768px AND aspect <= 0.7, e.g. 820x1180).
   NOTE the position of this block: in style.css the equivalent rule sits BEFORE
   the portrait block above, so it is dead code - every device it targets also
   matches `(max-aspect-ratio: 7/10)` and gets overridden by the later, smaller
   value. Placed after here so the intended step-up actually applies. */
@media (min-width: 768px) and (max-aspect-ratio: 7/10) {
  .brand__lockup { width: min(74vw, 560px); }
}

/* Landscape phones, mirrors style.css @media (min-width:640) and (min-aspect-ratio:7/10) and (max-height:520)
   style.css caps the SQUARE lockup with max-height + object-fit because a tall
   mark could eat the whole viewport. The wide mark is only 0.28:1, so the cap is
   unreachable and is reset to keep the box model honest. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .brand__lockup {
    width: min(34vw, 300px);
    max-height: none;
    object-fit: fill;
  }
}


/* ============================================================
   2. PLACE LINE  -  "Sheffield" (9 chars) -> "Steelyard, Sheffield" (20)
   ============================================================
   The string more than doubled, so it is re-clamped down and the tracking
   eased from 0.16em to 0.13em. It deliberately ends up SMALLER than the
   date: Lewis's 2026-07-29 override put the date at the top of the
   hierarchy and that still holds - the venue is new information, not the
   loudest information.
   ------------------------------------------------------------ */
.brand__place {
  font-size: clamp(15px, 3.9vw, 24px);
  letter-spacing: 0.13em;
}
/* Only the comma may break. Same trick as .brand__date > span: the narrowest
   phones get a deliberate two-line "Steelyard, / Sheffield" instead of an
   overflow or a mid-word split. */
.brand__place > span { white-space: nowrap; }

@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  .brand__place { font-size: clamp(17px, 2.4vw, 26px); }
}

@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .brand__place { font-size: clamp(11.5px, 1.75vw, 15px); letter-spacing: 0.1em; }
}


/* ============================================================
   2b. DATE MATCHED TO THE VENUE LINE  (Adam, 2026-09-03)
   ============================================================
   "Make the date the same size and font as the venue."

   Both lines were already Chakra Petch (var(--font-disp)) and both gold, so the
   visible difference was weight, size and tracking: the date was 700 / up to 34px
   / 0.07em against the venue's 600 / up to 26px / 0.13em. All three are matched
   here, at every breakpoint, so the two lines read as one block.

   ⚠️ HISTORY: this REVERSES Lewis's 2026-07-29 override, which deliberately made
   the date the loudest element on the page ("there's another event launching soon
   that's a week before so really important people have the date slapped in their
   face"). That reasoning was about a teaser with no venue and no line-up. This page
   has both, so the hero is no longer carrying the date alone. If Lewis queries why
   the date shrank, this is the trail.

   Line-height comes to 1 to match; the nowrap span on the date is untouched, so
   only the weekday may still drop to its own line on the narrowest phones.
   ------------------------------------------------------------ */
.brand__date {
  font-size: clamp(15px, 3.9vw, 24px);
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1;
}

@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  .brand__date { font-size: clamp(17px, 2.4vw, 26px); }
}

/* Placed after the desktop block, mirroring style.css's own order, so the
   landscape-phone compression still wins where both conditions match. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .brand__date { font-size: clamp(11.5px, 1.75vw, 15px); letter-spacing: 0.1em; }
}


/* ============================================================
   3. LINE-UP SECTION
   ============================================================
   The line-up is client artwork, not type - Adam's call, 2026-09-03. The
   file is a transparent PNG of flat cream and gold, so it drops straight
   onto the page background with no plate behind it and reads as part of
   the page rather than as a pasted-in poster.

   The artwork's own SATURDAY 12 JUNE 2027 / STEELYARD, SHEFFIELD /
   2PM-10PM block was cropped off at the blank gutter before export: those
   three facts are already live text in the hero, where they can be read by
   crawlers and screen readers and can carry the JSON-LD. Nothing on this
   page states a fact twice.
   ------------------------------------------------------------ */
.lineup {
  width: 100%;
  max-width: 980px;
  margin: clamp(10px, 3vw, 30px) auto 0;
  text-align: center;
}

/* Mirrors .panel__eyebrow so the section header rhymes with the panel's
   "Priority access" and the hero's show-times rule. */
.lineup__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(14px, 2vw, 22px);
  font-family: var(--font-disp);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.lineup__hair {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-line), rgba(242, 206, 130, 0));
}
.lineup__hair:first-child {
  background: linear-gradient(270deg, var(--gold-line), rgba(242, 206, 130, 0));
}

/* Sits directly on the scene. In landscape the .bg layer is position:fixed so it
   stays behind the scroll; in portrait it is absolute, 118svh tall and faded to
   --void by its own base, so the artwork lands on flat void. Both are fine
   unplated - the drop shadow is only there to stop the cream type dissolving
   into the brightest part of the desert flare on wide screens. */
.lineup__art {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 2px 22px rgba(12, 9, 6, 0.85));
}

/* Desktop: the line-up sits INSIDE THE LEFT COLUMN under the brand block, not
   full-width beneath both columns (Adam, 2026-09-03).

   Done with explicit grid placement, which is what makes the markup order free to
   serve mobile: the source is brand -> line-up -> signup (Adam wants the line-up
   above the form on phones, 2026-09-03) while desktop pins each section to its own
   cell regardless. Reading order and visual order match at every size, so no CSS
   `order` fudge and no tab-order mismatch.
   The artwork is 1.93:1 (2314x1199 after FEATURING was cropped off the top on
   2026-09-03), so on a 390px phone it renders about 174px tall, not the full 1199px
   of the source file - it costs the form roughly 205px of scroll. */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  /* align-ITEMS start tops each item in its row; align-CONTENT centre packs the
     ROWS together. Both are needed. .stage__inner is `flex: 1 0 auto` inside a
     100svh .sheet, so a grid here defaults to align-content:stretch and inflates
     the rows to fill the viewport - which opened a ~365px dead gap between the
     brand lede and the line-up on a tall window. Packing the rows closes it and
     leaves the slack around the block instead of inside it. */
  .stage__inner { align-items: start; align-content: center; }
  /* style.css nudges .brand up 100px to sit off the shared centre axis. With the
     column top-aligned that nudge would pull it into the stage padding, so it goes. */
  .brand  { grid-column: 1; grid-row: 1; margin-top: 0; }
  .lineup {
    grid-column: 1;
    grid-row: 2;
    max-width: none;              /* fill the column, not the 980px centred cap */
    margin: clamp(16px, 2.4vw, 30px) 0 0;
  }
  /* Panel spans both rows and centres against the full height of the left column,
     so it reads as opposite the whole block rather than floating by the lockup. */
  .signup { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  /* Left-aligned column: drop the leading hairline so "LINE-UP" starts flush with
     the brand above it. Same treatment style.css gives .brand__date-hair. */
  .lineup__hair:first-child { display: none; }
}
/* Landscape phones keep the line-up FULL WIDTH below both columns: the left
   column is only ~360px there, which is too narrow to read artwork typeset two
   names to a line. It is far below the fold on a 390px-tall viewport either way. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage__inner { align-items: start; }
  .brand  { grid-column: 1; grid-row: 1; }
  .signup { grid-column: 2; grid-row: 1; }
  .lineup {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    margin-top: 14px;
  }
  .lineup__eyebrow { font-size: 10px; letter-spacing: 0.2em; margin-bottom: 10px; }
}

/* Third beat of the existing page-load reveal: .brand 0s, .signup 0.14s, line-up
   0.28s - correct on desktop, where the panel is the second thing the eye meets. */
.lineup {
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}
/* On phones the stack is brand -> line-up -> signup, so the delays swap to follow
   the eye down the page rather than firing the form before the line-up above it. */
@media (max-aspect-ratio: 7/10), (max-width: 767px) {
  .lineup { animation-delay: 0.14s; }
  .signup { animation-delay: 0.28s; }
}