/* tokens */
/* ==========================================================================
   Design tokens — APPROVED (Phase 1, June 2026).
   Palette and type from Lewis's approved homepage design (Design/approved-design.pdf).
   Two accents over a warm cream ground: terracotta (primary) + sage (secondary/footer).
   Fonts are self-hosted (woff2 in /assets/fonts) — no runtime CDN, no build step.

   Type assignment per the signed-off spec: headings use Source Sans 3, body uses PT Serif.
   Both are SIL OFL (Source Sans 3 © Adobe; PT Serif © ParaType) — see assets/fonts.
   ========================================================================== */

/* --- Self-hosted fonts --------------------------------------------------- */
/* Source Sans 3 — variable woff2 (covers 400–700 on the weight axis), headings + UI. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* PT Serif — body copy. Regular, bold, and regular-italic. */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Colour (approved) ------------------------------------------------- */
  --color-bg:          #ffffff; /* white ground (design base) */
  --color-surface:     #ffffff; /* cards */
  --color-surface-alt: #f5f4ef; /* warm sand — band accent only */
  --color-text:        #3a3328; /* warm near-black ink */
  --color-muted:       #6b6258; /* warm secondary copy */
  --color-line:        #e7e2d7; /* hairlines / dividers */
  --color-heading:     #332513; /* deep brown — ALL display headings (Matt: one dark colour for every header) */
  --color-hero-title:  #615646; /* earthy grey-brown — hero display heading (sampled from design) */
  --color-heading-deep:#332513; /* deep brown ink — centred section titles + text links (sampled) */
  --color-card-sage:   #eaece4; /* very pale sage — room card background */

  /* Terracotta — PRIMARY: hero/booking CTAs, links, "discover more", brush underline */
  --color-accent:      #ba481b;
  --color-accent-ink:  #ffffff;
  --color-accent-deep: #993a14; /* hover/active */

  /* Sage — SECONDARY: "Explore"/"Enquire" buttons and the footer band */
  --color-secondary:     #8a9977;
  --color-date:          #5f6e48; /* deep sage for date labels — Lewis's green, darkened to pass WCAG AA (5.5:1) */
  --color-secondary-ink: #ffffff;
  --color-secondary-deep:#74835f; /* hover/active */
  --color-footer-bg:     #8a9977;
  --color-footer-ink:    #ffffff;

  --color-active: var(--color-accent); /* active nav highlight */

  /* --- Typography (approved) -------------------------------------------- */
  --font-heading: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "PT Serif", Georgia, "Times New Roman", serif;
  /* Back-compat aliases (older rules referenced --font-serif / --font-sans) */
  --font-serif: var(--font-body);
  --font-sans:  var(--font-heading);
  --font-base-size: 1.125rem; /* 18px root — client spec: body copy 18–20px (old site), scales site-wide */
  --line-height: 1.65;
  --weight-display: 300; /* light weight for large display SECTION headings (design) */
  --weight-hero: 400;    /* hero heading sits a notch heavier than section titles (design) */

  /* --- Spacing scale ----------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* --- Layout ------------------------------------------------------------ */
  --measure: 64ch;
  /* Layout model: a centred CONTENT RAIL that text + contained rows respect; full-bleed elements
     ignore it and run to the true viewport edge (no outer page cap). --rail-pad is the side
     padding that pulls content onto the rail — full-bleed rows reuse it to align their inner edge. */
  --content-max: 1400px;
  --gutter: clamp(1.25rem, 4vw, 4rem); /* min side padding before the rail kicks in (narrow screens) */
  --rail-pad: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  --container: 1180px;  /* narrow column for prose-only blocks (.container--narrow) */
  --radius: 8px;
  --radius-lg: 18px; /* the larger rounded cards (booking, restaurant, room images) */
  /* "Almost full-bleed" element (e.g. home experience image): full-bleed in size but inset a hair
     from the viewport edge with rounded corners. */
  --bleed-inset: 20px;
  --bleed-radius: 28px;
}

/* ----------------------------------------------------------------------------
   A11y note (flagged for Lewis/Matt): white text on the approved sage #8a9977
   measures ~3.0:1 — meets WCAG AA for large/bold UI text and components, but is
   below 4.5:1 for small body text (e.g. the footer address). If we want strict
   AA on small footer text, drop --color-footer-bg to ~#5f6b48 (~5.7:1). Left at
   the approved sage by default to match the signed-off design.
   ---------------------------------------------------------------------------- */


/* base */
/* ==========================================================================
   Base — global foundation shared by every component (no component-specific rules).
   Reset, typography, layout primitives, buttons/links, accessibility. Reads tokens.css.
   ========================================================================== */

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

html { font-size: var(--font-base-size); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: var(--line-height);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-2); }
img, iframe, svg { max-width: 100%; }

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-deep); }

/* Accessibility: skip link + visible focus ---------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3.5rem;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  transition: top 0.15s ease;
  z-index: 100;
}
.skip-link:focus { top: var(--space-2); }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Layout primitives — full-width <main>, centred .container, full-width .band
   -------------------------------------------------------------------------- */
/* Full-bleed elements run to the true viewport edge; .container pulls content onto the centred
   1400px rail via symmetric rail padding (no max-width needed). */
main { display: block; width: 100%; overflow-x: clip; }

.container { width: 100%; padding-inline: var(--rail-pad); }
/* Opt-in narrow column for prose-only blocks (e.g. legal/contact copy). */
.container--narrow { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.band { padding-block: var(--space-6); }
.band--alt { background: var(--color-surface-alt); }

/* Inner pages drop their content straight into a .container under <main>. */
main > .container { padding-block: var(--space-4) var(--space-6); }

/* Display headings — warm taupe, light weight (design). Defined here (after the h1–h4 base)
   so the colour sticks; component CSS that needs a different size still cascades on top. */
.hero__title, .section-title, .page-head h1,
.feature__text h2, .feature-grid__text h2,
.restaurant-feature__card h2, .room-gallery__title,
.content-section h2 {
  color: var(--color-heading);
  font-weight: var(--weight-display);
}

/* Centred section titles (Rooms / Packages / Testimonials) ------------------ */
.section-title {
  text-align: center;
  font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.15rem); /* larger — matches the design's big section titles */
  font-weight: 200; /* thin display weight (Matt) — applies to all centred section titles */
  letter-spacing: 0.01em;
  color: var(--color-heading-deep); /* deep brown (design), darker than the hero */
  margin-top: var(--space-4);       /* generous breathing room above + below the centred title (design) */
  margin-bottom: var(--space-5);
}
.section-intro {
  max-width: var(--measure);
  margin: 0 auto var(--space-4);
  text-align: center;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Buttons & inline "more" links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.78em 1.7em;
  border: 1px solid transparent;
  border-radius: 999px; /* pill */
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn--primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: #fff; }
.btn--secondary { background: var(--color-secondary); color: var(--color-secondary-ink); border-color: var(--color-secondary); }
.btn--secondary:hover { background: var(--color-secondary-deep); border-color: var(--color-secondary-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--color-secondary-deep); border-color: var(--color-secondary); }
.btn--ghost:hover { background: var(--color-secondary); color: #fff; }
.btn--pill {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-line);
  border-radius: 999px;
  padding-inline: 2em;
}
.btn--pill:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Text links (DISCOVER MORE / VIEW MENU …) — Lewis's pattern: DARK text with a TERRACOTTA
   underline hugging it. Uses text-decoration (sits tight to the text) rather than a border-bottom
   (which hung below the whole line-box, reading as a big gap). */
.link-more {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.link-more:hover { text-decoration-color: var(--color-accent-deep); }

/* Image placeholders (shown until a photo is assigned to a slot) ------------- */
.img-placeholder {
  background: repeating-linear-gradient(45deg, #e9e5d8, #e9e5d8 12px, #e2ded2 12px, #e2ded2 24px);
  border-radius: var(--radius);
}
.img { object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}


/* component: booking-bar */
/* BookingBar ---------------------------------------------------------------- */
.booking-bar { position: relative; }

/* Seam straddle: a zero-height anchor sits exactly on the hero/next-band boundary; the card is
   pulled up by half its own height so its centre lands on the seam, whatever the card height.
   The small extra nudge keeps the white form (below the label) sitting on the line. */
.booking-seam { position: relative; height: 0; z-index: 5; }
.booking-seam .booking-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(calc(-50% - 1.25rem));
}
/* "Book a room" — same as the nav (heading font, light, taupe). */
.booking-bar__label {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 var(--space-2);
  color: var(--color-heading);
}
.booking-bar__form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  background: var(--color-surface);
  border-radius: 40px;
  padding: var(--space-3) var(--space-3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}
/* Thin vertical dividers between the sections. The hidden inputs (portal/lang/rooms/sr) are the
   form's first children, so the first visible field would otherwise get a stray left divider. */
.booking-bar__form > * + * { border-left: 1px solid var(--color-line); }
.booking-bar__form > .field--date:first-of-type { border-left: 0; }

.field { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: var(--space-3) var(--space-3); }
.field--date { flex: 1 1 200px; }
.field--occ { flex: 0 1 124px; }
.field label, .field__label {
  font-family: var(--font-heading);
  font-size: 0.8rem;   /* up from 0.72rem — legibility */
  font-weight: 300;    /* up from 200 — thin uppercase needs weight more than size; still light vs the old 600 */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
/* Native date input — the no-JS fallback look (before ui.js reveals the date facade). */
.field input {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-text);
}

/* Date facade ("26 /June ⌄") — shown only when ui.js enhances the field. */
.bdate__control { position: relative; min-height: 2.8rem; display: flex; align-items: center; }
.field--date .bdate__input { width: 100%; border: 0; border-radius: 0; padding: 0.3rem 0; background: transparent; font-size: 1.05rem; }
.bdate__face { display: none; }
.is-enhanced .bdate__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.is-enhanced .bdate__face { display: flex; align-items: baseline; width: 100%; }
.bdate__value { display: inline-flex; align-items: baseline; gap: 0.2rem; }
.bdate__day { font-family: var(--font-heading); font-weight: 400; font-size: 3.8rem; line-height: 1; color: var(--color-text); }
.bdate__mon { font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-text); }
.bdate__chev { width: 1.15rem; height: 1.15rem; color: var(--color-muted); margin-left: auto; align-self: center; flex: none; }

/* White-on-sage needs body over hairline weight to stay legible; 200 washed out. */
.booking-bar__submit { align-self: center; margin-left: var(--space-3); flex: 0 0 auto; font-weight: 400; }

/* Guest stepper — circular outline −/＋ around a large number. */
.stepper { display: inline-flex; align-items: center; gap: clamp(var(--space-1), 3vw, var(--space-2)); }
.stepper__btn { width: 2.1rem; height: 2.1rem; border: 1px solid var(--color-line); border-radius: 999px; background: transparent; color: var(--color-muted); font-size: 1.05rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.stepper__btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.stepper input[type="number"] { width: 2.2ch; text-align: center; border: 0; background: transparent; padding: 0; font-family: var(--font-heading); font-size: 1.8rem; color: var(--color-text); -moz-appearance: textfield; }
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Rooms & guests dropdown ---------------------------------------------------- */
.field--rooms { flex: 1 1 210px; position: relative; }
.occ__summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 0.5rem; }
.occ__summary::-webkit-details-marker { display: none; }
.occ__summary-row { display: flex; align-items: center; gap: 0.5rem; }
.occ__summary-text { font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-text); }
.occ__summary .bdate__chev { margin-left: auto; align-self: center; }

.occ__panel { padding-top: var(--space-3); }
.occ.is-enhanced > .occ__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 320px;
  z-index: 40;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16);
  padding: var(--space-3);
}
.occ__room + .occ__room { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.occ__room-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.occ__room-title { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--color-text); }
.occ__remove { background: none; border: 0; color: var(--color-accent); font-family: var(--font-heading); font-size: 0.8rem; cursor: pointer; padding: 0; }
/* The gap is only a floor (space-between does the spacing), so it can relax on narrow cards
   instead of forcing the row wider than the card. */
.occ__line { display: flex; align-items: center; justify-content: space-between; gap: clamp(var(--space-1), 4vw, var(--space-4)); padding: 0.4rem 0; }
.occ__line-label { font-family: var(--font-heading); font-size: 1rem; color: var(--color-text); }
.occ__line .stepper input[type="number"] { font-size: 1.35rem; }
.occ__add { margin-top: var(--space-3); background: none; border: 0; color: var(--color-accent); font-family: var(--font-heading); font-weight: 600; font-size: 0.92rem; cursor: pointer; padding: 0; }

/* Vertical CARD variant (single-room page) — the SAME widget, stacked into a titled card, using
   Lewis's room design purely as a style guide. ------------------------------------------------- */
.booking-bar--card {
  position: sticky;
  top: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  /* Fluid: at 320px a flat --space-4 on both sides left the stepper row no room and the card
     grew past the viewport. Full --space-4 is back by ~560px. */
  padding: clamp(var(--space-2), 8vw, var(--space-4));
}
.booking-bar--card .booking-bar__title {
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: 1.7rem;
  color: var(--color-heading);
  margin: 0 0 var(--space-2);
}
/* Stack the fields; drop the horizontal bar's pill + shadow. */
.booking-bar--card .booking-bar__form {
  flex-direction: column;
  /* nowrap is load-bearing: a wrapping COLUMN flex container is multi-line, so its line is sized
     to the widest item's max-content and the fields push the card wider than its column. */
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
/* Divider rules between the stacked fields (Lewis's design); none above the first field or button. */
.booking-bar--card .booking-bar__form > * + * { border-left: 0; border-top: 1px solid var(--color-line); }
.booking-bar--card .booking-bar__form > .field--date:first-of-type { border-top: 0; }
.booking-bar--card .field { flex: none; padding: var(--space-3) 0; }
/* A smaller date facade than the giant hero one. */
.booking-bar--card .bdate__control { min-height: 2.4rem; }
.booking-bar--card .bdate__day { font-size: 2.1rem; }
.booking-bar--card .bdate__mon { font-size: 1rem; }
/* Submit — full-width pill at the bottom, no divider above. */
.booking-bar--card .booking-bar__submit { border-top: 0; width: 100%; margin: var(--space-3) 0 0; }
/* Rooms & guests panel flows inline inside the narrow card (no absolute dropdown). */
.booking-bar--card .occ.is-enhanced > .occ__panel { position: static; min-width: 0; box-shadow: none; border: 0; padding: var(--space-3) 0 0; }

@media (max-width: 720px) {
  /* Hero is stacked on mobile; the card flows normally instead of straddling a seam. */
  .booking-seam { height: auto; }
  .booking-seam .booking-bar { position: static; transform: none; margin-block: var(--space-3); }
  /* nowrap: see the card variant — a wrapping column flex container sizes its line to the widest
     item's max-content, so the open "Rooms & guests" panel dragged the whole card off-screen. */
  .booking-bar__form {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    padding-inline: clamp(var(--space-2), 5vw, var(--space-3));
  }
  /* Stacked, the fields sit on the form's own padding (as in the card variant) — doubling it up
     ate ~54px of a 320px screen — and can never widen the card. */
  .booking-bar__form > * { min-width: 0; }
  .booking-bar__form > .field { padding-inline: 0; }
  .booking-bar__form > * + * { border-left: 0; border-top: 1px solid var(--color-line); }
  .booking-bar__submit { margin-left: 0; }
  .occ.is-enhanced > .occ__panel { position: static; min-width: 0; box-shadow: none; border: 0; padding-inline: 0; }
}


/* component: dream-form */
/* "Contact us for your own special package" form (Packages page) — two-column: form left, photo
   right, per packages.pdf. -------------------------------------------------------------------- */
.dream { padding-block: var(--space-6); }
.dream__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5); align-items: stretch; }

/* Left column — heading + subtext on white, then the cream form card, then the button. */
.dream__heading { font-family: var(--font-heading); font-weight: 200; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem); color: var(--color-heading); margin: 0 0 var(--space-2); }
.dream__lead { color: var(--color-text); margin: 0 0 var(--space-4); max-width: 44ch; }

/* Fields sit on a cream card; each is a stacked label + full-width control. */
.dream__fields { background: var(--color-surface-alt); padding: var(--space-4); display: grid; gap: var(--space-3); }
/* Scoped as .dream__field — the bare `.field` class is already owned by booking-bar (its padding
   was leaking in and blowing the field spacing apart). */
.dream__field { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.dream__field label { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--color-text); }
.dream__field input, .dream__field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--color-text); width: 100%;
  padding: 0.8em 0.9em; background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius);
}
.dream__field textarea { resize: vertical; min-height: 150px; }
.dream__field input::placeholder, .dream__field textarea::placeholder { color: var(--color-muted); opacity: 0.75; }
.dream__field input:focus-visible, .dream__field textarea:focus-visible { outline: 2px solid var(--color-date); outline-offset: 1px; border-color: var(--color-date); }
.dream__submit { margin: var(--space-3) 0 0; }

/* Right column — tall rounded photo filling the column height. The image is absolutely positioned
   (canon full-bleed mechanic) so it fills the box the FORM defines, instead of its own natural
   height dictating the row (a portrait photo's height:100% => natural height blew the row up). */
.dream__media { position: relative; min-height: 340px; border-radius: var(--radius-lg); overflow: hidden; }
.dream__media .img, .dream__media .img-placeholder {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg);
}

@media (max-width: 820px) {
  .dream__grid { grid-template-columns: 1fr; }
  .dream__media { order: -1; min-height: 300px; }
}

/* Honeypot — must be reachable by a bot parsing the DOM but invisible and unfocusable for people.
   Positioned off-screen rather than display:none, which the cruder bots know to skip. */
.dream__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submission result. Hidden until ui.js reads ?sent=1 / ?error=1 from the redirect the enquiry
   Worker issues, then reveals exactly one of the two messages. */
.dream__status { margin: 0 0 var(--space-3); }
.dream__status-msg {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border-left: 4px solid;
}
.dream__status-msg--ok  { background: #eef2e8; border-color: #5f6e48; color: #3d4a2c; }
.dream__status-msg--err { background: #fbecea; border-color: #a8443a; color: #7a2f28; }
.dream__status:not([data-state="sent"])  .dream__status-msg--ok  { display: none; }
.dream__status:not([data-state="error"]) .dream__status-msg--err { display: none; }


/* component: faq */
/* FAQ ----------------------------------------------------------------------- */
/* A readable single-column accordion. Ruled rows; terracotta chevron; answer reveals below. */
.faq-page__intro { max-width: 46rem; color: var(--color-muted); font-size: 1.15rem; line-height: 1.7; margin: 0 0 var(--space-5); }
.faq { max-width: 50rem; }
.faq__item { border-bottom: 1px solid var(--color-muted); }
.faq__item:first-child { border-top: 1px solid var(--color-muted); }

.faq__q { list-style: none; cursor: pointer; position: relative; padding: var(--space-4) 2.75rem var(--space-4) 0;
  font-family: var(--font-heading); font-size: 1.3rem; font-weight: 400; line-height: 1.3; color: var(--color-heading); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: ""; position: absolute; right: 0.6rem; top: calc(var(--space-4) + 0.35rem);
  width: 0.62rem; height: 0.62rem; border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg); transition: transform 0.2s ease; }
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }

.faq__a { padding: 0 2.75rem var(--space-4) 0; }
.faq__a p { margin: 0 0 0.8rem; color: var(--color-muted); font-size: 1.08rem; line-height: 1.72; }
.faq__a p:last-child { margin-bottom: 0; }


/* component: feature */
/* Feature (split media + prose) -------------------------------------------- */
.feature__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
.feature--flip .feature__media { order: 2; }
/* height:auto lets aspect-ratio define the box — height:100% here collapsed to 0 in the
   align-items:center grid cell (indefinite parent height). object-fit crops rather than distorts. */
.feature__img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-lg); }
.feature__media .img-placeholder { aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius-lg); }
.feature__text h2 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.4rem); font-weight: 200; margin-bottom: var(--space-3); }
.feature__text .link-more { margin-top: var(--space-2); }

/* Full-bleed variant (home "experience"): the image runs to the page edge; the prose is guttered.
   The inner is NOT a .container, so the media column starts at x=0 (left) — or x=max (when flipped). */
.feature--bleed .feature__inner { gap: clamp(2rem, 4vw, 4.5rem); align-items: stretch; }
/* Full-bleed: the image runs to the viewport edge on the bleed side (left by default, right when
   flipped) and is rounded only on its inner corners — a tall portrait crop, matching the design. */
.feature--bleed .feature__media { height: 100%; }
.feature--bleed .feature__img,
.feature--bleed .feature__media .img-placeholder {
  aspect-ratio: 4 / 5;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 0 var(--bleed-radius) var(--bleed-radius) 0; /* right corners only (bleeds off the left edge) */
}
.feature--bleed.feature--flip .feature__img,
.feature--bleed.feature--flip .feature__media .img-placeholder {
  border-radius: var(--bleed-radius) 0 0 var(--bleed-radius); /* left corners only when flipped */
}
/* Text sits in the right half but its outer edge respects the rail (so it doesn't run to the
   viewport edge); the image bleeds to the left viewport edge. */
.feature--bleed .feature__text { align-self: center; padding-right: var(--rail-pad); }
.feature--bleed.feature--flip .feature__text { padding-right: 0; padding-left: var(--rail-pad); }

/* The home experience row sits directly under the floating booking bar (which straddles the
   hero/row-2 seam), so give it extra top clearance so the image doesn't crowd the bar. */
.booking-seam + .feature { padding-top: calc(var(--space-6) + 6rem); }

@media (max-width: 720px) {
  .feature--bleed .feature__text { padding-inline: var(--gutter); }
  .feature--bleed .feature__img,
  .feature--bleed .feature__media .img-placeholder { aspect-ratio: 16 / 10; }
  /* On mobile the booking bar flows inline (no overlap) — no extra clearance needed. */
  .booking-seam + .feature { padding-top: var(--space-5); }
}

@media (max-width: 720px) {
  .feature__inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .feature--flip .feature__media { order: 0; }
}


/* component: feature-grid */
/* FeatureGrid (prose + 2×2 image grid) ------------------------------------- */
/* Design splits this NARROW text / WIDE grid (~1 : 1.9), not the 50/50 of the feature split.
   Text top-aligns to the top of the image grid (align-items:start), matching the design. */
.feature-grid__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-5);
  align-items: start;
}
.feature-grid--flip .feature-grid__media { order: -1; }

/* Matches the feature-split heading (peer section headings on About sit at the same size).
   Weight 200 = canon display weight; the --weight-display token is still 300, so these headings
   were rendering too heavy vs the design. */
.feature-grid__text h2 {
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.4rem);
  font-weight: 200;
  margin-bottom: var(--space-3);
}

.feature-grid__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
/* Wide 16:9 cells (design measures ~1.9), not the squarer 4:3 they had. aspect-ratio defines the
   box height — height:100% collapsed to 0 in an align-items grid cell (the canon feature bug). */
.feature-grid__img,
.feature-grid__media .img-placeholder {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (max-width: 720px) {
  .feature-grid__inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .feature-grid--flip .feature-grid__media { order: 0; }
}

/* The OUTER text/media split collapses at 720px but the inner 2×2 kept its two columns, so on a
   narrow phone each 16:9 cell was only ~130px wide — postage stamps. One column below 520px: four
   images at 16:9 costs ~730px of page, which is a fair trade for photos you can actually see. */
@media (max-width: 520px) {
  .feature-grid__media { grid-template-columns: 1fr; }
}


/* component: hero */
/* Hero ---------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--color-bg);
  min-height: clamp(600px, 80vh, 860px);
  display: flex;
  align-items: center;
  /* The booking bar straddles the bottom seam, reaching ~half its height up into the hero.
     Reserve that zone as padding so the vertically-centred text is biased upward and can never
     collide with the "Prenota una camera" label — whatever the copy length or screen height. */
  padding-bottom: clamp(3rem, 6vh, 5rem);
}

/* Airy, type-led hero: a tall accent photo on the right (bleeds to the top + right viewport
   edges, full height down to the booking-bar seam); the light heading is the focus over white. */
.hero__media { position: absolute; top: 0; right: 0; width: clamp(300px, 40%, 640px); height: 100%; z-index: 0; }
.hero__img { width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; object-fit: cover; }

.hero .container { position: relative; z-index: 1; width: 100%; }
.hero__text { max-width: 42rem; }

/* Per-line terracotta underline via text-decoration (it wraps with each line, like the design). */
.hero__title {
  font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem);
  font-weight: 200; /* extra-light display weight (Matt) */
  color: var(--color-hero-title); /* earthy grey-brown, sampled from the design (was taupe) */
  line-height: 1.16;
  margin: 0;
  /* Width controls the wrap (content is plain-text, no <br> allowed). Tuned for the customer's
     "Un luogo dove ogni momento diventa speciale" — wraps to three balanced lines. */
  max-width: 19ch;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  /* Sit the line CLOSE to the text so it runs through the descenders' path — only then does
     skip-ink hop over the "y"/"p" tails (design). A larger offset drops below the descenders and
     the gaps vanish (solid line). */
  text-underline-offset: 0.12em;
  /* Hop over descenders — browser default; old browsers just draw a straight line (clean fallback). */
  text-decoration-skip-ink: auto;
}
/* Tagline: regular-weight serif (body face), matching the design — not the bold sans it was. */
.hero__tagline {
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--color-text);
  max-width: 40ch;
}

@media (max-width: 900px) {
  .hero__media { width: 40%; }
  .hero__text { max-width: 28rem; }
}

@media (max-width: 720px) {
  .hero { display: block; min-height: 0; }
  .hero__media { position: static; width: 100%; height: auto; }
  .hero__img { aspect-ratio: 16 / 10; height: auto; }
  .hero__text { max-width: none; padding-block: var(--space-4); }
}


/* component: lightbox */
/* Lightbox ------------------------------------------------------------------ */
/* Full-screen photo viewer for the room + feature galleries. Built on the NATIVE <dialog>, which
   hands us the modal behaviour for free: focus is contained inside it, the rest of the page goes
   inert, Esc closes, and ::backdrop is a real pseudo-element. That is why this needs no library —
   the only JS left is "which photo, and step to the next one".
   The dialog element itself is created by ui.js, so with JS off none of this is on the page and the
   gallery links just open the photo. */

/* The thumbnail links. `display: block` so the <a> takes the image's box exactly (an inline anchor
   leaves a few px of line-box gap under the photo and knocks grid rows out of alignment). */
.gallery-link { display: block; border-radius: var(--radius); overflow: hidden; }
.gallery-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
/* Only hint at zoom once the lightbox is actually wired up — without JS the cursor should stay a
   plain link pointer, because that is what it is. */
.gallery-link.is-zoomable { cursor: zoom-in; }
.gallery-link.is-zoomable img { transition: transform 0.35s ease, opacity 0.2s ease; }
@media (hover: hover) {
  .gallery-link.is-zoomable:hover img { transform: scale(1.03); }
}

.lightbox {
  /* Override the UA's centred-box defaults: the dialog IS the viewport here. */
  max-width: 100vw;
  max-height: 100dvh;
  width: 100%;
  height: 100dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(26, 21, 15, 0.92); }

/* SCROLL LOCK. showModal() blocks the desktop mouse wheel, but it does NOT reliably stop a TOUCH
   drag — on Android you can scroll the page around behind the open photo, which feels broken. So
   lock the root explicitly.
   Deliberately CSS and not JS: `:has()` means the lock exists exactly as long as an open lightbox
   does, so it releases itself on EVERY dismissal path including Esc. A JS-managed lock would be a
   genuine hazard here, because this dialog's `close` event does not reliably fire (see ui.js) — miss
   the unlock once and the page is frozen with no way back.
   padding-right replaces the scrollbar's width so the page behind doesn't jump sideways as the
   scrollbar disappears; ui.js measures it into --lightbox-sbw (0 on touch, where the scrollbar is an
   overlay and there is nothing to compensate). scrollbar-gutter is no help — Chrome stops reserving
   the gutter once the root is overflow:hidden. */
html:has(dialog.lightbox[open]) {
  overflow: hidden;
  padding-right: var(--lightbox-sbw, 0px);
}

.lightbox__figure {
  margin: 0;
  height: 100%;
  display: grid;
  /* Photo takes all the room it can; the caption row sizes to its content.
     minmax(0, 1fr), NOT 1fr: a bare `1fr` is minmax(auto, 1fr), and `auto` takes its floor from the
     row's min-content — which here is the photo's INTRINSIC height (1600×1200 originals). The row
     then refuses to shrink, the photo overflows the viewport and shoves the counter off-screen.
     A 0 minimum lets the row shrink so the img's own max-height:100% can do its job. */
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  /* Keep the photo clear of the close button (top-right) and the arrows on small screens. */
  padding: clamp(var(--space-2), 4vw, var(--space-4));
  gap: var(--space-2);
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04); /* faint plate while a photo decodes */
}
.lightbox__caption {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}

/* Controls — the same circular treatment as the reviews arrows, inverted for the dark backdrop. */
.lightbox__btn {
  position: absolute;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(26, 21, 15, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.lightbox__btn:hover { background: rgba(26, 21, 15, 0.85); border-color: #fff; }
.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__btn:disabled { opacity: 0.25; cursor: default; }
.lightbox__btn svg { width: 1.15rem; height: 1.15rem; display: block; }

.lightbox__close { top: var(--space-2); right: var(--space-2); }
.lightbox__prev { left: var(--space-2); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--space-2); top: 50%; transform: translateY(-50%); }

/* Narrow phones: the side arrows would sit on top of the photo, so drop the pair to the bottom
   centre where they read as a pager and thumbs can actually reach them. */
@media (max-width: 520px) {
  .lightbox__figure { padding-bottom: 5.5rem; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: var(--space-2); transform: none; }
  .lightbox__prev { left: calc(50% - 3.5rem); }
  .lightbox__next { right: calc(50% - 3.5rem); }
}

/* A single photo (a gallery of one) has nothing to step through — hide the pager entirely. */
.lightbox[data-single] .lightbox__prev,
.lightbox[data-single] .lightbox__next,
.lightbox[data-single] .lightbox__caption { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gallery-link.is-zoomable img { transition: none; }
  .gallery-link.is-zoomable:hover img { transform: none; }
}


/* component: menus */
/* Menus card — packages card look WITHOUT the accordion (Restaurant page). Static box: green
   "last updated" date + description + download buttons on the left, photo on the right. ---------- */
.menu-list { display: grid; gap: var(--space-3); }
/* Position:relative so the photo can sit absolutely on the right; right padding clears it. */
.menu {
  background: var(--color-surface);
  position: relative;
  padding: var(--space-4) calc(33% + var(--space-5) + var(--space-3)) var(--space-4) var(--space-4);
}

/* "Last updated" label — sits where the packages "valid from/to" date does; Lewis's deep sage. */
.menu__updated { display: block; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-date); }
/* Optional card title — matches the room-card / package titles: sans, large, thin, with a rule. */
.menu__name { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 200; line-height: 1.2; color: var(--color-text); margin: 0.55rem 0 var(--space-3); padding-bottom: 0.3rem; border-bottom: 1px solid var(--color-muted); }
.menu__detail p { margin: 0 0 0.1rem; color: var(--color-muted); font-size: 1.05rem; }
/* Buttons: bigger, and together they fill the text column up to the image (like the packages pair). */
.menu__actions { display: flex; gap: var(--space-2); margin-top: var(--space-5) !important; margin-bottom: 0 !important; }
.menu__actions .btn { flex: 1; border-radius: 2px; font-size: 1rem; padding: 0.85em 1.2em; }
.menu__actions .btn--ghost { border-width: 2px; }

/* Seasonal snack menu — one centred button beneath the menu list (hidden when no PDF is set). */
.menus__snack { margin: var(--space-4) 0 0; text-align: center; }
.menus__snack .btn { border-radius: 2px; font-size: 1rem; padding: 0.85em 1.6em; }

/* Image: square, on the right; vertically inset so its top aligns with the date and bottom with the buttons. */
.menu__media { position: absolute; top: var(--space-4); bottom: var(--space-4); right: var(--space-5); width: 33%; }
.menu__media .img-placeholder, .menu__media .img { height: 100%; width: 100%; object-fit: cover; border-radius: 0; }

@media (max-width: 720px) {
  .menu { padding: var(--space-4); }
  .menu__actions { flex-wrap: wrap; }
  .menu__actions .btn { flex: 1 1 auto; }
  .menu__media { position: static; width: auto; margin: var(--space-3) 0 0; }
  .menu__media .img-placeholder, .menu__media .img { min-height: 220px; }
}


/* component: packages */
/* Packages — always-open offer cards --------------------------------------- */
/* Cards span the full rail (edges align with the room cards / row-2 above). No top-level accordion:
   each card is static (header + photo fixed), with an Enquire button pinned to the bottom and a
   nested "More details" disclosure in the middle. No border/radius/shadow, white ground (design). */
.package-list { display: grid; gap: var(--space-3); }
.package { background: var(--color-surface); border: 0; border-radius: 0; position: relative; }

/* Header — validity + name, cleared of the top-aligned photo on the right. */
.package__head { padding: var(--space-4) calc(33% + var(--space-5) + var(--space-3)) var(--space-2) var(--space-4); }
.package__validity { display: block; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-date); margin-bottom: 0.55rem; }
.package__name { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 200; line-height: 1.2; color: var(--color-text); margin: 0; padding-bottom: 0.3rem; border-bottom: 1px solid var(--color-muted); }

/* Body — flex column so Enquire pins to the bottom; min-height gives the card presence and the
   photo something to span. Cleared of the photo on the right. */
.package__body { display: flex; flex-direction: column; min-height: 16rem; padding: var(--space-3) calc(33% + var(--space-5) + var(--space-3)) var(--space-4) var(--space-4); }
.package__detail p { margin: 0 0 0.1rem; color: var(--color-muted); font-size: 1.05rem; }
.package__price { color: var(--color-muted); font-weight: 400; margin-top: var(--space-2) !important; }

/* "More details" — a small text link (terracotta underline = Lewis's link pattern) with a caret;
   toggles a nested native <details> that grows the central area in place. */
.package__more { margin-top: var(--space-3); }
.package__more-toggle { display: inline-flex; align-items: center; gap: 0.45rem; width: max-content; cursor: pointer; list-style: none;
  font-size: 0.98rem; font-weight: 500; color: var(--color-text);
  text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.package__more-toggle::-webkit-details-marker { display: none; }
.package__more-toggle::after { content: ""; width: 0.42rem; height: 0.42rem; border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; }
.package__more[open] .package__more-toggle::after { transform: translateY(1px) rotate(-135deg); }
.package__more-body { margin-top: var(--space-3); max-width: 46ch; }
.package__more-body p { margin: 0 0 0.6rem; color: var(--color-muted); font-size: 1rem; line-height: 1.65; }
.package__more-body p:last-child { margin-bottom: 0; }

/* Enquire — pinned to the bottom (margin-top:auto) with a guaranteed gap above (padding-top). */
.package__actions { display: flex; margin: 0 !important; margin-top: auto !important; padding-top: var(--space-4); }
.package__actions .btn { border-radius: 2px; font-size: 1rem; padding: 0.85em 2em; }

/* Photo — on the right, top-aligned with a FIXED height so it stays put when "More details"
   expands the card (anchored top only; never stretches downward). */
.package__media { position: absolute; top: var(--space-4); right: var(--space-5); width: 33%; height: 20rem; }
.package__media .img-placeholder, .package__media .img { height: 100%; width: 100%; object-fit: cover; border-radius: 0; }

@media (max-width: 720px) {
  /* Desktop uses a 45px (--space-4) side inset that reads fine on the full-rail card but eats a
     huge share of a phone-width card. Pull both sides in to --space-3 here (and further below). */
  .package__head { padding-left: var(--space-3); padding-right: var(--space-3); }
  .package__body { padding-left: var(--space-3); padding-right: var(--space-3); min-height: 0; }
  .package__media { position: static; width: auto; margin: var(--space-3) var(--space-3) var(--space-4); }
  .package__media .img-placeholder, .package__media .img { min-height: 220px; }
}

@media (max-width: 419px) {
  /* Narrowest phones: tighten the inset again so the card content isn't squeezed into a thin column. */
  .package__head { padding: var(--space-3) var(--space-2) var(--space-2); }
  .package__body { padding: var(--space-3) var(--space-2) var(--space-3); }
  .package__media { margin-left: var(--space-2); margin-right: var(--space-2); }
}


/* component: photo-band */
/* Photo band (full-bleed standalone photograph) ---------------------------- */
/* Full viewport width: NOT inside a .container, so it ignores the rail and runs edge-to-edge.
   The band owns its height so the absolutely-positioned image has a real box to fill. Square
   corners, no rounding — a clean full-bleed break between sections (About design). */
.photo-band {
  position: relative;
  width: 100%;
  height: clamp(320px, 42vw, 620px);
  overflow: hidden;
}
.photo-band__img,
.photo-band .img-placeholder.photo-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

@media (max-width: 720px) {
  .photo-band { height: clamp(220px, 56vw, 360px); }
}


/* component: restaurant-feature */
/* Restaurant feature (full-bleed photo + overlapping card) ------------------ */
.restaurant-feature { position: relative; min-height: 480px; padding-block: clamp(4rem, 8vw, 7rem); overflow: hidden; display: flex; align-items: center; }
.restaurant-feature__media { position: absolute; inset: 0; z-index: 0; }
/* Fill the (absolutely-positioned) media box — height:100% alone didn't resolve, collapsing the
   photo; absolute inset:0 + object-fit:cover guarantees a full-bleed background. */
.restaurant-feature__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.restaurant-feature .container { position: relative; z-index: 1; width: 100%; display: flex; justify-content: flex-end; }
/* Card left edge lands on the viewport centre (design: width ~693px, right edge on the rail);
   wider corners (~31px). */
.restaurant-feature__card { background: var(--color-surface-alt); border-radius: 30px; padding: var(--space-5); max-width: 700px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14); }
.restaurant-feature__card h2 { font-size: clamp(2rem, 1.4rem + 2vw, 2.6rem); font-weight: 200; line-height: 1.15; margin-bottom: var(--space-3); }
.restaurant-feature__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0 0; }

@media (max-width: 720px) {
  /* The card stops being a half-width overlay and takes the whole rail. Its --space-5 (72px) inset
     was measured against a 700px card; on a 275px phone card it left the copy ~131px of measure, so
     the whole block read as a tall thin ribbon of text. Fluid inset floors at --space-3 and reaches
     the desktop 72px by ~1200px. min-height/padding-block also relax — the copy sets the height
     here, so reserving 480px only added dead photo above and below. */
  .restaurant-feature { min-height: 0; padding-block: var(--space-5); }
  .restaurant-feature .container { justify-content: stretch; }
  .restaurant-feature__card {
    max-width: none;
    padding: clamp(var(--space-3), 6vw, var(--space-5));
    border-radius: 20px; /* 30px is chunky on a card this narrow */
  }
  .restaurant-feature__card p { font-size: 1.02rem; }
}


/* component: reviews */
/* Reviews slider ------------------------------------------------------------ */
.reviews__slider { position: relative; }

/* Prev/next arrows — a circular pair sitting top-left of the slider, on the rail. Rendered hidden
   in the markup; ui.js unhides them (so no dead buttons when JS is off — native swipe still works). */
.reviews__controls { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.reviews__controls[hidden] { display: none; }
.reviews__nav {
  width: 3rem; height: 3rem; padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.reviews__nav:hover { background: var(--color-surface-alt); border-color: var(--color-muted); }
.reviews__nav:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.reviews__nav:disabled { opacity: 0.3; cursor: default; }
.reviews__nav svg { width: 1.15rem; height: 1.15rem; display: block; }

.reviews__track {
  display: grid;
  grid-auto-flow: column;
  /* Card width keyed to the rail (~3 across the rail), not the full viewport. */
  grid-auto-columns: calc((min(var(--content-max), 100%) - 2 * var(--space-3)) / 3);
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  /* First card aligns to the rail's left edge; the track scrolls out to the right viewport edge. */
  padding: 0 var(--gutter) 0 var(--rail-pad);
  overflow-x: auto;
  /* MUST pin overflow-y. Setting only overflow-x makes the browser compute overflow-y to `auto`
     too, so a sub-pixel-tall content overflow turns the track into a vertical scroller — it drifts
     up a few px (clipping the cards' top radius) and, worse, swallows the page's mouse wheel so
     scrolling "sticks" over the carousel. `hidden` locks the vertical axis and frees the wheel. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  align-items: stretch;
  scrollbar-width: none;
  cursor: grab; /* hint the drag-to-scroll (ui.js) */
}
.reviews__track::-webkit-scrollbar { display: none; }
/* Desktop: the per-review wrapper disappears so its quote + photo become direct grid items of the
   track — restoring the canon quote·photo·quote·photo strip. Snap sits on those flattened items. */
.reviews__item { display: contents; }
.review, .review-media { scroll-snap-align: start; }
/* Stop images from acting as draggable objects while scroll-dragging the carousel. */
.reviews__track img { -webkit-user-drag: none; user-select: none; }
/* While dragging (ui.js), suppress snap + text selection and switch the cursor. */
.reviews__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.reviews__track.is-dragging a { pointer-events: none; }

.review {
  background: var(--color-surface-alt); /* subtle cream box so the card reads against the white band (design) */
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: 0;
  /* Capped height so the cards read as tidy quotes, not billboards — the client felt 50vh
     (~540px on a 1080 screen) was too tall/bulky. Floor keeps short cards from collapsing. */
  min-height: clamp(300px, 38vh, 420px);
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Upright serif with curly quotes hugging the text (design). */
.review blockquote { margin: 0; flex: 1; font-style: normal; font-size: 1.15rem; line-height: 1.55; color: var(--color-text); quotes: "\201C" "\201D"; }
.review blockquote p:first-of-type::before { content: open-quote; }
.review blockquote p:last-of-type::after { content: close-quote; }
.review figcaption { margin-top: var(--space-4); font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); }

.review-media { height: 100%; }
.review-media .img-placeholder, .review-media .img { height: 100%; min-height: clamp(300px, 38vh, 420px); object-fit: cover; width: 100%; border-radius: var(--radius-lg); }

@media (max-width: 900px) {
  .reviews__track { grid-auto-columns: calc((100% - var(--space-3)) / 2); }
}
@media (max-width: 720px) {
  /* Phones: each review is ONE stacked card — photo on top, quote beneath. The wrapper stops being
     `display: contents` and becomes the card; column-reverse lifts the (source-second) photo up. */
  /* `stretch` (not `start`): reviews vary a lot in length, and left to their natural heights the
     slides came out WILDLY uneven on narrow screens — a short quote ended half a screen above its
     neighbour. Stretching every slide to the tallest makes the strip uniform; the cost is some
     empty cream under the shortest quotes, which reads far better than the ragged version. */
  .reviews__track { grid-auto-columns: 88%; align-items: stretch; }
  .reviews__item {
    display: flex;
    flex-direction: column-reverse;
    scroll-snap-align: start;
    background: var(--color-surface-alt);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .review {
    min-height: 0;
    height: auto;
    /* Fill the stretched slide so the cream runs to the bottom edge and the name stays pinned
       below the quote (blockquote already has flex:1). */
    flex: 1;
    background: none;
    border-radius: 0;
    /* FLUID inset. The flat --space-4 (45px) was sized for the rail: at 320px it left the quote
       only ~144px of measure — about nine characters a line, which is what blew the card heights
       out. Floors at --space-2 on the narrowest phones, reaching the desktop inset by ~1000px. */
    padding: clamp(var(--space-2), 4.5vw, var(--space-4));
  }
  /* Trim a notch with the padding: 1.15rem serif in a ~200px column still wraps very short. */
  .review blockquote { font-size: 1.02rem; line-height: 1.5; }
  .review figcaption { margin-top: var(--space-3); }
  .review-media { height: auto; }
  .review-media .img, .review-media .img-placeholder {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 0;
  }
}

/* Narrowest phones: one more notch off the quote. Because every slide is stretched to the TALLEST
   (above), the longest review sets the height of all six — so shaving lines off it is what actually
   shortens the carousel. 0.98rem is the floor: below that a serif at this measure stops being
   comfortable. Takes the strip from ~727px to ~650px on a 320px screen.
   Short quotes keep the leftover cream BELOW the quote with the name pinned to the bottom edge
   (blockquote's flex:1 does that), which reads as quote-top / attribution-bottom rather than as a
   gap. */
@media (max-width: 520px) {
  .review blockquote { font-size: 0.98rem; line-height: 1.48; }
}


/* component: room-card */
/* Room grid + card --------------------------------------------------------- */
.room-grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(3, 1fr); } /* narrower gap (design ~39px) */

.room-card {
  background: var(--color-surface-alt); /* warm cream (design) */
  border-radius: 0; /* square corners (design) */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 36rem; /* tall, elegant cards (Lewis's language): details sit high, CTA anchored low.
                        Set above the tallest (2-line-title) card so every card is uniform height. */
}
.room-card__link { text-decoration: none; color: inherit; display: block; }
.room-card__img { aspect-ratio: 3 / 2; width: 100%; border-radius: 0; }
.room-card__name {
  font-family: var(--font-heading); /* sans (design) — was inheriting the serif body font */
  margin: var(--space-3) var(--space-3) 0; /* tighter text padding (design) */
  padding-bottom: 0.3rem;           /* underline hugs the title (was 1rem — sat too low) */
  border-bottom: 1px solid var(--color-muted); /* stronger rule under the title (design ~#707070) */
  font-size: 1.8rem;                /* larger title (design) */
  font-weight: 200;                 /* thin display weight, per design (was 500) */
  line-height: 1.2;
}
/* Details sit high and tight, just under the rule (design). */
.room-card__meta { margin: 0.6rem var(--space-3) 0; color: var(--color-muted); font-size: 1.05rem; }
/* "Starting from €175.00" — plain serif, muted, not bold; snug under the meta line. */
.room-card__price { margin: 0.1rem var(--space-3) 0; font-weight: 400; color: var(--color-muted); }
/* Square button (design: 0–2px radius, not a pill), anchored to the card bottom so the freed
   space falls between the details and the CTA — the "tall & elegant" look. Font a notch up. */
.room-card__cta { align-self: stretch; margin: var(--space-3); margin-top: auto; border-radius: 2px; font-size: 1rem; }

.home-rooms__more { text-align: center; margin-top: var(--space-4); }

@media (max-width: 900px) { .room-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .room-grid { grid-template-columns: 1fr; } }


/* component: room-detail */
/* Room detail (single room template) --------------------------------------- */
.room-hero {
  aspect-ratio: 2 / 1;
  width: 100%;
  border-radius: var(--radius-lg);
  margin-block: var(--space-3) var(--space-5);
}

.room-body {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  align-items: start;
}
.room-body__details > :first-child { margin-top: 0; }

/* Room title repeated below the hero (design) — site display heading (sans, light). */
.room-body__title {
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.1;
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
}

/* Fact cards — Sleeps/bed and price. Design treatment: cream, centred, larger, SERIF, bigger icon. */
.room-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-4); }
.room-fact {
  flex: 1 1 180px;
  background: var(--color-surface-alt);
  border: 0;
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.25rem;
}
.room-fact__icon { width: 2.6rem; height: 2.6rem; color: var(--color-muted); margin-bottom: 0.5rem; }
.room-fact__lead { font-family: var(--font-body); font-weight: 700; font-size: 1.3rem; color: var(--color-text); }
.room-fact__sub { font-family: var(--font-body); color: var(--color-muted); font-size: 1.05rem; }
.room-fact__label { font-family: var(--font-body); font-size: 1.05rem; font-weight: 400; color: var(--color-muted); }
.room-fact__price { font-family: var(--font-body); font-weight: 700; font-size: 1.6rem; color: var(--color-text); }
.room-fact__price span { font-weight: 400; font-size: 1rem; color: var(--color-muted); }

/* Amenities — two columns, each row ruled ("This room offers"). Design: SERIF labels, bigger icons
   + text. columns:2 flows top-to-bottom then across. */
.room-offers__title { font-family: var(--font-body); font-size: 1.2rem; font-weight: 700; margin: var(--space-4) 0 0; }
.amenities { columns: 2; column-gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.amenities li {
  break-inside: avoid;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-body);
  font-size: 1.1rem;
}
.amenities__icon { width: 1.9rem; height: 1.9rem; flex: none; object-fit: contain; }

/* Gallery — on the cream band, 2-col grid (grows to 2×N for the room's full photo set). */
.room-gallery__title { font-size: 1.6rem; font-weight: var(--weight-display); margin-bottom: var(--space-3); }
.gallery__grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); }
.gallery__img, .gallery__grid .img-placeholder { aspect-ratio: 3 / 2; width: 100%; border-radius: var(--radius); }

@media (max-width: 720px) {
  /* minmax(0, 1fr), not a bare 1fr — the implied `auto` floor takes the booking card's min-content
     width and the track (and the card) then runs off the side of a 320px screen. */
  .room-body { grid-template-columns: minmax(0, 1fr); }
  .amenities { columns: 1; }
}

/* Narrow phones: one photo per row. Two 3:2 cells across a 275px rail is ~130px each — unusable
   for judging a room. A 16-photo gallery does get long as a result; the lightbox (see the lightbox
   component) is the escape hatch, letting a guest open one photo full-screen and step through the
   rest without scrolling the page at all. */
@media (max-width: 520px) {
  .gallery__grid { grid-template-columns: 1fr; gap: var(--space-3); }
}


/* component: site-footer */
/* SiteFooter ---------------------------------------------------------------- */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-ink); }
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 0.9fr 1fr 1.1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-6) var(--rail-pad) var(--space-5); /* a little taller */
}
.site-footer a { color: var(--color-footer-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.brand--footer__logo { height: 3rem; width: auto; display: block; } /* a touch bigger */

/* Short rule above each column (design). Small, consistent gap under the rule so every column's
   content is top-aligned (previously only the social column hugged its rule). */
.footer-col { font-size: 1rem; line-height: 1.95; position: relative; padding-top: 0.9rem; }
.footer-col::before { content: ""; position: absolute; top: 0; left: 0; width: 2.4rem; height: 1px; background: currentColor; opacity: 0.55; }
.footer-contact address { font-style: normal; margin: 0; }
.footer-legal p { margin: 0; }
.footer-social { list-style: none; margin: 0; padding-left: 0; } /* keep footer-col's padding-top; just drop the list indent */

/* Reviews column — two badges (brand mark + wordmark, stars + score), each links out. */
.footer-reviews { display: flex; flex-direction: column; gap: var(--space-2); }
/* Padding + matching negative margin: the highlight extends around the badge without shifting it out
   of line with the column rule. Hover AND keyboard focus get a soft lighter-green highlight (a
   translucent white lift over the sage) — clearly a link, no messy full-card underline. */
.review-badge { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none;
  padding: 0.5rem 0.65rem; margin: 0 -0.65rem; border-radius: 7px; transition: background-color 0.15s ease; }
/* Whole card is the link; keep its inner text un-underlined on hover/focus (outspecify the generic
   .site-footer a:hover underline — the card itself carries the affordance via its background). */
.site-footer a.review-badge:hover, .site-footer a.review-badge:focus-visible { background-color: rgba(255, 255, 255, 0.16); text-decoration: none; }
.review-badge__head { display: flex; align-items: center; gap: 0.5rem; }
.review-badge__logo { width: 26px; height: 26px; padding: 4px; background: #fff; border-radius: 50%; box-sizing: border-box; flex: none; }
.review-badge__name { font-size: 1.05rem; font-weight: 500; }
.review-badge__rating { display: flex; align-items: center; gap: 0.45rem; }
.review-badge__score { font-size: 0.9rem; opacity: 0.9; }

/* Partial-fill stars: empty row via ::before, gold overlay clipped to width = rating/5. */
.stars { position: relative; display: inline-block; font-size: 0.95rem; line-height: 1; letter-spacing: 2px; color: rgba(245, 243, 234, 0.4); white-space: nowrap; }
.stars::before { content: "★★★★★"; }
.stars__on { position: absolute; left: 0; top: 0; overflow: hidden; color: #f5b400; white-space: nowrap; }

/* Bottom row — copyright + agency credit, set off by a short rule in the same style as the columns. */
.site-footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--rail-pad) var(--space-5);
  font-size: 0.95rem;
}
.site-footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--rail-pad); width: 2.4rem; height: 1px; background: currentColor; opacity: 0.55; }
.footer-copy { margin: 0; opacity: 0.85; }
.footer-madeby { opacity: 0.9; }

@media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr 1fr; row-gap: var(--space-5); } }
@media (max-width: 720px) { .site-footer__inner { grid-template-columns: 1fr; } }


/* component: site-header */
/* SiteHeader ---------------------------------------------------------------- */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--rail-pad);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo { height: 2.4rem; width: auto; display: block; }

.site-nav { margin-left: var(--space-3); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; color: var(--color-heading); font-family: var(--font-heading); font-size: 1.15rem; }
.site-nav a:hover { color: var(--color-accent); }
.site-nav a[aria-current="page"] { color: var(--color-text); font-weight: 600; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* Language switch — a segmented control with a sliding white "inner pill" (the thumb). FIXED slot
   order (EN | IT via site.languages) so the thumb's position is meaningful and can slide between
   slots. Equal-width slots (inline-grid 1fr 1fr) let the thumb sit at a clean 0% / 100%. */
.lang-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-radius: 999px; padding: 4px; font-family: var(--font-heading); font-size: 0.9rem; background: #ece9e1; }
.lang-switch__opt { position: relative; z-index: 1; text-align: center; padding: 0.32rem 0.95rem; border-radius: 999px; text-decoration: none; white-space: nowrap; color: var(--color-muted); transition: color 0.2s ease; }
.lang-switch__opt.is-current { color: var(--color-text); }  /* the thumb, not a bg, supplies the white pill */
a.lang-switch__opt:hover { color: var(--color-accent); }
/* Desktop shows full language names; the short EN/IT codes are mobile-only (swapped in below). */
.lang-switch__abbr { display: none; }

/* Sliding thumb — the white inner pill. Rests under the active language; ui.js flips data-active on
   click so it glides to the chosen slot before the page follows the link (the toggle you SEE commit,
   even though a reload follows). With no JS it's simply parked on the correct side per page. */
.lang-switch__thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  background: #ffffff; border-radius: 999px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.lang-switch[data-active="it"] .lang-switch__thumb { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) { .lang-switch__thumb { transition: none; } }

/* Nav CTA — sentence case, a touch larger + more padding than the utility pills. Fixed min-width
   so the EN ("Rooms & Suites") and IT ("Camere") labels occupy the same space and the language
   switch beside it doesn't jump position when the language changes. */
/* Fixed min-width (in em, so it tracks the button's own font) locks the CTA to one width in BOTH
   languages — "Rooms & Suites" is the wider label (~182px @ this size); the shorter "Camere"
   clamps to the same box, so switching language never jumps the layout. */
.nav-book { text-transform: none; letter-spacing: 0.015em; font-size: 1.05rem; padding: 0.6em 1.35em; min-width: 10em; }

/* Solid variant (inner pages): opaque bar + hairline */
.site-header--solid { background: var(--color-bg); border-bottom: 1px solid var(--color-line); }

/* Overlay variant (homepage): transparent, floats over the hero photo bleed */
.site-header--overlay {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 30;
  background: transparent;
}

@media (max-width: 720px) {
  /* On small screens the overlay would collide with the stacked hero, so go solid. */
  .site-header--overlay { position: static; background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { margin-left: 0; order: 3; flex-basis: 100%; }
  /* The nav drops to its own full-width row here. Trim the link size and gap so all four labels
     stay on one line in BOTH languages (the IT labels run slightly longer than EN, but EN can
     wrap too at narrow widths). */
  /* Fluid link size: scales with viewport so the widest label set (IT) always fits one line down
     to 320px, but never exceeds 1.05rem. The 0.85rem floor keeps the smallest phones legible;
     between ~367px and ~440px it grows toward the 1.05rem cap. Replaces stepped breakpoints so
     there's no width where the labels overrun. */
  .site-nav a { font-size: clamp(0.85rem, 0.3rem + 2.4vw, 1.05rem); white-space: nowrap; }
  /* The ul spans the full row, so instead of packing the four labels left with a tight gap,
     spread them edge-to-edge — leftover space distributes BETWEEN items. The gap is now just a
     comfortable minimum the labels never fall below. nowrap keeps them on one line. */
  .site-nav ul { gap: var(--space-2); flex-wrap: nowrap; justify-content: space-between; }
  .site-header__actions { margin-left: auto; gap: var(--space-1); }
  /* Slim the CTA on phones: drop the desktop min-width (its label-jump guard is moot here)
     and trim font/padding so the pill fits. nowrap keeps the label on one line — without it
     the squeezed pill wraps into a blob. */
  /* Keep the desktop label-jump guard, just sized for mobile: min-width locks the CTA to the wider
     EN "Rooms & Suites" width so the shorter IT "Camere" clamps to match. Equal CTA width => the
     right-anchored actions cluster is language-invariant => the language toggle never shifts
     position between EN and IT (which would otherwise break the slide-across-navigation effect). */
  .nav-book { min-width: 146px; font-size: 0.95rem; padding: 0.5em 0.95em; letter-spacing: 0; white-space: nowrap; }
  /* The full "English / Italiano" switch is the real space-hog beside the CTA and won't fit at
     320px. Swap to short EN / IT codes so the pair sits one row with room to spare. */
  .lang-switch__full { display: none; }
  .lang-switch__abbr { display: inline; }
}

@media (max-width: 419px) {
  /* Narrowest phones: the fluid clamp (above) already shrinks the links to fit; here we only
     tighten the MINIMUM gap so space-between has a smaller floor on the widest label set (IT).
     No font-size override — that would defeat the clamp. */
  .site-nav ul { gap: var(--space-1); }
}


/* legacy (pending componentisation) */
/* ==========================================================================
   Legacy holding pen — rows NOT yet extracted into components.
   These keep the page working as we componentise top-to-bottom; peel each block out
   into src/components/<name>/<name>.css as it's rebuilt to spec, and delete it here.
   Currently pending: About split, Rooms grid/card, Restaurant feature, Packages,
   Testimonials, Footer, and the inner-page components.
   ========================================================================== */

/* --- Inner-page components (shared shell — on-brand via tokens, not final) -- */
/* Shared inner-page title (About / Contact / Rooms / Room detail) — canon: large, light display
   weight, deep-brown ink, with a THIN terracotta underline that hugs the word. */
.page-head { margin-bottom: var(--space-4); }
.page-head h1 {
  display: inline-block;
  margin: 0;
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.2rem);
  font-weight: 200;
  line-height: 1;            /* hug the text — the default 1.15 line-box dropped the underline low */
  color: var(--color-heading);
  padding-bottom: 0.1em;     /* tight gap between the word and its underline */
  border-bottom: 2px solid var(--color-accent);
}
.page-intro { max-width: var(--measure); margin-top: var(--space-3); color: var(--color-muted); font-size: 1.1rem; }

/* Lead wrapper for pages whose body is full-width bands (About): a centred title block that
   doesn't carry the big bottom padding of `main > .container`, so the first band sits close. */
/* About's title sits on the SAME 1400 rail as the header + the bands below (rail-pad), so "About"
   left-aligns under the logo — not the narrow centred column it used to float in. Symmetric
   vertical padding centres the title in the white band between the header and the first cream row. */
.page-lead { padding: var(--space-4) var(--rail-pad); }
.page-lead .page-head { margin-bottom: 0; }

.content-sections { display: grid; gap: var(--space-5); }
.content-section { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; align-items: center; }
.content-section--alt { direction: rtl; }
.content-section--alt > * { direction: ltr; }
.content-section .img-placeholder, .content-section .img { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); width: 100%; }

.sub-nav { position: sticky; top: 0; background: var(--color-bg); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line); margin-bottom: var(--space-4); z-index: 10; }
.sub-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.sub-nav a { text-decoration: none; font-family: var(--font-heading); font-size: 0.9rem; color: var(--color-text); }
.sub-nav a.is-active { color: var(--color-accent); font-weight: 600; }

.breadcrumb { font-size: 0.9rem; color: var(--color-muted); margin-bottom: var(--space-2); }
.breadcrumb a { text-decoration: none; }

/* Contact cards — cream, centred, terracotta icon over the value; no text label (contact.pdf). */
.contact-methods { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, 1fr); margin-block: var(--space-5); }
.contact-card {
  background: var(--color-surface-alt);
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.contact-card__icon { width: 3.1rem; height: 3.1rem; color: var(--color-accent); }
.contact-card p, .contact-card address { margin: 0; font-style: normal; color: var(--color-text); font-size: 1.05rem; line-height: 1.5; }
.contact-card a { color: var(--color-text); text-decoration: none; }
.contact-card a:hover { color: var(--color-accent); text-decoration: underline; }

/* Map (a STATIC image that links out — never an embed) + location photo, EQUAL height:
   same aspect-ratio in equal-width columns => identical heights. */
.find-us__grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; margin: var(--space-3) 0 var(--space-6); }
.find-us__map-link { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.find-us__map, .find-us__photo {
  display: block; width: 100%; aspect-ratio: 4 / 3; height: auto;
  object-fit: cover; border-radius: var(--radius-lg);
}
.menu-download { margin-top: var(--space-4); }

/* Legal pages (Terms / Privacy) — a single readable prose column on the FAQ page-lead shell. */
.legal { max-width: 50rem; }
.legal__intro { color: var(--color-text); font-size: 1.2rem; line-height: 1.7; margin: 0 0 var(--space-3); }
.legal__updated { color: var(--color-muted); font-size: 0.95rem; letter-spacing: 0.02em; margin: 0 0 var(--space-6); }
.legal__section { margin-bottom: var(--space-6); }
.legal__section:last-child { margin-bottom: 0; }
.legal__heading {
  font-family: var(--font-heading); font-weight: 200; font-size: 1.6rem; line-height: 1.25;
  color: var(--color-heading); margin: 0 0 var(--space-3);
}
.legal__section p { margin: 0 0 0.9rem; color: var(--color-muted); font-size: 1.08rem; line-height: 1.72; }
.legal__section p:last-child { margin-bottom: 0; }

/* --- Responsive (legacy rows) --------------------------------------------- */
/* Contact cards break EARLY — at 900px, not the usual 720px. Three cards share the rail, so each
   one is only ~a third of it: at 760px that's a 215px card which, minus the --space-4 inset, left
   the phone number ~125px of measure and wrapped "+39 0344 86366" onto three lines. By 900px the
   cards are already too tight to read, so they stack there and the inset relaxes with them. */
@media (max-width: 900px) {
  .contact-methods { grid-template-columns: 1fr; margin-block: var(--space-4); }
  .contact-card { padding: var(--space-4) var(--space-3); }
}

@media (max-width: 720px) {
  .find-us__grid,
  .content-section { grid-template-columns: 1fr; }
  .content-section--alt { direction: ltr; }
}