/*
 * Celebrate: Occasions. A midnight plum title page whose table lights up on
 * arrival, candle gold for the small sparks, Unbounded for the party poster
 * voice and Albert Sans for the run sheet. Light theme is the afternoon
 * party; dark is the evening do. Motion: lights on, confetti, a countdown.
 */
@font-face {
  font-family: "Unbounded";
  src: url("/_assets/previews/f/celebrate/fonts/unbounded-normal-400-800.22f9b928aa.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/_assets/previews/f/celebrate/fonts/albert-normal-400-700.c2fb6fda41.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/_assets/previews/f/celebrate/fonts/albert-italic-400.a31cbeca2d.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --ground: light-dark(#fbf1f6, #150a1b);
  --surface: light-dark(#f3e2ee, #22122a);
  --ink: light-dark(#2a1233, #f6e9f2);
  --ink-2: light-dark(#6a4f70, #c2acc7);
  --accent: light-dark(#6d2a9c, #d3a9f6);
  --gold: light-dark(#8a5600, #f4b24e);
  --hair: light-dark(#e6cfe0, #3a2243);
  --focus: light-dark(#6d2a9c, #d3a9f6);
  --select-bg: #f4b24e;
  --select-ink: #2a1233;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body-font: "Albert Sans", "Segoe UI", system-ui, sans-serif;
  --dock-bg: #2a1233;
  --dock-ink: #f8ecf4;
  --sheet-bg: var(--ground);
}

/* Title page: plum in both themes */
.title { background: #2a1233; color: #f8ecf4; --ink: #f8ecf4; --ink-2: #d7c0d9; --focus: #f4b24e; --proof-ink: #d7c0d9; --gold: #f4b24e; overflow: hidden; }
.title .seal { color: #f4b24e; fill: #f8ecf4; }
.title .head__toc:hover { text-decoration: underline; }
.textlink { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }

.hero { display: grid; gap: var(--space-6); padding: var(--space-4) 0 var(--space-7); }
.hero__text {
  display: grid; gap: var(--space-5); padding: 0 var(--gutter);
  max-width: 100rem; margin: 0 auto; width: 100%;
}
.hero__title { display: grid; gap: var(--space-2); }
.hero__text > .proof { grid-column: 1 / -1; }
.hero__verb { font-size: clamp(2.6rem, 11.5vw, 6rem); line-height: .95; letter-spacing: -.04em; }
.hero__name { font: 500 clamp(1.1rem, 2.4vw, 1.5rem)/1.1 var(--display); letter-spacing: .02em; color: #f4b24e; }
.hero__side { display: grid; gap: var(--space-4); justify-items: start; }
.hero__lede { font-size: 1.1875rem; max-width: 36ch; }
.hero__start { font-size: 1.0625rem; }
.hero__start-k { font: italic 500 .9375rem/1.3 var(--ledger); color: var(--ink-2); margin-right: .35em; }
.hero__start b { font: 700 1.5rem/1 var(--ledger); color: #f4b24e; margin-left: .25em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.hero__fig { position: relative; display: grid; gap: var(--space-2); }
.hero__frame { position: relative; overflow: hidden; }
.hero__img { width: 100%; height: clamp(14rem, 42vw, 40rem); object-fit: cover; object-position: 50% 62%; }
.hero__veil { position: absolute; inset: 0; background: #150a1b; opacity: 0; pointer-events: none; }
.hero__cap { font: italic 400 .875rem/1.35 var(--ledger); color: var(--ink-2); padding: 0 var(--gutter); }
.confetti { position: absolute; right: var(--gutter); top: -2.4rem; width: min(18rem, 50vw); height: auto; overflow: visible; }
.confetti circle { fill: none; stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.confetti circle:nth-child(3n) { stroke: #f4b24e; }
.confetti circle:nth-child(3n+1) { stroke: #c99bf2; }
.confetti circle:nth-child(3n+2) { stroke: #f39ac4; }
@media (min-width: 64rem) {
  .hero__text { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--space-8); align-items: end; padding-top: var(--space-6); }
}

/* Sections */
.sec { padding: var(--space-9) var(--gutter) 0; max-width: 86rem; margin: 0 auto; }
.sec__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); max-width: 46rem; }
.sec__title { font: 600 clamp(1.9rem, 4.4vw, 3.2rem)/1.04 var(--display); letter-spacing: -.035em; }
.sec__sub { color: var(--ink-2); font-size: 1.125rem; max-width: 50ch; }

/* The rungs: one growing stack, a tier added each time. */
.rungs { list-style: none; display: grid; gap: var(--space-3); }
.rung {
  display: grid; gap: var(--space-3) var(--space-5);
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  grid-template-areas: "tiers head price" "tiers list list" "tiers when when";
  padding: var(--space-5); background: var(--surface); border-radius: var(--radius);
}
.tiers { grid-area: tiers; display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; align-self: start; padding-top: .3rem; }
.tiers i { display: block; height: 9px; border-radius: 3px; background: var(--gold); }
.tiers i:nth-child(1) { width: 3.1rem; }
.tiers i:nth-child(2) { width: 2.6rem; }
.tiers i:nth-child(3) { width: 2.1rem; }
.tiers i:nth-child(4) { width: 1.6rem; }
.tiers i:nth-child(5) { width: 1.1rem; }
.rung__head { grid-area: head; display: grid; gap: .3rem; }
.rung__name { font: 600 1.375rem/1.15 var(--display); letter-spacing: -.02em; }
.rung__who { color: var(--ink-2); font-size: 1rem; max-width: 48ch; }
.rung__list { grid-area: list; list-style: none; display: grid; gap: .35rem; max-width: 62ch; }
.rung__list li { padding-left: 1.1rem; position: relative; }
.rung__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; border: 2px solid var(--accent); }
.rung__list .rung__inc { padding-left: 0; font-weight: 700; color: var(--accent); }
.rung__list .rung__inc::before { display: none; }
.rung__list .rung__care { font-style: italic; }
.rung__price { grid-area: price; font: 700 2.25rem/1 var(--ledger); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; text-align: right; }
.rung__when { grid-area: when; font: italic 400 .9375rem/1.35 var(--ledger); color: var(--ink-2); }
@media (max-width: 34rem) {
  .rung { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head price" "list list" "when when"; }
  .tiers { display: none; }
}
@media (min-width: 64rem) {
  .rung {
    grid-template-columns: 3.25rem minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2.4fr);
    grid-template-areas: "tiers head list price" "tiers head when price";
    padding: var(--space-6);
  }
  .rung__price { font-size: 2.75rem; }
}

.extras { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
.extras__title { font: 600 1.125rem/1.2 var(--display); letter-spacing: -.01em; margin-bottom: var(--space-3); }
.extras__col p { max-width: 42ch; }
.addons { display: grid; gap: var(--space-4); }
.addons dt { font-weight: 700; }
.addons dt b { font: 700 1.125rem/1 var(--ledger); margin-left: .35em; }
.addons dd { color: var(--ink-2); font-size: 1rem; }
.notin { list-style: none; display: grid; gap: .4rem; }
.notin li { padding-left: 1.1rem; position: relative; }
.notin li::before { content: ""; position: absolute; left: 0; top: .7em; width: .55rem; height: 2px; background: var(--gold); }
@media (min-width: 64rem) {
  .extras { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-7); }
}

/* Countdown: the subject's own run sheet, counted back from the day. */
.countdown { list-style: none; display: grid; gap: 0; position: relative; margin-bottom: var(--space-7); }
.countdown li { display: grid; grid-template-columns: 1.4rem 1fr; column-gap: var(--space-4); padding-bottom: var(--space-4); position: relative; }
.countdown li::before { content: ""; grid-row: span 2; width: 1rem; height: 1rem; margin-top: .3rem; border-radius: 50%; border: 3px solid var(--accent); background: var(--ground); position: relative; z-index: 1; }
.countdown li::after { content: ""; position: absolute; left: calc(.5rem - 1px); top: 1.3rem; bottom: -.3rem; width: 2px; background: var(--hair); }
.countdown li:last-child::after { display: none; }
.countdown__when { font: 600 1.25rem/1.2 var(--display); letter-spacing: -.02em; }
.countdown__what { color: var(--ink-2); }
.countdown__day::before { background: var(--gold); border-color: var(--gold); }
.countdown__day .countdown__when { color: var(--gold); }
@media (min-width: 56rem) {
  .countdown { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .countdown li { grid-template-columns: 1fr; row-gap: .4rem; padding: 0 var(--space-3) 0 0; }
  .countdown li::before { grid-row: auto; margin: 0 0 var(--space-2); }
  .countdown li::after { left: 1.1rem; right: 0; top: .5rem; bottom: auto; width: auto; height: 2px; }
}
.ahead__fig { display: grid; gap: var(--space-3); }
.ahead__img { width: 100%; height: auto; border-radius: var(--radius); }

/* Booking */
.book { display: grid; justify-items: start; gap: var(--space-6); }
.book .sec__head { margin-bottom: 0; }
.steps { width: 100%; }
.steps li::before { font-family: var(--display); font-weight: 600; border-color: var(--accent); color: var(--accent); }
.btn--big { font-size: 1.125rem; min-height: 3.5rem; padding-inline: 1.6em; }

.back { margin-top: var(--space-9); background: var(--surface); }
.back__title { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; }

/*
 * Arrival: lights on. The table starts in the dark and the light comes up;
 * the poster type rises; confetti pops once. The countdown's stops light in
 * order, from three months out to the day. Every bit of it finishes by itself.
 */
@media (prefers-reduced-motion: no-preference) {
  .lt-ready .head { animation: rise 500ms var(--ease-out) both; }
  .lt-ready .hero__verb { animation: pop-up 760ms var(--ease-out) 80ms both; }
  .lt-ready .hero__name { animation: rise 600ms var(--ease-out) 200ms both; }
  .lt-ready .hero__side, .lt-ready .hero__text .proof { animation: rise 600ms var(--ease-out) 300ms both; }
  .lt-ready .hero__veil { animation: lights 1400ms var(--ease-in-out) 250ms both; }
  .lt-ready .hero__img { animation: breathe 1800ms var(--ease-out) 250ms both; }
  .lt-ready .confetti circle { animation: pop 520ms cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(700ms + var(--k, 0) * 60ms); }
  .rungs.lt-arrived .rung { animation: rise 520ms var(--ease-out) both; }
  .rungs.lt-arrived .rung:nth-child(2) { animation-delay: 70ms; }
  .rungs.lt-arrived .rung:nth-child(3) { animation-delay: 140ms; }
  .rungs.lt-arrived .rung:nth-child(4) { animation-delay: 210ms; }
  .rungs.lt-arrived .rung:nth-child(5) { animation-delay: 280ms; }
  .rungs.lt-arrived .tiers i { animation: stack 360ms var(--ease-out) both; animation-delay: calc(240ms + var(--k, 0) * 70ms); }
  .countdown.lt-arrived li::before { animation: light 420ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 140ms); }
  .countdown.lt-arrived li > span { animation: rise 420ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 140ms); }
  .steps.lt-arrived li { animation: rise 520ms var(--ease-out) both; }
  .steps.lt-arrived li:nth-child(2) { animation-delay: 90ms; }
  .steps.lt-arrived li:nth-child(3) { animation-delay: 180ms; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-ready .hero { animation: fade 220ms linear both; }
}
.confetti circle:nth-child(2), .tiers i:nth-child(2), .countdown li:nth-child(2) { --k: 1; }
.confetti circle:nth-child(3), .tiers i:nth-child(3), .countdown li:nth-child(3) { --k: 2; }
.confetti circle:nth-child(4), .tiers i:nth-child(4), .countdown li:nth-child(4) { --k: 3; }
.confetti circle:nth-child(5), .tiers i:nth-child(5), .countdown li:nth-child(5) { --k: 4; }
.confetti circle:nth-child(6), .countdown li:nth-child(6) { --k: 5; }
.confetti circle:nth-child(7) { --k: 6; }
.confetti circle:nth-child(8) { --k: 7; }
.confetti circle:nth-child(9) { --k: 8; }
.confetti circle:nth-child(10) { --k: 9; }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
@keyframes pop-up { from { transform: translateY(28px) scale(.96); opacity: 0; } }
@keyframes lights { from { opacity: .82; } to { opacity: 0; } }
@keyframes breathe { from { transform: scale(1.04); } }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
@keyframes stack { from { transform: translateY(-8px); opacity: 0; } }
@keyframes light { from { transform: scale(.4); opacity: 0; } }
@keyframes fade { from { opacity: .4; } }