/* ============================================================
   SCHEDULE — the folding stack.

   Every row is a sticky card. As the next card rides up over it, the one
   beneath folds away, so the day stacks itself as you scroll and the live
   row is always the one you are reading. sched.js writes --fold (0..1).

   Luke, 2026-08-19: the fold is the good part and stays. What was wrong was
   the treatment, two rows filled #242424 and the rest #FFFFFA with no rule
   behind which went dark. So EVERY card is the same card now: #FFFFFA at
   30px radius on the site's hairline, no shadows, no chips, no alternation.
   Rhythm comes from the stack itself, not from flipping the fill.

   THE ROLL IS THE POINT. Each card tips back on rotateX as it goes, which
   is what makes the stack read as paper rolling away under the next sheet
   rather than a list whose rows quietly vanish. I removed the tip once,
   reasoning that this site has no shadows so a tilt has nothing to sit on.
   Luke, straight back: "you didn't give it the roll-up effect, it looks
   really bland." He is right. Restore rotateX and its perspective, keep the
   travel and the scale generous. Do not flatten this again.

   And THE CARDS THEMSELVES NEVER CHANGE OPACITY. That is load-bearing. Fade
   the <li> and every card in the deck goes translucent at once, so four
   rows of text ghost through each other and the stack reads as a printing
   error. The card stays solid so it properly covers the one beneath, and
   the FADE IS APPLIED TO THE CONTENT INSIDE IT instead. Same soft hand-off,
   no bleed-through. If you ever put opacity back on .selr-slot, you will
   reintroduce the ghosting.

   One accent, used once: the closing time is #6736E2, because that row is
   where the day becomes theirs. That is a rule, which is what the old
   alternating fills did not have.
   ============================================================ */

#schedule .selr-sched { align-items: start; }
/* head top-aligned with the stack and sticky, the way every other section
   header on the site sits. Centring it was tried and reads worse: the label
   loses its alignment with the first card's top edge and the block floats. */
#schedule .selr-sched-head { position: sticky; top: 120px; }

#schedule .selr-sched-list {
  perspective: 1400px;  /* without this rotateX is flat and the roll dies */
  --sched-top: 120px;   /* where the first card parks */
  --sched-step: 18px;   /* the sliver of each card left showing in the deck */
  padding-bottom: 10vh;
}
/* The stack IS the motion, so the cards-tier reveal is neutralised here.
   BOTH lines are needed: that tier parks its elements at opacity .001 and
   relies on its keyframes to bring them up, so killing the animation alone
   leaves the whole stack invisible. The card is pinned opaque and the fold
   fades the content inside it instead. */
#schedule .selr-sched-list > li { animation: none !important; opacity: 1 !important; }

#schedule .selr-slot,
#schedule .selr-sched-break {
  position: sticky;
  top: calc(var(--sched-top) + var(--sched-i, 0) * var(--sched-step));
  --fold: 0;
  margin: 0 0 18px;
  border-radius: 30px;
  background: #FFFFFA;
  border: 1px solid rgba(227,227,227,.45);
  border-top: 1px solid rgba(227,227,227,.45);
  transform-origin: 50% 0%;
  transform:
    translateY(calc(-18px * var(--fold)))
    scale(calc(1 - .08 * var(--fold)))
    rotateX(calc(-12deg * var(--fold)));
  transition: transform .12s linear;
  will-change: transform;
}
/* The fade rides the CONTENT, never the card (see the note above), and it
   runs FASTER than the fold on purpose. At 1:1 the text is still half lit
   when the incoming card cuts across it, so you read a sentence sliced in
   half. At 1.7 it has gone before the edge reaches it, and the hand-off
   looks like one card replacing another rather than one card guillotining
   another. */
#schedule .selr-slot > *,
#schedule .selr-sched-break > * {
  opacity: max(0, calc(1 - 1.7 * var(--fold)));
  transition: opacity .12s linear;
}

#schedule .selr-slot {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px;
  padding: 34px 36px 36px;
  min-height: 150px;
}
#schedule .selr-sched-list > li:first-child { padding-top: 34px; }

#schedule .selr-slot-start { font-size: 20px; letter-spacing: -0.03em; }
#schedule .selr-slot-title {
  font-size: 25px; letter-spacing: -0.04em; line-height: 1.2; margin-bottom: 8px;
}
#schedule .selr-slot-desc {
  font-size: 17px; letter-spacing: -0.03em; max-width: 46ch;
}

/* ---- the hub: no clock, so the row is a heading beside its line ---------
   deck.css already tried to collapse the two-column slot on the hub, but its
   `.selr-schedule.is-multi .selr-slot` lost to `#schedule .selr-slot` above.
   The time column stayed in the grid with `display: none` on its only child,
   so the body landed in the 120px clock track and wrote itself down a column
   a sixth of the card wide, with ~600px of empty card beside it.

   Fixed at the right specificity, and the freed width is spent the way the
   dated pages spend it: the heading holds a left rail, the line runs beside
   it. Reads as a list of headings rather than six paragraphs. */
#schedule.is-multi .selr-slot { grid-template-columns: minmax(0, 1fr); }
#schedule.is-multi .selr-slot-body {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
#schedule.is-multi .selr-slot-title { margin-bottom: 0; }
#schedule.is-multi .selr-slot-desc { max-width: 52ch; }

/* the closing row: the one accent, marking where the day becomes theirs */
#schedule .selr-slot-last .selr-slot-start { color: #6736E2; }

/* the break row (Elite only) is a card too, just a slim one, so it stacks
   with the rest instead of scrolling away underneath them */
#schedule .selr-sched-break {
  display: flex; align-items: center; justify-content: center;
  padding: 20px 36px; min-height: 0;
}
#schedule .selr-sched-break::before,
#schedule .selr-sched-break::after { content: none; }

@media (max-width: 1199.98px) {
  #schedule .selr-slot { grid-template-columns: 100px minmax(0, 1fr); gap: 20px; padding: 30px 30px 32px; }
}
@media (max-width: 999.98px) {
  #schedule .selr-sched-head { position: static; }
  #schedule .selr-sched-list { --sched-top: 90px; }
}
@media (max-width: 809.98px) {
  #schedule .selr-slot {
    grid-template-columns: 1fr; gap: 8px; padding: 24px 22px 26px; min-height: 0;
  }
  #schedule.is-multi .selr-slot-body { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #schedule.is-multi .selr-slot-title { margin-bottom: 0; }
  #schedule .selr-slot,
  #schedule .selr-sched-break { border-radius: 20px; margin-bottom: 14px; }
  #schedule .selr-sched-break { padding: 16px 22px; }
  #schedule .selr-slot-title { font-size: 20px; }
  #schedule .selr-slot-desc { font-size: 15px; }
  #schedule .selr-sched-list { --sched-top: 84px; --sched-step: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #schedule .selr-slot,
  #schedule .selr-sched-break { position: relative; top: auto; transform: none; transition: none; }
  #schedule .selr-slot > *,
  #schedule .selr-sched-break > * { opacity: 1; transition: none; }
  #schedule .selr-sched-head { position: static; }
}

/* ============================================================
   TYPE — section headings match the site: 80px desktop, 60 tablet,
   35 mobile (design language tiers). The page token was 56px max.
   Hero H1 keeps its own size.
   ============================================================ */
:root { --selr-t-h2: 80px; }
@media (max-width: 1199.98px) { :root { --selr-t-h2: 60px; } }
@media (max-width: 809.98px)  { :root { --selr-t-h2: 35px; } }
main .framer-styles-preset-pc4jh9 { letter-spacing: -0.04em; line-height: 1.05; }