/* =========================================================
   La Rocca in Chianti — stylesheet
   Palette grounded in the house's materials: deep olive,
   cotto terracotta, limewash plaster, warm stone.
   ========================================================= */

:root {
  /* --- colour ------------------------------------------- */
  --calce:      #f3ede1;   /* limewash plaster — page base        */
  --calce-2:    #efe7d8;   /* slightly deeper limewash            */
  --pietra:     #e7dccb;   /* warm stone — cards on light         */
  --olivo:      #3a3f2c;   /* deep olive — dark sections & ink    */
  --olivo-2:    #4c5339;   /* mid olive                           */
  --olivo-soft: #6d7355;   /* muted olive — borders/labels        */
  /* Scurito di un soffio (era #b25a34) per passare WCAG AA: a #b25a34 il
     crema sul bottone e il terracotta sul crema stavano entrambi a 4,1:1,
     sotto il 4,5:1 che serve al testo piccolo — e ci cadevano le etichette
     di sezione, i prezzi delle degustazioni e ogni pulsante principale.
     Stessa tinta e saturazione, solo 4% di luminosita' in meno: ora 4,55:1
     su entrambi i fondi chiari (4,79:1 su --calce, 4,54:1 su --calce-2)
     e in entrambi i versi. Per tornare indietro basta rimettere #b25a34. */
  --cotto:      #a1522f;   /* terracotta — primary accent         */
  --cotto-dark: #94431f;   /* deep terracotta — hover             */
  --rosa:       #cc9182;   /* antique rose — soft secondary       */
  --inchiostro: #2a2620;   /* near-black warm brown — body text   */
  --inchiostro-2:#5a5346;  /* muted text                          */
  --cream-line: rgba(58,63,44,.14);
  --dark-line:  rgba(243,237,225,.16);

  /* --- type --------------------------------------------- */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Figtree", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* Fraunces ships quirky swash letterforms on its WONK axis — the
     lowercase "f" above all. Pinned to 0 the face reads as an ordinary
     serif. The font is also requested at WONK=0 in the HTML; this is
     the belt to that pair of braces. */
  --display-vf: "WONK" 0, "SOFT" 0;

  /* --- metrics ------------------------------------------ */
  --wrap: 1180px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  /* the fixed header's height, in one place: the drop-down menu hangs
     from it, anchors scroll clear of it, main.js reads it too */
  --header-h: 76px;
  --radius: 4px;
  --radius-lg: 8px;
  /* Cut roughly a third from the old clamp(4rem, 9vw, 8rem): the gap
     between chapters was so wide it broke the sense of one continuous
     house, forcing the eye to re-orient at every seam. Every other
     section-level space below is trimmed in the same proportion, so
     the page keeps its own rhythm instead of just losing air in one place. */
  --section-y: clamp(2.75rem, 6vw, 5.25rem);
  --ease: cubic-bezier(.22,.61,.36,1);
  /* the floor for anything a finger has to hit — nav toggle, map pins,
     the language buttons once they go finger-sized */
  --tap: 44px;
  /* --rosa is right for labels but only reaches 4.12:1 on the olive, and
     3.64:1 once a panel lightens the ground — under the 4.5:1 that small
     bold text needs. Same hue and saturation, lifted until it clears it:
     4.66:1 on the tastings panel, 5.27:1 on plain olive. */
  --rosa-ink:   #d8aa9e;
}

/* --- reset ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Anchors JUMP, they never glide: gliding past every section makes
   the visitor feel they have skipped something and must go back. */
html { scroll-behavior: auto; scroll-padding-top: calc(var(--header-h) + 8px); -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  color: var(--inchiostro);
  background: var(--calce);
  line-height: 1.6;
  font-size: clamp(1rem, 0.55vw + 0.9rem, 1.075rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3,
.brand-name, .room-name, .cx-name, .cx-full, .channel-title,
.pull-quote p, .review-text, .review-author, .extra-name, .tasting-panel-title,
.map-street, .slideshow-caption, .footer-tag, .lightbox-figure figcaption {
  font-variation-settings: var(--display-vf);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--olivo);
}

h2 { font-size: clamp(1.85rem, 3.2vw, 2.9rem); }
h3 { font-size: 1.2rem; letter-spacing: 0; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  /* on a notched phone in landscape the cut-out eats into the gutter */
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

/* --- eyebrow / labels ---------------------------------- */
.eyebrow {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cotto);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--cotto);
  display: inline-block;
}
.eyebrow-light { color: var(--rosa-ink); }
.eyebrow-light::before { background: var(--rosa-ink); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  --btn-fg: var(--calce);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: transform .35s var(--ease), background-color .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn-solid { background: var(--cotto); color: var(--calce); }
.btn-solid:hover { background: var(--cotto-dark); transform: translateY(-2px); }
.btn-ghost { background: none; border-color: currentColor; color: var(--calce); }
.btn-ghost:hover { background: rgba(243,237,225,.12); transform: translateY(-2px); }
.btn-sm { padding: 0.55em 1.05em; font-size: 0.82rem; }
@media (pointer: coarse) { .btn-sm { min-height: var(--tap); } }
.btn-block { width: 100%; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
/* The navigation sits on top of a photograph. Without a band of its own
   the links dissolve into the picture, so the bar is ALWAYS drawn: a deep
   olive strip over the hero, turning to limewash once the page scrolls. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  /* --sbw is set only while the page is pinned behind an overlay: it is
     the width the scrollbar used to take, given back so the bar does
     not slide sideways when the lightbox or the menu opens. */
  padding-right: var(--sbw, 0px);
  z-index: 100;
  background: rgba(29,32,21,.74);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid rgba(243,237,225,.14);
  transition: background-color .4s var(--ease), border-color .4s, box-shadow .4s;
}
.site-header.scrolled {
  background: rgba(243,237,225,.94);
  border-bottom-color: var(--cream-line);
  box-shadow: 0 1px 0 var(--cream-line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 0.7rem; margin-right: auto; color: var(--calce); }
.site-header.scrolled .brand { color: var(--olivo); }
.brand-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--cotto);
  flex: none;
}
.site-header.scrolled .brand-mark { color: var(--cotto); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--display); font-size: 1.32rem; font-weight: 600; letter-spacing: -0.01em; }
.brand-sub { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: .82; font-weight: 500; }

.nav-links { list-style: none; display: flex; gap: 1.6rem; padding: 0; }
.nav-links a {
  color: var(--calce);
  font-weight: 500;
  font-size: 0.94rem;
  padding: 0.35em 0;
  position: relative;
  transition: color .25s;
}
.site-header.scrolled .nav-links a { color: var(--inchiostro); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1.5px; background: var(--cotto);
  transition: width .3s var(--ease);
}
.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: var(--cotto); }

.header-right { display: flex; align-items: center; gap: 0.9rem; }

/* language switcher */
.lang-switcher { display: flex; gap: 0.15rem; align-items: center; }
.lang-btn {
  background: none; border: 0;
  padding: 0.3em 0.4em;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--calce);
  opacity: .68;
  border-radius: 3px;
  transition: opacity .2s, color .2s, background-color .2s;
}
.site-header.scrolled .lang-btn { color: var(--inchiostro-2); }
.lang-btn:hover { opacity: 1; }
.lang-btn.active { opacity: 1; color: var(--cotto); }
.site-header.scrolled .lang-btn.active { color: var(--cotto); }

.nav-cta { display: none; }
/* the bar has room for it, and the hamburger isn't shown, only from
   901px up — below that it stayed dead weight taking up header space */
@media (min-width: 901px) {
  .nav-cta { display: inline-flex; }
}

.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: var(--tap); height: var(--tap); background: none; border: 0;
}
.nav-toggle span { display: block; height: 2px; width: 24px; background: var(--calce); transition: transform .3s, opacity .3s; margin-inline: auto; }
.site-header.scrolled .nav-toggle span { background: var(--olivo); }

/* backdrop behind the open mobile menu: dims the page underneath so the
   drop-down reads as its own layer, not just another block stacked on
   whatever section happens to be in view. Sits under the header (and
   therefore under .nav, which lives inside it) and over the page. */
.nav-scrim {
  position: fixed; inset: 0;
  z-index: 90;
  background: rgba(20,22,15,.45);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
  pointer-events: none;
}
.nav-scrim.is-visible {
  opacity: 1; visibility: visible;
  pointer-events: auto;
}

/* =========================================================
   HERO
   ========================================================= */
/* The hero block is anchored by its TOP, not centred. Centring made the
   whole headline slide up and down as the translations wrapped to a
   different number of lines; anchored, every language starts at the same
   height and only the buttons underneath move. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-start;
  color: var(--calce);
  overflow: hidden;            /* the media grows and drifts inside */
  isolation: isolate;
}
/* The media is oversized on purpose: it can sink and swell with the
   scroll without ever exposing an edge. main.js drives the transform. */
/* The overhang at the top must exceed the largest downward drift
   main.js applies (0.20 × hero height), or the page background
   would show through above the photograph. */
.hero-media {
  position: absolute; inset: -26% 0 -6% 0;
  z-index: -1;
  will-change: transform;
}
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transform-origin: 55% 45%;
  will-change: transform;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(35,38,26,.42) 0%, rgba(35,38,26,.15) 30%, rgba(35,38,26,.35) 68%, rgba(35,38,26,.78) 100%),
    linear-gradient(90deg, rgba(35,38,26,.55) 0%, rgba(35,38,26,.05) 55%);
}
/* A vignette that tightens as you scroll, pulling you into the frame */
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(24,26,18,.72) 100%);
  opacity: calc(0.35 + var(--hero-p, 0) * 0.55);
}
/* padding-bottom trimmed from 7rem to keep pace with --section-y below it —
   the hero was leaving its own private gap before the next section even
   started its own padding. padding-top is untouched: it centres the
   headline block against the photo, it has nothing to do with the seam. */
.hero-inner { padding-top: clamp(8.5rem, 27vh, 15rem); padding-bottom: 5rem; }
.hero-card { max-width: 41rem; will-change: transform, opacity; }

/* The eyebrow lies directly on the photograph, where a thin coloured
   rule and 0.74rem letters simply vanish. A blurred, bordered capsule
   used to give it a surface of its own, but a floating pill over a
   photograph reads as a UI component pasted onto the scene, not as
   type printed on a page — every other eyebrow on the site sits
   straight on its background. The text carries itself instead: a
   soft dark text-shadow does the legibility work the box used to do,
   and the letters go a touch bigger and heavier to hold their own
   against the picture. Shared with the tastings page hero (.t-hero),
   which loads this sheet first and carries no override of its own. */
.hero .eyebrow, .t-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--calce);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .16em;
  gap: .7em;
  text-shadow: 0 1px 12px rgba(29,32,21,.55);
}
.hero .eyebrow::before, .t-hero .eyebrow::before { background: var(--rosa); width: 18px; }

/* the scroll invitation at the foot of the hero */
.hero-scroll {
  position: absolute; right: var(--gutter); bottom: 4.8rem;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  color: rgba(243,237,225,.8);
  opacity: calc(1 - var(--hero-p, 0) * 2.2);
  pointer-events: none;
}
.hero-scroll-label { font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; }
.hero-scroll-line { width: 1px; height: 46px; background: linear-gradient(180deg, rgba(243,237,225,.75), transparent); position: relative; overflow: hidden; }
.hero-scroll-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--cotto);
  animation: scrollTrickle 2.4s var(--ease) infinite;
}
@keyframes scrollTrickle {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
.hero-title {
  color: var(--calce);
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  font-weight: 500;
  font-optical-sizing: auto;
  margin: 0.2em 0 0.55em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(20,22,14,.55);
}
.hero-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  max-width: 34rem;
  color: rgba(243,237,225,.95);
  margin-bottom: 2rem;
  text-shadow: 0 1px 12px rgba(20,22,14,.5);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* waymarker signature */
.waymarker { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 1.6rem; }
.waymarker-inner { display: flex; align-items: center; gap: 1rem; }
.waymarker-inner::before, .waymarker-inner::after {
  content: ""; height: 1px; background: rgba(243,237,225,.4); flex: 1;
}
.wm-label {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(243,237,225,.86); white-space: nowrap; font-weight: 500;
}
.wm-node { width: 6px; height: 6px; background: var(--cotto); transform: rotate(45deg); flex: none; }

/* =========================================================
   SECTIONS (light / stone / dark)
   ========================================================= */
.section { padding-block: var(--section-y); }
.section-light { background: var(--calce); }
.section-stone { background: var(--calce-2); }
.section-dark { background: var(--olivo); color: var(--calce); }
.section-dark h2, .section-dark h3 { color: var(--calce); }

/* trimmed with --section-y, same ~30% cut, so the head doesn't sit
   further from its own section's body than the sections sit from
   each other */
.section-head { max-width: 44rem; margin-bottom: clamp(1.5rem, 2.8vw, 2.4rem); }
.section-intro { color: var(--inchiostro-2); font-size: 1.075rem; margin-top: 0.9rem; }
.section-dark .section-intro { color: rgba(243,237,225,.8); }

/* --- About --------------------------------------------- */
.about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-text h2 { margin-bottom: 1.1rem; }
.about-text p { margin-bottom: 1.05rem; color: var(--inchiostro-2); }
.about-text .about-lead { font-size: 1.14rem; line-height: 1.5; color: var(--olivo-2); font-weight: 500; }
/* Only a phone ever needs these; a wide screen shows everything. */
.about-toggle, .reviews-toggle {
  display: none;
  align-items: center; gap: 0.4rem;
  min-height: var(--tap);
  margin: 0.2rem 0 0.4rem;
  padding: 0.55em 0;
  background: none; border: 0;
  color: var(--cotto); font: inherit; font-weight: 600;
  letter-spacing: 0.01em; cursor: pointer;
}
.about-toggle::after, .reviews-toggle::after {
  content: ""; width: 0.5em; height: 0.5em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.2s ease;
}
.about-toggle[aria-expanded="true"]::after,
.reviews-toggle[aria-expanded="true"]::after { transform: translateY(0.1em) rotate(-135deg); }
.pull-quote {
  margin-top: 2rem; padding-left: 1.4rem;
  border-left: 2px solid var(--cotto);
}
.pull-quote p {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.35;
  color: var(--olivo); margin-bottom: 0.6rem;
}
.pull-quote cite { font-style: normal; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--cotto); }

/* The photograph drifts in at scale(1.12) (see driftIn, further down).
   Nothing was cropping it, so on a phone it reached three pixels past the
   right edge and the whole page could be dragged sideways. The frame now
   clips it — and the radius and the shadow move up here, onto the frame,
   so the picture keeps its lift instead of losing it to the clip. */
.about-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px -24px rgba(42,38,32,.5);
}
.about-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg); cursor: zoom-in; }
.media-tag {
  position: absolute; left: 1rem; bottom: 1rem;
  background: var(--calce); color: var(--olivo);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.5em 0.9em; border-radius: 3px;
}

/* --- Rooms ---------------------------------------------
   Two TYPES of room, side by side. Never a unit count, never
   a price grid, never a calendar.                            */
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(1.3rem, 2.5vw, 2.2rem); }
.rooms-disclaimer {
  max-width: 42rem; margin: 0.9rem 0 0;
  text-align: left; font-size: .86rem; color: var(--inchiostro-2);
}
.rooms-disclaimer:empty { display: none; }
.room-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--cream-line);
  box-shadow: 0 14px 34px -28px rgba(42,38,32,.55);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.room-card:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -28px rgba(42,38,32,.6); }
.room-figure { position: relative; overflow: hidden; aspect-ratio: 3/2; cursor: zoom-in; }
.room-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.room-card:hover .room-figure img { transform: scale(1.05); }
.room-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.room-name { font-family: var(--display); font-size: 1.4rem; font-weight: 600; color: var(--olivo); margin-bottom: 0.5rem; }
.room-specs { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-bottom: 0.9rem; }
.room-spec { font-size: 0.82rem; color: var(--inchiostro-2); display: inline-flex; align-items: center; gap: 0.35em; }
.room-spec::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--cotto); }
.room-desc { color: var(--inchiostro-2); font-size: 0.96rem; margin-bottom: 1.2rem; flex: 1; }
.room-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--cream-line); padding-top: 1rem; }
.room-foot { align-items: center; }
.room-from { font-size: 0.8rem; color: var(--inchiostro-2); min-width: 0; }
.room-from strong { font-family: var(--display); font-size: 1.35rem; font-weight: 600; color: var(--cotto); display: block; }
.room-price-note { display: block; font-size: .76rem; line-height: 1.35; color: var(--inchiostro-2); }
.room-cta { flex: none; }

/* --- Services ------------------------------------------ */
/* --- the tastings, promoted out of the lists -------------
   This section is otherwise all text on dark olive, so the one
   photograph in it carries the whole hierarchy: squint at the
   section and the panel is what you see. It leads, the two
   utility lists follow, and the generous margin below is what
   keeps it from reading as a fourth list item. The photo column
   is capped at 21rem because the source file is only 570px wide
   — stretched across half the page it would go soft. */
.tasting-panel {
  display: grid;
  grid-template-columns: minmax(0, 21rem) 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  /* Left aligned and capped: the section head above runs to 44rem and the two
     lists below to the full 1180px, so the panel sits deliberately between
     them. Left to stretch, its text column was 760px wide for a 46ch measure
     and a third of the panel was empty. */
  max-width: 60rem;
  align-items: center;
  padding: clamp(0.9rem, 1.6vw, 1.3rem);
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  background: rgba(243, 237, 225, .045);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.tasting-panel:hover {
  background: rgba(243, 237, 225, .075);
  border-color: rgba(204, 145, 130, .45);
}
.tasting-panel-media {
  display: block; overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  background: var(--olivo-2);
}
.tasting-panel-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.06) contrast(1.04);
  transition: transform .8s var(--ease);
}
.tasting-panel:hover .tasting-panel-media img { transform: scale(1.05); }
.tasting-panel-body { display: block; }
.tasting-panel-title {
  display: block;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.14; letter-spacing: -0.012em;
  color: var(--calce); text-wrap: balance;
  margin-bottom: .55rem;
}
.tasting-panel-lead {
  display: block; max-width: 46ch;
  color: rgba(243, 237, 225, .78);
  font-size: 1rem; line-height: 1.6;
}
.tasting-panel-cta {
  display: inline-flex; align-items: center; gap: .45em;
  margin-top: 1.1rem;
  font-size: .84rem; font-weight: 700; letter-spacing: .06em;
  color: var(--rosa-ink);
}
.tasting-panel-cta svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.tasting-panel:hover .tasting-panel-cta svg { transform: translateX(4px); }
@media (pointer: coarse) { .tasting-panel-cta { min-height: var(--tap); } }
@media (max-width: 900px) { .tasting-panel { grid-template-columns: minmax(0, 15rem) 1fr; } }
@media (max-width: 720px) { .tasting-panel { grid-template-columns: 1fr; gap: 1.1rem; } }

/* align-items: start — the two columns don't run the same length (the
   amenities list, set in two columns, is taller than the extras list
   ending on "Ristoranti"), and the default stretch was pulling the
   shorter column's box down to match anyway, leaving a slab of empty
   dark olive under it before the section's own padding even started. */
.services-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.services-sub {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--rosa-ink);
}
.amenities, .extras { list-style: none; padding: 0; margin-top: 1.4rem; }
.amenities { columns: 2; column-gap: 2rem; }
.amenities li {
  break-inside: avoid; padding: 0.5rem 0 0.5rem 1.6rem; position: relative;
  color: rgba(243,237,225,.9); font-size: 0.98rem;
}
.amenities li::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 8px; height: 8px; border: 1px solid var(--rosa); transform: rotate(45deg);
}
.amenities li strong { color: var(--calce); font-weight: 600; }
.extras li {
  padding: 1.05rem 0; border-bottom: 1px solid var(--dark-line);
}
.extra-name {
  display: block; color: var(--calce); font-family: var(--display);
  font-size: 1.12rem; font-weight: 600; margin-bottom: .3rem;
}
.extra-desc { display: block; font-size: 0.92rem; color: rgba(243,237,225,.68); }

/* the one note that leads somewhere: the tastings page */
.extra-link { border-bottom-color: rgba(204,145,130,.4); }
.extra-a {
  display: block; margin: -.4rem -.9rem; padding: .4rem .9rem;
  border-radius: var(--radius); transition: background-color .3s;
}
.extra-a:hover { background: rgba(243,237,225,.06); }
.extra-cta {
  display: inline-flex; align-items: center; gap: .45em;
  margin-top: .7rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  color: var(--rosa-ink);
}
.extra-cta svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.extra-a:hover .extra-cta svg { transform: translateX(4px); }

/* --- Gallery: a slideshow that runs by itself -----------
   The images advance on their own and dissolve into one
   another, drifting slowly while they are on screen.        */
/* trimmed with --section-y, same ~30% cut */
.section-gallery { padding-bottom: clamp(2.1rem, 4.2vw, 3.5rem); }
.slideshow {
  position: relative;
  width: min(100% - 2 * var(--gutter), 1500px);
  margin-inline: auto;
}
.slideshow-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #241f18;
  cursor: zoom-in;
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.85);
}

.slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transition: opacity .7s var(--ease);
  will-change: opacity;
}
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide.is-active { opacity: 1; }
/* the active image keeps drifting — that is what makes it feel alive */
.slide.is-active img { animation: kenBurns 5.5s var(--ease) forwards; }
@keyframes kenBurns {
  from { transform: scale(1.005) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.4%, -1.2%, 0); }
}

.slideshow-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid rgba(243,237,225,.35); border-radius: 50%;
  background: rgba(28,30,22,.4); color: var(--calce);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .35s, background-color .25s, border-color .25s;
}
.slideshow-arrow svg { width: 22px; height: 22px; }
.slideshow-prev { left: 1rem; }
.slideshow-next { right: 1rem; }
.slideshow:hover .slideshow-arrow,
.slideshow-arrow:focus-visible { opacity: 1; }
.slideshow-arrow:hover { background: var(--cotto); border-color: var(--cotto); }
/* hover, not width: a 768-834px tablet has no hover to reveal these on,
   even though it is far wider than the old 760px cutoff was */
@media (hover: none) { .slideshow-arrow { opacity: 1; width: var(--tap); height: var(--tap); } }

.slideshow-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3.5rem 1.4rem 1.15rem;
  font-family: var(--display); font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--calce);
  background: linear-gradient(180deg, transparent, rgba(20,22,15,.72));
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  pointer-events: none;
}
.slideshow-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 1rem; margin-top: 1rem;
}
/* The gallery sits on the pale limewash of the rest of the page, so that
   the eye is not thrown from the photograph of the hero straight into a
   slab of dark olive. The controls are inked accordingly. */
/* Sola icona: sotto le fotografie non deve esserci una scritta. Il
   pulsante resta pero' obbligatorio, perche' le immagini avanzano da
   sole; il suo nome accessibile arriva da aria-label. */
.slideshow-toggle {
  flex: none;
  background: none; border: 0; padding: 0;
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  color: var(--inchiostro-2);
  opacity: .55;
  transition: color .25s, opacity .25s;
}
.slideshow-toggle svg { width: 17px; height: 17px; display: block; }
.slideshow-toggle .ic-play { display: none; }
.slideshow-toggle.is-stopped .ic-pause { display: none; }
.slideshow-toggle.is-stopped .ic-play { display: block; }
.slideshow-toggle.is-stopped { opacity: 1; color: var(--cotto); }
.slideshow-toggle:hover, .slideshow-toggle:focus-visible { color: var(--cotto); opacity: 1; }
/* Sixteen photographs meant sixteen dots: they wrapped onto a second row
   and collided with the caption, and nobody navigates a gallery by
   counting dots anyway. The arrows, the swipe and the pause button do
   the whole job. Restore `display: flex` to bring them back. */
.slideshow-dots { display: none; flex-wrap: wrap; gap: .1rem; }
.slide-dot {
  /* a 9px dot inside a roomier hit area: visually small, still tappable.
     Sixteen dots cannot each be 44px wide on a phone, so the arrows and
     the swipe gesture carry the load there. The ::after below stretches
     the real hit area to 44px without widening the dot's own footprint,
     which would force the row to wrap. */
  position: relative;
  width: 26px; height: 32px; padding: 0; border: 0; background: none;
  display: grid; place-items: center;
}
.slide-dot::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: var(--tap); height: var(--tap);
}
.slide-dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(58,63,44,.26);
  transition: background-color .3s, transform .3s;
}
.slide-dot.is-active::before { background: var(--cotto); transform: scale(1.35); }
.slide-dot:hover::before { background: var(--olivo-soft); }

/* --- Contact -------------------------------------------
   Calling, WhatsApp and the form carry the SAME weight. Writing
   directly is a first-class option, not a fallback.            */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }
.contact-direct { display: flex; flex-direction: column; gap: 1rem; }

.channel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: .2rem 1.1rem;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  background: #fff;
  border: 1px solid var(--cream-line);
  border-left: 3px solid var(--cotto);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px -34px rgba(42,38,32,.6);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .3s;
}
.channel:hover { transform: translateY(-4px); box-shadow: 0 28px 52px -32px rgba(42,38,32,.6); }
.channel-wa { border-left-color: #3fa46a; }
.channel-ic {
  grid-row: 1 / span 2;
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(178,90,52,.1); color: var(--cotto);
}
.channel-wa .channel-ic { background: rgba(63,164,106,.12); color: #2f8756; }
.channel-ic svg { width: 23px; height: 23px; }
.channel-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.channel-title { font-family: var(--display); font-size: 1.22rem; font-weight: 600; color: var(--olivo); line-height: 1.15; }
.channel-num {
  font-size: 1.02rem; font-weight: 600; color: var(--cotto);
  letter-spacing: .01em;
}
.channel-wa .channel-num { color: #2f8756; }
.channel-text { font-size: .9rem; color: var(--inchiostro-2); margin-top: .3rem; }
.channel-cta {
  grid-column: 2; justify-self: start;
  margin-top: .85rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--olivo);
  border-bottom: 1.5px solid var(--cotto); padding-bottom: 2px;
  transition: color .25s;
}
.channel-wa .channel-cta { border-bottom-color: #3fa46a; }
.channel:hover .channel-cta { color: var(--cotto); }
.channel-wa:hover .channel-cta { color: #2f8756; }
@media (max-width: 460px) {
  .channel { grid-template-columns: 1fr; }
  .channel-ic { grid-row: auto; margin-bottom: .5rem; }
  .channel-cta { grid-column: 1; }
}

.contact-notes { list-style: none; padding: 0; margin-top: .6rem; display: grid; gap: 1.05rem; }
.contact-notes h3 { color: var(--olivo); margin-bottom: 0.2rem; font-size: 1rem; }
.contact-notes p { color: var(--inchiostro-2); font-size: 0.92rem; }
.avail-link:empty { display: none; }
.avail-link { margin-top: .7rem; }

/* --- Form ---------------------------------------------- */
.contact-form-wrap {
  position: relative;
  background: #fff; border: 1px solid var(--cream-line);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: 0 22px 46px -34px rgba(42,38,32,.55);
}
/* the little "or" that keeps the two routes level with each other */
.contact-or {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--calce-2); color: var(--inchiostro-2);
  padding: .25em 1em;
  font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  border-radius: 20px; border: 1px solid var(--cream-line);
}
@media (min-width: 861px) {
  .contact-or { top: 50%; left: 0; transform: translate(-50%, -50%) rotate(-90deg); }
}
.inquiry-form h3 { color: var(--olivo); margin-bottom: .5rem; font-size: 1.32rem; }
.form-intro { color: var(--inchiostro-2); font-size: .93rem; margin-bottom: 1.4rem; }
.field { margin-bottom: 1.05rem; }
.field label .opt {
  font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--inchiostro-2);
}
/* honeypot — kept out of sight and out of the accessibility tree */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: .9rem; font-size: .9rem; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status strong { display: block; font-family: var(--display); font-size: 1.05rem; }
.form-status.is-ok  { color: #2f6b45; background: rgba(63,164,106,.1); border-left: 3px solid #3fa46a; padding: .8rem 1rem; border-radius: var(--radius); }
.form-status.is-err { color: var(--cotto-dark); background: rgba(178,90,52,.1); border-left: 3px solid var(--cotto); padding: .8rem 1rem; border-radius: var(--radius); }
.form-status.is-warn { color: var(--cotto-dark); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--inchiostro-2); margin-bottom: 0.35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.7em 0.85em;
  font: inherit; font-size: 0.95rem; color: var(--inchiostro);
  background: var(--calce); border: 1px solid var(--cream-line); border-radius: var(--radius);
  transition: border-color .25s, box-shadow .25s;
}
/* 0.95rem computes to 15.2px, and iOS Safari zooms the whole page the
   instant a guest taps an input under 16px. Touch/small screens only —
   the desktop design keeps its own smaller type. */
@media (max-width: 900px), (pointer: coarse) {
  .field input, .field select, .field textarea { font-size: 16px; }
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cotto); box-shadow: 0 0 0 3px rgba(178,90,52,.14); background: #fff;
}
.field textarea { resize: vertical; }
.inquiry-form .btn { margin-top: 0.4rem; }
.form-hint { font-size: 0.8rem; color: var(--inchiostro-2); margin-top: 0.8rem; text-align: center; }

/* --- Reviews ------------------------------------------- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
}
.review-card {
  background: #fff; border: 1px solid var(--cream-line); border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.9rem;
  box-shadow: 0 14px 34px -30px rgba(42,38,32,.5);
}
.review-stars { color: var(--cotto); font-size: 0.95rem; letter-spacing: 0.18em; line-height: 1; }
.review-text {
  color: var(--inchiostro-2); flex: 1;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 1.04rem; line-height: 1.5;
}
.review-foot {
  display: flex; flex-direction: column; gap: 0.15rem;
  border-top: 1px solid var(--cream-line); padding-top: 0.9rem;
}
.review-author { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--olivo); }
.review-source { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--inchiostro-2); font-weight: 600; }

/* --- Room photo galleries (click to open) -------------- */
.room-figure { outline: none; }
.room-photos {
  position: absolute; left: 0.85rem; bottom: 0.85rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.32em;
  background: rgba(42,38,32,.66); color: var(--calce);
  font-size: 0.76rem; font-weight: 600; padding: 0.32em 0.62em; border-radius: 20px;
  backdrop-filter: blur(2px);
}
.room-photos svg { width: 14px; height: 14px; }
.room-figure-hint {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  background: rgba(42,38,32,.30); color: var(--calce);
  font-family: var(--display); font-size: 1.05rem; letter-spacing: .01em;
  opacity: 0; transition: opacity .3s var(--ease);
}
.room-card:hover .room-figure-hint,
.room-figure:focus-visible .room-figure-hint { opacity: 1; }
/* no hover to reveal it on a phone or tablet, so it just stays up —
   the little "N photos" badge (.room-photos, always visible) only
   counts the set, it doesn't invite the tap the way this hint does */
@media (hover: none) { .room-figure-hint { opacity: 1; } }
.room-figure:focus-visible { box-shadow: inset 0 0 0 3px var(--cotto); }

/* =========================================================
   INTERACTIVE CHIANTI MAP
   ========================================================= */
/* The map and the places are one component: the drawing on the left,
   the places on the right. They are two views of the same list, and
   selecting in either lights up the other. */
.chianti-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
.cmap-canvas {
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 52px -30px rgba(60,44,20,.6), inset 0 0 0 1px rgba(107,79,43,.35);
}
/* The list of places is taller than the drawing, so the drawing follows
   you down it: whatever row the mouse is on, its pin is on screen.
   This has to come AFTER the rule above — same specificity, and the last
   one wins, so written first it was simply cancelled. */
@media (min-width: 901px) {
  .cmap-canvas { position: sticky; top: calc(var(--header-h) + 1.2rem); }
}
.cmap-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* inset so that no marker or banner can ever spill over the
   drawn border of the map */
.cmap-markers { position: absolute; inset: 4% 3.5%; }

.cmap-pin {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; padding: 0; cursor: pointer; z-index: 3;
}
.cmap-pin:hover, .cmap-pin.active, .cmap-pin:focus-visible { z-index: 8; }
/* The drawings stay small, as they should on a map; the tappable area
   around them does not. Invisible, and it never shifts the layout. */
.cmap-pin::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: var(--tap); height: var(--tap);
}
.cmap-fig { display: block; filter: drop-shadow(0 4px 4px rgba(70,50,20,.38)); transition: transform .28s var(--ease); }
/* Small drawings: they must read as details inside the map, not
   as pins floating on top of it. */
.cmap-icon { display: block; width: 34px; height: 34px; }
.cmap-icon-town { width: 37px; height: 37px; }
.cmap-icon-city { width: 39px; height: 39px; }
.cmap-icon-home { width: 54px; height: 54px; }
.cmap-pin:hover .cmap-fig,
.cmap-pin.active .cmap-fig,
.cmap-pin:focus-visible .cmap-fig { transform: translateY(-5px) scale(1.09); }

.cmap-banner {
  font-family: var(--display); font-size: .72rem; font-weight: 600; color: #4a361b;
  line-height: 1.15; white-space: nowrap; letter-spacing: .01em;
  background: linear-gradient(#f5e9c8, #e7d3a0);
  border: 1px solid rgba(90,67,39,.5); border-radius: 3px;
  padding: .12em .5em; box-shadow: 0 2px 5px rgba(70,50,20,.28);
  transition: background .2s, color .2s, transform .2s;
}
.cmap-pin:hover .cmap-banner,
.cmap-pin.active .cmap-banner,
.cmap-pin:focus-visible .cmap-banner {
  background: linear-gradient(#b0492e, #8f3a24); color: #f6ecd2; border-color: #6f2c22;
}
.cmap-pin.is-self .cmap-banner { font-size: .8rem; font-weight: 700; }
.cmap-pin.is-self .cmap-fig { animation: cmapGlow 3s ease-in-out infinite; }
@keyframes cmapGlow {
  0%,100% { filter: drop-shadow(0 4px 4px rgba(70,50,20,.38)) drop-shadow(0 0 2px rgba(201,145,44,.3)); }
  50%     { filter: drop-shadow(0 5px 5px rgba(70,50,20,.42)) drop-shadow(0 0 11px rgba(201,145,44,.82)); }
}
.cmap-pin:focus-visible { outline: none; }
.cmap-pin:focus-visible .cmap-banner { outline: 2px solid var(--cotto); outline-offset: 2px; }

@media (max-width: 720px) {
  .cmap-icon { width: 27px; height: 27px; }
  .cmap-icon-town { width: 29px; height: 29px; }
  .cmap-icon-city { width: 31px; height: 31px; }
  .cmap-icon-estate { width: 33px; height: 33px; }
  .cmap-icon-home { width: 42px; height: 42px; }
  .cmap-banner { font-size: .58rem; padding: .1em .38em; }
}
@media (max-width: 460px) {
  .cmap-banner { display: none; }
  .cmap-pin.active .cmap-banner, .cmap-pin.is-self .cmap-banner { display: block; }
}

/* --- the places beside the map -------------------------
   A card that never moves, and a plain list underneath. Passing the
   mouse over a row (or over a pin on the map) fills the card and lights
   the pin — nothing opens, nothing reflows, nothing jumps. Before this
   the panel was a masonry of tiles of three different sizes that grew
   and shrank as you clicked, and it read as an accident. */
.cx-panel { min-width: 0; display: flex; flex-direction: column; gap: .75rem; }

/* one accent colour per kind, so the list, the card and the map agree */
.cx-k-home      { --cx-accent: #b25a34; }
.cx-k-producer  { --cx-accent: #5b6b3a; }
.cx-k-church    { --cx-accent: #8a6d3b; }
.cx-k-restaurant{ --cx-accent: #a2542f; }
.cx-k-winery    { --cx-accent: #7a2f24; }
.cx-k-village   { --cx-accent: #6d7355; }
.cx-k-town      { --cx-accent: #55603c; }
.cx-k-city      { --cx-accent: #3a3f2c; }

/* ---- the card at the top: the one thing that changes ---- */
.cx-detail {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 40px -30px rgba(42,38,32,.6);
}
.cx-photo {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--calce-2, #f1ead9);
}
/* a place with no photograph still gets a frame, not a hole */
.cx-photo-blank {
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 20%, #f4e8ca, #e3ceA0);
}
.cx-photo-blank .cmap-icon { width: 58px; height: 58px; }
/* display:block / display:grid above would otherwise beat the browser's
   own [hidden] rule, and the element the script hides would stay put */
.cx-photo[hidden], .cx-photo-blank[hidden] { display: none; }
.cx-detail-body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.cx-kind {
  align-self: flex-start;
  font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--cx-accent, var(--olivo-soft));
  padding: .3em .7em; border-radius: 20px;
}
.cx-full { font-family: var(--display); font-size: 1.16rem; font-weight: 600; color: var(--olivo); line-height: 1.2; }
/* the minutes are the headline; the kilometres are the small print */
.cx-when { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.cx-when strong {
  font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--cotto);
}
.cx-km { font-size: .72rem; color: var(--inchiostro-2); opacity: .8; }
.cx-desc { font-size: .88rem; line-height: 1.5; color: var(--inchiostro-2); }
.cx-hint { font-size: .82rem; line-height: 1.45; color: var(--inchiostro-2); opacity: .85; }
.cx-link {
  /* the link text stays its own small size; ::after below is the real
     44px hit area, invisible and centred on it */
  position: relative;
  align-self: flex-start; margin-top: .2rem;
  font-size: .82rem; font-weight: 600; color: var(--olivo);
  border-bottom: 1.5px solid var(--cotto); padding-bottom: 2px;
  transition: color .25s;
}
.cx-link::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  min-height: var(--tap);
}
.cx-link:hover { color: var(--cotto); }

/* ---- the list: one place, one line ---- */
.cx-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-row {
  width: 100%;
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center; gap: .7rem;
  min-height: var(--tap);
  padding: .42rem .6rem .42rem .5rem;
  background: none; border: 0; border-radius: var(--radius);
  text-align: left; color: inherit; cursor: pointer;
  /* the accent bar is drawn, not reserved: an inset shadow keeps every
     row exactly the same width whether or not it is the active one */
  box-shadow: inset 0 0 0 0 var(--cx-accent, var(--olivo-soft));
  transition: background-color .22s, box-shadow .22s;
}
.cx-row:hover, .cx-row:focus-visible, .cx-row.is-active {
  background: #fff;
  box-shadow: inset 3px 0 0 0 var(--cx-accent, var(--olivo-soft)),
              0 10px 24px -22px rgba(42,38,32,.7);
  outline: none;
}
.cx-row.is-active .cx-row-name { color: var(--cx-accent, var(--olivo)); }
.cx-row:focus-visible { outline: 2px solid var(--cotto); outline-offset: 1px; }

.cx-row-ic { display: grid; place-items: center; width: 2rem; }
/* small and even: on the map the drawings are scenery, here they are
   bullets, and they must all read at the same weight */
.cx-row-ic .cmap-icon { width: 24px; height: 24px; }
.cx-row-ic .cmap-icon-home,
.cx-row-ic .cmap-icon-city,
.cx-row-ic .cmap-icon-town { width: 24px; height: 24px; }

.cx-row-txt { display: flex; flex-direction: column; min-width: 0; gap: .05rem; }
.cx-row-name {
  font-family: var(--display); font-weight: 600; font-size: .95rem; line-height: 1.15;
  color: var(--olivo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .22s;
}
.cx-row-kind {
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--inchiostro-2); opacity: .7;
}
.cx-row-when { display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; }
.cx-row-when strong {
  font-size: .82rem; font-weight: 700; color: var(--cotto); white-space: nowrap;
}
.cx-row-when .cx-km { font-size: .62rem; }
.cx-row.is-self .cx-row-when strong { font-size: .72rem; color: var(--olivo-soft); }
.cx-row.is-self .cx-row-when .cx-km { display: none; }

/* =========================================================
   MAP
   ========================================================= */
.map-section { position: relative; background: var(--calce-2); }
.map-frame {
  display: block; width: 100%; height: clamp(380px, 52vh, 560px);
  border: 0; filter: saturate(0.9) contrast(1.02);
}
.map-card {
  position: absolute; top: 50%; left: clamp(1rem, 6vw, 5rem);
  transform: translateY(-50%);
  background: rgba(243,237,225,.96); backdrop-filter: blur(4px);
  border: 1px solid var(--cream-line); border-radius: var(--radius-lg);
  padding: 1.6rem 1.8rem; width: min(90vw, 22rem);
  box-shadow: 0 24px 50px -28px rgba(42,38,32,.55);
}
.map-street { font-family: var(--display); font-size: 1.5rem; color: var(--olivo); margin-bottom: 0.35rem; }
.map-address { color: var(--inchiostro-2); font-size: 0.95rem; margin-bottom: 1.25rem; }

/* =========================================================
   FOOTER
   ========================================================= */
/* padding-block trimmed with --section-y, same ~30% cut */
.site-footer { background: var(--olivo); color: rgba(243,237,225,.75); padding-block: 2.1rem 1.7rem; border-top: 3px solid var(--cotto); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: flex-end; }
.site-footer .brand-name { color: var(--calce); font-size: 1.5rem; }
.site-footer .brand-sub { color: var(--rosa-ink); }
.footer-tag { font-family: var(--display); font-style: italic; margin-top: 0.4rem; color: rgba(243,237,225,.7); }
.footer-meta { text-align: right; font-size: 0.86rem; }
.footer-links { margin-bottom: 0.5rem; }
.footer-links a {
  font-weight: 600; color: var(--rosa-ink);
  border-bottom: 1px solid rgba(216,170,158,.45); padding-bottom: 1px;
  transition: color .25s, border-color .25s;
}
.footer-links a:hover { color: var(--calce); border-color: var(--calce); }
.footer-contact { margin-bottom: 0.4rem; }
.footer-contact a:hover { color: var(--rosa-ink); }
.footer-legal { color: rgba(243,237,225,.5); font-size: 0.8rem; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(28,26,20,.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-figure { max-width: 1000px; max-height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; }
.lightbox-figure img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--radius); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.lightbox-figure figcaption { color: rgba(243,237,225,.85); font-size: 0.88rem; margin-top: 1rem; text-align: center; font-family: var(--display); font-style: italic; }
.lightbox-close, .lightbox-nav {
  position: absolute; background: rgba(243,237,225,.1); color: var(--calce);
  border: 1px solid rgba(243,237,225,.22); border-radius: 50%;
  width: 48px; height: 48px; display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1; transition: background-color .25s, transform .25s;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(243,237,225,.22); }
/* the page is viewport-fit=cover, so in landscape on a notched phone a
   flat 1.4rem would land the button under the notch or the corner */
.lightbox-close { top: calc(1.4rem + env(safe-area-inset-top, 0px)); right: calc(1.4rem + env(safe-area-inset-right, 0px)); }
.lightbox-nav { top: 50%; transform: translateY(-50%); font-size: 2rem; }
.lightbox-prev { left: calc(1.4rem + env(safe-area-inset-left, 0px)); }
.lightbox-next { right: calc(1.4rem + env(safe-area-inset-right, 0px)); }
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox:not(.has-nav) .lightbox-nav { display: none; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   FOCUS (accessibility)
   ========================================================= */
:focus-visible { outline: 2px solid var(--cotto); outline-offset: 3px; border-radius: 2px; }
.section-dark :focus-visible, .hero :focus-visible { outline-color: var(--rosa); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Seven nav items plus a five-language switcher stop fitting long
   before a phone: on a portrait tablet they already spill out of the
   bar. The burger therefore takes over at 900px, not at 760px. */
@media (max-width: 1140px) and (min-width: 901px) {
  .nav-links { gap: 1.05rem; }
  .nav-links a { font-size: .92rem; }
}
@media (max-width: 900px) {
  .about-grid, .services-grid, .contact-grid, .chianti-explorer { grid-template-columns: 1fr; }
  .about-media { max-width: 30rem; }

  /* One column means the photograph fell to the bottom, so the section
     opened with five stacked paragraphs and no picture at all. Lift it
     above the words: the reader sees the house before reading about it,
     and the history waits behind the button. */
  .about-media { order: -1; }
  .about-toggle { display: inline-flex; }
  .about-text.is-collapsed .about-more { display: none; }

  /* Six stacked testimonials are a long scroll on one column. Two are
     enough to make the point; the rest are one tap away. */
  .reviews-toggle { display: flex; margin: 1.3rem auto 0; }
  .reviews-grid.is-collapsed .review-card.is-extra { display: none; }
  /* NB: .cmap-canvas must stay position:relative here. It is the containing
     block for .cmap-bg and .cmap-markers, which are both absolutely
     positioned inside it; setting it to static let them escape to the page
     and the whole map covered the screen. The sticky behaviour lives in its
     own min-width query, so there is nothing to switch off on a phone. */
  .cmap-canvas { aspect-ratio: 3 / 2.4; }
  .cx-panel { margin-top: .4rem; }
  .amenities { columns: 1; }
  /* on one column the parallax offset would fight the layout */
  .about-media[data-parallax] { transform: none !important; }

  /* --- the drop-down menu --- */
  .nav { position: fixed; inset: var(--header-h) 0 auto 0; background: rgba(243,237,225,.98); backdrop-filter: blur(10px);
         transform: translateY(-130%); transition: transform .4s var(--ease); box-shadow: 0 20px 40px -24px rgba(42,38,32,.4);
         max-height: calc(100svh - var(--header-h)); overflow-y: auto; }
  .nav.open { transform: none; }
  /* the last link can otherwise land right under the home indicator
     on a notched phone once the panel is fully open */
  .nav-links { flex-direction: column; gap: 0; padding: 0.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .nav-links a { display: block; padding: 0.95rem 0; border-bottom: 1px solid var(--cream-line); color: var(--inchiostro); }
  .nav-toggle { display: flex; }
  .header-right { gap: 0.6rem; }

  /* The language switcher is the one control a foreign visitor reaches
     for first. It stayed desktop-sized past the point the burger menu
     already took over, so a 768-834px tablet had a mobile nav and a
     tiny 15x24px switcher side by side. Same visual weight, a
     finger-sized hit area, from the same breakpoint as the burger. */
  .lang-switcher { gap: 0; }
  .lang-btn {
    font-size: 0.72rem;
    padding: 0;
    min-width: 34px;
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  :root { --header-h: 66px; }
  .header-inner { gap: 0.5rem; }
  .header-right { gap: 0.5rem; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 1.12rem; }
  .brand-sub { font-size: 0.62rem; letter-spacing: 0.14em; }
  .eyebrow { letter-spacing: 0.14em; flex-wrap: wrap; white-space: normal; }
  /* On a phone the longest translations of the hero label wrapped to a
     second line and shoved the headline down, so the block sat at a
     different height in each language. Smaller, tighter, and without its
     rule, every language now fits on one line. Shared with .t-hero. */
  .hero .eyebrow, .t-hero .eyebrow {
    font-size: .6rem;
    letter-spacing: .09em;
    flex-wrap: nowrap;
    white-space: nowrap;
    max-width: 100%;
  }
  .hero .eyebrow::before, .t-hero .eyebrow::before { display: none; }
  .hero-title { font-size: clamp(1.95rem, 8vw, 2.6rem); text-wrap: normal; overflow-wrap: break-word; }
  .hero-lead { font-size: 1.02rem; }
  .hero-scroll { display: none; }
  .slideshow-stage { aspect-ratio: 4 / 3; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .map-frame { height: 320px; }
  .map-card {
    position: static; transform: none; width: auto;
    border-radius: 0; border-left: 0; border-right: 0;
  }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-meta { text-align: left; }
  .waymarker { display: none; }
}

/* At 320px the brand text, the five-language switcher and the burger
   were all fighting for the same row and "La Rocca" itself wrapped
   onto two lines instead of staying put next to "in Chianti" below
   it. Everyone gives up a little room. */
@media (max-width: 360px) {
  .header-inner { gap: 0.35rem; }
  .header-right { gap: 0.35rem; }
  .brand { gap: 0.5rem; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { font-size: 0.98rem; white-space: nowrap; }
  .brand-sub { font-size: 0.56rem; letter-spacing: 0.1em; }
  .lang-switcher { gap: 0; }
  .lang-btn { min-width: 27px; font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =========================================================
   IMMERSION
   The page should never feel like a stack of static blocks.
   Photographs drift against the scroll, full-bleed bands open
   between the chapters, and every section arrives rather than
   simply appearing.
   ========================================================= */

/* --- full-bleed bands between chapters ------------------ */
.band {
  height: clamp(46vh, 62vh, 70vh);
  background-color: var(--olivo);
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: scroll;     /* JS pans it; fixed breaks on iOS */
  position: relative;
}
.band-tall { height: clamp(40vh, 52vh, 58vh); }

/* The bands are decoration and nothing else (aria-hidden, no text). At
   62vh + 52vh they cost more than a whole screen of scrolling on a phone
   for no information at all. A third of the screen still reads as a
   full-bleed pause between chapters.
   NB: this has to sit after the rule above, not up in the earlier mobile
   block - same specificity, so whichever comes last wins. */
@media (max-width: 900px) {
  .band { height: 32vh; }
  .band-tall { height: 28vh; }
}
.band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(35,38,26,.30), rgba(35,38,26,.10) 45%, rgba(35,38,26,.34));
}

/* --- parallax opt-in ------------------------------------ */
[data-parallax] { will-change: transform; }

/* --- section arrival ------------------------------------
   Staggered so a grid does not pop in as one solid slab.    */
.reveal { will-change: opacity, transform; }
.rooms-grid .reveal:nth-child(2),
.reviews-grid .reveal:nth-child(2) { transition-delay: .08s; }
.reviews-grid .reveal:nth-child(3) { transition-delay: .16s; }
.reviews-grid .reveal:nth-child(4) { transition-delay: .24s; }

/* --- images that breathe as they cross the viewport ------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .about-media img,
    .room-figure img {
      animation: driftIn linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 70%;
    }
    @keyframes driftIn {
      from { transform: scale(1.12) translateY(2%); }
      to   { transform: scale(1) translateY(0); }
    }
    /* hovering must always win over the ambient drift */
    .room-card:hover .room-figure img { animation: none; transform: scale(1.06); }
  }
}

/* --- outbound nav link (the tastings page) -------------- */
.nav-out { position: relative; }
/* .nav-links a::after is already spoken for by the hover underline, so the
   mark is a real drawn svg in the markup instead of a second pseudo-element. */
.nav-links a.nav-out { display: inline-flex; align-items: center; gap: .34em; }
.nav-out svg { flex: none; width: .62em; height: .62em; opacity: .55; }
/* the dropdown rows are full-width tap targets, so the flex box must fill
   them; this has to sit AFTER the inline-flex above to win the tie. */
@media (max-width: 900px) { .nav-links a.nav-out { display: flex; } }

/* =========================================================
   RESPECT THE READER'S SETTINGS
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-media, .hero-media img, .hero-card, [data-parallax] { transform: none !important; }
  .hero-card { opacity: 1 !important; }
  .slide.is-active img { animation: none; }
  .hero-scroll-line::after { animation: none; }
  .band { background-attachment: scroll; }
}

/* capture mode (only active with ?shot=1) — for full-page screenshots */
.shot { scroll-behavior: auto; }
.shot .hero { min-height: 660px; }
.shot .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.shot .slide { opacity: 0; }
.shot .slide.is-active { opacity: 1; }
.shot .slide.is-active img { animation: none; }