/* ==========================================================================
   Marenza — one-page template for a luxury hotel.

   One stylesheet, no build step, no framework. Read it top to bottom:

     1.  Design tokens        every colour, size and spacing lives here
     2.  Reset and base       the few global rules
     3.  Layout helpers       container, section rhythm, ornaments
     4.  Buttons and links
     5.  Header and navigation
     6.  Hero
     7.  About
     8.  Rooms carousel
     9.  Details grid
     10. Gallery carousel and wordmark
     11. Accommodations grid
     12. Crafted (figures)
     13. Signature experiences (accordion)
     14. Testimonial
     15. Discover
     16. Journal
     17. Footer
     18. Scroll reveal
     19. Breakpoints
     20. Reduced motion

   Two rules worth knowing before you edit:

   - Type sizes are declared once in part 1 and re-declared at each breakpoint
     in part 19. No heading carries its own media query. Change --h2 and every
     section title follows.
   - Nothing here hides content unless JavaScript is running. The hidden state
     of a reveal is written `.js [data-reveal]`, and only enhance.js adds that
     `js` class. Strip the <script> tags and the whole page is still readable.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* --- Colours ---------------------------------------------------------- */
  --cream: #f8f2ed;      /* page background */
  --sand: #faeddd;       /* warmer background, used by one section */
  --white: #ffffff;

  --wine: #7b2e2e;       /* the signature colour: titles and full-bleed sections */
  --wine-deep: #5e2224;  /* hover and shadows */

  --gold: #e8b96b;       /* buttons */
  --gold-deep: #d3a150;  /* button hover */
  --gold-soft: #f5dca8;  /* gold that has to stay readable on a photo */

  --ink: #211c1a;        /* strongest text */
  --body: #5c534e;       /* running text */
  --line: #e3cfc4;       /* the hairline circles and rules behind the content */
  --line-light: rgba(245, 236, 228, 0.28); /* same, on the wine sections */

  /* Contrast ratios, measured, not guessed:
       --wine on --cream ......... 8.4:1
       --body on --cream ......... 6.8:1
       --cream on --wine ......... 8.4:1
       --ink on --gold .......... 11.5:1
     Change one and check the other three — see the README. */

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --h1: 88px;
  --h1-ls: -2px;
  --h2: 68px;
  --h2-ls: -1.5px;
  --h3: 36px;
  --h3-ls: -1px;
  --h4: 24px;
  --h4-ls: -0.5px;
  --num: 78px;

  --lead: 18px;
  --base: 16px;
  --small: 14px;

  --lh-tight: 1.15;
  --lh-title: 1.2;
  --lh-heading: 1.4;
  --lh-body: 1.6;

  /* --- Space ------------------------------------------------------------ */
  --container: 1320px;
  --gutter: 30px;
  --section: 120px;   /* vertical rhythm between sections */
  --stack: 80px;      /* title block to content */
  --gap: 60px;        /* between two columns */

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* the outQuart of the original */
  --reveal-time: 900ms;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

/* summary does not inherit box-sizing in Chromium: it has to be told. */
summary {
  box-sizing: border-box;
}

html {
  /* clip, not hidden: hidden would turn the root into a scroll container and
     break every position: sticky further down the page. */
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--wine);
  text-transform: uppercase;
}

h1 {
  font-size: var(--h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--h1-ls);
}

h2 {
  font-size: var(--h2);
  line-height: var(--lh-title);
  letter-spacing: var(--h2-ls);
}

h3 {
  font-size: var(--h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--h3-ls);
}

h4 {
  font-size: var(--h4);
  line-height: var(--lh-heading);
  letter-spacing: var(--h4-ls);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One focus ring for the whole template. */
:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
  border-radius: 2px;
}

.on-dark :focus-visible,
.hero :focus-visible,
.accommodations :focus-visible,
.footer :focus-visible {
  outline-color: var(--gold-soft);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 500;
  transition: top 160ms var(--ease-out);
}

.skip-link:focus {
  top: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section);
}

.section--bottom {
  padding-block: 0 var(--section);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack);
}

/* --- The section heading block ------------------------------------------ */

.section-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  max-width: 1000px;
  margin-inline: auto;
}

.section-head--left {
  align-items: flex-start;
  text-align: left;
}

.section-lede {
  max-width: 515px;
  position: relative;
}

.eyebrow {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-size: var(--base);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.eyebrow svg {
  flex: none;
  color: var(--gold-deep);
}

/* --- The hairline ornament that sits behind every section ---------------- */

/* A vertical rule down the middle and three thin circles. Purely decorative,
   so it is aria-hidden in the markup and never intercepts a click. */
.ornament {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: clip;
}

/* The decoration is positioned, the content is not — so the hairlines were
   painted over the photographs. One stacking rung for the content fixes it. */
.section > .container,
.gallery > .container {
  position: relative;
  z-index: 1;
}

.ornament__inner {
  position: relative;
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ornament__rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
}

.ornament__circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--line);
}

/* Three sizes, three anchors: the pattern of the original. */
.ornament__circle--mid {
  width: 300px;
  height: 300px;
  top: 90px;
  left: 50%;
  translate: -50% 0;
}

.ornament__circle--mid.is-large {
  width: 715px;
  height: 715px;
}

.ornament__circle--left {
  width: 300px;
  height: 300px;
  left: -150px;
  top: 30%;
}

.ornament__circle--right {
  width: 300px;
  height: 300px;
  right: -150px;
  top: 55%;
}

/* The cross inside the small circles. */
.ornament__circle--left::before,
.ornament__circle--right::before,
.ornament__circle--mid::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.ornament__circle--left::after,
.ornament__circle--right::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

/* On the wine sections the same hairlines have to lighten up. */
.on-dark .ornament__rule,
.on-dark .ornament__circle,
.on-dark .ornament__circle::before,
.on-dark .ornament__circle::after {
  background: var(--line-light);
  border-color: var(--line-light);
}

/* --- The engraved frame around the two "framed" sections ----------------- */

.frame {
  display: block;
  width: 100%;
  height: auto;
  color: var(--gold-deep);
}

/* The bottom half of the frame is the top one, flipped. */
.frame--flip {
  transform: scaleY(-1);
}

.on-dark .frame {
  color: var(--gold-soft);
}

/* The <symbol> sheet takes no space and shows nothing. */
.icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ==========================================================================
   4. Buttons and links
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 30px;
  background: var(--gold);
  color: var(--ink);
  font-size: var(--base);
  line-height: var(--lh-body);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background 260ms var(--ease-out);
}

.button:hover {
  background: var(--gold-deep);
}

.button svg {
  flex: none;
  transition: transform 300ms var(--ease-out);
}

/* The arrow rotates a quarter turn on hover — 300 ms in the original. */
.button:hover svg {
  transform: rotate(45deg);
}

.button--ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--line-light);
}

.button--ghost:hover {
  background: rgba(245, 236, 228, 0.1);
}

/* ==========================================================================
   5. Header and navigation
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  padding-block: 16px;
  transition: background 300ms var(--ease-out), border-color 300ms var(--ease-out);
  border-bottom: 1px solid transparent;
}

/* main.js adds this class past 2% of the page — the PAGE_SCROLL interaction
   of the original, rewritten as a single class swap. */
.header.is-stuck {
  background: rgba(33, 28, 26, 0.92);
  border-bottom-color: rgba(245, 236, 228, 0.14);
  backdrop-filter: blur(8px);
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  /* 16 + 66 + 16 = 98,6 px : la hauteur de barre de l'original. */
  min-height: 66px;
}

.logo {
  display: flex;
  justify-self: start;
  align-items: center;
  gap: 10px;
  color: var(--gold-soft);
  flex: none;
}

.logo svg {
  flex: none;
}

.logo__word {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: none;
}

.nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}

.nav__menu-cta {
  display: none;
}

.nav__link {
  position: relative;
  display: block;
  color: var(--cream);
  padding-block: 4px;
  /* The second copy of the label lives outside the box until it is called in:
     without this clip it simply shows under the link. */
  overflow: clip;
  line-height: var(--lh-body);
}

/* The link lifts by 30px behind that clip — 320 ms in the original. */
.nav__link span {
  display: block;
  transition: transform 320ms var(--ease-out);
}

.nav__link::after {
  content: attr(data-label);
  position: absolute;
  inset: 4px 0 auto 0;
  transform: translateY(30px);
  transition: transform 320ms var(--ease-out);
}

/* The clip would eat an outline drawn outside the box. */
.nav__link:focus-visible {
  outline-offset: -2px;
}

.nav__link:hover span,
.nav__link:focus-visible span {
  transform: translateY(-30px);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  transform: translateY(0);
}

.nav__mask {
  overflow: clip;
  display: block;
}

/* --- The "Pages" disclosure --------------------------------------------- */

.nav__pages {
  position: relative;
}

.nav__pages > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cream);
  cursor: pointer;
  list-style: none;
  padding-block: 4px;
}

.nav__pages > summary::-webkit-details-marker {
  display: none;
}

.nav__pages > summary svg {
  transition: transform 260ms var(--ease-out);
}

.nav__pages[open] > summary svg {
  transform: rotate(180deg);
}

.nav__pages-list {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 210px;
  padding: 10px;
  background: var(--cream);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 5;
}

.nav__pages-list a {
  padding: 8px 12px;
  color: var(--ink);
  transition: background 200ms var(--ease-out);
}

.nav__pages-list a:hover {
  background: var(--sand);
}

.nav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.nav__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cream);
  font-size: var(--small);
}

.nav__phone svg {
  flex: none;
  color: var(--gold-soft);
}

/* --- The mobile menu ----------------------------------------------------- */

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--cream);
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  margin: 5px auto;
  background: currentColor;
  transition: transform 300ms var(--ease-out), opacity 200ms var(--ease-out);
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
  position: relative;
  /* Full screen on arrival, whatever the screen: the original measures
     900 px at 900, 1080 at 1080, 1300 at 1300. svh rather than vh so the
     address bar of a phone does not make the layout jump; vh stays as the
     fallback for browsers that do not know svh. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  /* Room for the fixed header: on a phone the stacked content is taller than
     the hero, and without this it slides under the bar. The side padding is
     carried by the inner box, so its content lines up with every other
     section — 60 px in from the edge at 1440, not 30. */
  padding: 110px 0 32px;
  overflow: clip;
  color: var(--cream);
}

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

.hero__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Lands at 1.06 and settles to 1 over two seconds. */
  animation: hero-settle 2000ms cubic-bezier(0.42, 0, 0.2, 1) both;
}

@keyframes hero-settle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Two gradients instead of the two PNG shadows of the original: same job,
   4 kB lighter, and they scale to any viewport. */
.hero__background::before,
.hero__background::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.hero__background::before {
  top: 0;
  height: 292px;
  background: linear-gradient(to bottom, rgba(20, 13, 10, 0.85), rgba(20, 13, 10, 0));
}

.hero__background::after {
  bottom: 0;
  height: 691px;
  background: linear-gradient(to top, rgba(20, 13, 10, 0.92) 8%, rgba(20, 13, 10, 0.55) 42%, rgba(20, 13, 10, 0));
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero__content {
  display: flex;
  gap: var(--gap);
  align-items: flex-end;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

.hero__eyebrow {
  color: var(--cream);
}

.hero h1 {
  color: var(--sand);
}

.hero__lede {
  max-width: 550px;
  font-size: var(--lead);
  color: var(--cream);
}

/* --- The floating room card --------------------------------------------- */

.hero__card {
  flex: none;
  width: 430px;
  padding: 24px;
  /* 24 + 202 + 16 + 166 + 24 = 432 px, la hauteur de l'original. */
  background: linear-gradient(160deg, rgba(60, 38, 28, 0.72), rgba(24, 15, 12, 0.86));
  border: 1px solid rgba(245, 220, 168, 0.22);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 400ms var(--ease-out);
}

.hero__card:hover {
  transform: translateY(-6px);
}

.hero__card img {
  width: 100%;
  aspect-ratio: 382 / 202;
  object-fit: cover;
  border-radius: 10px;
}

.hero__card-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero__card-head h2 {
  color: var(--sand);
  font-size: var(--h3);
  letter-spacing: var(--h3-ls);
  line-height: 1.4;
}

.hero__card p {
  color: rgba(248, 242, 237, 0.78);
}

.hero__card-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero__card-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hero__card-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-display);
  font-size: var(--h4);
  line-height: var(--lh-heading);
  color: var(--sand);
  text-transform: uppercase;
}

.hero__card-price small {
  font-family: var(--font-body);
  font-size: var(--small);
  letter-spacing: 0.08em;
  color: rgba(248, 242, 237, 0.7);
}

.hero__card-review {
  font-size: var(--small);
  color: rgba(248, 242, 237, 0.7);
  white-space: nowrap;
}

.stars {
  display: flex;
  gap: 8px;
  color: var(--gold);
}

.stars svg {
  flex: none;
}

/* The engraved rule that closes the hero. Height follows width — the width
   and height attributes only give it its ratio. */
.hero__rule {
  width: 100%;
  height: auto;
  color: var(--gold-deep);
  opacity: 0.9;
}

/* ==========================================================================
   7. About
   ========================================================================== */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 660fr) minmax(0, 594fr);
  gap: var(--gap);
  align-items: start;
}

.about__figure img {
  width: 100%;
  aspect-ratio: 0.855;
  object-fit: cover;
}

.about__right {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.about__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* the button keeps its own width */
  gap: 40px;
  max-width: 506px;
}

.about__copy p:not(.about__title) {
  font-size: var(--lead);
}

.about__title {
  font-family: var(--font-display);
  font-size: var(--h4);
  letter-spacing: var(--h4-ls);
  line-height: var(--lh-heading);
  text-transform: uppercase;
  color: var(--wine);
}

.about__inline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about__right img {
  width: 100%;
  aspect-ratio: 1.688;
  object-fit: cover;
}

/* ==========================================================================
   8. Rooms carousel
   ========================================================================== */

.rooms__viewport {
  position: relative;
}

/* A plain scroll container: it drags, it swipes, it takes the keyboard, and it
   needs no JavaScript at all. main.js only adds the scale of the active card. */
.rooms__track {
  cursor: grab;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(50% - 528px);
  padding-block: 4px 24px;
  /* the first and last card can still reach the middle of the viewport */
  padding-inline: calc(50% - 528px);
  scrollbar-width: none;
}

.rooms__track::-webkit-scrollbar {
  display: none;
}

.room {
  position: relative;
  flex: none;
  width: 1056px;
  max-width: 84vw;
  scroll-snap-align: center;
  overflow: clip;
  transform-origin: bottom center;
  transition: transform 900ms var(--ease-out), opacity 900ms var(--ease-out);
}

/* Only when JavaScript runs: the cards away from the middle shrink, the way
   the slider of the original did it. */
.js .room {
  transform: scale(0.72);
  opacity: 0.72;
}

.js .room.is-active {
  transform: scale(1);
  opacity: 1;
}

.room img {
  width: 100%;
  aspect-ratio: 1.886;
  object-fit: cover;
}

.room__overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--cream);
  background: linear-gradient(to top, rgba(20, 13, 10, 0.92) 18%, rgba(20, 13, 10, 0.62) 58%, rgba(20, 13, 10, 0));
}

.room__overlay h3 {
  color: var(--sand);
}

.room__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 12px;
  font-size: var(--small);
}

.room__facts li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.room__facts svg {
  flex: none;
  color: var(--gold);
}

.rooms__nav {
  position: absolute;
  right: max(var(--gutter), calc(50% - 660px));
  top: calc(50% - 50px);
  z-index: 3;
  display: flex;
  gap: 12px;
}

.carousel-button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 0;
  background: var(--gold);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 260ms var(--ease-out), transform 260ms var(--ease-out);
}

.carousel-button:hover {
  background: var(--gold-deep);
  transform: scale(1.06);
}

.carousel-button:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.rooms__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
  max-width: 862px;
  margin-inline: auto;
}

/* While the pointer drags, snapping has to keep quiet: it would fight every
   pixel of the movement. main.js puts the class on, and takes it off on
   release so the snap can settle the card back into place. */
.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

.is-dragging img {
  pointer-events: none;
}

/* ==========================================================================
   9. Details grid
   ========================================================================== */

.details {
  background: var(--sand);
  padding-block: 32px;
}

.details__inner {
  display: flex;
  flex-direction: column;
  gap: var(--stack);
  padding-block: 48px;
}

.details__grid {
  display: grid;
  grid-template-columns: minmax(0, 360fr) minmax(0, 552fr) minmax(0, 360fr);
  gap: 24px;
  align-items: start;
}

.details__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-card {
  background: var(--cream);
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  min-height: 403px;
  justify-content: center;
  transition: transform 400ms var(--ease-out);
}

.detail-card:hover {
  transform: translateY(-6px);
}

.detail-card svg {
  color: var(--wine);
}

.detail-card h3 {
  font-size: var(--h4);
  letter-spacing: var(--h4-ls);
  color: var(--ink);
  max-width: 12ch;
}

.details__figure img {
  width: 100%;
  aspect-ratio: 0.666;
  object-fit: cover;
}

.details__closing {
  text-align: center;
  max-width: 636px;
  margin-inline: auto;
}

/* ==========================================================================
   10. Gallery carousel and wordmark
   ========================================================================== */

.gallery {
  /* relative, sinon l'ornement en position absolue se cale sur le viewport et
     vient se peindre par-dessus le hero. */
  position: relative;
  padding-block: 300px var(--section);
}

.gallery__track {
  cursor: grab;
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: calc(50% - 330px);
  scroll-padding-inline: calc(50% - 330px);
  padding-block: 4px;
  scrollbar-width: none;
}

.gallery__track::-webkit-scrollbar {
  display: none;
}

.gallery-item {
  flex: none;
  width: 660px;
  max-width: 78vw;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  transform-origin: center top;
  transition: transform 900ms var(--ease-out), opacity 900ms var(--ease-out);
}

.js .gallery-item {
  /* The data of the original faded the neighbours out; what it actually
     rendered kept them visible, just smaller. The render wins. */
  transform: scale(0.7);
  opacity: 1;
}

.js .gallery-item.is-active {
  transform: scale(1);
  opacity: 1;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 1.113;
  object-fit: cover;
}

.gallery-item__body {
  width: 76%;
  margin-inline: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.gallery-item__body h3 {
  font-size: var(--base);
  line-height: var(--lh-body);
  letter-spacing: 0.04em;
  font-family: var(--font-body);
  color: var(--wine);
}

.gallery__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 60px;
}

.gallery__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 240ms var(--ease-out);
}

.gallery__dots button[aria-current="true"] {
  background: var(--wine);
}

/* --- The wordmark band --------------------------------------------------- */

.wordmark {
  position: relative;
  padding-block: 140px 160px;
  /* The word is wider than the container on purpose: the band clips it. */
  overflow: clip;
}

.wordmark__layers {
  display: flex;
  flex-direction: column;
  line-height: 0.78;
  /* The size lives here, not on the word: the windows below are sized in em
     and an em resolved against 16 px would close them entirely. */
  font-size: clamp(60px, 19.4vw, 290px);
}

/* Each layer is a window onto the top of the word, and each window is taller
   than the last: the name echoes three times instead of three copies crossing
   each other. The ratios are those of the original (58, 98 and 190 px for the
   same drawing). */
.wordmark__layer {
  display: block;
  overflow: clip;
}

.wordmark__layer--first {
  height: 0.24em;
}

.wordmark__layer--second {
  height: 0.40em;
}

.wordmark__word {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-size: 1em;
  line-height: 0.78;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

.wordmark__word--faint {
  color: #e6c2c2;
  opacity: 0.55;
}

.wordmark__word--mid {
  color: #d9a7a7;
  opacity: 0.75;
}

.wordmark__word--solid {
  color: var(--wine);
}

.wordmark__cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wordmark-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: auto;
}

.wordmark-card h3 {
  font-size: var(--h4);
  letter-spacing: var(--h4-ls);
  color: var(--ink);
}

.wordmark-card img {
  width: 100%;
  object-fit: cover;
}

.wordmark-card--pool {
  left: 4%;
  top: 46%;
  width: 275px;
}

.wordmark-card--pool img {
  aspect-ratio: 0.911;
}

.wordmark-card--dining {
  right: 4%;
  top: 34%;
  width: 275px;
}

.wordmark-card--dining img {
  aspect-ratio: 1.113;
}

.wordmark-card--spa {
  left: 50%;
  translate: -50% 0;
  bottom: 2%;
  width: 340px;
  flex-direction: column-reverse;
}

.wordmark-card--spa img {
  aspect-ratio: 1.65;
}

/* ==========================================================================
   11. Accommodations grid
   ========================================================================== */

.accommodations {
  background: var(--wine);
  color: var(--sand);
  padding-block: 32px;
}

.accommodations h2,
.accommodations h3 {
  color: var(--sand);
}

.accommodations__inner {
  display: flex;
  flex-direction: column;
  gap: var(--stack);
  padding-block: 40px;
}

.accommodations .section-lede {
  color: rgba(250, 237, 221, 0.78);
}

.accommodations__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.accommodation {
  position: relative;
  overflow: clip;
  transition: transform 300ms var(--ease-out);
}

.accommodation:hover {
  transform: scale(1.02);
}

.accommodation:first-child {
  grid-row: span 2;
}

.accommodation img {
  width: 100%;
  height: 100%;
  aspect-ratio: 0.966;
  object-fit: cover;
  transition: transform 300ms var(--ease-out);
}

.accommodation:first-child img {
  aspect-ratio: 0.47;
}

.accommodation:hover img {
  transform: scale(1.06);
}

.accommodation__body {
  position: absolute;
  inset: auto 0 0;
  /* The veil is the padding of this box, not a pseudo-element behind it: a
     negative z-index would drop it behind the photograph, since the card
     creates no stacking context of its own. */
  padding: 150px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--cream);
  background: linear-gradient(to top, rgba(20, 13, 10, 0.92) 22%, rgba(20, 13, 10, 0.6) 62%, rgba(20, 13, 10, 0));
}

.accommodation__body h3 {
  font-size: var(--h4);
  letter-spacing: var(--h4-ls);
}

.accommodation__body p {
  font-size: var(--small);
}

.accommodations__closing {
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}

.accommodations__closing h3 {
  color: var(--sand);
}

/* ==========================================================================
   12. Crafted (figures)
   ========================================================================== */

.crafted__grid {
  display: grid;
  grid-template-columns: minmax(0, 660fr) minmax(0, 600fr);
  gap: var(--gap);
  align-items: center;
}

.crafted__figure img {
  width: 100%;
  aspect-ratio: 0.943;
  object-fit: cover;
}

.crafted__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.crafted__text p {
  max-width: 470px;
}

.figures {
  display: flex;
  gap: var(--gap);
  margin-top: 56px;
  flex-wrap: wrap;
}

.figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 230px;
}

.figure__number {
  font-family: var(--font-display);
  font-size: var(--num);
  line-height: var(--lh-tight);
  letter-spacing: -2px;
  color: var(--wine);
}

.figure__label {
  color: var(--ink);
  font-size: var(--lead);
}

.figure p {
  font-size: var(--base);
}

/* ==========================================================================
   13. Signature experiences (accordion)
   ========================================================================== */

.signature__grid {
  display: grid;
  grid-template-columns: minmax(0, 599fr) minmax(0, 661fr);
  gap: var(--gap);
  align-items: start;
}

.signature__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.experience {
  border-bottom: 1px solid var(--line);
}

.experience > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 9px;
  cursor: pointer;
  list-style: none;
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  line-height: var(--lh-body);
}

.experience > summary::-webkit-details-marker {
  display: none;
}

.experience > summary svg {
  flex: none;
  transition: transform 300ms var(--ease-out);
  color: var(--wine);
}

.experience[open] > summary svg {
  transform: rotate(45deg);
}

.experience__body {
  padding-bottom: 20px;
  max-width: 46ch;
}

/* The panel slides open on a grid track. A track at 0fr does collapse — but
   only if its content box is empty, hence the inner wrapper with the padding. */
.experience__panel {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 420ms var(--ease-out);
}

.experience[open] .experience__panel {
  grid-template-rows: minmax(0, 1fr);
}

.experience__panel > div {
  overflow: hidden;
}

.signature__figure {
  position: relative;
}

.signature__figure img {
  width: 100%;
  aspect-ratio: 0.943;
  object-fit: cover;
  transition: opacity 420ms var(--ease-out);
}

/* The stack of pictures: the one matching the open panel is the visible one. */
.signature__figure img + img {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
}

.signature__figure img.is-shown {
  opacity: 1;
}

/* ==========================================================================
   14. Testimonial
   ========================================================================== */

.testimonial__grid {
  display: grid;
  grid-template-columns: minmax(0, 396fr) minmax(0, 864fr);
  gap: var(--gap);
  align-items: center;
}

.testimonial__figure img {
  width: 100%;
  aspect-ratio: 0.996;
  object-fit: cover;
}

.testimonial__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 720px;
}

.testimonial__body blockquote {
  margin: 0;
  font-size: var(--lead);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

/* A monogram medallion instead of a stock portrait: no real face is needed to
   sign a quote, and none can be generated safely. */
.monogram {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--wine);
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
}

.testimonial__author strong {
  display: block;
  color: var(--ink);
  font-weight: 500;
}

.testimonial__author span {
  font-size: var(--small);
}

/* ==========================================================================
   15. Discover
   ========================================================================== */

.discover__cards {
  display: grid;
  grid-template-columns: minmax(0, 528fr) minmax(0, 594fr) minmax(0, 422fr);
  gap: var(--gap);
  align-items: start;
}

.discover-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.discover-card img {
  width: 100%;
  object-fit: cover;
}

.discover-card h3 {
  font-size: var(--h4);
  letter-spacing: var(--h4-ls);
  color: var(--ink);
}

/* The three cards are staggered, like the original: the middle one drops, the
   last one drops further. */
.discover-card:nth-child(1) img { aspect-ratio: 1.548; }
.discover-card:nth-child(2) { margin-top: 120px; }
.discover-card:nth-child(2) img { aspect-ratio: 1.07; }
.discover-card:nth-child(3) { margin-top: 680px; }
.discover-card:nth-child(3) img { aspect-ratio: 0.798; }

.discover__button {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   16. Journal
   ========================================================================== */

.journal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.post {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.post img {
  width: 100%;
  aspect-ratio: 0.771;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}

.post__frame {
  overflow: clip;
}

.post:hover img {
  transform: scale(1.04);
}

.post__date {
  color: var(--wine);
  font-size: var(--small);
}

.post h3 {
  font-size: var(--h4);
  letter-spacing: var(--h4-ls);
  color: var(--ink);
}

/* ==========================================================================
   17. Footer
   ========================================================================== */

.footer {
  background: var(--wine);
  color: rgba(250, 237, 221, 0.82);
  padding-block: var(--section) 40px;
}

.footer h2,
.footer h3 {
  color: var(--sand);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 550fr) minmax(0, 660fr);
  gap: var(--gap);
}

.footer__lead {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 550px;
}

.footer__lead h2 {
  font-size: 48px;
  letter-spacing: -1px;
  line-height: var(--lh-heading);
}

.footer__lead p {
  max-width: 450px;
}

.footer__lead-copy {
  margin-top: 16px;
}

.newsletter {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 500px;
}

.newsletter input[type="email"] {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid transparent;
  background: var(--sand);
  color: var(--ink);
  font: inherit;
  min-height: 45px;
}

.newsletter input::placeholder {
  color: rgba(33, 28, 26, 0.55);
}

.newsletter button {
  width: 100%;
  justify-content: center;
  min-height: 45px;
}

.newsletter__note {
  font-size: var(--small);
  min-height: 22px;
}

.newsletter__note[data-state="ok"] {
  color: var(--gold-soft);
}

.newsletter__note[data-state="error"] {
  color: #ffc9c0;
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer__column h3 {
  font-size: var(--h4);
  letter-spacing: var(--h4-ls);
}

.footer__column ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__column a {
  transition: color 220ms var(--ease-out);
}

.footer__column a:hover {
  color: var(--sand);
}

.footer__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 0.78;
  overflow: clip;
  font-size: clamp(52px, 19.4vw, 290px);
}

.footer__wordmark span {
  display: block;
  font-family: var(--font-display);
  font-size: 1em;
  line-height: 0.78;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

.footer__wordmark .wordmark__layer {
  display: block;
  overflow: clip;
  height: 0.34em;
}

.footer__wordmark span {
  color: rgba(250, 237, 221, 0.2);
}

.footer__wordmark > span:last-child {
  color: var(--sand);
}

.footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: var(--small);
  padding-top: 8px;
}

.footer__legal a:hover {
  color: var(--sand);
}

/* ==========================================================================
   18. Scroll reveal
   --------------------------------------------------------------------------
   The hidden state is scoped to `.js`, and enhance.js is the only thing that
   sets that class. No JavaScript, nothing hidden — check it by deleting the
   <script> tags.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(100px);
}

.js [data-reveal="scale"] {
  transform: scale(1.06);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--reveal-time) var(--ease-out),
              transform var(--reveal-time) var(--ease-out);
}

/* Children that come in one after the other. */
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(100px);
}

.js [data-reveal-group].is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--reveal-time) var(--ease-out),
              transform var(--reveal-time) var(--ease-out);
}

.js [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 90ms; }
.js [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 180ms; }
.js [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 270ms; }
.js [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 360ms; }

/* ==========================================================================
   19. Breakpoints
   --------------------------------------------------------------------------
   Only tokens change here. If a section needs its own rule at a given width,
   it is written right after the token block for that width.
   ========================================================================== */

@media (max-width: 1199px) {
  .rooms__track {
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }

  .rooms__nav {
    right: var(--gutter);
  }

  .gallery__track {
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}

@media (max-width: 991px) {
  :root {
    --h1: 62px;
    --h1-ls: -1.5px;
    --h2: 48px;
    --h2-ls: -1px;
    --h3: 32px;
    --h3-ls: -1px;
    --num: 54px;
    --section: 80px;
    --stack: 56px;
    --gap: 40px;
    --gutter: 24px;
  }

  /* The menu becomes a panel under the header. */
  .nav {
    display: flex;
    justify-content: space-between;
  }

  .nav__toggle {
    display: block;
    order: 3;
  }

  .nav__menu {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin: 0;
    padding: 24px var(--gutter) 32px;
    background: rgba(28, 20, 18, 0.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(245, 236, 228, 0.12);
    display: none;
  }

  .nav__menu.is-open {
    display: flex;
  }

  /* Without JavaScript the toggle is useless, so the links stay in place. */
  html:not(.js) .nav__menu {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 0;
    background: none;
    border: 0;
    backdrop-filter: none;
  }

  html:not(.js) .nav__toggle {
    display: none;
  }

  .nav__pages-list {
    position: static;
    background: transparent;
    border: 0;
    padding: 6px 0 0 12px;
  }

  .nav__pages-list a {
    color: var(--cream);
    padding: 6px 0;
  }

  .nav__phone {
    display: none;
  }

  .nav__menu-cta {
    display: block;
  }

  .hero {
    min-height: 0;
    padding: 160px 0 24px;
  }

  .hero__content {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  .hero__inner {
    gap: 30px;
  }

  .hero__text {
    max-width: 600px;
  }

  .hero__card {
    width: 100%;
    max-width: 430px;
  }

  .about__grid,
  .crafted__grid,
  .signature__grid,
  .testimonial__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .details__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .details__figure {
    grid-column: span 2;
    order: -1;
  }

  .details__figure img {
    aspect-ratio: 1.4;
  }

  .detail-card {
    min-height: 0;
    padding: 40px 24px;
  }

  .gallery {
    padding-block: 120px var(--section);
  }

  .journal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discover__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discover-card:nth-child(2) { margin-top: 60px; }
  .discover-card:nth-child(3) { margin-top: 0; }

  .wordmark {
    padding-block: 80px 100px;
  }

  .wordmark-card--pool,
  .wordmark-card--dining {
    width: 200px;
  }

  .wordmark-card--spa {
    width: 240px;
  }

  .carousel-button {
    width: 72px;
    height: 72px;
  }

  .rooms__nav {
    top: auto;
    bottom: -12px;
  }

  .footer__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__lead h2 {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .hero {
    padding: 120px 0 20px;
  }

  .hero__card-head h2 {
    font-size: var(--h4);
    letter-spacing: var(--h4-ls);
  }

  .hero__content,
  .hero__inner {
    gap: 24px;
  }

  :root {
    --h1: 54px;
    --h1-ls: -1px;
    --h2: 42px;
    --h2-ls: -0.5px;
    --h3: 30px;
    --h3-ls: -0.5px;
    --h4-ls: normal;
    --num: 48px;
    --section: 60px;
    --stack: 48px;
    --gutter: 20px;
  }

  .accommodations__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .accommodation:first-child {
    grid-row: span 1;
  }

  .accommodation:first-child img {
    aspect-ratio: 0.966;
  }

  .footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  :root {
    --h1: 40px;
    --h1-ls: -0.5px;
    --h2: 32px;
    --h3-ls: normal;
    --num: 38px;
    --gap: 32px;
  }

  .hero {
    padding: 110px 0 20px;
  }

  .hero__text {
    gap: 10px;
  }

  /* Below this width the bar has room for the logo and the toggle, no more:
     the call to action moves into the menu. */
  .nav__actions .button {
    display: none;
  }

  .hero__card {
    padding: 18px;
  }

  .details__grid,
  .journal__grid,
  .discover__cards,
  .accommodations__grid,
  .footer__columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .details__figure {
    grid-column: span 1;
  }

  .discover-card:nth-child(2) { margin-top: 0; }

  .wordmark__cards {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 40px;
  }

  .wordmark-card {
    position: static;
    width: 100% !important;
    translate: none;
  }

  .wordmark {
    padding-block: 60px 40px;
  }

  .figures {
    gap: 32px;
  }

  .room,
  .gallery-item {
    max-width: 88vw;
  }

  .room__overlay {
    padding: 28px 20px 20px;
  }

  .room__facts {
    gap: 8px 16px;
  }

  .rooms__nav {
    position: static;
    justify-content: center;
    margin-top: 24px;
  }

  .carousel-button {
    width: 56px;
    height: 56px;
  }

  .footer__legal {
    flex-direction: column;
    gap: 8px;
  }
}

/* ==========================================================================
   20. Reduced motion
   --------------------------------------------------------------------------
   Delays count as motion too: a staggered entrance is movement spread over
   time, so the delays go to zero as well.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal],
  .js [data-reveal-group] > * {
    opacity: 1;
    transform: none;
  }

  .js .room,
  .js .gallery-item {
    transform: none;
    opacity: 1;
  }
}
