/* ad-hoc, not part of product: Bajala homepage redesign, variant 1 (reference: Kube Saint-Tropez).
   Page-local tokens only — this file is an exploration outside the project design system. */

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  /* colour */
  --c-bg: #fdf9f4;
  --c-bg-2: #f3f0e8;
  --c-ink: #000;
  --c-text-2: #484847;
  --c-text-3: #7c7c7c;
  --c-line: #c6c6c6;
  --c-line-soft: #e1dcd9;
  --c-accent: #3c465a;
  --c-on-accent: #fff;        /* text and icons on the accent fill */
  --c-white: #fff;
  --c-on-dark-2: rgb(255 255 255 / .85);
  --c-on-dark-3: rgb(255 255 255 / .72);
  --c-disc: #1c1c1c;          /* media placeholder behind dark photos only */
  --c-media: #d9d4ce;
  --c-backdrop: rgb(0 0 0 / .5);
  /* ref u-overlay: flat .16 on hero/band, gradients to .3 (room cards) and .2 (4-up).
     Tiles keep the upper half of the photo clean and only ramp under the copy; the ramp ends
     deeper than the ref because our room and bathroom photos are white where the text sits
     (measured: white 14px copy needs ~.5 there to stay readable). */
  --scrim-bottom: linear-gradient(to bottom, rgb(0 0 0 / 0) 42%, rgb(0 0 0 / .36) 70%, rgb(0 0 0 / .5) 86%, rgb(0 0 0 / .55) 100%);
  --scrim-hero: linear-gradient(to bottom, rgb(0 0 0 / .3) 0%, rgb(0 0 0 / 0) 22%, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / .45) 100%);
  --scrim-hero-text: radial-gradient(ellipse 42% 30% at 50% 80%, rgb(0 0 0 / .28), rgb(0 0 0 / 0));
  --scrim-flat: rgb(0 0 0 / .18);
  --scrim-text: radial-gradient(ellipse 45% 40% at 50% 50%, rgb(0 0 0 / .35), rgb(0 0 0 / 0));

  /* type */
  --font-display: "Bellefair", "Times New Roman", serif;
  --font-sans: "Inter", Arial, sans-serif;
  --fw-thin: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-display: 1.12;
  --lh-body: 1.5;
  --lh-tight: 1.2;
  --ls-body: -.02em;
  --ls-caps: .08em;

  /* fluid scale: viewport 20rem → 140rem (320 → 2240 px), like the reference */
  --fluid: calc((100vw - 20rem) / 120);
  --fs-hero: clamp(2.5rem, calc(2.5rem + 1 * var(--fluid)), 3.5rem);
  --fs-h1: clamp(2.25rem, calc(2.25rem + .75 * var(--fluid)), 3rem);
  --fs-h2: clamp(2rem, calc(2rem + .5 * var(--fluid)), 2.5rem);
  --fs-h3: clamp(1.75rem, calc(1.75rem + .25 * var(--fluid)), 2rem);
  --fs-h4: clamp(1.375rem, calc(1.375rem + .125 * var(--fluid)), 1.5rem);
  --fs-body: .875rem;
  --fs-small: .75rem;

  /* layout */
  --margin: clamp(1rem, calc(1rem + 2 * var(--fluid)), 3rem);
  --gutter: 1rem;
  --seam: .125rem;
  --text-measure: 32.5rem;

  /* spacing */
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: clamp(1.375rem, calc(1.375rem + .125 * var(--fluid)), 1.5rem);
  --space-5: clamp(1.75rem, calc(1.75rem + .25 * var(--fluid)), 2rem);
  --space-6: clamp(2.125rem, calc(2.125rem + .875 * var(--fluid)), 3rem);
  --space-7: clamp(2.5rem, calc(2.5rem + 1.5 * var(--fluid)), 4rem);
  --space-8: clamp(3rem, calc(3rem + 2 * var(--fluid)), 5rem);
  --section-small: clamp(3rem, calc(3rem + 1 * var(--fluid)), 4rem);
  --section-main: clamp(4.5rem, calc(4.5rem + 1.5 * var(--fluid)), 6rem);
  --section-large: clamp(6rem, calc(6rem + 2 * var(--fluid)), 8rem);

  /* components */
  --nav-height: 7rem;           /* animated to --nav-height-min by GSAP on first scroll */
  --nav-height-min: 4rem;
  --nav-offset: 7rem;           /* fixed top offset for inner pages (the tall bar, not animated) */
  --logo-w: 8rem;
  --btn-h: 2rem;
  --icon-btn: 2.25rem;
  --dot: 1.25rem;
  --radius-sm: .25rem;
  --radius-round: 50%;
  --hairline: 1px;
  --hairline-thin: .5px;
  --parallax: 4rem;
  --room-ratio: 1.075;
  --amen-ratio: 3.17 / 5.05;
  --stay-ratio: 3.23 / 3.83;

  /* motion */
  --dur-fade: .3s;
  --dur-line: .6s;
  --ease-std: ease;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-nav: .6s;
  --ease-nav: cubic-bezier(.65, 0, .35, 1);  /* CSS twin of GSAP power3.inOut (nav timeline) */
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-height-min);
  scrollbar-gutter: stable;
  background: var(--c-bg);
}
html.is-menu-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--c-ink); color: var(--c-bg); }

:focus { outline: none; }
:focus-visible {
  outline: var(--hairline) solid currentColor;
  outline-offset: .1875rem;
}

.skip {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 200;
  padding: .5rem .75rem;
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: var(--fs-small);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container {
  width: calc(100% - var(--margin) * 2);
  margin-inline: auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.section { padding-top: var(--section-large); }
/* blocks that open with the vertical hairline sit closer to what precedes them (ref: section-small + rule) */
.section--rule { padding-top: var(--section-small); }

/* ==========================================================================
   Type
   ========================================================================== */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: 0;
  text-transform: uppercase;
}
.display .line { display: block; text-wrap: balance; }
.h-section { font-size: var(--fs-h1); }
/* centred titles: one line when both spans fit (ref); otherwise the break falls at the authored
   point between the spans. On phones the spans flow as one balanced sentence instead, which
   avoids stranded fragments such as "or a" when a span itself has to wrap. */
.intro__title { max-width: 18em; text-wrap: balance; }
.intro__title .line { display: inline; }
@media (min-width: 600px) { .intro__title .line { display: inline-block; } }

.eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-ink);
}

.body {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text-2);
  text-wrap: pretty;
}

.caption {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  overflow: visible;
}
.icon path, .icon line, .icon circle { vector-effect: non-scaling-stroke; }

/* ==========================================================================
   Text link + filled button
   ========================================================================== */
.link {
  display: inline-block;
  padding: .25rem 0 .3rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  /* 1px underline drawn as a solid line (single-colour background) so it can wipe */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% var(--hairline);
}
.link:hover { animation: link-wipe var(--dur-line) var(--ease-out); }

/* inline link inside body copy (phone, email) */
.text-link {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: .2em;
}
.text-link:hover { text-decoration-color: transparent; }

@keyframes link-wipe {
  0%     { background-size: 100% var(--hairline); background-position: 100% 100%; }
  48%    { background-size: 0% var(--hairline);   background-position: 100% 100%; }
  52%    { background-size: 0% var(--hairline);   background-position: 0 100%; }
  100%   { background-size: 100% var(--hairline); background-position: 0 100%; }
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--space-3);
  overflow: hidden;
  border: var(--hairline) solid var(--c-accent);
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: var(--ls-body);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s var(--ease-std);
}
.btn__label {
  display: block;
  transition: transform .45s var(--ease-out);
}
/* roll-over copy: generated from data-label, so it is not in innerText and is hidden from AT ("/ ''") */
.btn[data-label]::after {
  content: attr(data-label);
  content: attr(data-label) / "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -.5em;
  text-align: center;
  transform: translateY(var(--btn-h));
  transition: transform .45s var(--ease-out);
}
.btn:hover { opacity: .88; }
.btn:hover .btn__label { transform: translateY(calc(var(--btn-h) * -1)); }
.btn:hover::after { transform: translateY(0); }
.actions { flex-wrap: wrap; }

.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}
.actions--start { justify-content: flex-start; }

/* accent round icon (plus / minus / arrow) */
.dot {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: var(--radius-round);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: .625rem;
}

/* ==========================================================================
   Framed media + parallax
   ========================================================================== */
.media {
  position: relative;
  overflow: hidden;
  background: var(--c-media);
}
.media--3x2 { aspect-ratio: 3 / 2; }
.media--5x4 { aspect-ratio: 5 / 4; }
.media--5x6 { aspect-ratio: 5 / 6; }

/* the element that moves: taller than its frame so -4rem of travel never shows an edge */
.media__el {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + var(--parallax));
  will-change: transform;
}
img.media__el,
.media__el > img {
  object-fit: cover;
}
.media__el > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-height);
  color: var(--c-white);
  transition: color var(--dur-nav) var(--ease-nav);
}
.nav.is-light,
.is-menu-open .nav { color: var(--c-ink); }

.nav__bg {
  position: absolute;
  inset: 0;
  background: var(--c-bg);
  border-bottom: var(--hairline) solid var(--c-line);
  opacity: 0;
}

.nav__layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  width: calc(100% - var(--margin) * 2);
  height: 100%;
  margin-inline: auto;
}

.nav__place {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.nav__place .icon { font-size: .9375rem; flex: none; }
.nav__place span { white-space: nowrap; }

.nav__logo {
  grid-column: 2;
  position: relative;
  display: block;
  width: var(--logo-w);
  aspect-ratio: 2 / 1;
  transform-origin: 50% 50%;
}
.nav__logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--dur-nav) var(--ease-nav);
}
.nav__logo-img--ink { opacity: 0; }
.nav.is-light .nav__logo-img--white,
.is-menu-open .nav__logo-img--white { opacity: 0; }
.nav.is-light .nav__logo-img--ink,
.is-menu-open .nav__logo-img--ink { opacity: 1; }

.nav__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav__menu-btn {
  display: grid;
  place-items: center;
  width: var(--icon-btn);
  height: var(--icon-btn);
  padding: 0;
  border: var(--hairline) solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: var(--radius-round);
  background: color-mix(in srgb, currentColor 20%, transparent);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  color: inherit;
  cursor: pointer;
  font-size: 1.125rem;
  transition: background-color var(--dur-nav) var(--ease-nav), border-color var(--dur-nav) var(--ease-nav), color var(--dur-nav) var(--ease-nav);
}
.nav.is-light .nav__menu-btn,
.is-menu-open .nav__menu-btn {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.icon--burger line {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform .3s var(--ease-out);
}
.is-menu-open .burger-1 { transform: rotate(45deg) translateY(2.5px); }
.is-menu-open .burger-2 { transform: rotate(-45deg) translateY(-2.5px); }

/* ==========================================================================
   Menu overlay
   ========================================================================== */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}
.menu.is-open { display: block; }
.menu__backdrop {
  position: absolute;
  inset: 0;
  background: var(--c-backdrop);
  opacity: 0;
}
.menu.is-open .menu__backdrop { opacity: 1; }

.menu__panel {
  position: absolute;
  inset: 0 0 auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100svh;
  padding-top: var(--nav-height);
  background: var(--c-bg);
  color: var(--c-ink);
}
.menu__nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--margin) var(--margin);
  overflow-y: auto;
}
.menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) 0 var(--space-3);
  border-bottom: var(--hairline-thin) solid var(--c-line);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
}
.menu__icon {
  display: grid;
  place-items: center;
  width: .75em;
  height: .75em;
  margin-bottom: .12em;
  border-radius: var(--radius-round);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: .75em;
  opacity: 0;
  transition: opacity var(--dur-fade) var(--ease-std);
}
.menu__icon .icon { width: .5em; height: .5em; }
.menu__link:hover .menu__icon,
.menu__link:focus-visible .menu__icon,
.menu__link.is-current .menu__icon { opacity: 1; }
.menu__cta { margin-top: var(--space-6); }

/* contacts, messengers and socials, pinned to the foot of the menu column */
.menu__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4) var(--space-7);
  margin-top: auto;
  padding-top: var(--space-6);
}
.menu__contact-label {
  margin-bottom: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.menu__contact-list a {
  display: inline-block;
  padding: .125rem 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-decoration: none;
  color: var(--c-ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--hairline);
  transition: background-size var(--dur-fade) var(--ease-std);
}
.menu__contact-list a:hover,
.menu__contact-list a:focus-visible { background-size: 100% var(--hairline); }
.menu__icons {
  display: flex;
  gap: var(--space-1);
}
.menu__icon-btn {
  display: grid;
  place-items: center;
  width: var(--icon-btn);
  height: var(--icon-btn);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-round);
  color: var(--c-ink);
  font-size: 1.125rem;
  transition: background-color var(--dur-fade) var(--ease-std), border-color var(--dur-fade) var(--ease-std), color var(--dur-fade) var(--ease-std);
}
/* Tabler Icons (MIT) on a 24 grid: one consistent 1.25px line for every brand */
.icon--brand { stroke-width: 1.25; }
.icon--brand path { vector-effect: non-scaling-stroke; }
.menu__icon-btn:hover,
.menu__icon-btn:focus-visible {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-accent);
}

/* Stay carries the five rooms as a row of small links under its title */
.menu__item--sub .menu__link {
  padding-bottom: var(--space-2);
  border-bottom: 0;
}
.menu__sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--hairline-thin) solid var(--c-line);
}
.menu__sublink {
  display: inline-block;
  padding: .25rem 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-text-3);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--hairline);
  transition: background-size var(--dur-fade) var(--ease-std), color var(--dur-fade) var(--ease-std);
}
.menu__sublink:hover,
.menu__sublink:focus-visible,
.menu__sublink.is-current,
.menu__sublink[aria-current] { color: var(--c-ink); background-size: 100% var(--hairline); }

.menu__visual {
  position: relative;
  margin: 0 var(--seam) var(--seam) 0;
  overflow: hidden;
  background: var(--c-media);
}
.menu__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-fade) var(--ease-std);
}
.menu__img.is-visible { opacity: 1; }

/* ==========================================================================
   01 Hero
   ========================================================================== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 40rem;
  overflow: hidden;
  background: var(--c-disc);
  color: var(--c-white);
}
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 60%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-hero-text), var(--scrim-hero);
}
.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--margin) var(--space-7);
  text-align: center;
}
.hero .eyebrow { color: var(--c-white); margin-bottom: var(--space-2); }
.hero__title {
  margin-bottom: var(--space-3);
  font-size: var(--fs-hero);
}
.hero__body {
  max-width: 28rem;
  margin-bottom: var(--space-5);
  color: var(--c-on-dark-2);
}

/* ==========================================================================
   Centred title block (reference "Un luxe expérientiel")
   ========================================================================== */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.intro__rule {
  display: block;
  width: var(--hairline);
  height: var(--section-large);
  margin-bottom: var(--space-6);
  background: var(--c-line);
}
.intro__title { margin-bottom: var(--space-5); }
.intro__body { max-width: var(--text-measure); text-wrap: balance; }
.intro__body + .intro__body { margin-top: var(--space-3); }
.intro__link,
.intro .actions { margin-top: var(--space-5); }
.intro--plain .intro__title:last-child { margin-bottom: 0; }

/* ==========================================================================
   02 Stay formats (reference "Activités" list)
   ========================================================================== */
/* left: title, the route list right under it, the link last; right: one large portrait that follows
   the hovered route. Both columns start at the top; the photo's size comes from its column width. */
.stay__grid { align-items: start; }
.stay__main {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
}
.stay__title { margin-bottom: 0; }
@media (min-width: 1200px) { .stay__title .line { white-space: nowrap; } }
.routes { padding-top: var(--space-7); }
.stay__link {
  align-self: flex-start;
  margin-top: var(--space-5);
}
.stay__media {
  grid-column: 8 / -1;
  aspect-ratio: var(--stay-ratio);
}
.stay__img {
  opacity: 0;
  transition: opacity var(--dur-fade) var(--ease-std);
}
.stay__img.is-active { opacity: 1; }

/* each row: index | title over description | plus-dot */
.route:first-child .route__link { border-top: var(--hairline-thin) solid var(--c-line); }
.route__link {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) var(--dot);
  align-items: center;
  column-gap: var(--space-3);
  row-gap: .375rem;
  padding: var(--space-4) 0;
  border-bottom: var(--hairline-thin) solid var(--c-line);
  color: inherit;
  text-decoration: none;
}
.route__index {
  grid-row: 1 / span 2;
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--c-text-3);
  transition: color var(--dur-fade) var(--ease-std);
}
.route__title {
  grid-column: 2;
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.route__desc {
  grid-column: 2;
  font-size: var(--fs-body);
  color: var(--c-text-2);
}
.route__link .dot {
  grid-column: 3;
  grid-row: 1 / span 2;
  opacity: 0;
  transition: opacity var(--dur-fade) var(--ease-std);
}
.route__link.is-active .route__index { color: var(--c-ink); }
.route__link.is-active .dot,
.route__link:hover .dot,
.route__link:focus-visible .dot { opacity: 1; }

/* ==========================================================================
   03 About
   ========================================================================== */
/* Anchored pair. One rectangle across the full grid: the aerial is the dominant mass on the left
   (cols 1-7, mirroring the Stay portrait on the right above, so the page zig-zags); the side column
   (cols 9-12) hangs the panel from the aerial's top line and stands the pool photo on its bottom line.
   Col 8 stays empty as the vertical gutter between the two masses.
   The row is as tall as the taller of the two columns: normally the aerial at 5:4, and the space
   between panel and pool flexes. Where the title needs two lines (narrow desktops) the side column
   is the taller one, and the aerial frame grows to meet it, so tops and bottoms always share a line. */
.about__grid {
  margin-top: var(--space-8);
  align-items: stretch;
}
.about__aerial {
  grid-column: 1 / span 7;
  grid-row: 1;
  display: flex;
  flex-direction: column;
}
.about__aerial .media { flex: 1 0 auto; }
.about__side {
  grid-column: 9 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* the least air between the panel and the pool photo; any extra height goes here too */
.about__panel { padding-bottom: var(--space-7); }
/* cap-height trim so the first line of type starts exactly on the aerial's top edge */
.about__panel > .eyebrow:first-child { text-box: trim-start cap alphabetic; }
.about__link { margin-top: var(--space-5); }
.about__panel-title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-h3);
  text-wrap: balance;
}
.rule-list { border-top: var(--hairline-thin) solid var(--c-line); }
.rule-list li {
  padding: var(--space-3) 0;
  border-bottom: var(--hairline-thin) solid var(--c-line);
  color: var(--c-text-2);
}

/* ==========================================================================
   04 Rooms (reference "Trois univers" full-bleed tiles)
   ========================================================================== */
.tiles {
  display: grid;
  gap: var(--seam);
  padding-inline: var(--seam);
}
.tiles--rooms {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-8);
}

.room {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  aspect-ratio: var(--room-ratio);
  padding: var(--space-5) var(--space-6);
  overflow: hidden;
  background: var(--c-disc);
  color: var(--c-white);
  text-align: center;
}
.room__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.room__img--hover {
  opacity: 0;
  transition: opacity var(--dur-fade) var(--ease-std);
}
.room:hover .room__img--hover,
.room:focus-within .room__img--hover { opacity: 1; }
.room__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-bottom);
}
.room .eyebrow { color: var(--c-white); margin-bottom: var(--space-2); }
.room__title {
  max-width: 16em;
  margin-bottom: var(--space-2);
  font-size: var(--fs-h2);
  text-wrap: balance;
}
.room__facts {
  margin-bottom: var(--space-3);
  color: var(--c-on-dark-2);
}
/* whole tile is clickable through the "View room" link */
.room__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ==========================================================================
   05 Little Rotti (full-bleed band)
   ========================================================================== */
.band {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 95vh;
  min-height: 36rem;
  margin-top: var(--section-large);
  padding: var(--section-main) var(--margin);
  overflow: hidden;
  background: var(--c-disc);
  color: var(--c-white);
}
.band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-text), var(--scrim-flat);
}
.band .eyebrow { color: var(--c-white); }
.band .intro__body { color: var(--c-on-dark-2); }
.band .intro__title { margin-bottom: var(--space-5); }

/* ==========================================================================
   06 Private events (reference "Privatiser" split)
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  min-height: calc(100svh - var(--seam));
  margin-top: var(--seam);
  padding-left: var(--margin);
  padding-right: var(--margin);
}
.split__text {
  grid-column: 2 / span 5;
  align-self: center;
  padding: var(--section-large) 0;
}
.split__title { margin-bottom: var(--space-5); }
.split__body { max-width: 26rem; }
.split .actions { margin-top: var(--space-5); }
.split__thumb {
  width: calc((100% - var(--gutter) * 4) / 5 * 2 + var(--gutter));
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: var(--hairline-thin) solid var(--c-line);
}
.split__media {
  position: relative;
  grid-column: 7 / -1;
  margin-right: calc(var(--seam) - var(--margin));
  overflow: hidden;
  background: var(--c-media);
}

/* ==========================================================================
   07 Amenities (reference "Vivre chaque instant")
   ========================================================================== */
.tiles--amenities {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-8);
}
.amen {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: var(--amen-ratio);
  padding: var(--space-3);
  overflow: hidden;
  background: var(--c-disc);
  color: var(--c-white);
}
.amen__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.amen__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-bottom);
}
.amen__key {
  margin-bottom: var(--space-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-on-dark-2);
}
.amen__title {
  font-size: var(--fs-h4);
  line-height: 1.1;
}
.amen__line {
  margin-top: .3rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-on-dark-3);
}

.amenities { padding-bottom: var(--section-small); }
.amenities__more {
  margin-top: var(--space-7);
  text-align: center;
}

/* ==========================================================================
   08 FAQ (reference FAQ, alt band)
   ========================================================================== */
.faq {
  margin-top: var(--seam);
  padding-top: var(--section-main);
  background: var(--c-bg-2);
}
.faq .intro { margin-bottom: var(--space-6); }

.accordion { border-top: var(--hairline-thin) solid var(--c-line); }
.acc__item {
  padding-bottom: var(--space-5);
  border-bottom: var(--hairline-thin) solid var(--c-line);
}
.acc__heading { font: inherit; }
.acc__btn {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) var(--dot);
  align-items: center;
  column-gap: var(--space-3);
  width: 100%;
  padding: var(--space-5) 0 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-ink);
}
.acc__num {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  color: var(--c-text-3);
}
.acc__plus-v {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform var(--dur-line) var(--ease-std);
}
.acc__item.is-open .acc__plus-v { transform: rotate(90deg); }

.acc__panel { overflow: hidden; }
.acc__pad {
  max-width: calc(70ch + 2.75rem + var(--space-3));
  padding: var(--space-3) 0 var(--space-1) calc(2.75rem + var(--space-3));
  color: var(--c-text-2);
}
.is-verify { color: var(--c-text-3); }   /* unconfirmed facts, shown muted until Bajala confirms */

/* no-JS / reduced-motion fallback */
.acc__panel[hidden] { display: none; }

/* ==========================================================================
   09 Location
   ========================================================================== */
.location {
  padding: var(--section-main) 0 var(--seam);
  background: var(--c-bg-2);
}
.location__place {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: calc(var(--space-5) * -.5) 0 var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.location__place .icon { font-size: .9375rem; }
/* full width with the tiles' seam (same frame as the Location page map) */
.location__map {
  height: clamp(24rem, 62vh, 40rem);
  margin: var(--space-8) var(--seam) 0;
}
.location__map .location__map-frame {
  position: absolute;
  inset: 0;
}
/* muted so the embed sits in the off-white palette */
.location__map-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.85) sepia(.12);
}
/* scroll shield over map embeds (js/main.js): the page keeps scrolling over the map
   until the guest clicks it; the hint fades in on hover */
.map-shield {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 var(--space-4);
  border: 0;
  background: none;
  cursor: pointer;
}
.is-map-locked .map-shield { display: flex; }
.map-shield__hint {
  padding: .5rem .875rem;
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--dur-fade) var(--ease-std);
}
.map-shield:hover .map-shield__hint,
.map-shield:focus-visible .map-shield__hint { opacity: 1; }
@media (hover: none) { .map-shield__hint { opacity: 1; } }

/* ==========================================================================
   10 Footer
   ========================================================================== */
.footer {
  margin-top: var(--seam);
  background: var(--c-bg-2);
}
.footer__main {
  align-items: center;
  padding: var(--section-main) 0;
}
.footer__groups {
  grid-column: 1 / span 5;
  display: flex;
  gap: var(--space-7);
}
.footer__heading {
  margin-bottom: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-ink);
}
.footer__links a {
  display: inline-block;
  padding: .25rem 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-text-3);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--hairline);
  transition: background-size var(--dur-fade) var(--ease-std), color var(--dur-fade) var(--ease-std);
}
.footer__links a:hover { background-size: 100% var(--hairline); color: var(--c-ink); }

.footer__brand {
  grid-column: 6 / span 2;
  justify-self: center;
}
.footer__logo {
  display: block;
  width: 5.5rem;
  opacity: .55;
  transition: opacity var(--dur-fade) var(--ease-std);
}
.footer__logo:hover { opacity: .8; }
.footer__logo img { width: 100%; height: auto; }

.footer__note {
  grid-column: 9 / span 4;
  justify-self: end;
  max-width: 19rem;
  text-align: right;
}
.footer__note .eyebrow { color: var(--c-text-3); }

.footer__bottom {
  padding: var(--space-6) 0;
  border-top: var(--hairline-thin) solid var(--c-line);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-6);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--c-text-3);
}
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: var(--c-ink); }

/* ==========================================================================
   Inner pages. .crumbs, .room-hero, .facts, .split--reverse and .details__tag are
   shared by every inner page; the gallery, specs and decision panel belong to the
   room page (mixed-dorm.html, Figma frame "Комната"). Page-only styles live in css/<page>.css.
   ========================================================================== */
/* breadcrumb: Home / Stay / current page */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.crumbs li + li::before {
  content: "/";
  margin-right: .5rem;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--c-ink); }
.crumbs [aria-current] { color: var(--c-ink); }

/* 01 hero: copy on the left half, the photo bleeds to the right edge under the bar */
.room-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  min-height: 100svh;
  /* same column maths as .split, so a hero photo and a split photo below it share an edge */
  padding: var(--nav-offset) var(--margin) 0;
}
.room-hero__text {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0 var(--section-main);
}
.room-hero__copy {
  max-width: 34rem;
  margin-block: auto;
  padding-top: var(--space-7);
}
.room-hero__title { margin-bottom: var(--space-5); }
.room-hero__body {
  max-width: 26rem;
  margin-bottom: var(--space-5);
}
.room-hero__media {
  position: relative;
  grid-column: 7 / -1;
  margin-right: calc(var(--seam) - var(--margin));
  overflow: hidden;
  background: var(--c-media);
}

/* 02 facts: one ruled row of six numbered facts */
.facts {
  border-block: var(--hairline-thin) solid var(--c-line);
}
.facts__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.facts__list li {
  padding: var(--space-4) 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}
.facts__num {
  margin-right: .75rem;
  font-weight: var(--fw-light);
  color: var(--c-text-3);
}

/* 03 gallery: the note panel then the photos on one row that scrolls sideways,
   starting on the left margin and running off the right edge (as in Figma) */
.gallery { --gallery-h: clamp(20rem, 32vw, 32rem); }
.gallery__frame { margin-top: var(--space-8); }
.gallery__track {
  display: flex;
  gap: var(--gutter);
  padding: 0 var(--margin);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margin);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track > li {
  flex: none;
  scroll-snap-align: start;
}
.gallery__item .media { height: var(--gallery-h); }
.gallery__item--portrait { width: calc(var(--gallery-h) * 2 / 3); }
.gallery__item--wide { width: calc(var(--gallery-h) * 3 / 2); }
.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__note {
  display: flex;
  flex-direction: column;
  width: max(18rem, calc(var(--gallery-h) * .75));
  height: var(--gallery-h);
  padding: var(--space-5);
  background: var(--c-bg-2);
}
.gallery__note-title {
  margin-bottom: var(--space-3);
  font-size: var(--fs-h3);
}
.gallery__note-btn {
  align-self: flex-start;
  margin-top: auto;
}
.gallery__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-top: var(--space-4);
}
.gallery__btn {
  display: grid;
  place-items: center;
  width: var(--icon-btn);
  height: var(--icon-btn);
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--c-accent);
  color: var(--c-on-accent);
  cursor: pointer;
  font-size: .875rem;
  transition: opacity var(--dur-fade) var(--ease-std);
}
.gallery__btn:disabled { opacity: .35; cursor: default; }

/* 04 room details: the events split, mirrored (photo left, copy right) */
.details { margin-top: var(--section-large); }
.split--reverse .split__media {
  grid-column: 1 / span 6;
  grid-row: 1;
  margin-right: 0;
  margin-left: calc(var(--seam) - var(--margin));
}
.split--reverse .split__text {
  grid-column: 8 / span 4;
  grid-row: 1;
}
.details__tag {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  background: rgb(0 0 0 / .4);
  color: var(--c-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--space-6);
  border-top: var(--hairline-thin) solid var(--c-line);
}
.spec {
  padding: var(--space-4) 0;
  border-bottom: var(--hairline-thin) solid var(--c-line);
}
.spec__key {
  margin-bottom: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.spec__title {
  margin-bottom: .3rem;
  font-size: var(--fs-h4);
  line-height: 1.1;
}
.spec__line { color: var(--c-text-2); }
.details__link { margin-top: var(--space-5); }

/* good to know: check-in / check-out as two statement times on the alt band */
.know {
  margin-top: var(--section-large);
  padding: var(--section-main) 0;
  background: var(--c-bg-2);
  text-align: center;
}
.know__times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 40rem;
  margin: var(--space-6) auto 0;
  border-block: var(--hairline-thin) solid var(--c-line);
}
.know__time { padding: var(--space-5) var(--space-3); }
.know__time + .know__time { border-left: var(--hairline-thin) solid var(--c-line); }
.know__time dt { margin-bottom: var(--space-2); }
.know__time dd {
  margin: 0;
  font-size: var(--fs-h2);
}
/* the times are kept on one line (no-break spaces), so phones get the smaller display size */
@media (max-width: 599px) { .know__time dd { font-size: var(--fs-h4); } }
.know__note {
  max-width: var(--text-measure);
  margin: var(--space-5) auto 0;
  text-wrap: balance;
}
.know .actions { margin-top: var(--space-4); }
.know + .related { padding-top: var(--section-main); }

/* 05 related rooms: homepage room tiles; the fourth cell is the decision panel */
.decide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  aspect-ratio: var(--room-ratio);
  padding: var(--space-5) var(--space-6);
  background: var(--c-bg-2);
  text-align: center;
}
.decide__title {
  margin-bottom: var(--space-3);
  font-size: var(--fs-h2);
}
.decide__body {
  max-width: 22rem;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.decide__note { margin-top: var(--space-4); }

/* ==========================================================================
   Responsive: tablet ≤ 991px, phone ≤ 767px, small phone ≤ 599px
   ========================================================================== */
@media (max-width: 991px) {
  /* room page: hero stacks copy over photo; facts in two rows; details photo then copy */
  .room-hero {
    display: block;
    min-height: 0;
    padding: var(--nav-offset) 0 0;
  }
  .room-hero__text { padding: var(--space-3) var(--margin) var(--section-main); }
  .room-hero__media {
    margin: 0 var(--seam);
    aspect-ratio: 4 / 5;
  }
  .facts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split--reverse .split__text { padding: var(--section-main) var(--margin) 0; }
  .split--reverse .split__media { margin: 0 var(--seam); }
  .decide { aspect-ratio: 4 / 5; }

  /* 02 stay: title, list and link, then the portrait below */
  .stay__main { grid-column: 1 / -1; }
  .stay__title .line { white-space: normal; }
  .routes { padding-top: var(--space-6); }
  .stay__media {
    grid-column: 1 / span 6;
    margin-top: var(--space-7);
  }

  /* 03 about: the aerial across the grid, then panel (left) and pool photo (right) on one top line */
  .about__aerial { grid-column: 1 / -1; }
  .about__aerial .media { flex: none; aspect-ratio: 3 / 2; }
  .about__side {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
    margin-top: var(--space-7);
  }
  .about__panel { grid-column: 1 / span 6; padding-bottom: 0; }
  .about__pool { grid-column: 8 / -1; }

  /* 04 rooms: taller tiles, one type step down, so long names wrap in two lines under the scrim */
  .room { aspect-ratio: 4 / 5; }
  .room__title { font-size: var(--fs-h3); }

  /* 07 amenities: 2-up */
  .tiles--amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 06 events: text, then the photo full width */
  .split {
    display: block;
    min-height: 0;
    padding: 0;
  }
  .split__text { padding: var(--section-large) var(--margin) var(--section-main); }
  .split__body { max-width: var(--text-measure); }
  .split__thumb { width: min(40%, 16rem); }
  .split__media {
    margin: 0 var(--seam);
    aspect-ratio: 4 / 3;
  }

  /* 09 location */
  .location__map { height: 26rem; }

  /* 10 footer: stacked and centred */
  .footer__main { row-gap: var(--space-7); }
  .footer__groups {
    grid-column: 1 / -1;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: var(--space-5);
  }
  .footer__brand { grid-column: 1 / -1; }
  .footer__note {
    grid-column: 1 / -1;
    justify-self: center;
    text-align: center;
  }
}

@media (max-width: 767px) {
  :root { --logo-w: 6rem; }

  /* nav: the place label becomes a centred strip above the logo while the bar is tall,
     and fades out with the rest of the transparent state on first scroll */
  .nav__place {
    position: absolute;
    top: .875rem;
    left: 0;
    right: 0;
    justify-self: center;
    justify-content: center;
    font-size: .6875rem;
    transition: opacity var(--dur-nav) var(--ease-nav), visibility var(--dur-nav) var(--ease-nav);
  }
  .nav.is-light .nav__place { opacity: 0; visibility: hidden; }

  /* menu: list only */
  .menu__panel { grid-template-columns: minmax(0, 1fr); }
  .menu__visual { display: none; }

  /* 02 stay */
  .route__link { grid-template-columns: 2.25rem minmax(0, 1fr) var(--dot); }
  .stay__media { grid-column: 1 / span 9; }

  /* 03 about: stacked: aerial, panel, pool photo */
  .about__panel { grid-column: 1 / -1; }
  .about__pool { grid-column: 1 / -1; margin-top: var(--space-7); }

  /* 04 rooms: one per row */
  .tiles--rooms { grid-template-columns: minmax(0, 1fr); }
  .room { padding: var(--space-5) var(--space-4); }

  .split__media { aspect-ratio: 4 / 5; }
  .split__thumb { width: 50%; }

  /* room page */
  .gallery { --gallery-h: 22rem; }
  .gallery__note { width: 17rem; }
}

@media (max-width: 599px) {
  /* booking stays one tap away in the menu and the hero */
  .nav__actions .link { display: none; }

  /* room page */
  .facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__list li { padding: var(--space-3) 0; }
  .gallery { --gallery-h: 18rem; }
  .gallery__note { width: 15rem; padding: var(--space-4); }
  .specs { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .media__el { will-change: auto; }
}