/* Direction E, celebrate: Occasions. An afternoon party in lilac by day,
   the evening do in midnight plum by night; Syne with Figtree; motion that
   floats and lights up, then settles. */
@font-face { font-family: "Syne"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/_assets/previews/e/celebrate/fonts/Syne-500-800.68b623f0e4.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/_assets/previews/e/celebrate/fonts/Figtree-400-700.4ba7d3d096.woff2) format("woff2"); }

:root {
  color-scheme: light dark;
  --f-ground: light-dark(#F3EDF8, #1D1027);
  --f-surface: light-dark(#FBF8FD, #2A1838);
  --f-text: light-dark(#26123A, #F5ECF8);
  --f-muted: light-dark(#574A63, #C9B8D3);
  --f-line: light-dark(#DCCFE8, #46305B);
  --ring: light-dark(#A84C0C, #F5A262);
  --violet: light-dark(#5B2AA0, #B48CF0);
  --candle: light-dark(#C48A16, #F2C062);
  --here-c: var(--c-celebrate);
  --here: 6;
  --seal-ink: var(--f-text);
  --seal-paper: var(--f-ground);
  --poster: "Syne", "Avenir Next", "Futura", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --float: cubic-bezier(.34, 1.4, .64, 1);
  --arrive-duration: 700ms;
  --arrive-distance: 22px;
  --arrive-stagger: 90ms;
  --arrive-easing: cubic-bezier(.34, 1.3, .64, 1);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--f-ground); color: var(--f-text); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; border-radius: 10px; background: var(--f-surface); font-weight: 700; }
.skip:focus { top: 12px; }
.c-wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.c-h2 { margin: 0; font: 800 clamp(34px, 5.4vw, 64px)/1 var(--poster); letter-spacing: -.02em; }
.c-h3 { margin: 48px 0 16px; font: 700 14px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--f-muted); }
.c-sub { margin: 14px 0 0; max-width: 54ch; color: var(--f-muted); }
.c-small { margin: 30px 0 0; color: var(--f-muted); font-size: 15.5px; max-width: 76ch; }
.c-small b { color: var(--f-text); }

/* Hero: the promise in poster type, then the laid table. */
.c-hero { position: relative; isolation: isolate; max-width: 1280px; margin-inline: auto; padding: clamp(26px, 4vw, 56px) clamp(16px, 4vw, 40px) clamp(48px, 7vw, 88px); overflow: hidden; }
.c-brand { display: flex; align-items: center; gap: 14px; }
.c-brand .seal { width: 80px; height: 80px; flex: none; }
.c-site { margin: 0; font: 800 22px/1.1 var(--poster); letter-spacing: .02em; }
.c-site span { display: block; font: 500 14px/1.3 var(--body); letter-spacing: .04em; color: var(--f-muted); }
.c-hero h1 { margin: 28px 0 0; font: 700 clamp(40px, 7.2vw, 100px)/.95 var(--poster); letter-spacing: -.03em; }
.c-hero h1 span { display: block; color: var(--violet); }
.c-hero-side { display: grid; gap: 4px 48px; margin-top: 26px; }
@media (min-width: 960px) { .c-hero-side { grid-template-columns: minmax(0, 36ch) auto; align-items: center; } .c-hero-side .e-note { grid-column: 2; justify-self: start; } }
.c-lede { margin: 0; font-size: 19px; max-width: 38ch; }
.c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 22px 0 18px; }
.c-link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--violet); }
.c-table { margin: clamp(32px, 5vw, 56px) 0 0; }
.c-table-frame { overflow: hidden; border-radius: 22px; aspect-ratio: 4 / 3; background: var(--f-surface); box-shadow: 0 50px 80px -50px rgb(30 10 50 / .6); }
@media (min-width: 760px) { .c-table-frame { aspect-ratio: 16 / 7.4; } }
.c-table-frame picture, .c-table-img { width: 100%; height: 100%; }
.c-table-img { object-fit: cover; object-position: 50% 45%; }
.c-table figcaption { margin-top: 12px; color: var(--f-muted); font-size: 14px; }

/* Confetti in her kanoko dots: it falls once and settles. */
.c-confetti { position: absolute; z-index: -1; inset: 0 0 auto 0; height: 560px; pointer-events: none; }
.c-confetti i { position: absolute; width: 14px; height: 14px; border-radius: 4px; background: radial-gradient(circle, var(--f-ground) 0 2px, transparent 2.5px), var(--violet); opacity: .85; }
.c-confetti i:nth-child(3n+2) { background: radial-gradient(circle, var(--f-ground) 0 2px, transparent 2.5px), var(--candle); }
.c-confetti i:nth-child(4n+3) { width: 10px; height: 10px; border-radius: 50%; background: var(--c-celebrate); }
.cf1 { left: 58%; top: 70px; transform: rotate(18deg); } .cf2 { left: 72%; top: 140px; transform: rotate(-24deg); } .cf3 { left: 88%; top: 60px; }
.cf4 { left: 94%; top: 210px; transform: rotate(40deg); } .cf5 { left: 66%; top: 250px; } .cf6 { left: 80%; top: 300px; transform: rotate(-12deg); }
.cf7 { left: 52%; top: 180px; transform: rotate(30deg); } .cf8 { left: 90%; top: 390px; } .cf9 { left: 75%; top: 440px; transform: rotate(-35deg); }
.cf10 { left: 62%; top: 380px; transform: rotate(8deg); } .cf11 { left: 97%; top: 130px; } .cf12 { left: 84%; top: 500px; transform: rotate(22deg); }
@media (max-width: 760px) { .c-confetti i:nth-child(n+7) { display: none; } .cf1 { left: 70%; top: 40px; } .cf3 { left: 86%; top: 96px; } .cf5 { left: 92%; top: 20px; } }

/* The steps: one plan, growing. */
.c-steps { padding: clamp(64px, 9vw, 120px) 0; background: var(--f-surface); }
.rungs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rung { position: relative; display: grid; grid-template-columns: 1fr; gap: 6px; padding: 22px 24px; border-radius: 18px; background: var(--f-ground); box-shadow: 0 1px 0 var(--f-line); transition: transform 360ms var(--float), box-shadow 360ms var(--float); }
.rung:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--f-line), 0 24px 36px -28px rgb(40 10 70 / .45); }
.rungs:not(.rungs-w) .rung { padding-left: 76px; }
.stack { position: absolute; left: 24px; top: 26px; display: grid; gap: 4px; width: 32px; }
.stack i { height: 6px; border-radius: 3px; background: var(--violet); }
.stack i:nth-child(2) { opacity: .75; } .stack i:nth-child(3) { opacity: .55; }
@media (min-width: 900px) { .r1 { width: 74%; } .r2 { width: 87%; } .r3 { width: 100%; } }
.rung-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; }
.rung-name { margin: 0; font: 700 clamp(22px, 2.6vw, 28px)/1.1 var(--poster); letter-spacing: -.01em; }
.rung-price { margin: 0; font: 800 clamp(34px, 4vw, 46px)/1 var(--poster); letter-spacing: -.02em; }
.rung-quote { font-size: clamp(22px, 2.4vw, 26px); }
.rung-for { margin: 0; color: var(--f-muted); font-weight: 600; }
.rung-what { margin: 4px 0 0; max-width: 70ch; }
.rung-note { margin: 4px 0 0; font-weight: 700; }
.rung-when { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--f-line); font-size: 14.5px; font-weight: 600; }
.rung-when::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--candle); }
@media (min-width: 1000px) { .rungs-w { grid-template-columns: repeat(3, 1fr); } .rungs-w .rung { align-content: start; } }
.addons { display: grid; gap: 14px; }
@media (min-width: 800px) { .addons { grid-template-columns: 1fr 1fr; } }
.addon { padding: 20px 22px; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--f-line); }
.addon p { margin: 0; }
.addon-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px !important; }
.addon-head b { font: 700 20px/1.2 var(--poster); }
.addon-head span { font: 800 30px/1 var(--poster); }

/* How far ahead: the run sheet before the day. */
.c-ahead { padding: clamp(64px, 9vw, 120px) 0; }
.lead { list-style: none; margin: 40px 0 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 18px; }
.lead::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--f-line); }
.ld { position: relative; display: grid; gap: 2px; }
.ld::before { content: ""; position: absolute; left: -26px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--f-ground); box-shadow: inset 0 0 0 3px var(--violet); }
.ld0::before { background: var(--candle); box-shadow: none; }
.ld-when { font: 800 24px/1.1 var(--poster); }
.ld-what { color: var(--f-muted); font-weight: 600; }
@media (min-width: 900px) {
  .lead { height: 190px; padding: 0; display: block; }
  .lead::before { left: 0; right: 0; top: 94px; bottom: auto; width: auto; height: 3px; }
  .ld { position: absolute; top: 0; width: 190px; transform: translateX(-50%); text-align: center; }
  .ld::before { left: 50%; top: 87px; transform: translateX(-50%); width: 17px; height: 17px; }
  .ld13 { left: 2%; text-align: left; transform: none; } .ld13::before { left: 0; transform: none; }
  .ld8 { left: 38.5%; } .ld4 { left: 69.2%; } .ld3 { left: 76.9%; top: 112px; } .ld2 { left: 84.6%; }
  .ld3::before { top: -25px; }
  .ld0 { left: auto; right: 0; transform: none; text-align: right; top: 112px; } .ld0::before { left: auto; right: 0; top: -25px; transform: none; }
}

/* Booking. */
.c-book { padding: clamp(64px, 9vw, 120px) 0; background: var(--f-surface); }
.c-howto { list-style: none; counter-reset: s; margin: 34px 0 36px; padding: 0; display: grid; gap: 22px; }
@media (min-width: 820px) { .c-howto { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.c-howto li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; }
.c-howto li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--violet); color: var(--f-ground); font: 800 26px/1 var(--poster); }
.c-howto b { font: 700 21px/1.2 var(--poster); align-self: end; }
.c-howto span { color: var(--f-muted); }

/* Arrival: the confetti falls and settles; the lights come up on the table. */
@media (prefers-reduced-motion: no-preference) {
  html.lt-ready .c-confetti i { animation: c-fall 1300ms var(--float) backwards; }
  html.lt-ready .cf2 { animation-delay: 80ms; } html.lt-ready .cf3 { animation-delay: 160ms; } html.lt-ready .cf4 { animation-delay: 240ms; }
  html.lt-ready .cf5 { animation-delay: 120ms; } html.lt-ready .cf6 { animation-delay: 300ms; } html.lt-ready .cf7 { animation-delay: 40ms; }
  html.lt-ready .cf8 { animation-delay: 360ms; } html.lt-ready .cf9 { animation-delay: 200ms; } html.lt-ready .cf10 { animation-delay: 280ms; }
  html.lt-ready .cf11 { animation-delay: 100ms; } html.lt-ready .cf12 { animation-delay: 420ms; }
  html.lt-ready .c-brand, html.lt-ready .c-hero h1, html.lt-ready .c-hero-side { animation: c-up 820ms var(--float) backwards; }
  html.lt-ready .c-hero h1 { animation-delay: 90ms; } html.lt-ready .c-hero-side { animation-delay: 200ms; }
  html.lt-ready .c-table-img { animation: c-lights 1500ms ease-out 250ms backwards; }
  .rung.lt-arrived, .addon.lt-arrived { animation: c-up 700ms var(--float) calc(var(--arrive-order, 0) * 90ms) backwards; }
}
@keyframes c-fall { from { opacity: 0; transform: translateY(-120px) rotate(-120deg); } }
@keyframes c-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes c-lights { from { opacity: .15; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .rung { transition-duration: 1ms; }
  .rung:hover { transform: none; }
}