/* The parts used on pages across the site, one after the other. Search for "── <name> ──" to find a part:
     menu-night
     menu-pages
     legal-clause
     eat-events-buttons
     hero-surface
     home-journey
     home-reviews
     home-chapters
     events-story
     home-gallery-gates
     art-picture
     reflection-title
     way-out
     not-found-page
     award-badge
     layer-band
     filmstrip
     fire-glow
     hero-inner
     end-strip
     wall-label
     photo
     downloads
     copy-coordinates
     contact-block
     enquire-band
     home-actions
     plate-carousel
     roots-menu
     jewellery-box
     supplier-credit
     photo-river
     also-like
     restaurant-menu-page
     related-policies
     legal-doc
     policy-note
     booking-terms
     enquiry-form
     questions
     jump-bar
     butterfly-story
     suite-nav
     feature-list
     arrow-fold
     gallery-tiles
     check-dates
   Forum Homini website, editable IIS version v025 20261109 114912. Generated with Claude Opus 5.5. */

/* ── menu-night ── */
/* Night colours of the restaurant menus.
   Used on: /dare2dream-menu/, /roots-drinks/, /roots-menu/.
   Forum Homini website, */
.mn[data-c-menu-night] {
  display: flex;
  justify-content: center;
  margin-block-end: var(--s-4);
}
/* (owner, 26 Oct 2026: "all the bars must now be narrow … the Dare to Dream menu, it still looks like the thick gold buttons"):
     the switch in the slim size of the website (36 px in all) */
.mn__switch[data-c-menu-night] {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgb(230 194 122 / 0.5);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.35);
}
.mn__btn[data-c-menu-night] {
  min-block-size: 28px;
  min-inline-size: 76px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--face-text);
  font-size: 0.875rem;
  font-weight: 600;
  color: #f6efe4;
  cursor: pointer;
}
.mn__btn[data-c-menu-night][aria-pressed=true] {
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
}
.mn__btn[data-c-menu-night]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 2px;
}

/* ── menu-pages ── */
/* The three menu pages (Roots Menu, Roots Drinks, Dare2Dream Menu): headings and night look.
   Used on: /dare2dream-menu/, /roots-drinks/, /roots-menu/.
   Forum Homini website, */
/* ── both ways, on the QR pages: nothing smaller than 15 px; names large ── */
html[data-menu-page] .dm__jump-h,
html[data-menu-page] .dm__group-h,
html[data-menu-page] .dm__itsub,
html[data-menu-page] .dm__foot,
html[data-menu-page] .rm__foot,
html[data-menu-page] .rm__note,
html[data-menu-page] .rm__sub,
html[data-menu-page] .dm__sub {
  font-size: 0.9375rem;
}
html[data-menu-page] .dm__jump-row,
html[data-menu-page] .dm__desc,
html[data-menu-page] .dm__note,
html[data-menu-page] .dm__intro,
html[data-menu-page] .dm__part-intro,
html[data-menu-page] .rm__desc,
html[data-menu-page] .rm__line,
html[data-menu-page] .rm__extra,
html[data-menu-page] .rm__chef {
  font-size: 1.0625rem !important;
  line-height: 1.55 !important;
}
html[data-menu-page] .dm__name,
html[data-menu-page] .dm__price {
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
}
html[data-menu-page] .rm__dish {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
}
/* ── Night: warm near-black paper, light words, gold that is bright enough ── */
/* (6 Nov 2026) box-shadow was inset 0 0 0 1px rgb(230 194 122 / 0.35); always overridden by css/site.css, so its value is here now */
html[data-menu-night] .dm__paper,
html[data-menu-night] .rm__paper {
  background: #17110c;
  color: #f6efe4;
  box-shadow: none;
}
html[data-menu-night] .dm__title,
html[data-menu-night] .dm__part-h,
html[data-menu-night] .dm__sec-h,
html[data-menu-night] .rm__title,
html[data-menu-night] .rm__title span,
html[data-menu-night] .rm__part-h {
  color: #f6efe4 !important;
  -webkit-text-fill-color: #f6efe4 !important;
}
html[data-menu-night] .dm__title .dm__gold,
html[data-menu-night] .rm__title .rm__gold,
html[data-menu-night] .dm__group-h,
html[data-menu-night] .dm__itsub,
html[data-menu-night] .dm__jump-h,
html[data-menu-night] .rm__note,
html[data-menu-night] .rm__chef {
  color: #e6c27a !important;
  -webkit-text-fill-color: #e6c27a !important;
}
html[data-menu-night] .dm__sec-h {
  background: #2a1f16;
  color: #f3d792 !important;
  -webkit-text-fill-color: #f3d792 !important;
}
html[data-menu-night] .dm__name,
html[data-menu-night] .dm__price,
html[data-menu-night] .rm__dish,
html[data-menu-night] .dm__part-intro,
html[data-menu-night] .dm__sub,
html[data-menu-night] .rm__sub {
  color: #fbf6ee;
}
html[data-menu-night] .dm__desc,
html[data-menu-night] .dm__intro,
html[data-menu-night] .dm__note,
html[data-menu-night] .rm__desc,
html[data-menu-night] .rm__line,
html[data-menu-night] .rm__extra,
html[data-menu-night] .dm__foot,
html[data-menu-night] .rm__foot {
  color: #ddd0bc;
}
/* (26 Oct 2026) the Butterfly drinks' highlighted block at night: warm dark with the gold frame; the Dare2Dream memoir line */
html[data-menu-night] .dm__item--bf {
  background: #2a1840;
  border-color: #b98cff !important;
}
html[data-menu-night] .dm__bf,
html[data-menu-night] .dm__bf a {
  color: #d9c2ff;
}
html[data-menu-night] .rm__memoir {
  color: #ddd0bc;
}
html[data-menu-night] .dm__jump a {
  color: #f6efe4;
  text-decoration-color: rgb(246 239 228 / 0.4) !important;
}
html[data-menu-night] .dm__item,
html[data-menu-night] .dm__foot,
html[data-menu-night] .rm__foot {
  border-color: rgb(246 239 228 / 0.14) !important;
}
html[data-menu-night] .dm__sub::before,
html[data-menu-night] .dm__sub::after,
html[data-menu-night] .rm__sub::before,
html[data-menu-night] .rm__sub::after {
  background: rgb(230 194 122 / 0.55);
}
html[data-menu-night] .dm__foot span,
html[data-menu-night] .rm__foot span {
  color: #c9953f !important;
}
/* (26 Oct 2026) at night the hotel's brown logo turns light gold, so it reads on the dark paper */
html[data-menu-night] .rm__hotel,
html[data-menu-night] .dm__hotel {
  filter: brightness(0) invert(0.88) sepia(0.5) saturate(1.6) hue-rotate(-8deg);
}
/* Day: the gold title word and the grape lines a deeper gold (AAA on the paper) */
html[data-menu-page]:not([data-menu-night]) .rm__paper .rm__title .rm__gold,
html[data-menu-page]:not([data-menu-night]) .dm__paper .dm__title .dm__gold {
  color: #6b4a14 !important;
  -webkit-text-fill-color: #6b4a14 !important;
}
html[data-menu-page]:not([data-menu-night]) .dm__paper .dm__itsub {
  color: #5c3f10 !important;
}
/* Night: the gold title word bright; the "Dinner" band dark with gold words */
html[data-menu-night][data-menu-page] .rm__paper .rm__title .rm__gold,
html[data-menu-night][data-menu-page] .dm__paper .dm__title .dm__gold {
  color: #e6c27a !important;
  -webkit-text-fill-color: #e6c27a !important;
}
html[data-menu-night][data-menu-page] .rm__paper .rm__part .rm__part-h {
  background: #2a1f16;
  color: #f3d792 !important;
  -webkit-text-fill-color: #f3d792 !important;
}

/* ── legal-clause ── */
/* Clauses on the legal pages.
   Used on: /disclaimer/, /refund-cancellation-policy/, /terms-and-conditions/.
   Forum Homini website, */
.clause[data-c-legal-clause] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s-4);
  padding-block: var(--s-7);
}
.clause--head[data-c-legal-clause] {
  padding-block: 0 var(--s-5);
}
.clause[data-c-legal-clause]:first-child {
  padding-block-start: 0;
}
.clause[data-c-legal-clause] + .clause[data-c-legal-clause]:not(.clause--head) {
  border-block-start: 1px solid var(--hairline);
}
/* Phone and tablet: the number on a hairline above the text */
.clause__n[data-c-legal-clause] {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--face-display);
  font-size: var(--fs-h3);
  font-weight: var(--wt-display);
  font-stretch: 100%;
  line-height: 1;
  color: var(--rust);
}
.clause__n[data-c-legal-clause]::after {
  content: "";
  flex: 1;
  border-block-start: 1px solid var(--hairline);
}
.clause__body[data-c-legal-clause] {
  min-inline-size: 0;
}
@media (max-width: 1024px) {
  .clause[data-c-legal-clause] + .clause[data-c-legal-clause]:not(.clause--head) {
    border-block-start: 0;
  }
}
.clause__body[data-c-legal-clause] > * + * {
  margin-block-start: var(--s-5);
}
@media (min-width: 1025px) {
  .clause[data-c-legal-clause] {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    padding-block: var(--s-8);
  }
  .clause--head[data-c-legal-clause] {
    padding-block: 0 var(--s-6);
  }
  .clause[data-c-legal-clause]:first-child {
    padding-block-start: var(--s-3);
  }
  .clause__n[data-c-legal-clause] {
    grid-column: 1 / span 2;
    align-self: start;
    font-size: var(--fs-xl);
    line-height: 0.8;
    letter-spacing: -0.02em;
  }
  .clause__n[data-c-legal-clause]::after {
    content: none;
  }
  .clause__body[data-c-legal-clause] {
    grid-column: 3 / span 7;
  }
}

/* ── eat-events-buttons ── */
/* Buttons on the Eat and Events pages.
   Used on: /eat/, /events/.
   Forum Homini website, */
/* black only (owner, 20 Oct 2026: "remember only black background"), the ring filling the screen under the top bar */
/* (6 Nov 2026) min-block-size was 100svh; always overridden by css/site.css, so its value is here now */
.hb[data-c-eat-events-buttons] {
  background: #000;
  --room-deep: #000;
  padding-block-start: var(--header-h, 80px);
  min-block-size: 0;
}
.hb__actions[data-c-eat-events-buttons] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-block-start: var(--s-4);
  padding-inline: var(--margin);
}
/* (6 Nov 2026) min-block-size was 52px; always overridden by css/site.css, so its value is here now */
.hb__cta[data-c-eat-events-buttons],
.hb__cta[data-c-eat-events-buttons]:visited {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: 26px;
  border: 1.5px solid #e6c27a;
  border-radius: 999px;
  color: var(--naledi);
  font-weight: 600;
  text-decoration: none;
}
.hb__cta--primary[data-c-eat-events-buttons],
.hb__cta--primary[data-c-eat-events-buttons]:visited {
  border-color: transparent;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
}

/* ── hero-surface ── */
/* Home: landing photo.
   Used on: /.
   Forum Homini website, */
.hh[data-c-hero-surface] {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-block-size: calc(100svh - var(--hero-top) - var(--dock-h));
  margin-block-start: calc(-1 * var(--header-h));
  overflow: clip;
  background-color: var(--night);
  color: var(--naledi);
}
@media (max-height: 500px) and (orientation: landscape) {
  .hh[data-c-hero-surface] {
    margin-block-start: 0;
  }
}
.hh__media[data-c-hero-surface] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0% 0% 0% 0% round 0px);
  will-change: clip-path, transform;
}
.hh__media[data-c-hero-surface] .hh__art {
  position: absolute;
  inset: 0;
  transform-origin: 50% 80%;
}
@media (min-width: 641px) {
  .hh__media[data-c-hero-surface] .hh__art img {
    object-position: 50% 55% !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hh__media[data-c-hero-surface] .hh__art img {
    transform-origin: 52% 68%;
    animation: hh-breathe 9s ease-in-out 1.5s infinite alternate both;
  }
  @keyframes hh-breathe {
    0% {
      scale: 1;
    }
    100% {
      scale: 1.25;
    }
  }
}
/* (17 Oct 2026, no photos before it) the film's first frame shows at once; it starts moving when it can */
.hh__film[data-c-hero-surface] {
  opacity: 1;
}
.hh__film[data-c-hero-surface].is-playing {
  opacity: 1;
}
.hh__video[data-c-hero-surface] {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.hh__swap[data-c-hero-surface] {
  position: absolute;
  inset: 0;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hh__swap[data-c-hero-surface] {
    animation: hh-swap 8s ease-in-out infinite both;
  }
  @keyframes hh-swap {
    0%, 37.5% {
      opacity: 0;
    }
    50%, 87.5% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
@media (min-width: 641px) {
  .hh__media[data-c-hero-surface] .hh__swap[data-c-hero-surface] .hh__art img {
    object-position: 50% 40% !important;
  }
}
/* Version 5 (owner, 24 Oct 2026: "with that shading, how he did"): Hercules's shading, darker towards the sides and the
     corners, laid over our fade */
.hh__shade[data-c-hero-surface] {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 55%,
      rgb(0 0 0 / 0.05),
      rgb(0 0 0 / 0.55)),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--night) 30%, transparent),
      transparent 14%),
    linear-gradient(
      to top,
      color-mix(in srgb, var(--night) 92%, transparent) 0%,
      color-mix(in srgb, var(--night) 72%, transparent) 30%,
      color-mix(in srgb, var(--night) 22%, transparent) 52%,
      transparent 68%);
  pointer-events: none;
}
.hh__dim[data-c-hero-surface] {
  position: absolute;
  inset: 0;
  background-color: var(--night);
  opacity: 0;
  pointer-events: none;
}
/* Owner (7 Oct 2026, "should the name not move up higher"): the name and its line stand in the top third, over the
     roof, and the three buttons at the foot of the photo; the walkway shows between them. (Before: all three together
     at the foot; copy in copy-edit/backups/site-files-2026-10-07/HeroSurface.name-in-middle.astro.) */
.hh__body[data-c-hero-surface] {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: grid;
  justify-items: center;
  padding-inline: var(--margin);
  padding-block: calc(var(--header-h) + var(--s-2)) clamp(var(--s-6), 6svh, var(--s-8));
  text-align: center;
}
@media (min-width: 641px) {
  .hh__body[data-c-hero-surface] {
    padding-block-end: calc(clamp(var(--s-4), 2.5svh, var(--s-5)) + 78px) !important;
  }
}
.hh__lift[data-c-hero-surface] {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-block-size: 100%;
}
.hh__name[data-c-hero-surface] {
  margin: 0;
  font-family: var(--face-display);
  font-size: clamp(3.5rem, 0.5rem + 9vw, 10rem);
  font-weight: 600;
  font-stretch: 100%;
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--naledi);
  text-wrap: nowrap;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.35);
}
.hh__w[data-c-hero-surface] {
  display: inline-block;
  vertical-align: top;
}
/* the hand-drawn logo: as wide as the old name, a soft shadow so it stays clear on the film */
.hh__name--drawn[data-c-hero-surface] {
  line-height: 1;
  text-align: center;
}
.hh__logo[data-c-hero-surface] {
  display: block;
  inline-size: min(84vw, 760px);
  block-size: auto;
  filter: drop-shadow(0 2px 14px rgb(0 0 0 / 0.55));
}
.hh__w[data-c-hero-surface] > span[data-c-hero-surface] {
  display: inline-block;
}
.hh__line[data-c-hero-surface] {
  margin-block-start: var(--s-5);
  max-inline-size: 36ch;
  font-family: var(--face-text);
  font-size: var(--fs-l);
  font-weight: var(--wt-label);
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--naledi);
  text-wrap: balance;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6), 0 0 18px rgb(0 0 0 / 0.45);
}
/* Owner: "the info below the name should move down to just above the buttons": the line drops to the foot with them;
     then (16 Oct 2026) "lets try to move it down to just above boutique hotel": the name drops too, just above the line,
     so the top of the photo is clear */
.hh__lift[data-c-hero-surface] .hh__name[data-c-hero-surface] {
  margin-block-start: auto;
}
.hh__lift[data-c-hero-surface] .hh__line[data-c-hero-surface] {
  margin-block-start: var(--s-4);
  padding-block-start: 0;
}
.hh__lift[data-c-hero-surface] .hh__doors[data-c-hero-surface] {
  margin-block-start: var(--s-5);
}
.hh__doors[data-c-hero-surface] {
  margin-block-start: var(--s-7);
}
.hh__doors[data-c-hero-surface] > ul[data-c-hero-surface] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hh__door[data-c-hero-surface],
.hh__door[data-c-hero-surface]:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 56px;
  padding-inline: var(--s-6);
  border: 0;
  border-radius: var(--r-pill);
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.6);
  color: #1d1405;
  font-weight: var(--wt-label, 600);
  font-size: var(--fs-m);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color var(--t-micro, 120ms) linear, color var(--t-micro, 120ms) linear;
}
.hh__pick[data-c-hero-surface] {
  position: relative;
}
.hh__pick[data-c-hero-surface] summary[data-c-hero-surface] {
  cursor: pointer;
  list-style: none;
  gap: var(--s-2);
}
.hh__pick[data-c-hero-surface] summary[data-c-hero-surface]::-webkit-details-marker {
  display: none;
}
.hh__caret[data-c-hero-surface] {
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
}
.hh__pick[data-c-hero-surface][open] .hh__caret[data-c-hero-surface] {
  rotate: 225deg;
  translate: 0 2px;
}
.hh__menu[data-c-hero-surface] {
  position: absolute;
  z-index: 3;
  inset-block-end: calc(100% + var(--s-2));
  inset-inline-start: 50%;
  translate: -50% 0;
  display: grid;
  min-inline-size: max(100%, 15rem);
  margin: 0;
  padding: var(--s-2);
  list-style: none;
  border-radius: 18px;
  background: var(--naledi);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.6);
  text-align: start;
}
@media (max-width: 420px) {
  .hh__menu[data-c-hero-surface] {
    min-inline-size: 13rem;
  }
  .hh__doors[data-c-hero-surface] li[data-c-hero-surface]:last-child .hh__menu[data-c-hero-surface] {
    inset-inline: auto 0;
    translate: none;
  }
}
.hh__menu[data-c-hero-surface] a[data-c-hero-surface],
.hh__menu[data-c-hero-surface] a[data-c-hero-surface]:visited {
  display: block;
  padding: var(--s-3) var(--s-4);
  border-radius: 12px;
  color: var(--night);
  font-weight: var(--wt-label, 600);
  text-decoration: none;
  white-space: nowrap;
}
.hh__menu[data-c-hero-surface] a[data-c-hero-surface]:hover,
.hh__menu[data-c-hero-surface] a[data-c-hero-surface]:focus-visible {
  background: var(--copper);
  color: var(--on-copper);
}
/* as Enquire's hover: a lighter gold */
.hh__door[data-c-hero-surface]:hover,
.hh__pick[data-c-hero-surface][open] .hh__door[data-c-hero-surface] {
  background:
    linear-gradient(
      180deg,
      #fff8e0,
      #f7e2a6 40%,
      #d9a74e 85%);
  color: #1d1405;
}
.hh__door[data-c-hero-surface]:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .hh__doors[data-c-hero-surface] {
    margin-block-start: var(--s-6);
    inline-size: min(100%, 26rem);
    margin-inline: auto;
  }
  /* Owner (7 Oct 2026): "the bottom buttons are too big on the phone": one row of three smaller buttons (were two
       full-width rows, 56px tall); still 44px tall, a comfortable tap */
  .hh__doors[data-c-hero-surface] > ul[data-c-hero-surface] {
    flex-wrap: nowrap;
    gap: var(--s-2);
  }
  .hh__door[data-c-hero-surface] {
    min-block-size: 44px;
    padding-inline: 14px;
    font-size: var(--fs-s);
    white-space: nowrap;
  }
  .hh__pick[data-c-hero-surface] summary[data-c-hero-surface] {
    gap: 6px;
  }
  /* the lists open centred over the whole row, so they never run off the screen's edge */
  .hh__doors[data-c-hero-surface] > ul[data-c-hero-surface] {
    position: relative;
  }
  .hh__pick[data-c-hero-surface] {
    position: static;
  }
}
@media (max-width: 374px) {
  .hh__doors[data-c-hero-surface] > ul[data-c-hero-surface] {
    gap: 6px;
  }
  .hh__door[data-c-hero-surface] {
    padding-inline: 10px;
    font-size: var(--fs-s);
  }
}
/* The floating copy: a frosted night pill holding the same three buttons */
.hh__float[data-c-hero-surface] {
  position: fixed;
  margin: 0;
  inset-block-end: calc(var(--dock-h) + env(safe-area-inset-bottom) + var(--s-3));
  inset-inline-start: 50%;
  z-index: var(--z-dock);
  padding: 6px;
  border-radius: var(--r-pill);
  background: none;
  visibility: hidden;
  opacity: 0;
  translate: -50% 12px;
  transition:
    opacity 250ms ease,
    translate 250ms ease,
    visibility 0s linear 250ms;
}
.hh__float[data-c-hero-surface].is-shown {
  visibility: visible;
  opacity: 1;
  translate: -50% 0;
  transition:
    opacity 250ms ease,
    translate 250ms ease,
    visibility 0s;
}
/* Version 3 (owner, 20 Oct 2026, her choice "Sleep · Eat · Events + ☰" in the top bar on every page): the floating copy
     of the same three buttons is no longer needed (it repeated the top bar on phones) */
.hh__float[data-c-hero-surface],
.hh__float[data-c-hero-surface].is-shown {
  display: none !important;
}
.hh__float[data-c-hero-surface] > ul[data-c-hero-surface] {
  flex-wrap: nowrap;
  gap: var(--s-2);
}
.hh__float[data-c-hero-surface] .hh__door[data-c-hero-surface] {
  min-block-size: 44px;
  padding-inline: var(--s-5);
  font-size: var(--fs-s);
  white-space: nowrap;
}
@media (min-width: 641px) {
  .hh__float[data-c-hero-surface] {
    inset-block-end: calc(env(safe-area-inset-bottom) + var(--s-5));
  }
}
@media (max-width: 640px) {
  .hh__float[data-c-hero-surface] {
    inline-size: max-content;
    max-inline-size: calc(100% - 2 * var(--margin));
  }
  .hh__float[data-c-hero-surface] .hh__door[data-c-hero-surface] {
    padding-inline: 14px;
  }
}
@media (max-width: 374px) {
  .hh__float[data-c-hero-surface] .hh__door[data-c-hero-surface] {
    padding-inline: 10px;
  }
}
@media print {
  .hh__float[data-c-hero-surface] {
    display: none;
  }
}
/* The scroll cue: a hairline that breathes, bottom centre (tablet up; phones have the dock) */
.hh__cue[data-c-hero-surface],
.hh__cuearrow[data-c-hero-surface] {
  display: none;
}
@media (max-width: 640px) {
  .hh__name[data-c-hero-surface] {
    font-size: min(19vw, 12svh);
    line-height: 0.88;
  }
  .hh__w[data-c-hero-surface] {
    display: block;
  }
  .hh__line[data-c-hero-surface] {
    margin-block-start: var(--s-4);
    max-inline-size: 26ch;
  }
  .hh__dot[data-c-hero-surface] {
    display: none;
  }
  .hh__part[data-c-hero-surface] {
    display: block;
  }
  .hh__lift[data-c-hero-surface] .hh__doors[data-c-hero-surface] {
    inline-size: min(100%, 26rem);
    margin-block-start: var(--s-4);
  }
  /* Owner: "especially on the phone": the buttons close to the foot of the photo */
  .hh__body[data-c-hero-surface] {
    padding-block-end: calc(var(--s-4) + 96px);
  }
}
@media (min-width: 641px) {
  .hh__line[data-c-hero-surface] {
    max-inline-size: none;
  }
}
/* (owner, 31 Oct 2026: "the scroll down to swirl around. It's not enough attention … even on the phone version … slightly bigger"):
     a gold ring that swirls round an arrow, on laptop and phone */
/* (6 Nov 2026) inline-size was 92px; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) block-size was 92px; always overridden by css/site.css, so its value is here now */
.hh__scroll[data-c-hero-surface] {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: calc(50% - 46px);
  z-index: 3;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
}
@media (min-width: 641px) {
  .hh__body[data-c-hero-surface] {
    padding-block-end: 112px !important;
  }
}
.hh__cue[data-c-hero-surface],
.hh__cuearrow[data-c-hero-surface] {
  display: block;
  position: absolute;
  inset-block-start: 23px;
  inset-inline-start: 23px;
  inline-size: 46px;
  block-size: 46px;
  pointer-events: none;
}
/* (6 Nov 2026) inline-size was 46px; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) block-size was 46px; always overridden by css/site.css, so its value is here now */
.hh__scroll[data-c-hero-surface]::before {
  content: "";
  position: absolute;
  inset-block-start: 23px;
  inset-inline-start: 23px;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  border: 1px solid #f3d792;
  opacity: 0;
  pointer-events: none;
}
.hh__cue[data-c-hero-surface] {
  border-radius: 50%;
  background: #e6c27a;
  -webkit-mask-image:
    radial-gradient(
      closest-side,
      transparent 80%,
      #000 84%);
  mask-image:
    radial-gradient(
      closest-side,
      transparent 80%,
      #000 84%);
}
.hh__cuearrow[data-c-hero-surface] {
  background: linear-gradient(#f3d792, #f3d792) 50% 40% / 2px 13px no-repeat;
}
.hh__cuearrow[data-c-hero-surface]::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 58%;
  inline-size: 8px;
  block-size: 8px;
  border-inline-end: 2px solid #f3d792;
  border-block-end: 2px solid #f3d792;
  transform: translate(-50%, -50%) rotate(45deg);
}
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .hh__name[data-c-hero-surface] {
    font-size: min(18vw, 11svh);
    line-height: 0.88;
  }
  .hh__w[data-c-hero-surface] {
    display: block;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hh[data-c-hero-surface] {
    min-block-size: calc(100svh - var(--header-h));
  }
  .hh__name[data-c-hero-surface] {
    font-size: min(11vw, 24svh);
  }
  .hh__w[data-c-hero-surface] {
    display: inline-block;
  }
  .hh__body[data-c-hero-surface] {
    padding-block: var(--s-5) var(--s-5);
  }
  .hh__line[data-c-hero-surface] {
    margin-block-start: var(--s-3);
  }
  .hh__lift[data-c-hero-surface] .hh__doors[data-c-hero-surface] {
    margin-block-start: var(--s-4);
  }
  .hh__scroll[data-c-hero-surface] {
    display: none;
  }
}
@layer effects {
  @media screen and (prefers-reduced-motion: no-preference) {
    /* Version 5: the name rises with Hercules's movement (script below) */
    .hh__w--2[data-c-hero-surface] > span[data-c-hero-surface] {
      animation-delay: 160ms;
    }
    .hh__line[data-c-hero-surface] {
      animation: hh-fade 1s var(--ease-settle) 420ms both;
    }
    .hh__lift[data-c-hero-surface] .hh__doors[data-c-hero-surface] {
      animation: hh-fade 1s var(--ease-settle) 580ms both;
    }
    .hh__cue[data-c-hero-surface] {
      animation: hh-cue-pulse 2s ease-in-out infinite;
    }
    .hh__scroll[data-c-hero-surface]::before {
      animation: hh-cue-halo 2s ease-out infinite;
    }
    .hh__cuearrow[data-c-hero-surface] {
      animation: hh-cue-drop 2s ease-in-out infinite;
    }
    @keyframes hh-cue-pulse {
      0%, 100% {
        scale: 1;
        opacity: 0.75;
      }
      50% {
        scale: 1.12;
        opacity: 1;
      }
    }
    @keyframes hh-cue-halo {
      0% {
        scale: 1;
        opacity: 0.8;
      }
      100% {
        scale: 1.9;
        opacity: 0;
      }
    }
    @keyframes hh-cue-drop {
      0%, 100% {
        translate: 0 -2px;
      }
      50% {
        translate: 0 3px;
      }
    }
    @keyframes hh-rise {
      from {
        opacity: 0;
        filter: blur(16px);
        translate: 0 0.1em;
      }
    }
    @keyframes hh-fade {
      from {
        opacity: 0;
        translate: 0 14px;
      }
    }
  }
}
@media (forced-colors: active) {
  .hh__shade[data-c-hero-surface],
  .hh__dim[data-c-hero-surface],
  .hh__scroll[data-c-hero-surface] {
    display: none;
  }
}
@media print {
  .hh[data-c-hero-surface] {
    margin-block-start: 0;
  }
}
/* owner (15 Oct 2026): "Can we make the size of the floating buttons the same size as enquire. The bottom buttons look
     very big" / "use the same font size as Enquire": the Enquire button's height, padding and lettering, on the photo
     and floating, on every screen (these come last, so they win over the sizes above) */
.hh[data-c-hero-surface] .hh__door[data-c-hero-surface],
.hh[data-c-hero-surface] .hh__door[data-c-hero-surface]:visited,
.hh__float[data-c-hero-surface] .hh__door[data-c-hero-surface],
.hh__float[data-c-hero-surface] .hh__door[data-c-hero-surface]:visited {
  min-block-size: 44px;
  padding-inline: 20px 16px;
  font-family: var(--face-text);
  font-size: var(--fs-button);
  font-weight: var(--wt-label);
  line-height: 1;
  letter-spacing: var(--tr-button);
}
.hh[data-c-hero-surface] .hh__pick[data-c-hero-surface] summary[data-c-hero-surface],
.hh__float[data-c-hero-surface] .hh__pick[data-c-hero-surface] summary[data-c-hero-surface] {
  gap: 6px;
}
@media (max-width: 374px) {
  .hh[data-c-hero-surface] .hh__door[data-c-hero-surface],
  .hh__float[data-c-hero-surface] .hh__door[data-c-hero-surface] {
    padding-inline: 12px 10px;
  }
}
@media (max-width: 640px) {
  .hh__film[data-c-hero-surface] {
    opacity: 1;
    transition: none;
  }
  .hh__swap[data-c-hero-surface],
  .hh__media[data-c-hero-surface] .hh__art:not(.hh__film) {
    visibility: hidden;
  }
  .hh__lift[data-c-hero-surface] .hh__name[data-c-hero-surface] {
    font-size: 12.4vw;
    line-height: 1;
    white-space: nowrap;
  }
  .hh__lift[data-c-hero-surface] .hh__w[data-c-hero-surface] {
    display: inline-block;
  }
  .hh__lift[data-c-hero-surface] .hh__line[data-c-hero-surface] {
    max-inline-size: none;
    font-size: var(--fs-s);
    letter-spacing: 0.07em;
    white-space: nowrap;
  }
  .hh__lift[data-c-hero-surface] .hh__dot[data-c-hero-surface] {
    display: inline;
  }
  .hh__lift[data-c-hero-surface] .hh__part[data-c-hero-surface] {
    display: inline;
  }
}

/* ── home-journey ── */
/* Home: the journey.
   Used on: /.
   Forum Homini website, */
.jr[data-c-home-journey] {
  background: var(--night);
  color: var(--naledi);
}
/* owner (20 Oct 2026): "I like the space before sleep between the walk video and sleep … Keep format the same": the same
     black space (half a section gap, as above Sleep) between Sleep, Eat and Events */
.jr__scene[data-c-home-journey] + .jr__scene[data-c-home-journey] {
  margin-block-start: calc(var(--gap-section) / 2);
}
.jr__scene[data-c-home-journey] {
  position: relative;
  scroll-margin-block-start: calc(-1 * (var(--header-h, 80px) + var(--sticky-h, 0px) + 16px));
}
.jr__stage[data-c-home-journey] {
  position: relative;
  display: grid;
}
.jr__shot[data-c-home-journey] {
  position: relative;
  display: block;
  block-size: 100svh;
  min-block-size: 480px;
  overflow: hidden;
  color: inherit;
}
/* a photo whose name sits high in the frame (the Dare2Dream neon sign) is held at its top, so the name shows */
.jr__shot--pos[data-c-home-journey] .art__img {
  object-position: var(--jr-pos);
  block-size: 100% !important;
}
.jr__shot[data-c-home-journey] .jr__art {
  position: absolute;
  inset: 0;
}
html.jr-on .jr__scene[data-c-home-journey]:has(.jr__shot--pos)[data-active=b] .seam-band[data-c-home-journey] {
  opacity: 0.35;
}
@media (min-width: 641px) and (min-aspect-ratio: 1280 / 1190) {
  .jr__shot--fit[data-c-home-journey] .art__img {
    display: block;
    inline-size: min(100%, calc(100svh * 1280 / 1190)) !important;
    margin-inline: auto;
    object-fit: cover;
    mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 86%,
        transparent),
      linear-gradient(
        to right,
        transparent,
        #000 12%,
        #000 88%,
        transparent);
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 86%,
        transparent),
      linear-gradient(
        to right,
        transparent,
        #000 12%,
        #000 88%,
        transparent);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
  }
}
@media (min-width: 641px) and (min-aspect-ratio: 2000 / 1333) {
  .jr__shot--fit-roots[data-c-home-journey] .art__img {
    display: block;
    inline-size: min(100%, calc(100svh * 2000 / 1333)) !important;
    margin-inline: auto;
    object-fit: cover;
    mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 86%,
        transparent),
      linear-gradient(
        to right,
        transparent,
        #000 12%,
        #000 88%,
        transparent);
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 86%,
        transparent),
      linear-gradient(
        to right,
        transparent,
        #000 12%,
        #000 88%,
        transparent);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
  }
  /* the photo is now shown whole, so the waterline is simply 54.8 % down the screen */
  .jr__shot[data-c-home-journey].jr__shot--fit-roots .reflection {
    --title-y: 48% !important;
  }
}
.jr__scene[data-c-home-journey] .seam-band[data-c-home-journey] {
  transition: opacity 600ms ease;
}
@media (min-width: 641px) {
  .jr__shot[data-c-home-journey] .reflection {
    --title-y: 48% !important;
  }
}
.jr__shot[data-c-home-journey] .reflection .reflection__logo {
  block-size: clamp(56px, 5vw + 30px, 96px) !important;
}
#eat[data-c-home-journey] .jr__word[data-c-home-journey] {
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.95)) drop-shadow(0 0 22px rgb(0 0 0 / 0.85));
}
.jr__video[data-c-home-journey] {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.jr__sound[data-c-home-journey] {
  grid-row: 2;
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  margin-block-start: var(--s-4);
  padding-inline: 16px 18px;
  border: 1.5px solid #e6c27a;
  border-radius: 999px;
  background: rgb(14 7 5 / 0.45);
  color: var(--naledi);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.jr__sound[data-c-home-journey]::before {
  content: "\266a";
  color: #f3d792;
}
.jr__sound[data-c-home-journey][aria-pressed=true] .jr__sound-off[data-c-home-journey],
.jr__sound[data-c-home-journey][aria-pressed=false] .jr__sound-on[data-c-home-journey] {
  display: none;
}
.jr__shade[data-c-home-journey] {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--night) 60%, transparent) 0%,
      transparent 50%);
  pointer-events: none;
}
.jr__copy[data-c-home-journey] {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto auto;
  padding: calc(var(--header-h, 80px) + var(--s-5)) var(--margin) calc(var(--s-7) + var(--dock-h, 0px));
  pointer-events: none;
}
.jr__copy[data-c-home-journey] > [data-c-home-journey] {
  pointer-events: auto;
}
.jr__all[data-c-home-journey],
.jr__all[data-c-home-journey]:visited {
  color: #f3d792;
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.6);
}
.jr__all[data-c-home-journey]:hover {
  text-decoration: underline;
}
.jr__names[data-c-home-journey] {
  grid-row: 2;
  display: grid;
  margin-block-end: var(--s-5);
}
.jr__name[data-c-home-journey],
.jr__name[data-c-home-journey]:visited {
  grid-area: 1 / 1;
  display: grid;
  justify-items: start;
  gap: var(--s-1);
  max-inline-size: 40rem;
  color: var(--naledi);
  text-decoration: none;
  transition: opacity 400ms ease;
}
.jr__title[data-c-home-journey] {
  font-family: var(--face-display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.05;
}
.jr__line[data-c-home-journey] {
  font-size: var(--fs-body-lg, 1.15rem);
  color: color-mix(in srgb, var(--naledi) 86%, transparent);
}
.jr__go[data-c-home-journey] {
  margin-block-start: var(--s-2);
  color: #f3d792;
  font-weight: var(--wt-label, 600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.jr__name[data-c-home-journey]:hover .jr__go[data-c-home-journey] {
  color: #fff3cf;
}
.jr__ctaset[data-c-home-journey] {
  grid-row: 3;
  display: grid;
}
.jr__ctas[data-c-home-journey] {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.jr__cta[data-c-home-journey],
.jr__cta[data-c-home-journey]:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 56px;
  padding-inline: 26px;
  border: 1.5px solid #e6c27a;
  border-radius: var(--r-pill, 999px);
  color: var(--naledi);
  background: rgb(14 7 5 / 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: var(--fs-button, 1rem);
  font-weight: var(--wt-label, 600);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms linear, scale 160ms ease;
}
.jr__cta--primary[data-c-home-journey],
.jr__cta--primary[data-c-home-journey]:visited {
  border-color: transparent;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
}
.jr__cta[data-c-home-journey]:hover {
  background-color: rgb(243 215 146 / 0.2);
}
.jr__cta--primary[data-c-home-journey]:hover {
  background:
    linear-gradient(
      180deg,
      #fff8e0,
      #f7e2a6 40%,
      #d9a74e 85%);
}
.jr__cta[data-c-home-journey]:active {
  scale: 0.97;
}
@media (max-width: 640px) {
  .jr__copy[data-c-home-journey] {
    padding-block-end: calc(var(--s-5) + var(--dock-h, 64px) + 64px);
  }
  .jr__ctas[data-c-home-journey] {
    flex-wrap: nowrap;
    gap: var(--s-2);
  }
  .jr__cta[data-c-home-journey] {
    flex: 1 1 0;
    min-inline-size: 0;
    min-block-size: 52px;
    padding-inline: 12px;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }
}
/* Static: each photo carries its own words; the chapter word and buttons sit on the first one */
html:not(.jr-on) .jr__copy[data-c-home-journey] {
  block-size: 100svh;
  min-block-size: 480px;
}
html:not(.jr-on) .jr__name--b[data-c-home-journey],
html:not(.jr-on) .jr__name--c[data-c-home-journey] {
  display: none;
}
/* ── With motion: one held screen per chapter, the second photo takes over as it scrolls ─────────── */
html.jr-on .jr__scene[data-c-home-journey] {
  --e: 0;
  block-size: 300svh;
}
html.jr-on .jr__stage[data-c-home-journey] {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  min-block-size: 480px;
  overflow: hidden;
}
html.jr-on .jr__shot[data-c-home-journey] {
  position: absolute;
  inset: 0;
  block-size: auto;
  min-block-size: 0;
  will-change: opacity;
}
html.jr-on .jr__scene[data-c-home-journey][data-active=a] .jr__shot--b[data-c-home-journey],
html.jr-on .jr__scene[data-c-home-journey][data-active=b] .jr__shot--a[data-c-home-journey],
html.jr-on .jr__scene[data-c-home-journey][data-active=a] .jr__name--b[data-c-home-journey],
html.jr-on .jr__scene[data-c-home-journey][data-active=b] .jr__name--a[data-c-home-journey],
html.jr-on .jr__scene[data-c-home-journey]:not([data-active=c]) .jr__shot--c[data-c-home-journey],
html.jr-on .jr__scene[data-c-home-journey]:not([data-active=c]) .jr__name--c[data-c-home-journey],
html.jr-on .jr__scene[data-c-home-journey][data-active=c] .jr__shot--a[data-c-home-journey],
html.jr-on .jr__scene[data-c-home-journey][data-active=c] .jr__shot--b[data-c-home-journey],
html.jr-on .jr__scene[data-c-home-journey][data-active=c] .jr__name--a[data-c-home-journey],
html.jr-on .jr__scene[data-c-home-journey][data-active=c] .jr__name--b[data-c-home-journey] {
  pointer-events: none;
}
/* Eat: Roots and Dare2Dream each have their own two buttons, changing with the photo */
html:not(.jr-on) .jr__ctas--b[data-c-home-journey] {
  display: none;
}
html.jr-on .jr__scene[data-c-home-journey][data-active=a] .jr__ctas--b[data-c-home-journey],
html.jr-on .jr__scene[data-c-home-journey][data-active=b] .jr__ctas--a[data-c-home-journey] {
  opacity: 0;
  visibility: hidden;
}
.jr__ctas--a[data-c-home-journey],
.jr__ctas--b[data-c-home-journey] {
  transition: opacity 400ms ease, visibility 400ms;
}
html.jr-on .jr__name--a[data-c-home-journey] {
  opacity: calc(1 - min(1, max(0, (var(--e) - 0.25) * 4)));
}
html.jr-on .jr__name--b[data-c-home-journey] {
  opacity: calc(min(1, max(0, (var(--e) - 0.55) * 4)));
}
/* owner (20 Oct 2026): "I dont want a photo to show blurred in the background of another photo": never two photos at
     once. The first slowly fades to night, then the next slowly comes up out of the night */
html.jr-on .jr__shot--a[data-c-home-journey] {
  z-index: 1;
  opacity: calc(1 - min(1, var(--e) * 2));
}
html.jr-on .jr__shot--b[data-c-home-journey] {
  z-index: 2;
  opacity: max(0, var(--e) * 2 - 1);
}
/* ── Option 1, "The rising curtain" (?t=curtain): the second photo rises from the foot over the first, its top edge soft,
     both sharp, no zoom, as slow as the scroll ── */
html.t-curtain.jr-on .jr__scene[data-c-home-journey]:not(.jr__scene--one):not(.jr__scene--three) .jr__shot--a[data-c-home-journey] {
  opacity: 1;
}
html.t-curtain.jr-on .jr__scene[data-c-home-journey]:not(.jr__scene--one):not(.jr__scene--three) .jr__shot--b[data-c-home-journey] {
  opacity: 1;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent calc((1 - var(--e)) * (100% + 16svh) - 16svh),
      #000 calc((1 - var(--e)) * (100% + 16svh)));
  mask-image:
    linear-gradient(
      to bottom,
      transparent calc((1 - var(--e)) * (100% + 16svh) - 16svh),
      #000 calc((1 - var(--e)) * (100% + 16svh)));
}
/* ── Option 2, "The opening gates" (?t=doors): the first photo parts down the middle and its halves glide apart like
     gates, a fine gold line where they part, the next photo waiting behind ── */
html.t-doors.jr-on .jr__scene[data-c-home-journey]:not(.jr__scene--one):not(.jr__scene--three) .jr__shot--a[data-c-home-journey]:not(.jr__door) {
  opacity: 0.001;
}
/* (owner, 30 Oct 2026: "You can also see through the Dare to Dream on the back there. Even before … you open"): the next photo
     waited at a third of its strength and showed through the soft edges of the closed gates; now nothing shows until they part */
html.t-doors.jr-on .jr__scene[data-c-home-journey]:not(.jr__scene--one):not(.jr__scene--three) .jr__shot--b[data-c-home-journey] {
  opacity: min(1, calc(var(--e) * 4));
}
html.t-doors.jr-on .jr__door[data-c-home-journey] {
  z-index: 3;
  opacity: 1;
  pointer-events: none;
}
html.t-doors.jr-on .jr__door--l[data-c-home-journey] {
  clip-path: inset(0 50% 0 0);
  transform: translateX(calc(var(--g, var(--e)) * -52%));
}
html.t-doors.jr-on .jr__door--r[data-c-home-journey] {
  clip-path: inset(0 0 0 50%);
  transform: translateX(calc(var(--g, var(--e)) * 52%));
}
html.t-doors.jr-on .jr__door[data-c-home-journey]::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 2px;
  background:
    linear-gradient(
      180deg,
      transparent,
      #f3d792 20%,
      #c9953f 80%,
      transparent);
  box-shadow: 0 0 18px rgb(243 215 146 / 0.7);
  opacity: calc(min(1, var(--g, var(--e)) * 8) * (1 - var(--g, var(--e))));
}
html.t-doors.jr-on .jr__door--l[data-c-home-journey]::after {
  inset-inline-start: calc(50% - 2px);
}
html.t-doors.jr-on .jr__door--r[data-c-home-journey]::after {
  inset-inline-start: 50%;
}
/* one photo (Sleep since 20 Oct 2026): a short calm hold, nothing changes */
html.jr-on .jr__scene--one[data-c-home-journey] {
  block-size: 160svh;
}
/* (26 Oct 2026, the check before publishing: a dark stretch after the Gallery photo, before "What our guests say"): the last
     part, Gallery, has no hold; its photo simply passes, and the guests' words follow at the normal gap */
html.jr-on #gallery[data-c-home-journey].jr__scene--one {
  block-size: 100svh;
}
html.jr-on .jr__scene--three[data-c-home-journey] {
  --e2: 0;
  block-size: 450svh;
}
html.jr-on .jr__scene--three[data-c-home-journey] .jr__shot--b[data-c-home-journey] {
  opacity: calc(max(0, var(--e) * 2 - 1) * (1 - min(1, var(--e2) * 2)));
}
html.jr-on .jr__shot--c[data-c-home-journey] {
  z-index: 2;
  opacity: max(0, var(--e2) * 2 - 1);
}
html.jr-on .jr__scene--three[data-c-home-journey] .jr__name--b[data-c-home-journey] {
  opacity: calc(min(1, max(0, (var(--e) - 0.55) * 4)) * (1 - min(1, max(0, (var(--e2) - 0.25) * 4))));
}
html.jr-on .jr__name--c[data-c-home-journey] {
  opacity: calc(min(1, max(0, (var(--e2) - 0.55) * 4)));
}
html.jr-on .jr__copy[data-c-home-journey] {
  z-index: 3;
}
/* owner (20 Oct 2026): "Two restaurants should stay at the bottom when you see the photo of dare2dream" */
html.jr-on .jr__scene[data-c-home-journey][data-active] .jr__name[data-c-home-journey].jr__name--stay {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 641px) {
  .jr__shot[data-c-home-journey] .art__img,
  .jr__shot[data-c-home-journey] .jr__video[data-c-home-journey] {
    display: block;
    inline-size: auto !important;
    max-inline-size: 100%;
    block-size: 100% !important;
    margin-inline: auto;
    object-fit: cover;
    mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 86%,
        transparent),
      linear-gradient(
        to right,
        transparent,
        #000 10%,
        #000 90%,
        transparent);
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 86%,
        transparent),
      linear-gradient(
        to right,
        transparent,
        #000 10%,
        #000 90%,
        transparent);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
  }
  .jr__shot[data-c-home-journey] picture.jr__art {
    display: block;
  }
}
/* owner (20 Oct 2026): "I still want you to move up all the headings on the pictures/videos of sleep eat events, The sum of us, Wake up to the veld as these headings are covering to see the photos": the photo starts under the heading (--photo-top) */
.jr__shot[data-c-home-journey] .reflection {
  inset-block-start: var(--photo-top, 0);
}
.jr__shot[data-c-home-journey] .art__img,
.jr__shot[data-c-home-journey] .jr__video[data-c-home-journey] {
  position: absolute;
  inset: var(--photo-top, 0) 0 0 !important;
  block-size: calc(100% - var(--photo-top, 0px)) !important;
  margin: 0 auto;
}
.jr__shot[data-c-home-journey] .jr__video[data-c-home-journey] {
  aspect-ratio: 16 / 9;
}
@media (max-width: 640px) {
  .jr__shot[data-c-home-journey] .art__img,
  .jr__shot[data-c-home-journey] .jr__video[data-c-home-journey] {
    inline-size: 100%;
  }
}
@media (max-width: 640px) {
  .jr__shot[data-c-home-journey] .art__img,
  .jr__shot[data-c-home-journey] .jr__video[data-c-home-journey] {
    mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 86%,
        transparent);
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 86%,
        transparent);
  }
}
@media (min-width: 641px) {
  .jr__shot[data-c-home-journey] .art__img,
  .jr__shot[data-c-home-journey] .jr__video[data-c-home-journey] {
    inline-size: 100% !important;
    max-inline-size: none;
    object-fit: cover;
    mask-image:
      linear-gradient(
        to bottom,
        color-mix(in srgb, #000 35%, transparent),
        #000 22%,
        #000 86%,
        transparent) !important;
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        color-mix(in srgb, #000 35%, transparent),
        #000 22%,
        #000 86%,
        transparent) !important;
  }
}
/* owner (21 Oct 2026, with the floating Sleep · Eat · Events bar: "I like the suggestions … go ahead"): the big Options
     buttons become a small gold word under each photo, with a fine gold line under it (no box, no full-width pill) */
/* (6 Nov 2026) color was #f3d792; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) min-block-size was 44px; always overridden by css/site.css, so its value is here now */
.jr__cta[data-c-home-journey],
.jr__cta[data-c-home-journey]:visited {
  min-block-size: 36px;
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #f3d792;
  font-size: var(--fs-s, 0.95rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background-image:
    linear-gradient(
      90deg,
      #f3d792,
      #c9953f);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 calc(50% + 0.95em);
  transition: background-size 250ms ease, color 200ms ease;
}
.jr__cta[data-c-home-journey]:hover {
  color: #fff3cf;
  background-color: transparent;
  background-size: 100% 2px;
}
@media (max-width: 640px) {
  .jr__cta[data-c-home-journey] {
    flex: 0 0 auto;
    padding-inline: 0;
  }
  .jr__copy[data-c-home-journey] {
    padding-block-end: calc(var(--s-5) + 72px);
  }
}
/* ── Eat (owner, 30 Oct 2026): Roots, Dare2Dream, then the four Romantic Dinners, then four photos of the Forest Breakfast table.
     Each opens behind the gates of the one before; the rows take the space of the Dare2Dream row, so nothing changes size ── */
html.jr-on .jr__scene--four[data-c-home-journey] {
  --e2: 0;
  --e3: 0;
  block-size: 560svh;
}
html.t-doors.jr-on .jr__scene[data-c-home-journey].jr__scene--four.jr__scene--four .jr__shot--b[data-c-home-journey]:not(.jr__door) {
  opacity: 0.001;
}
html.t-doors.jr-on .jr__scene--four[data-c-home-journey] .jr__shot--a[data-c-home-journey].jr__door {
  z-index: 6;
}
html.t-doors.jr-on .jr__scene--four[data-c-home-journey] .jr__door--of-b[data-c-home-journey] {
  --g: var(--e2);
  z-index: 5;
}
html.t-doors.jr-on .jr__scene--four[data-c-home-journey] .jr__door--of-c[data-c-home-journey] {
  --g: var(--e3);
  z-index: 4;
  opacity: min(1, calc(var(--e2) * 4));
}
/* the two halves of the row keep the part's name above it */
html.t-doors.jr-on .jr__row[data-c-home-journey].jr__door--l {
  clip-path: inset(-140px 50% 0 0);
}
html.t-doors.jr-on .jr__row[data-c-home-journey].jr__door--r {
  clip-path: inset(-140px 0 0 50%);
}
html.t-doors.jr-on .jr__scene--four[data-c-home-journey] .jr__row--c[data-c-home-journey]:not(.jr__door) {
  opacity: 0.001;
}
html.t-doors.jr-on .jr__scene--four[data-c-home-journey] .jr__row--d[data-c-home-journey] {
  z-index: 3;
  opacity: min(1, calc(var(--e3) * 4));
}
html.jr-on .jr__scene--four[data-c-home-journey] .jr__copy[data-c-home-journey] {
  z-index: 7;
}
.jr__row[data-c-home-journey] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 0;
  pointer-events: none;
}
html.jr-on .jr__row[data-c-home-journey] {
  position: absolute;
  --eat-top: calc(var(--seam) + var(--seam-size) * 0.6);
  inset: calc(var(--eat-top) + 48px) 0 calc(var(--s-5) + 148px + env(safe-area-inset-bottom));
}
html.jr-on .jr__scene[data-c-home-journey][data-active=c] .jr__row--c[data-c-home-journey]:not(.jr__door),
html.jr-on .jr__scene[data-c-home-journey][data-active=d] .jr__row--d[data-c-home-journey] {
  pointer-events: auto;
}
html.jr-on .jr__scene[data-c-home-journey][data-active=d] .jr__shot--a[data-c-home-journey],
html.jr-on .jr__scene[data-c-home-journey][data-active=d] .jr__shot--b[data-c-home-journey] {
  pointer-events: none;
}
.jr__tile[data-c-home-journey] {
  position: relative;
  display: block;
  overflow: hidden;
  min-block-size: 0;
  text-decoration: none;
}
.jr__tile[data-c-home-journey] .jr__tile-art {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 16%,
      #000 80%,
      transparent);
  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 16%,
      #000 80%,
      transparent);
}
.jr__tile-name[data-c-home-journey] {
  position: absolute;
  inset: auto 0 0;
  padding: 28px 8px 8px;
  font-family: var(--face-text);
  font-style: normal;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.1;
  text-align: center;
  color: #f3d792;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.9);
}
/* (owner, 30 Oct 2026: "a bigger heading at the top, in the center there, not on the photos"): the part's name above its photos,
     centred, in the heading font, gold */
.jr__row-name[data-c-home-journey] {
  position: absolute;
  inset: auto 0 100%;
  padding-block-end: var(--s-2);
  font-family: var(--face-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.1;
  text-align: center;
  color: #f3d792;
}
.jr__ctas--c[data-c-home-journey],
.jr__ctas--d[data-c-home-journey] {
  transition: opacity 400ms ease, visibility 400ms;
}
html:not(.jr-on) .jr__ctas--c[data-c-home-journey],
html:not(.jr-on) .jr__ctas--d[data-c-home-journey] {
  display: none;
}
html.jr-on .jr__scene--four[data-c-home-journey] .jr__ctas[data-c-home-journey] {
  opacity: 0;
  visibility: hidden;
}
html.jr-on .jr__scene--four[data-c-home-journey][data-active=a] .jr__ctas--a[data-c-home-journey],
html.jr-on .jr__scene--four[data-c-home-journey][data-active=b] .jr__ctas--b[data-c-home-journey],
html.jr-on .jr__scene--four[data-c-home-journey][data-active=c] .jr__ctas--c[data-c-home-journey],
html.jr-on .jr__scene--four[data-c-home-journey][data-active=d] .jr__ctas--d[data-c-home-journey] {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 641px) {
  .jr__row[data-c-home-journey] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  html.jr-on .jr__row[data-c-home-journey] {
    --h: min(64svh, calc(100vw / 2.2));
    --row-top: calc(var(--eat-top) + (100svh - var(--eat-top) - 4svh - var(--h)) / 2);
    inset: var(--row-top) 0 auto;
    block-size: min(var(--h), calc(100svh - var(--row-top) - 136px - env(safe-area-inset-bottom)));
  }
  /* (owner, 31 Oct 2026: "I don't want to see the lines. Just give me the different photos to go over into one another"): each photo lies
       over the edge of the one before and melts into it */
  .jr__tile[data-c-home-journey] + .jr__tile[data-c-home-journey] {
    margin-inline-start: -12%;
  }
  .jr__tile[data-c-home-journey] + .jr__tile[data-c-home-journey] .jr__tile-art {
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent,
        #000 9.5%),
      linear-gradient(
        to bottom,
        transparent,
        #000 16%,
        #000 80%,
        transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(
        to right,
        transparent,
        #000 9.5%),
      linear-gradient(
        to bottom,
        transparent,
        #000 16%,
        #000 80%,
        transparent);
    mask-composite: intersect;
  }
  .jr__tile[data-c-home-journey] + .jr__tile[data-c-home-journey] .jr__tile-name[data-c-home-journey] {
    padding-inline-start: 12%;
  }
  .jr__tile-name[data-c-home-journey] {
    font-size: 1.35rem;
    padding: 40px 10px 11%;
  }
}
/* (owner, 26 Oct 2026: "the photos on the Dare to Dream must be next to the photo. It must look like one … the restaurant's in
     the middle. Then the two photos next to that must form one whole"): on a laptop the steel woman, the Dare2Dream gate and the
     bubble chair stand in one row, the same height, a fine gap between them, as one picture (as Private functions); the gate
     photo's own soft-edged copy steps aside. Phones keep the gate photo alone across the screen */
.jr__sides[data-c-home-journey] {
  display: none;
}
@media (min-width: 1100px) and (min-aspect-ratio: 1400 / 1000) {
  .jr__sides[data-c-home-journey] {
    --h: min(64svh, calc(100vw / 2.2));
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding-block-end: 4svh;
    pointer-events: none;
  }
  /* the gate in the middle at its own shape; the two side photos fill the rest of the width, out to the screen's edges */
  .jr__side[data-c-home-journey] {
    flex: 1 1 0;
    min-inline-size: 0;
    block-size: var(--h);
    overflow: hidden;
  }
  .jr__side--m[data-c-home-journey] {
    flex: none;
    aspect-ratio: 4 / 3;
  }
  /* (owner, 31 Oct 2026: "I want those photos to flow into one another. I don't want to see sharp lines defining the three photos") */
  .jr__side[data-c-home-journey] {
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 84%,
        transparent);
    mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 84%,
        transparent);
  }
  .jr__side[data-c-home-journey] + .jr__side[data-c-home-journey] {
    margin-inline-start: -7vw;
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent,
        #000 7vw),
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 84%,
        transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(
        to right,
        transparent,
        #000 7vw),
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 84%,
        transparent);
    mask-composite: intersect;
  }
  .jr__side[data-c-home-journey] picture {
    position: static;
    display: block;
    block-size: 100%;
  }
  /* (6 Nov 2026) object-fit was cover; always overridden by css/home-journey.css, so its value is here now */
  html body #eat[data-c-home-journey] .jr__shot[data-c-home-journey] .jr__side[data-c-home-journey] img {
    position: static !important;
    inset: auto !important;
    translate: none;
    transform: none;
    display: block;
    inline-size: 100% !important;
    block-size: 100% !important;
    max-block-size: none;
    object-fit: cover;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  /* (6 Nov 2026) object-position was 50% 0%; always overridden by css/home-journey.css, so its value is here now */
  html body #eat[data-c-home-journey] .jr__shot[data-c-home-journey] .jr__side--m[data-c-home-journey] img {
    object-position: var(--jr-pos);
  }
  html body #eat[data-c-home-journey] .jr__shot[data-c-home-journey]:has(.jr__sides) > .jr__art {
    visibility: hidden;
  }
}
/* (owner, 31 Oct 2026: "You have to see the top part of the restaurant as well … you can't really see that reflection"): Roots big,
     from the sky down to the reflection; the logo lower, on the water. Laptop: edge to edge, nothing faded at the top. Phone: the
     photo at the full height of the screen, travelling slowly from one end of the restaurant to the other */
#eat[data-c-home-journey] .jr__shot[data-c-home-journey].jr__shot--fit-roots .reflection {
  --title-y: 62% !important;
}
#eat[data-c-home-journey] .jr__shot[data-c-home-journey].jr__shot--fit-roots .reflection__logo {
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.75));
}
@media (min-width: 641px) {
  #eat[data-c-home-journey] .jr__shot--fit-roots[data-c-home-journey] .art__img {
    inline-size: 100% !important;
    object-position: 50% 0 !important;
    mask-image:
      linear-gradient(
        to bottom,
        #000 86%,
        transparent) !important;
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        #000 86%,
        transparent) !important;
  }
}
@media (max-width: 640px) {
  #eat[data-c-home-journey] .jr__shot--fit-roots[data-c-home-journey] {
    overflow: hidden;
  }
  #eat[data-c-home-journey] .jr__shot--fit-roots[data-c-home-journey] .art__img {
    inline-size: auto !important;
    max-inline-size: none;
    block-size: 100% !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    mask-image:
      linear-gradient(
        to bottom,
        #000 86%,
        transparent);
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        #000 86%,
        transparent);
  }
  @media (prefers-reduced-motion: no-preference) {
    #eat[data-c-home-journey] .jr__shot--fit-roots[data-c-home-journey] .art__img {
      animation: jr-roots-travel 34s ease-in-out infinite alternate;
    }
    @keyframes jr-roots-travel {
      to {
        translate: calc(100vw - 100%);
      }
    }
  }
}

/* ── home-reviews ── */
/* Home: reviews.
   Used on: /.
   Forum Homini website, */
/* one guest at a time: the words zoom softly in, then out as the next comes in; five gold bars show how many there are */
.hr__guests[data-c-home-reviews] {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  inline-size: 100%;
  max-inline-size: 44rem;
  margin-block-start: var(--gap-heading);
}
.hr__bars[data-c-home-reviews] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  inline-size: min(100%, 22rem);
}
.hr__bar[data-c-home-reviews] {
  --f: 0;
  position: relative;
  block-size: 3px;
  border-radius: 2px;
  background: rgb(243 215 146 / 0.25);
  overflow: hidden;
}
.hr__fill[data-c-home-reviews] {
  position: absolute;
  inset: 0;
  background: #f3d792;
  transform-origin: left;
  transform: scaleX(0);
}
.hr__bar[data-c-home-reviews].is-done .hr__fill[data-c-home-reviews] {
  transform: scaleX(1);
}
.hr__bar[data-c-home-reviews].is-now .hr__fill[data-c-home-reviews] {
  transform: scaleX(var(--f));
}
.hr__stack[data-c-home-reviews] {
  display: grid;
  inline-size: 100%;
  cursor: pointer;
}
.hr__guest[data-c-home-reviews] {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--s-2);
  margin: 0;
  opacity: 0;
  scale: 0.82;
  filter: blur(6px);
  transition:
    opacity 800ms ease,
    scale 900ms cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 800ms ease;
  pointer-events: none;
}
.hr__guest[data-c-home-reviews].is-on {
  opacity: 1;
  scale: 1;
  filter: blur(0);
  pointer-events: auto;
}
/* the guest leaving grows a little and fades, as if stepping past you */
.hr__guest[data-c-home-reviews].is-off {
  opacity: 0;
  scale: 1.12;
  filter: blur(6px);
}
.hr__nav[data-c-home-reviews] {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
/* (6 Nov 2026) inline-size was 44px; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) block-size was 44px; always overridden by css/site.css, so its value is here now */
.hr__arrow[data-c-home-reviews] {
  inline-size: 36px;
  block-size: 36px;
  border: 1.5px solid rgb(230 194 122 / 0.6);
  border-radius: 50%;
  background: none;
  color: #f3d792;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.hr__arrow[data-c-home-reviews]:hover {
  background: rgb(243 215 146 / 0.14);
}
.hr__arrow[data-c-home-reviews]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}
.hr__count[data-c-home-reviews] {
  min-inline-size: 3.5em;
  font-family: var(--face-text);
  font-size: var(--fs-s);
  letter-spacing: 0.14em;
  color: #e6c27a;
}
.hr__stars[data-c-home-reviews] {
  margin: 0;
  color: #f3d792;
  letter-spacing: 0.2em;
}
.hr__quote[data-c-home-reviews] {
  margin: 0;
  font-family: var(--face-display);
  font-size: var(--fs-l);
  line-height: 1.35;
  color: #f6efe4;
}
.hr__who[data-c-home-reviews] {
  font-family: var(--face-text);
  font-size: var(--fs-s);
  color: #e6c27a;
}
.hr[data-c-home-reviews] {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  padding-block: var(--gap-section) var(--s-9);
  padding-inline: var(--margin);
  background: var(--night);
  text-align: center;
}
.hr__h[data-c-home-reviews] {
  margin: 0;
  font-family: var(--face-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.1;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hr__list[data-c-home-reviews] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 14rem));
  justify-content: center;
  gap: var(--s-4);
  inline-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hr__card[data-c-home-reviews] {
  display: grid;
  justify-items: center;
  gap: var(--s-1);
  padding: var(--s-5) var(--s-3);
  border: 1px solid rgb(201 149 63 / 0.55);
  border-radius: 16px;
  background: rgb(255 243 214 / 0.04);
  color: var(--naledi);
  text-decoration: none;
  transition: background-color 160ms linear;
}
.hr__card[data-c-home-reviews]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}
.hr__score[data-c-home-reviews] {
  font-family: var(--face-display);
  font-size: var(--fs-xl);
  line-height: 1;
  color: #f3d792;
}
.hr__of[data-c-home-reviews] {
  font-size: var(--fs-m);
  color: var(--naledi);
}
.hr__site[data-c-home-reviews] {
  color: #fff;
  font-size: var(--fs-m);
  font-weight: 600;
}
.hr__count[data-c-home-reviews] {
  color: #f3d792;
  font-size: var(--fs-s);
}
/* (6 Nov 2026) color was var(--naledi); always overridden by css/site.css, so its value is here now */
.hr__asat[data-c-home-reviews] {
  margin: 0;
  color: #cfc6b8;
  font-size: var(--fs-s);
  opacity: 0.8;
}
@media (max-width: 560px) {
  .hr__list[data-c-home-reviews] {
    grid-template-columns: minmax(0, 18rem);
  }
}

/* ── home-chapters ── */
/* Home: chapters.
   Used on: /.
   Forum Homini website, */
/* (6 Nov 2026) display was flex; always overridden by css/site.css, so its value is here now */
.hc[data-c-home-chapters] {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(14px + env(safe-area-inset-bottom));
  z-index: calc(var(--z-dock, 45) + 1);
  display: none;
  justify-content: center;
  gap: 4px;
  inline-size: max-content;
  margin-inline: auto;
  padding: 5px;
  border-radius: var(--r-pill, 999px);
  background: color-mix(in srgb, var(--night) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 0 0 1px rgb(230 194 122 / 0.45), 0 10px 30px rgb(14 7 5 / 0.45);
  opacity: 0;
  translate: 0 24px;
  pointer-events: none;
  transition: opacity 350ms ease, translate 350ms ease;
}
.hc[data-c-home-chapters].is-on {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
.hc__link[data-c-home-chapters],
.hc__link[data-c-home-chapters]:visited {
  display: inline-flex;
  align-items: center;
  min-block-size: 46px;
  padding-inline: clamp(18px, 4vw, 28px);
  border-radius: var(--r-pill, 999px);
  color: #f3d792;
  font-family: var(--face-text);
  font-size: var(--fs-s, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 250ms ease, color 250ms ease;
}
.hc__link[data-c-home-chapters]:hover {
  background-color: rgb(243 215 146 / 0.14);
}
/* the section you are in: the graded gold, dark words (as the suite you are in) */
.hc__link[data-c-home-chapters].is-here {
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
}
.hc__link[data-c-home-chapters]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 2px;
}
@media (max-width: 640px) {
  html.hc-on .dock {
    opacity: 0;
    pointer-events: none;
    translate: 0 24px;
  }
  .dock {
    transition: opacity 350ms ease, translate 350ms ease;
  }
  .hc[data-c-home-chapters] {
    inset-block-end: calc(10px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 640px) {
  .hc--page[data-c-home-chapters] {
    inset-block-end: calc(var(--dock-h, 64px) + 8px + env(safe-area-inset-bottom));
  }
  /* (owner, 25 Oct 2026: "The sleep, eat, events, floating button at the bottom on the phone is far too high up"): on a phone the
       suites' and events' own row of buttons sits at the top of the screen, so the bar no longer keeps a space for it at the
       foot: it sits just above Call · Enquire · Book a suite on every page */
  html:has(.hc--page) body {
    padding-block-end: calc(var(--dock-h, 64px) + 64px + env(safe-area-inset-bottom)) !important;
  }
}
@media (min-width: 641px) {
  html:has(.sn) .hc--page[data-c-home-chapters] {
    inset-block-end: calc(80px + env(safe-area-inset-bottom));
  }
}

/* ── events-story ── */
/* Events page story.
   Used on: /.
   Forum Homini website, */
.es[data-c-events-story] {
  --g1: 0;
  --g2: 0;
  --g3: 0;
  --s: 0;
  --t: 0;
  --q: 0;
  background: #000;
  color: #f6efe4;
}
/* without script: the two photos and the poster simply stand one under the other */
.es__layer[data-c-events-story] {
  position: relative;
  min-block-size: 70svh;
}
html.es-on .es__track[data-c-events-story] {
  position: relative;
  block-size: 340svh;
}
.es__mark[data-c-events-story] {
  position: absolute;
  inset-block-start: 55%;
}
html.es-on .es--nostage[data-c-events-story] .es__track[data-c-events-story] {
  block-size: 420svh;
}
html.es-on .es__sticky[data-c-events-story] {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  overflow: hidden;
}
html.es-on .es__layer[data-c-events-story] {
  position: absolute;
  inset: var(--header-h, 80px) 0 0;
  min-block-size: 0;
}
/* each photo is two halves of itself: as the visitor scrolls they glide apart like gates, a fine gold line where they part */
.es__scene[data-c-events-story] {
  display: flex;
}
.es__half[data-c-events-story] {
  position: relative;
  flex: 1 1 50%;
  overflow: hidden;
}
.es__half[data-c-events-story] img[data-c-events-story] {
  position: absolute;
  inset-block: 0;
  inline-size: 100vw;
  max-inline-size: none;
  block-size: 100%;
  object-fit: cover;
}
.es__half--l[data-c-events-story] img[data-c-events-story] {
  inset-inline-start: 0;
}
/* (owner, 26 Oct 2026, evening): Private functions as three photos in one row: the chandeliers, the gold frame in the
     middle, Karina on the throne; the row is as wide as the screen, so each gate carries its half and they part through
     the frame. The two side photos are the same size; the frame (trimmed just inside its edge) is never cut */
.es__trio[data-c-events-story] {
  --h: min(60svh, calc(100vw / 2.2));
  position: absolute;
  inset-block: 0;
  inline-size: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-block-end: 14svh;
}
.es__half--l[data-c-events-story] .es__trio[data-c-events-story] {
  inset-inline-start: 0;
}
.es__half--r[data-c-events-story] .es__trio[data-c-events-story] {
  inset-inline-end: 0;
}
/* the frame in the middle at its own shape; the two side photos fill the rest of the width, out to the screen's edges */
.es__half[data-c-events-story] .es__trio-img[data-c-events-story] {
  position: static;
  flex: 1 1 0;
  min-inline-size: 0;
  inline-size: auto;
  block-size: var(--h);
  object-fit: cover;
}
.es__half[data-c-events-story] .es__trio-img--1[data-c-events-story] {
  flex: none;
  aspect-ratio: 1401 / 968;
}
.es__half[data-c-events-story] .es__trio-img--2[data-c-events-story] {
  object-position: 50% 22%;
}
.es__half--r[data-c-events-story] img[data-c-events-story] {
  inset-inline-end: 0;
}
/* the curtains and the garden first, the chairs below them */
.es__scene--conf[data-c-events-story] .es__half[data-c-events-story] img[data-c-events-story] {
  object-position: 50% 0%;
}
.es__scene--wed[data-c-events-story] .es__half--l[data-c-events-story] {
  translate: calc(var(--g1) * -100%) 0;
}
.es__scene--wed[data-c-events-story] .es__half--r[data-c-events-story] {
  translate: calc(var(--g1) * 100%) 0;
}
.es__scene--conf[data-c-events-story] .es__half--l[data-c-events-story] {
  translate: calc(var(--g2) * -100%) 0;
}
.es__scene--conf[data-c-events-story] .es__half--r[data-c-events-story] {
  translate: calc(var(--g2) * 100%) 0;
}
.es__scene--pf[data-c-events-story] .es__half--l[data-c-events-story] {
  translate: calc(var(--g3) * -100%) 0;
}
.es__scene--pf[data-c-events-story] .es__half--r[data-c-events-story] {
  translate: calc(var(--g3) * 100%) 0;
}
/* the gold line and the shadow show only once the gates start to part (closed, the photo is whole) */
.es__scene--wed[data-c-events-story] {
  --open: min(1, calc(var(--g1) * 10));
}
.es__scene--conf[data-c-events-story] {
  --open: min(1, calc(var(--g2) * 10));
}
.es__scene--pf[data-c-events-story] {
  --open: min(1, calc(var(--g3) * 10));
}
/* (6 Nov 2026) box-shadow was inset -1px 0 0 rgb(243 215 146 / calc(var(--open) * 0.9)), 6px 0 18px rgb(0 0 0 / calc(var(--open) * 0.6)); always overridden by css/site.css, so its value is here now */
html.es-on .es__half--l[data-c-events-story] {
  box-shadow: none;
}
/* (6 Nov 2026) box-shadow was inset 1px 0 0 rgb(243 215 146 / calc(var(--open) * 0.9)), -6px 0 18px rgb(0 0 0 / calc(var(--open) * 0.6)); always overridden by css/site.css, so its value is here now */
html.es-on .es__half--r[data-c-events-story] {
  box-shadow: none;
}
@media (max-width: 640px) {
  html.es-on .es__copy[data-c-events-story] {
    inset-block-end: calc(var(--s-6) + 44px + env(safe-area-inset-bottom));
  }
  html.es-on .es__scene[data-c-events-story] .es__copy[data-c-events-story] .es__title[data-c-events-story] {
    font-size: var(--fs-xl);
  }
  /* the photo melts out of the black under "Events" (as the Eat photos do) and darkens a little under its words */
  html.es-on .es--home[data-c-events-story] .es__shade[data-c-events-story] {
    background:
      linear-gradient(
        to bottom,
        #000,
        transparent 14svh),
      linear-gradient(
        to top,
        rgb(0 0 0 / 0.75),
        transparent 45%);
  }
  /* the wedding photo's sharp part (the long white table) in view, not only the soft flowers in front */
  .es__scene--wed[data-c-events-story] .es__half[data-c-events-story] img[data-c-events-story] {
    object-position: 68% 50%;
  }
  .es__scene--conf[data-c-events-story] .es__half[data-c-events-story] img[data-c-events-story] {
    object-position: 38% 0%;
  }
  /* (owner, 27 Oct 2026: "on the phone … just the one photo of the chair with the chandeliers and the gold frame"):
       on a phone Private functions shows only the gold frame; the chandeliers and Karina stay for the laptop */
  .es__trio[data-c-events-story] {
    padding-block-end: 0;
  }
  .es__half[data-c-events-story] .es__trio-img--0[data-c-events-story],
  .es__half[data-c-events-story] .es__trio-img--2[data-c-events-story] {
    display: none;
  }
  .es__half[data-c-events-story] .es__trio-img--1[data-c-events-story] {
    inline-size: 100vw;
    block-size: 100%;
    aspect-ratio: auto;
    object-position: 44% 50%;
  }
}
.es__shade[data-c-events-story] {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgb(0 0 0 / 0.75),
      transparent 45%);
  pointer-events: none;
}
/* the words of each scene, low on the photo; they leave as the gates open */
.es__copy[data-c-events-story] {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(var(--s-6) + env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding-inline: var(--margin, 20px);
  text-align: center;
}
.es__scene--wed[data-c-events-story] .es__copy[data-c-events-story] {
  opacity: calc(1 - var(--g1) * 2.5);
}
/* the conference words come in as the wedding gates open (on a phone they stand under the photo, so they wait) */
.es__scene--conf[data-c-events-story] .es__copy[data-c-events-story] {
  opacity: calc(min(1, max(0, (var(--g1) - 0.45) * 2.5)) - var(--g2) * 2.5);
}
.es__scene--pf[data-c-events-story] .es__copy[data-c-events-story] {
  opacity: calc(min(1, max(0, (var(--g2) - 0.45) * 2.5)) - var(--g3) * 2.5);
}
.es__title[data-c-events-story],
.es__name[data-c-events-story] {
  margin: 0;
  font-family: var(--face-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.1;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.es__line[data-c-events-story] {
  margin: 0;
  font-family: var(--face-text);
  font-size: var(--fs-m);
  color: #fff;
}
.es__ctas[data-c-events-story] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-block-start: var(--s-2);
}
.es__btn[data-c-events-story],
.es__btn[data-c-events-story]:visited {
  display: inline-flex;
  align-items: center;
  min-block-size: 48px;
  padding-inline: var(--s-5);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  background-origin: border-box;
  color: #1d1405;
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: 600;
  text-decoration: none;
}
.es__btn--line[data-c-events-story],
.es__btn--line[data-c-events-story]:visited {
  border: 1.5px solid #e6c27a;
  background: rgb(0 0 0 / 0.35);
  color: #f3d792;
}
.es__btn[data-c-events-story]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}
/* the stage: black, a warm spotlight coming on, the gold words, then the poster stepping forward and turning to face you */
.es__stage[data-c-events-story] {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s-4);
  perspective: 1200px;
  background: #000;
}
.es__spot[data-c-events-story] {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 38% 55% at calc(30% + var(--q) * 20%) 58%,
      rgb(255 226 160 / 0.32),
      rgb(255 200 120 / 0.08) 55%,
      transparent 75%),
    radial-gradient(
      ellipse 60% 20% at 50% 100%,
      rgb(255 220 150 / 0.14),
      transparent 70%);
  opacity: var(--s);
  pointer-events: none;
}
.es__soon[data-c-events-story] {
  position: relative;
  margin: 0;
  font-family: var(--face-display);
  font-size: var(--fs-l);
  letter-spacing: 0.04em;
  color: #f3d792;
  opacity: var(--t);
  translate: 0 calc((1 - var(--t)) * 14px);
  text-shadow: 0 0 24px rgb(243 215 146 / 0.45);
}
.es__poster[data-c-events-story] {
  position: relative;
  display: block;
  block-size: min(62svh, 120vw);
  aspect-ratio: 1125 / 1667;
  opacity: var(--q);
  transform: translateY(calc((1 - var(--q)) * 6svh)) rotateY(calc((1 - var(--q)) * 80deg)) scale(calc(0.86 + var(--q) * 0.14));
  transform-origin: 50% 60%;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.9), 0 0 60px rgb(243 215 146 / calc(var(--q) * 0.25));
}
.es__poster[data-c-events-story] img[data-c-events-story] {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
.es--nostage[data-c-events-story] .es__stage[data-c-events-story],
.es--nostage[data-c-events-story] .es__details[data-c-events-story] {
  display: none;
}
.es__hint[data-c-events-story] {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 6px;
  margin: 0;
  font-family: var(--face-text);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  color: rgb(243 215 146 / 0.7);
  opacity: calc(1 - var(--g1) * 3);
}
html:not(.es-on) .es__hint[data-c-events-story] {
  display: none;
}
/* the event's details under the stage */
.es__details[data-c-events-story] {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  max-inline-size: 40rem;
  margin-inline: auto;
  padding: var(--gap-heading) var(--margin, 20px) 0;
  text-align: center;
}
.es__details[data-c-events-story] > [data-c-events-story] {
  margin: 0;
}
.es__eyebrow[data-c-events-story],
.es__by[data-c-events-story] {
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6c27a;
}
.es__tag[data-c-events-story],
.es__about[data-c-events-story] {
  font-family: var(--face-text);
  font-size: var(--fs-m);
  line-height: 1.6;
}
.es__when[data-c-events-story] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 1.2em;
  font-family: var(--face-text);
  font-size: var(--fs-m);
  font-weight: 600;
  color: #f3d792;
}
.es__price[data-c-events-story] {
  display: grid;
  font-family: var(--face-display);
  font-size: var(--fs-l);
  color: #f3d792;
}
.es__price[data-c-events-story] span[data-c-events-story] {
  font-family: var(--face-text);
  font-size: var(--fs-s);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6c27a;
}
.es__cause[data-c-events-story] {
  font-family: var(--face-text);
  font-size: var(--fs-s);
  color: #cfc6b8;
}
/* the landing page's Events: the heading on the black above the photos (as Sleep and Eat), the name and Options low on
     the photo, More info under the poster */
.es__word[data-c-events-story] {
  position: absolute;
  z-index: 4;
  inset-block-start: var(--seam);
  inset-inline-start: max(var(--margin), calc((100% - var(--content-max, 1180px)) / 2));
  margin: 0;
  translate: 0 calc(var(--seam-size) * -0.5);
  font-family: var(--face-display);
  font-size: var(--seam-size);
  font-weight: 600;
  line-height: 0.95;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html:not(.es-on) .es__word[data-c-events-story] {
  position: static;
  translate: none;
  padding: var(--gap-heading) var(--margin, 20px);
}
html.es-on .es--home[data-c-events-story] .es__layer[data-c-events-story] {
  inset-block-start: calc(var(--seam) + var(--seam-size) * 0.6);
}
.es__copy--home[data-c-events-story] {
  justify-items: start;
  text-align: start;
  inset-inline-start: max(var(--margin), calc((100% - var(--content-max, 1180px)) / 2));
  inset-inline-end: auto;
  padding-inline: 0;
  gap: var(--s-2);
}
.es__title--link[data-c-events-story],
.es__title--link[data-c-events-story]:visited {
  text-decoration: none;
  font-size: clamp(2rem, 5vw, 3.6rem);
}
.es__options[data-c-events-story],
.es__options[data-c-events-story]:visited,
.es__more[data-c-events-story],
.es__more[data-c-events-story]:visited {
  color: #f3d792;
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.8);
}
.es__more[data-c-events-story] {
  position: relative;
  opacity: var(--q);
}
.es__links[data-c-events-story] {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  margin: 0;
}
/* the back arrow: exactly the top bar's (44 px, a gold ring on dark glass, the gold chevron) */
.es__back[data-c-events-story],
.es__back[data-c-events-story]:visited {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1.5px solid #e6c27a;
  border-radius: 50%;
  background: rgb(14 7 5 / 0.35);
  color: #f3d792;
  text-decoration: none;
}
.es__back[data-c-events-story]:hover {
  background: rgb(243 215 146 / 0.16);
}
html.es-on .es[data-c-events-story]:not(.es--ready) .es__more[data-c-events-story] {
  pointer-events: none;
}
[data-c-events-story]:is(.es__options, .es__more, .es__title--link):focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}
/* the stage keeps clear of the floating Sleep · Eat · Events bar at the foot of the screen, so More info shows */
html.es-on .es--home[data-c-events-story] .es__stage[data-c-events-story] {
  padding-block-end: calc(90px + env(safe-area-inset-bottom));
}
.es--home[data-c-events-story] .es__poster[data-c-events-story] {
  block-size: min(52svh, 100vw);
}
@media (max-width: 640px) {
  .es--home[data-c-events-story] .es__poster[data-c-events-story] {
    block-size: min(46svh, 96vw);
  }
}
/* (owner, 25 Oct 2026: "Place the heading upcoming events in November under events so that you can make the picture of the ad
     bigger … even in two lines"): on the landing page the line stands at the left just under "Events", in two lines, and
     the poster takes the room it left (as big as the screen allows, More info still above the floating bar) */
html.es-on .es--home[data-c-events-story] .es__soon[data-c-events-story] {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--s-2);
  inset-inline-start: max(var(--margin), calc((100% - var(--content-max, 1180px)) / 2));
  max-inline-size: 16ch;
  text-align: start;
  line-height: 1.15;
}
html.es-on .es--home[data-c-events-story] .es__poster[data-c-events-story] {
  block-size: min(64svh, calc(100svh - 315px), 100vw);
}
@media (max-width: 640px) {
  html.es-on .es--home[data-c-events-story] .es__soon[data-c-events-story] {
    max-inline-size: none;
  }
  html.es-on .es--home[data-c-events-story] .es__stage[data-c-events-story] {
    padding-block-start: calc(var(--s-2) + 2 * 1.2em);
  }
  html.es-on .es--home[data-c-events-story] .es__poster[data-c-events-story] {
    block-size: min(52svh, 96vw);
  }
}
@media (max-width: 640px) {
  html.es-on .es--home[data-c-events-story] .es__copy--home[data-c-events-story] {
    inset-inline-start: var(--margin, 20px);
  }
  /* (owner, 27 Oct 2026, the black gaps on the iPhone) "Events" comes up over the dark foot of the Dare2Dream photo (its
       Options stays clear: 96px above that foot) */
  html.es-on .es--home[data-c-events-story] {
    margin-block-start: -56px !important;
  }
}
/* a scene's layer never catches taps itself, only its photo and words do; opened gates are taken away altogether */
.es__scene[data-c-events-story] {
  pointer-events: none;
}
.es__half[data-c-events-story],
.es__copy[data-c-events-story] {
  pointer-events: auto;
}
.es--wed-open[data-c-events-story] .es__scene--wed[data-c-events-story],
.es--conf-open[data-c-events-story] .es__scene--conf[data-c-events-story],
.es--pf-open[data-c-events-story] .es__scene--pf[data-c-events-story] {
  visibility: hidden;
}
/* (25 Oct 2026) the poster stands still behind the private functions gates and shows only once they start to part (on a phone it
     is taller than the photos, so it must not peek out before) */
html.es-on .es__stage[data-c-events-story] {
  opacity: min(1, calc(var(--g3) * 6));
}
@media (min-width: 641px) {
  .es--home[data-c-events-story] .es__half[data-c-events-story] {
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 70%,
        transparent);
    mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 70%,
        transparent);
  }
  .es--home[data-c-events-story] .es__shade[data-c-events-story] {
    display: none;
  }
  .es--home[data-c-events-story] .es__trio[data-c-events-story] {
    --h: 100%;
    align-items: stretch;
    padding-block-end: 0;
  }
  .es--home[data-c-events-story] .es__half[data-c-events-story] .es__trio-img[data-c-events-story] {
    block-size: 100%;
  }
}

/* ── home-gallery-gates ── */
/* Home: gallery gates.
   Used on: /.
   Forum Homini website, */
.gg[data-c-home-gallery-gates] {
  --gg: 0;
  --gg-top: calc(var(--seam) + var(--seam-size) * 0.6);
  position: relative;
  background: #000;
  color: #f6efe4;
}
/* without script: the photo, then the tiles under it */
.gg__stage[data-c-home-gallery-gates] {
  position: relative;
}
html:not(.gg-on) .gg__word[data-c-home-gallery-gates] {
  position: static;
  translate: none;
  padding: var(--gap-heading) var(--margin, 20px);
}
html:not(.gg-on) .gg__gate[data-c-home-gallery-gates] {
  position: relative;
  block-size: 70svh;
}
html.gg-on .gg__track[data-c-home-gallery-gates] {
  position: relative;
  block-size: 260svh;
}
html.gg-on .gg__stage[data-c-home-gallery-gates] {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  overflow: hidden;
}
/* the tiles behind the gates: in the photo's own space, never longer (phone: four rows; laptop: two rows of six) */
.gg__peek[data-c-home-gallery-gates] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 12px 14px;
}
/* (6 Nov 2026) opacity was calc(0.35 + var(--gg) * 0.65); always overridden by css/site.css, so its value is here now */
html.gg-on .gg__peek[data-c-home-gallery-gates] {
  position: absolute;
  inset: var(--gg-top) 0 0;
  padding-block-end: calc(56px + env(safe-area-inset-bottom));
  opacity: 1;
}
.gg__peek[data-c-home-gallery-gates] .gt {
  --gt-shape: auto;
  --gt-row: min(calc((100vw - 40px) / 3), calc((100svh - var(--gg-top) - 56px - 140px) / 4 - 6px));
  inline-size: 100%;
}
.gg__options[data-c-home-gallery-gates],
.gg__options[data-c-home-gallery-gates]:visited {
  color: #f3d792;
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.8);
}
/* the gates: the Lounge photo in two halves, parting down the middle with a fine gold line, as the Events gates do */
html.gg-on .gg__gate[data-c-home-gallery-gates] {
  position: absolute;
  inset: var(--gg-top) 0 0;
  display: flex;
}
.gg--open[data-c-home-gallery-gates] .gg__gate[data-c-home-gallery-gates] {
  visibility: hidden;
}
.gg__half[data-c-home-gallery-gates] {
  position: relative;
  flex: 1 1 50%;
  overflow: hidden;
}
/* each half carries the whole photo, as wide as the screen, so the two halves make one photo when closed */
.gg[data-c-home-gallery-gates] .gg__half[data-c-home-gallery-gates] .gg__art {
  position: absolute;
  inset-block: 0;
  inline-size: 100vw;
  max-inline-size: none;
}
/* the pink sofa in view (her 26 Oct choice for this photo) */
.gg[data-c-home-gallery-gates] .gg__half[data-c-home-gallery-gates] .art__img {
  object-position: 60% 100%;
}
.gg__half--l[data-c-home-gallery-gates] .gg__art {
  inset-inline-start: 0;
}
.gg__half--r[data-c-home-gallery-gates] .gg__art {
  inset-inline-end: 0;
}
.gg__half--l[data-c-home-gallery-gates] {
  translate: calc(var(--gg) * -100%) 0;
  box-shadow: inset -1px 0 0 rgb(243 215 146 / calc(min(1, var(--gg) * 10) * 0.9)), 6px 0 18px rgb(0 0 0 / calc(min(1, var(--gg) * 10) * 0.6));
}
.gg__half--r[data-c-home-gallery-gates] {
  translate: calc(var(--gg) * 100%) 0;
  box-shadow: inset 1px 0 0 rgb(243 215 146 / calc(min(1, var(--gg) * 10) * 0.9)), -6px 0 18px rgb(0 0 0 / calc(min(1, var(--gg) * 10) * 0.6));
}
/* the photo melts out of the black under "Gallery" (as the other landing photos) and darkens a little under Options */
.gg__shade[data-c-home-gallery-gates] {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      #000,
      transparent 7svh),
    linear-gradient(
      to top,
      rgb(0 0 0 / 0.7),
      transparent 40%);
  opacity: calc(1 - var(--gg) * 3);
  pointer-events: none;
}
.gg__options[data-c-home-gallery-gates] {
  position: absolute;
  z-index: 4;
  inset-inline-start: max(var(--margin, 20px), calc((100% - var(--content-max, 1180px)) / 2));
  inset-block-end: calc(var(--s-6) + 44px + env(safe-area-inset-bottom));
  opacity: calc(1 - var(--gg) * 3);
}
html:not(.gg-on) .gg__options[data-c-home-gallery-gates] {
  display: none;
}
.gg--open[data-c-home-gallery-gates] .gg__options[data-c-home-gallery-gates] {
  visibility: hidden;
}
@media (min-width: 900px) {
  html.gg-on .gg__peek[data-c-home-gallery-gates] {
    gap: 18px;
    padding-inline: max(40px, calc((100% - var(--content-max, 1180px)) / 2));
    padding-block-end: 40px;
  }
  .gg__peek[data-c-home-gallery-gates] .gt {
    --gt-row: min(calc((min(100vw - 80px, var(--content-max, 1180px)) - 50px) / 6), calc((100svh - var(--gg-top) - 170px) / 2 - 10px));
  }
  .gg__options[data-c-home-gallery-gates] {
    inset-block-end: var(--s-6);
  }
}

/* ── art-picture ── */
/* Art-directed photos (landing photos).
   Used on: 32 pages, e.g. /, /404.shtml, /butterfly/, /contact-directions/, /dare2dream-menu/.
   Forum Homini website, */
.art[data-c-art-picture] {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.art__img[data-c-art-picture] {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--pos-desktop, 50% 50%);
}
@media (max-width: 1024px) {
  .art__img[data-c-art-picture] {
    object-position: var(--pos-tablet, var(--pos-desktop, 50% 50%));
  }
}
@media (max-width: 640px) {
  .art__img[data-c-art-picture] {
    object-position: var(--pos-phone, var(--pos-tablet, 50% 50%));
  }
}

/* ── reflection-title ── */
/* Reflection title on landing photos.
   Used on: 32 pages, e.g. /, /404.shtml, /butterfly/, /contact-directions/, /dare2dream-menu/.
   Forum Homini website, */
.reflection[data-c-reflection-title] {
  position: absolute;
  inset: 0;
  z-index: var(--z-media-2);
  pointer-events: none;
  color: var(--naledi);
}
.reflection__line[data-c-reflection-title] {
  position: absolute;
  inset-inline: 0;
  inset-block-start: var(--title-y);
  translate: 0 -50%;
  padding-inline: var(--margin);
  text-align: center;
}
.reflection__title[data-c-reflection-title],
.reflection__mirror[data-c-reflection-title] {
  display: block;
  margin: 0;
  font-family: var(--face-display);
  font-weight: 600;
  font-stretch: var(--layer-wdth, 75%);
  color: var(--naledi);
  text-wrap: balance;
  white-space: nowrap;
}
/* The title itself takes the pointer (text selection, hit tests); the rest of the box lets it through to the
     water below for ripple.ts */
.reflection__title[data-c-reflection-title] {
  pointer-events: auto;
}
.reflection--h1[data-c-reflection-title] [data-c-reflection-title]:is(.reflection__title, .reflection__mirror) {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
}
.reflection--h2[data-c-reflection-title] [data-c-reflection-title]:is(.reflection__title, .reflection__mirror) {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
}
@media (max-width: 640px) {
  .reflection__title[data-c-reflection-title],
  .reflection__mirror[data-c-reflection-title] {
    font-stretch: var(--layer-wdth-phone, 75%);
    white-space: normal;
  }
}
.reflection__link[data-c-reflection-title] {
  pointer-events: auto;
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.14em;
  --focus: var(--ember);
}
.reflection__link[data-c-reflection-title]:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
.reflection__link[data-c-reflection-title]:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 6px;
}
/* The mirror: the same line turned over the waterline, 4 px below, fading into the water */
.reflection__mirror[data-c-reflection-title] {
  position: absolute;
  inset-inline: var(--margin);
  inset-block-start: calc(100% + 4px);
  transform: scaleY(-1);
  transform-origin: 50% 50%;
  mask-image:
    linear-gradient(
      to top,
      rgb(0 0 0 / 0.35),
      transparent 70%);
  user-select: none;
}
/* (the hero's photo rule sizes every image in the frame: this one keeps its own size) */
.reflection[data-c-reflection-title] .reflection__logo[data-c-reflection-title] {
  position: static;
  display: block;
  inline-size: auto !important;
  block-size: clamp(72px, 7vw + 40px, 128px) !important;
  max-inline-size: 80vw;
  object-fit: contain !important;
  margin-inline: auto;
}
.reflection__title--logo[data-c-reflection-title] {
  line-height: 0;
}
.reflection__mirror--logo[data-c-reflection-title] {
  line-height: 0;
}
/* The mirror's own underline would read as a second link: never */
.reflection__mirror[data-c-reflection-title] {
  text-decoration: none;
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active), (prefers-contrast: more) {
  .reflection__mirror[data-c-reflection-title] {
    display: none;
  }
}
@media (forced-colors: active) {
  .reflection__title[data-c-reflection-title] {
    forced-color-adjust: none;
    color: CanvasText;
    background: Canvas;
  }
}

/* ── way-out ── */
/* Way out links (404, Thank you).
   Used on: /404.shtml, /thank-you/.
   Forum Homini website, */
/* (6 Nov 2026) display was grid; always overridden by css/site.css, so its value is here now */
.way[data-c-way-out] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.way__link[data-c-way-out] {
  justify-content: space-between;
  padding-inline: var(--s-5) var(--s-4);
}
@media (min-width: 641px) {
  /* (6 Nov 2026) display was flex; always overridden by css/site.css, so its value is here now */
  .way[data-c-way-out] {
    display: grid;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
  }
  .way__item[data-c-way-out] {
    flex: none;
  }
  .way__link[data-c-way-out] {
    gap: var(--s-4);
  }
}
@media (prefers-reduced-motion: no-preference) {
  @layer effects {
    .way__link[data-c-way-out] .way__arrow {
      transition: translate var(--t-micro) var(--ease-settle);
    }
    .way__link[data-c-way-out]:hover .way__arrow {
      translate: 3px 0;
    }
  }
}

/* ── not-found-page ── */
/* Page not found (404).
   Used on: /404.shtml.
   Forum Homini website, */
/* ── The trench: seven beds, surface to depth, and an empty stepped cut ──────────────────────────── */
.trench[data-c-not-found-page] {
  --bed-h: 18px;
  position: relative;
  display: grid;
  background: var(--night);
  overflow: hidden;
}
.trench__bed[data-c-not-found-page] {
  position: relative;
  display: block;
  block-size: var(--bed-h);
  background-color: var(--bed-bg);
}
.trench__bed[data-c-not-found-page]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--naledi);
  opacity: 0.16;
  -webkit-mask: var(--bed) repeat 0 0 / auto var(--bed-h);
  mask: var(--bed) repeat 0 0 / auto var(--bed-h);
}
.trench__bed--veld[data-c-not-found-page] {
  --bed-bg: var(--veld);
}
.trench__bed--drystone[data-c-not-found-page] {
  --bed-bg: var(--drystone);
}
.trench__bed--conglomerate[data-c-not-found-page] {
  --bed-bg: var(--breccia);
}
.trench__bed--ash[data-c-not-found-page] {
  --bed-bg: var(--cave);
}
.trench__bed--breccia[data-c-not-found-page] {
  --bed-bg: var(--earth);
}
.trench__bed--dolomite[data-c-not-found-page] {
  --bed-bg: var(--dolomite);
}
.trench__bed--stromatolite[data-c-not-found-page] {
  --bed-bg: var(--chert);
}
/* The cut: dug through six beds in three steps, down to the seventh; nothing in it */
.trench__cut[data-c-not-found-page] {
  --w: clamp(148px, 30vw, 420px);
  position: absolute;
  inset-block: 0 var(--bed-h);
  inset-inline-start: calc(50% - var(--w) / 2);
  inline-size: var(--w);
}
.trench__draw[data-c-not-found-page] {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}
/* The empty cut: night, with the walls traced in a hairline */
.trench__wall[data-c-not-found-page] {
  fill: var(--night);
}
.trench__line[data-c-not-found-page] {
  fill: none;
  stroke: var(--ash);
  stroke-opacity: 0.55;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* The surveyor's string across the top of the cut */
.trench__str[data-c-not-found-page] {
  fill: none;
  stroke: var(--naledi);
  stroke-opacity: 0.7;
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}
@media (min-width: 641px) {
  .trench[data-c-not-found-page] {
    --bed-h: 28px;
  }
}
@media (min-width: 1025px) {
  .trench[data-c-not-found-page] {
    --bed-h: 34px;
  }
  .trench__cut[data-c-not-found-page] {
    inset-inline-start: 58%;
  }
}
/* ── The ways out ────────────────────────────────────────────────────────────────────────────────── */
.lost[data-c-not-found-page] {
  padding-block: var(--s-8) var(--section-pad);
}
@media (min-width: 1025px) {
  .lost[data-c-not-found-page] {
    padding-block-start: var(--s-9);
  }
}
.lost__groups[data-c-not-found-page] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8) var(--gutter);
}
.lost__bar[data-c-not-found-page] {
  position: relative;
  display: block;
  block-size: 8px;
  margin-block-end: var(--s-4);
  background: var(--layer-band);
}
.lost__bar[data-c-not-found-page]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--naledi);
  opacity: 0.22;
  -webkit-mask: var(--layer-pattern) repeat 0 0 / auto 16px;
  mask: var(--layer-pattern) repeat 0 0 / auto 16px;
}
.lost__h2[data-c-not-found-page] {
  margin-block-end: var(--s-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-stretch: 100%;
}
.lost__list[data-c-not-found-page] {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--hairline);
}
.lost__list[data-c-not-found-page] > li[data-c-not-found-page] {
  border-block-start: 1px solid var(--hairline);
}
.lost__link[data-c-not-found-page] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-block-size: 48px;
  padding-block: var(--s-2);
  color: var(--ink);
  font-weight: var(--wt-ui);
  line-height: 1.3;
  text-decoration: none;
}
.lost__link[data-c-not-found-page]:visited {
  color: var(--ink);
}
.lost__link[data-c-not-found-page]:hover {
  color: var(--soil);
}
.lost__link[data-c-not-found-page]:hover span[data-c-not-found-page] {
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-thickness);
  text-underline-offset: var(--link-offset);
}
.lost__link[data-c-not-found-page] .lost__arrow {
  flex: none;
  color: var(--ink-muted);
}
.lost[data-c-not-found-page] .lost__way {
  margin-block-start: var(--s-9);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--hairline);
}
@media (min-width: 641px) {
  .lost__groups[data-c-not-found-page] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1025px) {
  .lost__groups[data-c-not-found-page] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: no-preference) {
  @layer effects {
    .lost__link[data-c-not-found-page] .lost__arrow {
      transition: translate var(--t-micro) var(--ease-settle);
    }
    .lost__link[data-c-not-found-page]:hover .lost__arrow {
      translate: 3px 0;
      color: var(--soil);
    }
  }
}
@media (forced-colors: active) {
  .trench[data-c-not-found-page] {
    display: none;
  }
}

/* ── award-badge ── */
/* Award and TripAdvisor badges.
   Used on: 31 pages, e.g. /404.shtml, /butterfly/, /contact-directions/, /dare2dream-menu/, /dare2dream/.
   Forum Homini website, */
.badge[data-c-award-badge] {
  display: inline-flex;
  align-self: flex-start;
  justify-self: start;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 44px;
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.badge[data-c-award-badge]:visited {
  color: var(--fg);
}
/* ── TripAdvisor (typographic) ─────────────────────────────────────────────────────────────────────── */
.badge--tripadvisor-hotel[data-c-award-badge],
.badge--tripadvisor-home[data-c-award-badge] {
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
  border: 1px solid currentColor;
  font-size: var(--fs-small);
  line-height: 1.3;
  transition: background-color var(--t-micro) linear;
}
.badge--tripadvisor-hotel[data-c-award-badge]:hover,
.badge--tripadvisor-home[data-c-award-badge]:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.badge__mark[data-c-award-badge] {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.badge__lines[data-c-award-badge] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.badge__award[data-c-award-badge] {
  font-weight: var(--wt-ui);
  font-variant-numeric: lining-nums;
}
.badge__cta[data-c-award-badge],
.badge__name[data-c-award-badge] {
  font-weight: var(--wt-label);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-thickness);
  text-underline-offset: var(--link-offset);
}
.badge[data-c-award-badge]:hover [data-c-award-badge]:is(.badge__cta, .badge__name) {
  text-decoration-thickness: var(--link-thickness-hover);
}
.badge__name[data-c-award-badge] {
  font-size: var(--fs-body);
}
.badge[data-c-award-badge] .badge__go {
  flex: none;
  align-self: flex-start;
  margin-block-start: 2px;
  opacity: 0.8;
}
.badge--tripadvisor-home[data-c-award-badge] .badge__go {
  align-self: center;
  margin: 0;
}
/* ── Wedding Guide: the hotel's own badge art on a paper plinth ────────────────────────────────────── */
.badge--wedding-guide[data-c-award-badge] {
  padding: 0;
}
.badge__plinth[data-c-award-badge] {
  display: block;
  padding: var(--s-3);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
  transition: box-shadow var(--t-micro) linear;
}
.badge--wedding-guide[data-c-award-badge]:hover .badge__plinth[data-c-award-badge] {
  box-shadow: inset 0 0 0 1px var(--hairline), 0 0 0 2px currentColor;
}
.badge[data-c-award-badge] .badge__art {
  inline-size: 110px;
}
.badge[data-c-award-badge] .badge__art .photo__frame {
  background: none;
}
@media (forced-colors: active) {
  .badge--tripadvisor-hotel[data-c-award-badge],
  .badge--tripadvisor-home[data-c-award-badge] {
    border-color: LinkText;
  }
}

/* ── layer-band ── */
/* Band under the landing photo.
   Used on: 31 pages, e.g. /404.shtml, /butterfly/, /contact-directions/, /dare2dream-menu/, /dare2dream/.
   Forum Homini website, */
/* the H1 in lines of their own, same lettering (owner, 17 Oct 2026, the Fantasy Forest dinners) */
.layer-band__h1-line[data-c-layer-band] {
  display: block;
}
.layer-band[data-c-layer-band] {
  position: relative;
  isolation: isolate;
  padding-block: var(--s-7) var(--s-8);
  overflow: clip;
}
.layer-band--slim[data-c-layer-band] {
  padding-block: var(--s-5) var(--s-6);
}
/* The lithology tile, gathered at the end edge (and the foot on narrow bands), so the title stays on clean
     ground: the mask is the tile intersected with a gradient. Band text colour at --pattern-opacity (§5.1). */
.layer-band--pattern[data-c-layer-band]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--layer-band-text);
  opacity: var(--pattern-opacity);
  pointer-events: none;
  -webkit-mask-image:
    var(--layer-pattern),
    linear-gradient(
      to top,
      black,
      transparent 55%);
  mask-image:
    var(--layer-pattern),
    linear-gradient(
      to top,
      black,
      transparent 55%);
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-size: auto, 100% 100%;
  mask-size: auto, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (min-width: 641px) {
  .layer-band--pattern[data-c-layer-band]::before {
    -webkit-mask-image:
      var(--layer-pattern),
      linear-gradient(
        to left,
        black 0%,
        rgb(0 0 0 / 0.55) 22%,
        transparent 48%);
    mask-image:
      var(--layer-pattern),
      linear-gradient(
        to left,
        black 0%,
        rgb(0 0 0 / 0.55) 22%,
        transparent 48%);
  }
}
@media (min-width: 641px) {
  .layer-band--bare[data-c-layer-band].layer-band--pattern::before {
    -webkit-mask-image:
      var(--layer-pattern),
      radial-gradient(
        closest-side at 78% 40%,
        black 30%,
        transparent);
    mask-image:
      var(--layer-pattern),
      radial-gradient(
        closest-side at 78% 40%,
        black 30%,
        transparent);
  }
}
/* An inline-size container, so the layout and the H1 answer to the band's own width (split heroes) */
.layer-band[data-c-layer-band] .layer-band__wrap {
  container: band / inline-size;
}
.layer-band__grid[data-c-layer-band] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
}
/* ── Breadcrumbs (§7.7): Home › group (plain text) › this page. Not underlined (a navigation list). ── */
.layer-band__crumbs[data-c-layer-band] {
  margin-block-end: var(--s-5);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.layer-band__crumbs[data-c-layer-band] ol[data-c-layer-band] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s-2);
}
.layer-band__crumbs[data-c-layer-band] li[data-c-layer-band] {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
/* the separator ends the item before it, so a wrap never starts a line with a bare '›' */
.layer-band__crumbs[data-c-layer-band] li[data-c-layer-band]:not(:last-child)::after {
  content: "\203a";
  content: "\203a" / "";
  color: var(--fg-muted);
  font-family: var(--face-display);
  font-size: 1.15em;
  line-height: 1;
}
.layer-band__crumbs[data-c-layer-band] a[data-c-layer-band],
.layer-band__group[data-c-layer-band],
.layer-band__here[data-c-layer-band] {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}
.layer-band__crumbs[data-c-layer-band] a[data-c-layer-band] {
  color: var(--fg);
  text-decoration-line: none;
  text-underline-offset: 0.25em;
}
.layer-band__crumbs[data-c-layer-band] a[data-c-layer-band]:hover {
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-thickness);
}
.layer-band__group[data-c-layer-band] {
  color: var(--fg-muted);
}
.layer-band__here[data-c-layer-band] {
  color: var(--fg);
  font-weight: var(--wt-ui);
}
/* the hand-drawn logo as the title (owner, 19 Oct 2026), the rest of the title small under it */
.layer-band__logo[data-c-layer-band] {
  display: block;
  inline-size: auto;
  block-size: clamp(84px, 9vw + 40px, 140px);
  margin-inline: auto;
}
.layer-band__logo-rest[data-c-layer-band] {
  display: block;
  margin-block-start: var(--s-3);
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  -webkit-text-fill-color: #f6efe4;
  color: #f6efe4;
}
.layer-band__title[data-c-layer-band] {
  max-inline-size: 100%;
  font-size: min(var(--fs-h1), 13cqi);
  color: var(--heading);
  font-weight: var(--wt-display);
}
.layer-band__tagline[data-c-layer-band] {
  margin-block-start: var(--s-4);
  max-inline-size: var(--measure-lede);
  font-family: var(--face-text);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--fg);
}
.layer-band__badge[data-c-layer-band] {
  margin-block-start: var(--s-5);
}
/* The rock and time tag (LayerTag owns its colour, --layer-tag): an annotation with a short leader rule */
.layer-band[data-c-layer-band] .layer-band__tag {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}
.layer-band[data-c-layer-band] .layer-band__tag::before {
  content: "";
  flex: none;
  inline-size: var(--s-6);
  border-block-start: 1px solid currentColor;
}
/* Slim band (reflection): breadcrumbs and tag only */
.layer-band--slim[data-c-layer-band] .layer-band__crumbs[data-c-layer-band] {
  margin-block-end: 0;
}
.layer-band--slim[data-c-layer-band] .layer-band__tag {
  margin-block-start: var(--s-2);
}
@media (min-width: 1025px) and (pointer: fine) {
  .layer-band__crumbs[data-c-layer-band] a[data-c-layer-band],
  .layer-band__group[data-c-layer-band],
  .layer-band__here[data-c-layer-band] {
    min-block-size: 32px;
  }
}
@container band (min-width: 900px) {
  .layer-band__grid[data-c-layer-band] {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "crumbs tag" "title title" "tagline badge";
    column-gap: var(--s-7);
    align-items: start;
  }
  /* The title always takes the whole width (the tag column is only as wide as the tag, and a badge beside a
       long word would break it); without a badge the tagline does too */
  .layer-band__grid[data-c-layer-band]:not(:has(.layer-band__badge)) {
    grid-template-areas: "crumbs tag" "title title" "tagline tagline";
  }
  .layer-band__crumbs[data-c-layer-band] {
    grid-area: crumbs;
    margin-block-end: var(--s-6);
  }
  .layer-band__title[data-c-layer-band] {
    grid-area: title;
  }
  .layer-band__tagline[data-c-layer-band] {
    grid-area: tagline;
  }
  /* the second line (Dare2Dream) under the tagline, across the band */
  .layer-band__note[data-c-layer-band] {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  .layer-band__badge[data-c-layer-band] {
    grid-area: badge;
    align-self: end;
    justify-self: end;
    margin-block-start: 0;
  }
  .layer-band[data-c-layer-band] .layer-band__tag {
    grid-area: tag;
    justify-self: end;
    align-self: center;
    margin-block: 0 var(--s-6);
  }
  .layer-band--slim[data-c-layer-band] .layer-band__grid[data-c-layer-band] {
    grid-template-areas: "crumbs tag";
    align-items: center;
  }
  .layer-band--slim[data-c-layer-band] .layer-band__crumbs[data-c-layer-band],
  .layer-band--slim[data-c-layer-band] .layer-band__tag {
    margin-block: 0;
  }
}
@media (min-width: 1025px) {
  .layer-band[data-c-layer-band]:not(.layer-band--slim) {
    padding-block: var(--s-8) var(--s-9);
  }
}
@media (max-width: 640px) and (max-height: 740px) {
  .layer-band[data-c-layer-band]:not(.layer-band--slim) {
    padding-block-start: var(--s-6);
  }
}
@media (min-width: 1025px) and (max-height: 860px) {
  .layer-band[data-c-layer-band]:not(.layer-band--slim) {
    padding-block-start: var(--s-7);
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .layer-band[data-c-layer-band]:not(.layer-band--slim) {
    padding-block-start: var(--s-5);
  }
  .layer-band__title[data-c-layer-band] {
    font-size: min(var(--fs-h1), 13cqi, 13svh);
  }
  .layer-band__crumbs[data-c-layer-band],
  .layer-band[data-c-layer-band] .layer-band__tag {
    margin-block-end: var(--s-3);
  }
  .layer-band__tagline[data-c-layer-band] {
    margin-block-start: var(--s-2);
    max-inline-size: 60ch;
    font-size: var(--fs-body);
  }
}
@media (prefers-contrast: more), (forced-colors: active) {
  .layer-band--pattern[data-c-layer-band]::before {
    display: none;
  }
}
@media (forced-colors: active) {
  .layer-band[data-c-layer-band] {
    border-block-end: 1px solid CanvasText;
  }
}
html[data-layer=dine] .layer-band--pattern[data-c-layer-band]::before {
  background-color: #c9953f;
  opacity: 0.9;
}

/* ── filmstrip ── */
/* Filmstrip (sliding row of photos and films).
   Used on: 31 pages, e.g. /404.shtml, /butterfly/, /contact-directions/, /dare2dream-menu/, /dare2dream/.
   Forum Homini website, */
/* (6 Nov 2026) display was grid; always overridden by css/site.css, so its value is here now */
.filmstrip[data-c-filmstrip] {
  --gap: var(--s-4);
  display: none;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: var(--s-4);
  min-inline-size: 0;
}
.filmstrip__label[data-c-filmstrip] {
  grid-column: 1;
  color: var(--fg-muted);
}
.filmstrip__row[data-c-filmstrip] {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 4px;
  margin-block: -4px;
}
.filmstrip__row[data-c-filmstrip]::-webkit-scrollbar {
  display: none;
}
.filmstrip__frame[data-c-filmstrip] {
  flex: 0 0 calc((100% - var(--gap)) / 1.15);
  max-inline-size: var(--max);
  scroll-snap-align: start;
}
.filmstrip__link[data-c-filmstrip] {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 0;
}
.filmstrip__link[data-c-filmstrip] .photo__img {
  transition: opacity var(--t-micro) linear;
}
.filmstrip__link[data-c-filmstrip]:hover .photo__img {
  opacity: 0.88;
}
.filmstrip__link[data-c-filmstrip][aria-current=true] .photo__frame {
  outline: 2px solid var(--indicator);
  outline-offset: 2px;
}
.filmstrip__controls[data-c-filmstrip] {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.filmstrip__count[data-c-filmstrip] {
  min-inline-size: 4.5ch;
  font-size: var(--fs-small);
  text-align: center;
  color: var(--fg-muted);
}
.filmstrip__btn[data-c-filmstrip] {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--fg);
  transition: background-color var(--t-micro) linear, opacity var(--t-micro) linear;
}
.filmstrip__btn[data-c-filmstrip]:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.filmstrip__btn[data-c-filmstrip][aria-disabled=true] {
  opacity: 0.4;
  cursor: default;
}
/* Without JavaScript the row scrolls by touch or trackpad; the buttons would do nothing */
html:not(.js) .filmstrip__controls[data-c-filmstrip] {
  display: none;
}
@media (min-width: 641px) {
  .filmstrip__frame[data-c-filmstrip] {
    flex-basis: calc((100% - 2 * var(--gap)) / 2.2);
  }
}
@media (min-width: 641px) {
  .filmstrip--pair[data-c-filmstrip] .filmstrip__row[data-c-filmstrip] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .filmstrip--pair[data-c-filmstrip] .filmstrip__controls[data-c-filmstrip] {
    display: none;
  }
}
@media (min-width: 1025px) {
  .filmstrip[data-c-filmstrip] {
    --gap: var(--s-5);
  }
  /* Five or fewer: one row, no controls (§8.32) */
  .filmstrip--fits[data-c-filmstrip] .filmstrip__row[data-c-filmstrip] {
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    overflow: visible;
  }
  .filmstrip--fits[data-c-filmstrip] .filmstrip__controls[data-c-filmstrip] {
    display: none;
  }
  /* Mini: 72 px frames, one line, no numbers or controls */
  .filmstrip--mini[data-c-filmstrip] {
    --gap: var(--s-2);
    row-gap: var(--s-2);
  }
  .filmstrip--mini[data-c-filmstrip] .filmstrip__row[data-c-filmstrip] {
    display: flex;
    overflow: visible;
  }
  .filmstrip--mini[data-c-filmstrip] .filmstrip__frame[data-c-filmstrip] {
    flex: 0 0 72px;
  }
  .filmstrip--mini[data-c-filmstrip] .filmstrip__controls[data-c-filmstrip] {
    display: none;
  }
}
@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    .filmstrip__row[data-c-filmstrip] {
      scroll-behavior: smooth;
    }
    [data-swap-target] .photo__img {
      transition: opacity var(--t-ui) var(--ease-settle);
    }
    [data-swap-target][data-swapping] .photo__img {
      opacity: 0;
      transition: opacity 160ms linear;
    }
  }
}

/* ── fire-glow ── */
/* Fire glow behind bands.
   Used on: 31 pages, e.g. /404.shtml, /butterfly/, /contact-directions/, /dare2dream-menu/, /dare2dream/.
   Forum Homini website, */
.fire-glow[data-c-fire-glow],
.fire-glow-host[data-c-fire-glow] .photo__frame::before {
  --glow-core: var(--fire-core, color-mix(in srgb, var(--naledi) 58%, var(--copper)));
  content: "";
  position: absolute;
  z-index: var(--z-media);
  inline-size: var(--glow-size, 18%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(
      closest-side,
      var(--glow-core) 0%,
      color-mix(in srgb, var(--ember) 62%, transparent) 34%,
      color-mix(in srgb, var(--ember) 20%, transparent) 62%,
      transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.7;
  pointer-events: none;
}
.fire-glow[data-c-fire-glow] {
  display: block;
}
.fire-glow-host[data-c-fire-glow] .photo__frame::before {
  inset-inline-start: var(--glow-x);
  inset-block-start: var(--glow-y);
}
@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    html.js .fire-glow[data-c-fire-glow][data-lit]:not(.is-lit),
    html.js .fire-glow-host[data-c-fire-glow]:not(.is-lit) .photo__frame::before {
      opacity: 0;
    }
    .fire-glow[data-c-fire-glow].is-lit,
    .fire-glow-host[data-c-fire-glow].is-lit .photo__frame::before {
      animation: fire-glow 2.4s var(--ease-settle) both;
    }
    @keyframes fire-glow {
      0% {
        opacity: 0;
      }
      45% {
        opacity: 1;
      }
      100% {
        opacity: 0.7;
      }
    }
  }
}
@media (forced-colors: active), (prefers-contrast: more) {
  .fire-glow[data-c-fire-glow],
  .fire-glow-host[data-c-fire-glow] .photo__frame::before {
    display: none;
  }
}
@media print {
  .fire-glow[data-c-fire-glow],
  .fire-glow-host[data-c-fire-glow] .photo__frame::before {
    display: none;
  }
}

/* ── hero-inner ── */
/* Landing photo of inner pages.
   Used on: 31 pages, e.g. /404.shtml, /butterfly/, /contact-directions/, /dare2dream-menu/, /dare2dream/.
   Forum Homini website, */
/* ═══ Shared ════════════════════════════════════════════════════════════════════════════════════════ */
.hero[data-c-hero-inner] {
  --pull: 0px;
  --edge-h: 18px;
  --foot-h: 20px;
  position: relative;
  isolation: isolate;
}
/* Over-photo heroes slide up under the floating header at every width (owner feedback: the pill floats over
     the photo on phones too), so the photo starts under the bar (§7.1) */
.hero--over[data-c-hero-inner] {
  --pull: var(--header-h);
  margin-block-start: calc(-1 * var(--pull));
}
@media (min-width: 641px) {
  .hero[data-c-hero-inner] {
    --edge-h: 24px;
    --foot-h: 24px;
  }
}
@media (min-width: 1025px) {
  .hero[data-c-hero-inner] {
    --edge-h: 28px;
    --foot-h: 28px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero--over[data-c-hero-inner] {
    --pull: 0px;
    margin-block-start: 0;
  }
}
.hero__grain[data-c-hero-inner] {
  position: absolute;
  inset: 0;
  z-index: var(--z-media);
  background-image: var(--grain);
  opacity: var(--grain-photo);
  pointer-events: none;
}
/* ═══ Photo surfaces (section, slim, reflection, monument, band) ═══════════════════════════════════ */
.hero__media[data-c-hero-inner] {
  --media-h: max(260px, 48svh);
  position: relative;
  block-size: calc(var(--media-h) + var(--pull));
  background: var(--layer-band);
  overflow: hidden;
}
.hero__frame[data-c-hero-inner] {
  position: relative;
  inline-size: min(100%, var(--cap));
  block-size: 100%;
  margin-inline: auto;
  overflow: hidden;
}
.hero__drift[data-c-hero-inner] {
  position: absolute;
  inset: 0;
}
.hero__drift[data-c-hero-inner] .hero__photo,
.hero__drift[data-c-hero-inner] .hero__art {
  block-size: 100%;
}
/* A gradient into the band, under the edge (decoration; no text sits on it) */
.hero__shade[data-c-hero-inner] {
  position: absolute;
  inset: 0;
  z-index: var(--z-media);
  background:
    linear-gradient(
      to bottom,
      transparent 58%,
      color-mix(in srgb, var(--layer-band) 55%, transparent));
  pointer-events: none;
}
/* Version 2 (owner, 8 Oct 2026): a title on the photo, at its foot, centred (Dare2Dream); its look is the page's */
.hero__phototitle[data-c-hero-inner] {
  position: absolute;
  inset-inline: var(--margin);
  inset-block-end: clamp(0.75rem, 2.5vw, 2rem);
  z-index: calc(var(--z-media) + 1);
  margin: 0;
  text-align: center;
}
/* The layer edge at the photo's foot, in the band colour: grass tips for Stay, strata for the rest */
.hero__edge[data-c-hero-inner] {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  z-index: var(--z-media-2);
  block-size: var(--edge-h);
  background-color: var(--layer-band);
  -webkit-mask: var(--edge-strata) repeat-x 0 100% / 400px 100%;
  mask: var(--edge-strata) repeat-x 0 100% / 400px 100%;
  pointer-events: none;
}
.hero--edge-grass[data-c-hero-inner] .hero__edge[data-c-hero-inner] {
  -webkit-mask-image: var(--edge-grass);
  mask-image: var(--edge-grass);
  -webkit-mask-size: 320px 100%;
  mask-size: 320px 100%;
}
@media (min-width: 641px) {
  .hero--section[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    --media-h: max(260px, 56svh);
  }
}
@media (min-width: 1025px) {
  .hero--section[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    --media-h: max(260px, min(54svh, 640px));
  }
}
.hero--slim[data-c-hero-inner] .hero__media[data-c-hero-inner] {
  --media-h: max(180px, 30svh);
}
@media (min-width: 641px) {
  .hero--slim[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    --media-h: clamp(180px, 34svh, 420px);
  }
}
@media (min-width: 1025px) {
  .hero--slim[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    --media-h: clamp(180px, 40svh, 420px);
  }
}
.hero--band[data-c-hero-inner] .hero__media[data-c-hero-inner] {
  --media-h: max(150px, 24svh);
}
@media (min-width: 641px) {
  .hero--band[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    --media-h: max(170px, 28svh);
  }
}
@media (min-width: 1025px) {
  .hero--band[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    --media-h: max(190px, 32svh);
  }
}
/* monument: the 4:5 crop on phone, 60svh on tablet, min(80svh, 900px) on desktop */
.hero--monument[data-c-hero-inner] .hero__media[data-c-hero-inner] {
  block-size: min(125vw, 88svh);
}
@media (min-width: 641px) {
  .hero--monument[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    block-size: calc(60svh + var(--pull));
  }
}
@media (min-width: 1025px) {
  .hero--monument[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    block-size: min(80svh, 900px);
  }
}
/* reflection: 4:5 on phone, 16:9 from 641 px (max 80svh on desktop); the title sits at 48% */
.hero--reflection[data-c-hero-inner] .hero__media[data-c-hero-inner] {
  block-size: min(125vw, 90svh);
}
@media (min-width: 641px) {
  .hero--reflection[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    block-size: 56.25vw;
  }
}
@media (min-width: 1025px) {
  .hero--reflection[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    block-size: min(56.25vw, 80svh);
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero__media[data-c-hero-inner] {
    block-size: max(200px, 62svh);
  }
  .hero--reflection[data-c-hero-inner] .hero__media[data-c-hero-inner],
  .hero--monument[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    block-size: min(56.25vw, 90svh);
    aspect-ratio: auto;
    max-block-size: none;
  }
}
/* ═══ First-screen fit (§8.5 "the first screen of every page: its photos, its layer band and its H1";
     §15.8 heroes at 390×664, 844×390 and 1366×768). The photo keeps its §8.5 height where the screen is tall
     enough and gives way on short screens (never below --media-min), so the band's crumbs, H1 and tagline sit
     above the phone dock. --band-need is the band down to a one-line H1 and a short tagline; the Hero adds
     the extra lines it expects for this page's H1 and tagline (--h1-x*, --tag-x*, estimated at build from
     their length) so long titles push the photo up rather than off the first screen. ═══ */
.hero--fit[data-c-hero-inner] {
  --fit-chrome: var(--dock-h, 0px);
  --band-need: 18.5rem;
  --media-min: 200px;
  --fit-extra: calc(var(--h1-x-phone, 0) * var(--fs-h1) * var(--lh-h1) + var(--tag-x-phone, 0) * var(--fs-lede) * var(--lh-lede));
}
.hero--monument[data-c-hero-inner] .hero__media[data-c-hero-inner] {
  --media-h: min(125vw, 88svh);
  --media-min: 280px;
}
.hero--fit[data-c-hero-inner] .hero__media[data-c-hero-inner] {
  block-size: calc(max(var(--media-min), min(var(--media-h), 100svh - var(--fit-chrome) - var(--pull) - var(--band-need) - var(--fit-extra))) + var(--pull));
}
@media (min-width: 641px) {
  .hero--fit[data-c-hero-inner] {
    --fit-chrome: var(--utility-h, 0px);
    --band-need: 18rem;
    --media-min: 260px;
    --fit-extra: calc(var(--h1-x, 0) * var(--fs-h1) * var(--lh-h1) + var(--tag-x, 0) * var(--fs-lede) * var(--lh-lede));
  }
  .hero--monument[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    --media-h: 60svh;
  }
}
@media (min-width: 1025px) {
  .hero--fit[data-c-hero-inner] {
    --band-need: 20rem;
  }
  .hero--band[data-c-hero-inner],
  .hero--slim[data-c-hero-inner] {
    --media-min: 180px;
  }
  .hero--monument[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    --media-h: calc(min(80svh, 900px) - var(--pull));
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero--fit[data-c-hero-inner] {
    --fit-chrome: var(--header-h);
    --band-need: 13.5rem;
    --media-min: 96px;
    --fit-extra: 0px;
  }
  .hero--monument[data-c-hero-inner] .hero__media[data-c-hero-inner] {
    --media-min: 96px;
  }
  .hero__bandcell[data-c-hero-inner] h1 {
    font-size: min(var(--fs-h1), 17cqi, 13svh);
  }
}
/* The team: the tagline over the measured clear sky (x 72–96%, y 25–40%), desktop only (§8.5, §3.2) */
.hero__sky-tagline[data-c-hero-inner] {
  display: none;
}
@media (min-width: 1025px) {
  .hero__sky-tagline[data-c-hero-inner] {
    display: block;
    position: absolute;
    inset-inline-end: 7vw;
    inset-block-start: calc(var(--header-h) + 32px + var(--s-5));
    z-index: var(--z-media-3);
    max-inline-size: 21vw;
    margin: 0;
    font-family: var(--face-text);
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-h3);
    line-height: 1.25;
    color: var(--ink);
    text-wrap: balance;
  }
  /* the band's copy of the tagline gives way to the one on the sky */
  .hero--monument[data-c-hero-inner] .layer-band .layer-band__tagline {
    display: none;
  }
}
/* ═══ The band's extension (strip, slot, type lines) ═══════════════════════════════════════════════ */
.hero--has-ext[data-c-hero-inner] .hero__band {
  padding-block-end: var(--s-5);
}
.hero__ext[data-c-hero-inner] {
  display: flow-root;
  padding-block-end: var(--s-7);
}
.hero__bandslot[data-c-hero-inner] {
  margin-block-start: var(--s-5);
}
.hero__bandcell[data-c-hero-inner] .hero__bandslot[data-c-hero-inner] {
  margin-block-start: 0;
  padding-block-end: var(--s-7);
}
.hero__line[data-c-hero-inner] {
  max-inline-size: var(--measure-lede);
  font-family: var(--face-display);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--fg);
  text-wrap: pretty;
}
.hero__line[data-c-hero-inner] a[data-c-hero-inner] {
  white-space: nowrap;
}
.hero__line[data-c-hero-inner] + .hero__line[data-c-hero-inner] {
  margin-block-start: var(--s-3);
}
.hero__strip[data-c-hero-inner] {
  margin-block-start: var(--s-5);
}
@media (min-width: 1025px) {
  .hero--section[data-c-hero-inner] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .hero--section[data-c-hero-inner] > .hero__media[data-c-hero-inner] {
    grid-row: 1;
    grid-column: 1;
  }
  .hero--section[data-c-hero-inner] > .hero__band {
    grid-row: 2;
  }
  .hero--section[data-c-hero-inner] > .hero__ext[data-c-hero-inner] {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    z-index: var(--z-media-3);
    padding: 0;
    background: none;
    pointer-events: none;
  }
  .hero--section[data-c-hero-inner] > .hero__ext[data-c-hero-inner] > .wrap {
    display: flex;
    justify-content: flex-end;
  }
  .hero--section[data-c-hero-inner] .hero__strip[data-c-hero-inner] {
    --fg: var(--naledi);
    --fg-muted: var(--ash);
    --focus: var(--ember);
    --indicator: var(--ember);
    --border: var(--line-dark);
    margin-block: 0 calc(var(--edge-h) + var(--s-5));
    padding: var(--s-2);
    background: color-mix(in srgb, var(--night) 62%, transparent);
    pointer-events: auto;
  }
  .hero--section[data-c-hero-inner] > .hero__foot[data-c-hero-inner] {
    grid-row: 3;
  }
  .hero--section[data-c-hero-inner].hero--has-ext .hero__band {
    padding-block-end: var(--s-8);
  }
}
/* ═══ Band beside a plate (filmstrip, split) ═══════════════════════════════════════════════════════ */
.hero--plate[data-c-hero-inner] {
  padding-block: 0;
}
.hero--plate[data-c-hero-inner] .hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s-2);
  padding-block-end: var(--s-7);
}
.hero__bandcell[data-c-hero-inner] {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-inline-size: 0;
}
/* LayerBand keeps its own padding; inside the cell it takes the cell's width, not a second container */
.hero__bandcell[data-c-hero-inner] .hero__band {
  background: none;
}
.hero__bandcell[data-c-hero-inner] .hero__band > .wrap {
  inline-size: auto;
  margin-inline: 0;
}
/* The H1 always fits its cell: the longest single word, "Conferences" at the meet layer's 81.25% width, takes
     5.16em, so 17cqi keeps every band word whole (20cqi let its last letter wrap from 1025 px) */
.hero__bandcell[data-c-hero-inner] h1 {
  font-size: min(var(--fs-h1), 17cqi);
}
.hero--plate[data-c-hero-inner].hero--has-ext .hero__band {
  padding-block-end: var(--s-5);
}
.hero__platecell[data-c-hero-inner] {
  --plate-w: min(100%, calc(var(--plate-max, 1320px) + 2 * clamp(12px, 1.6vw, 24px)));
  display: grid;
  grid-template-columns: minmax(0, var(--plate-w));
  row-gap: var(--s-6);
  align-content: center;
  min-inline-size: 0;
}
/* The plate's mat: night on the dark bands, paper on the light ones; its caption reads on it */
.hero__platecell[data-c-hero-inner] .hero__plate {
  --mat: var(--night);
  --caption: var(--ash);
  --rule: var(--line-dark);
  --fg: var(--naledi);
  inline-size: 100%;
  max-inline-size: none;
}
:is([data-layer=dine-day], [data-layer=legal]) .hero__platecell[data-c-hero-inner] .hero__plate {
  --mat: var(--paper);
  --caption: var(--ink-muted);
  --rule: var(--hairline);
  --fg: var(--ink);
}
/* Wine tastings: the ember duotone at 35% behind the band's words (naledi ≥ 7.74:1, §3.2) */
.hero__ambient[data-c-hero-inner] {
  position: absolute;
  inset: 0 calc(-1 * var(--margin));
  z-index: -1;
  opacity: 0.35;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      var(--night) 55%,
      transparent);
  mask-image:
    linear-gradient(
      to bottom,
      var(--night) 55%,
      transparent);
}
@media (min-width: 1025px) {
  .hero--plate[data-c-hero-inner] .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: stretch;
    padding-block: var(--s-7) var(--s-8);
  }
  .hero__bandcell[data-c-hero-inner] {
    grid-column: 1 / span 5;
    padding-inline-end: var(--s-6);
  }
  .hero__platecell[data-c-hero-inner] {
    grid-column: 6 / span 7;
    justify-content: end;
  }
  /* The band's own top padding is already given by the grid */
  .hero--plate[data-c-hero-inner] .hero__band {
    padding-block-start: 0;
  }
  .hero__ambient[data-c-hero-inner] {
    inset: calc(-1 * var(--s-7)) 0 calc(-1 * var(--s-8)) calc(-1 * max(var(--margin), (100vw - var(--content-max)) / 2));
    -webkit-mask-image:
      linear-gradient(
        to right,
        var(--night) 62%,
        transparent);
    mask-image:
      linear-gradient(
        to right,
        var(--night) 62%,
        transparent);
  }
}
/* ═══ The foot: the next ground (paper) rises into the band along the layer's edge ═════════════════ */
.hero__foot[data-c-hero-inner] {
  position: relative;
  display: block;
  block-size: var(--foot-h);
  background-color: var(--layer-band);
}
.hero__foot[data-c-hero-inner]::after {
  content: "";
  position: absolute;
  inset: 0 0 -1px;
  background-color: var(--hero-next, var(--paper));
  -webkit-mask: var(--edge-strata) repeat-x 0 100% / 400px 100%;
  mask: var(--edge-strata) repeat-x 0 100% / 400px 100%;
}
.hero--edge-grass[data-c-hero-inner] .hero__foot[data-c-hero-inner]::after {
  -webkit-mask-image: var(--edge-grass);
  mask-image: var(--edge-grass);
  -webkit-mask-size: 320px 100%;
  mask-size: 320px 100%;
}
/* type: the stromatolite band at the foot of the night band */
.hero__strom[data-c-hero-inner] {
  position: relative;
  display: block;
  block-size: 48px;
  background-color: var(--layer-band);
}
.hero__strom[data-c-hero-inner]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--naledi);
  opacity: 0.16;
  -webkit-mask: var(--pattern-stromatolite) repeat-x 0 100% / auto 100%;
  mask: var(--pattern-stromatolite) repeat-x 0 100% / auto 100%;
}
.hero--type[data-c-hero-inner] .hero__band {
  padding-block-start: var(--s-9);
}
@media (forced-colors: active) {
  .hero__shade[data-c-hero-inner],
  .hero__grain[data-c-hero-inner] {
    display: none;
  }
}
@media (prefers-contrast: more) {
  .hero__grain[data-c-hero-inner] {
    display: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .hero--section[data-c-hero-inner] .hero__strip[data-c-hero-inner] {
    background: var(--night);
  }
}
@layer effects {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1025px) and (pointer: fine) {
    @supports (animation-timeline: view()) {
      .hero--drift[data-c-hero-inner] .hero__media[data-c-hero-inner] {
        view-timeline: --hero-drift block;
      }
      .hero--drift[data-c-hero-inner] .hero__drift[data-c-hero-inner] {
        inset-block-end: -6%;
        animation: hero-drift linear both;
        animation-timeline: --hero-drift;
        animation-range: exit 0% exit 100%;
      }
      @keyframes hero-drift {
        from {
          transform: translate3d(0, 0, 0);
        }
        to {
          transform: translate3d(0, -5.66%, 0);
        }
      }
    }
  }
}
/* owner (17 Oct 2026): "One must see the full picture … fix throughout the website": the whole photo at its own
     shape, starting below the top bar, as large as the screen allows (centred), with no slow zoom, shade or edge on it */
.hero--whole[data-c-hero-inner].hero--over {
  --pull: 0px;
  margin-block-start: 0;
}
.hero--whole[data-c-hero-inner] .hero__media[data-c-hero-inner] {
  block-size: auto !important;
  aspect-ratio: var(--ratio);
  inline-size: min(100%, calc((100svh - var(--header-h) - 24px) * var(--ratio)));
  margin-inline: auto;
}
.hero--whole[data-c-hero-inner] .hero__media[data-c-hero-inner] [data-c-hero-inner]:is(.hero__frame, .hero__drift) {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  transform: none !important;
  animation: none !important;
}
.hero--whole[data-c-hero-inner] .hero__drift[data-c-hero-inner] :is(.hero__art, .hero__photo) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.hero--whole[data-c-hero-inner] .hero__media[data-c-hero-inner] img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform: none;
  animation: none !important;
}
.hero--whole[data-c-hero-inner] [data-c-hero-inner]:is(.hero__shade, .hero__edge) {
  display: none;
}
@media (min-width: 1025px) {
  .hero--whole[data-c-hero-inner] .hero__sky-tagline[data-c-hero-inner] {
    display: none;
    inset-inline-end: calc((100% - min(100%, (100svh - var(--header-h) - 24px) * var(--ratio))) / 2 + 2.5vw);
    inset-block-start: calc(var(--header-h) + var(--s-6));
    max-inline-size: 18vw;
  }
}
@media print {
  .hero--over[data-c-hero-inner] {
    margin-block-start: 0;
  }
  .hero__media[data-c-hero-inner] {
    block-size: auto;
    max-block-size: 40vh;
  }
}
html[data-layer=dine] .hero__foot[data-c-hero-inner]::after {
  background-color: #c9953f;
}

/* ── end-strip ── */
/* Photo strip at the end of inner pages.
   Used on: 31 pages, e.g. /404.shtml, /butterfly/, /contact-directions/, /dare2dream-menu/, /dare2dream/.
   Forum Homini website, */
.end-strip[data-c-end-strip] {
  padding-block: var(--s-8) var(--section-pad);
}

/* ── wall-label ── */
/* Wall labels beside photos.
   Used on: 32 pages, e.g. /404.shtml, /butterfly/, /contact-directions/, /dare2dream-menu/, /dare2dream/.
   Forum Homini website, */
.wall-label[data-c-wall-label] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-2);
  row-gap: var(--s-1);
  margin-block-start: var(--s-3);
  max-inline-size: var(--measure-caption);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--caption);
  text-wrap: pretty;
}
/* The 24 px hairline before the words */
.wall-label[data-c-wall-label]::before {
  content: "";
  flex: none;
  inline-size: 24px;
  block-size: 1px;
  align-self: center;
  background: currentColor;
  opacity: 0.6;
}
.wall-label__index[data-c-wall-label] {
  font-weight: var(--wt-label);
  color: var(--fg);
}
.wall-label__artist[data-c-wall-label] {
  color: var(--fg);
}
.wall-label__artist[data-c-wall-label]::before {
  content: "\b7  ";
  color: var(--caption);
}

/* ── photo ── */
/* Photos.
   Used on: 32 pages, e.g. /404.shtml, /butterfly/, /contact-directions/, /dare2dream-menu/, /dare2dream/.
   Forum Homini website, */
.photo[data-c-photo] {
  --mat-pad: 0px;
  display: block;
  inline-size: 100%;
  max-inline-size: calc(var(--max) + 2 * var(--mat-pad));
  margin: 0;
}
span[data-c-photo].photo {
  display: block;
}
.photo__frame[data-c-photo] {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--mat, var(--paper-deep));
}
.photo[data-c-photo] picture[data-c-photo] {
  display: block;
}
.photo__img[data-c-photo] {
  display: block;
  inline-size: 100%;
  block-size: auto;
  object-position: var(--pos, 50% 50%);
}
/* A crop: the box has its own aspect and the photo covers it at the focal point */
.photo--crop[data-c-photo] .photo__img[data-c-photo] {
  aspect-ratio: var(--box);
  object-fit: cover;
}
/* Plates hang on a paper-deep mat with a hairline edge; the caption sits on the mat (§4.2 Plate) */
/* (6 Nov 2026) box-shadow was inset 0 0 0 1px var(--rule, var(--hairline)); always overridden by css/site.css, so its value is here now */
.photo--mat[data-c-photo] {
  --mat-pad: clamp(12px, 1.6vw, 24px);
  padding: var(--mat-pad);
  padding-block-end: calc(var(--mat-pad) * 0.75);
  background: var(--mat, var(--paper-deep));
  box-shadow: none;
}
.photo--mat[data-c-photo]:not(:has(.wall-label)) {
  padding-block-end: var(--mat-pad);
}
.photo--circle[data-c-photo] .photo__frame[data-c-photo] {
  border-radius: 50%;
  aspect-ratio: 1;
}
.photo--circle[data-c-photo] .photo__img[data-c-photo] {
  block-size: 100%;
  object-fit: cover;
}
.photo--object[data-c-photo] .photo__frame[data-c-photo] {
  background: none;
}
/* Full-bleed heroes and bands: fill the box the parent gives (still never wider than the cap) */
.photo--fill[data-c-photo] {
  block-size: 100%;
  margin-inline: auto;
}
.photo--fill[data-c-photo] .photo__frame[data-c-photo],
.photo--fill[data-c-photo] picture[data-c-photo] {
  block-size: 100%;
}
.photo--fill[data-c-photo] .photo__img[data-c-photo] {
  block-size: 100%;
  object-fit: cover;
}
@media (forced-colors: active) {
  .photo__frame[data-c-photo] {
    border: 1px solid CanvasText;
  }
}

/* ── downloads ── */
/* Download lists (PDFs).
   Used on: /contact-directions/, /forum-homini-hotel/conference/, /forum-homini-hotel/weddings/.
   Forum Homini website, */
.downloads[data-c-downloads] {
  margin: 0;
  padding: 0;
  list-style: none;
}
.downloads__link[data-c-downloads] {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.downloads__link[data-c-downloads]:visited {
  color: var(--fg);
}
.downloads__mark[data-c-downloads] {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 52px;
  border: 1px solid var(--border);
  color: var(--link);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  position: relative;
}
.downloads__mark[data-c-downloads]::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: -1px;
  inline-size: 13px;
  block-size: 13px;
  background:
    linear-gradient(
      to bottom left,
      transparent 50%,
      var(--border) 50%,
      var(--border) calc(50% + 1px),
      transparent calc(50% + 1px));
}
.downloads__text[data-c-downloads] {
  flex: 1 1 auto;
  min-inline-size: 0;
}
.downloads__label[data-c-downloads] {
  font-weight: var(--wt-ui);
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-thickness);
  text-underline-offset: var(--link-offset);
  text-decoration-skip-ink: auto;
}
.downloads__link[data-c-downloads]:hover .downloads__label[data-c-downloads] {
  text-decoration-thickness: var(--link-thickness-hover);
}
.downloads__meta[data-c-downloads] {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  white-space: nowrap;
}
.downloads[data-c-downloads] .downloads__go {
  flex: none;
  color: var(--fg-muted);
}
/* ── list: ruled rows ──────────────────────────────────────────────────────────────────────────────── */
.downloads--list[data-c-downloads] {
  max-inline-size: 44rem;
  border-block-end: 1px solid var(--rule);
}
.downloads--list[data-c-downloads] .downloads__item[data-c-downloads] {
  border-block-start: 1px solid var(--rule);
}
.downloads--list[data-c-downloads] .downloads__link[data-c-downloads] {
  min-block-size: 72px;
  padding-block: var(--s-3);
  padding-inline-end: var(--s-2);
  transition: background-color var(--t-micro) linear;
}
.downloads--list[data-c-downloads] .downloads__link[data-c-downloads]:hover {
  background-color: color-mix(in srgb, var(--fg) 5%, transparent);
}
/* ── cards: 1 / 2 / 4 columns ──────────────────────────────────────────────────────────────────────── */
.downloads--cards[data-c-downloads] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
}
.downloads--cards[data-c-downloads] .downloads__item[data-c-downloads] {
  display: flex;
}
.downloads--cards[data-c-downloads] .downloads__link[data-c-downloads] {
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "cover cover" "mark go" "text text";
  align-content: start;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--mat, var(--paper-deep));
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow var(--t-micro) linear;
}
.downloads--cards[data-c-downloads] .downloads__link[data-c-downloads]:hover {
  box-shadow: inset 0 0 0 1px var(--border);
}
.downloads__cover[data-c-downloads] {
  grid-area: cover;
  display: block;
}
.downloads--cards[data-c-downloads] .downloads__mark[data-c-downloads] {
  grid-area: mark;
}
.downloads--cards[data-c-downloads] .downloads__text[data-c-downloads] {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.downloads--cards[data-c-downloads] .downloads__label[data-c-downloads] {
  font-family: var(--face-display);
  font-size: var(--fs-lede);
  font-weight: var(--wt-lede);
  line-height: var(--lh-lede);
}
.downloads--cards[data-c-downloads] .downloads__go {
  grid-area: go;
  justify-self: end;
  align-self: start;
}
@media (max-width: 640px) {
  .downloads--cards[data-c-downloads] .downloads__link[data-c-downloads] {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "cover cover cover" "mark text go";
    align-items: center;
    padding: var(--s-4);
  }
  .downloads--cards[data-c-downloads] .downloads__label[data-c-downloads] {
    font-size: var(--fs-body);
    line-height: 1.35;
  }
  .downloads--cards[data-c-downloads] .downloads__go {
    align-self: center;
  }
}
@media (min-width: 641px) {
  .downloads--cards[data-c-downloads] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1025px) {
  .downloads--cards[data-c-downloads] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .downloads--list[data-c-downloads] .downloads__link[data-c-downloads] {
    min-block-size: 64px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @layer effects {
    .downloads[data-c-downloads] .downloads__go {
      transition: translate var(--t-micro) var(--ease-settle);
    }
    .downloads__link[data-c-downloads]:hover .downloads__go {
      translate: 2px -2px;
    }
  }
}
@media (forced-colors: active) {
  .downloads__mark[data-c-downloads] {
    border-color: CanvasText;
  }
  .downloads--cards[data-c-downloads] .downloads__link[data-c-downloads] {
    border: 1px solid CanvasText;
  }
}

/* ── copy-coordinates ── */
/* Copy the GPS coordinates button.
   Used on: /contact-directions/, /enquiries-directions/conference-enquiries/, /enquiries-directions/hotel-enquiries/, /enquiries-directions/restaurant-enquiries/, /enquiries-directions/wedding-enquiries/.
   Forum Homini website, */
.copy-coords[data-c-copy-coordinates] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.copy-coords__status[data-c-copy-coordinates] {
  font-size: var(--fs-small);
  font-weight: var(--wt-ui);
  color: var(--fg-muted);
}
.copy-coords[data-c-copy-coordinates][data-state=copied] .copy-coords__button[data-c-copy-coordinates] {
  border-color: var(--indicator);
}

/* ── contact-block ── */
/* Contact details block.
   Used on: /contact-directions/, /enquiries-directions/conference-enquiries/, /enquiries-directions/hotel-enquiries/, /enquiries-directions/restaurant-enquiries/, /enquiries-directions/wedding-enquiries/.
   Forum Homini website, */
.contact[data-c-contact-block] {
  display: block;
  max-inline-size: 100%;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}
/* ── The intro line ────────────────────────────────────────────────────────────────────────────────── */
.contact__intro[data-c-contact-block] {
  margin-block-end: var(--s-3);
  font-weight: var(--wt-ui);
  color: var(--fg);
}
.contact__intro--voice[data-c-contact-block] {
  margin-block-end: var(--s-5);
  max-inline-size: 30ch;
  font-family: var(--face-italic);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  font-weight: var(--wt-italic);
  color: var(--heading);
}
.contact--lg[data-c-contact-block] .contact__intro[data-c-contact-block] {
  font-family: var(--face-display);
  font-size: var(--fs-lede);
  font-weight: var(--wt-lede);
  line-height: var(--lh-lede);
  color: var(--heading);
}
/* ── Lines: 56 px tap rows up to 1024 px (§8.18), hairlines between them ───────────────────────────── */
.contact__rows[data-c-contact-block] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--s-6);
  border-block-end: 1px solid var(--rule);
}
.contact[data-c-contact-block] .contact__line {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-inline-size: 0;
  margin: 0;
  border-block-start: 1px solid var(--rule);
}
.contact[data-c-contact-block] .contact__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-block-size: 56px;
  min-inline-size: 0;
  padding-block: var(--s-2);
  padding-inline-end: var(--s-2);
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-micro) linear;
}
.contact[data-c-contact-block] a.contact__link:visited {
  color: var(--fg);
}
.contact[data-c-contact-block] a.contact__link:hover {
  background-color: color-mix(in srgb, var(--fg) 5%, transparent);
}
.contact[data-c-contact-block] .contact__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--link);
}
.contact[data-c-contact-block] .contact__kv {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}
.contact[data-c-contact-block] .contact__k {
  font-size: var(--fs-label);
  font-weight: var(--wt-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.contact[data-c-contact-block] .contact__v {
  font-weight: var(--wt-ui);
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: var(--fg);
}
/* A phone number or an email address never breaks across lines (an address never breaks at '@') */
.contact[data-c-contact-block] :is(a[href^="tel:"], a[href^="mailto:"]) .contact__v {
  white-space: nowrap;
}
/* The cell row with its WhatsApp pill: the pill wraps under the number when the column is narrow */
.contact[data-c-contact-block] .contact__line--split {
  flex-wrap: wrap;
  column-gap: var(--s-3);
}
.contact[data-c-contact-block] .contact__line--split .contact__link {
  flex: 1 0 auto;
}
.contact[data-c-contact-block] .contact__line--split .contact__wa {
  margin-block: var(--s-2);
  margin-inline-start: auto;
}
.contact[data-c-contact-block] a .contact__v {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-thickness);
  text-underline-offset: var(--link-offset);
  text-decoration-skip-ink: auto;
}
.contact[data-c-contact-block] a:hover .contact__v {
  text-decoration-thickness: var(--link-thickness-hover);
}
.contact[data-c-contact-block] .contact__go {
  flex: none;
  color: var(--fg-muted);
}
/* The WhatsApp pill after the cell row (N-CON-01) */
/* (6 Nov 2026) min-block-size was 44px; always overridden by css/site.css, so its value is here now */
.contact[data-c-contact-block] .contact__wa {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 36px;
  padding-inline: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--fg);
  font-size: var(--fs-small);
  font-weight: var(--wt-ui);
  text-decoration: none;
  white-space: nowrap;
}
.contact[data-c-contact-block] .contact__wa:visited {
  color: var(--fg);
}
.contact[data-c-contact-block] .contact__wa:hover {
  border-color: currentColor;
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}
.contact[data-c-contact-block] .contact__wa .icon {
  color: var(--link);
}
/* V3: one old line; the intro stays text, the two links become tap rows */
.contact__oneline[data-c-contact-block] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--s-6);
  margin: 0;
  border-block-end: 1px solid var(--rule);
}
.contact__oneline[data-c-contact-block] > .contact__link[data-c-contact-block] {
  border-block-start: 1px solid var(--rule);
}
.contact[data-c-contact-block] .contact__letamo {
  margin-block-start: var(--s-5);
}
@media (min-width: 641px) and (max-width: 1024px) {
  .contact__rows[data-c-contact-block],
  .contact__oneline[data-c-contact-block] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact__oneline[data-c-contact-block] > .contact__intro[data-c-contact-block],
  .contact[data-c-contact-block] .contact__line--email {
    grid-column: 1 / -1;
  }
  /* No cell line (V4): each row runs the full width, not a lone half row */
  .contact__rows--solo[data-c-contact-block] {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1025px) {
  .contact[data-c-contact-block]:not(.contact--contact-page) [data-c-contact-block]:is(.contact__rows, .contact__oneline) {
    display: block;
    border: 0;
  }
  .contact[data-c-contact-block]:not(.contact--contact-page) .contact__line {
    display: block;
    padding-block: 2px;
    border: 0;
  }
  .contact[data-c-contact-block]:not(.contact--contact-page) .contact__link {
    display: inline;
    min-block-size: 0;
    padding: 0;
    border: 0;
  }
  .contact[data-c-contact-block]:not(.contact--contact-page) a.contact__link:hover {
    background: none;
  }
  .contact[data-c-contact-block]:not(.contact--contact-page) :is(.contact__icon, .contact__go) {
    display: none;
  }
  .contact[data-c-contact-block]:not(.contact--contact-page) .contact__kv {
    display: inline;
  }
  .contact[data-c-contact-block]:not(.contact--contact-page) .contact__k {
    font-size: inherit;
    font-weight: var(--wt-body);
    line-height: inherit;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fg);
  }
  .contact[data-c-contact-block]:not(.contact--contact-page) .contact__v {
    font-weight: var(--wt-body);
    line-height: inherit;
  }
  .contact--V3[data-c-contact-block] .contact__oneline[data-c-contact-block] > .contact__intro[data-c-contact-block] {
    margin: 0;
  }
  /* Rates and Menus & Rates: the block is the page, so the lines are set larger */
  .contact--lg[data-c-contact-block]:not(.contact--contact-page) .contact__line {
    padding-block: var(--s-1);
    font-family: var(--face-display);
    font-size: var(--fs-lede);
    line-height: var(--lh-lede);
  }
  .contact--lg[data-c-contact-block] .contact__k {
    color: var(--fg-muted);
  }
  /* Contact page on desktop: a ledger, key above value, hairlines between the rows */
  .contact--contact-page[data-c-contact-block] .contact__rows[data-c-contact-block] {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact--contact-page[data-c-contact-block] .contact__link {
    min-block-size: 72px;
    padding-block: var(--s-3);
  }
  .contact--contact-page[data-c-contact-block] .contact__v {
    font-family: var(--face-display);
    font-size: var(--fs-lede);
    font-weight: var(--wt-lede);
    line-height: var(--lh-lede);
  }
  .contact--contact-page[data-c-contact-block] .contact__k {
    margin-block-end: 2px;
  }
}
/* ── Coordinates (Contact page): set large in Display at normal width ─────────────────────────────── */
.contact__coords[data-c-contact-block] {
  display: grid;
  justify-items: start;
  gap: var(--s-2);
  padding-block-start: var(--s-6);
}
/* (6 Nov 2026) letter-spacing was var(--tr-label); always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) text-transform was uppercase; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) color was var(--fg-muted); always overridden by css/site.css, so its value is here now */
.contact__coords-k[data-c-contact-block] {
  font-size: var(--fs-label);
  font-weight: var(--wt-label);
  line-height: var(--lh-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6c27a;
}
.contact__coords-dms[data-c-contact-block] {
  font-family: var(--face-display);
  font-size: var(--fs-l);
  font-weight: var(--wt-display);
  font-stretch: 100%;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--heading);
}
.contact__coords-dms[data-c-contact-block] > span[data-c-contact-block] {
  white-space: nowrap;
}
.contact__coords-dec[data-c-contact-block] {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}
.contact__coords[data-c-contact-block] .copy-coords {
  margin-block-start: var(--s-3);
}
@media (prefers-reduced-motion: no-preference) {
  @layer effects {
    .contact[data-c-contact-block] .contact__go {
      transition: translate var(--t-micro) var(--ease-settle);
    }
    .contact[data-c-contact-block] a.contact__link:hover .contact__go {
      translate: 3px 0;
    }
  }
}
@media (forced-colors: active) {
  .contact[data-c-contact-block] .contact__icon {
    border-color: CanvasText;
  }
}

/* ── enquire-band ── */
/* Enquire band near the end of pages.
   Used on: /contact-directions/, /forum-homini-hotel/conference/, /forum-homini-hotel/private-functions/, /forum-homini-hotel/weddings/, /more/gallery/, /more/the-team/.
   Forum Homini website, */
.enq[data-c-enquire-band] {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-block-size: clamp(360px, 56svh, 600px);
  padding-block: var(--gap-section, var(--section-pad));
  overflow: hidden;
  background-color: var(--night);
  text-align: center;
}
@media (min-width: 900px) {
  .enq[data-c-enquire-band] {
    min-block-size: min(88svh, 52vw);
  }
  .enq__media[data-c-enquire-band] .photo__img {
    object-position: 45% 39%;
  }
}
.enq__media[data-c-enquire-band] {
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      rgb(0 0 0 / 0.5) 9%,
      #000 22%,
      #000 80%,
      rgb(0 0 0 / 0.5) 91%,
      transparent 100%);
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      rgb(0 0 0 / 0.5) 9%,
      #000 22%,
      #000 80%,
      rgb(0 0 0 / 0.5) 91%,
      transparent 100%);
}
.enq__media[data-c-enquire-band] .enq__photo {
  position: absolute;
  inset: 0;
  max-inline-size: none;
  inline-size: 100%;
}
/* an even night over the whole photo, so the gold words read calmly in the middle */
.enq__media[data-c-enquire-band]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--night) 72%, transparent);
}
.enq[data-c-enquire-band] .enq__inner {
  display: grid;
  justify-items: center;
  gap: var(--gap-heading, var(--s-5));
  max-inline-size: 44rem;
}
.enq__h[data-c-enquire-band] {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: 0.95;
  color: #f3d792;
}
.enq__go[data-c-enquire-band],
.enq__go[data-c-enquire-band]:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-inline: var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background-image:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
  font-size: var(--fs-small);
  font-weight: var(--wt-ui);
  text-decoration: none;
  white-space: nowrap;
}
.enq__go[data-c-enquire-band]:hover {
  filter: brightness(1.06);
}
.enq__also[data-c-enquire-band] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
}
.enq__or[data-c-enquire-band] {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  font-style: normal;
  font-family: var(--face-text);
}
html .enq[data-c-enquire-band] .enq__word[data-c-enquire-band],
html .enq[data-c-enquire-band] .enq__word[data-c-enquire-band]:visited {
  color: #f3d792;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  white-space: nowrap;
}
html .enq[data-c-enquire-band] .enq__word[data-c-enquire-band]:hover {
  color: #fff3cf;
}
@media (forced-colors: active) {
  .enq__go[data-c-enquire-band] {
    border: 1px solid LinkText;
  }
}
@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .enq__media[data-c-enquire-band] .photo__img {
        animation: enq-settle linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 55%;
      }
      html.js .enq[data-c-enquire-band] .enq__inner {
        animation: enq-rise linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 40%;
      }
      @keyframes enq-settle {
        from {
          transform: scale(1.14);
        }
        to {
          transform: scale(1);
        }
      }
      @keyframes enq-rise {
        from {
          opacity: 0;
          transform: translateY(40px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
    }
  }
}

/* ── home-actions ── */
/* Action buttons under landing photos.
   Used on: 9 pages, e.g. /dare2dream/, /forest-breakfast/, /forum-homini-hotel/private-functions/, /romantic-dinners/, /romantic-dinners/fantasy-view/.
   Forum Homini website, */
/* (6 Nov 2026) align-items was center; always overridden by css/site.css, so its value is here now */
.ha[data-c-home-actions] {
  --ha-h: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}
.ha--lg[data-c-home-actions] {
  --ha-h: 60px;
}
/* (6 Nov 2026) justify-content was center; always overridden by css/site.css, so its value is here now */
.ha--center[data-c-home-actions] {
  justify-content: center;
}
.ha--dark[data-c-home-actions] {
  --ha-solid: var(--naledi);
  --ha-on-solid: var(--night);
  --ha-solid-hover: var(--ember);
  --ha-fg: var(--naledi);
}
.ha--light[data-c-home-actions] {
  --ha-solid: var(--ink);
  --ha-on-solid: var(--paper);
  --ha-solid-hover: var(--rust);
  --ha-fg: var(--ink);
}
.ha__enquire[data-c-home-actions],
.ha__book[data-c-home-actions] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: var(--ha-h);
  padding-inline: var(--s-6);
  border: 1.5px solid var(--ha-solid);
  border-radius: var(--r-pill);
  font-family: var(--face-text);
  font-size: var(--fs-button);
  font-weight: var(--wt-label);
  letter-spacing: var(--tr-button);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--t-micro) var(--ease-settle),
    border-color var(--t-micro) var(--ease-settle),
    color var(--t-micro) var(--ease-settle);
}
.ha--lg[data-c-home-actions] .ha__enquire[data-c-home-actions] {
  padding-inline: var(--s-7) calc(var(--s-6) + 2px);
  font-size: var(--fs-m);
}
.ha__enquire[data-c-home-actions],
.ha__enquire[data-c-home-actions]:visited {
  background-color: var(--ha-solid);
  color: var(--ha-on-solid);
}
.ha__enquire[data-c-home-actions]:hover {
  background-color: var(--ha-solid-hover);
  border-color: var(--ha-solid-hover);
}
.ha__book[data-c-home-actions],
.ha__book[data-c-home-actions]:visited {
  background: transparent;
  border-color: color-mix(in srgb, var(--ha-fg) 55%, transparent);
  color: var(--ha-fg);
}
.ha__book[data-c-home-actions]:hover {
  border-color: var(--ha-fg);
  background-color: color-mix(in srgb, var(--ha-fg) 10%, transparent);
}
/* (6 Nov 2026) min-block-size was 44px; always overridden by css/site.css, so its value is here now */
.ha__link[data-c-home-actions],
.ha__link[data-c-home-actions]:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 36px;
  padding-inline: var(--s-1);
  color: var(--ha-fg);
  font-family: var(--face-text);
  font-size: var(--fs-button);
  font-weight: var(--wt-ui);
  text-decoration: none;
}
.ha__link-text[data-c-home-actions] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.3em;
}
.ha__link[data-c-home-actions]:hover .ha__link-text[data-c-home-actions] {
  text-decoration-color: currentColor;
}
.ha[data-c-home-actions] .ha__arrow {
  flex: none;
  transition: translate var(--t-micro) var(--ease-settle);
}
.ha[data-c-home-actions] .ha__ext {
  flex: none;
  opacity: 0.8;
}
@media (prefers-reduced-motion: no-preference) {
  .ha[data-c-home-actions] a[data-c-home-actions]:hover .ha__arrow {
    translate: 3px 0;
  }
}
@media (max-width: 640px) {
  .ha[data-c-home-actions]:has(.ha__book) .ha__enquire[data-c-home-actions],
  .ha__book[data-c-home-actions] {
    flex: 1 1 9rem;
    padding-inline: var(--s-4);
  }
  .ha--lg[data-c-home-actions] .ha__enquire[data-c-home-actions] {
    padding-inline: var(--s-4);
  }
}
@media (forced-colors: active) {
  .ha__enquire[data-c-home-actions],
  .ha__book[data-c-home-actions] {
    border-color: ButtonText;
  }
}

/* ── plate-carousel ── */
/* Plate carousel (turning ring of photos).
   Used on: /dare2dream/, /rootsrestaurant/dining-concept/.
   Forum Homini website, */
.pc[data-c-plate-carousel] {
  --card: clamp(110px, 12vw, 190px);
  --radius: clamp(240px, 38vw, 640px);
  --spot: min(58svh, 86vw, 660px);
  padding-block: var(--s-7) var(--section-pad, var(--s-10));
  background: var(--pc-bg, var(--night));
  color: var(--naledi);
  overflow: clip;
}
.pc__head[data-c-plate-carousel] {
  display: grid;
  gap: var(--s-3);
  justify-items: center;
  padding-inline: var(--margin);
  text-align: center;
}
/* the same gold title as Objets d'art */
.pc__h[data-c-plate-carousel] {
  font-family: var(--face-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  background:
    linear-gradient(
      180deg,
      #f7e2a6,
      #c9953f 60%,
      #f1d48a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pc__lede[data-c-plate-carousel] {
  max-inline-size: 52ch;
  font-family: var(--face-text);
  font-style: normal;
  font-size: var(--fs-m);
  color: var(--naledi);
}
.pc__price-line[data-c-plate-carousel] {
  display: block;
}
/* (23 Oct 2026) Roots: room to breathe at the top: the courses, a gap, the chef, a bigger gap, the prices together, a
     bigger gap, the staying-over line on its own, then the carousel */
.pc[data-c-plate-carousel][data-flow] .pc__head[data-c-plate-carousel] {
  gap: 0;
}
.pc[data-c-plate-carousel][data-flow] .pc__head[data-c-plate-carousel] > [data-c-plate-carousel] {
  margin: 0;
}
html body main .pc[data-c-plate-carousel][data-flow] .pc__head[data-c-plate-carousel] > .pc__chef[data-c-plate-carousel] {
  margin-block-start: var(--gap-heading, 24px);
  font-family: var(--face-text);
  font-size: var(--fs-l);
  font-weight: var(--wt-label, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6c27a;
}
.pc__chef[data-c-plate-carousel] span[data-c-plate-carousel] {
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .pc__chef[data-c-plate-carousel] span[data-c-plate-carousel] {
    animation: pc-breathe 5s ease-in-out infinite;
  }
}
@keyframes pc-breathe {
  0%, 100% {
    scale: 1;
  }
  50% {
    scale: 1.08;
  }
}

html body main .pc[data-c-plate-carousel][data-flow] .pc__head[data-c-plate-carousel] > .pc__price[data-c-plate-carousel] {
  margin-block-start: var(--gap-item, 40px) !important;
  line-height: 1.5;
}
/* (owner, 31 Oct 2026: "The 950 must be before the words a menu carousel") */
.pc[data-c-plate-carousel][data-flow]:has(.pc__price-note--below) .pc__head[data-c-plate-carousel] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
html body main .pc[data-c-plate-carousel][data-flow]:has(.pc__price-note--below) .pc__head[data-c-plate-carousel] > .pc__price[data-c-plate-carousel] {
  order: -1;
  margin-block: -53px 59px !important;
}
/* (9 Nov 2026, Karina's list 6.3) the phone's smaller pull-up now holds up to 1179px wide: between 641 and 1179px the
   -53px pulled the price above the carousel's top edge and its top half was cut off (tablets, half-width windows).
   Was @media (max-width: 640px). */
@media (max-width: 1179px) {
  html body main .pc[data-c-plate-carousel][data-flow]:has(.pc__price-note--below) .pc__head[data-c-plate-carousel] > .pc__price[data-c-plate-carousel] {
    margin-block: -33px 39px !important;
  }
}
html body main .pc[data-c-plate-carousel][data-flow] .pc__head[data-c-plate-carousel] > .pc__h--name[data-c-plate-carousel] {
  margin-block-start: var(--gap-item, 40px) !important;
}
.pc__price-note--below[data-c-plate-carousel] {
  max-inline-size: 30ch;
  margin: var(--s-5) auto 0;
  text-align: center;
}
html body main .pc[data-c-plate-carousel][data-flow] .pc__head[data-c-plate-carousel] > .pc__price-note[data-c-plate-carousel] {
  margin-block-start: var(--gap-item, 40px);
  max-inline-size: 30ch;
}
html body main .pc[data-c-plate-carousel][data-flow] .pc__head[data-c-plate-carousel] > .pc__label[data-c-plate-carousel] {
  margin-block-start: var(--gap-item, 40px) !important;
}
/* owner (13 Oct 2026): "Should 8 course fine dining dinner not be a bigger font? and by on its own line and then the
     chef": the dish line in the big size, "by" small on its own line, the chef's name under it */
.pc[data-c-plate-carousel]:has(.pc__label) .pc__h[data-c-plate-carousel] .pc__h-main[data-c-plate-carousel] {
  display: block;
  font-size: var(--fs-xl);
  line-height: 1.1;
  color: #fff;
}
/* owner (13 Oct 2026): "the light gold by Executive Chef and Tarollo (Stevo) Maybe use this type of font you have at
     'COURSE 2 OF 4'": both lines in the small spaced capitals of the course label, larger than it, the name larger still */
.pc__h[data-c-plate-carousel] .pc__h-sub[data-c-plate-carousel].pc__h-by,
.pc__h[data-c-plate-carousel] .pc__h-sub[data-c-plate-carousel].pc__h-name {
  font-family: var(--face-text);
  font-style: normal;
  font-weight: var(--wt-label, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6c27a;
}
/* (owner: "the words by Executive Chef is too small"): one size up from before, the name larger still */
.pc__h[data-c-plate-carousel] .pc__h-sub[data-c-plate-carousel].pc__h-by {
  font-size: var(--fs-m);
  margin-block-start: 0.7em;
}
.pc__h[data-c-plate-carousel] .pc__h-sub[data-c-plate-carousel].pc__h-name {
  font-size: var(--fs-l);
  margin-block-start: 0.15em;
}
.pc__h-sub[data-c-plate-carousel] {
  display: block;
  margin-block-start: 0.2em;
  font-family: var(--face-text);
  font-style: normal;
  font-size: var(--fs-m);
  color: var(--naledi);
}
.pc__price[data-c-plate-carousel] {
  font-family: var(--face-display);
  font-size: var(--fs-l);
  letter-spacing: 0.02em;
  color: #e3c27a;
}
/* owner (12 Oct 2026): "Do this sentence on both restaurants in white to stand out: Staying over? Dinner is included
     in your room rate, at Roots or Dare2Dream" */
.pc__price-note[data-c-plate-carousel] {
  font-family: var(--face-text);
  font-style: normal;
  font-size: var(--fs-m);
  color: #fff;
}
.pc__stage[data-c-plate-carousel] {
  position: relative;
  block-size: calc(var(--spot) + var(--s-6));
  margin-block-start: var(--s-5);
  perspective: 1600px;
  perspective-origin: 50% 30%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.pc__stage[data-c-plate-carousel]:active {
  cursor: grabbing;
}
/* the ring of plates, behind the big one */
.pc__ring[data-c-plate-carousel] {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--radius) * -1)) rotateX(-9deg) rotateY(var(--angle, 0deg));
}
.pc__item[data-c-plate-carousel] {
  --depth: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  inline-size: var(--card);
  aspect-ratio: 1;
  margin: calc(var(--card) / -2) 0 0 calc(var(--card) / -2);
  transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--radius));
  filter: brightness(calc(0.35 + var(--depth) * 0.65));
}
.pc__plate[data-c-plate-carousel] {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #f7e2a6,
      #b8862f 45%,
      #f3d792 70%,
      #8d6420);
  box-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.8);
  cursor: pointer;
}
.pc__img[data-c-plate-carousel] {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
}
/* the big plate: it rises out of the ring and grows as its dish reaches the front, and sinks back as the ring turns */
.pc__spot[data-c-plate-carousel] {
  --pop: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  inline-size: var(--spot);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(0.86 + var(--pop) * 0.14));
  opacity: 1;
  box-shadow:
    0 0 0 5px #c9953f,
    0 0 70px 10px rgb(233 196 106 / calc(var(--pop) * 0.35)),
    0 40px 90px -30px rgb(0 0 0 / 0.9);
}
.pc__big[data-c-plate-carousel] {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0;
}
/* the big circle stays whole and in front while the ring turns behind it; its photos crossfade */
.pc__spot[data-c-plate-carousel] {
  overflow: clip;
  z-index: 5;
  background: #0b0705;
}
.pc__big[data-c-plate-carousel] {
  scale: 1.08;
  transition: opacity 1.1s ease, scale 6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.pc__big[data-c-plate-carousel].is-on {
  opacity: 1;
  scale: 1;
}
/* ═══ flow (Roots, owner 17 Oct 2026): as Objets d'art, the ring turns calmly and the front plate grows; no big plate ═══ */
.pc[data-c-plate-carousel][data-flow] {
  --card: clamp(180px, 20vw, 300px);
  --radius: max(var(--card), calc(var(--card) * var(--n) * 0.151));
}
.pc[data-c-plate-carousel][data-flow] .pc__stage[data-c-plate-carousel] {
  block-size: calc(var(--card) * 1.85);
  perspective-origin: 50% 20%;
}
.pc[data-c-plate-carousel][data-flow] .pc__ring[data-c-plate-carousel] {
  transform: translateZ(calc(var(--radius) * -1)) rotateX(-7deg) rotateY(var(--angle, 0deg));
}
.pc[data-c-plate-carousel][data-flow] .pc__item[data-c-plate-carousel] {
  top: 12%;
  margin-block-start: 0;
  transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(calc(var(--radius) + var(--lift, 0px)));
  filter: none;
  z-index: calc(var(--depth) * 10);
}
.pc[data-c-plate-carousel][data-flow] .pc__plate[data-c-plate-carousel] {
  position: relative;
  padding: 6px;
  transform: scale(var(--zoom, 1));
  will-change: transform;
}
.pc__veil[data-c-plate-carousel] {
  display: none;
}
.pc[data-c-plate-carousel][data-flow] .pc__veil[data-c-plate-carousel] {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #000;
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}
.pc[data-c-plate-carousel][data-flow] .pc__item[data-c-plate-carousel].is-front .pc__plate[data-c-plate-carousel] {
  box-shadow: 0 0 40px 6px rgb(233 196 106 / 0.45), 0 24px 50px -14px rgb(0 0 0 / 0.85);
}
.pc[data-c-plate-carousel][data-flow] [data-c-plate-carousel]:is(.pc__spot, .pc__play, .pc__vol) {
  display: none;
}
@media (max-width: 640px) {
  .pc[data-c-plate-carousel][data-flow] {
    --card: 140px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pc__big[data-c-plate-carousel] {
    scale: 1;
    transition: none;
  }
}
/* the film, inside the big circle: a 16:9 picture as tall as the circle, its sides cut off by the round edge */
.pc__film[data-c-plate-carousel] {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}
.pc__film[data-c-plate-carousel] iframe[data-c-plate-carousel] {
  position: absolute;
  top: 0;
  left: 50%;
  block-size: 100%;
  inline-size: calc(100% * 16 / 9);
  translate: -50% 0;
  border: 0;
}
/* the site's own films (upright phone videos) fill the circle */
.pc__film[data-c-plate-carousel] video[data-c-plate-carousel] {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  background: #000;
}
.pc__spot[data-c-plate-carousel].is-playing {
  pointer-events: auto;
}
.pc__play[data-c-plate-carousel] {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  display: grid;
  place-items: center;
  inline-size: 84px;
  block-size: 84px;
  padding: 0 0 0 6px;
  translate: -50% -50%;
  border: 2px solid #f3d792;
  border-radius: 50%;
  background: color-mix(in srgb, var(--night) 55%, transparent);
  backdrop-filter: blur(6px);
  color: #f3d792;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.8);
  transition: background-color var(--t-micro, 120ms) linear, scale 200ms ease;
}
.pc__vol[data-c-plate-carousel] {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 14px;
  translate: -50% 0;
  border: 1.5px solid #f3d792;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--night) 70%, transparent);
  backdrop-filter: blur(6px);
  color: #f3d792;
}
.pc__vol[data-c-plate-carousel][hidden] {
  display: none;
}
.pc__vol-in[data-c-plate-carousel] {
  inline-size: 120px;
  accent-color: #f3d792;
}
.pc__play[data-c-plate-carousel][hidden] {
  display: none;
}
.pc__play[data-c-plate-carousel]:hover {
  background: color-mix(in srgb, #c9953f 70%, transparent);
  color: var(--night);
  scale: 1.06;
}
.pc__play[data-c-plate-carousel]:focus-visible {
  outline: 3px solid var(--naledi);
  outline-offset: 4px;
}
/* (6 Nov 2026) inline-size was 52px; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) block-size was 52px; always overridden by css/site.css, so its value is here now */
.pc__arrow[data-c-plate-carousel] {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 30;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 1.5px solid color-mix(in srgb, var(--naledi) 60%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--night) 45%, transparent);
  color: var(--naledi);
  cursor: pointer;
}
.pc__arrow[data-c-plate-carousel]:hover {
  background: color-mix(in srgb, var(--night) 70%, transparent);
}
.pc__arrow[data-c-plate-carousel]:focus-visible {
  outline: 3px solid var(--naledi);
  outline-offset: 3px;
}
.pc__arrow--prev[data-c-plate-carousel] {
  left: var(--margin);
}
.pc__arrow--next[data-c-plate-carousel] {
  right: var(--margin);
}
.pc__caption[data-c-plate-carousel] {
  display: grid;
  justify-items: center;
  min-block-size: 7em;
  margin-block-start: var(--s-4);
  padding-inline: var(--margin);
  text-align: center;
}
.pc__text[data-c-plate-carousel] {
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  max-inline-size: 46rem;
}
.pc__text[data-c-plate-carousel][hidden] {
  display: none;
}
/* owner (12 Oct 2026): "Dinner Carousel and Breakfast Carousel should be the big heading like it was previously to
     attract attention": the label above the photos is as big as a heading; the line of courses above it is smaller */
.pc__label[data-c-plate-carousel] {
  margin-block-start: var(--s-5);
  font-family: var(--face-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.1;
  background:
    linear-gradient(
      180deg,
      #f7e2a6,
      #c9953f 60%,
      #f1d48a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pc[data-c-plate-carousel]:has(.pc__label) .pc__h[data-c-plate-carousel] {
  font-size: var(--fs-l);
  line-height: 1.25;
}
/* Owner (12 Oct 2026): "I like the 3 colours of gold that you used at EMERGING FROM THE ANCIENT DUST … use that
     different shades where you have 3 lines below one another"; "the first four lines of text at Roots the 8 course can be
     one shade, The price another shade … where it is similar in headings with a lot of information to stand out": the
     three golds of that line, one to a line: the line over the carousel in the pale champagne gold, the price in the deep
     antique gold, the note in white (her choice), the big carousel name in the graded gold of all three */
.pc[data-c-plate-carousel]:has(.pc__label) .pc__h[data-c-plate-carousel] {
  background: none;
  color: #fff3cf;
}
.pc__price[data-c-plate-carousel] {
  color: #d4a24c;
}
/* (6 Nov 2026) letter-spacing was 0.16em; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) text-transform was uppercase; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) color was #e6c27a; always overridden by css/site.css, so its value is here now */
.pc__kicker[data-c-plate-carousel] {
  font-size: var(--fs-small, 0.875rem);
  font-weight: var(--wt-label, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6c27a;
}
/* (6 Nov 2026) color was #f3d792; always overridden by css/site.css, so its value is here now */
.pc__name[data-c-plate-carousel] {
  font-family: var(--face-display);
  font-size: var(--fs-xl);
  line-height: 1.1;
  color: #f6efe4;
}
/* (6 Nov 2026) color was var(--naledi); always overridden by css/site.css, so its value is here now */
.pc__story[data-c-plate-carousel] {
  font-family: var(--face-text);
  font-style: normal;
  font-size: var(--fs-m);
  line-height: 1.5;
  color: #f6efe4;
}
.pc__extra[data-c-plate-carousel] {
  font-size: var(--fs-small, 0.875rem);
  color: var(--naledi);
}
.pc__also-photo[data-c-plate-carousel] {
  inline-size: 120px;
  block-size: 120px;
  margin-block-start: var(--s-2);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px #c9953f, 0 12px 30px -10px rgb(0 0 0 / 0.8);
}
.pc__also[data-c-plate-carousel] {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 40px;
  padding-inline: var(--s-4);
  border: 1.5px solid #f3d792;
  border-radius: var(--r-pill);
  background: transparent;
  color: #f3d792;
  font: inherit;
  cursor: pointer;
}
.pc__also[data-c-plate-carousel]:hover {
  background: rgb(243 215 146 / 0.15);
}
.pc__also[data-c-plate-carousel]:focus-visible {
  outline: 3px solid #f3d792;
  outline-offset: 3px;
}
.pc__extra[data-c-plate-carousel] a[data-c-plate-carousel] {
  color: inherit;
  text-underline-offset: 0.25em;
}
html:not(.js) .pc__arrow[data-c-plate-carousel] {
  display: none;
}
@media (max-width: 640px) {
  .pc[data-c-plate-carousel] {
    --card: 84px;
    --radius: 150px;
    --spot: min(86vw, 60svh);
  }
  /* (6 Nov 2026) inline-size was 42px; always overridden by css/site.css, so its value is here now */
  /* (6 Nov 2026) block-size was 42px; always overridden by css/site.css, so its value is here now */
  .pc__arrow[data-c-plate-carousel] {
    inline-size: 36px;
    block-size: 36px;
    top: auto;
    bottom: 0;
    translate: none;
  }
}

/* ── roots-menu ── */
/* Roots menu.
   Used on: /dare2dream-menu/, /dare2dream/, /roots-menu/, /rootsrestaurant/dining-concept/.
   Forum Homini website, */
.rm__open-row[data-c-roots-menu] {
  text-align: center;
}
/* (6 Nov 2026) min-block-size was 44px; always overridden by css/site.css, so its value is here now */
.rm__open[data-c-roots-menu] {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: var(--s-6);
  border: 0;
  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-button, var(--fs-s));
  font-weight: var(--wt-label, 600);
  cursor: pointer;
}
.rm__open[data-c-roots-menu]:hover {
  background:
    linear-gradient(
      180deg,
      #fff8e0,
      #f7e2a6 40%,
      #d9a74e 85%);
}
.rm__sheet[data-c-roots-menu] {
  position: fixed;
  inset: 0;
  margin: auto;
  inline-size: min(94vw, 40rem);
  block-size: fit-content;
  max-block-size: 92svh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #f0e5d6;
  overflow: auto;
}
.rm__sheet--inline[data-c-roots-menu] {
  position: static;
  inline-size: min(100%, 40rem);
  max-block-size: none;
  margin-inline: auto;
  overflow: visible;
}
.rm__sheet[data-c-roots-menu]::backdrop {
  background: rgb(0 0 0 / 0.75);
}
.rm__close[data-c-roots-menu] {
  position: sticky;
  inset-block-start: 8px;
  float: inline-end;
  margin: 8px 8px -52px 0;
  z-index: 1;
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.7);
  color: #fff;
  font-size: var(--fs-l);
  line-height: 1;
  cursor: pointer;
}
.rm__open[data-c-roots-menu]:focus-visible,
.rm__close[data-c-roots-menu]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}
/* (owner, 26 Oct 2026: "all the online versions … the same as this"): white paper with the printed menus' fine gold frame,
     the hotel's brown five-star logo at the top (no gold pill) */
.rm__paper[data-c-roots-menu] {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: #fff;
  color: #2b1c10;
  border: 1px solid #b8904a;
  outline: 1px solid #b8904a;
  outline-offset: -10px;
  text-align: center;
}
.rm__brand[data-c-roots-menu] {
  background: none !important;
  padding-block: var(--s-2) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  inline-size: 100%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-pill);
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
}
.rm__brand[data-c-roots-menu] .rm__hotel[data-c-roots-menu] {
  inline-size: min(72%, 300px);
  block-size: auto;
}
.rm__brand[data-c-roots-menu] img[data-c-roots-menu] {
  inline-size: auto;
  block-size: clamp(40px, 9vw, 64px);
}
.rm__brand[data-c-roots-menu] .rm__name[data-c-roots-menu] {
  inline-size: auto;
  block-size: clamp(18px, 2.6vw + 8px, 28px);
}
.rm__logo[data-c-roots-menu] {
  display: block;
  inline-size: auto;
  block-size: clamp(84px, 14vw + 40px, 120px);
  margin-inline: auto;
}
.rm__logo--dark[data-c-roots-menu] {
  display: none;
}
html[data-menu-night] .rm__logo--paper[data-c-roots-menu] {
  display: none;
}
html[data-menu-night] .rm__logo--dark[data-c-roots-menu] {
  display: block;
}
.rm__brand[data-c-roots-menu] span[data-c-roots-menu] {
  font-family: var(--face-display);
  font-size: clamp(1.6rem, 1rem + 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.rm__month[data-c-roots-menu] {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  inline-size: 100%;
}
.rm__month[data-c-roots-menu][hidden] {
  display: none;
}
.rm__title[data-c-roots-menu] {
  margin: var(--s-2) 0 0;
  font-family: var(--face-display);
  font-size: clamp(1.9rem, 1.2rem + 3vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: none;
  color: #2b1c10;
  -webkit-text-fill-color: #2b1c10;
}
.rm__title[data-c-roots-menu] > span[data-c-roots-menu] {
  display: block;
}
/* (a11y, 19 Oct 2026) a deeper gold than the butterfly sheet's, so "Roots" reads clearly on the paper */
.rm__title[data-c-roots-menu] .rm__gold[data-c-roots-menu] {
  color: #9c7024 !important;
  -webkit-text-fill-color: #9c7024 !important;
}
/* Dare2Dream: "Dinner with a Story" in spaced capitals, as on the printed cover */
.rm__title--d2d[data-c-roots-menu] {
  font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.2em;
}
.rm__memoir[data-c-roots-menu] {
  font-family: var(--face-text);
  font-size: var(--fs-m);
  font-style: normal;
  color: #2b1c10;
}
.rm__sub[data-c-roots-menu] {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  inline-size: 100%;
  font-family: var(--face-display);
  font-size: var(--fs-s);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2b1c10;
}
.rm__sub[data-c-roots-menu]::before,
.rm__sub[data-c-roots-menu]::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: #2b1c10;
}
.rm__chef[data-c-roots-menu] {
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: var(--wt-label, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a561a;
}
.rm__part[data-c-roots-menu] {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  inline-size: 100%;
  margin-block-start: var(--s-5);
}
/* the part's name in the beige band, as on the sheets */
/* (6 Nov 2026) letter-spacing was 0.22em; always overridden by css/site.css, so its value is here now */
.rm__part-h[data-c-roots-menu] {
  inline-size: 100%;
  padding: var(--s-2) var(--s-3);
  background: #e6d5b8;
  font-family: var(--face-display);
  font-size: var(--fs-m);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2b1c10;
  -webkit-text-fill-color: #2b1c10;
}
.rm__line[data-c-roots-menu] {
  margin-block-start: var(--s-2);
  font-family: var(--face-text);
  font-size: var(--fs-m);
  color: #2b1c10;
}
.rm__extra[data-c-roots-menu] {
  font-family: var(--face-text);
  font-size: var(--fs-s);
  color: #5a4330;
}
.rm__courses[data-c-roots-menu] {
  display: grid;
  gap: 0;
  inline-size: 100%;
  max-inline-size: 30rem;
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}
.rm__course[data-c-roots-menu] {
  display: grid;
  gap: 6px;
  padding-block: var(--s-4);
}
/* a small gold diamond between the courses */
.rm__course[data-c-roots-menu] + .rm__course[data-c-roots-menu]::before {
  content: "";
  justify-self: center;
  inline-size: 7px;
  block-size: 7px;
  margin-block-end: var(--s-4);
  background: #b8862f;
  transform: rotate(45deg);
}
.rm__note[data-c-roots-menu] {
  font-family: var(--face-text);
  font-size: 0.75rem;
  font-weight: var(--wt-label, 600);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7a561a;
}
/* the dish first: larger and sturdier (a phone at the table in candlelight), then its ingredients, quieter */
.rm__dish[data-c-roots-menu] {
  font-family: var(--face-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #24170c;
}
.rm__desc[data-c-roots-menu] {
  font-family: var(--face-text);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-weight: 440;
  line-height: 1.5;
  color: #4a3624;
}
.rm__foot[data-c-roots-menu] {
  inline-size: 100%;
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid rgb(43 28 16 / 0.25);
  font-family: var(--face-text);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2b1c10;
}
.rm__foot[data-c-roots-menu] span[data-c-roots-menu] {
  padding-inline: 0.4em;
  color: #9c7024;
}
@media (max-width: 520px) {
  .rm__paper[data-c-roots-menu] {
    padding-inline: var(--s-4);
  }
}

/* ── jewellery-box ── */
/* Jewellery box (opening photo boxes).
   Used on: 24 pages, e.g. /dare2dream/, /eat/, /events/, /forum-homini-hotel/activities-and-news/, /forum-homini-hotel/conference/.
   Forum Homini website, */
.jb[data-c-jewellery-box] {
  --card: clamp(180px, 20vw, 300px);
  --radius: clamp(280px, 36vw, 600px);
  padding-block: var(--s-6) var(--section-pad, var(--s-10));
  background: var(--room-deep, var(--night));
  color: var(--naledi);
  overflow: clip;
}
/* (owner, 30 Oct 2026: "It should only be there once"): once a visitor has used a carousel the line fades away, and the other
     carousels of that visit no longer show it */
.jb__sub[data-c-jewellery-box] {
  transition: opacity 500ms ease;
}
.jb--hint-used[data-c-jewellery-box] .jb__sub[data-c-jewellery-box] {
  opacity: 0;
}
.jb--hint-off[data-c-jewellery-box] .jb__sub[data-c-jewellery-box] {
  display: none;
}
.jb__sub[data-c-jewellery-box] {
  margin: calc(-1 * var(--s-1)) 0 0;
  color: rgb(255 243 214 / 0.82);
  font: 500 var(--fs-m) / 1.3 var(--face-text);
}
/* (owner, 25 Oct 2026: "the ALL SUITES move up higher under the top bar … on all carousels"): a page's own ring starts just
     under the top bar (the page gives the bar's height, the ring only a small step) */
.jb[data-c-jewellery-box].jb--page {
  padding-block-start: 0;
}
/* the page around the ring gives no extra space of its own above it (the site's even-gap rule would add half a section);
     a page with a row under the top bar (Upgrades, Romantic Dinners) keeps room for that row */
main > div:has(> .jb.jb--page) {
  padding-block-start: 0 !important;
}
main:has(> [data-jumpbar]) > div:has(> .jb.jb--page) {
  padding-block-start: 52px !important;
}

/* the heading's own bottom margin is not added: the instruction sits close under it */

.jb__head[data-c-jewellery-box] > .jb__h[data-c-jewellery-box] {
  margin: 0 !important;
  line-height: 1.02;
}
.jb__sub--touch[data-c-jewellery-box] {
  display: none;
}
@media (pointer: coarse) {
  .jb__sub--mouse[data-c-jewellery-box] {
    display: none;
  }
  .jb__sub--touch[data-c-jewellery-box] {
    display: inline;
  }
}
.jb__head[data-c-jewellery-box] {
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  padding-inline: var(--margin);
  text-align: center;
}
.jb__h[data-c-jewellery-box] {
  font-family: var(--face-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  background:
    linear-gradient(
      180deg,
      #f7e2a6,
      #c9953f 60%,
      #f1d48a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The stage: perspective, and the ring of pieces */
/* (6 Nov 2026) margin-block-start was var(--s-3); always overridden by css/site.css, so its value is here now */
.jb__stage[data-c-jewellery-box] {
  position: relative;
  block-size: calc(var(--card) * 1.85);
  margin-block-start: -17px;
  perspective: 1600px;
  perspective-origin: 50% 20%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.jb__stage[data-c-jewellery-box]:active {
  cursor: grabbing;
}
.jb__ring[data-c-jewellery-box] {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* until the script has placed them, only the first photo shows */
.jb[data-c-jewellery-box]:not(.jb--fade) .jb__item[data-c-jewellery-box]:not(:first-child) {
  visibility: hidden;
}
.jb__item[data-c-jewellery-box] {
  --depth: 1;
  position: absolute;
  left: 50%;
  top: 12%;
  inline-size: var(--card);
  aspect-ratio: 1;
  margin-inline-start: calc(var(--card) / -2);
  will-change: transform, opacity;
  backface-visibility: hidden;
  z-index: calc(var(--depth) * 10);
}
@media (hover: hover) {
  .jb__item[data-c-jewellery-box]:hover {
    z-index: 50;
  }
  .jb__item[data-c-jewellery-box]:hover .jb__veil[data-c-jewellery-box] {
    opacity: 0 !important;
  }
  .jb__item[data-c-jewellery-box]:hover .jb__card[data-c-jewellery-box] {
    box-shadow: 0 0 calc(56px * var(--k)) calc(10px * var(--k)) rgb(233 196 106 / 0.58), 0 calc(30px * var(--k)) calc(60px * var(--k)) calc(-16px * var(--k)) rgb(0 0 0 / 0.9);
  }
}
/* Version 5: the count under the ring, small gold numbers */
.jb__count[data-c-jewellery-box] {
  position: relative;
  z-index: 5;
  margin: 0 0 var(--s-2);
  color: rgb(255 243 214 / 0.6);
  font: 500 0.78rem/1 var(--face-text);
  letter-spacing: 0.18em;
  text-align: center;
  pointer-events: none;
}
.jb__count[data-c-jewellery-box] [data-c-jewellery-box][data-jb-num] {
  color: #f3d792;
}
/* (owner, 25 Oct 2026: "the photo is blurry for a while … Is there a different way?"): each frame is drawn at its biggest size
     (--k times the ring's card, the size it reaches in front) and made smaller as it turns away, instead of drawn small and
     blown up in front; a browser keeps a frame's picture at the size it was drawn while it moves, so the photo in front is
     now always sharp. The look is the same: the frame's gold edge, its corners and shadow are --k times larger before the
     scaling. The All suites ring never grows past its size, so it keeps --k: 1. */
.jb[data-c-jewellery-box] {
  --k: 1.45;
}
.jb--wide[data-c-jewellery-box] {
  --k: 1;
}
.jb__card[data-c-jewellery-box] {
  position: absolute;
  inset: calc((1 - var(--k)) * 50%);
  display: block;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      #f7e2a6,
      #b8862f 45%,
      #f3d792 70%,
      #8d6420);
  box-shadow: 0 calc(18px * var(--k)) calc(40px * var(--k)) calc(-14px * var(--k)) rgb(0 0 0 / 0.8);
  transition: box-shadow 300ms linear;
}
.jb__item[data-c-jewellery-box].is-front .jb__card[data-c-jewellery-box] {
  box-shadow: 0 0 calc(48px * var(--k)) calc(8px * var(--k)) rgb(233 196 106 / 0.52), 0 calc(24px * var(--k)) calc(50px * var(--k)) calc(-14px * var(--k)) rgb(0 0 0 / 0.85);
}
/* (Eureka IT, 29 Oct 2026: "soms laai die media bietjie stadiger as verwag", a photo half sharp, half blurred): the soft copy
     stays behind the photo until the whole photo has arrived, then the photo fades in at once */
.jb__card[data-c-jewellery-box]::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 9px;
  background: var(--blur) center / cover;
}
/* the pieces beside the front one darker, so they never compete with it; (owner, 30 Oct 2026: "the ones on the far sides looked like
     they're staggering, blurring"): a dark veil of its own, on its own layer, over the photo and both gold lines, so the far photos
     are never repainted as they turn and their fine lines cannot flicker */
.jb__veil[data-c-jewellery-box] {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: #000;
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}
.jb__pic[data-c-jewellery-box] {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  border-radius: 9px;
}
.jb__img[data-c-jewellery-box] {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform: scale(var(--pz, 1));
  pointer-events: none;
}
.jb--fade[data-c-jewellery-box] .jb__img[data-c-jewellery-box] {
  opacity: 0;
  transition: opacity 450ms ease;
}
.jb--fade[data-c-jewellery-box] .jb__img[data-c-jewellery-box].is-in {
  opacity: 1;
}
.jb__card[data-c-jewellery-box]:focus-visible {
  outline: 3px solid var(--naledi);
  outline-offset: 4px;
}
/* (6 Nov 2026) inline-size was 52px; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) block-size was 52px; always overridden by css/site.css, so its value is here now */
.jb__arrow[data-c-jewellery-box] {
  position: absolute;
  top: 45%;
  translate: 0 -50%;
  z-index: 120;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--night) 45%, transparent);
  backdrop-filter: blur(6px);
  color: #f3d792;
  cursor: pointer;
}
.jb__arrow[data-c-jewellery-box]:hover {
  background: color-mix(in srgb, var(--night) 70%, transparent);
}
.jb__arrow[data-c-jewellery-box]:focus-visible {
  outline: 2px solid var(--naledi);
  outline-offset: 3px;
}
.jb__arrow--prev[data-c-jewellery-box] {
  left: var(--margin);
}
.jb__arrow--next[data-c-jewellery-box] {
  right: var(--margin);
}
.jb__caption[data-c-jewellery-box] {
  display: grid;
  justify-items: center;
  min-block-size: 4.5em;
  margin-block-start: 0;
  padding-inline: var(--margin);
  text-align: center;
}
.jb__text[data-c-jewellery-box] {
  display: grid;
  gap: var(--s-1);
}
.jb__text[data-c-jewellery-box][hidden] {
  display: none;
}
/* (6 Nov 2026) color was #f3d792; always overridden by css/site.css, so its value is here now */
.jb__name[data-c-jewellery-box] {
  font-family: var(--face-display);
  font-size: var(--fs-l);
  color: #f6efe4;
}
/* owner (20 Oct 2026): "take out descriptions under objets d'art as well": the Objets d'art rings show the name only (the
     line is kept as the photo's text for screen readers); the Sleep, Eat and Events rings keep their price line */
.jb[data-c-jewellery-box]:not(.jb--wide, .jb--land) .jb__story[data-c-jewellery-box] {
  display: none;
}
/* owner (20 Oct 2026): "There are still description lines under photos on Objets d'art for each photo" (and "take out
     descriptions under the objets except for the swan cups"): no name under the pieces either; only the Swan Cups song link
     shows when the Swan Cups are in front (the names stay for screen readers and in the big photo viewer) */
.jb[data-c-jewellery-box]:not(.jb--wide, .jb--land) .jb__name[data-c-jewellery-box] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* with the lines gone, the space under the ring only holds the name (and the Swan Cups song link), no empty band */
.jb[data-c-jewellery-box]:not(.jb--wide, .jb--land) .jb__caption[data-c-jewellery-box] {
  min-block-size: 0;
}
/* the Swan Cups song link hangs just under the name, in the space below the ring, so the page never jumps as the ring
     turns and no empty band is kept for it */
.jb[data-c-jewellery-box]:not(.jb--wide, .jb--land) .jb__text[data-c-jewellery-box] {
  position: relative;
}
.jb[data-c-jewellery-box]:not(.jb--wide, .jb--land) .jb__link[data-c-jewellery-box] {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: max-content;
  max-inline-size: calc(100vw - 2 * var(--margin, 20px));
  text-align: center;
}
/* (padding: the site's even-gap rule sets the last item's bottom margin to 0) */
.jb--song[data-c-jewellery-box]:not(.jb--wide, .jb--land) .jb__caption[data-c-jewellery-box] {
  padding-block-end: 0;
}
@media (max-width: 640px) {
  .jb[data-c-jewellery-box]:not(.jb--wide, .jb--land) .jb__link[data-c-jewellery-box] {
    padding-inline: var(--s-3);
    font-size: 0.78rem;
    white-space: nowrap;
  }
  /* owner (24 Oct 2026, "fix the big gaps on the Super Deluxe and Deluxe pages"): no empty band kept under the ring for
       the song link; it rides up into the ring's spare room below the front piece instead, so the gap to the next section
       stays even */
  .jb--song[data-c-jewellery-box]:not(.jb--wide, .jb--land) .jb__caption[data-c-jewellery-box] {
    padding-block-end: 0;
  }
  .jb[data-c-jewellery-box]:not(.jb--wide, .jb--land) .jb__link[data-c-jewellery-box] {
    inset-block-start: calc(100% - 4px);
    margin-block-start: 0;
    min-block-size: 36px;
  }
}
/* owner (21 Oct 2026): "The listen & watch banner of the cups look odd": the ring keeps room for the big front piece, so
     the song link sits clear under its frame instead of on top of it */
.jb[data-c-jewellery-box]:not(.jb--wide, .jb--land) .jb__item[data-c-jewellery-box] {
  top: calc(66% - var(--card) * 0.5);
}
.jb[data-c-jewellery-box]:not(.jb--wide, .jb--land) .jb__stage[data-c-jewellery-box] {
  block-size: calc(var(--card) * 2.05);
}
/* the extra room for the front piece comes off the space below the ring, so the gap to the next section stays even */
.jb[data-c-jewellery-box]:not(.jb--wide, .jb--land) {
  padding-block-end: max(16px, calc(var(--gap-section) / 2 - var(--card) * 0.1)) !important;
  overflow-x: clip;
  overflow-y: visible;
}
/* (6 Nov 2026) color was var(--naledi); always overridden by css/site.css, so its value is here now */
.jb__story[data-c-jewellery-box] {
  font-family: var(--face-text);
  font-style: normal;
  font-size: var(--fs-m);
  color: #f6efe4;
}
/* the same gold pill as the song link in the photo rows */
.jb__link[data-c-jewellery-box] {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  margin-block-start: var(--s-2);
  padding-inline: var(--s-4);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
  font-size: var(--fs-s);
  font-weight: 600;
  text-decoration: none;
}
.jb__play[data-c-jewellery-box] {
  gap: 0.45em;
  border: 0;
  font-family: var(--face-text);
  cursor: pointer;
}
.jb__link[data-c-jewellery-box]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}
html:not(.js) .jb__arrow[data-c-jewellery-box] {
  display: none;
}
/* owner (20 Oct 2026): "I think a suite should keep on showing big until the next one is closer. The photos are still too
     small to see nicely. All our pictures are big": the front suite fills most of the screen and stays big while it is
     near the front; the next one grows as it turns in from the side */
.jb--wide[data-c-jewellery-box] {
  --card: min(70vw, calc((100svh - 410px) * 4 / 3), 1100px);
  --radius: calc(var(--card) * 0.95);
  display: grid;
  grid-template-areas: "head" "ring" "cap" "rest";
  padding-block-start: var(--s-4);
}
.jb--wide[data-c-jewellery-box] > .jb__head[data-c-jewellery-box] {
  grid-area: head;
  padding-block-end: var(--s-3);
}
.jb--wide[data-c-jewellery-box] .jb__item[data-c-jewellery-box] {
  aspect-ratio: 4 / 3;
  top: 0;
}
.jb--wide[data-c-jewellery-box] .jb__stage[data-c-jewellery-box] {
  grid-area: ring;
  margin-block-start: 0 !important;
  block-size: calc(var(--card) * 0.75 + 8px);
  perspective: 2600px;
  perspective-origin: 50% 50%;
}
.jb--wide[data-c-jewellery-box] .jb__ring[data-c-jewellery-box] {
}
/* owner (20 Oct 2026): "At the carousel the pictures are moving over the headings": nothing of the turning ring shows above
     the top of the ring's own space, so the heading always stays clear */
.jb--wide[data-c-jewellery-box] .jb__stage[data-c-jewellery-box] {
  clip-path: inset(0 -100vw -100vh -100vw);
}
.jb--wide[data-c-jewellery-box] > .jb__head[data-c-jewellery-box] {
  position: relative;
  z-index: 5;
}
/* owner (20 Oct 2026): "I said I dont want info on the photos in the carousel": the name and price stay under the photo,
     the price and More on one line so the big photo still fits on the screen */
.jb--wide[data-c-jewellery-box] .jb__caption[data-c-jewellery-box] {
  grid-area: cap;
  min-block-size: 0;
  margin-block-start: var(--s-3);
}
.jb--wide[data-c-jewellery-box] .jb__text[data-c-jewellery-box] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--s-3);
  row-gap: var(--s-1);
}
.jb--wide[data-c-jewellery-box] .jb__name[data-c-jewellery-box] {
  flex-basis: 100%;
}
.jb--wide[data-c-jewellery-box] .jb__link[data-c-jewellery-box] {
  margin-block-start: 0;
}
/* landscape Objets d'art ring (Sleep, Eat, Events): the same turning ring, gold frames, the front one big and lit; the
     name, price and More under it on one line, as on All suites */
.jb--land[data-c-jewellery-box] {
  --card: calc(min(60vw, 72svh, 1120px) / var(--k));
  --radius: calc(clamp(300px, 40vw, 680px) * var(--spread, 1));
}
.jb--land[data-c-jewellery-box] .jb__item[data-c-jewellery-box] {
  aspect-ratio: 4 / 3;
}
/* (owner, 30 Oct 2026: "the photo … go over the words behind it"): room for the photo at its biggest, clear of the words above */
.jb--land[data-c-jewellery-box] .jb__head[data-c-jewellery-box] {
  position: relative;
  z-index: 5;
  padding-block-end: 0;
}
.jb__sub--under[data-c-jewellery-box] {
  position: relative;
  z-index: 5;
  margin: 0 0 var(--s-2);
  text-align: center;
}
@media (min-width: 641px) and (pointer: fine) {
  .jb__sub--under[data-c-jewellery-box] {
    display: none;
  }
}
.jb[data-c-jewellery-box]:not(.jb--wide, .jb--land) .jb__head[data-c-jewellery-box] {
  padding-block-end: 56px;
}
/* (owner, 31 Oct 2026: "all the carousel are going over the number one of number five"): the stage is exactly the front photo at its
     biggest, plus a small room above for the far photos, so it stays clear of the numbers and close under the heading */
.jb--land[data-c-jewellery-box] .jb__stage[data-c-jewellery-box] {
  --front: calc(var(--card) * var(--k) * 0.75);
  block-size: calc(var(--front) + 62px);
  margin-block-start: 0 !important;
}
.jb--land[data-c-jewellery-box] .jb__item[data-c-jewellery-box] {
  top: calc(46px + var(--front) / 2 - var(--card) * 0.375);
}
.jb--land[data-c-jewellery-box] .jb__text[data-c-jewellery-box] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--s-3);
  row-gap: var(--s-1);
}
.jb--land[data-c-jewellery-box] .jb__name[data-c-jewellery-box] {
  flex-basis: 100%;
}
.jb--land[data-c-jewellery-box] .jb__story[data-c-jewellery-box] {
  font-family: var(--face-body, inherit);
  font-style: normal;
}
.jb--land[data-c-jewellery-box] .jb__link[data-c-jewellery-box] {
  margin-block-start: 0;
}
@media (max-width: 640px) {
  .jb[data-c-jewellery-box] {
    --card: 140px;
    --radius: 170px;
  }
  .jb[data-c-jewellery-box].jb--land {
    --card: calc(80vw / var(--k));
    --radius: calc(64vw * var(--spread, 1));
  }
  /* owner (20 Oct 2026): "it shows a portrait photo - should it not be a landscape photo … it does not represent a moving
       carousel": on a phone too the frames are landscape, with the suites beside it showing at both sides as the ring turns */
  .jb--wide[data-c-jewellery-box] {
    --card: min(84vw, calc((100svh - 400px) * 4 / 3));
    --radius: calc(var(--card) * 0.92);
  }
  .jb--wide[data-c-jewellery-box] .jb__stage[data-c-jewellery-box] {
    block-size: calc(var(--card) * 0.75 + 8px);
  }
  /* (6 Nov 2026) inline-size was 42px; always overridden by css/site.css, so its value is here now */
  /* (6 Nov 2026) block-size was 42px; always overridden by css/site.css, so its value is here now */
  .jb__arrow[data-c-jewellery-box] {
    inline-size: 36px;
    block-size: 36px;
  }
}
/* the next suite's (or restaurant's, or event's) name and price: they rise a little into place and glow softly gold for a
     moment, so it is clear the price under the photo has changed */
.jb__text[data-c-jewellery-box].is-new > * {
  animation: jb-rise 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.jb__text[data-c-jewellery-box].is-new .jb__story[data-c-jewellery-box] {
  animation-delay: 90ms;
}
.jb__text[data-c-jewellery-box].is-new .jb__link[data-c-jewellery-box] {
  animation-delay: 160ms;
}
.jb__text[data-c-jewellery-box].is-new .jb__name[data-c-jewellery-box],
.jb__text[data-c-jewellery-box].is-new .jb__story[data-c-jewellery-box] {
  animation-name: jb-rise, jb-glow;
  animation-duration: 900ms, 1800ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1), ease-out;
}
@keyframes jb-rise {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes jb-glow {
  0% {
    text-shadow: 0 0 0 rgb(243 215 146 / 0);
  }
  35% {
    text-shadow: 0 0 18px rgb(243 215 146 / 0.75);
  }
  100% {
    text-shadow: 0 0 0 rgb(243 215 146 / 0);
  }
}

/* upright frames: the same ring, the whole photo in front, no higher than the screen allows */

.jb[data-c-jewellery-box].jb--land.jb--tall {
  --card: calc(min(72vw, 54svh, 520px) / var(--k));
  --radius: calc(clamp(220px, 30vw, 460px) * var(--spread, 1));
}
.jb[data-c-jewellery-box].jb--tall .jb__stage[data-c-jewellery-box] {
  --front: calc(var(--card) * var(--k) * 4 / 3);
}
.jb[data-c-jewellery-box].jb--tall .jb__item[data-c-jewellery-box] {
  aspect-ratio: 3 / 4;
  top: calc(46px + var(--front) / 2 - var(--card) * 2 / 3);
}
.jb[data-c-jewellery-box].jb--tall {
  padding-block-end: 0 !important;
}
.jb[data-c-jewellery-box].jb--tall .jb__caption[data-c-jewellery-box] {
  min-block-size: 0;
  margin-block-end: 0 !important;
}

/* ── supplier-credit ── */
/* Supplier credit line.
   Used on: 17 pages, e.g. /dare2dream/, /forest-breakfast/, /forum-homini-hotel/, /forum-homini-hotel/conference/, /forum-homini-hotel/private-functions/.
   Forum Homini website, */
.sc[data-c-supplier-credit] {
  text-align: center;
}
.sc__sum[data-c-supplier-credit] {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font-family: var(--face-text);
  font-style: normal;
  color: #f3d792;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.sc__sum[data-c-supplier-credit]::-webkit-details-marker {
  display: none;
}
.sc__sum[data-c-supplier-credit]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}
.sc__body[data-c-supplier-credit] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 8px 0 0;
  font-family: var(--face-text);
  color: #f6efe4;
}
.sc__body[data-c-supplier-credit] a[data-c-supplier-credit],
.sc__body[data-c-supplier-credit] a[data-c-supplier-credit]:visited {
  color: #f3d792;
}

/* ── photo-river ── */
/* Photo river (flowing row of photos).
   Used on: 17 pages, e.g. /dare2dream/, /forest-breakfast/, /forum-homini-hotel/, /forum-homini-hotel/conference/, /forum-homini-hotel/private-functions/.
   Forum Homini website, */
.pr[data-c-photo-river] {
  padding-block: var(--s-8);
  background: var(--night);
  overflow: hidden;
}
.pr__head[data-c-photo-river] {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-6);
  padding-inline: var(--s-4);
  text-align: center;
}
.pr__h[data-c-photo-river] {
  font-family: var(--face-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.1;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pr__note[data-c-photo-river] {
  font-family: var(--face-text);
  font-style: normal;
  color: #f3d792;
}
.pr__stage[data-c-photo-river] {
  position: relative;
}
.pr__window[data-c-photo-river] {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 5%,
      #000 95%,
      transparent);
}
.pr__window[data-c-photo-river]::-webkit-scrollbar {
  display: none;
}
.pr__window[data-c-photo-river]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 4px;
}
.pr__track[data-c-photo-river] {
  display: flex;
  inline-size: max-content;
}
[data-c-photo-river][data-pr-short] .pr__row[data-c-photo-river][aria-hidden=true],
[data-c-photo-river][data-pr-short] .pr__arrow[data-c-photo-river] {
  display: none !important;
}
[data-c-photo-river][data-pr-short] .pr__track[data-c-photo-river] {
  margin-inline: auto;
}
[data-c-photo-river][data-pr-short] .pr__window[data-c-photo-river] {
  mask-image: none;
}
.pr__row[data-c-photo-river] {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin: 0;
  padding: 0 var(--s-4) 0 0;
  list-style: none;
}
.pr__item[data-c-photo-river] {
  display: grid;
  gap: var(--s-2);
}
.pr__shot[data-c-photo-river] {
  display: block;
  inline-size: calc(var(--w) * var(--pr-scale, 1));
  block-size: calc(var(--pr-h) * var(--pr-scale, 1));
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 36px -14px rgb(0 0 0 / 0.9);
  transition: transform 300ms ease;
}
.pr__shot[data-c-photo-river] img[data-c-photo-river] {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  user-select: none;
}
.pr__shot[data-c-photo-river]:hover,
.pr__shot[data-c-photo-river]:focus-visible {
  transform: scale(1.03);
}
/* (owner, 1 Nov 2026: "a gold line between two photos"): no gold line under the mouse; only for keyboard users */
.pr__shot[data-c-photo-river]:focus-visible {
  outline: 2px solid #f3d792;
}
.pr__cap[data-c-photo-river] {
  max-inline-size: calc(var(--w, 300px) * var(--pr-scale, 1));
  margin: 0;
  font-family: var(--face-text);
  font-style: normal;
  font-size: var(--fs-s);
  color: #f3d792;
}
/* a button under a photo's line (the Swan Cups' song on YouTube) */
.pr__link[data-c-photo-river] {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding-inline: var(--s-4);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
  font-size: var(--fs-s);
  font-weight: 600;
  text-decoration: none;
}
.pr__link[data-c-photo-river]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}
/* the two gold arrows, at the sides, to go at your own pace */
/* (6 Nov 2026) inline-size was 48px; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) block-size was 48px; always overridden by css/site.css, so its value is here now */
.pr__arrow[data-c-photo-river] {
  position: absolute;
  inset-block-start: calc(var(--pr-h) * var(--pr-scale, 1) / 2);
  z-index: 2;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 0 0 4px;
  border: 1px solid rgb(243 215 146 / 0.7);
  border-radius: 50%;
  background: rgb(11 7 5 / 0.65);
  backdrop-filter: blur(6px);
  color: #f3d792;
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}
.pr__arrow[data-c-photo-river]:hover {
  background: rgb(243 215 146 / 0.18);
}
.pr__arrow[data-c-photo-river]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}
.pr__arrow--prev[data-c-photo-river] {
  inset-inline-start: var(--s-3);
}
.pr__arrow--next[data-c-photo-river] {
  inset-inline-end: var(--s-3);
}
@media (max-width: 640px) {
  .pr[data-c-photo-river] {
    --pr-scale: 0.72;
  }
  /* (6 Nov 2026) inline-size was 40px; always overridden by css/site.css, so its value is here now */
  /* (6 Nov 2026) block-size was 40px; always overridden by css/site.css, so its value is here now */
  .pr__arrow[data-c-photo-river] {
    inline-size: 36px;
    block-size: 36px;
    font-size: var(--fs-l);
  }
}

/* ── also-like ── */
/* "You may also like" cards.
   Used on: 14 pages, e.g. /dare2dream/, /forest-breakfast/, /romantic-dinners/, /romantic-dinners/fantasy-view/, /romantic-dinners/nymphs-table/.
   Forum Homini website, */
.al[data-c-also-like] {
  display: grid;
  justify-items: center;
  gap: var(--gap-heading, var(--s-5));
  padding: var(--gap-section) var(--margin);
  background: var(--night, #000);
  text-align: center;
}
.al__h[data-c-also-like] {
  margin: 0;
  font-family: var(--face-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.15;
  padding-block-end: 0.08em;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.al__list[data-c-also-like] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-item, var(--s-3));
  margin: 0;
  padding: 0;
  list-style: none;
}
/* (6 Nov 2026) min-block-size was 48px; always overridden by css/site.css, so its value is here now */
.al__btn[data-c-also-like],
.al__btn[data-c-also-like]:visited {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: 26px;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
  font: 600 var(--fs-s, 0.95rem) / 1 var(--face-text);
  text-decoration: none;
}
.al__btn[data-c-also-like]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}

/* ── restaurant-menu-page ── */
/* Roots menu and Dare2Dream menu pages.
   Used on: /dare2dream-menu/, /roots-menu/.
   Forum Homini website, */
/* the Day | Night switch close under the title (even gap, 19 Oct 2026) */
.rmp[data-c-restaurant-menu-page] {
  padding-block-start: 0 !important;
}
.rmp__more[data-c-restaurant-menu-page] {
  margin-block-start: var(--gap-item, 40px);
  text-align: center;
}

/* ── related-policies ── */
/* Related policies list.
   Used on: /disclaimer/, /forum-homini-hotel/, /privacy-policy/, /refund-cancellation-policy/, /terms-and-conditions/.
   Forum Homini website, */
.related__list[data-c-related-policies] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--rule);
}
.related__item[data-c-related-policies] {
  display: flex;
  border-block-start: 1px solid var(--rule);
}
.related__link[data-c-related-policies] {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-block-size: 56px;
  padding-block: var(--s-3);
  padding-inline-end: var(--s-2);
  color: var(--fg);
  font-weight: var(--wt-ui);
  line-height: 1.3;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-micro) linear;
}
.related__link[data-c-related-policies]:visited {
  color: var(--fg);
}
.related__link[data-c-related-policies]:hover {
  background-color: color-mix(in srgb, var(--fg) 5%, transparent);
}
.related__link[data-c-related-policies][aria-current] {
  box-shadow: inset 0 -2px 0 var(--indicator);
}
/* A document with a folded corner, drawn in CSS */
.related__doc[data-c-related-policies] {
  position: relative;
  flex: none;
  inline-size: 18px;
  block-size: 24px;
  border: 1.5px solid var(--link);
  border-radius: 1px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.related__doc[data-c-related-policies]::after {
  content: "";
  position: absolute;
  inset-block-start: -1.5px;
  inset-inline-end: -1.5px;
  inline-size: 7.5px;
  block-size: 7.5px;
  background:
    linear-gradient(
      to bottom left,
      transparent calc(50% - 0.75px),
      var(--link) calc(50% - 0.75px),
      var(--link) calc(50% + 0.75px),
      transparent calc(50% + 0.75px));
}
.related__label[data-c-related-policies] {
  flex: 1 1 auto;
  min-inline-size: 0;
  text-wrap: balance;
}
.related[data-c-related-policies] .related__arrow {
  flex: none;
  color: var(--fg-muted);
}
@media (min-width: 641px) {
  .related__list[data-c-related-policies] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
    border-block-end: 0;
  }
  /* Each tile closes its own top and bottom; the -1 px margin lets the rows share one hairline */
  .related__item[data-c-related-policies] {
    border-block-end: 1px solid var(--rule);
    margin-block-end: -1px;
  }
  .related__link[data-c-related-policies] {
    min-block-size: 64px;
  }
}
@media (min-width: 1025px) {
  .related__list[data-c-related-policies] {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .related__link[data-c-related-policies] {
    min-block-size: 72px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @layer effects {
    .related[data-c-related-policies] .related__arrow {
      transition: translate var(--t-micro) var(--ease-settle), color var(--t-micro) linear;
    }
    .related__link[data-c-related-policies]:hover .related__arrow {
      translate: 4px 0;
      color: var(--link);
    }
  }
}
@media (forced-colors: active) {
  .related__doc[data-c-related-policies] {
    border-color: CanvasText;
  }
}

/* ── legal-doc ── */
/* Legal pages text.
   Used on: /disclaimer/, /privacy-policy/, /refund-cancellation-policy/, /terms-and-conditions/.
   Forum Homini website, */
.doc[data-c-legal-doc] {
  padding-block: var(--s-8) var(--section-pad);
}
.doc--empty[data-c-legal-doc] {
  padding-block: var(--s-9) var(--section-pad);
}
.doc__grid[data-c-legal-doc] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.doc__body[data-c-legal-doc] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: var(--measure-long);
  font-size: var(--fs-body-long);
  line-height: var(--lh-body);
}
@media (min-width: 641px) and (max-width: 1024px) {
  .doc__body[data-c-legal-doc] {
    max-inline-size: 34em;
  }
}
.doc__related[data-c-legal-doc] {
  margin-block-start: var(--s-9);
}
.doc--empty[data-c-legal-doc] .doc__related[data-c-legal-doc] {
  margin-block-start: 0;
}
.doc__related-label[data-c-legal-doc] {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-4);
  color: var(--rust);
}
.doc__related-label[data-c-legal-doc]::before {
  content: "";
  inline-size: var(--s-6);
  border-block-start: 1px solid currentColor;
}
@media (min-width: 1025px) {
  .doc__grid[data-c-legal-doc] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .doc__body[data-c-legal-doc] {
    grid-column: 1 / span 9;
    grid-template-columns: subgrid;
    max-inline-size: none;
  }
  .doc__related[data-c-legal-doc] {
    grid-column: 1 / -1;
    margin-block-start: var(--s-10);
  }
  .doc--empty[data-c-legal-doc] .doc__related[data-c-legal-doc] {
    margin-block-start: 0;
  }
}

/* ── policy-note ── */
/* Policy notes on the enquiry pages.
   Used on: /enquiries-directions/conference-enquiries/, /enquiries-directions/dare2dream-enquiries/, /enquiries-directions/hotel-enquiries/, /enquiries-directions/private-function-enquiries/, /enquiries-directions/restaurant-enquiries/, /enquiries-directions/wedding-enquiries/, /terms-and-conditions/.
   Forum Homini website, */
/* (6 Nov 2026) box-shadow was inset 4px 0 0 var(--note-rule), inset 0 0 0 1px var(--note-edge); always overridden by css/site.css, so its value is here now */
.note[data-c-policy-note] {
  --note-rule: var(--layer-band, var(--rust));
  --note-bg: var(--paper-deep);
  --note-fg: var(--ink);
  --note-muted: var(--ink-muted);
  --note-icon: var(--soil);
  --note-edge: transparent;
  position: relative;
  max-inline-size: min(100%, 44rem);
  background: var(--note-bg);
  color: var(--note-fg);
  box-shadow: none;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
:is([data-layer=legal], [data-layer=dine-day]) .note[data-c-policy-note] {
  --note-rule: var(--layer-band-text);
}
/* Dark grounds: a cave card with an ember rule (§8.20) */
:is(.ground-night, .ground-cave, .ground-chert, .ground-earth, .ground-band, .ground-d2d) .note[data-c-policy-note] {
  --note-bg: var(--cave);
  --note-fg: var(--naledi);
  --note-muted: var(--ash);
  --note-icon: var(--ember);
  --note-rule: var(--ember);
  --note-edge: var(--line-dark);
}
/* On a paper-deep ground the card turns paper, so it still reads as a card */
.ground-deep .note[data-c-policy-note] {
  --note-bg: var(--paper);
  --note-edge: var(--hairline);
}
:is([data-layer=legal], [data-layer=dine-day]) .ground-band .note[data-c-policy-note] {
  --note-bg: var(--paper);
  --note-fg: var(--ink);
  --note-muted: var(--ink-muted);
  --note-icon: var(--soil);
  --note-rule: var(--layer-band-text);
  --note-edge: transparent;
}
.note[data-c-policy-note] a {
  color: inherit;
}
.note[data-c-policy-note] .note__icon {
  color: var(--note-icon);
  flex: none;
}
/* ── A single note ─────────────────────────────────────────────────────────────────────────────────── */
.note--single[data-c-policy-note] {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-4) calc(4px + var(--s-5));
}
.note--single[data-c-policy-note] .note__icon {
  margin-block-start: calc((1lh - 20px) / 2);
}
.note__text[data-c-policy-note] {
  min-inline-size: 0;
  text-wrap: pretty;
}
/* The highlight: the line itself carries the weight, in Display at lede size */
.note--highlight[data-c-policy-note] {
  padding-block: var(--s-5);
  font-family: var(--face-display);
  font-size: var(--fs-lede);
  font-weight: var(--wt-lede);
  line-height: var(--lh-lede);
  box-shadow: inset 6px 0 0 var(--note-rule), inset 0 0 0 1px var(--note-edge);
}
.note--highlight[data-c-policy-note] .note__icon {
  display: none;
}
/* ── The "Good to know" group ──────────────────────────────────────────────────────────────────────── */
.note--group[data-c-policy-note] {
  padding: var(--s-5) var(--s-5) var(--s-3) calc(4px + var(--s-5));
}
.note__title[data-c-policy-note] {
  margin: 0 0 var(--s-2);
  color: var(--note-muted);
  font-size: var(--fs-label);
}
.note__list[data-c-policy-note] {
  margin: 0;
  padding: 0;
  list-style: none;
}
.note__item[data-c-policy-note] {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding-block: var(--s-4);
}
.note__item[data-c-policy-note] + .note__item[data-c-policy-note] {
  border-block-start: 1px solid color-mix(in srgb, var(--note-fg) 16%, transparent);
}
.note__item[data-c-policy-note] .note__icon {
  margin-block-start: calc((1lh - 20px) / 2);
}
.note__item[data-c-policy-note] .note__text[data-c-policy-note] {
  margin: 0;
}
/* ── The anniversary card (G-ANNIVERSARY): a copper hairline frame, never a fill ───────────────────── */
/* (6 Nov 2026) box-shadow was inset 0 0 0 1px var(--copper); always overridden by css/site.css, so its value is here now */
.note--anniversary[data-c-policy-note] {
  padding: var(--s-2);
  background: var(--paper);
  box-shadow: none;
  max-inline-size: min(100%, 38rem);
}
:is(.ground-night, .ground-cave, .ground-chert, .ground-earth, .ground-band, .ground-d2d) .note--anniversary[data-c-policy-note] {
  background: var(--cave);
}
.ground-deep .note--anniversary[data-c-policy-note] {
  background: var(--paper);
}
/* (6 Nov 2026) box-shadow was inset 0 0 0 1px color-mix(in srgb, var(--copper) 55%, transparent); always overridden by css/site.css, so its value is here now */
.note__frame[data-c-policy-note] {
  display: block;
  padding: var(--s-6) var(--s-6) var(--s-6);
  box-shadow: none;
  font-family: var(--face-display);
  font-size: var(--fs-lede);
  font-weight: var(--wt-lede);
  line-height: var(--lh-lede);
  text-align: center;
  text-wrap: balance;
}
.note__frame[data-c-policy-note] strong {
  font-weight: 560;
}
@media (max-width: 640px) {
  .note--single[data-c-policy-note],
  .note--group[data-c-policy-note] {
    padding-inline: calc(4px + var(--s-4)) var(--s-4);
  }
  .note--single[data-c-policy-note],
  .note__item[data-c-policy-note] {
    gap: var(--s-3);
  }
  .note__frame[data-c-policy-note] {
    padding: var(--s-5) var(--s-4);
  }
}
@media (forced-colors: active) {
  .note[data-c-policy-note] {
    border: 1px solid CanvasText;
    border-inline-start-width: 4px;
  }
}

/* ── booking-terms ── */
/* Booking terms on the enquiry pages.
   Used on: /enquiries-directions/conference-enquiries/, /enquiries-directions/hotel-enquiries/, /enquiries-directions/restaurant-enquiries/, /enquiries-directions/wedding-enquiries/.
   Forum Homini website, */
/* (6 Nov 2026) box-shadow was inset 0 4px 0 var(--terms-rule, var(--layer-band, var(--rust))), inset 0 0 0 1px var(--hairline); always overridden by css/site.css, so its value is here now */
.terms[data-c-booking-terms] {
  --terms-pad: clamp(var(--s-5), 1rem + 2vw, var(--s-7));
  position: relative;
  display: grid;
  gap: var(--s-5);
  padding: calc(var(--terms-pad) + 4px) var(--terms-pad) var(--terms-pad);
  box-shadow: none;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
:is([data-layer=legal], [data-layer=dine-day]) .terms[data-c-booking-terms] {
  --terms-rule: var(--layer-band-text);
}
.terms[data-c-booking-terms] > [data-c-booking-terms] {
  margin: 0;
}
.terms__title[data-c-booking-terms] {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--wt-h3);
  font-stretch: 100%;
  letter-spacing: 0;
}
.terms__lead[data-c-booking-terms] {
  font-family: var(--face-display);
  font-size: var(--fs-lede);
  font-weight: var(--wt-lede);
  line-height: var(--lh-lede);
  color: var(--fg);
  text-wrap: balance;
}
/* Check in / check out: two numerals over a hairline, the old line whole in one <p> */
.terms__times[data-c-booking-terms] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--hairline);
}
.terms__time[data-c-booking-terms] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: var(--s-4);
}
.terms__time[data-c-booking-terms] + .terms__time[data-c-booking-terms] {
  padding-inline-start: var(--s-5);
  border-inline-start: 1px solid var(--hairline);
}
/* (6 Nov 2026) letter-spacing was var(--tr-label); always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) text-transform was uppercase; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) color was var(--fg-muted); always overridden by css/site.css, so its value is here now */
.terms__time-k[data-c-booking-terms] {
  font-size: var(--fs-label);
  font-weight: var(--wt-label);
  line-height: var(--lh-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6c27a;
}
.terms__time-v[data-c-booking-terms] {
  font-family: var(--face-display);
  font-size: var(--fs-xl);
  font-weight: var(--wt-display);
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--heading);
}
.terms__children[data-c-booking-terms] {
  color: var(--fg);
}
.terms__conditions[data-c-booking-terms] {
  display: grid;
  gap: var(--s-2);
}
/* (6 Nov 2026) letter-spacing was var(--tr-label); always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) text-transform was uppercase; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) color was var(--fg-muted); always overridden by css/site.css, so its value is here now */
.terms__sub[data-c-booking-terms] {
  font-family: var(--face-text);
  font-size: var(--fs-label);
  font-weight: var(--wt-label);
  line-height: var(--lh-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-stretch: 100%;
  color: #e6c27a;
}
.terms__list[data-c-booking-terms] {
  margin: 0;
  padding: 0;
  list-style: none;
}
.terms__list[data-c-booking-terms] li[data-c-booking-terms] {
  position: relative;
  padding-block: var(--s-3);
  padding-inline-start: var(--s-5);
  border-block-start: 1px solid var(--hairline);
}
.terms__list[data-c-booking-terms] li[data-c-booking-terms]:last-child {
  border-block-end: 1px solid var(--hairline);
}
/* A small pebble mark: a ring, drawn in CSS (§5.2 pebble) */
.terms__list[data-c-booking-terms] li[data-c-booking-terms]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--s-3) + 0.5lh - 4px);
  inline-size: 8px;
  block-size: 8px;
  border: 1.5px solid var(--eyebrow);
  border-radius: 50%;
}
.terms[data-c-booking-terms] .terms__contact {
  padding-block-start: var(--s-2);
}
.terms[data-c-booking-terms] .terms__contact .contact__intro {
  font-size: var(--fs-small);
}
@media (min-width: 1025px) {
  .terms--sticky[data-c-booking-terms] {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--sticky-h, 0px) + var(--s-5));
  }
  .terms[data-c-booking-terms] .terms__contact {
    font-size: var(--fs-small);
  }
}
@media (forced-colors: active) {
  .terms[data-c-booking-terms] {
    border: 1px solid CanvasText;
    border-block-start-width: 4px;
  }
  .terms__list[data-c-booking-terms] li[data-c-booking-terms]::before {
    border-color: CanvasText;
  }
}

/* ── enquiry-form ── */
/* Enquiry forms.
   Used on: /enquiries-directions/conference-enquiries/, /enquiries-directions/dare2dream-enquiries/, /enquiries-directions/hotel-enquiries/, /enquiries-directions/private-function-enquiries/, /enquiries-directions/restaurant-enquiries/, /enquiries-directions/wedding-enquiries/, /more/careers/.
   Forum Homini website, */
/* ── Layout: the Form pattern (§4.2) ───────────────────────────────────────────────────────────────── */
.enquiry[data-c-enquiry-form] {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}
.enquiry__main[data-c-enquiry-form] {
  display: grid;
  gap: var(--s-5);
  min-inline-size: 0;
  max-inline-size: 52rem;
}
.enquiry__intro[data-c-enquiry-form] {
  max-inline-size: var(--measure-body);
  font-size: var(--fs-body);
}
.enquiry__intro[data-c-enquiry-form] strong[data-c-enquiry-form] {
  font-weight: var(--wt-bold);
}
.enquiry__aside[data-c-enquiry-form] {
  display: grid;
  gap: var(--s-7);
  min-inline-size: 0;
  align-content: start;
}
@media (min-width: 1025px) {
  .enquiry--aside[data-c-enquiry-form] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .enquiry--aside[data-c-enquiry-form] .enquiry__main[data-c-enquiry-form] {
    grid-column: 1 / span 7;
  }
  .enquiry--aside[data-c-enquiry-form] .enquiry__aside[data-c-enquiry-form] {
    grid-column: 9 / span 4;
  }
}
@media (min-width: 1025px) and (min-height: 860px) {
  .enquiry__aside[data-c-enquiry-form] {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--sticky-h, 0px) + var(--s-5));
  }
}
/* ── The card ─────────────────────────────────────────────────────────────────────────────────────── */
/* (6 Nov 2026) box-shadow was inset 0 0 0 1px var(--hairline); always overridden by css/site.css, so its value is here now */
.enquiry__card[data-c-enquiry-form] {
  --pad: clamp(var(--s-5), 1rem + 3vw, var(--s-8));
  position: relative;
  padding: var(--pad);
  padding-block-start: calc(var(--pad) + 4px);
  box-shadow: none;
}
/* The layer's colour as a 4 px top edge (decoration) */
.enquiry__card[data-c-enquiry-form]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 4px;
  background: var(--layer-band);
}
@media (max-width: 640px) {
  /* (6 Nov 2026) box-shadow was none; always overridden by css/site.css, so its value is here now */
  .enquiry__card[data-c-enquiry-form] {
    margin-inline: calc(-1 * var(--margin));
    box-shadow: none;
  }
}
.enquiry__form[data-c-enquiry-form] {
  display: grid;
  gap: var(--s-7);
  counter-reset: set;
}
/* ── Fieldsets, with the progress rail (decorative, §8.23) ───────────────────────────────────────── */
.enquiry__set[data-c-enquiry-form] {
  position: relative;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  counter-increment: set;
}
/* (6 Nov 2026) color was var(--heading); always overridden by css/site.css, so its value is here now */
.enquiry__legend[data-c-enquiry-form] {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: 0;
  margin-block-end: var(--s-5);
  font-family: var(--face-display);
  font-size: var(--fs-h3);
  font-weight: var(--wt-h3);
  font-stretch: 100%;
  line-height: var(--lh-h3);
  color: #f6efe4;
}
.enquiry__legend[data-c-enquiry-form]::before {
  content: counter(set, decimal-leading-zero);
  font-family: var(--face-text);
  font-size: var(--fs-label);
  font-weight: var(--wt-label);
  letter-spacing: var(--tr-label);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--fg-muted);
  transform: translateY(-0.35em);
}
@media (min-width: 1025px) {
  .enquiry__form[data-c-enquiry-form] {
    gap: var(--s-8);
  }
  .enquiry__set[data-c-enquiry-form] {
    padding-inline-start: var(--s-6);
  }
  .enquiry__set[data-c-enquiry-form]::before,
  .enquiry__set[data-c-enquiry-form]::after {
    content: "";
    position: absolute;
    inset-block: 0.4em 0;
    inset-inline-start: 0;
    inline-size: 2px;
    background: var(--rule);
  }
  .enquiry__set[data-c-enquiry-form]::after {
    background: var(--layer-band);
    transform: scaleY(0);
    transform-origin: top;
  }
  .enquiry__set[data-c-enquiry-form]:valid::after {
    transform: scaleY(1);
  }
}
.enquiry__fields[data-c-enquiry-form] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--s-5);
}
@media (min-width: 641px) {
  .enquiry__fields[data-c-enquiry-form] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ── Fields: label → (required) → hint → control → error, rows aligned across a pair (subgrid) ────── */
.field[data-c-enquiry-form] {
  grid-column: 1 / -1;
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  min-inline-size: 0;
  padding-block-end: var(--s-5);
}
@media (min-width: 641px) {
  .field--half[data-c-enquiry-form] {
    grid-column: auto / span 1;
  }
}
.field[data-c-enquiry-form] > label[data-c-enquiry-form] {
  grid-row: 1;
  align-self: end;
  margin-block-end: var(--s-1);
  font-size: var(--fs-m);
  font-weight: var(--wt-label);
  line-height: 1.35;
  color: var(--fg);
}
.req[data-c-enquiry-form] {
  font-weight: var(--wt-body);
  color: var(--fg-muted);
  white-space: nowrap;
}
.hint[data-c-enquiry-form] {
  grid-row: 2;
  margin-block-end: var(--s-2);
  max-inline-size: var(--measure-body);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
}
.field[data-c-enquiry-form] > input[data-c-enquiry-form],
.field[data-c-enquiry-form] > textarea[data-c-enquiry-form],
.field[data-c-enquiry-form] > .select[data-c-enquiry-form] {
  grid-row: 3;
}
.field__error[data-c-enquiry-form] {
  grid-row: 4;
  display: flex;
  align-items: start;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
  font-size: var(--fs-small);
  font-weight: var(--wt-ui);
  line-height: var(--lh-small);
  color: var(--soil);
}
.field__error[data-c-enquiry-form] .icon {
  margin-block-start: 0.15em;
}
input[data-c-enquiry-form]:not([type=checkbox], [type=hidden]),
select[data-c-enquiry-form],
textarea[data-c-enquiry-form] {
  display: block;
  inline-size: 100%;
  min-block-size: 52px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-input);
  line-height: 1.4;
  transition: border-color var(--t-micro) linear, box-shadow var(--t-micro) linear;
}
input[data-c-enquiry-form]:hover,
select[data-c-enquiry-form]:hover,
textarea[data-c-enquiry-form]:hover {
  border-color: var(--ink);
}
input[data-c-enquiry-form]:focus-visible,
select[data-c-enquiry-form]:focus-visible,
textarea[data-c-enquiry-form]:focus-visible {
  border-color: var(--ink);
}
textarea[data-c-enquiry-form] {
  min-block-size: 9rem;
  resize: vertical;
}
input[data-c-enquiry-form][type=number] {
  font-variant-numeric: lining-nums tabular-nums;
}
input[data-c-enquiry-form][type=date] {
  font-variant-numeric: lining-nums tabular-nums;
  min-inline-size: 0;
}
input[data-c-enquiry-form][type=date]::-webkit-date-and-time-value {
  text-align: start;
}
.select[data-c-enquiry-form] {
  position: relative;
  display: block;
}
select[data-c-enquiry-form] {
  appearance: none;
  padding-inline-end: var(--s-8);
  cursor: pointer;
}
.select[data-c-enquiry-form] .select__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--s-4);
  translate: 0 -50%;
  pointer-events: none;
  color: var(--ink);
}
input[data-c-enquiry-form][type=file] {
  padding: var(--s-2);
  cursor: pointer;
}
input[data-c-enquiry-form][type=file]::file-selector-button {
  min-block-size: 36px;
  margin-inline-end: var(--s-4);
  padding-inline: var(--s-4);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--wt-label);
  cursor: pointer;
}
input[data-c-enquiry-form][type=file]:hover::file-selector-button {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.field[data-c-enquiry-form][data-state=invalid] [data-c-enquiry-form]:is(input, select, textarea),
[data-c-enquiry-form]:is(input, select, textarea):user-invalid {
  border-color: var(--soil);
  box-shadow: inset 0 0 0 1px var(--soil);
}
/* ── Checkboxes: 24 px box, 44 px row ─────────────────────────────────────────────────────────────── */
.field--check[data-c-enquiry-form] {
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: none;
  grid-row: auto;
  column-gap: var(--s-3);
  align-items: start;
}
.field[data-c-enquiry-form].field--check > input[data-c-enquiry-form] {
  grid-row: 1;
  grid-column: 1;
  inline-size: 24px;
  block-size: 24px;
  margin: 10px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.field[data-c-enquiry-form].field--check > label[data-c-enquiry-form] {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.3em;
  min-block-size: 44px;
  margin: 0;
  font-size: var(--fs-m);
  font-weight: var(--wt-ui);
  line-height: 1.35;
  cursor: pointer;
}
.field--check[data-c-enquiry-form] [data-c-enquiry-form]:is(.hint, .field__error) {
  grid-column: 2;
  grid-row: auto;
}
/* "Leave the dates empty…" (N-FORM-03b) shows once the box is ticked */
.hint--flexible[data-c-enquiry-form] {
  display: none;
}
.field--check[data-c-enquiry-form]:has(input:checked) .hint--flexible[data-c-enquiry-form] {
  display: block;
}
/* ── Error summary (N-FORM-07) ────────────────────────────────────────────────────────────────────── */
.form-errors[data-c-enquiry-form] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-3);
  row-gap: var(--s-3);
  padding: var(--s-5);
  border-inline-start: 4px solid var(--soil);
  background: var(--paper);
  color: var(--ink);
}
.form-errors[data-c-enquiry-form] .form-errors__icon {
  color: var(--soil);
  margin-block-start: 0.2em;
}
.form-errors__title[data-c-enquiry-form] {
  font-family: var(--face-display);
  font-size: var(--fs-h3);
  font-weight: var(--wt-h3);
  font-stretch: 100%;
  line-height: var(--lh-h3);
  color: var(--rust);
}
.form-errors__list[data-c-enquiry-form] {
  grid-column: 2;
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.form-errors__list[data-c-enquiry-form] a {
  display: inline-block;
  padding-block: var(--s-1);
  font-weight: var(--wt-ui);
}
/* ── Send row ─────────────────────────────────────────────────────────────────────────────────────── */
.enquiry__send[data-c-enquiry-form] {
  display: grid;
  gap: var(--s-5);
  justify-items: start;
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--rule);
}
@media (min-width: 1025px) {
  .enquiry__send[data-c-enquiry-form] {
    margin-inline-start: var(--s-6);
  }
}
.enquiry__notice[data-c-enquiry-form] {
  max-inline-size: var(--measure-body);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
}
.enquiry__notice[data-c-enquiry-form] a[data-c-enquiry-form] {
  color: var(--link);
}
/* Send: solid ink, paper label (14.51:1); the only filled button that is not Book, never copper */
/* (6 Nov 2026) min-block-size was 56px; always overridden by css/site.css, so its value is here now */
.send[data-c-enquiry-form] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-block-size: 36px;
  min-inline-size: 12rem;
  padding-inline: var(--s-7) var(--s-6);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--face-text);
  font-size: var(--fs-button);
  font-weight: var(--wt-label);
  letter-spacing: var(--tr-button);
  cursor: pointer;
  transition: background-color var(--t-micro) linear;
}
.send[data-c-enquiry-form]:hover {
  background: var(--rust);
}
.send[data-c-enquiry-form][aria-disabled=true] {
  cursor: progress;
  background: var(--ink-muted);
}
@media (max-width: 640px) {
  .enquiry__send[data-c-enquiry-form] {
    justify-items: stretch;
  }
  .send[data-c-enquiry-form] {
    inline-size: 100%;
  }
}
.form-status[data-c-enquiry-form] {
  max-inline-size: var(--measure-body);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg);
}
.form-status[data-c-enquiry-form]:empty {
  display: none;
}
.form-status[data-c-enquiry-form]:has(:global(.form-status__icon)) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-inline-start: 4px solid var(--soil);
  background: var(--paper);
}
.form-status[data-c-enquiry-form] .form-status__icon {
  color: var(--soil);
}
/* ── Success panel (N-THANKS-01…03) ──────────────────────────────────────────────────────────────── */
.enquiry__done[data-c-enquiry-form] {
  display: grid;
  justify-items: start;
  gap: var(--s-4);
  padding-block: var(--s-6);
}
.enquiry__done[data-c-enquiry-form] .enquiry__done-icon {
  inline-size: 48px;
  block-size: 48px;
  padding: var(--s-2);
  border: 1.5px solid var(--layer-band);
  border-radius: 50%;
  color: var(--ink);
}
.enquiry__done[data-c-enquiry-form] h2[data-c-enquiry-form] {
  font-size: var(--fs-h2);
  font-stretch: 100%;
}
.enquiry__done[data-c-enquiry-form] p[data-c-enquiry-form] {
  font-size: var(--fs-lede);
  font-family: var(--face-display);
  line-height: var(--lh-lede);
  max-inline-size: var(--measure-lede);
}
/* ── Review your message (tablet and desktop; only with JavaScript, §10.6) ───────────────────────── */
.review[data-c-enquiry-form] {
  display: none;
}
@media (min-width: 641px) {
  /* (6 Nov 2026) box-shadow was inset 0 0 0 1px var(--hairline), var(--shadow-card); always overridden by css/site.css, so its value is here now */
  html.js .review[data-c-enquiry-form] {
    display: grid;
    gap: var(--s-4);
    padding: var(--s-6) var(--s-6) var(--s-6) var(--s-7);
    position: relative;
    background: var(--paper);
    box-shadow: none;
  }
}
/* A margin rule down the letter, like ruled writing paper */
.review[data-c-enquiry-form]::before {
  content: "";
  position: absolute;
  inset-block: var(--s-5);
  inset-inline-start: var(--s-5);
  inline-size: 1px;
  background: var(--hairline);
}
/* (6 Nov 2026) letter-spacing was var(--tr-label); always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) text-transform was uppercase; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) color was var(--fg-muted); always overridden by css/site.css, so its value is here now */
.review__title[data-c-enquiry-form] {
  font-family: var(--face-text);
  font-size: var(--fs-label);
  font-weight: var(--wt-label);
  letter-spacing: 0.16em;
  line-height: var(--lh-label);
  text-transform: uppercase;
  font-stretch: 100%;
  color: #e6c27a;
}
.review__letter[data-c-enquiry-form] {
  font-family: var(--face-text);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-lede);
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    .enquiry__set[data-c-enquiry-form]::after {
      transition: transform var(--t-reveal) var(--ease-settle);
    }
    .send[data-c-enquiry-form]:active {
      scale: 0.98;
      transition: scale var(--t-press) linear;
    }
  }
}
@media (forced-colors: active) {
  .send[data-c-enquiry-form] {
    border: 1px solid ButtonText;
  }
}
/* Version 2 (owner, 7 Oct 2026): "update the old style forms for queries to go with the layout of the new website":
     every page with an enquiry form takes the site's dark ground (no cream bands, owner): the page, the form card a
     shade lighter, dark fields with cream words and a cream button. The paper version is kept in
     copy-edit/backups/site-files-2026-10-07/EnquiryForm.paper.astro. */
main:has(.enquiry) {
  background-color: var(--night);
}
main:has(.enquiry) :is(.ground-paper, .ground-deep) {
  --paper: color-mix(in srgb, var(--naledi) 7%, var(--night));
  --paper-deep: color-mix(in srgb, var(--naledi) 10%, var(--night));
  --ink: var(--naledi);
  --ink-muted: var(--ash);
  --line: color-mix(in srgb, var(--naledi) 45%, transparent);
  --hairline: var(--line-dark);
  --soil: var(--ember);
  --rust: var(--ember);
  --fg: var(--naledi);
  --fg-muted: var(--ash);
  --heading: var(--naledi);
  --link: var(--ember);
  --focus: var(--ember);
  --indicator: var(--ember);
  --eyebrow: var(--ember);
  --border: var(--line-dark);
  --rule: var(--line-dark);
  --layer-tag: var(--ash);
  --caption: var(--ash);
  --mat: var(--night);
  --bg: var(--night);
  background-color: var(--bg);
  color: var(--fg);
  color-scheme: dark;
}
main:has(.enquiry) .ground-deep {
  --bg: var(--paper-deep);
}

/* ── questions ── */
/* Questions (fold-open answers).
   Used on: 20 pages, e.g. /forest-breakfast/, /forum-homini-hotel/activities-and-news/, /forum-homini-hotel/conference/, /forum-homini-hotel/private-functions/, /forum-homini-hotel/weddings/.
   Forum Homini website, */
.qa[data-c-questions] {
  padding-block: var(--s-8);
  background: var(--night);
}
.qa__h[data-c-questions] {
  margin-block-end: var(--s-5);
  font-family: var(--face-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  text-align: center;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.qa__list[data-c-questions] {
  max-inline-size: 46rem;
  margin-inline: auto;
  border-block-start: 1px solid rgb(201 149 63 / 0.45);
}
.qa__list[data-c-questions] details[data-c-questions] {
  border-block-end: 1px solid rgb(201 149 63 / 0.45);
}
/* (6 Nov 2026) color was var(--naledi); always overridden by css/site.css, so its value is here now */
.qa__list[data-c-questions] summary[data-c-questions] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-block-size: 56px;
  padding-block: var(--s-3);
  font-family: var(--face-display);
  font-size: var(--fs-l);
  color: #f6efe4;
  cursor: pointer;
  list-style: none;
}
.qa__list[data-c-questions] summary[data-c-questions]::-webkit-details-marker {
  display: none;
}
.qa__list[data-c-questions] summary[data-c-questions]::after {
  content: "+";
  flex: none;
  font-size: 1.5em;
  line-height: 1;
  color: #f3d792;
  transition: rotate 200ms ease;
}
.qa__list[data-c-questions] details[data-c-questions][open] summary[data-c-questions]::after {
  rotate: 45deg;
}
.qa__list[data-c-questions] summary[data-c-questions]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 2px;
}
.qa__list[data-c-questions] details[data-c-questions] p[data-c-questions] {
  padding-block-end: var(--s-4);
  font-size: var(--fs-m);
  line-height: 1.6;
  color: var(--naledi);
  opacity: 0.9;
}
.qa__list[data-c-questions] a {
  color: #f3d792;
  text-underline-offset: 0.2em;
}

/* ── jump-bar ── */
/* Jump bar (row of links to parts of a page).
   Used on: 11 pages, e.g. /forest-breakfast/, /forum-homini-hotel/activities-and-news/, /romantic-dinners/, /romantic-dinners/fantasy-view/, /romantic-dinners/nymphs-table/.
   Forum Homini website, */
.jb--after-hero[data-c-jump-bar] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.jb--after-hero[data-c-jump-bar].is-shown {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease, visibility 0s;
}
/* (6 Nov 2026) display was flex; always overridden by css/site.css, so its value is here now */
.jb[data-c-jump-bar] {
  position: fixed;
  inset-inline: 0;
  inset-block-start: var(--header-offset, var(--header-h));
  transition: inset-block-start var(--t-ui, 300ms) var(--ease-out-expo, ease);
  z-index: 30;
  display: none;
  justify-content: center;
  padding: 2px var(--s-3) 0;
  pointer-events: none;
}
.jb[data-c-jump-bar] ul[data-c-jump-bar] {
  display: flex;
  gap: 6px;
  max-inline-size: 100%;
  margin: 0;
  padding: 5px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid rgb(201 149 63 / 0.5);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, #000 72%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.8);
  pointer-events: auto;
}
.jb[data-c-jump-bar] ul[data-c-jump-bar]::-webkit-scrollbar {
  display: none;
}
.jb[data-c-jump-bar] a[data-c-jump-bar] {
  display: block;
  padding: 0.45em 1em;
  border-radius: var(--r-pill);
  color: #f3d792;
  font-family: var(--face-text);
  font-size: var(--fs-small, 0.9375rem);
  font-weight: var(--wt-label, 600);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms linear, color 150ms linear;
}
/* then (9 Oct 2026: "It is a bit confusing if Dare to dream button is in gold and the button of the topic that you
     are on. Just have dare2dream without button"): plain light words, a thin gold rule after them */
.jb__switch[data-c-jump-bar] {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: #0b0705;
}
/* two switches (owner, 15 Oct 2026: the three Dine pages switch to each other): they scroll with the row instead of
     both pinning to its left edge, where the second covered the first */
.jb[data-c-jump-bar] ul[data-c-jump-bar]:has(.jb__switch + .jb__switch) .jb__switch[data-c-jump-bar] {
  position: static;
}
.jb__switch[data-c-jump-bar] a[data-c-jump-bar] {
  color: var(--naledi);
  font-style: normal;
  font-family: var(--face-text);
}
.jb__switch[data-c-jump-bar]::after {
  content: "";
  inline-size: 1px;
  block-size: 1.2em;
  margin-inline-start: 4px;
  background: rgb(201 149 63 / 0.6);
}
.jb[data-c-jump-bar] a[data-c-jump-bar]:hover {
  background: rgb(243 215 146 / 0.15);
}
.jb[data-c-jump-bar] a[data-c-jump-bar][aria-current=true],
.jb[data-c-jump-bar] a[data-c-jump-bar][aria-current=page] {
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
}
.jb[data-c-jump-bar] a[data-c-jump-bar]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 2px;
}

/* ── butterfly-story ── */
/* The butterfly story pop-up on the romantic dinner pages.
   Used on: /forest-breakfast/, /romantic-dinners/fantasy-view/, /romantic-dinners/nymphs-table/, /romantic-dinners/red-chandelier/, /romantic-dinners/stargazer/, /romantic-dinners/whispering-tree/.
   Forum Homini website, */
@media (max-width: 640px) {
  .bf__sheet[data-c-butterfly-story] .bf__title[data-c-butterfly-story] {
    max-inline-size: 78%;
    padding: var(--s-2) var(--s-3) var(--s-4);
  }
  .bf__sheet[data-c-butterfly-story] .bf__h[data-c-butterfly-story] {
    font-size: var(--fs-s);
  }
  .bf__sheet[data-c-butterfly-story] .bf__by[data-c-butterfly-story] {
    font-size: 0.75rem;
  }
  .bf__sheet[data-c-butterfly-story] .bf__player[data-c-butterfly-story] {
    padding: 48px var(--s-3) var(--s-2);
  }
}
/* the card in the middle, with the same space above and more below, so it never reads as the film's heading */
.bf[data-c-butterfly-story] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  justify-content: center;
  padding: calc(var(--s-6) + var(--s-3)) var(--margin) var(--s-6);
}

/* (6 Nov 2026) min-block-size was 44px; always overridden by css/site.css, so its value is here now */

.bf__btn[data-c-butterfly-story] {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  inline-size: min(100%, 30rem);
  min-block-size: 36px;
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  border: 1.5px solid rgb(185 140 255 / 0.7);
  border-radius: 999px;
  background:
    radial-gradient(
      ellipse at 15% 50%,
      rgb(185 140 255 / 0.22),
      transparent 60%),
    rgb(20 10 31 / 0.6);
  box-shadow: 0 0 30px -6px rgb(185 140 255 / 0.45);
  color: #f6efe4;
  text-align: start;
  cursor: pointer;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  .bf__btn[data-c-butterfly-story] {
    animation: bf-beat 4s ease-in-out infinite;
  }
  [data-c-butterfly-story][data-bf]:not([data-playing]) .bf__wing[data-c-butterfly-story] {
    animation: bf-rest 4s ease-in-out infinite;
  }
}

.bf__read[data-c-butterfly-story],
.bf__read[data-c-butterfly-story]:visited {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: #f3d792;
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.bf__btn[data-c-butterfly-story]:hover {
  border-color: #d9bfff;
  box-shadow: 0 0 40px -4px rgb(185 140 255 / 0.65);
}
.bf__words[data-c-butterfly-story] {
  flex: 1;
  display: grid;
  gap: 2px;
}
.bf__kicker[data-c-butterfly-story] {
  font-family: var(--face-text);
  font-size: 0.75rem;
  font-weight: var(--wt-label, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d9bfff;
}
.bf__go[data-c-butterfly-story] {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
}
.bf__fly[data-c-butterfly-story] {
  flex: none;
  inline-size: 84px;
  block-size: 63px;
  filter: drop-shadow(0 0 12px rgb(255 120 220 / 0.45)) drop-shadow(0 0 18px rgb(90 160 255 / 0.35));
}
/* the wings open and close now and then (and flutter while the story plays) */
.bf__wing[data-c-butterfly-story] {
  transform-box: view-box;
  transform-origin: 32px 24px;
}
@media (prefers-reduced-motion: no-preference) {
  .bf__wing[data-c-butterfly-story] {
    animation: bf-rest 5s ease-in-out infinite;
  }
  [data-c-butterfly-story][data-bf][data-playing] .bf__wing[data-c-butterfly-story] {
    animation: bf-flutter 0.45s ease-in-out infinite alternate;
  }
}

.bf__label[data-c-butterfly-story] {
  font-family: var(--face-text);
  font-size: var(--fs-s);
  line-height: 1.35;
  color: #f6efe4;
}
.bf__btn[data-c-butterfly-story]:hover .bf__label[data-c-butterfly-story] {
  color: #f0e2ff;
}
.bf__btn[data-c-butterfly-story]:focus-visible,
.bf__close[data-c-butterfly-story]:focus-visible,
.bf__play[data-c-butterfly-story]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}
/* owner (17 Oct 2026): "Place the heading and pause button on the picture. take out the black at the bottom": the window
     is the photo alone, the heading and the button on its foot over a soft shade */
.bf__sheet[data-c-butterfly-story] {
  position: fixed;
  inset: 0;
  margin: auto;
  inline-size: min(92vw, 44rem, calc(92svh * 4 / 3));
  padding: 0;
  border: 1.5px solid #b98cff;
  border-radius: 18px;
  background: #0b0710;
  color: #f6efe4;
  overflow: hidden;
}
.bf__sheet[data-c-butterfly-story][open] {
  display: grid;
}
.bf__sheet[data-c-butterfly-story] > [data-c-butterfly-story]:is(.bf__photo, .bf__player, .bf__soon) {
  grid-area: 1 / 1;
}
/* the heading and her name, small, at the top left on the trees */
.bf__title[data-c-butterfly-story] {
  align-self: start;
  justify-self: start;
  max-inline-size: 60%;
  padding: var(--s-3) var(--s-4) var(--s-5);
  background:
    radial-gradient(
      ellipse at 0% 0%,
      rgb(0 0 0 / 0.55),
      transparent 72%);
}
.bf__h[data-c-butterfly-story] {
  font-family: var(--face-display);
  font-size: var(--fs-m);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.7);
}
.bf__by[data-c-butterfly-story] {
  flex: none;
  margin: 0;
  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;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.7);
}
/* the player at the foot: the round gold button and the bars, on a soft shade */
.bf__player[data-c-butterfly-story] {
  align-self: end;
  display: grid;
  gap: 10px;
  padding: 56px 16px 14px;
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgb(0 0 0 / 0.55) 40%,
      rgb(0 0 0 / 0.85));
}
.bf__row[data-c-butterfly-story] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.bf__play[data-c-butterfly-story] {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  border-radius: 50%;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
  cursor: pointer;
}
.bf__play[data-c-butterfly-story] svg[data-c-butterfly-story] {
  fill: currentColor;
}
.bf__i-play[data-c-butterfly-story],
[data-c-butterfly-story][data-bf][data-playing] .bf__i-pause[data-c-butterfly-story] {
  display: inline;
}
.bf__i-pause[data-c-butterfly-story],
[data-c-butterfly-story][data-bf][data-playing] .bf__i-play[data-c-butterfly-story] {
  display: none;
}
/* the bars from the left edge to the right, tall, in the name's bright gold with a soft glow (as the Listen screen) */
.bf__bars[data-c-butterfly-story] {
  display: flex;
  align-items: center;
  gap: 3px;
  block-size: clamp(56px, 9vw, 84px);
  filter: drop-shadow(0 0 6px rgb(243 215 146 / 0.55));
}
.bf__bars[data-c-butterfly-story] span[data-c-butterfly-story] {
  --h: 0.2;
  flex: 1;
  block-size: 100%;
  border-radius: 3px;
  background:
    linear-gradient(
      180deg,
      #fff6dc,
      #f3d792 45%,
      #e2b65f);
  transform: scaleY(var(--h));
  transition: transform 70ms linear;
}
.bf__sheet[data-c-butterfly-story]::backdrop {
  background: rgb(0 0 0 / 0.75);
}
.bf__photo[data-c-butterfly-story] {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.bf__soon[data-c-butterfly-story] {
  font-family: var(--face-text);
  font-size: var(--fs-m);
  color: #cfc6b8;
}
.bf__close[data-c-butterfly-story] {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  z-index: 1;
  inline-size: 44px;
  block-size: 44px;
  border: 1.5px solid #b98cff;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.7);
  color: #fff;
  font-size: var(--fs-l);
  line-height: 1;
  cursor: pointer;
}

/* (was written into each of these pages; one copy here is enough) */
/* when the photo river comes after the card (Forest Breakfast), the river gives up its top space instead */
.bf + script + .pr,
.bf + .pr {
  padding-block-start: var(--s-3) !important;
}
.pr:has(+ .bf),
.pr:has(+ script + .bf) {
  padding-block-end: 0 !important;
}

/* (was written into each of these pages; one copy here is enough) */
@keyframes bf-beat {
  0%, 70%, 100% {
    transform: scale(1);
    box-shadow: 0 0 30px -6px rgb(185 140 255 / 0.45);
  }
  80% {
    transform: scale(1.05);
    box-shadow: 0 0 46px 0 rgb(185 140 255 / 0.8);
  }
  90% {
    transform: scale(1);
  }
}

/* (was written into each of these pages; one copy here is enough) */
@keyframes bf-rest {
  0%, 78%, 100% {
    transform: scaleX(1);
  }
  84% {
    transform: scaleX(0.35);
  }
  90% {
    transform: scaleX(1);
  }
  95% {
    transform: scaleX(0.55);
  }
}
@keyframes bf-flutter {
  to {
    transform: scaleX(0.4);
  }
}

/* ── suite-nav ── */
/* Floating page menu (suites, activities, upgrades).
   Used on: 20 pages, e.g. /forum-homini-hotel/activities/artful-tones/, /forum-homini-hotel/activities/beach-and-bush/, /forum-homini-hotel/activities/drumming/, /forum-homini-hotel/activities/game-drives/, /forum-homini-hotel/activities/laser-adventures/.
   Forum Homini website, */
.sn[data-c-suite-nav] {
  padding: 0 var(--margin) var(--section-pad, var(--s-10));
  background-color: var(--room-deep, var(--night));
}
.sn--overlay[data-c-suite-nav] {
  padding: 0;
  background: none;
}
/* (owner, 25 Oct 2026: "keep that moving bar … under the main bar heading at the top … then you keep the sleep, eat, events at
     the bottom"): the row of suites, dinners, events, upgrades or hotel pages sits just under the top bar (it moves up when the
     top bar steps aside), and shows once the page's top photo has scrolled away (the top bar never covers a top photo) */
/* (6 Nov 2026) display was flex; always overridden by css/site.css, so its value is here now */
.sn--floating[data-c-suite-nav] {
  position: fixed;
  inset-inline: 0;
  inset-block-start: calc(var(--header-offset, var(--header-h)) + 4px);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 200ms ease,
    visibility 0s linear 200ms,
    inset-block-start var(--t-ui, 300ms) var(--ease-out-expo, ease);
  display: none;
  justify-content: center;
  padding: 0 var(--margin);
  background: none;
  pointer-events: none;
}
/* (6 Nov 2026) opacity was 1; always overridden by css/site.css, so its value is here now */
/* (6 Nov 2026) visibility was visible; always overridden by css/site.css, so its value is here now */
.sn--floating[data-c-suite-nav].is-shown {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 200ms ease,
    visibility 0s,
    inset-block-start var(--t-ui, 300ms) var(--ease-out-expo, ease);
}
.sn--floating[data-c-suite-nav] .sn__row[data-c-suite-nav] {
  flex-wrap: nowrap;
  justify-content: flex-start;
  max-inline-size: 100%;
  padding: var(--s-2);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--night) 55%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.7);
  overflow-x: auto;
  scrollbar-width: none;
  pointer-events: auto;
}
/* (owner, 25 Oct 2026: "How do I navigate if I am now in one of the indulgences to go back to the different types of suites?"):
     the pinned button sits in its own small pill at the start, the other row glides beside it */
.sn--floating[data-c-suite-nav]:has(.sn__row--pins) {
  gap: 6px;
}
.sn--floating[data-c-suite-nav] .sn__row--pins[data-c-suite-nav] {
  flex: none;
  overflow: visible;
}
.sn--floating[data-c-suite-nav]:has(.sn__row--pins) .sn__row[data-c-suite-nav]:not(.sn__row--pins) {
  flex: 0 1 auto;
  min-inline-size: 0;
}
.sn--floating[data-c-suite-nav] .sn__row[data-c-suite-nav]::-webkit-scrollbar {
  display: none;
}
.sn--floating[data-c-suite-nav] .sn__btn[data-c-suite-nav] {
  min-block-size: 44px;
  padding-inline: var(--s-5);
  white-space: nowrap;
}
@media (max-width: 960px) {
  .sn--floating[data-c-suite-nav] .sn__row[data-c-suite-nav] {
    gap: 6px;
  }
  .sn--floating[data-c-suite-nav] .sn__btn[data-c-suite-nav] {
    min-block-size: 44px;
    padding-inline: var(--s-4);
  }
}
@media (max-width: 640px) {
  .sn--floating[data-c-suite-nav] {
    padding-inline: var(--s-2);
  }
  /* five buttons on a phone's width: tighter gaps and padding; the row slides sideways if it must */
  .sn--floating[data-c-suite-nav] .sn__row[data-c-suite-nav] {
    gap: 4px;
    padding: 4px;
  }
  .sn--floating[data-c-suite-nav] .sn__btn[data-c-suite-nav] {
    min-block-size: 38px;
    padding-inline: 10px;
    font-size: var(--fs-s);
  }
}
@media (max-width: 374px) {
  .sn--floating[data-c-suite-nav] {
    padding-inline: 6px;
  }
  .sn--floating[data-c-suite-nav] .sn__row[data-c-suite-nav] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 22px;
    overflow: visible;
  }
  .sn--floating[data-c-suite-nav] .sn__btn[data-c-suite-nav] {
    justify-content: center;
    padding-inline: 6px;
    font-size: var(--fs-s);
  }
}
.sn__row[data-c-suite-nav] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Owner (12 Oct 2026): "What can you do to highlight at the bottom button that that is the room you are currently
     in?": the other suites are quiet (gold words in a thin gold ring); the suite you are in is filled with the graded
     gold, dark words, a soft gold glow and a small dot in the suite's own colour */
.sn__btn[data-c-suite-nav],
.sn__btn[data-c-suite-nav]:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-block-size: 52px;
  padding-inline: var(--s-6);
  border: 1px solid rgb(201 149 63 / 0.6);
  border-radius: var(--r-pill);
  background: rgb(11 7 5 / 0.55);
  color: #f3d792;
  font-weight: var(--wt-label, 600);
  text-decoration: none;
  transition: background-color 150ms linear;
}
.sn__btn[data-c-suite-nav]:hover {
  background-color: rgb(243 215 146 / 0.18);
}
.sn__btn--current[data-c-suite-nav],
.sn__btn--current[data-c-suite-nav]:visited,
.sn__btn--current[data-c-suite-nav]:hover {
  border-color: #fff3cf;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
  box-shadow: 0 0 0 3px rgb(243 215 146 / 0.25), 0 0 18px rgb(243 215 146 / 0.45);
}
/* the romantic dinners: rose red with gold words and a gold edge; the dinner you are on stays gold */
.sn--red[data-c-suite-nav] .sn__btn[data-c-suite-nav]:not(.sn__btn--current),
.sn--red[data-c-suite-nav] .sn__btn[data-c-suite-nav]:not(.sn__btn--current):visited {
  border-color: #e6c27a;
  background:
    linear-gradient(
      180deg,
      #c8203a,
      #9e1029);
  color: #f3d792;
}
.sn--red[data-c-suite-nav] .sn__btn[data-c-suite-nav]:not(.sn__btn--current):hover {
  background:
    linear-gradient(
      180deg,
      #d92a45,
      #b3142f);
}
@media (max-width: 640px) {
  .sn--overlay[data-c-suite-nav] .sn__row[data-c-suite-nav] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
  }
  .sn--overlay[data-c-suite-nav] .sn__btn[data-c-suite-nav] {
    justify-content: center;
    inline-size: 100%;
    min-block-size: 40px;
    padding-inline: var(--s-3);
    font-size: var(--fs-s);
  }
}
.sn__btn[data-c-suite-nav]:focus-visible {
  outline: 2px solid var(--naledi);
  outline-offset: 3px;
}

/* ── feature-list ── */
/* Feature lists.
   Used on: /forum-homini-hotel/activities-and-news/, /forum-homini-hotel/private-functions/, /suites/deluxe/, /suites/honeymoon/, /suites/presidential/, /suites/standard/, /suites/super-deluxe/.
   Forum Homini website, */
.features-block[data-c-feature-list] {
  min-inline-size: 0;
}
.features__heading[data-c-feature-list] {
  margin-block-end: var(--s-5);
}
.features__heading--p[data-c-feature-list] {
  font-family: var(--face-text);
  font-size: var(--fs-body);
  font-weight: var(--wt-bold);
  line-height: var(--lh-body);
  color: var(--fg);
}
.features[data-c-feature-list] {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* a new group of the suites' facts: a bigger gap above, no heading */
.features__item[data-c-feature-list].features__item--gap {
  margin-block-start: var(--s-6);
}
.features__item[data-c-feature-list] {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  min-inline-size: 0;
}
.features__text[data-c-feature-list] {
  min-inline-size: 0;
  text-wrap: pretty;
}
.features__text[data-c-feature-list] strong[data-c-feature-list] {
  font-weight: var(--wt-bold);
}
@media (min-width: 641px) {
  .features[data-c-feature-list][data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-7);
  }
}
/* ── icons: a stone ring per item, hairline rows ───────────────────────────────────────────────── */
.features--icons[data-c-feature-list] .features__item[data-c-feature-list] {
  align-items: center;
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--rule);
  font-size: var(--fs-body);
  line-height: var(--lh-small);
  color: var(--fg);
}
.features--icons[data-c-feature-list] .features__item[data-c-feature-list]:first-child {
  border-block-start: 1px solid var(--rule);
}
@media (min-width: 641px) {
  .features--icons[data-c-feature-list][data-columns="2"] .features__item[data-c-feature-list]:nth-child(2) {
    border-block-start: 1px solid var(--rule);
  }
}
.features__icon[data-c-feature-list] {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--mat);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--heading);
}
/* ── menu: a card, Display lines, pebble bullets, hairlines ────────────────────────────────────── */
.features-block--menu[data-c-feature-list] .features__heading[data-c-feature-list]:is(h2) {
  font-size: var(--fs-xl);
}
/* (6 Nov 2026) box-shadow was inset 0 0 0 1px var(--rule); always overridden by css/site.css, so its value is here now */
.features-block--card[data-c-feature-list] {
  padding: var(--s-6) var(--s-5);
  background: var(--mat);
  box-shadow: none;
}
.features-block--card[data-c-feature-list]:is(.ground-deep, .ground-cave) {
  background: var(--bg);
}
.features--menu[data-c-feature-list] .features__item[data-c-feature-list] {
  align-items: first baseline;
  padding-block: var(--s-4);
  font-family: var(--face-display);
  font-size: var(--fs-h3);
  font-weight: var(--wt-display);
  line-height: var(--lh-h3);
  color: var(--heading);
  font-variant-numeric: lining-nums tabular-nums;
}
.features--menu[data-c-feature-list] .features__item[data-c-feature-list] + .features__item[data-c-feature-list] {
  border-block-start: 1px solid var(--rule);
}
.features--menu[data-c-feature-list] .features__item[data-c-feature-list]:first-child {
  padding-block-start: 0;
}
.features--menu[data-c-feature-list] .features__item[data-c-feature-list]:last-child {
  padding-block-end: 0;
}
@media (min-width: 641px) {
  .features--menu[data-c-feature-list][data-columns="2"] .features__item[data-c-feature-list]:nth-child(2) {
    padding-block-start: 0;
    border-block-start: 0;
  }
}
.features__pebble[data-c-feature-list] {
  flex: none;
  align-self: center;
  inline-size: 18px;
  block-size: 18px;
  background-color: var(--quote-accent, var(--eyebrow));
  -webkit-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='1.5'%3e%3cpath%20d='M12.6%206.3c3.3.2%205.6%202.7%205.3%205.9-.3%203.3-3%205.7-6.3%205.5-3.3-.2-5.7-2.8-5.5-6%20.2-3.3%203.1-5.6%206.5-5.4z'/%3e%3ccircle%20cx='12'%20cy='12'%20r='1.6'%20fill='currentColor'%20stroke='none'/%3e%3c/svg%3e") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='1.5'%3e%3cpath%20d='M12.6%206.3c3.3.2%205.6%202.7%205.3%205.9-.3%203.3-3%205.7-6.3%205.5-3.3-.2-5.7-2.8-5.5-6%20.2-3.3%203.1-5.6%206.5-5.4z'/%3e%3ccircle%20cx='12'%20cy='12'%20r='1.6'%20fill='currentColor'%20stroke='none'/%3e%3c/svg%3e") no-repeat center / contain;
}
.features--menu[data-c-feature-list] .features__text[data-c-feature-list] strong[data-c-feature-list] {
  font-weight: 560;
}
@media (min-width: 1025px) {
  .features-block--card[data-c-feature-list] {
    padding: var(--s-7) var(--s-7);
  }
}
/* ── plain: short strata dashes ─────────────────────────────────────────────────────────────────── */
.features--plain[data-c-feature-list] {
  row-gap: var(--s-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.features__dash[data-c-feature-list] {
  flex: none;
  inline-size: 14px;
  block-size: 1px;
  align-self: center;
  background: var(--eyebrow);
  transform: translateY(-0.1em);
}
@media (forced-colors: active) {
  .features__pebble[data-c-feature-list] {
    background-color: CanvasText;
  }
  .features__dash[data-c-feature-list] {
    background: CanvasText;
  }
}

/* ── arrow-fold ── */
/* Fold-open rows with an arrow (What is included …).
   Used on: 12 pages, e.g. /forum-homini-hotel/conference/, /forum-homini-hotel/weddings/, /upgrades/bath-menu/, /upgrades/bubbles/, /upgrades/occasions/.
   Forum Homini website, */
.af__row[data-c-arrow-fold] {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  cursor: pointer;
  color: #f3d792;
}
.af__row[data-c-arrow-fold]::-webkit-details-marker {
  display: none;
}
/* (owner, 2 Nov 2026: "maybe it should be underlined that people can see they must click on it") */
.af__head[data-c-arrow-fold] {
  text-align: center;
  text-decoration: underline;
  text-decoration-color: #f3d792;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.af__head[data-c-arrow-fold] * {
  text-decoration: inherit;
  text-decoration-color: inherit;
  text-underline-offset: inherit;
}
.af__head[data-c-arrow-fold] > * {
  margin-block: 0;
  text-align: center;
}
.af__arrow[data-c-arrow-fold] {
  flex: none;
  transition: rotate 200ms ease;
}
.af[data-c-arrow-fold][open] > .af__row[data-c-arrow-fold] .af__arrow[data-c-arrow-fold] {
  rotate: 180deg;
}
.af__body[data-c-arrow-fold] {
  padding-block-start: var(--gap-item, 12px);
}

/* ── gallery-tiles ── */
/* Gallery tiles.
   Used on: /, /more/gallery/.
   Forum Homini website, */
/* phone: three across (the first, the suites, two wide); laptop: six across, two rows */
.gt[data-c-gallery-tiles] {
  --gt-gap: 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: var(--gt-row, auto);
  gap: var(--gt-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt__item[data-c-gallery-tiles] {
  position: relative;
  aspect-ratio: var(--gt-shape, 1);
  min-inline-size: 0;
}
.gt__item--wide[data-c-gallery-tiles] {
  grid-column: span 2;
  aspect-ratio: auto;
}
@media (max-width: 899px) {
  .gt__item--last[data-c-gallery-tiles] {
    grid-column: span 2;
    aspect-ratio: auto;
  }
}
.gt__tile[data-c-gallery-tiles] {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  text-decoration: none;
}
.gt__tile[data-c-gallery-tiles] .gt__art {
  position: absolute;
  inset: 0;
}
.gt__tile[data-c-gallery-tiles] .art__img {
  transition: transform 600ms ease;
}
.gt__tile[data-c-gallery-tiles]:hover .art__img,
.gt__tile[data-c-gallery-tiles]:focus-visible .art__img {
  transform: scale(1.04);
}
.gt__name[data-c-gallery-tiles] {
  position: absolute;
  inset: auto 0 0;
  padding: 16px 6px 5px;
  font-family: var(--face-text);
  font-style: normal;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.05;
  color: #f3d792;
  background:
    linear-gradient(
      to top,
      rgb(0 0 0 / 0.8),
      transparent);
}
@media (min-width: 900px) {
  .gt[data-c-gallery-tiles] {
    --gt-gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .gt--thirteen[data-c-gallery-tiles] {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .gt__name[data-c-gallery-tiles] {
    padding: 24px 10px 8px;
    font-size: 1.125rem;
  }
}

/* ── check-dates ── */
/* Check dates box on the suite pages.
   Used on: /plan-your-visit/, /suites/deluxe/, /suites/honeymoon/, /suites/presidential/, /suites/standard/, /suites/super-deluxe/.
   Forum Homini website, */
.cd[data-c-check-dates] {
  display: grid;
  gap: var(--s-2);
  max-inline-size: 40rem;
  margin-block-start: var(--s-3);
  padding: var(--s-4);
  border: 1px solid rgb(201 149 63 / 0.6);
  border-radius: 16px;
  background: rgb(11 7 5 / 0.45);
}
.cd__h[data-c-check-dates] {
  margin: 0;
  color: #fff;
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: var(--wt-label, 600);
  letter-spacing: var(--tr-label, 0.14em);
  text-transform: uppercase;
}
.cd__fields[data-c-check-dates] {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s-3);
}
.cd__field[data-c-check-dates] {
  display: grid;
  gap: 4px;
  flex: 1 1 9rem;
}
.cd__label[data-c-check-dates] {
  color: #f3d792;
  font-size: var(--fs-s);
}
.cd__input[data-c-check-dates] {
  min-block-size: 44px;
  padding: 0 var(--s-3);
  border: 1px solid rgb(243 215 146 / 0.6);
  border-radius: 10px;
  background: rgb(0 0 0 / 0.35);
  color: #fff;
  color-scheme: dark;
  font: inherit;
  font-size: var(--fs-m);
}
.cd__input[data-c-check-dates]:focus-visible,
.cd__btn[data-c-check-dates]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 2px;
}
/* (6 Nov 2026) min-block-size was 44px; always overridden by css/site.css, so its value is here now */
.cd__btn[data-c-check-dates] {
  flex: 1 1 12rem;
  min-block-size: 36px;
  padding-inline: var(--s-5);
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 600;
  cursor: pointer;
}
.cd__btn[data-c-check-dates]:hover {
  filter: brightness(1.06);
}
.cd__note[data-c-check-dates] {
  margin: 0;
  color: var(--naledi);
  font-size: var(--fs-s);
  opacity: 0.9;
}

/* ── list-fixes ── */
/* Site-wide fixes from Karina's change list of 8 Nov 2026 (added 9 Nov 2026) */
/* 2.3 no PDF sign and no "(PDF, 426 KB, May 2014)" line on any document link; !important because the card and
   list layouts above give these their own display */
.downloads__meta,
.downloads__mark,
.pc__meta {
  display: none !important;
}
/* 2.5 a button or link answers the moment it is touched: a gold glow */
a:active,
button:active {
  background-color: rgb(230 194 122 / 0.25);
}
/* 2.8 the "Close ×" at the end of every fold-out menu (details.af); the script is in parts/bottom.html */
.af__close {
  display: block;
  margin: 24px auto 8px;
  padding: 0 20px;
  block-size: 36px;
  border: 1px solid #e6c27a;
  border-radius: 999px;
  background: transparent;
  color: #f6efe4;
  font: 600 14px var(--face-text);
  letter-spacing: 0.04em;
  cursor: pointer;
}