/* ==========================================================================
   Casa Andrea — stylesheet
   Editorial, Pugliese: warm lime-wash, olive green, ochre, deep ink.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* Palette */
  --lime:        #ffffff;   /* page background — white */
  --paper:      #ffffff;   /* section panels — white */
  --stone:      #ffffff;   /* image frames / placeholders — white */
  --stone-deep: #c9b896;
  --ink:        #2a241d;   /* deep warm charcoal */
  --ink-soft:   #5b5247;
  --olive:      #6b7250;   /* olive grove green */
  --ochre:      #b8895a;   /* terracotta ochre */
  --sun:        #d8a55a;   /* warm sunlit accent */

  /* Type */
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "EB Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5rem, 10vw, 9rem);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  color: var(--ink);
  background: var(--lime);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, figure { display: block; max-width: 100%; }
figure { margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--ochre); }

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

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

/* Selection */
::selection { background: var(--ochre); color: var(--lime); }

/* ---------- Typography --------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.05;
  margin: 0 0 .5em;
  color: var(--ink);
}

h1 { font-size: clamp(3.5rem, 9vw, 7.5rem); }
.display { font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02; }
h3 { font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.15; }

em {
  font-style: italic;
  font-family: var(--serif);
  font-weight: 400;
}

p { margin: 0 0 1em; }
p + p { margin-top: 0; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0 0 1.25rem;
}
.eyebrow--light { color: var(--sun); }

.lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 50ch;
}

/* ---------- Header / nav ------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1.25rem var(--gutter);
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-scrolled,
/* Subpages (Journal, The House, Experiences, etc.) have no dark landing
   hero behind the fixed header — the body background is cream. Without
   this override, the .site-header sits transparent at the top of the
   page and the lime-coloured nav links become invisible against the
   cream backdrop until the user scrolls. Mirror the scrolled-state
   chrome from the moment the page loads on those pages. */
body:not(:has(.hero--landing)) .site-header {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  padding: .75rem var(--gutter);
  box-shadow: 0 1px 0 rgba(42,36,29,.06);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: var(--container);
  margin: 0 auto;
}

.brand { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }

.brand-img {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: height .3s var(--ease), filter .3s var(--ease);
}
/* Logo is now an all-black cartouche with white letters — it reads on both the
   cream header and the dark hero, so no per-context inversion is applied. */
.site-header.is-scrolled .brand-img { height: 24px; }

.brand-img--footer { height: 28px; margin: 0 0 1rem; }

.nav-links {
  display: flex;
  gap: 2rem;
  margin-left: auto;
  align-items: center;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  min-width: 0;
}
.nav-links a {
  position: relative;
  padding: .25rem 0;
  color: var(--ink);
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }

.nav-links__cta { flex-shrink: 0; }
.nav-links__cta a {
  display: inline-block;
  color: var(--lime);
  background: var(--ink);
  padding: .55rem 1.1rem;
  border-radius: 999px;
  letter-spacing: .12em;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav-links__cta a:hover { background: var(--ochre); color: var(--lime); }
.nav-links__cta a::after { display: none; }

/* Secondary nav group — visible only in the mobile overlay menu.
   Holds the subpages (Experiences, Olive Grove, Surroundings, etc.) that
   shouldn't crowd the slow-luxe desktop bar. The mobile override lives in
   the @media (max-width: 900px) block further down. */
.nav-links__more-wrap { display: none; }

/* Header colors when atop the dark landing hero (transparent header).
   Scoped to body:has(.hero--landing) so subpages with cream backgrounds
   don't inherit the lime text — which would otherwise be invisible. */
body:has(.hero--landing) .site-header:not(.is-scrolled) .nav-links a { color: var(--lime); }
body:has(.hero--landing) .site-header:not(.is-scrolled) .nav-links__cta a {
  background: rgba(244, 237, 225, .14);
  color: var(--lime);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(244, 237, 225, .35);
}
body:has(.hero--landing) .site-header:not(.is-scrolled) .nav-links__cta a:hover {
  background: var(--lime); color: var(--ink); border-color: var(--lime);
}

/* Mobile toggle (hidden on desktop) — 44x44 minimum touch target (WCAG / AGENTS.md) */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease), top .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 25px; }
body:has(.hero--landing) .site-header:not(.is-scrolled) .nav-toggle { color: var(--lime); }
.site-header.is-scrolled .nav-toggle { color: var(--ink); }
[data-nav-open] .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
[data-nav-open] .nav-toggle span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* ---------- Hero --------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: 0 var(--gutter);
  text-align: center;
  color: var(--lime);
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* When the hero photo is delivered, drop it at assets/images/hero.jpg and
     uncomment the line marked PHOTO below — the gradient layers underneath
     remain as a graceful fallback while the image loads. */
  background:
    /* PHOTO: url("../assets/images/hero.jpg") center/cover no-repeat, */
    radial-gradient(at 20% 25%, rgba(216,165,90,.55), transparent 55%),
    radial-gradient(at 80% 75%, rgba(107,114,80,.55), transparent 60%),
    linear-gradient(150deg, #6e5736 0%, #2a241d 60%, #1d1813 100%);
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Localised scrim: a soft dark ellipse behind the centred text keeps the
     title/tagline/CTA legible over the bright daytime pool photo, while the
     edges stay light so the photo still breathes. */
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(0,0,0,.48) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.40) 0%, rgba(0,0,0,.12) 28%, rgba(0,0,0,.12) 60%, rgba(0,0,0,.62) 100%);
  pointer-events: none;
}

.hero-content {
  max-width: 60rem;
  padding: 6rem 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 22px rgba(0,0,0,.45);
}
.hero-title {
  margin: 0 0 1.5rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--lime);
}
.hero-title em { color: inherit; font-style: italic; margin-right: .12em; }
.hero-tag {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  letter-spacing: .005em;
  color: var(--lime);
  margin: 0;
  opacity: .92;
}

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 56px;
  background: rgba(244, 237, 225, .45);
  overflow: hidden;
}
.hero-scroll::after {
  content: "";
  position: absolute;
  top: -56px; left: 0;
  width: 1px; height: 56px;
  background: var(--lime);
  animation: scroll-cue 2.4s var(--ease) infinite;
}
@keyframes scroll-cue {
  0%   { transform: translateY(0);   opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(112px); opacity: 0; }
}

/* ---------- Manifesto ---------------------------------------------------- */
.manifesto {
  padding: var(--section-y) var(--gutter);
  text-align: center;
  max-width: 56rem;
  margin: 0 auto;
}
.manifesto__lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 2rem;
}
.manifesto__sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* Soft inline links inside prose sections (home body copy) */
.manifesto a,
.house p a,
.timeline__copy p a,
.place .lede a {
  color: inherit;
  border-bottom: 1px solid rgba(107, 114, 80, .35);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.manifesto a:hover,
.manifesto a:focus-visible,
.house p a:hover,
.house p a:focus-visible,
.timeline__copy p a:hover,
.timeline__copy p a:focus-visible,
.place .lede a:hover,
.place .lede a:focus-visible {
  color: var(--ochre);
  border-bottom-color: var(--ochre);
}

/* ---------- Split (House, Land) ----------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: var(--section-y) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.split--reverse .split__image { order: 2; }

.split__image {
  aspect-ratio: 4 / 5;
  border-radius: 2px;
}

.split__text { max-width: 38rem; }
.split__text p { color: var(--ink-soft); }
.split__text h2 { color: var(--ink); margin-bottom: 1.5rem; }

/* Key/value list */
.kv {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(42,36,29,.12);
}
.kv li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(42,36,29,.12);
  font-size: 1rem;
}
.kv li span:first-child {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: 0 0 auto;
}
.kv li span:last-child {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  text-align: right;
}

/* ---------- Suites ------------------------------------------------------- */
.suites {
  padding: var(--section-y) var(--gutter);
  background: var(--paper);
}
.section-header {
  max-width: var(--container);
  margin: 0 auto 4rem;
  text-align: center;
}
.section-header .lede { margin: 1rem auto 0; }
.section-header__credit {
  margin: 1.25rem auto 0;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .75;
}

/* Mid-funnel CTA at the end of #house — slow-luxe invitation, not a button.
   Lives inside .house__inner so it shares the section's max-width and
   centred rhythm. */
.house__cta {
  max-width: 44rem;
  margin: 4rem auto 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
}
.house__cta a {
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.house__cta a:hover,
.house__cta a:focus-visible {
  color: var(--ochre);
  border-bottom-color: var(--ochre);
}

.suite-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  max-width: var(--container);
  margin: 0 auto;
}
.suite {
  display: flex;
  flex-direction: column;
}
.suite figure {
  aspect-ratio: 4 / 5;
  margin-bottom: 1.5rem;
  border-radius: 2px;
}
.suite__num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ochre);
  font-size: 1rem;
  margin: 0 0 .25rem;
  letter-spacing: .02em;
}
.suite h3 {
  margin: 0 0 .75rem;
  font-style: italic;
  font-weight: 400;
}
.suite p {
  color: var(--ink-soft);
  font-size: .95rem;
  margin: 0;
}

/* ---------- Living ------------------------------------------------------- */
.living {
  padding: var(--section-y) var(--gutter);
}
.living-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: var(--container);
  margin: 0 auto;
}
.living__card {
  display: flex;
  flex-direction: column;
}
.living__card--tall {
  grid-row: span 2;
}
.living__card figure {
  aspect-ratio: 4 / 3;
  margin-bottom: 1.25rem;
  border-radius: 2px;
}
.living__card--tall figure { aspect-ratio: 3 / 4; }
.living__copy h3 {
  font-style: italic;
  margin: 0 0 .5rem;
}
.living__copy p {
  color: var(--ink-soft);
  font-size: .95rem;
  max-width: 36ch;
  margin: 0;
}

.pullquote {
  max-width: 50rem;
  margin: clamp(4rem, 8vw, 7rem) auto 0;
  text-align: center;
  padding: 0 var(--gutter);
}
.pullquote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.pullquote p::before { content: "“"; font-size: 1.2em; color: var(--ochre); margin-right: .1em; }
.pullquote p::after  { content: "”"; font-size: 1.2em; color: var(--ochre); margin-left: .05em; }

/* ---------- Surroundings ------------------------------------------------- */
.surroundings {
  padding: var(--section-y) var(--gutter);
  background: var(--paper);
}
.distances {
  max-width: 56rem;
  margin: 0 auto;
  border-top: 1px solid rgba(42,36,29,.12);
}
.distances li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(42,36,29,.12);
}
.distances__place {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--ink);
}
.distances__time {
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---------- Home FAQ ----------------------------------------------------- */
.home-faq {
  padding: var(--section-y) var(--gutter);
  background: var(--paper);
  border-top: 1px solid rgba(42, 36, 29, .06);
}
.home-faq__inner {
  max-width: 52rem;
  margin: 0 auto;
}
.home-faq__header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.home-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.home-faq__item {
  border-top: 1px solid rgba(42, 36, 29, .14);
  padding: 1.5rem 0;
}
.home-faq__item:last-child {
  border-bottom: 1px solid rgba(42, 36, 29, .14);
}
.home-faq__item details {
  width: 100%;
}
.home-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  color: var(--ink);
  padding: .25rem 0;
  min-height: 44px;
  transition: color .25s var(--ease);
}
.home-faq__item summary::-webkit-details-marker { display: none; }
.home-faq__item summary::after {
  content: "+";
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--ochre);
  line-height: 1;
  flex-shrink: 0;
  transition: transform .25s var(--ease);
}
.home-faq__item details[open] summary::after {
  content: "−";
}
.home-faq__item summary:hover,
.home-faq__item summary:focus-visible {
  color: var(--ochre);
  outline: none;
}
.home-faq__answer {
  margin: 1rem 0 .5rem;
  color: var(--ink-soft);
  font-size: clamp(.98rem, 1.6vw, 1.05rem);
  line-height: 1.75;
  max-width: 44rem;
}
.home-faq__answer a {
  color: var(--olive);
  border-bottom: 1px solid rgba(107, 114, 80, .35);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.home-faq__answer a:hover,
.home-faq__answer a:focus-visible {
  color: var(--ochre);
  border-bottom-color: var(--ochre);
}

@media (max-width: 540px) {
  .home-faq__item summary { font-size: 1.05rem; gap: 1rem; }
  .home-faq__item { padding: 1.25rem 0; }
}

/* ---------- Reservations ------------------------------------------------- */
.reservations {
  padding: var(--section-y) var(--gutter);
  background: var(--ink);
  color: var(--lime);
  text-align: center;
  position: relative;
  isolation: isolate;
}
.reservations::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(at 80% 0%, rgba(216,165,90,.18), transparent 50%),
    radial-gradient(at 0% 100%, rgba(107,114,80,.22), transparent 60%);
  pointer-events: none;
}
.reservations__inner {
  max-width: 50rem;
  margin: 0 auto;
}
.reservations h2 {
  color: var(--lime);
  font-weight: 300;
  margin-bottom: 1.5rem;
}
.reservations .lede {
  color: rgba(244, 237, 225, .78);
  margin: 0 auto 3rem;
}
.mail {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--sun);
  border-bottom: 1px solid rgba(216,165,90,.5);
  padding-bottom: .25rem;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.mail:hover, .mail:focus-visible {
  color: var(--lime);
  border-bottom-color: var(--lime);
}
.reservations__note {
  margin: 3rem 0 0;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244, 237, 225, .55);
  line-height: 2;
}

/* ---------- Reservations form ------------------------------------------- */
.reservations__form {
  text-align: left;
  margin: 2.5rem 0 0;
}
.reservations__form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.reservations__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.25rem;
}
.field { margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244, 237, 225, .72);
}
.field__opt {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  color: rgba(244, 237, 225, .45);
  margin-left: .35rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--lime);
  background: rgba(244, 237, 225, .06);
  border: 1px solid rgba(244, 237, 225, .18);
  border-radius: 2px;
  padding: .75rem .9rem;
  transition: border-color .2s var(--ease), background .2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(244, 237, 225, .35);
  font-style: italic;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sun);
  background: rgba(244, 237, 225, .1);
}
.field input:invalid:not(:placeholder-shown),
.field select:invalid:not(:focus) {
  border-color: rgba(216, 165, 90, .35);
}
.field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.85) sepia(.4) saturate(2) hue-rotate(-10deg);
  cursor: pointer;
}
.field select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(244, 237, 225, .55) 50%),
    linear-gradient(135deg, rgba(244, 237, 225, .55) 50%, transparent 50%);
  background-position:
    calc(100% - 1.1rem) 1.15rem,
    calc(100% - .75rem) 1.15rem;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
.field select option { color: var(--ink); background: var(--lime); }
.field textarea { resize: vertical; min-height: 6rem; line-height: 1.55; }

.reservations__form-actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.reservations__submit {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sun);
  padding: 1rem 2.4rem;
  border-radius: 2px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.reservations__submit:hover,
.reservations__submit:focus-visible {
  background: var(--lime);
  color: var(--ink);
  outline: none;
}
.reservations__submit:active { transform: translateY(1px); }
.reservations__alt {
  margin: 0;
  font-size: .82rem;
  color: rgba(244, 237, 225, .55);
}
.reservations__alt a {
  color: var(--sun);
  border-bottom: 1px solid rgba(216, 165, 90, .35);
}
.reservations__alt a:hover,
.reservations__alt a:focus-visible {
  color: var(--lime);
  border-bottom-color: var(--lime);
}

@media (max-width: 640px) {
  .reservations__form-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .reservations__submit { width: 100%; padding: 1rem 1.5rem; }
}

/* ---------- Footer ------------------------------------------------------- */
.site-footer {
  padding: 4rem var(--gutter) 3rem;
  background: var(--lime);
  border-top: 1px solid rgba(42,36,29,.12);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  max-width: var(--container);
  margin: 0 auto;
  align-items: start;
}
.site-footer__addr {
  font-size: .85rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
}
.site-footer__social {
  margin: 1rem 0 0;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.site-footer__social a {
  border-bottom: 1px solid rgba(42,36,29,.18);
  padding-bottom: .15rem;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.site-footer__social a:hover, .site-footer__social a:focus-visible {
  color: var(--ochre);
  border-bottom-color: currentColor;
}
.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-footer__meta {
  font-size: .8rem;
  color: var(--ink-soft);
  text-align: right;
  line-height: 1.6;
}
.site-footer__meta p { margin: 0; }

/* ---------- Image placeholders ------------------------------------------ */
/* These are pure-CSS placeholders that look intentional (warm gradients +
   subtle grain). When real photos arrive, set `background-image: url(...)`
   on the matching class. Each section gets its own mood. */

.image-placeholder {
  position: relative;
  background-color: var(--stone);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}
.image-placeholder::after {
  /* Subtle film-grain texture for warmth */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.06) 0, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,.05) 0, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  mix-blend-mode: overlay;
  opacity: .8;
  pointer-events: none;
}

.image-placeholder--house {
  background-image:
    radial-gradient(at 30% 25%, rgba(216,165,90,.55), transparent 55%),
    radial-gradient(at 75% 80%, rgba(107,114,80,.45), transparent 55%),
    linear-gradient(160deg, #d8c2a0 0%, #8a7250 100%);
}
.image-placeholder--land {
  background-image:
    radial-gradient(at 30% 30%, rgba(184,137,90,.5), transparent 55%),
    radial-gradient(at 80% 70%, rgba(60,82,55,.55), transparent 55%),
    linear-gradient(180deg, #9caa7d 0%, #4d5b3d 100%);
}
.image-placeholder--suite-1 {
  background-image:
    radial-gradient(at 30% 30%, rgba(216,165,90,.5), transparent 55%),
    linear-gradient(160deg, #c8b89a 0%, #7a6649 100%);
}
.image-placeholder--suite-2 {
  background-image:
    radial-gradient(at 70% 30%, rgba(216,165,90,.55), transparent 55%),
    linear-gradient(160deg, #b8a486 0%, #6b7250 100%);
}
.image-placeholder--suite-3 {
  background-image:
    radial-gradient(at 30% 70%, rgba(184,137,90,.6), transparent 55%),
    linear-gradient(160deg, #a78d6a 0%, #4f3f2c 100%);
}
.image-placeholder--suite-4 {
  background-image:
    radial-gradient(at 70% 60%, rgba(107,114,80,.5), transparent 55%),
    linear-gradient(160deg, #c2b596 0%, #7a8260 100%);
}
.image-placeholder--suite-5 {
  background-image:
    radial-gradient(at 50% 30%, rgba(216,165,90,.55), transparent 55%),
    linear-gradient(160deg, #d8c4a0 0%, #8a734e 100%);
}
.image-placeholder--pool {
  background-image:
    radial-gradient(at 30% 30%, rgba(155,180,180,.45), transparent 55%),
    radial-gradient(at 70% 80%, rgba(60,82,90,.55), transparent 55%),
    linear-gradient(180deg, #9bb1ad 0%, #34514f 100%);
}
.image-placeholder--kitchen {
  background-image:
    radial-gradient(at 30% 30%, rgba(216,165,90,.55), transparent 55%),
    linear-gradient(160deg, #c4a47a 0%, #5b3f24 100%);
}
.image-placeholder--terrace {
  background-image:
    radial-gradient(at 30% 70%, rgba(216,165,90,.45), transparent 55%),
    linear-gradient(160deg, #b9a07c 0%, #5e5238 100%);
}

/* ---------- Reveal animation -------------------------------------------- */
/* Default: visible — so the page works even if JS fails to execute.
   The .js class is set by an inline script at the top of <head>; only then
   do reveal elements start hidden, ready for the IntersectionObserver to
   fade them in. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 900px) {
  /* The desktop .nav gap of 2 rem is too generous on a 375 px phone — with
     brand + lang-switch + toggle, items spill past the right gutter. */
  .nav { gap: 1rem; }
  .nav-toggle {
    display: block;
    /* Without these two declarations, the flex header squeezes the toggle to
       ~22 px (half its 44 px target) and reorders it between .brand and
       .lang-switch — the close X ends up tiny and stranded mid-row. Pin it
       to the far right and keep its full hit area. */
    order: 4;
    flex-shrink: 0;
  }
  .nav-links {
    position: fixed;
    inset: 0;
    /* Sit above the cookie banner (z-index:60) and the fixed header. */
    z-index: 70;
    background: var(--lime);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    font-size: 1rem;
    /* Allow long menus (primary + secondary) to scroll on small screens. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 5rem 1.5rem 2.5rem;
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
  }
  body[data-nav-open] .nav-links { transform: none; }
  body[data-nav-open] { overflow: hidden; }
  /* Hide the cookie banner while the overlay menu is open — keeps the
     reading surface clear and avoids it stacking above the menu. */
  body[data-nav-open] .cookie-banner { display: none; }
  /* The overlay .nav-links sits at z-index 70 and is a *descendant* of
     .site-header, so it shares the header's stacking context. The
     .nav-toggle (the close X) lives in that same context with default
     z-index, which means the menu covers the only way out and the user
     is trapped. Promote the toggle above the overlay (still in the same
     context) and force ink colour for contrast on the lime backdrop —
     !important is needed to beat the landing/hero override which has
     higher specificity (body:has() + :not()). */
  body[data-nav-open] .nav-toggle {
    z-index: 80;
    color: var(--ink) !important;
  }
  /* On subpages (and landing once scrolled) the .site-header applies
     backdrop-filter for its frosted-glass chrome. backdrop-filter creates
     a containing block for position:fixed descendants — which means the
     .nav-links overlay's `inset: 0` is clipped to the 120 px header
     instead of the viewport, leaving the rest of the page visible behind
     the menu. Disable the filter while the menu is open; the opaque lime
     overlay covers the header anyway, so no visual cost. */
  body[data-nav-open] .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-links a {
    color: var(--ink) !important;
    /* WCAG / AGENTS.md — guarantee a 44×44 minimum touch target. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .5rem 1rem;
  }
  .nav-links__cta a {
    background: var(--ink) !important;
    color: var(--lime) !important;
    border: 0 !important;
  }
  /* Secondary group — subpages only shown on mobile, separated by a hairline. */
  .nav-links__more-wrap {
    display: block;
    width: min(28rem, 100%);
    margin-top: .5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(42,36,29,.18);
  }
  .nav-links__more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-links__more li { width: 100%; text-align: center; }
  .nav-links__more a {
    font-size: .78rem;
    letter-spacing: .18em;
    opacity: .85;
  }

  .split { grid-template-columns: 1fr; }
  .split--reverse .split__image { order: 0; }

  .living-grid { grid-template-columns: 1fr; }
  .living__card--tall { grid-row: auto; }
  .living__card--tall figure { aspect-ratio: 4 / 3; }

  .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .site-footer__meta { text-align: left; }
}

@media (max-width: 540px) {
  .hero-content { padding: 4rem 0; }
  .kv li { flex-direction: column; gap: .25rem; align-items: flex-start; }
  .kv li span:last-child { text-align: left; }
  .distances li { flex-direction: column; gap: .25rem; align-items: flex-start; }
}

/* ==========================================================================
   Landing page — additions for "Opening June 2026"
   ========================================================================== */

/* ---------- Opening pill (header) --------------------------------------- */
.opening-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lime);
  padding: .4rem .85rem .35rem;
  border: 1px solid rgba(244, 237, 225, .4);
  border-radius: 999px;
  background: rgba(244, 237, 225, .08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.opening-pill__dot {
  width: 7px; height: 7px;
  background: var(--sun);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(216, 165, 90, .55);
  animation: pulse-dot 2.4s var(--ease) infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(216,165,90,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(216,165,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(216,165,90,0); }
}
.site-header.is-scrolled .opening-pill {
  color: var(--ink);
  border-color: rgba(42,36,29,.18);
  background: rgba(42,36,29,.04);
}

/* Landing nav: keep the lighter set of links centred */
.nav-links--landing { gap: 1.6rem; }

/* Landing-nav desktop guard (≥901px): the landing nav holds six primary
   links + the CTA pill + the lang switch, and the .nav container caps at
   1200px — leaving no room for the decorative "Opening · June 2026" pill,
   whose presence pushed the dark Reservation Request pill on top of the
   EN · IT · FR switcher (worse on FR/IT where the CTA label is longer).
   The opening date is still carried by the hero copy ("Welcoming its
   first guests this June") and the manifesto, so dropping the chrome
   pill on landing costs no signal. Subpages don't render the pill at all.
   The 901–1280 sub-range additionally tightens gaps and CTA padding so
   the FR/IT label "Demande de Réservation" / "Richiesta di Prenotazione"
   still fits on a single line. */
@media (min-width: 901px) {
  .site-header:has(.nav-links--landing) .opening-pill { display: none; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  .nav { gap: 1rem; }
  .nav-links--landing { gap: 1rem; }
  .nav-links__cta a { padding: .5rem .9rem; letter-spacing: .08em; }
}
/* Narrowest-desktop guard (901–1100px): a tight band where the full
   landing nav still has six links + the dark CTA pill + the lang switch.
   We tighten font-size, letter-spacing, CTA padding so the row fits the
   viewport without the CTA pill spilling past the right edge. The mobile
   overlay menu takes over below 901px, so this guard is the last stop. */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav { gap: .6rem; }
  .nav-links { font-size: .72rem; letter-spacing: .1em; }
  .nav-links--landing { gap: .7rem; }
  .nav-links__cta a { padding: .4rem .65rem; font-size: .68rem; letter-spacing: .04em; }
}

/* ---------- Hero (landing variant) -------------------------------------- */
.hero--landing { min-height: 100svh; }

.hero-image--landing {
  background:
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.55) 100%),
    image-set(
      url("../assets/images/hero/casa-andrea-luxury-villa-puglia-pool-view.avif") type("image/avif"),
      url("../assets/images/hero/casa-andrea-luxury-villa-puglia-pool-view.webp") type("image/webp"),
      url("../assets/images/hero/casa-andrea-luxury-villa-puglia-pool-view.jpg")
    ) center 60% / cover no-repeat,
    radial-gradient(at 20% 25%, rgba(216,165,90,.55), transparent 55%),
    linear-gradient(150deg, #6e5736 0%, #2a241d 60%, #1d1813 100%);
  background-color: #2a241d;
}
/* Fallback for browsers that don't support image-set() */
@supports not (background-image: image-set(url("x.jpg") 1x)) {
  .hero-image--landing {
    background:
      linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.55) 100%),
      url("../assets/images/hero/casa-andrea-luxury-villa-puglia-pool-view.jpg") center 60% / cover no-repeat,
      radial-gradient(at 20% 25%, rgba(216,165,90,.55), transparent 55%),
      linear-gradient(150deg, #6e5736 0%, #2a241d 60%, #1d1813 100%);
  }
}

.hero-meta { margin-top: 2.5rem; }
.hero-cta {
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lime);
  padding: .85rem 1.6rem;
  border: 1px solid rgba(244, 237, 225, .65);
  border-radius: 999px;
  background: rgba(0, 0, 0, .30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.hero-cta:hover, .hero-cta:focus-visible {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
}

/* ---------- Journey / timeline ------------------------------------------ */
.journey {
  padding: var(--section-y) var(--gutter);
  background: var(--paper);
  position: relative;
}

/* On a subpage (/the-story/) the header already provides the spacing above the
   timeline, so drop the section's top padding to avoid a large empty gap before
   the first entry. */
.subpage .journey { padding-top: 0; }

.timeline {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  padding: 0;
}

/* Landing story timeline: a wider canvas so the photographs read ~15% larger.
   The copy stays capped at 36rem (see .timeline__copy), so only the images
   grow into the extra width. Scoped to .journey so the Experiences day-shape
   timeline is untouched. */
.journey .timeline { max-width: 1350px; }

/* Vertical thread */
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(42,36,29,0) 0,
    rgba(42,36,29,.18) 8%,
    rgba(42,36,29,.18) 92%,
    rgba(42,36,29,0) 100%);
  transform: translateX(-.5px);
  pointer-events: none;
}

.timeline__step {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.75rem) 0;
  position: relative;
}

.timeline__step .timeline__media { grid-column: 1; }
.timeline__step .timeline__date  { grid-column: 2; }
.timeline__step .timeline__copy  { grid-column: 3; }

.timeline__step--reverse .timeline__media { grid-column: 3; grid-row: 1; }
.timeline__step--reverse .timeline__copy  { grid-column: 1; grid-row: 1; text-align: right; }

.timeline__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  z-index: 2;
  padding: .6rem 0;
  line-height: 1.1;
  margin: 0;
}
.timeline__date span:first-child {
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-style: normal;
  font-family: var(--sans);
  color: var(--ochre);
  margin-bottom: .35rem;
}
.timeline__date span:last-child {
  font-size: 1.55rem;
  color: var(--ink);
}

.timeline__date--now {
  color: var(--lime);
  background: var(--ink);
  border-radius: 999px;
  padding: 1.1rem .85rem;
  box-shadow: 0 6px 24px rgba(42,36,29,.18);
}
.timeline__date--now span:first-child { color: var(--sun); }
.timeline__date--now span:last-child { color: var(--lime); }

.timeline__media {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  background: var(--stone);
  aspect-ratio: 4 / 3;
}
.timeline__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1.6s var(--ease);
  image-orientation: from-image;
}
.timeline__step:hover .timeline__media img { transform: scale(1.025); }

.timeline__copy {
  max-width: 36rem;
}
.timeline__copy h3 {
  font-style: italic;
  font-weight: 400;
  margin: 0 0 .75rem;
}
.timeline__copy p {
  color: var(--ink-soft);
  margin: 0;
}

.timeline__step--final {
  grid-template-columns: 1fr 90px 1fr;
}
.timeline__step--final .timeline__copy--final {
  grid-column: 1 / span 3;
  text-align: center;
  max-width: 38rem;
  margin: 1.5rem auto 0;
}
.timeline__step--final .timeline__date {
  grid-column: 2;
  margin: 0 auto;
}
.timeline__step--final .timeline__copy--final h3 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom: 1rem;
}
.timeline__step--final .timeline__copy--final p {
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
}

.link-arrow {
  display: inline-block;
  margin-top: .5rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ochre);
  border-bottom: 1px solid currentColor;
  padding-bottom: .25rem;
}
.link-arrow:hover, .link-arrow:focus-visible { color: var(--ink); }

.journey__foot {
  max-width: 36rem;
  margin: 4rem auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: .98rem;
}

/* ---------- The House (architectural breakdown) ------------------------- */
.house {
  padding: var(--section-y) var(--gutter);
  background: var(--paper);
}
.house__inner { max-width: var(--container); margin: 0 auto; }
.house__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.house__volume figure {
  margin: 0 0 1.5rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--stone);
}
.house__volume figure img,
.house__volume figure picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.house__volume figure picture img { object-fit: cover; }
.house__volume__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: .9rem;
  color: var(--ochre);
  margin: 0 0 .5rem;
  letter-spacing: .05em;
}
.house__volume h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  line-height: 1.15;
  margin: 0 0 .9rem;
}
.house__volume p {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.house__rooms {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
}
.house__rooms li { padding: .35rem 0; border-bottom: 1px solid rgba(42,36,29,.08); }
.house__rooms li:last-child { border-bottom: none; }

/* ---------- Home "doorways" — the .house grid reused as links to deep pages -- */
a.house__volume {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.house__volume figure img { transition: transform 1.4s var(--ease); }
a.house__volume:hover figure img,
a.house__volume:focus-visible figure img { transform: scale(1.04); }
a.house__volume:hover h3 { color: var(--ochre); }
a.house__volume h3 { transition: color .3s var(--ease); }
a.house__volume__more {
  display: inline-block;
  margin-top: .9rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ochre);
}
a.house__volume:focus-visible { outline: 2px solid var(--ochre); outline-offset: 5px; }

/* The dedicated Story page reuses the journey timeline inside a .subpage shell;
   re-enable its centre thread (it is suppressed for the Experiences timeline). */
.subpage .journey .timeline::before { display: block; }

@media (max-width: 900px) {
  .house__grid { grid-template-columns: 1fr; gap: 3rem; }
  .house__volume figure { aspect-ratio: 16 / 10; }
}

/* ---------- Place section ----------------------------------------------- */
.place {
  /* Top offset from `.subpage main` only, so the title aligns with /the-story/. */
  padding: 0 var(--gutter) var(--section-y);
}
.place__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: var(--container);
  margin: 0 auto;
  align-items: start;
}

/* The Place — legibility. The intro keeps the elegant italic lede but in the
   darker --ink for contrast; the two descriptive paragraphs that follow read
   as proper body prose: roman, normal weight, taller leading, wider measure. */
.place .section-header .lede { color: var(--ink); }
.place .section-header .lede ~ .lede {
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.08rem, 1.3vw, 1.22rem);
  line-height: 1.75;
  max-width: 58ch;
  text-align: left;          /* body prose reads left-aligned, not centred */
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Responsive (landing) ---------------------------------------- */
@media (max-width: 900px) {
  .opening-pill {
    margin-left: auto;
    order: 3;
    font-size: .62rem;
    padding: .35rem .7rem .3rem;
  }

  .timeline::before { left: 28px; }
  .timeline__step,
  .timeline__step--reverse,
  .timeline__step--final {
    grid-template-columns: 56px 1fr;
    gap: 1.25rem;
    padding: 1.75rem 0;
  }
  .timeline__step .timeline__media,
  .timeline__step--reverse .timeline__media { grid-column: 2; grid-row: 2; aspect-ratio: 4/3; margin-top: 1rem; }
  .timeline__step .timeline__date,
  .timeline__step--reverse .timeline__date,
  .timeline__step--final .timeline__date { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding-top: .25rem; }
  .timeline__step .timeline__copy,
  .timeline__step--reverse .timeline__copy { grid-column: 2; grid-row: 1; text-align: left; }
  .timeline__step--final .timeline__copy--final {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    margin: 0;
  }

  .place__grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .opening-pill { display: none; }
  .hero-meta { margin-top: 1.5rem; }
  .hero-cta { padding: .7rem 1.2rem; font-size: .7rem; }
}

/* ---------- Language switcher (EN / IT / FR) ----------------------------
   On desktop the switcher sits to the LEFT of the auto-margin space —
   between the brand and the nav links — so the dark Reservation Request
   pill on the right of .nav-links can never land on top of it. (Below
   900px the mobile overlay menu takes over and the switcher is ordered
   inside that menu by its own media-query block.) */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-left: .5rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: color .3s var(--ease);
}
@media (min-width: 901px) {
  /* Re-order on desktop only: brand → lang-switch → (auto margin) → nav-links.
     The HTML order (brand, pill, nav-links, lang-switch) is kept untouched
     for mobile and for non-JS readers — flex `order` is purely visual. */
  .nav .nav-links { order: 1; }
  .nav .lang-switch { order: 0; margin-left: 0; }
}
.lang-switch a {
  color: inherit;
  opacity: .55;
  padding: .25rem 0;
  border-bottom: 1px solid transparent;
  transition: opacity .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.lang-switch a:hover, .lang-switch a:focus-visible {
  opacity: 1;
  color: var(--ochre);
  border-bottom-color: currentColor;
}
.lang-switch__current {
  color: var(--ochre);
  font-weight: 500;
}
.lang-switch__sep {
  opacity: .35;
  user-select: none;
}

/* When sitting on the transparent hero of a landing page, switch to lime
   tones. Scoped to body:has(.hero--landing) — on subpages the header
   wears its cream chrome from page load and the default ink tones above
   already give the right contrast. */
body:has(.hero--landing) .site-header:not(.is-scrolled) .lang-switch {
  color: var(--lime);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
body:has(.hero--landing) .site-header:not(.is-scrolled) .lang-switch a {
  color: var(--lime);
  opacity: .9;
}
body:has(.hero--landing) .site-header:not(.is-scrolled) .lang-switch a:hover,
body:has(.hero--landing) .site-header:not(.is-scrolled) .lang-switch a:focus-visible {
  color: var(--sun);
  opacity: 1;
}
body:has(.hero--landing) .site-header:not(.is-scrolled) .lang-switch__current {
  color: var(--sun);
  font-weight: 500;
}
body:has(.hero--landing) .site-header:not(.is-scrolled) .lang-switch__sep { opacity: .6; }

@media (max-width: 900px) {
  .lang-switch {
    order: 2;
    margin-left: 0;
    margin-right: .25rem;
    font-size: .66rem;
    /* Pad up the row so the EN/IT/FR links feel pressable on a phone. */
    gap: .75rem;
  }
  .lang-switch a, .lang-switch__current {
    padding: .6rem .15rem;
  }
}

/* ==========================================================================
   Blog / Journal
   ========================================================================== */

.blog-page main { padding-top: 7rem; }

.blog-header {
  max-width: 60rem;
  margin: 0 auto;
  /* Top offset from `.blog-page main { padding-top: 7rem }` only, so the title
     lands at the same height as /the-story/ (the reference). */
  padding: 0 var(--gutter) clamp(2rem, 5vw, 4rem);
  text-align: center;
}
.blog-header h1 {
  font-size: clamp(2.8rem, 7vw, 5rem);
  font-weight: 400;
  margin: 0 0 1rem;
}
.blog-header .lede { margin: 0 auto; }

.post-list {
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--section-y);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 5rem);
}
.post-card {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.post-card figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--stone);
}
.post-card figure img,
.post-card figure picture { width: 100%; height: 100%; }
.post-card figure picture img { object-fit: cover; display: block; }
.post-card__meta {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 1rem;
}
.post-card h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}
.post-card h2 a { color: inherit; transition: color .25s var(--ease); }
.post-card h2 a:hover { color: var(--ochre); }
.post-card p {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .post-card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Single post layout */
.post {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) var(--section-y);
}
.post__header {
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.post__meta {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0 0 1.5rem;
}
.post__header h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 400;
  margin: 0 0 1.5rem;
  line-height: 1.1;
}
.post__header .lede { margin: 0 auto; max-width: 36rem; }

.post__hero {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 2px;
}
.post__hero img,
.post__hero picture { width: 100%; height: 100%; }
.post__hero picture img { object-fit: cover; display: block; }

.post__body {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.75;
  color: var(--ink);
}
.post__body p { margin: 0 0 1.5rem; }
.post__body p:first-child::first-letter {
  font-size: 3.4rem;
  float: left;
  line-height: 1;
  margin: .15em .15em 0 0;
  color: var(--ochre);
}
.post__body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 1rem;
  line-height: 1.2;
}
.post__body em { font-style: italic; color: var(--ink); }
.post__body blockquote {
  margin: 2.5rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--ochre);
  font-style: italic;
  color: var(--ink-soft);
}
.post__body a {
  color: var(--ochre);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.post__body a:hover { color: var(--ink); }

.post__footer {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(42,36,29,.12);
  text-align: center;
}

/* ==========================================================================
   Sub-pages (Experiences, Olive Grove, Surroundings, Sustainability)
   Shared editorial layout — used by .subpage__article wrapper.
   ========================================================================== */

.subpage main { padding-top: 7rem; }

.subpage__article {
  max-width: 60rem;
  margin: 0 auto;
  /* Top offset comes solely from `.subpage main { padding-top: 7rem }` so every
     subpage title lands at the same height as /the-story/ (the reference). */
  padding: 0 var(--gutter) var(--section-y);
}
.subpage__header {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.subpage__header h1.display { margin-top: .5rem; margin-bottom: 1.5rem; }
.subpage__header .lede { margin: 0 auto; }

/* Tight variant — get to the photos fast (e.g. /the-interior/) */
.subpage__header--tight {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.subpage__header--tight h1.display { margin-bottom: .75rem; }

.subpage__experiences {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin: clamp(2rem, 5vw, 4rem) 0;
}

.experience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
.experience figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--stone);
}
.experience figure picture,
.experience figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.experience__copy h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  margin: 0 0 .9rem;
}
.experience__copy p {
  color: var(--ink-soft);
  margin: 0;
}
.experience__copy em { font-style: italic; }
/* Two-up paragraph rows (no image) — two .experience__copy columns inside .experience */
.experience > .experience__copy + .experience__copy {
  border-left: 1px solid rgba(42,36,29,.08);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Gallery treatment — same 4:3 crop as the rest of the site, but larger
   photos, with click-to-zoom. Scoped to .subpage--gallery (e.g. /the-interior/);
   the base .experience figure rule (aspect-ratio 4/3, object-fit cover) stands. */
/* Widen the gallery container ~30% (60rem → 78rem) so the photos grow while
   the 4:3 proportions and the image/text balance stay the same. The header,
   facts and CTA keep their own narrower centred max-widths. */
.subpage--gallery .subpage__article { max-width: 78rem; }
.subpage--gallery .subpage__header,
.subpage--gallery .subpage__cta { max-width: 44rem; }
.subpage--gallery .experience {
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(2rem, 4vw, 3.25rem);
}
.subpage--gallery .experience figure {
  position: relative;
  cursor: zoom-in;
}
.subpage--gallery .experience figure img { transition: filter .3s ease; }
.subpage--gallery .experience figure:hover img,
.subpage--gallery .experience figure:focus-within img { filter: brightness(.94); }
.subpage--gallery .experience figure::after {
  content: "\2922"; /* ⤢ expand */
  position: absolute; top: .7rem; right: .7rem;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: rgba(42,36,29,.55); color: #fff;
  border-radius: 50%; font-size: 1rem;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.subpage--gallery .experience figure:hover::after,
.subpage--gallery .experience figure:focus-within::after { opacity: 1; }
@media (max-width: 720px) {
  /* Photo-forward mobile. People come to scroll and tap the photos, not to read
     a paragraph per room — so on phones the images lead (full width, uncropped,
     tap to zoom), a short title follows, and the prose drops to a secondary size.
     The SAME order in every block (photos → title → text), so a photo always
     reads against its own heading instead of the previous section's. */
  .subpage--gallery .experience,
  .subpage--gallery .experience--suites {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /* Suites-style blocks (#dining, #master-bedroom, #suites) put copy first in the
     DOM for desktop — flip it on mobile so the photos sit on top like everywhere else. */
  .subpage--gallery .experience--suites .suite-triptych { order: 1; }
  .subpage--gallery .experience--suites .experience__copy { order: 2; }
  /* Show the whole photo instead of the 4:3 crop — portrait interior shots then
     fill the screen and the gallery becomes a vertical scroll of real images. */
  .subpage--gallery .experience figure { aspect-ratio: auto; overflow: visible; background: none; }
  .subpage--gallery .experience figure picture,
  .subpage--gallery .experience figure img { height: auto; }
  /* Prose steps back so the images carry the page. */
  .subpage--gallery .experience__copy h2 { font-size: 1.28rem; margin-bottom: .35rem; }
  .subpage--gallery .experience__copy p { font-size: .9rem; line-height: 1.55; }
  .subpage--gallery .experience__copy .eyebrow { margin-bottom: .3rem; }
}
/* Suites shown as a set ("three of the same"): copy on top, a row of photos
   below. Each figure inherits the gallery 4:3 crop + click-to-zoom. */
.subpage--gallery .experience--suites { grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2rem); }
.subpage--gallery .suite-triptych {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(.6rem, 1.5vw, 1rem);
}

/* Lightbox overlay (built by js/main.js, section 8) */
.lightbox {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(20,16,12,.92);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 12px 48px rgba(0,0,0,.45);
}
.lightbox__close {
  position: absolute; top: clamp(.5rem, 2vw, 1rem); right: clamp(.75rem, 2vw, 1.25rem);
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  color: #fff; font-size: 1.75rem; line-height: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
}

.subpage__cta {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(42,36,29,.12);
  text-align: center;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}
.subpage__cta .lede { margin: 0 auto 2rem; }
.subpage__cta .hero-cta {
  color: var(--ink);
  border-color: var(--ink);
  background: transparent;
}
.subpage__cta .hero-cta:hover { background: var(--ink); color: var(--lime); }

/* Facts list used on Surroundings, Olive Grove */
.subpage__facts {
  margin: clamp(2rem, 4vw, 3rem) auto;
  max-width: 44rem;
}

/* Manifesto variant — used on Sustainability. Drops the block-grid pattern
   entirely in favour of a narrow, flowing read. Visually distinct from
   the other sub-pages so the visitor doesn't feel they're re-reading the
   same template. */
.subpage--manifesto .subpage__article { max-width: 44rem; }
.manifesto-prose {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--ink);
  max-width: 38rem;
  margin: 0 auto;
}
.manifesto-prose h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.2;
  margin: clamp(2.5rem, 5vw, 4rem) 0 .9rem;
  color: var(--ink);
}
.manifesto-prose h2:first-child { margin-top: 0; }
.manifesto-prose p {
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.manifesto-prose em { font-style: italic; color: var(--ink); }
.manifesto-prose a {
  color: var(--ochre);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.manifesto-prose a:hover { color: var(--ink); }

/* Sustainability — distinctive devices layered into the manifesto:
   .chose-refused (two-column ledger), .metrics (honest numbers),
   .guest-agency (invitation paragraph), .closing-line (screenshot line).
   Mobile-first: the ledger stacks; on >=620px it pairs side-by-side. */
.chose-refused {
  margin: clamp(2.5rem, 5vw, 4rem) auto;
  max-width: 42rem;
  border-top: 1px solid rgba(42,36,29,.12);
}
.chose-refused__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(42,36,29,.12);
}
.chose-refused__cell {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.chose-refused__label {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-right: .6rem;
  min-width: 4.5rem;
}
.chose-refused__cell--chose .chose-refused__label { color: var(--olive); }
.chose-refused__cell--refused .chose-refused__label { color: var(--ochre); }
.chose-refused__cell em { font-style: italic; color: var(--ink); }
@media (min-width: 620px) {
  .chose-refused__row {
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
  }
  .chose-refused__cell--refused {
    border-left: 1px solid rgba(42,36,29,.08);
    padding-left: 2rem;
  }
}
.metrics {
  list-style: none;
  padding: 0;
  margin: clamp(2.5rem, 5vw, 4rem) auto;
  max-width: 38rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.metrics li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(42,36,29,.08);
}
.metrics__figure {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.metrics__label {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  align-self: center;
}
.metrics__note {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-weight: 300;
  font-size: .78rem;
  font-style: italic;
  color: var(--olive);
  margin: .25rem 0 0;
  letter-spacing: .04em;
}
.guest-agency {
  margin: clamp(2.5rem, 5vw, 4rem) auto;
  max-width: 38rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: rgba(226,214,191,.32);
  border-radius: 2px;
}
.guest-agency h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  line-height: 1.2;
  margin: 0 0 .9rem;
  color: var(--ink);
}
.guest-agency p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.guest-agency p:last-child { margin-bottom: 0; }
.closing-line {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.45;
  color: var(--ink);
  text-align: center;
  max-width: 36rem;
  margin: clamp(3rem, 6vw, 5rem) auto clamp(1rem, 2vw, 2rem);
}
.manifesto-figure {
  margin: clamp(2.5rem, 5vw, 4rem) auto;
  max-width: 38rem;
}
.manifesto-figure picture,
.manifesto-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
.manifesto-figure figcaption {
  font-family: var(--sans);
  font-weight: 300;
  font-style: italic;
  font-size: .82rem;
  color: var(--olive);
  margin-top: .6rem;
  text-align: center;
}

/* Directory variant — used on Surroundings. Locations grouped by type,
   each with name + distance + one short editorial note. Different
   reading rhythm from .experience (blocks) and .manifesto-prose (flow). */
.subpage--directory .subpage__article { max-width: 50rem; }
.places-group {
  margin: clamp(2.5rem, 5vw, 4rem) auto;
  max-width: 42rem;
}
.places-group__title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0 0 1rem;
}
.places {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(42,36,29,.12);
}
.places > li {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(42,36,29,.12);
}
.places__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  margin: 0 0 .5rem;
  flex-wrap: wrap;
}
.places__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  margin: 0;
}
.places__name em { font-style: italic; }
.places__time {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive);
  white-space: nowrap;
}
.places__note {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.65;
  max-width: 55ch;
}

/* Surroundings — opening prose above the directory of mini-fiches.
   Sets a slower reading rhythm before the compact place cards.
   Mobile-first: single column, comfortable line length. */
.surroundings-intro {
  max-width: 38rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.surroundings-intro p { margin: 0 0 1.25rem; }
.surroundings-intro p:last-child { margin-bottom: 0; }
.surroundings-intro em { font-style: italic; color: var(--ink); }

/* Inline editorial photo between sections of the Surroundings directory.
   Full-width within the article column, captioned, lazy. */
.surroundings-figure {
  margin: clamp(2.5rem, 5vw, 4rem) auto;
  max-width: 42rem;
}
.surroundings-figure picture,
.surroundings-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 2px;
  background: var(--stone);
}
.surroundings-figure figcaption {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-top: .65rem;
  font-style: italic;
}

/* "A Tuesday around Casa Andrea" — single-narrative counterpoint to the
   fragmented mini-fiches. Visually distinct: serif italic header, longer
   line height, slightly indented to read like a journal entry. */
.surroundings-day {
  margin: clamp(3rem, 6vw, 5rem) auto;
  max-width: 38rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid rgba(42,36,29,.12);
  border-bottom: 1px solid rgba(42,36,29,.12);
}
.surroundings-day__eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0 0 .75rem;
}
.surroundings-day h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.25;
  margin: 0 0 1.25rem;
  color: var(--ink);
}
.surroundings-day p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.surroundings-day p:last-child { margin-bottom: 0; }
.surroundings-day em { font-style: italic; color: var(--ink); }

/* Practical note at the foot of Surroundings — denser, plainer than .places */
.surroundings-practical {
  max-width: 38rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.surroundings-practical p { margin: 0 0 1rem; }
.surroundings-practical p:last-child { margin-bottom: 0; }
.surroundings-practical strong {
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 480px) {
  /* iPhone SE baseline — keep the mini-fiches stacked, distance pill below name */
  .places__head { gap: .35rem; }
  .places__time { align-self: flex-start; }
  .surroundings-figure { margin-left: calc(-1 * var(--gutter, 1.25rem)); margin-right: calc(-1 * var(--gutter, 1.25rem)); border-radius: 0; }
  .surroundings-figure picture,
  .surroundings-figure img { border-radius: 0; }
  .surroundings-figure figcaption { padding: 0 var(--gutter, 1.25rem); }
}

/* Narrative variant — used on Olive Grove. Single-column magazine layout :
   photos run full-width with text below, no side-by-side 2-column.
   Distinct rhythm from .experience (blocks), .manifesto-prose (flow) and
   .places (directory). */
.subpage--narrative .subpage__article { max-width: 44rem; }
.subpage--narrative .experience {
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 42rem;
  margin: 0 auto;
}
.subpage--narrative .experience figure {
  aspect-ratio: 16 / 10;
  margin-bottom: .5rem;
}
.subpage--narrative .experience > .experience__copy + .experience__copy {
  border-left: 0;
  border-top: 1px solid rgba(42,36,29,.08);
  padding-left: 0;
  padding-top: 1.5rem;
}
.subpage--narrative .experience__copy h2 {
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
}
.subpage--narrative .experience__copy p {
  font-size: 1rem;
  line-height: 1.75;
}

@media (max-width: 720px) {
  .experience { grid-template-columns: 1fr; gap: 1.25rem; }
  .experience > .experience__copy + .experience__copy {
    border-left: 0;
    border-top: 1px solid rgba(42,36,29,.08);
    padding-left: 0;
    padding-top: 1.5rem;
  }
}

/* Olive Grove — almanac / documentary blocks.
   Used only on /olive-grove/ /it/uliveto/ /fr/oliveraie/. Mobile-first.
   Distinct visual rhythm from .experience, .manifesto-prose, .places. */
.almanac {
  margin: clamp(2.5rem, 5vw, 4rem) auto;
  max-width: 42rem;
}
.almanac__eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0 0 .75rem;
}
.almanac__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  margin: 0 0 1.25rem;
}
.almanac__intro {
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.75;
}

/* Varietal factsheet — two cards, side by side on tablet+, stacked on mobile */
.varietals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 0;
}
.varietal-card {
  border-top: 2px solid var(--ochre);
  padding: 1.25rem 0 0;
}
.varietal-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  margin: 0 0 .25rem;
}
.varietal-card h3 em { font-style: italic; }
.varietal-card__sub {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 1rem;
}
.varietal-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem 1rem;
}
.varietal-card dt {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.varietal-card dd {
  margin: 0 0 .25rem;
  color: var(--ink);
  font-size: .98rem;
  line-height: 1.55;
}
@media (min-width: 640px) {
  .varietals { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .varietal-card dl { grid-template-columns: 7rem 1fr; }
  .varietal-card dt { padding-top: .15rem; }
}

/* Harvest calendar — vertical list, one phase per row, dense but airy */
.harvest-calendar {
  margin: 1.5rem 0 0;
  list-style: none;
  padding: 0;
  border-top: 1px solid rgba(42,36,29,.12);
}
.harvest-calendar > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(42,36,29,.12);
}
.harvest-calendar__when {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0;
}
.harvest-calendar__what {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
}
.harvest-calendar__what strong {
  font-weight: 500;
  color: var(--ink);
}
@media (min-width: 640px) {
  .harvest-calendar > li {
    grid-template-columns: 9rem 1fr;
    gap: 1.5rem;
    align-items: baseline;
  }
}

/* Tree-to-bottle walkthrough — numbered steps, vertical */
.walkthrough {
  margin: 1.5rem 0 0;
  list-style: none;
  padding: 0;
  counter-reset: step;
}
.walkthrough > li {
  position: relative;
  padding: .5rem 0 1.4rem 2.75rem;
  border-bottom: 1px dashed rgba(42,36,29,.15);
  counter-increment: step;
}
.walkthrough > li:last-child { border-bottom: 0; }
.walkthrough > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ochre);
}
.walkthrough h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  margin: 0 0 .35rem;
}
.walkthrough p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.7;
}

/* Takeaway — small italic envoi block */
.takeaway {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 38rem;
  border-top: 1px solid rgba(42,36,29,.12);
  padding-top: clamp(1.5rem, 3vw, 2rem);
}
.takeaway h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  margin: 0 0 .9rem;
}
.takeaway p {
  color: var(--ink-soft);
  margin: 0 0 .9rem;
  font-size: 1rem;
  line-height: 1.75;
}
.takeaway p:last-child { margin-bottom: 0; }

/* Experiences — concierge timeline (Before / On the day / After) + anecdotes + asked-often.
   Used only on /experiences/ to keep its rhythm distinct from the other sub-pages. */
.concierge-aside {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ochre);
  border-left: 2px solid var(--ochre);
  padding: .25rem 0 .25rem 1rem;
  margin: 1.5rem 0;
  font-size: .98rem;
  line-height: 1.55;
  max-width: 42rem;
}

.timeline {
  margin: clamp(2.5rem, 5vw, 4rem) auto;
  max-width: 50rem;
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
.timeline__intro {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem);
  color: var(--ink-soft);
}
.timeline__beat {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
}
.timeline__when {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0;
}
.timeline__body { margin: 0; color: var(--ink-soft); line-height: 1.7; }
/* Keep italics in the same Inter family as the surrounding body — the
   global em rule swaps to serif Cormorant, which collides with the slow,
   uniform rhythm of the day-shape timeline. */
.timeline__body em { font-style: italic; color: var(--ink); font-family: inherit; font-weight: inherit; }

/* Suppress the centred vertical "thread" of the landing journey timeline
   when .timeline is reused inside a subpage article (e.g. /experiences/).
   The class is shared but the layout is a flat 2-column grid here, so the
   vertical line crosses the body text instead of separating beats. */
.subpage .timeline::before,
.subpage__article .timeline::before { display: none; }

.asked-often {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 44rem;
}
.asked-often__title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0 0 1.5rem;
  text-align: center;
}
.qa { padding: 1.25rem 0; border-top: 1px solid rgba(42,36,29,.12); }
.qa:last-child { border-bottom: 1px solid rgba(42,36,29,.12); }
.qa__q {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.7vw, 1.25rem);
  line-height: 1.35;
  margin: 0 0 .5rem;
  color: var(--ink);
}
.qa__a { margin: 0; color: var(--ink-soft); line-height: 1.7; }

@media (max-width: 720px) {
  .timeline__beat { grid-template-columns: 1fr; gap: .5rem; }
  .timeline__when { margin-bottom: .25rem; }
}

/* ==========================================================================
   Legal pages (Privacy + Legal Notice / Mentions / Note)
   ========================================================================== */

.legal-page main { padding-top: 7rem; }

.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) var(--section-y);
}
.legal__header {
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.legal__header h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 400;
  margin: .5rem 0 1.5rem;
  line-height: 1.1;
}
.legal__header .lede { margin: 0 auto; max-width: 36rem; }
.legal__updated {
  margin-top: 1.5rem;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive);
}

.legal__body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
}
.legal__body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  margin: clamp(2rem, 4vw, 3rem) 0 .75rem;
  line-height: 1.2;
}
.legal__body p { margin: 0 0 1.25rem; }
.legal__body a {
  color: var(--ochre);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.legal__body a:hover { color: var(--ink); }
.legal__body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em;
  background: rgba(42,36,29,.06);
  padding: .05em .35em;
  border-radius: 3px;
}
.legal__body strong { font-weight: 500; }
.legal__placeholder {
  border-left: 2px solid var(--ochre);
  padding: .5rem 0 .5rem 1rem;
  color: var(--ink-soft);
  font-size: .95rem;
}

.legal__footer {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(42,36,29,.12);
  text-align: center;
}

/* ==========================================================================
   Cookie consent banner — minimal, slow-luxe, dismissible.
   Injected by js/main.js when no consent flag is in localStorage.
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  max-width: 36rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  background: var(--ink);
  color: var(--lime);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(42,36,29,.25);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: .85rem;
  line-height: 1.5;
  transform: translateY(140%);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.cookie-banner.is-visible {
  transform: none;
  opacity: 1;
}
.cookie-banner p {
  margin: 0;
  flex: 1 1 18rem;
  color: rgba(244,237,225,.85);
}
.cookie-banner a {
  color: var(--sun);
  border-bottom: 1px solid rgba(216,165,90,.45);
  padding-bottom: 1px;
  white-space: nowrap;
}
.cookie-banner a:hover { color: var(--lime); border-bottom-color: var(--lime); }
.cookie-banner__ok {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sun);
  padding: .65rem 1.4rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.cookie-banner__ok:hover, .cookie-banner__ok:focus-visible {
  background: var(--lime);
  color: var(--ink);
  outline: none;
}

@media (max-width: 540px) {
  .cookie-banner { flex-direction: column; align-items: stretch; padding: 1rem; }
  .cookie-banner__ok { width: 100%; }
}

/* ==========================================================================
   Curated Objects — object-story rhythm (mobile-first).
   Used only on /curated-objects/, /it/oggetti-curati/, /fr/objets-chines/.
   Each object is a short tale with three labelled beats (origin / what it was /
   what it became) plus a sensory closing line. Visually distinct from
   .experience (block-image), .manifesto-prose (long flow), .timeline__beat
   (time-stamped) and .subpage__facts (list).
   ========================================================================== */
.subpage--objects .subpage__article { max-width: 46rem; }

.object-stories {
  margin: clamp(2.5rem, 5vw, 4rem) auto;
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 3.5rem);
}

.object-story {
  display: grid;
  gap: 1rem;
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(42,36,29,.12);
}
.object-story:first-child { border-top: 0; padding-top: 0; }

.object-story__index {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0;
}
.object-story__title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.2;
  margin: 0 0 .5rem;
  color: var(--ink);
}

.object-story__beats {
  display: grid;
  gap: 1rem;
  margin: 0;
}
.object-story__beats > div { margin: 0; }

.object-story__beat-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 .35rem;
}
.object-story__beats p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

.object-story__close {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  margin: .5rem 0 0;
  font-size: 1.02rem;
  line-height: 1.55;
}

/* Large editorial pull quote — used once on Curated Objects. */
.object-pullquote {
  margin: clamp(3rem, 6vw, 5rem) auto;
  max-width: 38rem;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.35;
  color: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-top: 1px solid rgba(42,36,29,.18);
  border-bottom: 1px solid rgba(42,36,29,.18);
}
.object-pullquote::before { content: "\201C"; margin-right: .1em; color: var(--ochre); }
.object-pullquote::after  { content: "\201D"; margin-left:  .1em; color: var(--ochre); }

.object-still-arriving {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 42rem;
}
.object-still-arriving h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin: 0 0 1rem;
  line-height: 1.2;
}
.object-still-arriving p {
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0 0 1rem;
}
.object-still-arriving p:last-child { margin-bottom: 0; }
.object-still-arriving em { font-style: italic; color: var(--ink); }

@media (min-width: 640px) {
  .object-story__beats {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.75rem;
  }
  .object-story__beats > div:first-child { grid-column: 1 / -1; }
}

/* ---------- Confirmation page ------------------------------------------- */
.page-confirm {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--lime);
  padding: var(--gutter);
}
.confirm__inner {
  max-width: 36rem;
  text-align: center;
}
.confirm h1 {
  color: var(--lime);
  font-weight: 300;
  margin-bottom: 1.5rem;
}
.confirm .lede {
  color: rgba(244, 237, 225, .78);
  margin: 0 auto 2.5rem;
}
.confirm .lede a {
  color: var(--sun);
  border-bottom: 1px solid rgba(216, 165, 90, .35);
}
.confirm .lede a:hover,
.confirm .lede a:focus-visible {
  color: var(--lime);
  border-bottom-color: var(--lime);
}
.confirm__back .link-arrow {
  color: var(--sun);
}
.confirm__back .link-arrow:hover,
.confirm__back .link-arrow:focus-visible {
  color: var(--lime);
}

/* ---------- Pugliese moments (silent video loops) ----------------------- */
.moments {
  margin: 5rem 0 3rem;
}
.moments .eyebrow { margin-bottom: .75rem; }
.moments__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  max-width: 28ch;
}
.moments__lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 0 2.25rem;
}
.moments__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.moment { margin: 0; }
.moment__media {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  background: #1a1612;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.moment__caption {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-top: .75rem;
  line-height: 1.5;
}
@media (min-width: 720px) {
  .moments__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  /* Browsers that honour the user preference will pause autoplay videos;
     forcing controls lets the visitor opt in by tapping play. The poster
     attribute keeps a still frame visible until they do. */
  .moment__media { pointer-events: auto; }
}

/* ==========================================================================
   Book Your Stay  —  /book-your-stay/ (+ /it/prenota/, /fr/reserver/)
   Concise: request form beside a photo, key amenities, a contact line.
   Mobile-first, photo-forward. Reuses the dark reservations form styles.
   ========================================================================== */

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

/* On this page the hero (photo + form) carries the page; no extra top gap. */
.subpage--booking main { padding-top: 5.5rem; }

/* ---- Request + photo, side by side ---- */
.stay {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: photo first, then form */
}
@media (min-width: 52rem) {
  .stay { grid-template-columns: 1.05fr 1fr; align-items: start; }
}

.stay__media { position: relative; background: var(--stone); aspect-ratio: 4 / 3; }
.stay__media picture,
.stay__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%; display: block;
}
/* Desktop: photo stays in view (Casa Anguilla–style) while the form scrolls,
   shown whole at a generous height instead of a cropped sliver. */
@media (min-width: 52rem) {
  .stay__media {
    aspect-ratio: auto;
    position: sticky; top: 0;
    height: 100vh;
  }
}

/* Reuse the dark .reservations panel, but as a column rather than full-width */
.stay .reservations {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.75rem);
  text-align: left;
  display: flex;
  align-items: center;
}
.stay .reservations__inner { max-width: 36rem; margin: 0; width: 100%; }
.stay .reservations .lede { margin: 0 0 1.5rem; }
.stay .reservations__form { margin-top: 1.75rem; }
.stay .reservations__form-actions { align-items: flex-start; }
.stay .reservations__note { margin-top: 1.75rem; text-align: left; }

.stay__title {
  font-family: var(--serif);
  font-weight: 300;
  color: var(--lime);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin: .4rem 0 1.1rem;
}

/* ---- Rates card on the dark panel ---- */
.rates {
  border-top: 1px solid rgba(244, 237, 225, .15);
  border-bottom: 1px solid rgba(244, 237, 225, .15);
  padding: 1.6rem 0;
  margin: 0 0 .25rem;
}
.rates__title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sun);
  margin: 0 0 1rem;
}
.rates__seasons {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}
.rates__seasons li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(244, 237, 225, .08);
}
.rates__seasons li:last-child { border-bottom: 0; }
.rates__season {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .98rem;
  color: rgba(244, 237, 225, .85);
}
.rates__price {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--lime);
}
.rates__terms {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rates__terms li {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .85rem;
  line-height: 1.55;
  color: rgba(244, 237, 225, .6);
}

/* ---- Key amenities + photo ---- */
.amenities-lite {
  margin: clamp(3.5rem, 8vw, 6rem) auto 0;
  padding: 0 var(--gutter);
  max-width: 74rem;
}
.amenities-lite__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 54rem) {
  .amenities-lite__grid { grid-template-columns: 1.15fr 1fr; }
}
.amenities-lite .eyebrow { margin: 0 0 .6rem; }
.amenities-lite h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 1.6rem;
}
.amenities-lite__media {
  border-radius: 2px;
  overflow: hidden;
  background: var(--stone);
  aspect-ratio: 3 / 4;
}
.amenities-lite__media picture,
.amenities-lite__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.amenity-highlights {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem 2rem;
  text-align: left;
}
@media (min-width: 34rem) { .amenity-highlights { grid-template-columns: 1fr 1fr; } }
.amenity-highlights li {
  position: relative;
  padding-left: 1.4rem;
  font-family: var(--sans);
  font-weight: 300;
  font-size: .97rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.amenity-highlights li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--olive);
}

/* ---- Contact line ---- */
.booking-contact {
  margin: clamp(3.5rem, 8vw, 6rem) auto;
  padding: 0 var(--gutter);
  max-width: 42rem;
  text-align: center;
}
.booking-contact h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--ink);
  margin: 0 0 1rem;
}
.booking-contact p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1.75rem;
}