/* The VIP lounge page (2026-09-24): its own sheet, linked by the page with data-overage. Fraunces for the mark,
   the dates and the map heading (self-hosted, CSS-006); the gold; the motion background on <main data-vip>. */
:root { --vip-gold: #E4C75A; --vip-navy: #0B081A; --vip-purple: #4B2C8F; --vip-violet: #6B3FA0; }
/* the ground and its slow drift: two fixed layers of large glows behind everything; still under reduced motion (V4 §8) */
body:has(main[data-vip]) { background: var(--vip-navy); }
main[data-vip] { position: relative; isolation: isolate; background: var(--vip-navy); color: #fff; min-height: 100vh; min-height: 100svh; overflow-x: clip; }
main[data-vip]::before, main[data-vip]::after { content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none; will-change: transform; }
main[data-vip]::before { background: radial-gradient(48% 42% at 22% 18%, rgba(107, 63, 160, .55), transparent 70%), radial-gradient(40% 36% at 80% 30%, rgba(75, 44, 143, .5), transparent 70%); animation: vip-drift-a 50s cubic-bezier(.25, 1, .5, 1) infinite alternate; }
main[data-vip]::after { background: radial-gradient(34% 30% at 60% 78%, rgba(228, 199, 90, .12), transparent 70%), radial-gradient(44% 40% at 30% 88%, rgba(75, 44, 143, .45), transparent 70%); animation: vip-drift-b 62s cubic-bezier(.25, 1, .5, 1) infinite alternate; }
@keyframes vip-drift-a { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.08); } }
@keyframes vip-drift-b { from { transform: translate3d(3%, 2%, 0) scale(1.05); } to { transform: translate3d(-4%, -3%, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) { main[data-vip]::before, main[data-vip]::after { animation: none; } }
/* the split: the demo hero's geometry */
.vip-hero { padding-block: var(--s-7) var(--s-7); }
.vip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--s-6) var(--s-8); align-items: start; }
.vip-copy { grid-column: 1; grid-row: 1; }
.vip-side { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: var(--s-5); align-content: start; justify-items: end; }
.vip-more { grid-column: 1; grid-row: 2; display: grid; gap: var(--sp-24); }
.vip-logo { display: inline-flex; }
.vip-logo img { display: block; width: auto; height: 28px; }
.vip-copy { display: grid; gap: var(--sp-24); align-content: start; }
/* the mark: VIP in gold, the lounge in italic, both Fraunces */
.vip-mark { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; line-height: .86; letter-spacing: -.01em; color: #fff; }
.vip-mark-vip { display: block; font-size: clamp(88px, 12vw, 148px); background: linear-gradient(160deg, #fff3b0 0%, #e4c75a 28%, #b8902b 52%, #f2dc86 74%, #a67c1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(228, 199, 90, .28)); }
.vip-mark-lounge { display: block; margin-top: -.12em; padding-left: .08em; font-style: italic; font-weight: 400; font-size: clamp(36px, 5vw, 58px); color: #fff; }
.vip-kicker { margin: 0; font-size: var(--fs-nano); letter-spacing: var(--track-widest); text-transform: uppercase; color: rgba(255, 255, 255, .66); }
.vip-kicker a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.vip-kicker a:hover { color: #fff; text-decoration-color: #fff; }
.vip-dates { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; color: #fff; }
.vip-hours { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--s-4); margin: 0; font-size: var(--fs-ui); }
.vip-hours dt { color: #fff; }
.vip-hours dd { margin: 0; color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; }
.vip-lead { margin: 0; max-width: 52ch; font-family: 'Fraunces', Georgia, serif; font-size: var(--fs-lead-sm); line-height: 1.35; color: #fff; }
.vip-lede { display: grid; gap: var(--s-3); max-width: 52ch; color: rgba(255, 255, 255, .78); }
.vip-lede > * { margin: 0; }
.vip-lede h3 { color: #fff; font-size: var(--fs-ui); }
.vip-amenities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.vip-amenities li { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(228, 199, 90, .45); color: #fff; font-size: var(--fs-small); }
.vip-status { margin: 0; color: rgba(255, 255, 255, .78); }
main[data-vip] .countdown li { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); }
main[data-vip] .countdown-n { color: #fff; }
main[data-vip] .countdown-l { color: rgba(255, 255, 255, .6); }
.vip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin: 0; }
.vip-find { color: #fff; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: var(--fs-small); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 4px; }
.vip-find:hover { text-decoration-color: #fff; }
/* the clock card: the standard hero's card on the dark ground, glass over the drift */
.vip-clock { width: 100%; display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-panel); border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.vip-clock-kicker { margin: 0; font-size: var(--fs-nano); letter-spacing: var(--track-widest); text-transform: uppercase; color: rgba(255, 255, 255, .66); }
.vip-clock-meta { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px 12px; margin: 0; align-items: start; font-size: var(--fs-small); color: rgba(255, 255, 255, .85); }
.vip-clock-meta dt { display: grid; place-items: center; height: 22px; }
.vip-clock-meta dd { margin: 0; }
.vip-clock-meta .icon { width: 18px; height: 18px; fill: none; stroke: var(--vip-gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vip-clock .btn { width: 100%; justify-content: center; }
/* the register dialog sits on the dark page but is the family's light dialog: data-band="light" gives it the light
   tokens (white ground, ink, the close disc), and the light scheme keeps HubSpot's frame see-through on the white */
main[data-vip] .modal { color-scheme: light; }
/* the page has no footer, and the dialog after the last section keeps the shared last-section foot from reaching it,
   so the template sets its own: the content ends a clear gap above the bottom of the page (Robert, 2026-10-01) */
main[data-vip] > .section:last-of-type { padding-bottom: var(--s-8); }
/* the map: the drawing at a third of the width, the details beside it, so the section sits in one viewport */
.vip-map { padding-block: var(--s-7) var(--s-8); }
.vip-map-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-7); align-items: start; }
.vip-map-details { display: grid; gap: var(--sp-24); align-content: start; padding-top: var(--s-3); }
.vip-map-room { margin: 0; max-width: 52ch; color: rgba(255, 255, 255, .78); }
.vip-map-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(30px, 3.6vw, 44px); color: #fff; }
.vip-map-figure { margin: 0; padding: var(--s-3); color-scheme: light; }
.vip-map-figure:hover { transform: none; }  /* the drawing is not a control */
.vip-map-figure img { display: block; width: 100%; height: auto; }
.vip-map-figure figcaption { padding-top: var(--s-3); color: var(--muted); font-size: var(--fs-small); }
.vip-invitees { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: var(--fs-lead-sm); color: #fff; }
.vip-brands { margin: var(--s-2) 0 0; }
.vip-brands img { display: block; width: auto; max-width: 360px; height: auto; filter: invert(1) hue-rotate(180deg); }  /* the lockup was drawn for a light page: inverted, its dark wordmark reads white and the orange mark keeps its hue */
@media (max-width: 960px) { .vip-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--s-6); } .vip-copy, .vip-side, .vip-more { grid-column: auto; grid-row: auto; } .vip-side { justify-items: stretch; } .vip-logo { justify-self: start; } .vip-map-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .vip-map-figure { max-width: 420px; } }
@media (max-width: 640px) { .vip-clock { padding: var(--s-5); } .vip-hero { padding-block: var(--s-6); } .vip-hours { grid-template-columns: minmax(0, 1fr); gap: 2px; } .vip-hours dd { margin-bottom: 6px; } }  /* a phone stacks each day's hours under its date */