/* Styles for /suites/: suite-zoom, honeymoon-showcase, suites-page.
   Search for "── <name> ──" to find a part.
   Forum Homini website, editable IIS version v016 20261109 081746. Generated with Claude Opus 5.5. */

/* ── suite-zoom ── */
/* Suites page: the suites zooming open.
   Used on: /suites/.
   Forum Homini website, */
.hz[data-c-suite-zoom] {
  position: relative;
  background-color: var(--night);
  color: var(--naledi);
}
/* Fallback (no scroll timelines, or reduced motion): four full screens, one after another */
.hz__frame[data-c-suite-zoom] {
  position: relative;
  display: grid;
  align-items: end;
  min-block-size: 100svh;
  margin: 0;
  overflow: hidden;
  background-color: var(--night);
}
.hz__img[data-c-suite-zoom] {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.hz__breathe[data-c-suite-zoom] {
  position: absolute;
  inset: 0;
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .hz__breathe[data-c-suite-zoom] {
    transform-origin: 50% 60%;
    animation: hz-breathe 9s ease-in-out infinite alternate;
  }
  @keyframes hz-breathe {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.25);
    }
  }
}
.hz__shade[data-c-suite-zoom] {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--night) 82%, transparent) 0%,
      color-mix(in srgb, var(--night) 40%, transparent) 30%,
      transparent 58%);
}
.hz__shade--soft[data-c-suite-zoom] {
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--night) 70%, transparent) 0%,
      transparent 35%);
}
.hz__copy[data-c-suite-zoom],
.hz__label[data-c-suite-zoom] {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  row-gap: var(--s-5);
  inline-size: 100%;
  max-inline-size: calc(var(--content-max) + 2 * var(--margin));
  margin-inline: auto;
  padding: var(--s-9) var(--margin) calc(var(--s-9) + 4vw);
}
.hz__label[data-c-suite-zoom] {
  row-gap: var(--s-2);
}
.hz__suites[data-c-suite-zoom] {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--s-6);
  z-index: 2;
  padding-inline: var(--margin);
}
.hz__frame--1[data-c-suite-zoom] .hz__copy[data-c-suite-zoom] {
  padding-block-end: calc(var(--s-9) + 64px);
}
@media (max-width: 640px) {
  .hz__suites[data-c-suite-zoom] {
    inset-block-end: calc(var(--dock-h, 64px) + var(--s-4));
  }
  .hz__frame--1[data-c-suite-zoom] .hz__copy[data-c-suite-zoom] {
    padding-block-end: calc(var(--dock-h, 64px) + 120px);
    row-gap: var(--s-3);
  }
  .hz__frame--1[data-c-suite-zoom] .hz__title[data-c-suite-zoom] {
    font-size: var(--fs-xl);
  }
}
/* Owner: on the Suites page the words and button stand on the right, so it doesn't look the same as the home */
.hz__frame--1[data-c-suite-zoom] .hz__copy[data-c-suite-zoom] {
  justify-items: end;
  text-align: end;
}
.hz__frame--1[data-c-suite-zoom] .hz__title[data-c-suite-zoom] {
  margin-inline-start: auto;
}
/* Owner: "the font size of these headings are too big, it covers the photo": about half the first size, the same
     on every suite's opening photo */
.hz__title[data-c-suite-zoom] {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--naledi);
  max-inline-size: 12ch;
  text-wrap: balance;
}
/* Owner: "the small words don't show easily … those words for honeymoon should be in blue, and then we choose the
     colour for the different types of rooms": a solid label in the room's colour (Honeymoon blue) */
/* (6 Nov 2026) color was var(--on-copper); always overridden by css/site.css, so its value is here now */
.hz__eyebrow[data-c-suite-zoom] {
  padding: 0.45em 1em;
  border-radius: var(--r-pill);
  background-color: var(--copper);
  color: #1d1405;
  font-size: var(--fs-m);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.6);
}
/* (6 Nov 2026) color was var(--naledi); always overridden by css/site.css, so its value is here now */
.hz__name[data-c-suite-zoom] {
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.55);
  font-family: var(--face-display);
  font-size: var(--fs-xl);
  line-height: 1;
  color: #f6efe4;
}
.hz[data-c-suite-zoom] .hz__cta[data-c-suite-zoom],
.hz[data-c-suite-zoom] .hz__cta[data-c-suite-zoom]:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 56px;
  padding-inline: var(--s-7);
  border-radius: var(--r-pill);
  background-color: var(--copper);
  color: var(--on-copper);
  font-weight: var(--wt-label, 600);
  font-size: var(--fs-m);
  text-decoration: none;
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--copper) 80%, transparent);
}
.hz__titlelink[data-c-suite-zoom],
.hz__titlelink[data-c-suite-zoom]:visited {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 3px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: background-size 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hz__titlelink[data-c-suite-zoom]:hover,
.hz__titlelink[data-c-suite-zoom]:focus-visible {
  background-size: 100% 3px;
  background-position: 0% 100%;
}
.hz__titlelink[data-c-suite-zoom]:focus-visible {
  outline: 2px solid var(--naledi);
  outline-offset: 6px;
}
.hz__arrowhead[data-c-suite-zoom] {
  display: inline-block;
  color: var(--copper);
  transition: translate 300ms ease;
}
.hz__titlelink[data-c-suite-zoom]:hover .hz__arrowhead[data-c-suite-zoom] {
  translate: 0.15em 0;
}
.hz[data-c-suite-zoom] .hz__cta--room[data-c-suite-zoom],
.hz[data-c-suite-zoom] .hz__cta--room[data-c-suite-zoom]:visited {
  background-color: #1f4f99;
  color: #fff;
  box-shadow: 0 18px 40px -18px rgb(31 79 153 / 0.8);
}
.hz[data-c-suite-zoom] .hz__cta[data-c-suite-zoom].hz__cta--room:hover {
  background-color: #2a62b8;
}
.hz[data-c-suite-zoom] .hz__cta[data-c-suite-zoom]:hover {
  background-color: var(--copper-hover);
}
.hz__cta[data-c-suite-zoom]:focus-visible {
  outline: 2px solid var(--naledi);
  outline-offset: 3px;
}
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hz[data-c-suite-zoom] {
      block-size: 420svh;
      view-timeline: --hz block;
    }
    .hz__stage[data-c-suite-zoom] {
      position: sticky;
      top: 0;
      block-size: 100svh;
      overflow: hidden;
    }
    .hz__frame[data-c-suite-zoom] {
      position: absolute;
      inset: 0;
      min-block-size: 0;
      animation-timeline: --hz;
      animation-range: contain 0% contain 100%;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
    .hz__frame[data-c-suite-zoom] .hz__img[data-c-suite-zoom] {
      animation-timeline: --hz;
      animation-range: contain 0% contain 100%;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
    /* 1 · outside: hold, then push in towards the suite and dissolve */
    .hz__frame--1[data-c-suite-zoom] {
      z-index: 1;
      animation-name: hz-out-1;
    }
    .hz__frame--1[data-c-suite-zoom] .hz__img[data-c-suite-zoom] {
      animation-name: hz-zoom-1;
    }
    .hz__frame--1[data-c-suite-zoom] .hz__copy[data-c-suite-zoom] {
      animation: hz-words linear both;
      animation-timeline: --hz;
      animation-range: contain 0% contain 100%;
    }
    /* The inside frames carry no links: clicks pass through them to the first frame's button (owner: "See the
         suite button is not working" — the invisible layers above it caught the click) */
    .hz__frame--2[data-c-suite-zoom],
    .hz__frame--3[data-c-suite-zoom],
    .hz__frame--4[data-c-suite-zoom] {
      pointer-events: none;
    }
    /* 2 · the bed: arrives from the push-in, then pulls back */
    .hz__frame--2[data-c-suite-zoom] {
      z-index: 2;
      animation-name: hz-io-2;
    }
    .hz__frame--2[data-c-suite-zoom] .hz__img[data-c-suite-zoom] {
      animation-name: hz-zoom-2;
    }
    /* 3 · the lounge */
    .hz__frame--3[data-c-suite-zoom] {
      z-index: 3;
      animation-name: hz-io-3;
    }
    .hz__frame--3[data-c-suite-zoom] .hz__img[data-c-suite-zoom] {
      animation-name: hz-zoom-3;
    }
    /* 4 · the bath, the last frame, stays */
    .hz__frame--4[data-c-suite-zoom] {
      z-index: 4;
      animation-name: hz-in-4;
    }
    .hz__frame--4[data-c-suite-zoom] .hz__img[data-c-suite-zoom] {
      animation-name: hz-zoom-4;
    }
    @keyframes hz-out-1 {
      0%, 18% {
        opacity: 1;
      }
      27%, 100% {
        opacity: 0;
      }
    }
    @keyframes hz-zoom-1 {
      0%, 6% {
        transform: scale(1);
      }
      27% {
        transform: scale(1.9);
      }
      100% {
        transform: scale(1.9);
      }
    }
    @keyframes hz-words {
      0%, 8% {
        opacity: 1;
        translate: 0 0;
      }
      18%, 100% {
        opacity: 0;
        translate: 0 -6vh;
      }
    }
    @keyframes hz-io-2 {
      0%, 18% {
        opacity: 0;
      }
      27%, 46% {
        opacity: 1;
      }
      54%, 100% {
        opacity: 0;
      }
    }
    @keyframes hz-zoom-2 {
      0%, 18% {
        transform: scale(1.35);
      }
      30% {
        transform: scale(1.05);
      }
      46% {
        transform: scale(1);
      }
      54%, 100% {
        transform: scale(0.82);
      }
    }
    @keyframes hz-io-3 {
      0%, 46% {
        opacity: 0;
      }
      54%, 70% {
        opacity: 1;
      }
      78%, 100% {
        opacity: 0;
      }
    }
    @keyframes hz-zoom-3 {
      0%, 46% {
        transform: scale(1.25);
      }
      56% {
        transform: scale(1.04);
      }
      70% {
        transform: scale(1);
      }
      78%, 100% {
        transform: scale(0.82);
      }
    }
    @keyframes hz-in-4 {
      0%, 70% {
        opacity: 0;
      }
      78%, 100% {
        opacity: 1;
      }
    }
    @keyframes hz-zoom-4 {
      0%, 70% {
        transform: scale(1.25);
      }
      82% {
        transform: scale(1.04);
      }
      100% {
        transform: scale(1);
      }
    }
  }
}
/* One suite photo alone (no inside photos to zoom through): a single full screen, no pinned stage; the photo
     still breathes */
.hz[data-c-suite-zoom].hz--single {
  block-size: auto;
}
.hz[data-c-suite-zoom].hz--single .hz__stage[data-c-suite-zoom] {
  position: relative;
  block-size: auto;
}
.hz[data-c-suite-zoom].hz--single .hz__frame[data-c-suite-zoom] {
  position: relative;
  min-block-size: 100svh;
  animation: none;
}
.hz[data-c-suite-zoom].hz--single .hz__frame[data-c-suite-zoom] .hz__img[data-c-suite-zoom],
.hz[data-c-suite-zoom].hz--single .hz__copy[data-c-suite-zoom] {
  animation: none;
}

/* ── honeymoon-showcase ── */
/* Suites page: the honeymoon suite block.
   Used on: /suites/.
   Forum Homini website, */
.hn[data-c-honeymoon-showcase] {
  padding-block: var(--s-8) var(--section-pad, var(--s-10));
  background-color: var(--night);
  color: var(--naledi);
  overflow: clip;
}
.hn__head[data-c-honeymoon-showcase] {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  max-inline-size: calc(var(--content-max) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
  margin-block-end: var(--s-7);
}
/* (6 Nov 2026) letter-spacing was var(--tr-label, 0.12em); 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(--ember); always overridden by css/site.css, so its value is here now */
.hn__eyebrow[data-c-honeymoon-showcase] {
  color: #e6c27a;
  font-size: var(--fs-label, 0.8125rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hn__title[data-c-honeymoon-showcase] {
  font-size: var(--fs-xl);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--naledi);
}
.hn__link[data-c-honeymoon-showcase],
.hn__link[data-c-honeymoon-showcase]:visited {
  color: var(--ember);
  font-weight: var(--wt-label, 600);
  text-decoration: none;
}
.hn__link[data-c-honeymoon-showcase]:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.hn__row[data-c-honeymoon-showcase] {
  display: grid;
  grid-auto-flow: column;
  gap: var(--s-4);
  margin: 0;
  padding: var(--s-5) var(--margin);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hn__row[data-c-honeymoon-showcase]::-webkit-scrollbar {
  display: none;
}
.hn__row--rooms[data-c-honeymoon-showcase] {
  grid-auto-columns: 82vw;
}
.hn__row--art[data-c-honeymoon-showcase] {
  grid-auto-columns: 62vw;
  margin-block-start: var(--s-2);
}
.hn__item[data-c-honeymoon-showcase] {
  position: relative;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: 6px;
  transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 450ms linear;
}
@media (hover: hover) {
  .hn__item[data-c-honeymoon-showcase]:hover {
    z-index: 2;
    transform: scale(1.08);
    box-shadow: 0 30px 70px -25px rgb(0 0 0 / 0.8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hn__item[data-c-honeymoon-showcase] {
    transition: none;
  }
}
.hn__item[data-c-honeymoon-showcase] .photo,
.hn__item[data-c-honeymoon-showcase] img {
  display: block;
  inline-size: 100%;
  max-inline-size: none;
}
@media (min-width: 641px) {
  .hn__row--rooms[data-c-honeymoon-showcase] {
    grid-auto-columns: 60vw;
  }
  .hn__row--art[data-c-honeymoon-showcase] {
    grid-auto-columns: 40vw;
  }
}
@media (min-width: 1025px) {
  .hn__row--rooms[data-c-honeymoon-showcase] {
    grid-auto-columns: 30vw;
  }
  .hn__row--art[data-c-honeymoon-showcase] {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }
  .hn__row--rooms[data-c-honeymoon-showcase] {
    padding-block: var(--s-6);
  }
}
@layer effects {
  @media screen and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .hn__item[data-c-honeymoon-showcase] img {
        animation: hn-zoom linear both;
        animation-timeline: view();
        animation-range: cover;
      }
      @keyframes hn-zoom {
        0% {
          transform: scale(1.2);
        }
        55% {
          transform: scale(1);
        }
        100% {
          transform: scale(1.06);
        }
      }
    }
  }
}
/* Version 5: room at the foot of the footer, so the floating hotel bar never covers its last lines (as on the suites) */
/* Version 5: room at the foot of the footer, so the floating events bar never covers its last lines (as on the suites) */
/* room at the foot of the footer, so the floating suite bar never covers its last lines */
/* Version 5: room at the foot of the footer, so the floating upgrades bar never covers its last lines (as on the suites) */
.site-footer {
  padding-block-end: calc(var(--s-6) + 88px) !important;
}
/* The journey opens the page: it slides up under the floating header, like the home's first photo */
#honeymoon {
  margin-block-start: calc(-1 * var(--header-h));
}
/* owner (11 Oct 2026): "I cant see the grey arrow on the landing page of Honeymoon suite. Should we make the arrow
     the blue of the honeymoon suite?": the arrow in the suite's blue, a lighter tint so it shows on the photo */
.hz__arrowhead {
  color: #1f4f99 !important;
  text-shadow: 0 0 10px rgb(255 255 255 / 0.55), 0 0 22px rgb(255 255 255 / 0.3);
}

/* ── suites-page ── */
/* Suites page.
   Used on: /suites/.
   Forum Homini website, */
.sx[data-c-suites-page] {
  display: grid;
  justify-items: center;
  padding: var(--s-8) var(--margin) var(--section-pad, var(--s-10));
  background-color: var(--night);
}