/* Rebels for a Cause: a black-tie charity fight night.
   Its own look, outside the City theme, taken from the client's own Rebels brand (the boxer
   application and its lockup): one grotesque family (Archivo, heavy capitals for the shout,
   regular for reading, narrower for labels) and a red italic serif for the "for a" flourish
   (Instrument Serif italic, two to four words at a time). Warm ink; Rebels red for action and key
   accents; ivory and cream for prestige and type; warm greys for the quiet parts. No metallic
   accent (Liezyl, Oct 29). Self-contained: it loads no City stylesheet, and every rule sits under .rf-root so
   the Webflow base styles cannot reach in. Everything is visible without JavaScript.
   1rem = 16px. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6ae3737827275ef96fc1fe0b_archivo-latin.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6ae37379f39b155e8e10d983_instrument-serif-italic-latin.woff2) format("woff2"); }

:root {
  --k0: #141210; --k1: #1b1815; --k2: #0e0c0b;
  --iv: #f1ebdf; --iv2: #c3b9a9; --iv3: #978d7e;
  --red: #c62a27; --red-hi: #e04a42; --red-deep: #6e1814; --red-ink: #a3211e;
  --paper: #efe8da; --paper-ink: #1b1713; --paper-mute: #5b4f42; --paper-line: rgba(27, 23, 19, .32);
  --line: rgba(241, 235, 223, .14); --line-hi: rgba(241, 235, 223, .3);
  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --accent: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --gut: clamp(1.25rem, 4.4vw, 4.5rem);
  --sec: clamp(4rem, 7.5vw, 7.5rem);
  --stack: clamp(2.25rem, 4vw, 3.5rem);
  --bar: 4.5rem;
}
@media (max-width: 1099px) { :root { --bar: 4rem; } }
/* Anchor jumps are instant: the nav and every button land at once. */
html {
  background: var(--k0); scroll-behavior: auto; scroll-padding-top: var(--bar);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
body.rf-gala, body:has(.rf-root) { margin: 0; background: var(--k0); color: var(--iv); }
.rf-root {
  position: relative; background: var(--k0); color: var(--iv); font-family: var(--text); font-size: 1.0625rem;
  line-height: 1.6; font-weight: 420; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
.rf-root *, .rf-root *::before, .rf-root *::after { box-sizing: border-box; }
.rf-root :where(h1, h2, h3, p, ul, ol, li, figure, dl, dt, dd, hr, blockquote) { margin: 0; padding: 0; }
.rf-root :where(ul, ol) { list-style: none; }
.rf-root :where(img, svg, canvas) { display: block; max-width: 100%; }
.rf-root :where(img) { height: auto; }
.rf-root :where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.rf-root :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.rf-root :where(b, strong) { font-weight: 700; }
.rf-root ::selection { background: var(--red); color: var(--iv); }
.rf-root :focus-visible { outline: 2px solid var(--iv); outline-offset: 3px; }
.rf-root :is(.rf-card, .rf-pass, .rf-stub) :focus-visible { outline-color: var(--red-ink); }
.rf-root [hidden] { display: none !important; }
.rf-nw { white-space: nowrap; }
.rf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rf-wrap { width: 100%; max-width: 88rem; margin: 0 auto; padding: 0 max(var(--gut), env(safe-area-inset-right, 0px)) 0 max(var(--gut), env(safe-area-inset-left, 0px)); }
/* Phones: taps fire at once, no grey flash, and a long press never selects a control's label. */
.rf-root :where(a, button, summary) { touch-action: manipulation; }
.rf-root :where(.rf-btn, button, summary) { -webkit-user-select: none; user-select: none; }

/* The type system. Display: heavy grotesque capitals, tight. Accent: the red italic "for a". */
.rf-root .rf-label {
  font-family: var(--display); font-stretch: 84%; font-weight: 700; font-size: .84rem; line-height: 1.2; letter-spacing: .2em;
  text-transform: uppercase; color: var(--iv2);
}
.rf-root .rf-h2 {
  margin-top: .9rem; font-family: var(--display); font-weight: 820; font-size: clamp(2.5rem, 5.6vw, 5.4rem); line-height: .94;
  letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; color: var(--iv);
}
.rf-root .rf-h2 i, .rf-root .rf-close__title i {
  font-family: var(--accent); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--red-hi);
}
.rf-root .rf-h2 i { font-size: 1.06em; line-height: .8; }
.rf-root .rf-lede { font-size: clamp(1.15rem, .5vw + 1rem, 1.4rem); line-height: 1.5; color: var(--iv); text-wrap: pretty; }
.rf-root p { text-wrap: pretty; }
/* One photo grade, like the boxer application: nearly monochrome, no tint. */
.rf-root .rf-graded img, .rf-root img.rf-graded { filter: grayscale(.86) contrast(1.06) brightness(.92); }

/* Buttons: red is the action, outline is the second choice. Square corners. */
.rf-root .rf-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .85rem 1.6rem;
  font-family: var(--display); font-stretch: 90%; font-weight: 750; font-size: .98rem; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1; text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
}
.rf-root .rf-btn:active { transform: scale(.97); }
.rf-root .rf-btn--red { background: var(--red); color: var(--iv); }
.rf-root .rf-btn--ink { background: var(--k0); color: var(--iv); }
.rf-root .rf-btn--line { color: var(--iv); border-color: rgba(241, 235, 223, .5); background: rgba(20, 18, 16, .4); }
@media (hover: hover) and (pointer: fine) {
  .rf-root .rf-btn--red:hover { background: #d8382f; }
  .rf-root .rf-btn--ink:hover { background: #000; }
  .rf-root .rf-btn--line:hover { border-color: var(--iv); background: rgba(241, 235, 223, .1); }
}
.rf-acts { display: flex; flex-wrap: wrap; gap: .75rem; }
.rf-acts--center { justify-content: center; }
@media (max-width: 599px) {
  /* Phones: a lone call to action or a row of them runs full width, centred, one width for all. */
  .rf-root .rf-acts--center, .rf-root .rf-reply .rf-btn, .rf-root .rf-pass__tear .rf-btn { width: 100%; }
  .rf-acts--center { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 26rem; margin-left: auto; margin-right: auto; gap: .6rem; }
}

.rf-skip { position: absolute; left: 1rem; top: -4rem; z-index: 60; padding: .75rem 1rem; background: var(--iv); color: var(--k0); font-family: var(--display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.rf-skip:focus { top: 1rem; }

/* ---------------------------------------------------------------- the bar */
.rf-bar { position: fixed; inset: 0 0 auto; z-index: 40; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid transparent; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.rf-bar.is-solid { background: rgba(20, 18, 16, .92); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rf-bar__in { display: flex; align-items: center; gap: 1.6rem; height: 4.5rem; padding: 0 var(--gut); max-width: 100rem; margin: 0 auto; }
.rf-root .rf-bar__home { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; }
.rf-bar__home img { width: 2.2rem; height: 2.2rem; }
.rf-root .rf-bar__mark { display: flex; align-items: center; margin-right: auto; padding-left: 1.1rem; border-left: 1px solid var(--line); }
.rf-bar__mark img { width: 8.4rem; height: auto; }
.rf-bar__nav ul { display: flex; gap: 1.6rem; }
.rf-root .rf-bar__nav a {
  font-family: var(--display); font-stretch: 88%; font-weight: 650; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--iv2); transition: color .15s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .rf-root .rf-bar__nav a:hover { color: var(--iv); } }
.rf-root .rf-bar__cta { min-height: 2.75rem; padding: .6rem 1.2rem; font-size: .9rem; }
.rf-bar__menu { display: none; width: 2.75rem; height: 2.75rem; position: relative; flex: 0 0 auto; }
.rf-bar__menu i, .rf-bar__menu i::before, .rf-bar__menu i::after { position: absolute; left: .7rem; right: .7rem; height: 2px; background: var(--iv); content: ""; transition: transform .15s var(--ease); }
.rf-bar__menu i { top: 50%; }
.rf-bar__menu i::before { left: 0; right: 0; top: -.4rem; }
.rf-bar__menu i::after { left: 0; right: 0; top: .4rem; }
.rf-bar__menu[aria-expanded="true"] i { background: transparent; }
.rf-bar__menu[aria-expanded="true"] i::before { transform: translateY(.4rem) rotate(45deg); }
.rf-bar__menu[aria-expanded="true"] i::after { transform: translateY(-.4rem) rotate(-45deg); }

@media (max-width: 1099px) {
  .rf-bar__in { gap: .6rem; height: 4rem; }
  .rf-bar__menu { display: block; }
  .rf-bar__nav { position: fixed; inset: 4rem 0 auto; display: none; background: rgba(20, 18, 16, .98); border-bottom: 1px solid var(--line); padding: .5rem var(--gut) 1.25rem; }
  .rf-bar__nav.is-open { display: block; }
  .rf-bar__nav ul { flex-direction: column; gap: 0; }
  .rf-root .rf-bar__nav a { display: block; padding: .95rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--line); color: var(--iv); }
}
@media (max-width: 520px) {
  .rf-root .rf-bar__mark { padding-left: .6rem; }
  .rf-bar__mark img { width: 6.4rem; }
  .rf-bar__home img { width: 1.9rem; height: 1.9rem; }
  .rf-root .rf-bar__cta { padding: .55rem 1rem; font-size: .86rem; letter-spacing: .08em; }
}

/* --------------------------------------------------------------- the hero */
/* A centred fight poster. The 2026 ring, graded neutral and dark in the file, lit from above by one
   warm spot and closed in by a deep vignette; the gloves badge large in the middle; the ropes a thin
   frame along the bottom edge, never behind the words. On a wide screen the photo is half way between
   its own 1080 pixels and the screen width (Elliot, Oct 30), centred, and fades into the dark at its
   sides over a long eased ramp (the outer third each side, eased stops that start almost flat, so no
   vertical line shows where it ends).
   All of it fits one screen. */
.rf-hero {
  --ropes: clamp(3.75rem, 8svh, 5.5rem);
  position: relative; isolation: isolate; height: 100svh; min-height: 40rem; max-height: 72rem; overflow: hidden; background: var(--k0);
}
.rf-hero__far {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 0; width: calc((min(100%, 67.5rem) + 100%) / 2); transform: translateX(-50%);
  --rf-feather: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .012) 4.25%, rgba(0, 0, 0, .074) 8.5%, rgba(0, 0, 0, .2) 12.75%, rgba(0, 0, 0, .379) 17%,
    rgba(0, 0, 0, .587) 21.25%, rgba(0, 0, 0, .788) 25.5%, rgba(0, 0, 0, .94) 29.75%, #000 34%,
    #000 66%, rgba(0, 0, 0, .94) 70.25%, rgba(0, 0, 0, .788) 74.5%, rgba(0, 0, 0, .587) 78.75%, rgba(0, 0, 0, .379) 83%,
    rgba(0, 0, 0, .2) 87.25%, rgba(0, 0, 0, .074) 91.5%, rgba(0, 0, 0, .012) 95.75%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: var(--rf-feather); mask-image: var(--rf-feather);
}
.rf-root .rf-hero__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 76%; }
.rf-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 32rem 60% at 50% 54%, rgba(14, 12, 11, .8), rgba(14, 12, 11, .5) 58%, transparent 100%),
    linear-gradient(180deg, rgba(20, 18, 16, .92) 0, rgba(20, 18, 16, .45) 16%, transparent 34%, transparent 60%, rgba(20, 18, 16, .8) 86%, var(--k0) 100%),
    radial-gradient(ellipse 72% 72% at 50% 46%, transparent 0, rgba(20, 18, 16, .45) 50%, rgba(20, 18, 16, .96) 100%);
}
.rf-hero__cone {
  position: absolute; top: -6%; left: 50%; width: min(56rem, 120vw); height: 92%; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(241, 235, 223, .13), rgba(241, 235, 223, .04) 62%, transparent);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); opacity: .8;
}
.rf-hero__dust { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.rf-hero__copy {
  position: relative; z-index: 5; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 5.5rem var(--gut) calc(var(--ropes) + 1.75rem);
}
/* The title art is the gloves badge; the heading text is there for search and screen readers.
   Its size follows the screen height so the whole poster fits one screen. */
.rf-root .rf-hero__title { margin: clamp(.9rem, 2svh, 1.4rem) 0 clamp(1rem, 2.4svh, 1.6rem); }
.rf-root .rf-hero__badge { width: clamp(12rem, (100svh - 26rem) * .855, 22.5rem); height: auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55)); }
.rf-root .rf-hero__sub { font-family: var(--accent); font-style: italic; font-size: clamp(1.7rem, 1.2vw + 1.25rem, 2.35rem); line-height: 1.1; color: var(--red-hi); }
.rf-root .rf-hero__eyebrow, .rf-root .rf-hero__sub, .rf-root .rf-hero__when { text-shadow: 0 2px 14px rgba(8, 7, 6, .9), 0 1px 3px rgba(8, 7, 6, .8); }
.rf-root .rf-hero__when { margin: .7rem 0 clamp(1.4rem, 3svh, 2rem); font-family: var(--display); font-stretch: 86%; font-weight: 650; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--iv); }
.rf-hero__sep { color: var(--red-hi); }
.rf-hero__acts { justify-content: center; }
.rf-root .rf-hero .rf-btn--line { background: rgba(20, 18, 16, .62); }
.rf-hero__near { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: var(--ropes); pointer-events: none; }
.rf-ropes { display: block; width: 100%; height: 100%; overflow: visible; }
.rf-ropes path { vector-effect: non-scaling-stroke; }
.rf-ropes__shade { stroke: #0b0a09; stroke-width: 11; opacity: .7; }
.rf-ropes__body { stroke: #b9ae9c; stroke-width: 7; }
.rf-ropes__sheen { stroke: #fff3df; stroke-width: 1.5; opacity: .55; }

@media (max-width: 899px) {
  /* Phone: the same poster, art-directed tall. The photo keeps its ring and fighters in the lower
     half and fades out above, where the badge sits; the sign at its top stays out of view. */
  .rf-hero { --ropes: 3.25rem; height: auto; min-height: 100svh; max-height: none; display: flex; flex-direction: column; }
  .rf-hero__far {
    top: -10%; left: 0; width: 100%; transform: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 42%, #000 76%);
    mask-image: linear-gradient(180deg, transparent 0, transparent 42%, #000 76%);
  }
  .rf-root .rf-hero__photo { object-position: 50% 100%; }
  .rf-hero__scrim {
    background:
      linear-gradient(180deg, rgba(20, 18, 16, .9) 0, transparent 22%, transparent 58%, rgba(20, 18, 16, .55) 76%, rgba(20, 18, 16, .85) 90%, var(--k0) 100%),
      radial-gradient(ellipse 110% 60% at 50% 66%, rgba(20, 18, 16, .4) 0, rgba(20, 18, 16, .7) 100%);
  }
  .rf-hero__cone { width: 30rem; height: 70%; top: -4%; }
  .rf-hero__copy { flex: 1 0 auto; height: auto; padding: calc(4rem + 1rem) var(--gut) calc(var(--ropes) + 1.25rem); }
  .rf-root .rf-hero__title { margin: .8rem 0 .9rem; }
  .rf-root .rf-hero__badge { width: clamp(9rem, (100svh - 25rem) * .855, min(17rem, 62vw)); }
  .rf-root .rf-hero__sub { font-size: clamp(1.5rem, 5.6vw, 1.8rem); }
  .rf-root .rf-hero__when { margin: .5rem 0 1.25rem; font-size: .86rem; letter-spacing: .1em; line-height: 1.45; }
  .rf-hero__sep { display: none; }
  .rf-hero__where { display: block; }
  .rf-hero__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 26rem; gap: .6rem; }
  .rf-hero__acts .rf-btn:first-child { grid-column: 1 / -1; }
  .rf-ropes__shade { stroke-width: 8; }
  .rf-ropes__body { stroke-width: 5; }
  .rf-ropes__sheen { stroke-width: 1.2; }
}
@media (max-width: 899px) and (max-height: 620px) {
  /* Short phones (an iPhone SE with Safari's bars showing): tighter, so the poster still fits. */
  .rf-hero { --ropes: 2.75rem; }
  .rf-hero__copy { padding-top: 4.6rem; padding-bottom: calc(var(--ropes) + .75rem); }
  .rf-root .rf-hero__title { margin: .5rem 0 .6rem; }
  .rf-root .rf-hero__when { margin: .3rem 0 .9rem; }
  .rf-root .rf-hero__badge { width: clamp(8.5rem, (100svh - 23.5rem) * .855, 15rem); }
}
@media (max-width: 440px) {
  .rf-root .rf-hero .rf-btn { padding: .8rem .5rem; font-size: .84rem; letter-spacing: .05em; }
  .rf-root .rf-hero__when { font-size: .8rem; letter-spacing: .08em; }
}

/* ------------------------------------------------------------- the ticker */
/* The moving strip under the hero: a thin red rule, a near-black band and the night's facts in the
   heading face, narrow capitals, cream and white in turn, red diamonds between. Three equal sets; the
   track slides one set to the left and repeats, so the loop has no seam (transform only, on the
   compositor). The second and third sets are copies hidden from screen readers. Reduced motion: it
   stands still, one row from the first word. Its height never depends on the font, so nothing shifts. */
.rf-ticker {
  --tk-gap: clamp(1.1rem, 2vw, 2rem);
  position: relative; z-index: 1; overflow: hidden; contain: paint; background: var(--k2);
  border-top: 2px solid var(--red); border-bottom: 1px solid var(--line);
}
.rf-ticker__track { display: flex; width: max-content; }
.rf-ticker__set { display: flex; flex: none; align-items: center; padding: clamp(.85rem, 1.3vw, 1.2rem) 0; }
.rf-root .rf-ticker li {
  display: flex; flex: none; align-items: center; gap: var(--tk-gap); padding-right: var(--tk-gap);
  font-family: var(--display); font-stretch: 72%; font-weight: 800; font-size: clamp(1.3rem, .8rem + 1.5vw, 2.35rem);
  line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--iv);
}
.rf-root .rf-ticker li:nth-child(even) { color: #fff; }
.rf-ticker li::after { content: ""; flex: none; width: .42em; height: .42em; background: var(--red-hi); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .rf-ticker__track { animation: rf-ticker 64s linear infinite; will-change: transform; }
}
@keyframes rf-ticker { to { transform: translate3d(calc(-100% / 3), 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  /* Still: one row from the first word, softly faded where it meets the right edge. */
  .rf-ticker__track {
    padding-left: var(--gut);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100vw - 8rem), transparent 100vw); mask-image: linear-gradient(90deg, #000 calc(100vw - 8rem), transparent 100vw);
  }
}

/* --------------------------------------------------------- the invitation */
/* The cream card, tilted on the table, with the dark countdown card laid over its corner. */
.rf-invite {
  position: relative; padding: var(--sec) var(--gut) calc(var(--sec) + 3.5rem);
  background: radial-gradient(60% 55% at 50% 45%, #221e19 0%, var(--k0) 75%);
}
.rf-invite__table { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 22rem); justify-content: center; align-items: end; }
.rf-card {
  position: relative; z-index: 1; background: linear-gradient(160deg, #f6f0e4 0%, var(--paper) 55%, #e4dccb 100%);
  color: var(--paper-ink); padding: 1.1rem; transform: rotate(-1.4deg); transform-origin: 50% 100%;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .5) inset, 0 50px 90px -30px rgba(0, 0, 0, .85), 0 18px 30px -12px rgba(0, 0, 0, .6);
}
.rf-card__frame {
  border: 1px solid var(--paper-line); outline: 1px solid rgba(27, 23, 19, .2); outline-offset: -7px;
  padding: clamp(2.2rem, 4vw, 3.2rem) clamp(1.3rem, 3.4vw, 3rem); text-align: center;
}
.rf-root .rf-card .rf-label { color: var(--red-ink); }
.rf-root .rf-card__ask, .rf-root .rf-card__what, .rf-root .rf-card__hour { font-family: var(--accent); font-style: italic; font-size: 1.3rem; line-height: 1.3; color: #4a4036; }
.rf-root .rf-card__ask { margin-top: 1.2rem; }
.rf-root .rf-card__title { margin: 1rem auto .8rem; width: min(100%, 22rem); }
.rf-root .rf-card__title img { width: 100%; height: auto; }
.rf-root .rf-card__rule { width: 3.5rem; height: 1px; margin: 1.5rem auto; border: 0; background: var(--red); opacity: .8; }
.rf-root .rf-card__when { font-family: var(--accent); font-style: italic; font-size: 1.45rem; line-height: 1.3; }
.rf-root .rf-card__hour { margin-top: .3rem; }
.rf-root .rf-card__where { margin-top: 1.1rem; font-size: 1rem; line-height: 1.5; }
.rf-root .rf-card__dress { font-size: .95rem; letter-spacing: .4em; }
.rf-reply {
  position: relative; z-index: 2; margin: 0 0 -3.5rem -3.5rem; padding: 2.1rem 2rem 2.2rem; transform: rotate(2.4deg);
  background: linear-gradient(170deg, #211d19, #110f0d); border: 1px solid rgba(241, 235, 223, .2);
  box-shadow: 0 40px 70px -25px rgba(0, 0, 0, .9);
}
.rf-root .rf-reply__h { color: var(--iv2); }
.rf-count { display: flex; gap: clamp(1.1rem, 2vw, 1.6rem); margin: 1.1rem 0 1.3rem; }
.rf-count span { display: block; font-family: var(--display); font-weight: 860; font-size: clamp(2.9rem, 4vw, 3.7rem); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--iv); }
.rf-count small { display: block; margin-top: .45rem; font-family: var(--display); font-stretch: 84%; font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--iv2); }
.rf-count.is-done { display: none; }
.rf-root .rf-reply__seats { max-width: 30ch; margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.5; color: var(--iv2); }
@media (max-width: 899px) {
  /* Phones: the same two cards, tilted less and turned on their centres so no corner reaches the
     screen edge; the countdown card still lies over the invitation's lower corner, below its words. */
  .rf-invite { padding: var(--sec) var(--gut); }
  .rf-invite__table { grid-template-columns: minmax(0, 32rem); }
  .rf-card { transform: rotate(-.7deg); transform-origin: 50% 50%; padding: .8rem; }
  .rf-card__frame { padding: 2.1rem 1.1rem 2.4rem; }
  .rf-root .rf-card__ask, .rf-root .rf-card__what, .rf-root .rf-card__hour { font-size: 1.2rem; }
  .rf-root .rf-card__when { font-size: 1.3rem; }
  .rf-root .rf-card__rule { margin: 1.25rem auto; }
  .rf-reply { margin: -1.1rem 0 0 1.25rem; padding: 1.6rem 1.4rem 1.6rem; transform: rotate(1.1deg); transform-origin: 50% 50%; }
  .rf-count { gap: 1.1rem; margin: .9rem 0 1.1rem; }
  .rf-count span { font-size: clamp(2.5rem, 11vw, 3rem); }
  .rf-root .rf-reply__seats { margin-bottom: 1.2rem; }
}
.rf-root .rf-card p { text-wrap: balance; }

/* ------------------------------------------------------------- the story */
.rf-story { padding: var(--sec) 0; background: var(--k0); }
.rf-story__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.4vw, 2.5rem); row-gap: var(--stack); }
.rf-story__head { grid-column: 1 / 11; }
.rf-story__left { grid-column: 1 / 7; display: grid; gap: var(--stack); align-content: start; }
.rf-story__body { display: grid; gap: 1.2rem; align-content: start; }
.rf-root .rf-story__body p:not(.rf-lede) { color: var(--iv2); max-width: 54ch; }
/* The numbers: two big blocks, cut like a ticket (a dashed tear between them, notched at its ends). */
.rf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--k1); border: 1px solid rgba(241, 235, 223, .16); }
.rf-stat { position: relative; padding: clamp(1.5rem, 2.4vw, 2.1rem) clamp(1.2rem, 2.2vw, 1.9rem); }
.rf-stat + .rf-stat { border-left: 2px dashed rgba(241, 235, 223, .22); }
.rf-stat + .rf-stat::before, .rf-stat + .rf-stat::after { content: ""; position: absolute; left: calc(-.75rem - 1px); width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--k0); }
.rf-stat + .rf-stat::before { top: -.8rem; box-shadow: inset 0 -1px 0 rgba(241, 235, 223, .16); }
.rf-stat + .rf-stat::after { bottom: -.8rem; box-shadow: inset 0 1px 0 rgba(241, 235, 223, .16); }
.rf-root .rf-stat__big { font-family: var(--display); font-weight: 860; font-size: clamp(2.5rem, 3.6vw, 3.6rem); line-height: .92; letter-spacing: -.04em; color: var(--iv); font-variant-numeric: lining-nums; }
.rf-root .rf-stat__big i { display: block; margin-top: .3rem; font-family: var(--accent); font-style: italic; font-weight: 400; font-size: .56em; line-height: 1; letter-spacing: 0; color: var(--red-hi); }
.rf-root .rf-stat__from { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.4; color: var(--iv2); }
.rf-story__photo { grid-column: 8 / 13; align-self: start; }
.rf-story__photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
@media (max-width: 899px) {
  .rf-story__grid { grid-template-columns: minmax(0, 1fr); }
  .rf-story__head, .rf-story__left, .rf-story__photo { grid-column: 1; }
  .rf-story__photo { width: 78%; justify-self: end; }
}
@media (max-width: 400px) { .rf-root .rf-stat__big { font-size: 2.15rem; } .rf-stat { padding: 1.3rem 1rem; } }

/* --------------------------------------------------------------- the room */
.rf-room { position: relative; background: var(--k1); padding: var(--sec) 0; overflow: clip; }
.rf-room__head { margin-bottom: var(--stack); }
.rf-venue__stage {
  position: relative; width: 100%; height: min(90svh, 58vw); min-height: 32rem; overflow: hidden;
  background: #070605; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  contain: paint; isolation: isolate;
}
.rf-venue__stage::before, .rf-venue__stage::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.rf-venue__stage::before { top: 0; height: 16%; background: linear-gradient(180deg, var(--k1), transparent); }
.rf-venue__stage::after { bottom: 0; height: 22%; background: linear-gradient(0deg, var(--k1), transparent); }
.rf-venue__posters, .rf-venue__canvas { position: absolute; inset: 0; }
.rf-venue__posters img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s var(--ease); }
.rf-venue__posters img.is-on { opacity: 1; }
/* With the script, a poster shows only once it is fully decoded, so it never paints in strips. */
.rf-js .rf-venue__posters img.is-on:not(.is-ready) { opacity: 0; }
.rf-venue__canvas { z-index: 1; opacity: 0; transition: opacity .4s var(--ease); }
.rf-venue__canvas canvas { display: block; width: 100%; height: 100%; }
.rf-room.is-live .rf-venue__canvas { opacity: 1; }
.rf-room.is-live .rf-venue__posters { visibility: hidden; transition: visibility 0s .3s; }
.rf-root .rf-venue__go { position: absolute; z-index: 4; left: 50%; bottom: 3.6rem; transform: translateX(-50%); background: rgba(20, 18, 16, .78); }
.rf-root .rf-venue__go:active { transform: translateX(-50%) scale(.97); }
.rf-room.is-loading .rf-venue__go { opacity: .6; pointer-events: none; }
.rf-root .rf-venue__note { position: absolute; z-index: 4; right: var(--gut); bottom: 1rem; font-size: .8rem; color: var(--iv2); }
/* Previous and next: translucent arrows on both sides of the view, on the photos and in 3D alike. */
.rf-root .rf-venue__arrow {
  position: absolute; z-index: 4; top: 50%; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem;
  margin-top: -1.75rem; border-radius: 50%; color: var(--iv); background: rgba(20, 18, 16, .45); border: 1px solid rgba(241, 235, 223, .35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
}
.rf-venue__arrow svg { width: 1.5rem; height: 1.5rem; }
.rf-venue__arrow--prev { left: var(--gut); }
.rf-venue__arrow--next { right: var(--gut); }
.rf-root .rf-venue__arrow:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .rf-root .rf-venue__arrow:hover { background: rgba(198, 42, 39, .8); border-color: var(--red); } }
.rf-room__deck { position: relative; z-index: 4; margin-top: -1.5rem; }
.rf-venue__tabs { position: relative; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.rf-venue__tabs::-webkit-scrollbar { display: none; }
.rf-root .rf-venue__tabs button {
  position: relative; flex: 0 0 auto; min-height: 3.25rem; padding: .9rem 1.3rem; font-family: var(--display); font-stretch: 86%; font-weight: 700;
  font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--iv3); transition: color .15s var(--ease);
}
.rf-venue__tabs button::after { content: ""; position: absolute; left: 1.3rem; right: 1.3rem; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(0); transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .rf-root .rf-venue__tabs button:hover { color: var(--iv); } }
.rf-root .rf-venue__tabs button[aria-pressed="true"] { color: var(--iv); }
.rf-venue__tabs button[aria-pressed="true"]::after { transform: scaleX(1); }
@media (max-width: 899px) {
  .rf-venue__stage { height: 64svh; min-height: 26rem; }
  .rf-root .rf-venue__note { left: var(--gut); right: auto; }
  .rf-root .rf-venue__arrow { width: 3rem; height: 3rem; margin-top: -1.5rem; }
  .rf-venue__arrow--prev { left: var(--gut); }
  .rf-venue__arrow--next { right: var(--gut); }
  /* The places row runs to the screen edges and scrolls sideways, snapping to each place; its ends
     fade so a cut-off word reads as "more this way"; the chosen place scrolls into view. */
  .rf-venue__tabs {
    margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); scroll-padding: 0 var(--gut); scroll-snap-type: x proximity;
    overscroll-behavior-x: contain; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gut), #000 calc(100% - 3rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gut), #000 calc(100% - 3rem), transparent 100%);
  }
  .rf-root .rf-venue__tabs button { padding: .9rem 1rem; font-size: .9rem; letter-spacing: .1em; scroll-snap-align: start; }
  .rf-root .rf-venue__tabs button:first-child { padding-left: 0; }
  .rf-venue__tabs button:first-child::after { left: 0; }
  .rf-venue__tabs button::after { left: 1rem; right: 1rem; bottom: 0; }
}

/* ------------------------------------------- the causes: the follow spot */
/* Every name is fully lit and readable at all times. The spot only points at the nearest one. */
.rf-causes { position: relative; isolation: isolate; background: var(--k2); padding: 0 0 var(--sec); overflow: clip; }
.rf-causes__stage { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; overflow: hidden; pointer-events: none; z-index: 0; }
.rf-spot { position: absolute; inset: 0; }
.rf-spot__beam {
  position: absolute; left: 50%; top: -12%; width: 44vw; height: 80%; margin-left: -22vw; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(241, 235, 223, .13), rgba(241, 235, 223, .04) 75%, transparent);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); filter: blur(4px); will-change: transform;
}
.rf-spot__pool {
  position: absolute; left: 50%; top: 56%; width: min(78vw, 64rem); height: 38vh; margin: -19vh 0 0 max(-39vw, -32rem);
  background: radial-gradient(closest-side, rgba(241, 235, 223, .14), rgba(241, 235, 223, .05) 55%, transparent); will-change: transform;
}
.rf-causes__hush { position: relative; min-height: 46svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--sec) var(--gut) 3rem; }
.rf-root .rf-causes__h { max-width: 18ch; font-size: clamp(2.2rem, 4.6vw, 4.4rem); }
.rf-causes__list { position: relative; padding: 0 var(--gut); max-width: 96rem; margin: 0 auto; }
.rf-cause { min-height: 36svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.rf-cause--r { align-items: flex-end; text-align: right; }
.rf-root .rf-cause__tag { font-family: var(--display); font-stretch: 84%; font-weight: 700; font-size: .86rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red-hi); }
.rf-root .rf-cause__name { display: block; margin-top: .8rem; font-family: var(--display); font-weight: 860; font-size: clamp(2.8rem, 7.6vw, 7.6rem); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; color: var(--iv); text-wrap: balance; }
.rf-causes__tally { position: relative; min-height: 44svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 3rem var(--gut) 0; }
.rf-root .rf-causes__sum { font-family: var(--accent); font-style: italic; font-size: clamp(1.4rem, 1vw + 1.1rem, 1.9rem); color: var(--iv2); }
.rf-root .rf-causes__sum b { display: block; margin-bottom: .5rem; font-family: var(--display); font-style: normal; font-weight: 860; font-size: clamp(4rem, 11vw, 10rem); line-height: .86; letter-spacing: -.05em; text-transform: uppercase; color: var(--iv); }
.rf-root .rf-causes__note { margin-top: 1.6rem; max-width: 40ch; color: var(--iv3); font-size: 1rem; }
@media (max-width: 899px) {
  .rf-cause { min-height: 26svh; }
  .rf-cause, .rf-cause--r { align-items: center; text-align: center; }
  .rf-spot__beam { width: 90vw; margin-left: -45vw; }
  .rf-causes__hush { min-height: 40svh; }
  .rf-causes__tally { min-height: 40svh; }
}

/* ------------------------------------------------------------ apply to box */
/* The four rounds sit still on one baseline, linked by a plain rule. Then the boxer pass, cut like
   the ticket stubs, and last year's photos drifting past in one long strip. */
.rf-box { position: relative; background: var(--k0); padding: var(--sec) 0; overflow: clip; }
.rf-box__head { max-width: 46rem; }
.rf-rounds { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: var(--stack); border-top: 1px solid var(--line-hi); }
.rf-round { position: relative; padding-top: 2.4rem; }
.rf-round::before { content: ""; position: absolute; left: 0; top: -.68rem; width: 1.35rem; height: 1.35rem; border-radius: 3px; background: linear-gradient(90deg, #2a0807, var(--red) 50%, #2a0807); box-shadow: 0 0 0 4px var(--k0); }
.rf-root .rf-round__n { font-family: var(--display); font-stretch: 84%; font-weight: 750; font-size: .9rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red-hi); }
.rf-root .rf-round h3 { margin: .5rem 0 .7rem; font-family: var(--display); font-weight: 860; font-size: clamp(2.2rem, 2.6vw + 1rem, 3.4rem); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.rf-root .rf-round p { color: var(--iv2); max-width: 26ch; }
.rf-pass {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); margin-top: clamp(3.25rem, 6vw, 5rem); padding: .55rem;
  color: var(--paper-ink); background: linear-gradient(165deg, #f6f0e4, var(--paper) 60%, #e3dac8); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .95);
}
.rf-pass__main { padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.4rem, 3vw, 2.8rem); border: 1px solid var(--paper-line); border-right: 0; }
.rf-root .rf-pass .rf-label { color: var(--red-ink); font-size: .8rem; }
.rf-roles { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 1rem 0 1.2rem; }
.rf-root .rf-roles li { font-family: var(--display); font-weight: 860; font-size: clamp(1.6rem, 1.9vw + .8rem, 2.5rem); line-height: 1.05; letter-spacing: -.035em; text-transform: uppercase; color: var(--paper-ink); }
.rf-roles li:not(:last-child)::after { content: "/"; margin-left: 1rem; color: var(--red); font-weight: 400; }
.rf-root .rf-pass__p { max-width: 46ch; font-size: clamp(1.05rem, .4vw + .95rem, 1.2rem); line-height: 1.5; color: #4a4036; }
.rf-pass__tear {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.4rem;
  padding: 1.8rem clamp(1.4rem, 2.6vw, 2.4rem); border: 1px solid var(--paper-line); border-left: 2px dashed var(--paper-line);
}
.rf-pass__tear::before, .rf-pass__tear::after { content: ""; position: absolute; left: calc(-.75rem - 1px); width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--k0); }
.rf-pass__tear::before { top: -1.4rem; }
.rf-pass__tear::after { bottom: -1.4rem; }
.rf-root .rf-pass__tear p { display: grid; gap: .35rem; font-family: var(--display); font-stretch: 86%; font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #5b4f42; }
.rf-pass__tear b { color: var(--paper-ink); font-weight: 850; }
.rf-last { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.5rem; margin-top: clamp(4.5rem, 8vw, 7rem); }
.rf-root .rf-last__when { font-size: 1.05rem; color: var(--iv2); text-wrap: balance; }
.rf-reel { position: relative; margin-top: 1.3rem; }
.rf-reel::before, .rf-reel::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: clamp(2.5rem, 9vw, 9rem); pointer-events: none; }
.rf-reel::before { left: 0; background: linear-gradient(90deg, var(--k0), rgba(20, 18, 16, 0)); }
.rf-reel::after { right: 0; background: linear-gradient(270deg, var(--k0), rgba(20, 18, 16, 0)); }
.rf-reel__track {
  display: flex; gap: clamp(.6rem, .9vw, 1rem); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 0 var(--gut); scroll-snap-type: x proximity; scroll-padding: 0 var(--gut);
}
.rf-reel__track::-webkit-scrollbar { display: none; }
.rf-reel__track li { flex: 0 0 auto; height: clamp(17rem, 30vw, 28rem); scroll-snap-align: start; }
.rf-root .rf-reel__track img { width: auto; height: 100%; max-width: none; object-fit: cover; }
/* While it drifts, no snapping (it would fight the drift); the copies are only there for the loop. */
.rf-reel.is-drifting .rf-reel__track { scroll-snap-type: none; }
@media (max-width: 899px) {
  .rf-rounds { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; border-top: 0; border-left: 1px solid var(--line-hi); margin-left: .68rem; padding-top: .2rem; }
  .rf-round { padding: 0 0 0 2.2rem; }
  .rf-round::before { left: -.68rem; top: .05rem; }
  .rf-pass { grid-template-columns: minmax(0, 1fr); }
  .rf-pass__main { border-right: 1px solid var(--paper-line); border-bottom: 0; }
  .rf-pass__tear { border-left: 1px solid var(--paper-line); border-top: 2px dashed var(--paper-line); padding: 1.4rem 1.4rem 1.6rem; align-items: stretch; }
  .rf-pass__main { padding: 1.8rem 1.4rem 1.6rem; }
  .rf-root .rf-roles li { font-size: clamp(1.45rem, 6.4vw, 1.75rem); }
  .rf-roles li:not(:last-child)::after { margin-left: .6rem; }
  .rf-roles { gap: .15rem .6rem; }
  .rf-last { margin-top: calc(var(--sec) * .9); }
  .rf-pass__tear::before, .rf-pass__tear::after { top: -.85rem; bottom: auto; }
  .rf-pass__tear::before { left: -1.4rem; }
  .rf-pass__tear::after { left: auto; right: -1.4rem; }
  .rf-reel__track li { height: 19rem; }
}

/* ------------------------------------------------- tickets, in the room */
/* Under the 3D room: five cream stubs, in three groups. The GA side pair and the VIP side pair
   share one row on a wide screen; the VIP Table, the flagship, runs the full width under them as
   one long ticket. Each stub: what is in it, the early bird price big on the torn-off part and one
   red Buy ticket button. No price steps; one plain line under the stubs. */
.rf-tix { --notch: var(--k1); margin-top: var(--stack); scroll-margin-top: 1.25rem; }
.rf-tix__sides { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 3vw, 3rem); }
.rf-tix__side { display: flex; flex-direction: column; }
.rf-root .rf-tix__side-h { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.rf-tix__side-h::after { content: ""; flex: 1; height: 1px; background: var(--line-hi); }
.rf-stubs { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
.rf-stubs--table { display: block; margin-top: clamp(2.25rem, 3vw, 3rem); }
.rf-root .rf-tix__fine { margin-top: 1.5rem; text-align: center; font-size: .95rem; color: var(--iv2); text-wrap: balance; }
.rf-stub {
  position: relative; display: flex; flex-direction: column; color: var(--paper-ink);
  background: linear-gradient(165deg, #f6f0e4, var(--paper) 60%, #e3dac8); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .95);
  transition: transform .2s var(--ease);
}
.rf-stub__main { flex: 1; display: flex; flex-direction: column; padding: 1.7rem 1.4rem 1.3rem; border: 1px solid var(--paper-line); border-bottom: 0; margin: .55rem .55rem 0; }
.rf-root .rf-stub .rf-label { color: var(--red-ink); font-size: .78rem; }
.rf-root .rf-stub h3 { margin: .7rem 0 1rem; font-family: var(--display); font-weight: 860; font-size: clamp(1.7rem, .9vw + 1.2rem, 2.2rem); line-height: .95; letter-spacing: -.04em; word-spacing: .1em; text-transform: uppercase; text-wrap: balance; }
.rf-root .rf-stub p, .rf-root .rf-stub li { color: #4a4036; font-size: 1rem; line-height: 1.4; }
.rf-stub__in { display: grid; gap: .5rem; }
.rf-root .rf-stub__in li { position: relative; padding-left: 1.35rem; }
.rf-stub__in li::before { content: ""; position: absolute; left: 0; top: .66em; width: .7rem; height: 2px; background: var(--red); }
.rf-root .rf-stub__look {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: auto; padding-top: .9rem;
  font-family: var(--display); font-stretch: 86%; font-weight: 750; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink);
  text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .35em;
  transition: transform .12s var(--ease);
}
.rf-root .rf-stub__look:active { transform: scale(.97); }
.rf-stub__tear {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem .75rem;
  margin: 0 .55rem .55rem; padding: 1rem 1.4rem 1.3rem; border: 1px solid var(--paper-line); border-top: 2px dashed var(--paper-line);
  font-family: var(--display); font-stretch: 86%; font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-mute);
}
.rf-root .rf-stub .rf-stub__meta { display: grid; gap: .3rem; padding-bottom: .2rem; font: inherit; color: inherit; white-space: nowrap; }
.rf-root .rf-stub .rf-stub__now { display: grid; justify-items: end; margin-left: auto; text-align: right; font: inherit; color: inherit; }
.rf-stub__now small { font-size: .78rem; color: var(--red-ink); }
.rf-stub__now b { margin-top: .2rem; font-stretch: 100%; font-weight: 860; font-size: clamp(2.3rem, 1.4vw + 1.6rem, 2.9rem); line-height: .9; letter-spacing: -.04em; color: var(--paper-ink); font-variant-numeric: lining-nums; }
.rf-root .rf-stub__buy { flex: 1 0 100%; width: 100%; }
.rf-stub__tear::before, .rf-stub__tear::after { content: ""; position: absolute; top: -.85rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--notch, var(--k0)); }
.rf-stub__tear::before { left: -1.4rem; }
.rf-stub__tear::after { right: -1.4rem; }
@media (hover: hover) and (pointer: fine) { .rf-stub:hover { transform: translateY(-4px); } }
/* The VIP Table: one long ticket, the torn-off part on its right, the five lines in two columns. */
@media (min-width: 900px) {
  .rf-stub--table { flex-direction: row; }
  .rf-stub--table .rf-stub__main { margin: .55rem 0 .55rem .55rem; border-bottom: 1px solid var(--paper-line); border-right: 0; padding: 2rem 2.2rem; }
  .rf-root .rf-stub--table h3 { font-size: clamp(2.2rem, 1.6vw + 1.6rem, 3rem); }
  .rf-stub--table .rf-stub__tear {
    flex: 0 0 clamp(21rem, 32%, 25rem); align-content: flex-end; margin: .55rem .55rem .55rem 0; padding: 1.6rem 1.75rem 1.6rem;
    border-top: 1px solid var(--paper-line); border-left: 2px dashed var(--paper-line);
  }
  .rf-stub--table .rf-stub__tear::before, .rf-stub--table .rf-stub__tear::after { left: calc(-.75rem - 1px); right: auto; }
  .rf-stub--table .rf-stub__tear::before { top: -1.4rem; }
  .rf-stub--table .rf-stub__tear::after { top: auto; bottom: -1.4rem; }
  .rf-stub--table .rf-stub__now b { font-size: clamp(2.6rem, 2vw + 1.8rem, 3.4rem); }
}
@media (min-width: 1100px) {
  /* Two columns that read down, then across. */
  .rf-stub--table .rf-stub__in { display: block; columns: 2; column-gap: 2rem; }
  .rf-stub--table .rf-stub__in li { break-inside: avoid; margin-bottom: .55rem; }
}
@media (min-width: 1280px) {
  /* Wide screens: the two pairs share one row, four stubs across; the tear tightens to fit. */
  .rf-tix__sides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-tix__side .rf-stub__main { padding: 1.7rem 1.2rem 1.3rem; }
  .rf-tix__side .rf-stub__tear { padding: 1rem 1.2rem 1.2rem; }
  .rf-tix__side .rf-stub__now b { font-size: 2.5rem; }
}
@media (max-width: 639px) {
  /* Phones: one stub per row, one readable width. */
  .rf-stubs { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .rf-stub__main { padding: 1.5rem 1.3rem 1.2rem; }
  .rf-stub__tear { padding: .95rem 1.3rem 1.2rem; }
  .rf-root .rf-tix__fine { max-width: 22rem; margin-left: auto; margin-right: auto; }
}

/* -------------------------------------------------------------- questions */
.rf-faq { background: var(--k0); padding: var(--sec) 0; }
.rf-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem 4rem; }
.rf-root .rf-faq .rf-h2 { font-size: clamp(2.5rem, 3.6vw, 3.6rem); }
.rf-faq__list { border-top: 1px solid var(--line); }
.rf-faq details { border-bottom: 1px solid var(--line); }
.rf-root .rf-faq summary {
  display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-size: clamp(1.1rem, .5vw + 1rem, 1.3rem); font-weight: 700;
}
.rf-faq summary::-webkit-details-marker { display: none; }
.rf-faq summary::after { content: "+"; font-family: var(--display); font-weight: 500; font-size: 1.6rem; line-height: 1; color: var(--red-hi); transition: transform .15s var(--ease); }
.rf-faq details[open] summary::after { transform: rotate(45deg); }
.rf-root .rf-faq details p { padding: 0 0 1.4rem; color: var(--iv2); max-width: 60ch; }
.rf-root .rf-faq details a { color: var(--iv); text-decoration-color: var(--red-hi); }
@media (max-width: 899px) { .rf-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }

/* ------------------------------------------------------------- the close */
.rf-close { position: relative; isolation: isolate; padding: var(--sec) 0; text-align: center; background: var(--k0); overflow: hidden; }
.rf-close__pool { position: absolute; left: 50%; top: 50%; z-index: -1; width: min(110vw, 80rem); height: 70%; transform: translate(-50%, -45%); background: radial-gradient(closest-side, rgba(198, 42, 39, .16), transparent); }
.rf-close__badge { width: 8.5rem; height: auto; margin: 0 auto 1.8rem; }
.rf-root .rf-close__title { margin: 1rem 0 1.1rem; font-family: var(--display); font-weight: 860; font-size: clamp(3rem, 7.4vw, 7rem); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; }
.rf-root .rf-close__title i { font-size: 1.06em; line-height: .8; }
.rf-root .rf-close__line { margin-bottom: 2.2rem; font-size: clamp(1.05rem, .6vw + .95rem, 1.3rem); color: var(--iv2); text-wrap: balance; }

/* ---------------------------------------------------------------- footer */
.rf-foot { position: relative; background: var(--k2); border-top: 1px solid var(--line); padding: 4rem 0 calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
/* The two logos close the footer, as on every family site: the City seal bottom left, the white
   oneSTRNGTH logo bottom right, on the family size rule (px, the same width on every site). */
.rf-foot__marks { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2.5rem; margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.rf-root .rf-foot__city { display: flex; align-items: center; text-decoration: none; }
.rf-foot__city img { width: 5.5rem; height: 5.5rem; }
.rf-root .rf-foot__one { margin-left: auto; width: clamp(180px, 100px + 16vw, 400px); line-height: 0; }
.rf-root .rf-foot__one img { width: 100%; height: auto; }
.rf-foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.5rem 0; }
.rf-foot__nav ul { display: flex; flex-wrap: wrap; gap: .25rem 2rem; }
.rf-root .rf-foot__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--display); font-stretch: 86%; font-weight: 650; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--iv2); transition: color .15s var(--ease); }
@media (hover: hover) and (pointer: fine) { .rf-root .rf-foot__nav a:hover { color: var(--iv); } }
.rf-social { display: flex; gap: .5rem; }
.rf-root .rf-social a { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: var(--iv2); border: 1px solid var(--line); transition: color .15s var(--ease), border-color .15s var(--ease); }
.rf-root .rf-social a.rf-social__rebels { color: var(--red-hi); }
.rf-social svg { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) and (pointer: fine) { .rf-root .rf-social a:hover { color: var(--iv); border-color: var(--iv3); } }
.rf-root .rf-foot__fine { font-size: .85rem; color: var(--iv3); }
.rf-root .rf-foot__fine a { color: var(--iv2); }
@media (max-width: 899px) {
  .rf-foot__nav ul { flex-direction: column; }
  /* Phones: the two logos share one row, matched in height, edge to edge of the gutter. */
  .rf-foot__marks { flex-wrap: nowrap; gap: 1.5rem; margin-top: 2rem; padding-top: 2rem; }
  .rf-foot__city img { width: 4rem; height: 4rem; }
  .rf-foot__row { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

/* ----------------------------------------------------------------- motion */
/* Motion never hides content. The hero photo never scales or moves (it stays pixel sharp);
   the ropes never move. Only the light cone breathes. */
@media (prefers-reduced-motion: no-preference) {
  .rf-hero__cone { animation: rf-breathe 9s ease-in-out infinite alternate; }
}
@keyframes rf-breathe { from { opacity: .5; } to { opacity: .8; } }
@media (prefers-reduced-motion: reduce) {
  .rf-root *, .rf-root *::before, .rf-root *::after { transition-duration: .01ms !important; animation: none !important; }
  .rf-root .rf-venue__go { display: none; }
}
@media print { .rf-bar, .rf-hero__near, .rf-hero__dust, .rf-causes__stage { display: none; } }