/* Direction C, celebrate: Occasions. Afternoon linen by day, the evening
   do in plum by night. Shrikhand for the voice. The lights come up and the
   kit floats in, like balloons finding the ceiling. */

@font-face {
  font-family: "Shrikhand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_assets/previews/c/celebrate/fonts/shrikhand-normal.ae958e0da5.woff2) format("woff2");
}

:root {
  --ground: light-dark(#F6F0F7, #1B0D21);
  --surface: light-dark(#FFFFFF, #291531);
  --ink: light-dark(#2A1033, #F8EDF9);
  --muted: light-dark(#5B4463, #CFB8D5);
  --accent-text: light-dark(#65278F, #D2A9F7);
  --gold: light-dark(#8A5E0A, #F2C46B);
  --focus: light-dark(#65278F, #F2C46B);
  --edge: light-dark(#2A1033, #F8EDF9);
  --rule: light-dark(rgb(42 16 51 / .16), rgb(248 237 249 / .16));
  --seal-paper: var(--ground);
  --seal-mark: var(--accent-text);
  --arrival-floor: var(--floor-celebrate);
  --display: "Shrikhand", "Cooper Black", Georgia, serif;
}

body {
  background: var(--ground);
  color: var(--ink);
}

.top__name {
  font-size: 1.375rem;
  color: var(--accent-text);
}

.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.05;
  color: var(--accent-text);
}

/* Hero: the evening table, the lights coming up, the kit floating in. */
.hero {
  position: relative;
  margin-inline: auto;
  width: min(100% - 2 * var(--gutter, 1.25rem), 1400px);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background: #2B1220;
  color: #F8EDF9;
  --ink: #F8EDF9;
  --muted: #E9D6EC;
  --edge: #F8EDF9;
  --focus: #F2C46B;
}

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__scene picture,
.hero__img {
  width: 100%;
  height: 100%;
}

.hero__img {
  object-fit: cover;
  object-position: 50% 0%;
}

.hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(34 12 27 / 0) 25%, rgb(34 12 27 / .88) 62%, #220C1B 100%);
}

@media (max-width: 959px) {
  .hero__scene {
    bottom: auto;
    height: 20rem;
  }
  .hero__scene::after {
    background: linear-gradient(180deg, rgb(43 18 32 / 0) 45%, #2B1220 100%);
  }
}

.hero__dim {
  position: absolute;
  inset: 0;
  background: #12060F;
  opacity: 0;
}

.hero__inner {
  display: grid;
  gap: var(--s5);
  align-content: end;
  min-height: min(92vh, 860px);
  padding-block: 16rem var(--s6);
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    padding-block: 22rem var(--s7);
    min-height: min(96vh, 920px);
  }
}

.hero__copy {
  display: grid;
  gap: var(--s4);
  justify-items: start;
}

.note--on-dark {
  color: #E9D6EC;
}

.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.5rem, 2rem + 6.5vw, 7.5rem);
  line-height: 0.9;
  color: #F2C46B;
}

.hero__lede {
  max-width: 40ch;
  font-size: 1.1875rem;
  color: #F8EDF9;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
}

.hero__cap {
  padding-block: 0 var(--s4);
  font-size: 0.8125rem;
  color: #E9D6EC;
}

/* The kit */
.kit {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s2) var(--s3);
}

@media (min-width: 960px) {
  .kit {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

.kit__item img {
  width: 100%;
  filter: drop-shadow(0 12px 10px rgb(0 0 0 / .35));
}

.kit__item--balloon { width: 4.5rem; --d: 0ms; translate: 0 -2.5rem; }
.kit__item--napkin { width: 6.5rem; --d: 140ms; }
.kit__item--card { width: 4.75rem; --d: 260ms; }
.kit__item--candle { width: 2rem; --d: 80ms; }
.kit__item--cone { width: 4.5rem; --d: 200ms; rotate: -18deg; }
.kit__item--vase { width: 3rem; --d: 320ms; }
.kit__item--ribbon { width: 3rem; --d: 380ms; }

@media (min-width: 1200px) {
  .kit__item--balloon { width: 6rem; }
  .kit__item--napkin { width: 8.5rem; }
  .kit__item--card { width: 6rem; }
  .kit__item--candle { width: 2.5rem; }
  .kit__item--cone { width: 5.5rem; }
  .kit__item--vase { width: 3.75rem; }
  .kit__item--ribbon { width: 3.75rem; }
}

@media (max-width: 599px) {
  .kit__item--ribbon,
  .kit__item--vase {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lt-js .hero__dim {
    animation: lights-up 1400ms var(--ease-soft) both;
  }
  .lt-js .kit__item {
    animation: float-in 1500ms var(--ease-out) calc(var(--d) + 450ms) both;
  }
  .lt-js .kit__item--balloon {
    animation: float-in 1500ms var(--ease-out) calc(var(--d) + 450ms) both, bob 3600ms ease-in-out 2200ms 1;
  }
  .lt-js .hero__copy > * {
    animation: rise 700ms var(--ease-out) both;
  }
  .lt-js .hero__copy > :nth-child(2) { animation-delay: 220ms; }
  .lt-js .hero__copy > :nth-child(3) { animation-delay: 320ms; }
  .lt-js .hero__copy > :nth-child(4) { animation-delay: 420ms; }
  html:not(.lt-ready) .hero__dim,
  html:not(.lt-ready) .kit__item,
  html:not(.lt-ready) .hero__copy > * {
    animation-play-state: paused;
  }
}

@keyframes lights-up {
  from { opacity: .7; }
  to { opacity: 0; }
}

@keyframes float-in {
  0% { transform: translateY(160px) rotate(-10deg); }
  55% { transform: translateY(-12px) rotate(5deg); }
  78% { transform: translateY(3px) rotate(-2deg); }
  100% { transform: none; }
}

@keyframes bob {
  50% { transform: translateY(-8px) rotate(2deg); }
}

@keyframes rise {
  from {
    transform: translateY(20px) scale(.98);
    opacity: 0;
  }
}

/* The run sheet */
.prices {
  padding-block: var(--s8);
}

.prices__head {
  display: grid;
  gap: var(--s3);
  margin-bottom: var(--s6);
}

.prices__lede {
  max-width: 56ch;
  font-size: 1.125rem;
  color: var(--muted);
}

.run {
  display: grid;
  gap: var(--s7);
}

@media (min-width: 1000px) {
  .run {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
  }
}

.rungs {
  position: relative;
  display: grid;
  margin: 0;
}

.rungs::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 0.5rem;
  width: 2px;
  background: var(--gold);
  opacity: .5;
}

.rung {
  position: relative;
  display: grid;
  gap: var(--s2);
  padding: 0 0 var(--s6) var(--s6);
}

.rung::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--ground);
}

@media (min-width: 760px) {
  .rung {
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: var(--s5);
  }
  .rung > :not(.rung__when) {
    grid-column: 2;
  }
  .rung__when {
    grid-row: 1 / span 4;
  }
}

.rung__when {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--gold);
}

.rung__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s4);
}

.rung__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.1;
}

.rung__price {
  font-family: var(--display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--accent-text);
  font-variant-numeric: lining-nums;
}

.rung__price--words {
  font-size: 1.5rem;
}

.rung__for {
  font-weight: 700;
}

.rung__what {
  max-width: 62ch;
  color: var(--muted);
}

.rung__lead {
  font-size: 0.9375rem;
  font-weight: 600;
}

.side {
  display: grid;
  gap: var(--s4);
  padding: var(--s5);
  border-radius: 18px;
  background: var(--surface);
}

.side__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--accent-text);
}

.addons {
  display: grid;
  gap: var(--s4);
}

.addon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s1) var(--s3);
}

.addon dt {
  font-weight: 700;
}

.addon__price {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent-text);
}

.addon__what {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  color: var(--muted);
}

.notin {
  display: grid;
  gap: var(--s2);
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Booking */
.booking {
  padding-block: var(--s8);
  background: var(--surface);
}

.step__n {
  border-color: var(--gold);
  color: var(--gold);
}

.step__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
}

.family__title {
  font-family: var(--display);
  font-weight: 400;
  color: var(--accent-text);
}

.foot {
  border-top: 1px solid var(--rule);
}