/* Golden split (design A, canvas "Golden-ratio hero mockups", 8 October 2026). Screen B above 900px on
   phi = 1.618: the position takes 61.8% of the window and Discover 38.2% (890 | 550 at 1440px), the
   number's size steps up by phi from 16px (287px at the top), spacing runs on Fibonacci numbers
   (13, 21, 34, 55, 89), the card is 1 : 1.618, and Pass and Watch split 38.2 / 61.8.
   Loaded after waitlist.css and waiting-room.css, and overrides them only from 901px. At 900px and under,
   and on phones, nothing here applies: the page stays one column, as before. */
@media (min-width: 901px) {
  .stage-position {
    --gx-l: var(--page-x, clamp(24px, 6.2vw, 89px));   /* the position column's side padding: the page's margin, the header's too (shared/site-header.css) */
    --gx-r: clamp(24px, 3.82vw, 55px);  /* Discover's, on the seam's side (it was the hairline's) */
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
    justify-content: stretch; column-gap: 0; padding-left: 0; padding-right: 0;
    /* No ground of its own for Discover's column and no line at the 61.8% mark. It had a midnight blue (Carl's mockup,
       "mockuptlanding", 10 October 2026) and a hairline; Carl, the same day: "Remove the dividing line and the blue tint,
       just make it a bit darker on the right side". The page's own near-black runs under both columns now, the wall of
       lots runs across both (below), and the veil over the wall is what makes the right side darker. */
  }
  /* The lot wall and its veil run across the whole page, as they did before the golden split: the wall's four columns
     behind both columns of Screen B, drifting behind Discover's card as well (waitlist.css has them at inset 0; this file
     used to stop them at the hairline's place, 61.8%). Carl, 10 October 2026: "allow the same lots background on the
     right as well scrolling behind the tinder scroller", then "just make it a bit darker on the right side", then, on
     seeing a wall of eight narrower columns, "The background should be as it was initially where there are four
     columns of lots". So: the veil's own stops to 45%, and its right end darker than waitlist.css's .6 (.76, in a
     black a shade darker than the ground), which is what makes the right side a bit darker; the wall is untouched.
     Then, the same day: "Make the right side of the golden ratio here a tad darker fade to highlight layout
     difference". So a second layer over the veil: a black that fades in across the seam, an S-curve from 50.8% to
     72.8% centred on 61.8%, which runs through the gutter between the columns and touches neither one's content,
     and then holds. It ends at .44, which puts Discover's ground at about 1 / phi of the position's (bare ground 14.2
     to about 8.6 of 255) and dims the lots behind the deck by a third (their mean over the right quarter, 18.4 to
     12.1); the page's left, to 50.8%, is as it was. The dial is the last alpha, .44; the four before it are 0, .156,
     .5 and .844 of it. */
  .stage-position .veil-b {
    background:
      linear-gradient(90deg, rgba(5,4,4,0) 50.8%, rgba(5,4,4,.069) 56.3%, rgba(5,4,4,.22) 61.8%, rgba(5,4,4,.371) 67.3%, rgba(5,4,4,.44) 72.8%),
      linear-gradient(90deg, #0f0e0e 0%, rgba(15,14,14,.92) 45%, rgba(11,10,10,.76) 100%);
  }
  .col-left { display: flex; flex-direction: column; padding: 0 var(--gx-l); }
  .big { font-size: clamp(96px, min(26vh, 20vw), 287px); line-height: .8; }
  .pos-row { gap: 13px 34px; margin-top: 13px; }
  .pos-row .pill-row { gap: 13px; padding-bottom: 21px; }
  .ahead { margin-top: 21px; font-size: clamp(19px, 1.81vw, 26px); line-height: 1.35; }
  .bar { margin-top: auto; } /* the line and the cards sit at the column's foot, the number at its head */
  .col-left .access-link-pos { align-self: flex-start; }
  .invite { margin-top: 34px; padding: 21px 21px 18px; }
  .link-row { margin-top: 13px; }
  .link-row button { height: 44px; padding: 0 16px; }
  /* The footer runs the whole width again, as on the live page. Carl, 10 October 2026, with a screenshot of it:
     "Preserve the footer, everything should be centered to the right as in the image"; asked which parts, he ticked
     the full-width footer only. So the line, the Live strip and the count of seats run under both columns, the count
     ending at the right margin like Sign out and the card (the golden split had stopped the footer at the position
     column: right: calc(38.2% + var(--gx-l))). The keyboard hint and the line that says what just happened, which
     the shared lines below put on this row at the card's left edge, would now run into the count, so they end 180px
     short of the margin: the count is 130px wide ("1 in line") to 169px ("10,000 in line"). */
  .live-bar { left: var(--gx-l); right: var(--gx-l); }
  .stage-position .wr-hintline, .stage-position .wr-say { left: auto; right: 180px; white-space: nowrap; }

  /* U, 10 October 2026 (Carl: "margins should be the same all around"): Discover's column takes the page margin
     on the window's side, so Sign out and the card end on one line, and --gx-r on the seam's. The card,
     360px at most, sits against the margin and takes what is left. */
  .wr { padding: 0 var(--gx-l) 0 var(--gx-r); }
  .wr-head, .wr-grid { width: min(100%, 360px); margin-left: auto; margin-right: 0; }
  .wr-title { font-size: 42px; }
  .wr-grid { margin-top: 34px; }
  .wr-stack { max-height: 582px; margin-bottom: var(--box-gap); } /* 360 x 1.618 */
  .wr-acts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); margin-top: 0; }

  /* Boxes on shared lines, 10 October 2026 (Carl, shown a mock of this page: "line up horizontally the boxes as now they
     are off a bit ... small changes, nothing drastic"). Pass and Watch used to sit across the gap between two of the left
     column's boxes, and the card's foot met nothing. Now the left column's boxes stack up from its foot, --box-gap apart
     (waitlist.css: 12px, 8px when a short window closes the cards up), and Discover stands on the same lines: Pass and
     Watch fill the band the "Tell us" strip fills, both --row-h tall, the column's foot as their bottom, and the card
     ends where the box above that strip ends, the same gap above the buttons as the boxes have between them. The
     keyboard hint and the line that says what just happened step down onto the Live row's line, one caption row across
     the foot of the page, the hint giving way to the message while it shows. The card stops at 582px: in a window
     taller than that can use, the card and its buttons stay on the column's foot and the room is left above them, as
     the left column leaves it above its boxes. */
  .stage-position { --row-h: 50px; --box-gap: 12px; }
  .col-left .profile { display: flex; align-items: center; min-height: var(--row-h); padding-top: 0; padding-bottom: 0; }
  .col-left .profile > .row { flex: 1 1 auto; }
  .wr-deck { position: relative; justify-content: flex-end; }
  .wr-card { box-shadow: 0 8px 12px -10px rgba(0, 0, 0, .85); } /* inside the 12px gap above the buttons (the gap was 33px, and the shadow 18px 36px) */
  .wr-act { height: var(--row-h); }
  .wr-hintline, .wr-say { position: absolute; left: 0; right: 0; margin: 0; line-height: 18px; }
  .wr-hintline { top: calc(100% + var(--pb) - 40px); } /* its line ends where the Live row's does: 22px above the page's foot */
  .wr-say { bottom: calc(22px - var(--pb)); pointer-events: none; } /* anchored by its foot, so a message that wraps grows upward */
  .wr-deck:has(.wr-say:not(:empty)) .wr-hintline { opacity: 0; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .wr-title { font-size: 32px; }
  .wr-grid { margin-top: 21px; }
  .invite { margin-top: 21px; }
  .stage-position { --row-h: 44px; } /* the buttons' height here (waiting-room.css), and the "Tell us" strip's */
  .stage-position:has(#reserve-card:not([hidden])) { --box-gap: 8px; } /* waitlist.css closes the cards up by the same 4px */
  /* the batch bar, which sends the boxes to the column's foot (.bar { margin-top: auto }), is hidden here with the
     reserve card showing, so the first box takes that room, keeping the 12px it had above it */
  .col-left:has(#reserve-card:not([hidden])) .invite { margin-top: auto; }
  .col-left:has(#reserve-card:not([hidden])) .ahead { margin-bottom: 12px; }
}
/* U, 11 October 2026 (Carl): the signed-in email no longer sits in the nav; it is the first line of the account
   menu (waitlist.css, .acct*). The 10 October rule that made it truncate and leave 24px to the links went with it. */