/* ========================================================
   Château de Bellemont — styles.css

   Scroll-driven page: the hero is a tall sticky scene whose
   photo opens from an arched window, and most type is
   revealed by a rising mask. Both effects are driven from
   script.js; the states below are only the start and end
   points.

   Hidden start states live under `.anim` (set by the inline
   script in the head) and inside
   `@media (prefers-reduced-motion: no-preference)`, so the
   page still reads with JavaScript off and animation off.
   ======================================================== */

:root {
  /* Palette */
  --ink:       #524A41;
  --ink-soft:  rgba(82, 74, 65, 0.8);
  --ink-mute:  rgba(82, 74, 65, 0.7);
  --ink-faint: rgba(82, 74, 65, 0.6);
  --line:      rgba(82, 74, 65, 0.2);
  --cream:     #FEFDFA;
  --sand:      #DCCFC0;
  --pill:      #D4C4B0;
  --pill-hover:#C7B79F;
  --pill-ink:  #6B5B4D;
  --field:     #F4F1EC;
  --field-ink: #333333;
  --white:     #FFFFFF;

  --font-display: "Italiana", "Times New Roman", serif;
  --font-body:    "Source Serif 4", Georgia, serif;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --max-w:  1280px;
  --gutter: clamp(20px, 4vw, 48px);

  /* The rising mask shared by every revealed element. */
  --reveal-mask: linear-gradient(
    to top,
    transparent 40%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.9) 65%,
    black 100%
  );
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 300;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* The default figure margin is 40px an edge, which would eat into every card
   and gallery cell. */
figure, figcaption { margin: 0; }

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

button {
  font: inherit;
  color: inherit;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}

p { margin: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The gradient runs from the video down to the form as one ramp, so it must
   sit on the element that spans the whole stretch rather than per section. */
.ramp {
  background: linear-gradient(180deg, var(--cream) 0%, var(--sand) 100%);
}

/* Shared pill button: the hero link and the form submit. */
.pill {
  display: inline-block;
  width: fit-content;
  padding: 12px 32px;
  border-radius: 25px;
  background: var(--pill);
  color: var(--pill-ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.pill:hover {
  background: var(--pill-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pill:active { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }

/* ---------- Default size of a revealed block ----------
   Declared here, ahead of the sections, because the selector carries a type of
   its own: a section rule written later then wins the tie rather than losing
   it. Anything that needs another size overrides it below. */
h2.reveal {
  max-width: 800px;
  margin-bottom: var(--space-6);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.2;
}

.reveal--body {
  max-width: 800px;
  color: var(--ink-soft);
}

/* ===== FIXED HEADER ===== */
/* Hidden until the hero wordmark shrinks away; script.js swaps the two. */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding: var(--space-4) 0;
  /* No tint of its own: the bar is the blur alone, and the type on it is white. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.header.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.header__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  line-height: 0.8;
  text-align: center;
  color: var(--white);
}

.header__logo b { display: block; font-weight: 400; font-size: 18px; }
.header__logo span { display: block; font-size: 12px; }

.header__nav {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

.header__nav a {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--white);
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.header__nav a:hover { opacity: 1; }

/* Phone menu button: bars are 2px on an integer gap, so they never land on a
   half pixel and render at uneven weights. */
.header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.header__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
}

/* ===== HERO — ARCHED WINDOW ===== */
/* The section is tall and the inner pane sticks, which turns page scroll into
   the timeline for the opening arch. */
/* The height is how long the pane stays pinned, and so how much scrolling the
   arch is given. script.js reads it back and fits the animation to it, so this
   one number sets the pace of the whole opening. */
.hero {
  position: relative;
  height: 180vh;
  background: var(--ink);
  /* Start values of the arch, read back by script.js so the CSS below and the
     scroll animation cannot drift apart. */
  --arch-x: 40;
  --arch-y: 25;
}

.hero__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: clip;
}

.hero__sky,
.hero__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hero__sky {
  z-index: 1;
  background-image: url("images/intro-sky.jpg");
}

.hero__photo {
  z-index: 2;
  background-image: url("images/hero.jpg");
  clip-path: inset(
    calc(var(--arch-y) * 1%) calc(var(--arch-x) * 1%)
    calc(var(--arch-y) * 1%) calc(var(--arch-x) * 1%)
    round 100% 100% 0 0
  );
  -webkit-clip-path: inset(
    calc(var(--arch-y) * 1%) calc(var(--arch-x) * 1%)
    calc(var(--arch-y) * 1%) calc(var(--arch-x) * 1%)
    round 100% 100% 0 0
  );
}

/* Fades the foot of the photo into the page below. */
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(254, 253, 250, 0) 60.67%, var(--cream) 100%);
}

.hero__logo {
  position: absolute;
  top: 8rem;
  left: 50%;
  z-index: 10;
  width: calc(100vw - 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate3d(-50%, 0, 1px);
  transform-origin: top center;
  font-family: var(--font-display);
  line-height: 0.8;
  text-align: center;
  color: var(--ink);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__logo.is-hidden { opacity: 0; }

.hero__logo b {
  font-weight: 400;
  font-size: clamp(46px, 10vw, 150px);
}

.hero__logo span { font-size: clamp(31px, 6.7vw, 100px); }

/* ===== WHERE LUXURY MEETS HISTORY ===== */
.intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--space-8);
}

/* Pulled up so the line overlaps the foot of the hero, where the photo has
   already faded to the page colour. */
.intro__title {
  margin-top: clamp(-8rem, -6vw, -2.5rem);
  font-size: clamp(40px, 8.2vw, 100px);
  line-height: 0.9;
  text-align: center;
}

.intro__cta { margin-top: var(--space-6); }

/* ===== VIDEO ===== */
/* The video widens with scroll and is allowed past the viewport edge, so the
   band is clipped rather than letting the page scroll sideways. */
.story {
  overflow-x: clip;
}

.story__frame {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
}

.story__video {
  position: absolute;
  left: 50%;
  width: 60vw;
  height: 100%;
  transform: translateX(-50%);
  transform-origin: center;
  object-fit: cover;
  will-change: width;
}

/* ===== A STORYBOOK SETTING ===== */
/* Every band takes its width from `.wrap`, so the type in one section lines up
   with the type in the next. */
.lede { padding-block: clamp(64px, 9vw, 120px); }

/* ===== THREE-PHOTO STRIP ===== */
.strip { padding-top: clamp(64px, 9vw, 120px); }

/* Widths, the inset and the two gaps add up to exactly 100%, so nothing shrinks
   and the composition holds its proportions at any width. All four photographs
   of this section share one aspect ratio, which is why widths alone place them. */
.strip__row {
  display: flex;
  align-items: flex-end;
  gap: 0.74%;
}

.strip__item { position: relative; }

/* The three photos hang off a shared baseline at different heights. In vw, not
   percent: a percentage here would resolve against each photo's own height. */
.strip__item--1 {
  flex: 0 0 27.87%;
  margin-left: 9.55%;
  transform: translateY(-1.4vw);
}

.strip__item--2 {
  flex: 0 0 28.38%;
  transform: translateY(11vw);
}

/* Runs to the right edge of the page. */
.strip__item--3 { flex: 0 0 32.72%; }

/* ===== A FAIRYTALE STAY — FOURTH PHOTO + ACCORDION ===== */
/* No top padding: the second photograph of the strip above is pushed down by a
   transform, which leaves no layout height behind, so this band slides up
   underneath it and the two overlap the way the composition wants. */
.stay { padding-top: 0; }

.stay__row {
  display: flex;
  align-items: flex-end;
  gap: 4.9%;
}

/* Starts at the left edge of the page, the counterweight to the photograph that
   runs off the right edge above it. */
.stay__photo { width: 33.7%; }

/* Dropped well below the baseline of the photographs: the heading belongs under
   the composition, not alongside the lowest photo. */
.stay__panel {
  width: 36.7%;
  transform: translateY(13vw);
}

/* Holds the panel off the right edge, mirroring the inset of the first photo. */
.stay__spacer { flex: 1; }

.stay__title { margin-bottom: var(--space-5); }

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

.accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) 0;
  text-align: left;
  transition: opacity 0.3s ease;
}

.accordion__header:hover { opacity: 0.7; }

.accordion__title {
  font-family: var(--font-body);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 600;
  color: var(--ink);
}

.accordion__icon {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--ink-soft);
}

/* 0fr → 1fr animates to the paragraph's natural height, so a longer answer or
   a narrow screen can never clip it the way a fixed max-height would. */
.accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}

.accordion__body > div {
  min-height: 0;
  padding-bottom: 0;
  transition: padding-bottom 0.3s ease;
}

.accordion__body.is-open { grid-template-rows: 1fr; }

.accordion__body.is-open > div { padding-bottom: var(--space-4); }

/* ===== AMENITIES ===== */
.amenities {
  position: relative;
  margin-top: clamp(120px, 16vw, 250px);
}

.amenities__text {
  max-width: 700px;
  margin-top: var(--space-5);
}

/* ---------- Carousel ---------- */
.carousel {
  position: relative;
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.carousel__track { padding-block: 20px; }

.card__media {
  width: 100%;
  height: clamp(240px, 26vw, 340px);
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .card__media { transform: scale(1.02); }

.card__title {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
}

/* The strip itself is full width; only its controls stay inside the column. */
.carousel__nav {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  max-width: var(--max-w);
  margin: var(--space-4) auto 0;
  padding-inline: var(--gutter);
}

/* 44px box on every width: the arrows stay on phones, where they double as the
   only visible cue that the strip continues. */
.carousel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.carousel__btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.carousel__btn.swiper-button-disabled { opacity: 0.35; }

/* ---------- What's included ---------- */
.included { padding-top: var(--space-6); }

.included__title {
  width: fit-content;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
}

.included__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  max-width: 800px;
}

.included__list li {
  position: relative;
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
}

.included__list li::before {
  content: "\2666";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* ===== ESCAPE TO ELEGANCE ===== */
.escape { padding-block: clamp(96px, 14vw, 200px); }

.escape__header { margin-bottom: clamp(48px, 7vw, 96px); }

.escape__eyebrow {
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Typed selector: the shared `h2.reveal` below carries a type of its own, so a
   bare class would lose to it on specificity. */
h2.escape__title {
  max-width: none;
  margin: var(--space-3) 0 0;
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.escape__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

/* aspect-ratio with height:auto, never height:100%: inside an auto-height grid
   row the pair is circular, and WebKit resolves it by collapsing the row. */
.escape__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 610 / 798;
  max-height: 400px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.escape__item img:hover { transform: scale(1.02); }

.escape__caption {
  margin-top: var(--space-2);
  font-size: 20px;
}

/* ===== REVIEWS ===== */
.reviews { padding-bottom: clamp(96px, 14vw, 200px); }

h2.reviews__title {
  max-width: 900px;
  margin: 0 auto clamp(48px, 7vw, 96px);
  font-size: clamp(1.8rem, 4vw, 3rem);
  text-align: center;
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
}

.review {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.review__avatar {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.review__text {
  font-style: italic;
  margin-bottom: var(--space-4);
}

.review__author {
  font-weight: 600;
  color: var(--ink);
}

/* Decorative: there are two reviews on the page, so the dots mark the set
   rather than paging through it. */
.reviews__dots {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: clamp(32px, 5vw, 64px);
}

.reviews__dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(82, 74, 65, 0.3);
}

.reviews__dots span.is-current { background: var(--ink-soft); }

/* ===== BOOK NOW ===== */
.book {
  padding-bottom: clamp(96px, 14vw, 200px);
  /* How far the heading is lifted onto the photograph: 40% of the title's own
     size, so the letters straddle the lower edge of the picture and hold that
     proportion at every width rather than at one. */
  --book-lift: calc(0.4 * clamp(56px, 13vw, 150px));
}

/* The white display title sits on the foot of the photograph, so the photograph
   is darkened there — the same gradient the hero uses to meet the page. */
.book__media { position: relative; }

.book__media::after {
  content: "";
  position: absolute;
  inset: 45% 0 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 100%);
  pointer-events: none;
}

.book__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 5;
  object-fit: cover;
}

/* Lifted by rather more than the title's own line box, so the white letters sit
   inside the photograph at every width instead of straddling its lower edge. */
.book__header {
  text-align: center;
  transform: translateY(calc(-1 * var(--book-lift)));
}

h2.book__title {
  max-width: none;
  margin: 0;
  font-size: clamp(56px, 13vw, 150px);
  line-height: 0.9;
  color: var(--white);
}

.book__sub {
  font-size: clamp(22px, 4.4vw, 40px);
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink-mute);
}

/* ---------- Form ---------- */
/* Client side only: it shows a confirmation and sends nothing. */
/* The heading above is lifted by transform, which leaves its layout height
   behind; taking that height off here keeps one gap at every width. */
.form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  margin-top: calc(var(--space-8) - var(--book-lift));
}

/* Column gap only: the fields carry their own bottom margin, so a row gap would
   double the space between them once the row stacks. */
.form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-3);
}

.form input,
.form select {
  width: 100%;
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  background: var(--field);
  color: var(--field-ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 1px;
  transition: border-color 0.3s ease;
}

.form input::placeholder { color: var(--field-ink); letter-spacing: 1px; }

.form input:focus,
.form select:focus {
  outline: none;
  border-color: var(--ink-soft);
}

.form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23524A41' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-6);
}

.form__submit {
  margin: 10px auto 0;
  border-radius: 25px;
  padding: var(--space-3) var(--space-5);
  border: 0;
}

.form__note {
  margin-top: var(--space-4);
  text-align: center;
  color: var(--ink);
}

.form__note[hidden] { display: none; }

/* ===== FOOTER ===== */
.footer {
  padding: var(--space-8) 0 var(--space-7);
  background: var(--sand);
  border-top: 1px solid rgba(82, 74, 65, 0.1);
}

.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.footer__brand {
  font-family: var(--font-display);
  line-height: 0.8;
  text-align: center;
  color: var(--ink);
}

.footer__brand b { display: block; font-weight: 400; font-size: 18px; }
.footer__brand span { display: block; font-size: 12px; }

.footer__info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.footer__info p,
.footer__info a {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink);
}

.footer__info p { margin: var(--space-1) 0; }

.footer__phone a { font-weight: 500; }

.footer__phone a:hover { text-decoration: underline; }

.footer__social { display: flex; gap: var(--space-3); }

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(82, 74, 65, 0.3);
  border-radius: 50%;
  color: var(--ink-soft);
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.footer__social a:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
  transform: translateY(-2px);
}

/* ===== REVEAL START STATES ===== */
/* Only inside `.anim`: with JavaScript off nothing is left invisible. */
@media (prefers-reduced-motion: no-preference) {
  .anim .reveal,
  .anim .strip__item img,
  .anim .stay__photo img,
  .anim .accordion__item {
    opacity: 0;
    transform: translateY(60px);
    mask-image: var(--reveal-mask);
    -webkit-mask-image: var(--reveal-mask);
    mask-size: 100% 300%;
    -webkit-mask-size: 100% 300%;
    mask-position: 0% 100%;
    -webkit-mask-position: 0% 100%;
  }

  .anim .accordion__item { transform: translateY(40px); }
}

/* ===== BREAKPOINTS ===== */
@media (max-width: 1199.98px) {
  .footer__info { gap: var(--space-7); }
}

@media (max-width: 991.98px) {
  .escape__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .reviews__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }

  .stay__panel { transform: none; }
}

@media (max-width: 767.98px) {
  /* The arch starts as a taller, narrower window: at 40% a side there would be
     barely 70px of photo left on a phone. */
  .hero {
    height: 160vh;
    --arch-x: 18;
    --arch-y: 30;
  }

  .hero__logo { top: 5rem; }

  .header { padding: var(--space-3) 0; }

  .header__toggle { display: flex; }

  /* Dropping the inner block out of the positioning chain hands the panel the
     fixed bar as its containing block, so the band spans the whole width and
     starts below the bar rather than inside its padding. */
  .header__inner { position: static; }

  /* Drop-down panel: a dark veil, because the links are white. Kept under 40%
     opacity, or the blur behind it stops reading. */
  .header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-4) var(--gutter);
    background: rgba(82, 74, 65, 0.38);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header__nav { background: rgba(82, 74, 65, 0.92); }
  }

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

  .header__nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .story__frame { aspect-ratio: 4 / 5; }

  .story__video { width: 80vw; }

  /* Photo one keeps the full width, the other two share the row below it. The
     basis is reset rather than the width: the desktop rule sets `flex`. */
  .strip__row { flex-wrap: wrap; gap: var(--space-4); }

  .strip__item--1 {
    flex: 0 0 100%;
    margin-left: 0;
    transform: none;
  }

  .strip__item--2,
  .strip__item--3 {
    flex: 0 0 calc(50% - (var(--space-4) / 2));
    transform: none;
  }

  /* The overlap with the band above is a desktop effect: it comes from a
     transform on the second photo, which is switched off here, so the fourth
     photo needs the same gap the wrapped row uses. */
  .stay { padding-top: var(--space-4); }

  .stay__row { flex-direction: column; align-items: stretch; }

  .stay__photo,
  .stay__panel { width: 100%; }

  /* The band is full bleed, so the panel has to carry the page margin itself. */
  .stay__panel {
    padding-inline: var(--gutter);
    padding-top: var(--space-4);
  }

  .stay__spacer { display: none; }

  .included__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

  .carousel__nav { justify-content: space-between; }

  /* A 12:5 band is only 150px tall on a phone, which the display title would
     fill on its own. */
  .book__media img { aspect-ratio: 4 / 3; }

  .footer__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
  }

  .footer__info {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }
}

@media (max-width: 575.98px) {
  .escape__grid { gap: var(--space-4); }

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

  .review { flex-direction: column; gap: var(--space-4); }
}

/* ===== REDUCED MOTION ===== */
/* Everything is shown in its finished state: the arch fully open, the type in
   place. script.js registers no scroll animation in this mode. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero { height: 100vh; }

  .hero__photo {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }

  .story__video { width: 100%; }

  .header {
    opacity: 1;
    pointer-events: auto;
  }

  .card__media,
  .escape__item img,
  .footer__social a,
  .pill,
  .accordion__body,
  .accordion__body > div {
    transition: none;
  }
}