/* selr-whats-on.css — the /whats-on board  (rebuilt 2026-08-25).
 *
 * A NOTICE BOARD, IN THREE PARTS.
 *
 * THE NOTICE. Title, one line, and the next thing that has not happened yet,
 * live. It replaced an eyebrow, a 120px title, a 45px line, a lead paragraph
 * and a 60px heading over each block below it, which meant six pieces of
 * writing before a reader reached a single date.
 *
 * THE CALENDAR. A month at a time, every month to the end of the year, so a
 * month with nothing booked reads as an empty month rather than a missing one.
 * A day says what is on it, and says the rest on hover.
 *
 * THE RUN. Every date as a card that pins while the next rides up over it, the
 * Services pager on the homepage at a fraction of the size. Open first, then
 * announced-without-a-date, then everything behind us under its own divider.
 *
 * FOUR STATES, AND THEY MUST NEVER BE CONFUSABLE:
 *   open      solid purple. Places are open, you can act.
 *   elite     open, plus the estate's real foil. Not a second accent, a metal.
 *   pending   dashed purple outline. Real, announced, date not locked.
 *   past      flat warm grey, chrome stripped. Nothing left to decide.
 *
 * THE FOIL IS NOT INVENTED. It is the Elite badge already shipping on the
 * workshop site (selr-workshops/src/css/deck-grid.css:213) copied value for
 * value: linear-gradient(135deg, #8C6B3F, #7A5A2E 48%, #64491F), ink #FFFDF6,
 * 10px uppercase at 0.16em. One accent is still one accent. A metal is not a
 * colour in the palette, it is a material, and this one already exists.
 *
 * THE FOLD HAS TWO LOAD-BEARING RULES, learned on the workshop site's schedule
 * stack. The card NEVER changes opacity, or every date in the deck ghosts
 * through every other one. And the content fade runs FASTER than the fold, or a
 * line gets cut in half by the incoming edge.
 *
 * Shell (nav, footer, buttons, motion, type) comes from selr-services-hub.css.
 * Everything else follows the measured design language: canvas #F7F5EF, cards
 * #FFFFFA, ink #242424 / #616161, accent #6736E2, radii 20/30/40, Manrope
 * Variable at wght 585, negative tracking, no drop shadows.
 */

:root {
  /* THE LANES. A calendar is read by colour before it is read by words, so a
     community call must not wear the Install Day's purple. Four lanes, no more,
     each one earned: the brand purple for the thing we sell, the estate's own
     foil for its Elite tier, the Skool mark's own red for the community call
     that lives on Skool, and a cool blue for anything run online. Every fill
     clears 5:1 against the ivory that sits on it. */
  --lane-install: #6736E2;
  --lane-install-press: #5024C0;
  --lane-community: #B8403A;
  --lane-community-press: #9E362F;
  --lane-online: #2E5BC7;
  --lane-online-press: #2449A3;
  --won-foil: linear-gradient(135deg, #8C6B3F 0%, #7A5A2E 48%, #64491F 100%);
  --won-foil-ink: #FFFDF6;
  --won-foil-line: #8C6B3F;
  --won-past-fill: #EFECE4;
  --won-past-fill-hi: #E6E2D8;
  --won-seam: #FBFAF6;
  --won-hair: #E8E4DA;
  /* The quiet ink on a finished day. It was #9A958A, which lands at 2.86:1 on
     the seam and fails a 10px uppercase label outright. This clears 4.9:1 and
     still reads as clearly secondary against #242424. */
  --won-faint: #6E6A61;
}

/* ==========================================================================
   THE NOTICE
   ========================================================================== */

/* .svc-hero ships 220px of top padding to clear the absolutely positioned nav,
   which actually needs about 120. On a board that is 100px of nothing above the
   first thing worth reading, so this page takes it back. */
.won-hero { padding-top: 150px; padding-bottom: 0; }
.won-hero-line {
  margin: 20px 0 0;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--svc-muted);
  max-width: 40ch;
}

/* Hidden until the script has a real next event. An empty strip is furniture. */
.won-next { display: none; margin-top: 40px; }
.won-next.is-live { display: block; }

.won-next-in {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
  background: var(--svc-surface);
  border: 1px solid var(--won-hair);
  border-left: 4px solid var(--svc-purple);
  border-radius: 30px;
  padding: 20px 30px;
  max-width: 900px;
  box-sizing: border-box;
}
.won-next-in.is-elite { border-left-color: var(--won-foil-line); }

.won-next-kicker {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--svc-purple);
  flex: none;
}
.won-next-in.is-elite .won-next-kicker { color: var(--won-foil-line); }

.won-next-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.won-next-title {
  font-family: 'Manrope Variable', 'Manrope', sans-serif;
  font-variation-settings: 'wght' 585;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--svc-ink);
}
.won-next-meta {
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--svc-muted);
}
.won-next-cta {
  flex: none;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--svc-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--svc-purple);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* ==========================================================================
   THE CALENDAR
   ========================================================================== */

/* Hidden until selr-whats-on.js fills it. An empty seven-column frame reads as
   a broken calendar, and the run below is the whole page without JavaScript. */
.won-cal { display: none; }
.won-cal.is-live { display: block; }

.won-cal-card {
  background: var(--svc-surface);
  border-radius: 30px;
  border: 1px solid var(--won-hair);
  padding: 30px 30px 24px;
  box-sizing: border-box;
}

/* ---------- the bar ---------- */
.won-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}
.won-month {
  margin: 0;
  font-family: 'Manrope Variable', 'Manrope', sans-serif;
  font-variation-settings: 'wght' 585;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: var(--svc-ink);
  min-width: 260px;
}
.won-arrows { display: flex; gap: 10px; margin-left: auto; }
.won-arrow {
  width: 44px; height: 44px;
  border-radius: 100%;
  border: 1px solid var(--won-hair);
  background: var(--svc-surface);
  color: var(--svc-ink);
  display: grid; place-items: center;
  cursor: pointer; padding: 0;
  transition: border-color .3s var(--svc-ease-sym),
              color .3s var(--svc-ease-sym),
              transform .2s var(--svc-ease);
}
.won-arrow svg { width: 15px; height: 15px; display: block; }
.won-arrow:hover { border-color: var(--svc-purple); color: var(--svc-purple); }
.won-arrow:active { transform: scale(.98); }
.won-arrow[disabled] { opacity: .3; cursor: default; }
.won-arrow[disabled]:hover { border-color: var(--won-hair); color: var(--svc-ink); }

/* ---------- the month strip ----------
   Every month to the end of the year, with a count when the month holds
   something. An empty pill is not a gap in the strip, it IS the information:
   that is a month with nothing booked in it. */
.won-months {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 25px;
  scrollbar-width: none;
}
.won-months::-webkit-scrollbar { display: none; }
.won-mpill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--won-hair);
  background: var(--svc-surface);
  color: var(--svc-ink);
  border-radius: 40px;
  padding: 9px 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .3s var(--svc-ease-sym),
              color .3s var(--svc-ease-sym),
              border-color .3s var(--svc-ease-sym);
}
.won-mcount {
  display: inline-grid;
  place-items: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 40px;
  background: var(--svc-purple);
  color: var(--svc-on-purple);
  font-size: 11px;
  letter-spacing: 0;
}
.won-mpill.is-empty { color: var(--won-faint); border-style: dashed; }
.won-mpill:hover { border-color: #C9C4B8; }
.won-mpill.is-on {
  background: var(--svc-purple);
  border-color: var(--svc-purple);
  border-style: solid;
  color: var(--svc-on-purple);
}
.won-mpill.is-on .won-mcount { background: var(--svc-on-purple); color: var(--svc-purple); }

/* ---------- the grid ---------- */
.won-dows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.won-dow {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--svc-muted);
  padding-left: 12px;
}
.won-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

/* Landscape, not square. Seven square cells across a 1320 container makes the
   month 1180px tall, a page of its own, and buries the run underneath it. */
.won-cell {
  position: relative;
  aspect-ratio: 1.6 / 1;
  border-radius: 20px;
  border: 1px solid var(--won-hair);
  background: var(--svc-surface-2);
  padding: 9px 11px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  text-align: left;
  overflow: hidden;   /* so the Elite edge follows the cell radius */
}
/* the panel must escape that clip, so it is lifted out of the cell's box */
.won-cell.is-on:hover, .won-cell.is-on:focus-within { overflow: visible; }
.won-cell.is-blank { visibility: hidden; }
.won-cell-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.won-cell-badges { display: inline-flex; align-items: center; gap: 5px; }
/* the Elite tier, as a tab on the same purple square */
.won-cell-tier {
  position: absolute;
  right: 0; bottom: 0;
  padding: 3px 11px 3px 9px;
  border-radius: 8px 0 20px 0;
  background: var(--won-foil);
  color: var(--won-foil-ink);
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.won-num {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--svc-muted);
}

/* today is a ring, never a fill: a fill would compete with the lane colours,
   which are the only thing on the grid carrying meaning */
.won-cell.is-today { border-color: rgba(36, 36, 36, .45); border-width: 2px; padding: 8px 10px; }
.won-cell.is-today .won-num { color: var(--svc-ink); }

/* ---------- a day with something on it ----------
   The fill is the lane. --lane and --lane-press are set once per lane class and
   every rule below reads them, so adding a fifth kind of event later is one
   more class and not a new copy of this block. */
a.won-cell {
  --lane: var(--lane-install);
  --lane-press: var(--lane-install-press);
  background: var(--lane);
  border-color: var(--lane);
  color: var(--svc-on-purple);
  text-decoration: none;
  cursor: pointer;
  transition: background .3s var(--svc-ease-sym), transform .2s var(--svc-ease);
}
a.won-cell.lane-community { --lane: var(--lane-community); --lane-press: var(--lane-community-press); }
a.won-cell.lane-online { --lane: var(--lane-online); --lane-press: var(--lane-online-press); }
/* ELITE IS AN INSTALL DAY WITH A TIER ON IT, not a different kind of event, so
   it keeps the Install Day's purple and wears the foil as an edge. Filling the
   whole cell with the gradient read as a brown block at 171x107: that ramp was
   drawn for a 10px badge and it does not survive being scaled up. */
a.won-cell.lane-elite { --lane: var(--lane-install); --lane-press: var(--lane-install-press); }
a.won-cell.lane-elite::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  border-radius: 20px 20px 0 0;
  background: var(--won-foil);
}
a.won-cell .won-num { color: var(--svc-invert); font-size: 20px; }
a.won-cell:hover { background: var(--lane-press); }

a.won-cell:active { transform: scale(.98); }

/* --- NOT LOCKED IN. The same hatch the card's banner wears, so one visual
       language covers both halves of the page: a filled cell is a day you can
       turn up to, a hatched one is a date we are holding. The lane colour stays
       on the border and the text, so a reader can still tell WHAT is not
       locked, and a dashed hairline on its own was not carrying it. --- */
a.won-cell.is-pending {
  background:
    repeating-linear-gradient(-45deg, #EFECE4 0 7px, #E7E3D8 7px 14px);
  border: 1px solid var(--lane);
  color: var(--lane);
}
a.won-cell.is-pending .won-num,
a.won-cell.is-pending .won-cell-time { color: var(--lane); }
a.won-cell.is-pending:hover {
  background: repeating-linear-gradient(-45deg, #E7E3D8 0 7px, #DFDACD 7px 14px);
}

/* --- past: nothing left to decide, so no lane either --- */
a.won-cell.is-past,
a.won-cell.lane-past {
  background: var(--won-past-fill);
  border-color: var(--won-hair);
  color: var(--svc-muted);
}
a.won-cell.is-past .won-num { color: var(--svc-ink); font-size: 15px; }
a.won-cell.is-past:hover { background: var(--won-past-fill-hi); }
/* the mark sits back on a day that has run, the same way it does on the card */
a.won-cell.is-past .won-mark { opacity: .5; filter: saturate(.3); }
@media (hover: hover) {
  a.won-cell.is-past:hover .won-mark { opacity: 1; filter: none; }
}

.won-cell-city {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  overflow: hidden;
}
.won-cell-time {
  font-family: 'Manrope', sans-serif;
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 250, .78);
  margin-top: auto;
  /* the Elite tab occupies the bottom right corner of the same cell */
  padding-right: 52px;
}
a.won-cell.is-past .won-cell-time { padding-right: 0; }
a.won-cell.is-pending:not(.lane-elite) .won-cell-time { padding-right: 0; }
a.won-cell.is-past .won-cell-time { color: var(--won-faint); }
.won-cell-more {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.02em;
  opacity: .8;
  flex: none;
}
/* a day carrying two different kinds of thing wears both */
.won-cell-stripe {
  position: absolute;
  left: 11px; right: 11px; bottom: 5px;
  height: 3px;
  border-radius: 3px;
  background: var(--lane-install);
}
.won-cell-stripe.lane-community { background: var(--lane-community); }
.won-cell-stripe.lane-online { background: var(--lane-online); }
.won-cell-stripe.lane-elite { background: var(--won-foil); }

/* ==========================================================================
   THE PANEL — the cell, opened
   ==========================================================================
   The first version floated a pale card over the grid and it was unreadable.
   Sibling cells are positioned and come later in source order, so they painted
   straight over a panel whose z-index sat inside a cell that had none. It also
   grew to 442px on a day holding two events and covered four rows of the month.

   THE HOVERED CELL IS RAISED. That single line is what the old one was missing,
   and no amount of z-index on the panel could have fixed it from inside.

   Ivory on ink, anchored over the cell it belongs to and a little larger, so it
   reads as that square opening rather than a tooltip arriving. Compact rows and
   a scroll cap, so two events on a day is a panel and not a column. */

.won-cell.is-on:hover,
.won-cell.is-on:focus-within { z-index: 20; }

.won-pop {
  position: absolute;
  /* ABOVE EVERYTHING IN THE CELL. The panel is opaque, but the cell's own time
     line carries z-index 1 to clear the Elite tab, so with no z-index here that
     text painted straight through it and the panel read as garbled. */
  z-index: 30;
  left: -10px;
  top: -10px;
  width: max(calc(100% + 20px), 252px);
  max-height: 340px;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--svc-dark);
  color: var(--svc-invert);
  border-radius: 20px;
  padding: 14px 16px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.96);
  transform-origin: 18% 22%;
  /* the site's structural pair: .4s on the overshoot curve for the move, .3s
     standard for the fade, and the visibility delay so it is inert when shut */
  transition: opacity .3s var(--svc-ease),
              transform .4s var(--svc-ease-over),
              visibility 0s linear .3s;
}
@media (hover: hover) {
  .won-cell:hover .won-pop {
    opacity: 1; visibility: visible; transform: scale(1);
    transition: opacity .3s var(--svc-ease),
                transform .4s var(--svc-ease-over),
                visibility 0s;
  }
}
.won-cell:focus-visible .won-pop,
.won-cell:focus-within .won-pop {
  opacity: 1; visibility: visible; transform: scale(1);
  transition: opacity .3s var(--svc-ease),
              transform .4s var(--svc-ease-over),
              visibility 0s;
}
/* the last two columns would hang off the right edge of the card */
.won-grid > *:nth-child(7n) .won-pop,
.won-grid > *:nth-child(7n - 1) .won-pop { left: auto; right: -10px; transform-origin: 82% 22%; }
/* and the bottom row would hang off the foot of it, over the legend */
.won-grid > *:nth-last-child(-n + 7) .won-pop {
  top: auto; bottom: -10px; transform-origin: 18% 78%;
}
.won-grid > *:nth-last-child(-n + 7):nth-child(7n) .won-pop,
.won-grid > *:nth-last-child(-n + 7):nth-child(7n - 1) .won-pop { transform-origin: 82% 78%; }

.won-pop-row + .won-pop-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 250, .16);
}
.won-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.won-pop-logo { display: block; width: 22px; height: 22px; border-radius: 6px; flex: none; }
.won-pop-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 40px;
  background: var(--lane-install);
  color: #FFFFFA;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.won-pop-row.lane-community .won-pop-tag { background: var(--lane-community); }
.won-pop-row.lane-online .won-pop-tag { background: var(--lane-online); }
.won-pop-row.lane-elite .won-pop-tag { background: var(--won-foil); color: var(--won-foil-ink); }
.won-pop-row.lane-past .won-pop-tag { background: rgba(255, 255, 250, .16); color: rgba(255, 255, 250, .8); }

.won-pop-title {
  margin: 0;
  font-family: 'Manrope Variable', 'Manrope', sans-serif;
  font-variation-settings: 'wght' 585;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: #FFFFFA;
}
.won-pop-when {
  margin: 5px 0 0;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #FFFFFA;
}
.won-pop-where {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: rgba(255, 255, 250, .72);
}
.won-pop-cta {
  margin: 9px 0 0;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #FFFFFA;
  text-decoration-line: underline;
  text-decoration-color: rgba(255, 255, 250, .5);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------- the mark ----------
   One badge, three sizes, every event. A white disc so a single asset reads on
   a purple cell, a red one, a pale one and an ink panel without a second copy
   of the artwork anywhere. */
.won-mark {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 100%;
  background: #FFFFFA;
  flex: none;
  overflow: hidden;
}
.won-mark img { width: 68%; height: 68%; object-fit: contain; display: block; }
/* The Skool mark is drawn to fill its own square, so it takes the WHOLE disc
   rather than sitting inside it. The Meta infinity is the opposite problem: it
   is a WIDE mark, roughly 3:2, so scaling it like a square glyph shrank it to a
   smudge. It gets the width of the disc and keeps its own height. */
.won-mark img[src*="skool"] { width: 100%; height: 100%; }
.won-mark img[src*="meta"] { width: 82%; height: auto; }
.won-mark.is-pop { width: 26px; height: 26px; }
.won-mark.is-card { width: 38px; height: 38px; border: 1px solid var(--won-hair); }
.won-mark.is-card img { width: 60%; height: 60%; }
.won-mark.is-card img[src*="skool"] { width: 100%; height: 100%; }
.won-mark.is-card img[src*="meta"] { width: 76%; height: auto; }
/* the mark that carries its own white ground does not need a second one */
.won-mark.is-card:has(img[src*="skool"]) { border-color: transparent; }

.won-quiet {
  margin: 25px 0 0;
  font-size: 15px;
  letter-spacing: -0.03em;
  color: var(--svc-muted);
}

.won-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid var(--won-hair);
}
.won-key {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--svc-muted);
}
.won-swatch { width: 15px; height: 15px; border-radius: 100%; background: var(--lane-install); flex: none; }
.won-swatch.lane-community { background: var(--lane-community); }
.won-swatch.lane-online { background: var(--lane-online); }
.won-swatch.lane-elite { background: var(--won-foil); }
.won-swatch.is-pending {
  background: repeating-linear-gradient(-45deg, #EFECE4 0 4px, #E7E3D8 4px 8px);
  border: 1px solid var(--svc-muted);
}
.won-swatch.is-past { background: var(--won-past-fill); border: 1px solid var(--won-hair); }
.won-swatch.is-today { background: transparent; border: 2px solid rgba(36, 36, 36, .45); }

/* ==========================================================================
   THE RUN
   ========================================================================== */

/* .svc-section ships 120px of top padding and the stack added 60 more, so 180px
   of nothing sat between the calendar and the first date. They are two halves
   of one board, not two subjects. */
#events.svc-section { padding-top: 60px; }
.won-stack {
  list-style: none;
  margin: 0;
  padding: 0 0 12vh;
  perspective: 1400px;   /* without this the roll is flat and the fold dies */
  --won-top: 120px;      /* where the first card parks */
  --won-step: 14px;      /* the sliver of each card left showing in the deck */
}
.won-stack > li { list-style: none; }

/* ONLY THE CARDS PIN. A divider that sticks parks itself at the top of the
   viewport with a live card still pinned behind it, and since the divider is a
   label on a rule rather than a filled box, the card reads straight through it.
   It also makes no sense: a divider marks where one run ends, so it should
   travel with the page and let the deck above it slide underneath. */
.won-tk {
  position: sticky;
  top: calc(var(--won-top) + var(--won-i, 0) * var(--won-step));
  --fold: 0;
  box-sizing: border-box;
  transform-origin: 50% 0%;
  transform:
    translateY(calc(-14px * var(--fold)))
    scale(calc(1 - .07 * var(--fold)))
    rotateX(calc(-11deg * var(--fold)));
  transition: transform .12s linear;
  will-change: transform;
}
/* the fade rides the CONTENT, never the card, and faster than the fold */
.won-tk > * {
  opacity: max(0, calc(1 - 1.7 * var(--fold)));
  transition: opacity .12s linear;
}

.won-tk {
  position: sticky;
  margin-bottom: 14px;
  border-radius: 30px;
  background: var(--svc-surface);
  border: 1px solid var(--won-hair);
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 30px;
  padding: 26px 30px;
  scroll-margin-top: 120px;
  overflow: hidden;
  transition: transform .12s linear, border-color .3s var(--svc-ease-sym);
}

/* --- the date block --- */
.won-when { text-align: left; }
.won-day {
  display: block;
  font-family: 'Manrope Variable', 'Manrope', sans-serif;
  font-variation-settings: 'wght' 585;
  font-weight: 400;
  font-size: 45px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--svc-ink);
}
.won-day-tbc {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--svc-purple);
}
.won-mon {
  display: block;
  margin-top: 5px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--svc-muted);
  text-transform: uppercase;
}

.won-body { min-width: 0; }
.won-body-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.won-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 40px;
  border: 1px solid var(--won-hair);
  background: transparent;
  color: var(--svc-muted);
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.won-title {
  margin: 0;
  font-family: 'Manrope Variable', 'Manrope', sans-serif;
  font-variation-settings: 'wght' 585;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--svc-ink);
}
.won-where {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--svc-muted);
}
.won-actions { display: flex; align-items: center; gap: 20px; }

.won-see {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--svc-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--svc-purple);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* a pending CTA must not look like a live one */
.svc-btn--ghost {
  background: transparent;
  border: 1px dashed var(--svc-purple);
  color: var(--svc-purple);
}
.svc-btn--ghost .svc-dot { background: var(--svc-purple); }
.svc-btn--ghost:hover { background: #F3EFFF; }

/* ==========================================================================
   LOCKED IN, OR NOT
   ==========================================================================
   The single most important thing this page says is which of these you can
   actually turn up to. A hairline rail and a dashed border were not carrying
   it: every card read the same at a glance and a placeholder passed for a room
   with seats in it.

   A LOCKED DAY WEARS ITS COLOUR. The date block becomes a filled tile in the
   lane colour, so the left edge of the run is a column of solid colour and the
   eye finds the real days without reading a word.

   AN UNCONFIRMED DAY WEARS A BANNER, in words, across the top of the card. Not
   a border treatment, not a shade of grey. A sentence.
   ========================================================================== */

.won-tk.is-locked .won-when {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--lane);
  color: var(--svc-invert);
  border-radius: 20px;
  padding: 14px 10px;
  text-align: center;
}
.won-tk.is-locked.lane-elite .won-when { background: var(--won-foil); }
.won-tk.is-locked .won-when .won-day { color: #FFFFFA; }
.won-tk.is-locked .won-when .won-mon { color: rgba(255, 255, 250, .82); }
.won-tk.is-locked .won-when .won-day-tbc { color: #FFFFFA; }
.won-tk.is-locked { border-color: var(--won-hair); }

/* the slim weekly row keeps the tile, smaller, so the column stays unbroken */
.won-tk.is-slim.is-locked .won-when { padding: 9px 8px; border-radius: 14px; }

/* ---------- the banner ---------- */
.won-tk.is-unconfirmed {
  padding-top: 44px;
  border: 1px solid var(--won-hair);
  background: var(--won-seam);
}
.won-flag {
  position: absolute;
  left: 0; right: 0; top: 0;
  padding: 8px 30px;
  background: repeating-linear-gradient(
    -45deg,
    #EFECE4 0 10px,
    #E7E3D8 10px 20px
  );
  border-bottom: 1px solid var(--won-hair);
  border-radius: 30px 30px 0 0;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4F4B43;
}
.won-tk.is-slim.is-unconfirmed { padding-top: 38px; }
.won-tk.is-slim .won-flag { border-radius: 20px 20px 0 0; padding: 7px 30px; }
/* the fold fades card content, and the banner is content: it must go with it */
.won-tk > .won-flag { opacity: max(0, calc(1 - 1.7 * var(--fold))); }

/* an unconfirmed card drops the dashes: the banner is the signal now, and two
   signals for one state is just noise */
.won-tk.is-unconfirmed,
.won-tk.is-pending { border-style: solid; }
.won-tk.is-unconfirmed .won-when { background: transparent; }

/* --- THE LANE ON A CARD ---
   The rail down the left edge is the same information the calendar cell carries
   as a fill. Same four colours, so a reader who has learned the calendar has
   already learned the run. */
.won-tk { --lane: var(--lane-install); }
.won-tk.lane-community { --lane: var(--lane-community); }
.won-tk.lane-online { --lane: var(--lane-online); }
.won-tk::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--lane);
}
/* lane-elite is excluded: it gets the foil tag below, and this rule was landing
   after it and painting purple text onto a gold gradient */
.won-tk:not(.is-past):not(.lane-install):not(.lane-elite) .won-tag { border-color: var(--lane); color: var(--lane); }

/* --- ELITE: the foil rail and the foil tag --- */
.won-tk.is-elite { border-color: rgba(140, 107, 63, .45); }
.won-tk.is-elite::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--won-foil);
}
.won-tk.is-elite .won-tag,
.won-tk.lane-elite .won-tag {
  background: var(--won-foil);
  border-color: transparent;
  color: var(--won-foil-ink);
}
/* a day that has run keeps the tier on the record and takes the shine off it */
.won-tk.is-past.is-elite .won-tag,
.won-tk.is-past.lane-elite .won-tag {
  background: transparent;
  border-color: var(--won-hair);
  color: var(--won-faint);
}

/* --- PENDING ---
   No dashes. The banner says it in words now, and two signals for one state is
   noise. This rule also used to win the cascade over the banner's own border,
   so an unconfirmed card wore both. */
.won-tk.is-pending { background: var(--svc-surface); }
/* NOT on an Elite card. This rule used to land after the foil rule and paint
   purple text straight onto the bronze gradient, which is unreadable, and every
   draft Elite day is both pending and Elite. */
.won-tk.is-pending:not(.lane-elite):not(.is-elite) .won-tag {
  border-color: var(--svc-purple);
  color: var(--svc-purple);
}

/* --- PAST: THE SAME CARD, FINISHED ---
   An earlier pass stripped past days to bare ledger rows, which read as a
   different page rather than the same list further down. Same card, same shape,
   same grid. What changes is that the colour drains out of it: the ground drops
   to the seam, the lane rail goes grey, the ink goes muted and the mark sits
   back. It should look like the thing you were reading a moment ago, after it
   has happened. */
.won-tk.is-past {
  background: var(--won-seam);
  border-color: var(--won-hair);
}
.won-tk.is-past::before { background: #D8D3C7; }
.won-tk.is-past .won-day { color: var(--svc-muted); }
.won-tk.is-past .won-mon { color: var(--won-faint); }
.won-tk.is-past .won-title { color: var(--svc-muted); }
.won-tk.is-past .won-where { color: var(--won-faint); }
.won-tk.is-past .won-tag { border-color: var(--won-hair); color: var(--won-faint); }
.won-tk.is-past .won-mark { opacity: .55; filter: saturate(.35); }
@media (hover: hover) {
  .won-tk.is-past:hover { background: var(--svc-surface); }
  .won-tk.is-past:hover .won-title { color: var(--svc-ink); }
  .won-tk.is-past:hover .won-mark { opacity: 1; filter: none; }
}

/* --- A RECURRING OCCURRENCE IS A SLIM ROW ---
   The community call runs every Monday, so showing it once buried it and showing
   it as eighteen full cards would swamp a list of nineteen real events. It gets
   a compact row instead: mark, name, time, date, and nothing else. It threads
   through the run the way it threads through the month, without competing with
   a day somebody can book. */
.won-tk.is-slim {
  grid-template-columns: 104px minmax(0, 1fr) auto;
  padding: 14px 30px;
  border-radius: 20px;
  margin-bottom: 10px;
  background: var(--svc-surface-2);
}
.won-tk.is-slim .won-day { font-size: 25px; }
.won-tk.is-slim .won-mon { margin-top: 2px; font-size: 11px; }
.won-tk.is-slim .won-body-head { margin-bottom: 0; }
.won-tk.is-slim .won-title { font-size: 17px; }
.won-tk.is-slim .won-where { margin-top: 2px; font-size: 13px; }
.won-tk.is-slim .won-tag { display: none; }
.won-tk.is-slim .won-see { font-size: 13px; }

/* ---------- the hover dropdown ----------
   The row above is what you compare days on. This is what you read once one of
   them is the day you want, so it stays out of the way until the card is
   hovered or something inside it takes focus. grid-template-rows 0fr to 1fr is
   the site's own accordion technique, so the height is genuinely automatic and
   nothing is measured in JavaScript. A past day never gets one. */
.won-drop {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--svc-ease-over);
}
.won-drop-in { overflow: hidden; min-height: 0; }
.won-tk:focus-within .won-drop,
.won-tk.is-open .won-drop { grid-template-rows: 1fr; }
@media (hover: hover) {
  .won-tk:hover .won-drop { grid-template-rows: 1fr; }
  .won-tk:hover { border-color: #C9C4B8; }
  .won-tk.is-elite:hover { border-color: var(--won-foil-line); }
  .won-tk.is-pending:hover { border-color: var(--svc-purple); }
  .won-tk.is-past:hover .won-title { color: var(--svc-ink); }
}

.won-drop-in > * { padding-top: 0; }
.won-drop-in .won-fact:first-child { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--won-hair); }

.won-fact {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 20px;
  padding: 7px 0;
}
.won-fact-k {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--won-faint);
}
.won-fact-v {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--svc-ink);
}
.won-drop-links { display: flex; gap: 25px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- the dividers ----------
   A rule with a label on it. It separates, it does not offer anything, which
   is why it is not a card and not a button. The one this replaced read
   "Been and gone. 10 days already in the room." and sat in the middle of a
   list of dates looking like something you were meant to click. */
.won-divider {
  position: relative;
  z-index: 3;
  margin: 60px 0 20px;
  padding: 26px 0 14px;
  border-bottom: 1px solid var(--svc-ink);
  background: var(--svc-canvas);
}
/* the mark on a card in the Dropping soon band, so the band reads as one thing
   even where a card scrolls past its own divider */
/* Above the deck, the same as a divider. The cards pin, so a plain block after
   them is painted over by whichever card is currently stuck to the top and the
   strip reads as an empty band. */
.won-tail { display: block; position: relative; z-index: 4; margin-top: 50px; }
.won-tail-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  flex-wrap: wrap;
  padding: 30px 40px;
  border-radius: 30px;
  background: var(--svc-surface-2);
  border: 1px solid var(--won-hair);
}
.won-tail-line {
  margin: 0;
  font-family: 'Manrope Variable', 'Manrope', sans-serif;
  font-variation-settings: 'wght' 585;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--svc-ink);
}
.won-divider-head { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.won-divider h3 {
  margin: 0;
  font-family: 'Manrope Variable', 'Manrope', sans-serif;
  font-variation-settings: 'wght' 585;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--svc-ink);
}
.won-divider p {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--svc-muted);
}

.won-none {
  margin: 0;
  padding: 30px;
  border: 1px solid var(--won-hair);
  border-radius: 30px;
  background: var(--svc-surface);
  font-size: 17px;
  letter-spacing: -0.03em;
  color: var(--svc-muted);
}

/* ==========================================================================
   RESPONSIVE. 810 and 1200 are Framer's own, and the site's.
   ========================================================================== */

@media (max-width: 1199px) {
  .won-month { font-size: 25px; min-width: 200px; }
  .won-cell { padding: 8px 10px; aspect-ratio: 1.4 / 1; }
  .won-day { font-size: 35px; }
  .won-tk { grid-template-columns: 84px minmax(0, 1fr) auto; column-gap: 20px; }
  .won-stack { --won-top: 90px; }
  .won-next-in { padding: 18px 24px; gap: 20px; }
}

@media (max-width: 809px) {
  .won-hero-line { font-size: 17px; margin-top: 15px; }
  .won-next { margin-top: 30px; }
  .won-next-in { border-radius: 20px; padding: 18px 20px; gap: 14px; }
  .won-next-title { font-size: 20px; }
  .won-next-meta { font-size: 14px; }
  .won-cal-card { padding: 20px 16px 18px; border-radius: 20px; }
  .won-bar { gap: 10px; margin-bottom: 20px; }
  .won-month { font-size: 20px; min-width: 0; }
  .won-arrow { width: 40px; height: 40px; }
  .won-dows, .won-grid { gap: 5px; }
  .won-dow { padding-left: 0; text-align: center; }
  .won-cell {
    padding: 5px; border-radius: 12px; aspect-ratio: 1 / 1;
    align-items: center; justify-content: center;
  }
  .won-num { font-size: 13px; }
  a.won-cell .won-num { font-size: 15px; }
  /* NOTHING BUT THE NUMBER FITS A PHONE CELL. A 44px square cannot carry a
     city, a 22px mark, an hour and an Elite tab: they clipped into confetti.
     The cell keeps its number and its lane colour, the legend decodes the
     colour, and the run below carries everything else. The hover card goes
     with it: there is no hover on a phone, and a tap is already the link. */
  .won-cell-city, .won-cell-more, .won-pop,
  .won-cell-time, .won-cell-tier, .won-cell .won-mark { display: none; }
  .won-cell-head { justify-content: center; }
  a.won-cell.lane-elite::before { height: 4px; border-radius: 12px 12px 0 0; }
  .won-cell-stripe { left: 7px; right: 7px; bottom: 4px; }
  #events.svc-section { padding-top: 40px; }
  /* The fold runs on phones too. What made it unusable there was every panel
     sitting open underneath it; with panels closed until tapped the deck
     tucks cleanly. */
  .won-stack { --won-top: 84px; --won-step: 8px; }
  .won-tk {
    grid-template-columns: 62px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 14px;
    padding: 20px 22px;
    border-radius: 20px;
    scroll-margin-top: 90px;
  }
  .won-actions { grid-column: 1 / -1; }
  .won-day { font-size: 30px; }
  .won-title { font-size: 20px; }
  .won-where { font-size: 14px; }
  .won-tk.is-past { padding: 16px 22px; }
  .won-tk.is-past .won-day { font-size: 25px; }
  .won-fact { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 0; }
  .won-divider { margin: 40px 0 16px; padding-top: 16px; }
  .won-divider h3 { font-size: 25px; }
  .won-tk.is-unconfirmed { padding-top: 40px; }
  .won-flag { padding: 7px 22px; font-size: 10px; border-radius: 20px 20px 0 0; }
  .won-tk.is-locked .won-when { padding: 10px 6px; border-radius: 14px; }
  .won-mark.is-card { width: 32px; height: 32px; }
  .won-tail { margin-top: 34px; }
  .won-tail-in { padding: 22px; border-radius: 20px; gap: 18px; }
  .won-tail-line { font-size: 20px; }
  /* no hover on a phone: the panel opens on a tap (.is-open, wired in the JS)
     instead of sitting open on every card and doubling the page */
}

/* ==========================================================================
   REDUCED MOTION. Content arrives, nothing moves.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .won-tk {
    position: relative; top: auto; transform: none; transition: none;
  }
  .won-tk > * { opacity: 1; transition: none; }
  .won-arrow, .won-mpill, a.won-cell { transition: none; }
  /* the site's convention on panels is .01s rather than none, so the state
     still lands but nothing travels (selr-nav.css:187) */
  .won-pop { transition: opacity .01s !important; transform: translate(-50%, 0) !important; }
  .won-drop { transition: none; }
}