/* Styles for /romantic-dinners/, /romantic-dinners/fantasy-view/, /romantic-dinners/nymphs-table/, /romantic-dinners/red-chandelier/, /romantic-dinners/stargazer/, /romantic-dinners/whispering-tree/: romantic-dinner-pages, upgrade-gifts.
   Search for "── <name> ──" to find a part.
   Forum Homini website, editable IIS version v016 20261109 081746. Generated with Claude Opus 5.5. */

/* ── romantic-dinner-pages ── */
/* The romantic dinner pages: their shared look.
   Used on: /romantic-dinners/, /romantic-dinners/fantasy-view/, /romantic-dinners/nymphs-table/, /romantic-dinners/red-chandelier/, /romantic-dinners/stargazer/, /romantic-dinners/whispering-tree/.
   Forum Homini website, */
/* The romantic dinner pages (owner, 15 Oct 2026): the landing page and each dinner's own page. */
.rd {
  padding-block: var(--s-8) var(--s-4);
  text-align: center;
}
.rd--after {
  padding-block: var(--s-4) var(--s-8);
}
.rd__h {
  max-inline-size: 22ch;
  margin-inline: auto;
  font-family: var(--face-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.15;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* (6 Nov 2026) color was #f3d792; always overridden by css/site.css, so its value is here now */
.rd__price {
  display: grid;
  gap: var(--s-1);
  margin-block-start: var(--s-4);
  font-family: var(--face-display);
  font-size: var(--fs-m);
  color: #f3d792;
}
.rd__total {
  color: #fff;
}
.rd__rain {
  max-inline-size: 36rem;
  margin-inline: auto;
  padding: var(--s-5) var(--s-6);
  border: 1px solid rgb(243 215 146 / 0.55);
  border-radius: 18px;
  font-size: var(--fs-m);
  color: var(--naledi);
}
.rd__rain-h {
  margin-block-end: var(--s-2);
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: var(--wt-label, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6c27a;
}
.rd .rd__actions {
  margin-block-start: var(--s-6);
}
/* gold pills, as on Dare2Dream */
.rd .rd__actions .ha__link,
.rd .rd__actions .ha__link:visited {
  padding-inline: var(--s-5);
  border-radius: var(--r-pill);
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
}
.rd .rd__actions .ha__link:hover {
  background:
    linear-gradient(
      180deg,
      #fff8e0,
      #f7e2a6 40%,
      #d9a74e 85%);
}
/* no big black gap between the price and the photos (owner: no big black gaps) */
.rd:not(.rd--after) {
  padding-block-end: 0;
}
.rd:not(.rd--after) + .pr {
  padding-block-start: var(--s-5);
}
/* the landing page: one gold button per dinner, under "Choose your spot" */
.rd__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}
.rd__option,
.rd__option:visited {
  display: inline-flex;
  align-items: center;
  min-block-size: 48px;
  padding-inline: var(--s-6);
  border-radius: var(--r-pill);
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
  font-family: var(--face-text);
  font-size: var(--fs-m);
  font-weight: var(--wt-label, 600);
  text-decoration: none;
}
.rd__option:hover {
  background:
    linear-gradient(
      180deg,
      #fff8e0,
      #f7e2a6 40%,
      #d9a74e 85%);
}
.rd__option:focus-visible,
.rd__menu a:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}
.rd__options + .rd__price {
  margin-block-start: var(--s-7);
}
.rd__menu {
  margin-block-start: var(--s-4);
  font-size: var(--fs-m);
  color: var(--naledi);
}
.rd__menu a {
  color: #f3d792;
}
/* "8-course Roots Fine Dining Menu" under the price */
.rd__menu-line {
  color: var(--naledi);
}
/* (owner, 31 Oct 2026: "mustn't be see the menu. It must just be menu"): one word on its own line, under the price lines */
.rd__menu-link,
.rd__menu-link:visited {
  display: block;
  inline-size: fit-content;
  margin: var(--s-3) auto 0;
  color: #f3d792;
  font-family: var(--face-text);
  font-size: var(--fs-l);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
/* the dinner's landscape films after the photos: side by side on a laptop, one under the other on a phone */
.rd--films {
  padding-block: var(--s-4) 0;
}
.rd__films {
  display: grid;
  gap: var(--s-5);
  max-inline-size: 64rem;
  margin-inline: auto;
}
/* owner (15 Oct 2026): "We have to change the videos at the Romantic Dinners for each one to be on its own. I took them in
   Landscape no reason for them to be next to each other": one under the other, each wide, so each plays on its own as it
   comes on screen */
.rd__films {
  max-inline-size: 56rem;
  row-gap: var(--s-7);
}
@media (min-width: 900px) {
  /* an upright film beside a landscape one: the same height, each in its own shape */
  .rd__films--two:has(.rd__film--upright) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .rd__films--two:has(.rd__film--upright) .rd__video {
    inline-size: auto;
    block-size: clamp(320px, 52vh, 460px);
  }
}
.rd__film {
  margin: 0;
}
.rd__film--upright .rd__video {
  aspect-ratio: 9 / 16;
}
@media (max-width: 899px) {
  .rd__film--upright {
    inline-size: min(100%, 340px);
    margin-inline: auto;
  }
}
.rd__video {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: var(--night);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.8);
}
.rd__caption {
  margin-block-end: var(--s-3);
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: var(--wt-label, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6c27a;
}
:is(html[data-page^="/romantic-dinners/"], html[data-page="/forest-breakfast/"]) .hero--over {
  --pull: 0px;
  margin-block-start: 0;
}
@media (min-width: 641px) {
  :is(html[data-page^="/romantic-dinners/"], html[data-page="/forest-breakfast/"]) .hero--section .hero__media {
    --media-h: max(320px, min(66svh, 720px));
  }
}
html[data-page="/forest-breakfast/"] .hero__media {
  block-size: auto !important;
  aspect-ratio: 4 / 3;
  inline-size: min(100%, calc((100svh - var(--header-h) - 24px) * 4 / 3));
  margin-inline: auto;
}
html[data-page="/forest-breakfast/"] .hero__media :is(.hero__frame, .hero__drift, .hero__art) {
  position: absolute;
  inset: 0;
  transform: none !important;
  animation: none !important;
}
html[data-page="/forest-breakfast/"] .hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* owner (17 Oct 2026): what the Romantic Dinner Upgrade includes: a gold label (rule 7), the list and the wine line in white
   reading text (rule 5), centred under the price */
.rd .rd__breakdown--next {
  margin-block-start: 0;
}
.rd__upgrade {
  max-inline-size: 30rem;
  margin: var(--s-5) auto 0;
  text-align: center;
}
.rd__upgrade-h {
  margin-block-end: var(--s-2);
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: var(--wt-label, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6c27a;
}
.rd__upgrade-list {
  display: grid;
  gap: 0.15em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--face-text);
  font-size: var(--fs-m);
  line-height: 1.5;
  color: #f6efe4;
}
.rd__swap {
  margin-block-start: var(--s-3);
  font-family: var(--face-text);
  font-size: var(--fs-s);
  line-height: 1.5;
  color: #cfc6b8;
}
/* owner (21 Oct 2026, the even-gaps rule): no big black stretch above "If it rains", nor between the Romantic Dinners carousel
   and the price under it (the carousel and the section above already leave the gap) */
main .rd.rd--after.rd--after {
  padding-block-start: 0 !important;
}
main .rdc ~ .rd:not(.rd--after) {
  padding-block-start: 0 !important;
}
main .bf:has(~ .rd--after) {
  padding-block-end: 0;
}
main .rdc > section.jb {
  padding-block-end: 0 !important;
  margin-block-end: 0 !important;
}
main .bf:has(~ .rd--after) + script + .rd--after .rd__rain {
  padding-block-start: 0 !important;
}

/* ── upgrade-gifts ── */
/* Upgrade gift buttons on the romantic dinner pages.
   Used on: /romantic-dinners/, /romantic-dinners/fantasy-view/, /romantic-dinners/nymphs-table/, /romantic-dinners/red-chandelier/, /romantic-dinners/stargazer/, /romantic-dinners/whispering-tree/.
   Forum Homini website, */
.gifts[data-c-upgrade-gifts] {
  max-inline-size: 60rem;
  margin: var(--s-6) auto 0;
  text-align: center;
}
.gifts__h[data-c-upgrade-gifts] {
  margin-block-end: var(--s-4);
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: var(--wt-label, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6c27a;
}
.gifts__row[data-c-upgrade-gifts] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* each gift: a dark card with a gold hairline and a soft warm glow from the top */
.gifts__item[data-c-upgrade-gifts] {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--s-2);
  inline-size: 10.5rem;
  padding: var(--s-4) var(--s-3) var(--s-4);
  border: 1px solid rgb(230 194 122 / 0.45);
  border-radius: 18px;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgb(243 215 146 / 0.16),
      transparent 70%),
    rgb(255 255 255 / 0.02);
  box-shadow: 0 14px 30px -18px rgb(0 0 0 / 0.9);
  transition: opacity 600ms ease calc(var(--i) * 140ms), translate 600ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 140ms);
}
.is-waiting[data-c-upgrade-gifts] .gifts__item[data-c-upgrade-gifts] {
  opacity: 0;
  translate: 0 14px;
}
/* the gold drawing in a round, glowing frame */
.gifts__icon[data-c-upgrade-gifts] {
  display: grid;
  place-items: center;
  inline-size: 60px;
  block-size: 60px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(243 215 146 / 0.18),
      rgb(243 215 146 / 0.03) 70%);
  box-shadow: inset 0 0 0 1px rgb(243 215 146 / 0.55), 0 0 22px rgb(243 215 146 / 0.18);
}
.gifts__icon[data-c-upgrade-gifts] svg[data-c-upgrade-gifts] {
  fill: none;
  stroke: #f3d792;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gifts__text[data-c-upgrade-gifts] {
  font-family: var(--face-text);
  font-size: var(--fs-m);
  line-height: 1.35;
  color: #f6efe4;
}
.gifts__swap[data-c-upgrade-gifts] {
  max-inline-size: 34rem;
  margin: var(--s-4) auto 0;
  font-family: var(--face-text);
  font-size: var(--fs-s);
  line-height: 1.5;
  color: #cfc6b8;
}
@media (max-width: 640px) {
  .gifts__row[data-c-upgrade-gifts] {
    gap: var(--s-2);
  }
  .gifts__item[data-c-upgrade-gifts] {
    inline-size: calc((100% - 2 * var(--s-2)) / 3);
    padding: var(--s-3) var(--s-1);
  }
  .gifts__icon[data-c-upgrade-gifts] {
    inline-size: 50px;
    block-size: 50px;
  }
  .gifts__text[data-c-upgrade-gifts] {
    font-size: var(--fs-s);
  }
}