/*
 * Design system — Torciano Boutique Hotel «Vecchio Asilo»
 *
 * Un maniero dell'XI secolo fra i vigneti di San Gimignano. Il sito deve
 * somigliare a quel posto: pietra calda, luce bassa, poche cose ben distanziate.
 * Non a un portale di prenotazioni.
 *
 * Tre decisioni portano tutto il resto:
 *
 *   1. Un solo accento. L'oro compare sui pochi punti che contano — il tasto
 *      di prenotazione, un filetto, un numero — e mai come decorazione. Un oro
 *      ovunque non è più un accento.
 *   2. Il testo è serif, le etichette sono sans. EB Garamond porta la prosa,
 *      Jost porta ciò che si legge in un colpo d'occhio: voci di menu,
 *      pulsanti, occhielli. Non si scambiano mai di ruolo.
 *   3. Lo spazio è il materiale. Le sezioni respirano con margini larghi; la
 *      colonna di lettura resta stretta anche su schermi grandi, perché una
 *      riga di 120 caratteri non si legge.
 *
 * I valori dei colori vengono dal sito attuale, non sono inventati: il bruno
 * #2b241e, la pietra #554f4a, l'avorio #f6f4f0, l'oro #dfb758.
 *
 * La documentazione ragionata sta in DESIGN_SYSTEM.md.
 */

/* ==========================================================================
   1 · Token
   ========================================================================== */

:root {
  /* --- Colore ---------------------------------------------------------- */
  /* Inchiostro: il bruno scuro della pietra bagnata, non il nero. */
  --c-ink:         #2b241e;
  --c-ink-soft:    #554f4a;
  --c-ink-faint:   #8a827a;

  /* Superfici: avorio caldo, non bianco. */
  --c-paper:       #ffffff;
  --c-paper-warm:  #f6f4f0;
  --c-paper-deep:  #efeae2;
  /* La sabbia della sorgente (#ede3d0): la usa una fascia sola, quella della
     storia, ed è l'unico punto della home dove il fondo cambia davvero. */
  --c-sand:        #ede3d0;

  /* Il fondo scuro delle sezioni immersive. */
  --c-night:       #221d18;

  --c-rule:        #e2ddd5;
  --c-rule-strong: #cdc5b9;

  /* L'accento, uno solo. */
  --c-gold:        #b6934e;
  --c-gold-soft:   #dfb758;
  --c-gold-dim:    #8a6f39;

  --c-on-dark:     #f6f4f0;
  --c-on-dark-soft:#c9c1b5;

  /* --- Tipografia ------------------------------------------------------ */
  --f-text:  'EB Garamond', Georgia, 'Times New Roman', serif;
  --f-label: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Scala fluida: nessun salto brusco fra telefono e desktop. */
  --fs-micro: 0.6875rem;                                  /* 11px, etichette */
  /* Il gradino sotto il corpo del testo, non un carattere per le note.
     Ci vivono cose che si leggono davvero — la spalla di un pacchetto, le
     schede delle camere, i riquadri dei contatti, il testo delle carte — e a
     13px non si leggevano: EB Garamond ha l'occhio piccolo, quindi tredici
     pixel di Garamond stanno a undici di un carattere senza grazie. Adesso
     parte da quindici e sale a sedici, cioè poco sotto il corpo del testo:
     resta un gradino, smette di essere una postilla. */
  --fs-small: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --fs-base:  clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --fs-lead:  clamp(1.1875rem, 1.09rem + 0.48vw, 1.4375rem);
  --fs-h3:    clamp(1.25rem, 1.14rem + 0.55vw, 1.625rem);
  --fs-h2:    clamp(1.5rem, 1.28rem + 1.1vw, 2.25rem);
  --fs-h1:    clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
  --fs-display: clamp(2.5rem, 1.7rem + 4vw, 5rem);

  /* Le etichette sono maiuscoletti molto spaziati: è il segno grafico che
     tiene insieme navigazione, occhielli e pulsanti. */
  --ls-label: 0.18em;
  --ls-wide:  0.24em;

  --lh-tight: 1.1;
  --lh-text:  1.68;

  /* --- Ritmo ----------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;

  /* Il respiro fra sezioni cresce con lo schermo. */
  --sp-section: clamp(3rem, 2rem + 5vw, 7rem);

  /* --- Misure ---------------------------------------------------------- */
  --measure:   64ch;      /* la colonna di lettura */
  /* La colonna di lettura, ma per il testo centrato.
     Sessantaquattro caratteri di EB Garamond fanno cinquecentosettanta pixel:
     giusti per una prosa allineata a sinistra, stretti per un blocco centrato,
     che a quella larghezza diventa una colonnina di righe corte in mezzo a uno
     schermo vuoto — «boxed», appunto. Centrato serve una riga più lunga: il
     testo si legge lo stesso, e il blocco smette di sembrare una scatola. */
  --measure-wide: 52rem;
  --container: 74rem;
  --container-wide: 88rem;

  --radius: 2px;          /* quasi squadrato: è un edificio di pietra */

  /* --- Ombre ----------------------------------------------------------- */
  --shadow-soft: 0 1px 2px rgb(43 36 30 / 0.04), 0 8px 24px rgb(43 36 30 / 0.06);
  --shadow-lift: 0 2px 4px rgb(43 36 30 / 0.06), 0 18px 40px rgb(43 36 30 / 0.10);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2 · Base
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--fs-base);
  line-height: var(--lh-text);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration-color: var(--c-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 160ms var(--ease), color 160ms var(--ease);
}
a:hover { text-decoration-color: var(--c-gold); }

:focus-visible {
  outline: 2px solid var(--c-gold-dim);
  outline-offset: 3px;
}

::selection { background: var(--c-gold-soft); color: var(--c-ink); }

h1, h2, h3, h4 {
  font-family: var(--f-text);
  font-weight: 500;
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-top: var(--sp-8); }
h3 { font-size: var(--fs-h3); margin-top: var(--sp-6); }

p, ul, ol, figure, table { margin: 0 0 var(--sp-5); }
li { margin-bottom: var(--sp-2); }

/* Prezzo pieno di una promozione: sbiadito, non solo barrato. Il segno da solo
   si vede poco, e su un prezzo la differenza fra i due numeri deve saltare
   all'occhio; il tag <del> dice il resto a chi ascolta la pagina. */
del {
  color: var(--c-ink-soft);
  text-decoration-thickness: 1px;
}
blockquote {
  margin: var(--sp-6) 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--c-gold);
  font-size: var(--fs-lead);
  font-style: italic;
  color: var(--c-ink-soft);
}

hr {
  border: 0;
  border-top: 1px solid var(--c-rule);
  margin: var(--sp-8) 0;
}

table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
th, td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-rule); text-align: left; }
th { font-family: var(--f-label); font-weight: 500; letter-spacing: 0.04em; }

/* ==========================================================================
   3 · Impaginazione
   ========================================================================== */

.container      { width: min(100% - 2.5rem, var(--container));      margin-inline: auto; }
.container-wide { width: min(100% - 2.5rem, var(--container-wide)); margin-inline: auto; }
.container-text { width: min(100% - 2.5rem, var(--measure));        margin-inline: auto; }

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

.skip-link {
  position: absolute; left: var(--sp-4); top: -4rem; z-index: 200;
  background: var(--c-ink); color: var(--c-on-dark);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--f-label); font-size: var(--fs-small);
  transition: top 140ms var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* ==========================================================================
   4 · Etichette e pulsanti
   ========================================================================== */

.eyebrow {
  font-family: var(--f-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-gold-dim);
  margin: 0 0 var(--sp-3);
}

.btn {
  display: inline-block;
  padding: 0.95em 2.2em;
  background: var(--c-ink);
  color: var(--c-on-dark);
  border: 1px solid var(--c-ink);
  border-radius: var(--radius);
  font-family: var(--f-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.btn:hover { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }

/* Il pulsante pieno va bene quando ce n'è uno. In un elenco di trentaquattro
   offerte diventano trentaquattro lastre scure incolonnate, e la pagina si
   legge come un modulo da compilare invece che come un invito. Dove l'azione
   si ripete, il pulsante si riduce a un filetto d'oro e riempie al passaggio:
   pesa quanto una riga di testo, e resta un bersaglio da 44 px. */
.btn--quiet {
  background: transparent;
  color: var(--c-gold-dim);
  border-color: var(--c-gold);
}
.btn--quiet:hover,
.btn--quiet:focus-visible {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-ink);
}

/* Su fondo scuro il pulsante scuro sparisce: stesso inchiostro del pannello,
   e restava solo il bordo. */
.btn--gold {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-ink);
}
.btn--gold:hover,
.btn--gold:focus-visible {
  background: transparent;
  border-color: var(--c-gold);
  color: var(--c-gold-soft);
}

/* Il tasto che porta al motore di prenotazione: è l'unica cosa dorata piena
   della pagina, ed è deliberato — al livello E1-ext quel click è la
   conversione che il sito misura. */
.btn--book {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-ink);
}
.btn--book:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }

.btn--ghost { background: transparent; color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-on-dark); }

.btn--on-dark { background: transparent; color: var(--c-on-dark); border-color: var(--c-on-dark-soft); }
.btn--on-dark:hover { background: var(--c-on-dark); color: var(--c-ink); border-color: var(--c-on-dark); }

/* ==========================================================================
   5 · Testata
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--c-rule);
}

/* Due righe: sopra la fascia con marchio, gruppo e strumenti; sotto il
   giudizio, incolonnato al marchio. Prima il giudizio stava in posizione
   assoluta a `bottom: .35rem`, e con il logo alto 6.5rem dentro una fascia da
   8.5rem le stelle finivano appoggiate al bordo dell'immagine. In griglia la
   distanza è un `row-gap`, e resta quella qualunque sia l'altezza del logo. */
.site-header__masthead {
  min-height: 7rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  /* `align-content`, non solo `align-items`: senza, le due tracce si
     allargavano fino a riempire la `min-height` e fra il nome e il giudizio
     si apriva un vuoto che sulla sorgente non c'è. */
  align-content: center;
  column-gap: var(--sp-6);
  row-gap: var(--sp-2);
  padding-block: var(--sp-3);
  position: relative;
}
.site-header__group { grid-column: 1; grid-row: 1 / -1; align-self: center; justify-self: start; font-family: var(--f-label); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; }
.site-header__group a { text-decoration: none; }

/* Il marchio: parola, non immagine. Da schermo largo la sorgente mostra il
   solo nome in EB Garamond spaziato di 1px; lo stemma e il luogo compaiono da
   schermo stretto, dove il nome da solo lascerebbe la riga vuota. */
.site-header__brand {
  display: flex; align-items: baseline; gap: var(--sp-2);
  text-decoration: none; flex: 0 0 auto;
  grid-column: 2; grid-row: 1;
  color: var(--c-ink);
}
.site-header__wordmark {
  font-family: var(--f-text); font-weight: 600;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  line-height: 1.1; letter-spacing: 1px; text-transform: uppercase;
  white-space: nowrap;
}
.site-header__crest,
.site-header__tagline { display: none; }
/* L'involucro del nome esiste solo su schermo stretto, dove il marchio e' una
   riga con lo stemma a fianco: qui il marchio e' una colonna centrata, e i
   pezzi si dispongono da soli. */
.site-header__brandtext { display: contents; }

.site-header__nav {
  margin-inline: auto;
  font-family: var(--f-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
/* Posizionata, perché è il riferimento del pannello: il sottomenu si
   aggancia a `top: 100%` di questa fascia. Prima era `position: fixed;
   top: 11.45rem`, un numero misurato a mano sulla testata di allora - e fra la
   riga del menu e il pannello restava scoperta una striscia di pagina. */
.site-header__navrow { position: relative; background: var(--c-paper-warm); border-top: 1px solid var(--c-rule); }
.nav { display: flex; justify-content: center; gap: var(--sp-7); list-style: none; margin: 0; padding: 0; }
/* Non `position: relative`: il blocco contenitore del pannello dev'essere la
   fascia intera, non la singola voce. Il rombo che separa le voci si appoggia
   perciò al collegamento, che è già posizionato. */
.nav__item { margin: 0; display: flex; align-items: center; gap: 0.2em; }

/* Il rombo fra una voce e l'altra, come sulla sorgente:
   `.et-menu>li:not(:first-child)::before{content:'◆';color:#dbd9d9}`.
   Qui è un quadrato ruotato e non il carattere `◆`: EB Garamond non ha i
   simboli geometrici, e al loro posto il browser disegna il rettangolo del
   glifo mancante — è così che accanto a «TV a schermo piatto» era comparso un
   riquadro nero. Disegnato in CSS il segno non dipende dal carattere, e a un
   lettore di schermo non arriva niente da leggere.

   Sta in posizione assoluta a metà del divario fra due voci, così non entra
   nel flusso: la riga del menu resta larga esattamente com'era. Il riferimento
   è il collegamento e non la voce, che qui non è più posizionata: il bordo
   sinistro è lo stesso, perché il collegamento è il suo primo figlio. */
.nav__item + .nav__item > a::before {
  content: '';
  position: absolute;
  left: calc(var(--sp-7) / -2); top: 50%;
  width: .3rem; height: .3rem; margin: -.15rem 0 0 -.15rem;
  background: var(--c-rule-strong);
  transform: rotate(45deg);
}
.nav__item > a { text-decoration: none; padding-block: var(--sp-3); position: relative; }
.nav__item > a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0.4rem;
  height: 1px; background: var(--c-gold);
  transition: right 220ms var(--ease);
}
.nav__item > a:hover::after,
.nav__item > a[aria-current="page"]::after { right: 0; }

/* Il pulsante del sottomenu serve dove il :hover non esiste — il telefono, il
   tablet — ed è lì che si vede. Sul menu orizzontale no: la freccina ripeteva
   sotto forma di segno quello che il pannello dice già aprendosi, e da tastiera
   il pannello si apre lo stesso perché :focus-within lo tiene aperto appena il
   fuoco entra nella voce. Resta nel DOM, con il suo aria-expanded, perché a
   quella larghezza torna a essere l'unico modo di aprire. */
.nav__toggle {
  display: none;
  background: none; border: 0; padding: 0.2em;
  color: var(--c-ink-faint); font-size: 0.7em; line-height: 1;
  cursor: pointer;
  transition: transform 200ms var(--ease), color 200ms var(--ease);
}
.nav__item:hover .nav__toggle,
.nav__toggle[aria-expanded="true"] { color: var(--c-gold); }
.nav__toggle[aria-expanded="true"] { transform: rotate(180deg); }

.nav__submenu {
  position: absolute; top: 100%; inset-inline: 0;
  width: auto;
  /* Il pannello va da bordo a bordo, bianco, con due dita di margine:
     sulla sorgente le miniature partono a 40px dal bordo su 1920, e a un
     pannello largo servono fotografie larghe. */
  list-style: none; margin: 0; padding: var(--sp-5) 2.5rem var(--sp-6);
  background: rgb(255 255 255 / 0.98);
  /* Solo il bordo inferiore: quello superiore cadrebbe esattamente sul bordo
     della testata, e due righe da un pixel l'una sull'altra si vedono. */
  border-bottom: 1px solid var(--c-rule);
  box-shadow: var(--shadow-lift);
  /* Sei colonne fisse, come sulla sorgente, e non `auto-fit`. Con `auto-fit`
     il pannello «Hotel», che ha due voci, le spalmava su due colonne da 44rem:
     il testo restava in cima a un vuoto enorme, e ogni pannello si allineava
     in modo diverso dagli altri perché ognuno ha un numero di voci diverso.
     A colonne fisse la prima voce cade sempre nello stesso punto. La voce più
     numerosa del menu ne ha sei, quindi nessun pannello va a capo. */
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-4);
  align-items: start;
  opacity: 0; visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
  z-index: 10;
}
.nav__item:hover > .nav__submenu,
.nav__item:focus-within > .nav__submenu,
.nav__toggle[aria-expanded="true"] + .nav__submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__submenu li { margin: 0; list-style: none; }
.nav__submenu a {
  display: block; padding: var(--sp-2) 0;
  text-decoration: none;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.nav__submenu a:hover,
.nav__submenu a[aria-current="page"] { color: var(--c-gold-dim); }
.nav__branch--depth-1 > a { font-family: var(--f-text); font-size: 1.25rem; letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--c-rule-strong); }
/* Con la fotografia sopra, il nome torna etichetta: maiuscoletto piccolo,
   come sulla sorgente, dove la fotografia e' il contenuto e il nome la
   didascalia. */
.nav__branch--illustrated.nav__branch--depth-1 > a {
  font-family: var(--f-label); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-ink-soft);
}
.nav__group { margin: var(--sp-3) 0 0; padding: 0; }
.nav__branch--depth-2 > a { color: var(--c-ink-soft); letter-spacing: .09em; }
.nav__branch--depth-3 > a { padding-inline-start: var(--sp-3); color: var(--c-ink-faint); text-transform: none; letter-spacing: .03em; }

/* Le miniature del pannello, come sulla sorgente: la fotografia sopra il nome.
   Il riquadro è quadrato perché lo sono le confezioni dei cofanetti, che è il
   pannello dove queste immagini contano di più; il bordo inferiore del titolo
   sparisce, perché con la fotografia sopra farebbe due righe di separazione. */
.nav__branch--illustrated > a { padding-top: 0; border-bottom: 0; }
/* Il tetto non è estetica: il pannello «Hotel» ha due sole voci, e con le
   colonne a `1fr` ciascuna diventava larga 665 px — una miniatura da 480 px
   stirata del 38%. La fotografia si ferma prima che questo accada. A 14rem
   però la miniatura pesava più della voce che illustra: nel pannello le altre
   voci sono righe di testo alte una riga, e accanto a un quadrato da 224 px
   sparivano. A 8.5rem la fotografia resta un indizio, non il contenuto. */
/* Larghe, non quadrate: sulla sorgente ogni miniatura riempie la sua colonna
   in 4:3 — 290×218 su 1920 — e sei colonne coprono il pannello. Le confezioni
   quadrate dei cofanetti stanno contenute nello stesso riquadro, su bianco,
   cosi' nessun coperchio viene tagliato e la fila resta allineata. */
.nav__thumb {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  margin-bottom: var(--sp-3);
  background: var(--c-paper-deep);
  transition: opacity 160ms var(--ease);
}
.nav__thumb--contain { object-fit: contain; background: var(--c-paper); }
.nav__branch--illustrated > a:hover .nav__thumb,
.nav__branch--illustrated > a:focus-visible .nav__thumb { opacity: .82; }

.site-header__tools { grid-column: 3; grid-row: 1 / -1; align-self: center; justify-self: end; display: flex; align-items: center; gap: var(--sp-5); }
.site-header__rating { grid-column: 2; grid-row: 2; justify-self: center; display: flex; gap: .5rem; color: var(--c-ink-faint); font-family: var(--f-label); font-size: var(--fs-micro); text-decoration: none; }
.site-header__rating span:last-child { color: var(--c-gold); letter-spacing: .08em; }

.site-header__langs {
  display: flex; gap: var(--sp-3);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
}
.site-header__langs a { text-decoration: none; color: var(--c-ink-faint); }
.site-header__langs a.is-current { color: var(--c-ink); font-weight: 500; }

.nav-toggle { display: none; }

/* ==========================================================================
   6 · Pagina
   ========================================================================== */

.breadcrumb {
  padding-top: var(--sp-5);
  font-family: var(--f-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: 0.6em; list-style: none; margin: 0; padding: 0; }
.breadcrumb__item + .breadcrumb__item::before { content: '·'; margin-inline-end: 0.6em; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--c-ink); }

.page__header { padding-block: var(--sp-8) var(--sp-5); }
.page--home .page__header { padding-block: var(--sp-9) var(--sp-6); }

.page__title { margin-bottom: var(--sp-4); }

.page__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-ink-soft);
  max-width: var(--measure);
  margin-bottom: 0;
}

.page__body { padding-bottom: var(--sp-section); }
.page__body > :first-child { margin-top: 0; }

/* Le pagine legali arrivano dalla sorgente con URL scritti per esteso e con
   tabelle a una cella che portano ancora `width="652"` addosso: su un telefono
   da 390px l'uno e le altre allargavano il documento e tutta la pagina
   scorreva di lato. Qui l'URL si spezza dove serve e la tabella si tiene alla
   larghezza della colonna invece che a quella scritta nell'attributo. */
.page__body { overflow-wrap: break-word; }
.page__body a { overflow-wrap: anywhere; }
.page__body :is(td, th) { width: auto; overflow-wrap: anywhere; }

/* Le immagini dentro il contenuto respirano e vanno oltre la colonna di
   lettura: il testo resta stretto, le fotografie no. */
.page__body img {
  margin-block: var(--sp-7);
  border-radius: var(--radius);
}
.page__body figure { margin-block: var(--sp-7); }
.page__body figcaption {
  font-family: var(--f-label);
  font-size: var(--fs-small);
  color: var(--c-ink-faint);
  margin-top: var(--sp-3);
}

/* ==========================================================================
   7 · Navigazione fra pagine figlie
   ========================================================================== */

.page__children { padding-bottom: var(--sp-section); }

.child-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  background: var(--c-rule);
  border-block: 1px solid var(--c-rule);
}
.child-list__item { margin: 0; background: var(--c-paper); }
.child-list__item a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  text-decoration: none;
  font-size: var(--fs-h3);
  transition: background 180ms var(--ease), padding-inline-start 180ms var(--ease);
}
.child-list__item a::after {
  content: '→';
  font-family: var(--f-label);
  color: var(--c-gold);
  opacity: 0; transform: translateX(-0.4em);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.child-list__item a:hover {
  background: var(--c-paper-warm);
  padding-inline-start: var(--sp-5);
}
.child-list__item a:hover::after { opacity: 1; transform: translateX(0); }

@media (min-width: 60rem) {
  .child-list { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   8 · Piede
   ========================================================================== */

/* Cinque colonne e una fascia legale, come sulla sorgente. Là erano due
   sezioni su due grigi vicini, #1f1f1f e #121212: qui la stessa gerarchia si
   ottiene con il nero del sito e una velatura più scura sotto, invece di
   introdurre due grigi che non appartengono alla tavolozza. */
.site-footer {
  background: var(--c-night);
  color: var(--c-on-dark);
  margin-top: var(--sp-section);
}
.site-footer a { color: inherit; text-decoration-color: rgb(246 244 240 / 0.3); }
.site-footer a:hover { text-decoration-color: var(--c-gold-soft); }

.site-footer__main {
  display: grid; gap: var(--sp-7);
  padding-block: var(--sp-8);
}
@media (min-width: 48rem) {
  .site-footer__main { grid-template-columns: repeat(2, 1fr); align-items: start; }
}
@media (min-width: 64rem) {
  /* Il marchio sta più stretto delle altre: è un'immagine, non una colonna
     di testo, e non ha bisogno della stessa misura. */
  .site-footer__main { grid-template-columns: 0.8fr 1.3fr 1fr 1fr 1.1fr; gap: var(--sp-6); }
}

.site-footer__brand img { width: 100%; max-width: 9rem; height: auto; }

/* Il nome sta accanto al marchio, che lo dice già: qui serve solo perché
   l'indirizzo sia un blocco completo e copiabile, quindi resta alla scala dei
   recapiti invece di fare da secondo titolo. */
.site-footer__name { display: block; margin-bottom: var(--sp-2); color: var(--c-on-dark); }
.site-footer__where,
.site-footer__contacts { margin: 0 0 var(--sp-4); color: var(--c-on-dark-soft); }
.site-footer__where a { text-decoration: none; }
.site-footer__where a:hover .site-footer__name { color: var(--c-gold-soft); }
.site-footer__contacts { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer__contacts a { width: fit-content; }

/* I due menu. Sulla sorgente erano elenchi di undici pixel senza titolo: una
   colonna di maiuscolette che non diceva a che cosa servisse. L'intestazione
   la aggiunge questo restauro, ed è anche l'etichetta della navigazione per
   chi ascolta la pagina invece di guardarla. */
.site-footer__heading {
  margin: 0 0 var(--sp-4);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--c-gold-soft);
}
.site-footer__menu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-1);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.site-footer__menu li { margin: 0; }
/* Il testo di undici pixel della sorgente dava un bersaglio alto sedici: si
   centrava col mouse, col dito no. Lo spazio fra le voci ora sta dentro il
   collegamento invece che fra un collegamento e l'altro, e la riga resta
   toccabile per tutta la sua altezza. */
.site-footer__menu a {
  display: inline-block; padding-block: var(--sp-2);
  text-decoration: none; color: var(--c-on-dark-soft);
}
.site-footer__menu a:hover { color: var(--c-gold-soft); }

/* Accessibilità e recensioni. Su Divi il primo era un pulsante azzurro
   #0078D4 preso da un altro guardaroba, e il secondo un badge caricato da
   `jscache.com` al primo istante di ogni pagina. Restano al loro posto e con
   il loro peso, ma vestiti come il resto del sito e senza chiamare nessuno. */
.site-footer__aside { display: flex; flex-direction: column; gap: var(--sp-5); align-items: start; }

/* Sul telefono il piede sta in colonna sola, e in colonna sola cinque blocchi
   allineati a sinistra su fondo scuro fanno una lista lunga e storta: ogni
   parte comincia dallo stesso bordo e finisce dove capita, e sotto lo stemma
   — che e' centrato — la sbandata si vede. In mezzo diventano cinque blocchi
   uno sotto l'altro con lo stesso asse.
   I collegamenti, pero', restano larghi quanto il testo: un bersaglio centrato
   e' comunque un bersaglio, e allargarlo a tutta riga renderebbe cliccabile
   anche il vuoto intorno. */
@media (max-width: 47.999rem) {
  .site-footer__main { text-align: center; }
  .site-footer__brand { display: grid; justify-items: center; }
  .site-footer__contacts { align-items: center; }
  .site-footer__menu ul { align-items: center; }
  .site-footer__aside { align-items: center; }
  .site-footer__legal { justify-content: center; }
  .site-footer__colophon-inner { justify-content: center; text-align: center; }
  .site-footer__company { line-height: 1.9; }
}
/* A due colonne le cinque parti fanno righe di due, due e una: l'ultima
   resterebbe da sola con mezzo piede vuoto accanto. Sta in riga e occupa
   tutta la larghezza, e la riga finale torna piena. */
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .site-footer__aside {
    grid-column: 1 / -1;
    flex-direction: row; align-items: center; gap: var(--sp-7);
  }
}
.site-footer__accessibility {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgb(246 244 240 / 0.28);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  text-decoration: none;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.site-footer__accessibility:hover { border-color: var(--c-gold-soft); color: var(--c-gold-soft); }
.site-footer__accessibility .icon { flex: none; width: 1.25rem; height: 1.25rem; }
.site-footer__reviews {
  display: inline-flex; flex-direction: column; gap: var(--sp-2);
  text-decoration: none;
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-on-dark-soft);
}
.site-footer__reviews img { width: 10rem; height: auto; }
.site-footer__reviews:hover { color: var(--c-gold-soft); }

.site-footer__colophon {
  border-top: 1px solid rgb(246 244 240 / 0.14);
  background: rgb(0 0 0 / 0.28);
  padding-block: var(--sp-5);
  font-family: var(--f-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--c-on-dark-soft);
}
.site-footer__colophon-inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6);
  align-items: center; justify-content: space-between;
}
.site-footer__company { margin: 0; line-height: 1.8; }
.site-footer__company span[aria-hidden] { padding-inline: 0.4em; }

.site-footer__social { display: flex; gap: var(--sp-3); margin: 0; }
.site-footer__social a {
  display: grid; place-items: center;
  /* 2.75rem = 44px: la misura minima per un bersaglio da dito. */
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgb(246 244 240 / 0.28); border-radius: 50%;
  text-decoration: none;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.site-footer__social a:hover { border-color: var(--c-gold-soft); color: var(--c-gold-soft); }
.site-footer__social .icon { width: 1.15rem; height: 1.15rem; }

.site-footer__legal {
  display: flex; gap: var(--sp-2) var(--sp-5); flex-wrap: wrap; align-items: center;
  margin-top: var(--sp-3); padding-top: var(--sp-2);
  border-top: 1px solid rgb(246 244 240 / 0.1);
  text-transform: uppercase;
}
.site-footer__legal a,
.site-footer__legal button { padding-block: var(--sp-2); }
.site-footer__legal a { text-decoration: none; }
.site-footer__legal a:hover,
.site-footer__legal button:hover { color: var(--c-gold-soft); }
.site-footer__consent {
  background: none; border: 0; padding-inline: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; cursor: pointer; text-decoration: underline;
}

/* ==========================================================================
   9 · Banner del consenso
   ========================================================================== */

.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 300;
  background: var(--c-night);
  color: var(--c-on-dark);
  padding: var(--sp-5);
  display: grid; gap: var(--sp-4);
  font-size: var(--fs-small);
  box-shadow: 0 -12px 40px rgb(34 29 24 / 0.3);
}
.consent p { margin: 0; max-width: 62ch; }
.consent a { color: var(--c-gold-soft); }
.consent__prefs {
  display: flex; gap: var(--sp-5); flex-wrap: wrap;
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.consent__prefs label { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.consent__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.consent__btn {
  padding: 0.8em 1.6em;
  border: 1px solid var(--c-on-dark-soft);
  border-radius: var(--radius);
  background: none; color: inherit;
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.consent__btn:hover { background: var(--c-on-dark); color: var(--c-ink); }
.consent__btn--primary {
  background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink);
}
.consent__btn--primary:hover { background: var(--c-gold-soft); border-color: var(--c-gold-soft); }

@media (min-width: 60rem) {
  .consent {
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--sp-6);
    padding-inline: var(--sp-7);
  }
}

/* ==========================================================================
   10 · Pagina di errore
   ========================================================================== */

.page--error { padding-block: var(--sp-9); text-align: center; }
.page--error .page__lead { margin-inline: auto; }
.page--error .btn { margin-top: var(--sp-5); }

/* ==========================================================================
   11 · Schermi stretti
   ========================================================================== */

@media (max-width: 59.999rem) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 2.75rem; height: 2.75rem; padding: 0;
    background: none; border: 1px solid var(--c-rule-strong);
    border-radius: var(--radius); cursor: pointer;
  }
  .nav-toggle__bar {
    display: block; height: 1px; width: 1.25rem;
    background: var(--c-ink); margin-inline: auto;
    transition: transform 200ms var(--ease);
  }
  /* Una riga sola: il giudizio qui non c'è, e la seconda traccia lascerebbe
     un `row-gap` vuoto sotto il marchio. */
  /* Cinque rem erano l'altezza minima e diventavano l'altezza vera: marchio,
     lingue, pulsante e panino stavano su una riga alta poco piu' di quanto
     serve a contenerli, incollati fra loro e ai bordi. Un dito ha bisogno di
     spazio suo, e la testata di un albergo non e' una barra di strumenti. */
  .site-header__masthead {
    min-height: 5.75rem; padding-block: var(--sp-4);
    grid-template-columns: 1fr auto; grid-template-rows: auto; gap: var(--sp-5);
  }
  .site-header__group, .site-header__rating { display: none; }
  .site-header__brand { grid-column: 1; justify-self: start; }
  .site-header__tools { grid-column: 2; }
  /* Su una riga sola: spezzato in due righe il tasto alzava tutta la testata. */
  .site-header__tools .btn--book { white-space: nowrap; }
  .site-header__nav {
    display: none; order: 10; width: 100%;
    border-top: 1px solid var(--c-rule);
    padding-block: var(--sp-3);
    max-height: 70vh; overflow-y: auto;
  }
  .site-header__nav.is-open { display: block; }
  .nav { flex-direction: column; gap: 0; }
  .nav__item { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--c-rule); }
  /* Le voci non partono dal bordo del vetro: hanno il loro margine interno,
     come ogni riga di testo del sito. I filetti di separazione restano invece
     larghi quanto il pannello, che e' il segno che tiene insieme l'elenco. */
  .nav__item > a { flex: 1; padding-block: var(--sp-4); padding-inline: var(--sp-4); }
  .nav__item > a::after { display: none; }
  /* In colonna le voci sono già divise da una riga: il rombo era il segno del
     menu orizzontale, e qui finirebbe fuori dal bordo sinistro. */
  .nav__item + .nav__item::before { display: none; }
  /* Nel menu del telefono le miniature raddoppierebbero l'altezza di ogni
     voce: il pannello diventa un elenco, e un elenco si scorre col pollice. */
  .nav__thumb { display: none; }
  .nav__toggle { display: inline-block; padding: var(--sp-4) var(--sp-5); font-size: 0.9em; }

  /* Su schermo stretto il sottomenu non fluttua: si apre in linea, e solo
     quando lo si chiede. Il :hover qui non esiste. */
  .nav__submenu {
    position: static; width: 100%;
    min-width: 0; border: 0; box-shadow: none; padding: 0 0 var(--sp-3);
    background: var(--c-paper-warm);
    display: none; opacity: 1; visibility: visible; transform: none;
    grid-template-columns: 1fr; gap: var(--sp-3);
  }
  .nav__item:hover > .nav__submenu,
  .nav__item:focus-within > .nav__submenu { display: none; }
  .nav__toggle[aria-expanded="true"] + .nav__submenu { display: block; }
  .nav__submenu a { padding-inline: var(--sp-7); }
  /* Da schermo stretto il marchio torna a essere la lastrina della sorgente:
     lo stemma a sinistra, il nome piccolo, il luogo sotto. */
  /* Riga, non griglia: con lo stemma che scavalcava due righe, il nome e il
     luogo si centravano rispetto alla griglia e non rispetto allo stemma, e
     bastava che il luogo mancasse — o fosse alto nove pixel — perche' la
     scritta risultasse un paio di pixel piu' in alto. In fila, con
     `align-items: center`, i due pezzi si allineano perche' sono due pezzi
     affiancati, non due celle di una tabella. */
  .site-header__brand {
    display: flex; align-items: center; gap: var(--sp-3);
  }
  .site-header__brandtext { display: grid; }
  /* Larghezza scritta, non `auto`: in una colonna di griglia `auto` il
     `max-width: 100%` che tutte le immagini portano si misura su una colonna
     che a sua volta aspetta l'immagine, e il riquadro collassa a zero. Lo
     stemma è quadrato, quindi le due misure sono la stessa. */
  .site-header__crest {
    display: block; grid-row: 1 / 3;
    width: 1.5rem; height: 1.5rem;
    /* `max-width: none` per rompere il giro: la colonna della griglia si
       misura sull'immagine, e l'immagine — che da regola generale porta
       `max-width: 100%` — si misurava sulla colonna. Il riquadro finiva a
       zero e lo stemma non si vedeva pur essendo lì. */
    max-width: none;
  }
  /* Nome e luogo impilati dentro la loro colonna, cosi' lo stemma si
     confronta con il blocco intero e non con la prima riga. */
  .site-header__wordmark {
    font-size: 0.8125rem; letter-spacing: .06em;
    display: block; line-height: 1.15;
  }
  .site-header__tagline {
    display: block;
    font-family: var(--f-text); font-size: 0.625rem; line-height: 1.2;
    letter-spacing: 0.06em; color: var(--c-ink-soft);
  }
  .site-header__crest { align-self: center; }
  body.nav-open { overflow: hidden; }
}

/* ==========================================================================
   14 · Slider fotografico locale
   --------------------------------------------------------------------------
   Serve alle camere e alla home. Le slide sono impilate nella stessa cella di
   griglia: quella visibile detta l'altezza, le altre stanno sotto con
   `hidden`, e senza JavaScript resta a video la prima.

   Le frecce erano i caratteri ‹ e ›: in EB Garamond il segno si appoggia alla
   linea di base e nel cerchio restava alto e spostato a sinistra. Ora sono
   due path centrati dalla griglia, quindi allineati per costruzione.
   ========================================================================== */

.slider { position: relative; height: 100%; overflow: hidden; background: var(--c-night); }

/* `minmax(0, 1fr)` e non `auto`: con la riga a contenuto, una fotografia
   verticale alta 1400 px allungava la riga oltre il contenitore, che la
   tagliava dal basso. Restava a video la fetta alta dello scatto — nella
   fascia di apertura, il cielo sopra la testa della modella — e nessun
   `object-position` poteva rimediare, perché a quel punto l'immagine non era
   più ritagliata: era intera, e sporgeva. Con la riga vincolata all'altezza
   del riquadro la fotografia torna a essere ritagliata da `cover`, cioè
   attorno al suo centro. */
.slider__slides { display: grid; grid-template-rows: minmax(0, 1fr); height: 100%; }
.slider__slide { grid-area: 1 / 1; margin: 0; min-width: 0; min-height: 0; }
.slider__slide[hidden] { display: none; }
.slider__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Il `<picture>` che porta lo scatto per il telefono non deve fare da
   scatola: la fotografia si misura sulla slide, come senza di lui. */
.slider__slide picture { display: contents; }

.slider__control {
  position: absolute; z-index: 3; top: 50%; translate: 0 -50%;
  display: grid; place-items: center;
  /* 2.75rem = 44px: la misura minima per un bersaglio da dito. */
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgb(255 255 255 / .55); border-radius: 50%;
  background: rgb(34 29 24 / .45); color: #fff;
  cursor: pointer;
  transition: background 160ms var(--ease);
}
.slider__control:hover { background: rgb(34 29 24 / .8); }
.slider__control svg { display: block; width: 1.15rem; height: 1.15rem; }
.slider__control--prev { left: var(--sp-4); }
.slider__control--next { right: var(--sp-4); }

.slider__counter {
  position: absolute; z-index: 3; left: var(--sp-4); bottom: var(--sp-3);
  margin: 0; padding: .3rem .65rem;
  background: rgb(34 29 24 / .6); color: #fff;
  font-family: var(--f-label); font-size: var(--fs-micro); letter-spacing: .12em;
}

/* ==========================================================================
   15 · Camere — racconto editoriale
   ========================================================================== */
/* Sotto meno che sopra: l'introduzione adesso è corta, e sommando la sua coda
   allo spazio con cui si apre la griglia delle camere restava un buco. */
.rooms-intro { padding-block: var(--sp-section) 0; }
/* La colonna del testo non si allunga oltre la sua frase: senza questo il
   blocco si stira sull'altezza della riga e il titolo accanto galleggia. */
.rooms-intro__grid { align-items: start; }
.rooms-intro__grid { display: grid; gap: var(--sp-6); align-items: start; }
.rooms-intro__grid h2 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); }
.rooms-intro__lead { margin: 0; font-size: var(--fs-lead); }
/* Riga a sé fra la testata e le camere: la riga per aprirla sta in mezzo, il
   testo che ne esce alla larghezza di lettura e allineato a sinistra, perché
   un paragrafo di cinquecento caratteri con le righe centrate si segue male. */
/* La riga per aprire si centra sulla pagina, non sulla colonna di lettura: la
   misura la stringe a metà larghezza, e il pulsante finiva a sinistra del
   centro senza allinearsi a niente. La colonna di lettura la porta il testo
   che ne esce, che è l'unica cosa che ne ha bisogno. */
.rooms-intro__more { margin-top: var(--sp-7); text-align: center; }
.rooms-intro__more > summary { display: block; }
.rooms-intro__more .readmore__toggle { display: inline-block; }
.rooms-intro__more .readmore__body { max-width: var(--measure); margin-inline: auto; }

/* --- «Leggi di più» ------------------------------------------------------
   Un `<details>`: si apre senza JavaScript, la tastiera ci arriva da sola e il
   testo resta nel documento. Il triangolino dei browser lo togliamo perché qui
   la riga è già un invito scritto — e va tolto due volte, con `list-style` per
   i browser moderni e con lo pseudo-elemento di WebKit per gli altri. */
.readmore > summary { list-style: none; cursor: pointer; display: inline-block; }
.readmore > summary::-webkit-details-marker { display: none; }
.readmore__toggle {
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-ink-soft);
  padding-bottom: 2px; border-bottom: 1px solid var(--c-gold);
  transition: color 140ms var(--ease);
}
.readmore__toggle:hover { color: var(--c-ink); }
.readmore > summary:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 4px; }
/* Aperto o chiuso cambia l'etichetta, non il posto: è la stessa riga. */
.readmore__close,
.readmore[open] .readmore__open { display: none; }
.readmore[open] .readmore__close { display: inline; }
.readmore__body { margin-top: var(--sp-5); text-align: left; }
.readmore__body > :first-child { margin-top: 0; }
@media (min-width: 60rem) { .rooms-intro__grid { grid-template-columns: .9fr 1.1fr; gap: var(--sp-9); } }
/* Nessun fondo di sezione: il fondo caldo dietro schede bianche lasciava una
   fascia grigia sopra la prima riga e strisce nelle intercapedini, e la pagina
   sembrava una scatola dentro un'altra. Sulla sorgente le schede stanno su
   bianco e si staccano con un'ombra. */
.rooms-list { padding-block: var(--sp-section); }

/* Due colonne, come sulla sorgente: le camere si confrontano, e affiancate se
   ne vedono due per schermata invece di una ogni mille pixel di scorrimento.
   Prima erano fasce alternate a piena larghezza — si leggevano bene una per
   una, ma dodici camere facevano una pagina lunga dodicimila pixel. */
.rooms-list__grid {
  list-style: none; margin-block: 0; padding: 0;
  display: grid; gap: var(--sp-7);
  /* 28rem porta a due colonne su uno schermo da 1440, che è l'impaginazione
     della sorgente; sotto, `auto-fit` scende a una sola. */
  /* `min()` sul minimo: sotto i 28rem di larghezza utile la colonna si
     stringe con lo schermo invece di restare a 448px e sfondare a destra. */
  grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
}
.room-card {
  margin: 0; display: flex; flex-direction: column;
  background: var(--c-paper);
  box-shadow: 0 1px 3px rgb(43 36 30 / .06), 0 12px 28px rgb(43 36 30 / .07);
}
.room-card__title {
  margin: 0; padding: var(--sp-6) var(--sp-6) var(--sp-5);
  font-size: var(--fs-h3); text-align: center; text-wrap: balance;
}
/* La descrizione fra virgolette in corsivo e in oro, come sulla sorgente: il
   nome della camera e quello che la distingue sono due informazioni — e su una
   riga propria si leggono come tali. Di fila, «Terrestre "Balcone privato con
   Jacuzzi Vista Vigneti"» si spezzava dove capitava, e il nome della camera
   finiva in mezzo a una frase invece che in testa a una scheda. */
.room-card__note {
  display: block; margin-top: var(--sp-1);
  color: var(--c-gold-dim); font-size: var(--fs-base);
}

/* Le fotografie delle camere sono verticali (750×1000). Nel riquadro verticale
   però, in due colonne larghe seicento pixel, ognuna diventava alta ottocento:
   dodici camere facevano una pagina che non finiva più, e la fotografia
   contava più della camera che descrive. Il riquadro quadrato la dimezza e
   tiene la stanza intera; il fuoco scende al 62% perché queste fotografie sono
   inquadrate con il letto nella metà bassa, e ritagliando dal centro restava a
   video il quadro appeso alla parete. */
/* La fotografia sta dentro la scheda con un margine, non a filo: incollata ai
   bordi la scheda smetteva di leggersi come una scheda e diventava una
   fotografia con una didascalia sotto. */
.room-card__media { position: relative; display: grid; overflow: hidden; background: var(--c-night); aspect-ratio: 1 / 1; margin-inline: var(--sp-6); }
.room-card__media img { object-position: center 62%; }
/* I luoghi del Gruppo: gli scatti sono 3:2 (624×408) e cosi' restano; il
   quadrato delle camere ne taglierebbe i fianchi. */
.room-card--place .room-card__media { aspect-ratio: 3 / 2; }
.room-card--place .room-card__media img { object-position: center; }
.room-card--place .room-card__copy { text-align: center; align-items: center; }
.room-card__copy { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.room-card__copy > p,
.room-card__copy .readmore__body p { font-size: var(--fs-small); }
/* Nella scheda il «Leggi di più» sta sotto la frase e allineato con essa, non
   in mezzo: qui la colonna è stretta e il testo è a bandiera. Il margine in
   basso lo dà il blocco che segue, così aperto e chiuso la scheda non salta. */
.readmore--card { margin-top: var(--sp-2); align-self: flex-start; }
.readmore--card .readmore__body { margin-top: var(--sp-4); }
.room-card__feature { color: var(--c-gold-dim); font-style: italic; }
.room-card__quick {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  /* Lo spazio verso il pulsante sta qui: sul pulsante ci starebbe una regola
     più specifica dell'`auto` che lo tiene in fondo, e lo cancellerebbe. */
  padding: var(--sp-4) 0; margin: var(--sp-5) 0;
  border-block: 1px solid var(--c-rule);
  list-style: none; font-family: var(--f-label); font-size: var(--fs-small);
}
.room-card__quick li { display: flex; align-items: center; gap: .5rem; margin: 0; }
.room-card__quick .icon { flex: none; width: 1.15rem; height: 1.15rem; color: var(--c-gold-dim); }
/* Il pulsante si allinea in fondo: i racconti sono di lunghezza diversa e
   senza questo i pulsanti finivano a quote diverse lungo la stessa riga. */
.room-card__cta { margin-top: auto; align-self: center; }

/* Bagni e spazi comuni: sulla sorgente erano in coda a tutti e dodici gli
   slider, qui si mostrano una volta. */
.room-spaces { padding-block: var(--sp-section); }
.room-spaces h2 { margin-top: 0; }
.room-spaces__grid { list-style: none; margin: var(--sp-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-4); }
.room-spaces__grid li { margin: 0; }
.room-spaces__grid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.amenities { padding-block: var(--sp-section); background: var(--c-night); color: var(--c-on-dark); }
.amenities h2 { margin-top: 0; max-width: 18ch; }
/* Il reticolo è disegnato dalle caselle, non dallo sfondo della griglia: i
   servizi sono undici e l'ultima riga resta spaiata, e con lo sfondo dietro
   quel vuoto si vedeva come una casella accesa e senza testo. */
.amenities__grid { list-style: none; margin: var(--sp-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1px; }
.amenities__grid li { margin: 0; padding: var(--sp-5); box-shadow: 0 0 0 1px rgb(246 244 240 / .16); display: flex; align-items: center; gap: var(--sp-4); font-family: var(--f-label); font-size: var(--fs-small); }
.amenities__grid .icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--c-gold-soft); }

/* I servizi dell'albergo: due elenchi corti a sinistra, il richiamo alla
   località a destra. Su Divi erano quattro colonne di riga interna; qui la
   proporzione è 2 a 3, perché gli elenchi sono di tre voci e il testo di due
   paragrafi lunghi. */
.room-services { padding-block: var(--sp-section); }
.room-services h2 { margin-top: 0; max-width: 24ch; }
.room-services__grid { margin-top: var(--sp-7); display: grid; gap: var(--sp-7); }
.room-services__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-6); align-content: start; }
.room-services__lists ul { list-style: none; margin: 0; padding: 0; }
.room-services__lists li { margin: 0; padding-block: var(--sp-3); border-bottom: 1px solid var(--c-rule); font-family: var(--f-label); font-size: var(--fs-small); }
.room-services__lists li:last-child { border-bottom: 0; }
.room-services__copy p:last-child { margin-bottom: 0; }
@media (min-width: 60rem) {
  .room-services__grid { grid-template-columns: 2fr 3fr; gap: var(--sp-8); }
}

/* --------------------------------------------------------------------------
   Archivio offerte
   --------------------------------------------------------------------------
   Tre colonne come sulla sorgente: fotografia, racconto, prezzo e
   prenotazione. Le proporzioni sono quelle di Divi — un quarto, metà, un
   quarto — e sotto i 60rem diventano una colonna sola, nell'ordine in cui si
   legge: prima si guarda la fotografia, poi si legge che cos'è, poi quanto
   costa.
   -------------------------------------------------------------------------- */
.offers { padding-block: var(--sp-7) var(--sp-section); }

/* Il mese che apre il gruppo. È l'unica cosa che scandisce una pagina lunga
   trentaquattro offerte, quindi ha lo spazio di un respiro sopra e un filetto
   che arriva fino al bordo: si vede scorrendo veloce, che è come si legge un
   calendario. */
.offers__month {
  margin: var(--sp-8) 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-rule);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--c-gold-dim);
}
.offers__month:first-of-type { margin-top: 0; }
.offers__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

/* La scheda non è una scatola grigia: è una riga separata da un filetto, con
   la fotografia che riempie la sua cella invece di galleggiarci dentro. Il
   fondo caldo si teneva su bianco senza contrasto e le trentaquattro righe
   diventavano una fascia di grigio indistinta. */
.offer {
  margin: 0;
  display: grid;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--c-rule);
}
.offer:last-child { border-bottom: 0; }
/* Rapporto fisso e non «riempi la cella»: le inclusioni vanno da tre a sei
   righe, e una fotografia che segue l'altezza della riga diventava una striscia
   verticale su una scheda e un francobollo largo sull'altra. Uguali, l'occhio
   scorre l'elenco invece di inciampare a ogni riga. */
.offer__media { align-self: start; }
.offer__media a { display: block; }
.offer__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.offer__title { margin: 0; font-size: var(--fs-h3); }
.offer__title a { color: inherit; text-decoration: none; }
.offer__title a:hover, .offer__title a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.offer__dates { margin: var(--sp-2) 0 0; font-family: var(--f-label); font-size: var(--fs-small); color: var(--c-ink-soft); }
.offer__includes-label {
  margin: var(--sp-4) 0 var(--sp-2);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-faint);
}
/* Trattini invece dei pallini: l'elenco è dentro una scheda, e i pallini
   pieni pesavano più del testo che elencano. */
.offer__includes { margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.offer__includes li { margin: 0 0 var(--sp-1); padding-left: 1.1em; position: relative; }
.offer__includes li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: .5em; height: 1px; background: var(--c-gold);
}

.offer__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.offer__price { margin: 0; font-size: var(--fs-lead); }
/* Il prezzo pieno resta leggibile accanto allo scontato: barrato e più
   piccolo, non nascosto — è l'informazione che dice quanto si risparmia. */
.offer__price del { color: var(--c-ink-faint); font-size: var(--fs-small); margin-right: var(--sp-2); }
.offer__contact { margin: 0; font-size: var(--fs-small); color: var(--c-ink-faint); }
.offer__contact a { color: inherit; }
.offer__cta { align-self: stretch; text-align: center; }

@media (min-width: 40rem) {
  .offer { grid-template-columns: 1fr 1fr; align-items: start; }
  .offer__aside { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .offer { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-6); }
  .offer__aside { grid-column: auto; align-self: center; }
  .offer__cta { align-self: start; }
}

/* --------------------------------------------------------------------------
   Pagine promozionali
   --------------------------------------------------------------------------
   Fasce di testo e, in mezzo, le recensioni affiancate: tre voci una accanto
   all'altra si confrontano a colpo d'occhio, una sotto l'altra no.
   -------------------------------------------------------------------------- */
.promo-head { --measure: var(--measure-wide); padding-block: var(--sp-section) 0; text-align: center; }
.promo-block { padding-block: var(--sp-7); }
.promo-block h2 { margin-top: 0; }
.promo-block h3 { font-size: var(--fs-h3); }
.promo-block > :last-child { margin-bottom: 0; }

/* L'invito: stretto, centrato, su fondo caldo. Senza questo erano titoli
   orfani separati da trecento pixel di bianco. */
.promo-block--call {
  padding-block: var(--sp-6);
  text-align: center;
  background: var(--c-paper-warm);
  width: min(100% - 2.5rem, var(--container));
  padding-inline: var(--sp-6);
}
.promo-block--call h2 { font-size: var(--fs-h3); }
.promo-block--call p { margin-bottom: 0; }
.promo-block--call h2 + p { margin-top: var(--sp-4); }

.promo-reviews { padding-block: var(--sp-7); background: var(--c-paper-warm); }
.promo-reviews__grid {
  list-style: none; margin-block: 0; padding: 0;
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.promo-review { margin: 0; padding: var(--sp-5); background: var(--c-paper); }
.promo-review__stars { margin: 0; color: var(--c-gold); letter-spacing: .12em; }
.promo-review blockquote { margin: var(--sp-4) 0 0; padding: 0; border: 0; }
.promo-review blockquote p { font-size: var(--fs-small); margin-top: 0; }
.promo-review__author {
  margin: var(--sp-4) 0 0;
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.promo-review__context { display: block; margin-top: var(--sp-1); color: var(--c-ink-faint); text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Contatti
   --------------------------------------------------------------------------
   Recapiti a colonne e indicazioni una per città di partenza: sono dati che si
   consultano, non un testo che si legge, e in colonna si trovano a colpo
   d'occhio.
   -------------------------------------------------------------------------- */
.contact-head { --measure: var(--measure-wide); padding-block: var(--sp-section) var(--sp-6); text-align: center; }
.contact-head h1 { margin: var(--sp-2) 0 0; }
.contact-details { padding-block: 0 var(--sp-7); }
.contact-details__grid {
  margin-top: var(--sp-5);
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
/* Quattro schede di recapiti: un filetto d'oro le apre, come le fasce del
   sito, così si leggono come quattro voci e non come quattro paragrafi. */
.contact-card { font-size: var(--fs-small); border-top: 2px solid var(--c-gold); padding-top: var(--sp-4); }
.contact-card > :first-child { margin-top: 0; }
.contact-card > :last-child { margin-bottom: 0; }
.contact-card strong, .contact-card em { font-style: normal; font-weight: 400;
  display: block; margin-bottom: var(--sp-2);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-faint); }

.contact-routes { padding-block: var(--sp-7) var(--sp-section); }
.contact-routes h2 { margin-top: 0; }
.contact-routes__lead { margin-inline: 0; }

/* Una città alla volta. Chiuse sono quattro righe con un filetto fra l'una e
   l'altra; aperta, il testo sta nella colonna di lettura invece che in un
   quarto di schermo. */
.contact-routes__list { margin-top: var(--sp-7); border-top: 1px solid var(--c-rule); }
.contact-route { border-bottom: 1px solid var(--c-rule); }
.contact-route > summary { list-style: none; cursor: pointer; }
.contact-route > summary::-webkit-details-marker { display: none; }
.contact-route__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-5);
  font-size: var(--fs-h3); color: var(--c-ink);
  transition: color 140ms var(--ease);
}
.contact-route__toggle::after {
  content: '+'; font-family: var(--f-label); font-size: var(--fs-lead);
  color: var(--c-gold); line-height: 1;
}
.contact-route[open] .contact-route__toggle::after { content: '–'; }
.contact-route__toggle:hover { color: var(--c-gold-dim); }
.contact-route > summary:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -2px; }
.contact-route__body { padding-bottom: var(--sp-6); max-width: var(--measure); }
.contact-route__body > :first-child { margin-top: 0; }
/* Nel corpo della sorgente il mezzo di trasporto è in grassetto attaccato al
   testo: su una riga propria diventa il titoletto che era. */
.contact-route__body strong { display: block; margin-bottom: var(--sp-1); }

/* La mappa: piu' alta del riquadro generico di terze parti, perche' una mappa
   di diciotto rem mostra il paese e non la strada, e con un filetto intorno,
   che senza si legge come un ritaglio di pagina web incollato li' in mezzo. */
.contact-map__frame { margin-top: var(--sp-7); border: 1px solid var(--c-rule); min-height: 0; }
/* L'altezza la chiede la mappa, non il riquadro: finche' il consenso non
   arriva li' dentro c'e' una frase di tre righe, e ventisei rem di vuoto sotto
   una frase sembrano un pezzo di pagina che non ha finito di caricare. */
.contact-map__frame iframe { min-height: 26rem; }
.contact-map__frame .thirdparty__note { padding: var(--sp-6); }

.contact-map {
  margin: var(--sp-5) 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5);
}
.contact-map__where { font-size: var(--fs-small); color: var(--c-ink-soft); }
.contact-closing { padding-bottom: var(--sp-section); }

/* --------------------------------------------------------------------------
   Hub di località
   --------------------------------------------------------------------------
   La presentazione e le citazioni sono centrate; le fasce dei luoghi le
   disegna già editorial-split. La citazione è una pausa fra due luoghi, non
   una fascia mancata: perciò ha aria sopra e sotto e un filetto d'oro, che è
   il segno che la sorgente usava per separarle.
   -------------------------------------------------------------------------- */
.hub-intro { --measure: var(--measure-wide); padding-block: var(--sp-section) var(--sp-6); text-align: center; }
.hub-intro h2 { margin-top: 0; }
/* Una presentazione che e' un racconto — otto paragrafi e l'elenco di cio'
   che il pacchetto include, su Wellness — si legge allineata a sinistra,
   come sulla sorgente; centrata scorreva come una lapide. */
.hub-intro--article { text-align: left; }
.hub-intro--article .eyebrow { text-align: left; }
.hub-intro__list { margin: 0 0 var(--sp-5); padding-left: 1.2em; }
.hub-intro__list li + li { margin-top: var(--sp-2); }
/* Il pulsante della presentazione respira: sulla sorgente sta in una riga
   sua fra il testo e la galleria, non attaccato all ultimo paragrafo. */
.hub-intro__cta { margin-top: var(--sp-6); }

.hub-quote { --measure: var(--measure-wide); padding-block: var(--sp-8); text-align: center; }
.hub-quote h2 { margin: 0; }
.hub-quote h2::after {
  content: ''; display: block;
  width: 3rem; height: 1px; margin: var(--sp-5) auto 0;
  background: var(--c-gold);
}
.hub-quote p { margin-top: var(--sp-5); color: var(--c-ink-soft); }

/* L'offerta: un pannello, non una pausa. Fondo caldo, prezzo grande, elenco
   di ciò che comprende, postille piccole, pulsante d'oro. Chi arriva qui vuole
   sapere quanto costa e che cosa ci trova dentro. */
.hub-quote--offer {
  background: var(--c-paper-warm);
  padding: var(--sp-8) var(--sp-6);
  max-width: none;
  width: min(100% - 2.5rem, var(--container));
}
.hub-quote--offer h2::after { margin-bottom: var(--sp-2); }
/* Il prezzo dentro una fascia con la fotografia: stessa voce di quello del
   pannello, ma allineato al testo della sua colonna. */
.band__price { margin: var(--sp-3) 0 0; font-size: var(--fs-h3); color: var(--c-ink); }

.hub-offer__price {
  margin-top: var(--sp-4);
  font-size: var(--fs-h2); color: var(--c-ink);
}
.hub-offer__includes {
  margin: var(--sp-5) auto 0; padding: 0; max-width: var(--measure);
  list-style: none; text-align: left;
  display: grid; gap: var(--sp-3);
}
.hub-offer__includes li { position: relative; padding-left: 1.4em; color: var(--c-ink-soft); }
.hub-offer__includes li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: .7em; height: 1px; background: var(--c-gold);
}
/* Date, tariffa, cancellazione: condizioni di vendita, non argomenti. */
.hub-offer__note { font-size: var(--fs-small); color: var(--c-ink-faint); }
.hub-quote--offer .btn { margin-top: var(--sp-3); }

/* Le fasce degli hub stanno nel contenitore, non a piena larghezza come in
   home. Due ragioni che coincidono: sulla sorgente queste sezioni hanno i
   margini, e le fotografie dei luoghi sono ritagli da 624 px: a piena
   larghezza la colonna dell'immagine ne chiedeva 741 e il browser le
   ingrandiva del 19%. */
/* Il fondo caldo di `.bands` funziona in home, dove le fasce arrivano ai bordi
   e il colore copre tutta la riga. Ristretto al contenitore diventava un
   rettangolo caldo dietro la sola colonna del testo, con la fotografia bianca
   accanto: la pagina sembrava una scatola con lo sfondo a metà. Sulla sorgente
   queste sezioni non hanno pannello — il testo sta sul fondo della pagina. */
.page--hub .bands { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; background: transparent; }

/* La fotografia degli hub resta un rettangolo, come sulla sorgente: allargarla
   a tutta l'altezza della riga era servito a coprire il vuoto lasciato dal
   pannello caldo. Tolto il pannello, quel vuoto è il bianco della pagina — che
   è esattamente quello che fa il sito in produzione. */
@media (min-width: 60rem) {
  /* La fotografia sta in cima alla riga e ci resta mentre il testo scorre.
     Su «Borgo Torciano» e «Veranda Giardino» il racconto e' di sei paragrafi
     e la fotografia di uno: ancorata in alto lasciava sotto di se' settecento
     pixel di bianco, e la meta' bassa della pagina era una colonna di testo
     sola con un vuoto accanto. Appiccicandola si accompagna alla lettura e il
     vuoto sparisce, senza toccare ne' il rapporto della foto ne' il testo. */
  /* Sotto la testata, che è anch'essa appiccicata e alta ~156px: a
     `top: 48px` la fotografia scorreva dietro il menù. `--header-h` la
     misura main.js; 10rem è il ripiego senza JavaScript. */
  .page--hub .band__media { align-self: start; position: sticky; top: calc(var(--header-h, 10rem) + var(--sp-5)); }
}

.hub-closing { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
/* Attaccata al piede: quando la striscia chiude la pagina, il piede non
   tiene il suo margine — un vuoto bianco fra cinque fotografie e il fondo
   scuro leggeva come un errore. */
main:has(> .hub-closing:last-child) + .site-footer { margin-top: 0; }
/* Sul telefono cinque quadrati in griglia diventano francobolli: le
   fotografie scorrono di lato, una alla volta, a scatti, senza JavaScript. */
@media (max-width: 59.99rem) {
  .hub-closing {
    display: flex; overflow-x: auto; gap: 2px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hub-closing::-webkit-scrollbar { display: none; }
  .hub-closing img { flex: 0 0 82vw; aspect-ratio: 4 / 3; scroll-snap-align: start; }
}
/* La trama di foglie della sorgente, dietro il contenuto: `bg-scaled`, centrata
   in alto, come su Divi. Solo dove `page_media` la registra. */
/* `cover`, non `no-repeat` a larghezza piena: la trama e' alta 2880px su
   2317, cioe' ~2400px a 1920 di finestra, e una pagina lunga la supera —
   dove finiva restava una fascia bianca fra l'ultima citazione e il modulo di
   richiesta. Ripetuta lasciava una cucitura; coperta sull'altezza intera e'
   un disegno solo, un po' piu' grande, senza giunture. */
.page--textured { background: #fff url('/media/2024/06/bg-scaled.webp') center top / cover no-repeat; }
.page--textured .bands,
.page--textured .hub-intro,
.page--textured .hub-quote { background: transparent; }
/* Sotto un'apertura con le scritte: l'intestazione porta solo l'eventuale
   occhiello, e senza niente da mostrare non prende spazio. */
.page__header--after-lettering:not(:has(.eyebrow, .page__lead)) { display: none; }
/* Un oggetto ritagliato (PNG con trasparenza) sta intero nel riquadro, senza
   ritaglio e **senza fondo**: la carta regalo delle Offerte e' trasparente
   attorno alla scatola, e un riquadro bianco sopra la trama di foglie si
   vedeva come una toppa. Sotto passa lo sfondo della pagina. */
.band--contain .band__media,
.band--contain .slider { background: transparent; }
.band--contain .slider__slide img { object-fit: contain; }
.hub-closing img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* --------------------------------------------------------------------------
   Hub delle esperienze
   --------------------------------------------------------------------------
   Apertura centrata, griglia di schede su fondo chiaro, coda a colonne: le
   tre parti della sorgente.
   -------------------------------------------------------------------------- */
.exp-intro { --measure: var(--measure-wide); padding-block: var(--sp-section) var(--sp-7); text-align: center; }
.exp-intro h2 { margin-top: var(--sp-2); }

/* Le ragioni per scegliere: riquadri affiancati, non un elenco puntato. */
.exp-reasons { padding-bottom: var(--sp-7); }
.exp-reasons__grid {
  list-style: none; margin-block: 0; padding: 0;
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.exp-reasons__grid li { margin: 0; }
.exp-reasons__grid h3 {
  margin: 0 0 var(--sp-2);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.exp-reasons__grid p { margin: 0; font-size: var(--fs-small); }

.exp-grid { padding-block: var(--sp-7) var(--sp-section); background: var(--c-paper-warm); }
.exp-grid__list {
  /* margin-block e non margin: l'elenco porta anche container-wide, che centra
     con margin-inline auto, e un margin 0 qui lo annullava. */
  list-style: none; margin-block: 0; padding: 0;
  display: grid; gap: var(--sp-6);
  /* 17rem porta a quattro colonne su uno schermo da 1440, che è
     l'impaginazione della sorgente; sotto, auto-fit scende da sé. */
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.exp-card { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.exp-card__media { display: block; width: 100%; }
/* 4:3 come sulla sorgente: quadrate rubavano altezza a una griglia che ha già
   quattro colonne e undici schede. */
.exp-card__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.exp-card__title {
  margin: var(--sp-4) 0 0;
  font-family: var(--f-label); font-size: var(--fs-small);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.exp-card__title a { color: inherit; text-decoration: none; }
.exp-card__title a:hover, .exp-card__title a:focus-visible { text-decoration: underline; }
.exp-card__price { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-small); color: var(--c-ink-soft); }
/* Il pulsante si allinea in fondo: le schede hanno titoli di una o due righe,
   e senza questo i pulsanti finivano a quote diverse lungo la stessa riga.
   Lo spazio sopra sta sul prezzo, non qui: una regola `+ .exp-card__cta`
   pesa più di questa e cancellerebbe l'`auto` senza dirlo. */
.exp-card__cta { margin-top: auto; align-self: center; }

.exp-tail { padding-block: var(--sp-section); }
.exp-tail h2 { margin-top: 0; text-align: center; }
.exp-tail__cols {
  margin-top: var(--sp-7);
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.exp-tail__cols h3 { margin-top: 0; font-size: var(--fs-h3); }
.exp-tail__cols p { font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   Scheda del pacchetto
   --------------------------------------------------------------------------
   Racconto a sinistra, spalla a destra. La spalla si appiccica in alto sul
   desktop — prezzo e prenotazione restano a video mentre si scorrono tremila
   parole di racconto — e sotto i 60rem torna in colonna, dopo il racconto:
   su un telefono un riquadro appiccicato ruba metà schermo.
   -------------------------------------------------------------------------- */
/* L'apertura a tutta larghezza. L'altezza è la stessa dell'hero delle altre
   pagine, così due schede aperte di fila cominciano allo stesso punto. */
/* Un'apertura che porta gia' le sue scritte si mostra intera, non ritagliata:
   tagliarla a un'altezza fissa taglierebbe le parole. */
.hero-plain { margin: 0; }
.hero-plain img { display: block; width: 100%; height: auto; }

.offer-hero { margin: 0; }
.offer-hero img {
  display: block; width: 100%;
  height: clamp(18rem, 46svh, 30rem);
  object-fit: cover;
}

/* Fascia delle date, titolo e sommario: in mezzo, su misura di lettura, come
   sulla sorgente. A sinistra e larga il titolo galleggiava su una colonna
   vuota, perché la spalla comincia più in basso. */
/* Più larga della colonna di lettura: il titolo di un pacchetto è lungo
   («Pernottamento e Cena in Toscana con Degustazione in Cantina») e a 64ch si
   spezzava in tre righe, mentre il sommario, che è una frase sola, si allunga
   in una colonna stretta e centrata. */
.offer-head { --measure: var(--measure-wide); padding-block: var(--sp-7) 0; text-align: center; }
.offer-head h1 { margin: var(--sp-2) 0 0; }
.offer-head__meta {
  margin: var(--sp-4) auto 0; max-width: 46rem;
  font-size: var(--fs-lead); color: var(--c-ink-soft);
}
.offer-head__mosaic {
  margin-top: var(--sp-7);
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.offer-head__mosaic figure { margin: 0; }
.offer-head__mosaic img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* In alto meno spazio che in basso: sopra c'è già l'aria dell'apertura
   centrata, e sommandole le due colonne cominciavano mezzo schermo più giù. */
.offer-detail { padding-block: var(--sp-8) var(--sp-section); display: grid; gap: var(--sp-7); }
/* La colonna del racconto si ferma a 640 px per due ragioni che coincidono:
   è la misura oltre la quale una riga di testo si legge male, ed è la
   larghezza vera delle fotografie del corpo — sulla sorgente sono ritagli da
   650 px, e in una colonna da 875 px il browser le ingrandiva del 35%. */
.offer-detail__main { max-width: 40rem; }
.offer-detail__main > :first-child { margin-top: 0; }
/* `max-width` e non `width`: nel corpo, accanto alle fotografie, vivono anche
   segni piccoli — la freccia «scendi» da cento pixel — e stirarli alla
   larghezza della colonna li rende una macchia sfocata larga sei volte. */
.offer-detail__main img { display: block; max-width: 100%; height: auto; }
.offer-detail__main figure { margin: var(--sp-6) 0; }
/* Il pulsante in fondo al racconto: sulla sorgente chiude la colonna di
   sinistra, ed è il gesto che si fa dopo aver letto, non mentre si legge. */
.offer-detail__cta { margin: var(--sp-7) 0 0; }
.offer-detail__fallback-cta { padding-bottom: var(--sp-section); }

/* La spalla è un pannello solo, come sulla sorgente: dentro, i fatti separati
   da un filetto. Riquadri sciolti su fondo bianco non si leggevano come una
   scheda — si leggevano come coda del racconto, che è la cosa che stanno
   accompagnando. */
.offer-detail__aside { background: var(--c-paper-warm); padding: var(--sp-6); }
.offer-box { padding-block: var(--sp-5); border-top: 1px solid var(--c-rule); }
.offer-box:first-child { border-top: 0; padding-top: 0; }
.offer-box:last-child { padding-bottom: 0; }
.offer-box__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-faint);
}
.offer-box > :last-child { margin-bottom: 0; }
.offer-box p, .offer-box li { font-size: var(--fs-small); }
.offer-box ul { padding-left: 0; margin: 0; list-style: none; }
.offer-box li { margin: 0 0 var(--sp-2); padding-left: 1.1em; position: relative; }
.offer-box li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: .5em; height: 1px; background: var(--c-gold);
}

/* Il riquadro del prezzo è l'unico su fondo scuro: è la risposta alla prima
   domanda che si fa chi apre la pagina di un pacchetto. */
/* Il riquadro del prezzo chiude la scheda e la sborda: dentro un pannello
   chiaro, un blocco scuro a filo dei bordi si legge come la riga di fondo di
   una ricevuta, che è quello che è. */
/* Sborda ai lati e, quando e' in cima o in fondo, anche sopra e sotto: un
   blocco scuro con un dito di fondo caldo intorno sembra un errore, mentre a
   filo del pannello si legge come la testata e il piede della scheda.
   Il padding, pero', resta il suo: le regole generiche `:first-child` e
   `:last-child` azzerano quello verticale delle scatole — hanno senso per i
   riquadri di testo, separati da un filetto, ma qui incollavano la scritta
   «prezzo pacchetto» al bordo di sopra e il pulsante a quello di sotto.
   Percio' la regola qui sotto e' piu' specifica di quelle, e viene dopo. */
.offer-box--price {
  background: var(--c-night); color: var(--c-on-dark);
  border-top: 0;
  margin: var(--sp-6) calc(var(--sp-6) * -1);
}
.offer-box--price:first-child { margin-top: calc(var(--sp-6) * -1); }
.offer-box--price:last-child { margin-bottom: calc(var(--sp-6) * -1); }
.offer-detail__aside .offer-box--price { padding: var(--sp-6) var(--sp-5); }
.offer-box--price .offer-box__title { color: var(--c-gold-soft); }
/* La riga «prezzo al pubblico, IVA inclusa» è una postilla: al corpo del testo
   gridava quanto il prezzo. Piccola, non illeggibile: è una condizione di
   vendita, e su fondo scuro undici pixel sparivano. */
.offer-box--price p { font-size: var(--fs-small); color: var(--c-on-dark-soft); }
/* Il valore va dichiarato dopo e con la stessa specificità della regola qui
   sopra, altrimenti quella lo rimpicciolisce: `.offer-box--price p` pesa più
   di `.offer-box__value` da sola, e il prezzo — la cosa che si viene a
   cercare — finiva a undici pixel. */
.offer-box--price .offer-box__value {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h2); font-family: var(--f-text);
  color: var(--c-on-dark);
}
.offer-box__cta { display: block; margin-top: var(--sp-5); text-align: center; }

@media (min-width: 60rem) {
  .offer-detail { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: var(--sp-8); align-items: start; }
  .offer-detail--single { grid-template-columns: minmax(0, 1fr); }
  /* Stessa ragione della fascia hub: la spalla si ferma sotto la testata.
     Ed è alta fino a 1800px — prezzo, disponibilità, tutto ciò che il
     pacchetto comprende — quindi appiccicata intera non ci sta: la parte
     bassa comparirebbe solo in fondo alla pagina. Il tetto la tiene dentro
     lo schermo e la lascia scorrere da sé, come il riepilogo del costruttore
     del soggiorno. Prezzo e «Prenota» stanno in cima e si vedono sempre. */
  .offer-detail__aside {
    position: sticky; top: calc(var(--header-h, 10rem) + var(--sp-5));
    max-height: calc(100svh - var(--header-h, 10rem) - var(--sp-5) * 2);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c-rule-strong) transparent;
  }
}

/* ==========================================================================
   Velo d'apertura
   ==========================================================================
   Copre il momento in cui la fotografia grande non c'e' ancora, e si scioglie
   da se'. L'animazione e' l'unico modo per toglierlo: cosi' funziona anche
   senza JavaScript, che qui puo' solo accorciare l'attesa, mai allungarla.
   -------------------------------------------------------------------------- */
/* Sopra tutto, intestazione e fascia dei cookie comprese: e' un velo, e un
   velo che lascia vedere l'intestazione non e' un velo. Il numero e' piu' alto
   di quello del lightbox perche' l'apertura viene prima di tutto il resto. */
.pageload {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: var(--c-paper-warm);
  animation: pageload-off 1.4s var(--ease) forwards;
}
.pageload__mark { display: grid; justify-items: center; gap: var(--sp-4); }
.pageload__name {
  font-family: var(--f-text); font-size: var(--fs-h3);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-ink);
  animation: pageload-in 700ms var(--ease) both;
}
/* Il filetto si tira: e' l'unico movimento, e dice «sto arrivando» senza
   girare in tondo come una rotella. */
.pageload__rule {
  display: block; width: 8rem; height: 1px; background: var(--c-rule-strong);
  position: relative; overflow: hidden;
}
.pageload__rule::after {
  content: ''; position: absolute; inset: 0;
  background: var(--c-gold); transform-origin: left;
  animation: pageload-rule 1.1s var(--ease) both;
}
/* Tolto prima dal JavaScript, appena la pagina e' pronta davvero. */
.pageload.is-done { animation: pageload-off 420ms var(--ease) forwards; }

@keyframes pageload-in  { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: none; } }
@keyframes pageload-rule{ from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pageload-off {
  0%, 55%  { opacity: 1; }
  100%     { opacity: 0; visibility: hidden; }
}

/* Dalla seconda pagina in poi resta il filetto in cima e basta: la prima volta
   e' un'apertura, la quinta sarebbe un ostacolo. */
.is-returning .pageload { background: transparent; place-items: start stretch; pointer-events: none; }
.is-returning .pageload__mark { display: none; }

/* Chi ha chiesto meno movimento non lo vede: niente velo, niente attesa. */
@media (prefers-reduced-motion: reduce) {
  .pageload { display: none; }
}

/* ==========================================================================
   Lightbox della galleria
   ==========================================================================
   La fotografia sopra la pagina, su fondo scuro, con le frecce ai lati. Sotto
   i 40rem le frecce vanno in basso: ai lati, su un telefono, coprirebbero la
   fotografia che si e' venuti a guardare.
   -------------------------------------------------------------------------- */
.photo-set__link { display: block; }
.photo-set__link:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }

/* Sopra l'intestazione appiccicata e sopra la fascia dei cookie: a 200 restava
   sotto la prima, e la pagina si vedeva attraverso la fotografia. */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sp-4); padding: var(--sp-6);
  background: rgb(19 15 12 / .94);
}
.lightbox[hidden] { display: none; }
.lightbox__figure {
  grid-column: 2; margin: 0;
  display: grid; justify-items: center; gap: var(--sp-4);
  min-height: 0;
}
.lightbox__figure img {
  display: block; max-width: 100%; max-height: calc(100svh - 9rem);
  width: auto; height: auto; object-fit: contain;
}
.lightbox__caption {
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-on-dark-soft);
}
.lightbox__nav, .lightbox__close {
  background: none; border: 0; cursor: pointer;
  color: var(--c-on-dark); line-height: 1;
  transition: color 140ms var(--ease);
}
.lightbox__nav { font-size: 3rem; padding: var(--sp-4); }
.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }
.lightbox__close {
  position: absolute; top: var(--sp-4); right: var(--sp-5);
  font-size: 2.25rem; padding: var(--sp-2);
}
.lightbox__nav:hover, .lightbox__close:hover { color: var(--c-gold-soft); }
.lightbox button:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* Con il velo aperto la pagina sotto non scorre: si scorre la galleria, non
   quello che c'e' dietro. */
.has-lightbox, .has-lightbox body { overflow: hidden; }

@media (max-width: 40rem) {
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding: var(--sp-4); }
  .lightbox__figure { grid-column: 1; grid-row: 1; }
  .lightbox__nav { font-size: 2.5rem; grid-row: 2; }
  .lightbox__nav--prev { grid-column: 1; justify-self: start; }
  .lightbox__nav--next { grid-column: 1; grid-row: 2; justify-self: end; }
}

/* ==========================================================================
   16 · Home
   --------------------------------------------------------------------------
   La home non è un testo con un'apertura: è una successione di fasce, e sono
   le stesse della sorgente. Cambia il modo in cui sono fatte — fotografie
   vere invece che sfondi CSS, link veri invece che righe rese cliccabili dal
   JavaScript del page builder.
   ========================================================================== */

/* Apertura: le fotografie scorrono sotto il titolo, che non si muove. */
.hero--slider .hero__slider { position: absolute; inset: 0; }
.hero--slider .slider { background: var(--c-night); }
.hero--slider .slider__slide img { filter: brightness(.62) saturate(.92); }
/* Lo scrim copre le fotografie ma non deve intercettare il dito diretto alle
   frecce, che stanno sopra. */
.hero--slider .hero__scrim { pointer-events: none; }
.hero--slider .slider__control { z-index: 4; bottom: var(--sp-5); top: auto; translate: none; }
.hero--slider .slider__control--prev { left: auto; right: calc(var(--sp-5) + 3.5rem); }
.hero--slider .slider__control--next { right: var(--sp-5); }
/* Il contatore starebbe in basso a sinistra, dove c'è il titolo. */
.hero--slider .slider__counter { display: none; }

/* Le quattro scorciatoie, sotto la verifica disponibilità.

   Solo sul telefono, come sulla sorgente: sopra i 768 px Divi le spegneva con
   `display:none`, perché lì il menù in cima è già tutto in vista e ripeterlo
   sarebbe stato dire due volte la stessa cosa. Sotto, dove il menù sta chiuso
   dietro un pulsante, sono le quattro strade più battute a portata di pollice.

   Due colonne di riquadri quadrati, com'erano: la riga aveva la classe
   `two-columns` e i moduli `aspect-ratio: 1`. */
.shortcuts { padding-block: var(--sp-6); }
.shortcuts__grid {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
  /* Due colonne restano due colonne, ma su un telefono largo quattro quadrati
     da 350 px sarebbero una pagina intera di sole scorciatoie. */
  max-width: 26rem;
}
.shortcuts__grid li { margin: 0; }
.shortcuts__grid a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  aspect-ratio: 1; padding: var(--sp-4);
  border: 1px solid var(--c-rule); border-radius: 4px;
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  text-align: center; text-decoration: none; color: var(--c-ink);
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.shortcuts__grid a:hover { background: var(--c-paper-warm); border-color: var(--c-gold-dim); }
.shortcuts__icon { width: 2rem; height: 2rem; color: var(--c-gold-dim); }
@media (min-width: 48rem) { .shortcuts { display: none; } }

/* Apertura narrativa: una colonna di lettura, centrata. */
.home-intro { --measure: var(--measure-wide); padding-block: var(--sp-section); text-align: center; }
.home-intro h2 { margin-top: 0; font-size: clamp(1.75rem, 3.4vw, 3rem); }
.home-intro__subtitle {
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--c-gold-dim);
  margin-bottom: var(--sp-6);
}

/* Le fasce alternate. Stessa struttura del racconto delle camere; qui le
   fotografie sono orizzontali, quindi il riquadro è orizzontale.

   Il fondo è bianco, non caldo. Prima tutta la pila di fasce stava su un
   unico avorio, e la home diventava una tinta sola dalla verifica
   disponibilità fino alle offerte. Sulla sorgente le fasce stanno sul
   bianco e il fondo cambia in due punti soli — la storia e i voucher — e
   sono quei due cambi a dire dove finisce una parte e ne comincia un'altra.
   Un fondo che non cambia mai non separa niente. */
.bands { background: var(--c-paper); }

/* La fascia arriva ai bordi dello schermo. Prima si fermava a 88rem, e su un
   monitor largo restava una striscia di fondo caldo lungo i due fianchi: ogni
   fascia sembrava una scheda incollata sulla pagina invece che un pezzo della
   pagina. Le fotografie qui reggono la larghezza — la più piccola in prima
   slide è 1280 px — quindi non c'è la ragione che tiene incorniciate le
   camere. A dettare la misura è la colonna di testo, più sotto, non la
   fascia. */
.band { display: grid; }
/* Il filetto sta fra una fascia e l'altra, non addosso alla fascia: prima lo
   portava `.band`, e dove in mezzo capitava la storia o i voucher — che
   fasce non sono — il segno spariva e il passo cambiava. Così ogni
   accostamento ne ha uno e l'ultimo non ne ha di troppo. */
.bands > * + * { border-top: 1px solid var(--c-rule); }

/* 16:9, come gli slider della sorgente: gli scatti sono orizzontali e nati
   fra 3:2 e 8:5, quindi il riquadro ne toglie una fetta sottile sopra e
   sotto e non deforma niente. Il rapporto è lo stesso a ogni larghezza, così
   la pagina non cambia forma mentre si scorre. */
.band__media { position: relative; display: grid; overflow: hidden; background: var(--c-night); aspect-ratio: 16 / 9; }
/* Lo stesso respiro verticale delle fasce che hanno un fondo proprio: il
   `--sp-section` sopra e sotto, i fianchi liberi di stringersi. Prima il
   testo delle fasce respirava meno della storia e dei voucher, e scendendo
   nella pagina il passo si sentiva cambiare. */
/* L'altezza della fascia la detta la fotografia, non il padding del testo.
   Con `--sp-section` sopra e sotto — fino a sette rem per parte — una fascia
   con due righe di testo diventava alta quanto una con dieci, e scendendo
   nella pagina il passo si sentiva ballare: fasce identiche per contenuto
   apparivano lunghe il doppio l'una dell'altra. Adesso il respiro verticale e'
   quello di un blocco (`--sp-7`), il testo si centra sulla fotografia, e dove
   il testo e' piu' lungo della fotografia e' lui a decidere, come e' giusto.
   Le fasce di solo testo tengono il respiro grande: li' non c'e' fotografia a
   dare la misura. */
.band__copy { padding: var(--sp-7) clamp(2rem, 5vw, 4.5rem); align-self: center; }
.band--text .band__copy { padding-block: var(--sp-section); }
.band__copy h2 { margin-top: 0; }
.band__copy > :last-child { margin-bottom: 0; }
.band__list { margin: 0 0 var(--sp-5); padding-left: 1.2em; }

/* «Leggi tutto», solo sul telefono.
   Il testo lungo si ferma a una decina di righe con una sfumatura verso il
   fondo, e il tasto lo apre; sullo schermo largo il tasto non c'e' e il
   testo e' intero. Il tasto lo mostra il JavaScript: senza, il testo resta
   tutto a video — si accorcia solo quello che si puo' riallungare. */
.readmore { display: none; }
@media (max-width: 59.99rem) {
  .is-clampable.is-clamped {
    max-height: 15rem; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 60%, transparent);
    mask-image: linear-gradient(#000 60%, transparent);
  }
  .readmore {
    display: inline-block; margin: var(--sp-2) 0 var(--sp-4); padding: 0;
    background: none; border: 0; border-bottom: 1px solid var(--c-gold);
    font-family: var(--f-label); font-size: var(--fs-micro);
    letter-spacing: var(--ls-label); text-transform: uppercase;
    color: var(--c-gold-dim); cursor: pointer;
  }
  .readmore[hidden] { display: none; }
}
.band--text .band__copy { max-width: var(--measure); margin-inline: auto; text-align: center; }
@media (min-width: 60rem) {
  /* `center` e non `stretch`: con lo stiramento il riquadro fotografico si
     allungava fino all'altezza del testo e il rapporto saltava. Ora la
     fotografia tiene la sua forma e il testo le si affianca a metà. */
  .band { grid-template-columns: 52% 48%; align-items: center; }
  .band--reverse { grid-template-columns: 48% 52%; }
  .band--reverse .band__media { order: 2; }
  .band--text { grid-template-columns: 1fr; }
  /* Il testo non insegue la larghezza dello schermo: oltre una certa misura
     l'occhio perde il capo della riga successiva. Si ferma, e resta appoggiato
     al lato della fotografia invece di scivolare verso il bordo. */
  .band__copy { max-width: 52rem; justify-self: start; }
  .band--reverse .band__copy { justify-self: end; }
  .band--text .band__copy { justify-self: center; }
}

/* Le fasce a pannello (Wellness): tre quinti alla fotografia, due quinti a
   un pannello chiaro che tiene il testo e riempie l'altezza della riga, come
   la sorgente. La fotografia sta in 3:2, che e' il formato degli scatti di
   quella pagina, e resta appiccicata sotto la testata mentre il testo lungo
   scorre. */
/* A tutta larghezza, come la home: sulla sorgente le righe di Wellness vanno
   da bordo a bordo (19px di margine su 1920), la fotografia prende 1098px e
   il testo 633. Il contenitore da 74rem degli altri hub qui non c'e'. La
   presentazione invece sta in una colonna da 1080px centrata, allineata a
   sinistra. */
.page--hub-panel .bands { width: calc(100% - 2.5rem); max-width: none; }
/* Le righe non si toccano: 27px di bianco fra l'una e l'altra, come sulla
   sorgente, e nessun filetto. */
.page--hub-panel .bands > * + * { border-top: 0; margin-top: 1.7rem; }
.page--hub-panel .hub-intro { --measure: 67.5rem; }
/* Il pannello del testo: grigio neutro al 5% sul bianco, 40px di respiro,
   a ogni larghezza. */
.page--hub-panel .band__copy { background: rgb(0 0 0 / 0.05); padding: 2.5rem; }
@media (min-width: 60rem) {
  .page--hub-panel .band { grid-template-columns: 3fr 2fr; align-items: stretch; }
  .page--hub-panel .band--reverse { grid-template-columns: 2fr 3fr; }
  /* Foto e pannello alti uguali: la riga e' alta quanto il piu' alto dei
     due, e la fotografia riempie tutta la colonna (`cover`) invece di
     fermarsi a 3:2 e lasciare bianco sotto di se'. Sulla sorgente le due
     colonne sono sempre pari perche' il testo, a 14px, sta dentro l'altezza
     della foto; qui il corpo e' piu' grande e il pannello puo' essere piu'
     alto, quindi e' la foto a seguire. Il minimo 3:2 tiene la forma dove il
     testo e' corto. Niente `sticky` qui: una foto che scorre dentro un
     pannello alto quanto lei non ha dove andare. */
  .page--hub-panel .band__media { aspect-ratio: auto; min-height: 0; align-self: stretch; position: relative; top: auto; }
  .page--hub-panel .band__media::before { content: ''; display: block; padding-top: 66.666%; }
  .page--hub-panel .band__media > .slider { position: absolute; inset: 0; }
  .page--hub-panel .band__copy { align-self: stretch; }
  .page--hub-panel .band__copy {
    max-width: none; justify-self: stretch;
    display: flex; flex-direction: column; justify-content: center;
    padding: 2.5rem;
  }
  .page--hub-panel .band__copy > * { max-width: 40rem; }
}

/* I voucher: quattro schede verso lo shop, che è un altro sito. Il fondo li
   stacca dalle fasce bianche sopra e sotto, come sulla sorgente — là è un
   grigio neutro (#f6f6f6), qui l'avorio che il sito usa già dappertutto: la
   stessa chiarezza, sull'asse caldo del resto della pagina. */
.vouchers { padding-block: var(--sp-section); background: var(--c-paper-warm); }
.vouchers h2 { margin-top: 0; text-align: center; }
.vouchers__grid {
  list-style: none; margin: var(--sp-7) 0 0; padding: 0;
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.voucher {
  margin: 0; padding: var(--sp-5) var(--sp-5) var(--sp-6);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 1px solid var(--c-rule); background: var(--c-paper);
}
/* La confezione porta sul davanti la fotografia dell'esperienza: a misura di
   icona le quattro schede erano quattro scatoline rosse indistinguibili. */
.voucher__image {
  width: 100%; max-width: 13rem; height: auto; aspect-ratio: 1;
  object-fit: contain; margin-bottom: var(--sp-4);
}
.voucher__title { margin: 0 0 var(--sp-3); font-size: var(--fs-h3); }
.voucher__text { color: var(--c-ink-soft); font-size: var(--fs-small); }
/* Il link si spinge in fondo: le schede hanno testi di lunghezza diversa e
   con i pulsanti a mezz'aria la riga sembra sbilenca. */
.voucher__link { margin-top: auto; padding-top: var(--sp-4); font-family: var(--f-label); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; }

/* Chiusura: le offerte, a tutta larghezza e cliccabili per intero. */
.home-closing { position: relative; }
.home-closing .slider { aspect-ratio: 3 / 1; }
/* Il link copre la fascia ma resta sotto le frecce, che hanno z-index 3. */
.home-closing__link { position: absolute; inset: 0; z-index: 2; }

.home-reviews { padding-block: var(--sp-section); }
.home-reviews:empty { display: none; }
/* Il widget Elfsight non sta nella colonna da 74rem come il resto: dentro
   quel riquadro le schede delle recensioni si stringevano e la fascia
   sembrava una scatola in mezzo a sezioni a tutta larghezza. Qui prende il
   90% della riga e basta, senza tetto massimo. */
.home-reviews { overflow-x: clip; }
.home-reviews > .container { width: 90%; max-width: none; }

/* Sotto i 30rem in barra ci sono marchio, lingue, prenotazione e menu, e la
   riga non è elastica: si stringono i divari, i fianchi del tasto e il
   marchio, che qui si riduce allo stemma e al nome. Il luogo sotto sparisce:
   è la parte che si può togliere senza togliere un'informazione, perché il
   nome resta e la pagina dei contatti dice dov'è. */
@media (max-width: 30rem) {
  .site-header__masthead { column-gap: var(--sp-3); }
  .site-header__tools { gap: var(--sp-1); }
  .btn--book { padding-inline: 0.8em; }

  .site-header__brand { column-gap: var(--sp-1); }
  .site-header__crest { width: 1.25rem; height: 1.25rem; }
  .site-header__wordmark { font-size: 0.625rem; letter-spacing: .04em; }
  .site-header__tagline { display: none; }
}

/* Sotto i 22.5rem resta il solo stemma: a 320px il nome per esteso spingeva
   fuori il pulsante del menu, e fra un marchio scritto e un menu che si apre
   vince il menu. Il nome non si perde: sta nell'`aria-label` del collegamento,
   che è quello che legge un lettore di schermo. */
@media (max-width: 22.5rem) {
  .site-header__wordmark { display: none; }
  .site-header__crest { width: 1.5rem; height: 1.5rem; }
}

/* ==========================================================================
   12 · Preferenze dell'utente
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header, .site-footer, .consent, .breadcrumb, .skip-link { display: none; }
  body { font-size: 11pt; color: #000; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}

/* ==========================================================================
   13 · Apertura e galleria
   ==========================================================================
   Sono i due componenti che rimettono in pagina le fotografie.

   Servono perché il sito di partenza, costruito con Divi, dichiarava quasi
   tutte le sue immagini come sfondi CSS: estraendo il contenuto sono rimaste
   fuori, catalogate in `page_media` con ruolo e ordine. Qui tornano a vedersi,
   con i componenti di questo design invece che con il CSS del page builder.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* L'altezza segue la sorgente: su Divi l'apertura misura 540px a 1440 di
     larghezza (600 la home, 675 le camere). A 52vh il riquadro era 468px, e
     con `object-fit: cover` una fotografia 16:9 mostrava il 57% della sua
     altezza invece del 71%: la stessa foto sembrava ingrandita. 60vh a 900
     di finestra fa 540. */
  min-height: clamp(22rem, 60vh, 36rem);
  display: grid;
  align-items: end;
  overflow: clip;
  background: var(--c-night);
}
/* La misura non è estetica. La testata occupa circa 12.5rem e la barra di
   disponibilità circa 10rem: a 76vh l'eroe da solo riempiva tutto quel che
   restava dello schermo, e al caricamento la barra - il campo dove comincia
   una prenotazione - non si vedeva. A 58svh entra anche lei.
   `svh` e non `vh`: sul telefono `vh` misura la finestra senza le barre del
   browser, cioè la più alta delle due, e l'eroe tornerebbe a spingerla fuori. */
/* La sorgente apre la home a 600px su 1440 di larghezza e a circa 360 sul
   telefono. Qui: 45svh sul telefono (380 a 844 di finestra) e 66svh sopra
   (594 a 900), con il tetto sotto che tiene in vista la barra. */
.page--home .hero { min-height: clamp(20rem, 45svh, 38rem); }
/* Su schermo largo la testata è alta circa 12.5rem, e a 768px di finestra la
   percentuale da sola non bastava: la barra si vedeva a metà. Qui l'eroe prende
   il minore fra la sua misura e lo spazio che resta una volta tolte testata e
   barra, così su uno schermo basso si accorcia e su uno alto no. */
@media (min-width: 60rem) {
  .page--home .hero { min-height: min(clamp(22rem, 66svh, 38rem), calc(100svh - 20rem)); }
}

.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* L'immagine si scurisce quel tanto che basta perché il testo sopra abbia
     contrasto sufficiente su qualunque fotografia, chiara o scura. */
  filter: brightness(0.62) saturate(0.92);
}

.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(34 29 24 / 0.72) 0%, rgb(34 29 24 / 0.18) 45%, transparent 75%);
}

.hero__copy {
  position: relative;
  padding-block: var(--sp-8) var(--sp-7);
  color: var(--c-on-dark);
  max-width: 46rem;
}
.hero__copy .eyebrow { color: var(--c-gold-soft); }
.hero__title { font-size: var(--fs-display); margin-bottom: var(--sp-4); color: inherit; }
.hero__lead {
  font-size: var(--fs-lead); line-height: 1.5;
  color: var(--c-on-dark-soft);
  margin-bottom: 0;
}

/* --- Galleria ------------------------------------------------------------ */

.page-gallery { padding-block: var(--sp-section); }
.page-gallery__title {
  font-family: var(--f-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0 0 var(--sp-5);
}

.page-gallery__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.page-gallery__item { margin: 0; }
.page-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 400ms var(--ease);
}
/* La prima immagine occupa due colonne: una griglia tutta uguale legge come un
   catalogo, non come un racconto. */
@media (min-width: 48rem) {
  .page-gallery__item:first-child { grid-column: span 2; }
  .page-gallery__item:first-child img { aspect-ratio: 16 / 9; }
}
.page-gallery__item a { display: block; overflow: clip; border-radius: var(--radius); }
.page-gallery__item a:hover img { transform: scale(1.03); }

/* --- La storia, a due colonne ---------------------------------------------
   L'unica fascia della home che non ha fotografie da un lato e testo
   dall'altro: sulla sorgente è un racconto in due colonne con le due
   fotografie d'archivio dentro. Su schermo stretto le colonne diventano una,
   e l'ordine del racconto resta quello giusto perché nel documento i
   paragrafi sono già in fila. */

.chronicle { padding-block: var(--sp-section); background: var(--c-sand); }
.chronicle__title { margin-top: 0; margin-bottom: var(--sp-6); }
.chronicle__columns {
  display: grid; gap: var(--sp-6) var(--sp-7);
}
@media (min-width: 60rem) {
  .chronicle__columns { grid-template-columns: 1fr 1fr; }
}
.chronicle__column > p:last-child { margin-bottom: 0; }
/* Il filetto è della sorgente (`et_pb_with_border`), e ci sta: sono stampe e
   fotografie d'epoca, con i bordi chiari che sfumerebbero nel foglio. */
.chronicle__photo {
  width: 100%; height: auto;
  margin-bottom: var(--sp-5);
  border: 1px solid var(--c-rule-strong);
  background: var(--c-paper-deep);
}
.chronicle__column p + .chronicle__photo { margin-top: var(--sp-2); }

/* --- La galleria fotografica --------------------------------------------
   Sei raccolte, ciascuna col suo titolo e la sua griglia. La misura del
   riquadro (21rem) tiene quattro colonne sul contenitore largo: sotto ne
   toglie da sé. Il rapporto 4:3 è quello degli scatti, quindi non taglia
   quasi niente. */
.photo-set { padding-block: var(--sp-8); }
.photo-set:first-of-type { padding-top: var(--sp-section); }
.photo-set + .photo-set { padding-top: 0; }
.photo-set__title {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-h2);
}
.photo-set__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.photo-set__item { margin: 0; }
.photo-set__item a { display: block; overflow: clip; border-radius: var(--radius); }
.photo-set__item img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
  transition: transform 400ms var(--ease);
}
.photo-set__item a:hover img { transform: scale(1.03); }

/* --- Le pagine-indice (QR, collegamenti) ---------------------------------
   Fotografia e parola, in griglia: è un indice da guardare, e si guarda a
   colpo d'occhio. Le colonne sono `auto-fit`: quattro su schermo largo, due
   sul telefono, senza che nessuno debba dirlo. */
.linkgrid { padding-block: var(--sp-section); }
.linkgrid__head { text-align: center; max-width: var(--measure); margin: 0 auto var(--sp-8); }
.linkgrid__head h1 { margin-top: 0; }
.linkgrid__mark { width: auto; height: 5rem; margin: 0 auto var(--sp-5); }
.linkgrid__lead { color: var(--c-ink-soft); margin-bottom: 0; }
.linkgrid__tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(2, 1fr);
}
/* Quattro per riga come sulla sorgente, non «quante ce ne stanno»: con
   `auto-fit` le otto voci uscivano cinque e tre, e un indice che si spezza
   così non si legge a colpo d'occhio. */
@media (min-width: 60rem) {
  .linkgrid__tiles { grid-template-columns: repeat(4, 1fr); }
}
.linkgrid__tile { margin: 0; text-align: center; }
.linkgrid__tile img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--c-paper-deep);
}
.linkgrid__label {
  display: block; margin-top: var(--sp-3);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
/* I pulsanti della pagina dei collegamenti: uno per riga, larghi, perché si
   preme col pollice. */
.linkgrid__links {
  list-style: none; margin: var(--sp-7) auto 0; padding: 0;
  max-width: 28rem; display: grid; gap: var(--sp-3);
}
.linkgrid__links li { margin: 0; }
.linkgrid__links .btn { display: block; text-align: center; }

/* Le fotografie dentro un blocco della pagina promozionale: due camere sotto
   il testo che le descrive, come sulla sorgente. */
.promo-block__photos {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.promo-block__photos li { margin: 0; }
.promo-block__photos img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius);
}

/* ==========================================================================
   14 · Verifica disponibilità
   ==========================================================================
   Sostituisce il widget che il sito di partenza caricava da torciano.com.
   Resta un form vero: senza JavaScript fa un GET verso il motore esterno.
   -------------------------------------------------------------------------- */

.booking {
  background: var(--c-paper-warm);
  border-block: 1px solid var(--c-rule);
}
.booking__inner { padding-block: var(--sp-6); }

.booking__title {
  font-family: var(--f-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 var(--sp-5);
}

.booking__form {
  display: grid;
  gap: var(--sp-4);
  align-items: end;
}
@media (min-width: 48rem) {
  .booking__form { grid-template-columns: 1fr 1fr auto auto; gap: var(--sp-5); }
}

.booking__field { display: grid; gap: var(--sp-2); }
.booking__field label {
  font-family: var(--f-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
/* Campi e pulsante alti uguali, per costruzione.
   `min-height` non bastava: l'altezza vera di un campo è il testo per la sua
   interlinea più due volte il padding — quasi quattro rem — mentre il
   pulsante, che quel padding non ce l'ha, si fermava al minimo e restava un
   dito più basso. Adesso l'altezza è una, dichiarata qui, e il padding
   verticale sparisce: dentro un campo di altezza fissa il testo si centra da
   sé. */
.booking__form { --booking-h: 3.4rem; }
.booking__field input,
.booking__field select {
  font-family: var(--f-text);
  font-size: var(--fs-base);
  height: var(--booking-h);
  padding: 0 0.9em;
  background: var(--c-paper);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  color: var(--c-ink);
}
.booking__field input:focus-visible,
.booking__field select:focus-visible { border-color: var(--c-gold-dim); }

/* Il pulsante si misura in `em` su un corpo da 11px e restava otto pixel più
   basso del `min-height: 2.9rem` dei campi: con `align-items: end` la riga
   chiudeva storta. Stessa altezza minima, e il testo centrato dentro. */
.booking__form .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--booking-h); padding-block: 0;
}

/* La finestra di prenotazione del tasto in testata.
   È lo stesso form della fascia, dentro un <dialog> nativo: chiuso non esiste
   (display:none di serie), aperto lo mostra il browser nel top layer, sopra a
   tutto, quindi né lo sticky della testata né il suo backdrop-filter possono
   tagliarlo. Senza JavaScript resta chiuso e il tasto è un normale link. */
.booking-modal {
  width: min(32rem, calc(100vw - 2 * var(--sp-5)));
  padding: 0;
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: var(--shadow-lift);
}
.booking-modal::backdrop {
  background: rgb(34 29 24 / 0.55);
  backdrop-filter: blur(2px);
}
.booking-modal__panel { position: relative; padding: var(--sp-6); }
.booking-modal__title {
  font-family: var(--f-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 var(--sp-5);
  padding-right: var(--sp-6);
}
.booking-modal__close {
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  padding: 0;
  font-size: 1.5rem; line-height: 1;
  color: var(--c-ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.booking-modal__close:hover { color: var(--c-ink); background: var(--c-paper-warm); }
.booking-modal__close:focus-visible { outline: 2px solid var(--c-gold-dim); outline-offset: 2px; }
/* Nella finestra il form sta in colonna: le due date affiancate, ospiti e
   pulsante distesi sotto. Niente della griglia a quattro colonne della fascia. */
.booking-modal__form { grid-template-columns: 1fr 1fr; }
.booking-modal__form .booking__field--narrow,
.booking-modal__form .btn { grid-column: 1 / -1; }
/* La finestra compare con una lieve dissolvenza; chi ha chiesto meno movimento
   la riceve senza. */
@media (prefers-reduced-motion: no-preference) {
  .booking-modal[open] { animation: booking-modal-in 160ms ease-out; }
  .booking-modal[open]::backdrop { animation: booking-modal-fade 160ms ease-out; }
}
@keyframes booking-modal-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes booking-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================================================
   15 · Form di richiesta
   ==========================================================================
   L'unica conversione che il sito completa da sé: prenotazioni e acquisti
   finiscono su piattaforme esterne. Funziona senza JavaScript.
   -------------------------------------------------------------------------- */

.request { background: var(--c-paper-warm); border-top: 1px solid var(--c-rule); }
.request__inner { padding-block: var(--sp-section); max-width: 52rem; }
.request__title { margin-top: 0; }

.request__form {
  display: grid; gap: var(--sp-4);
  margin-top: var(--sp-6);
}
/* Le tre regole di colonna sono scritte dentro `.request__form` e non da sole.
   `.field` è il campo — etichetta, controllo, messaggio d'errore — e da quando
   lo usa anche il costruttore del pacchetto vive dentro due griglie diverse:
   uno `span 3` scritto senza contesto valeva anche là, dove le colonne sono
   quattro, e i campi ci finivano storti. La misura appartiene alla griglia,
   non al campo. */
@media (min-width: 40rem) {
  .request__form { grid-template-columns: 1fr 1fr 1fr; }
  .request__form .field--half { grid-column: span 1; }
  .request__form .field:not(.field--half):not(.field--full) { grid-column: span 3; }
  .request__form .field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: var(--sp-2); }
.field label {
  font-family: var(--f-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.field input,
.field select,
.field textarea {
  font-family: var(--f-text);
  font-size: var(--fs-base);
  padding: 0.7em 0.9em;
  background: var(--c-paper);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  color: var(--c-ink);
  min-height: 2.9rem;
  width: 100%;
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--c-gold-dim); }
.field [aria-invalid="true"] { border-color: #a4402f; }

.field__error {
  margin: 0;
  font-family: var(--f-label);
  font-size: var(--fs-small);
  color: #a4402f;
}

/* Il campo trappola: fuori dallo schermo, non `display:none` — alcuni bot
   saltano i campi nascosti in quel modo, e la trappola non scatterebbe. */
.request__trap {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.request__actions { display: grid; gap: var(--sp-3); justify-items: start; }
.request__privacy { margin: 0; font-size: var(--fs-small); color: var(--c-ink-faint); }

.request__done,
.request__error {
  padding: var(--sp-4) var(--sp-5);
  border-inline-start: 2px solid var(--c-gold);
  background: var(--c-paper);
  margin-top: var(--sp-5);
}
.request__error { border-color: #a4402f; }

/* ==========================================================================
   16 · Schede di sezione
   ==========================================================================
   Le voci di primo livello del menu, con l'immagine di apertura della pagina a
   cui puntano. Se il cliente riordina il menu, questo blocco lo segue.
   -------------------------------------------------------------------------- */

.sections { padding-block: var(--sp-section); }

/* Piu' elenchi nella stessa sezione stanno affiancati. Su «Cibo & Vino» sono
   due elenchi di due schede: da soli lasciavano meta' riga vuota due volte di
   fila, perche' la griglia delle schede fa quattro colonne. Il minimo di
   32rem li rimette in colonna sotto i 64rem, dove affiancarli darebbe schede
   larghe come francobolli. */
.sections__groups {
  display: grid; gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
  align-items: start;
}
.sections__group > .eyebrow { margin: 0; }

.sections__grid {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.sections__item { margin: 0; }

.card {
  display: grid; height: 100%;
  text-decoration: none;
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  overflow: clip;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
.card:hover {
  border-color: var(--c-rule-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.card__media {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform 500ms var(--ease);
}
.card:hover .card__media { transform: scale(1.04); }

.card__body {
  display: grid; gap: var(--sp-3);
  padding: var(--sp-5);
  align-content: start;
}
.card__title { font-size: var(--fs-h3); line-height: 1.2; }
.card__text { color: var(--c-ink-soft); font-size: var(--fs-small); line-height: 1.55; }
.card__more {
  font-family: var(--f-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-dim);
}
.card__more::after {
  content: ' →';
  display: inline-block;
  transition: transform 220ms var(--ease);
}
.card:hover .card__more::after { transform: translateX(0.25em); }


/* Segnaposto dei servizi di terze parti
   -------------------------------------------------------------------------
   Il badge TripAdvisor, il widget Elfsight e la mappa non si caricano prima
   del consenso. Il riquadro tiene il posto e dice perché è vuoto: un buco
   silenzioso in mezzo a una pagina si legge come un errore del sito. */

.thirdparty {
  margin: var(--sp-5) 0;
}

.thirdparty--frame {
  min-height: 18rem;
}

.thirdparty--frame iframe {
  display: block;
  width: 100%;
  min-height: 18rem;
  border: 0;
}

.thirdparty__note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-5);
  border: 1px dashed var(--c-rule);
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
}

.thirdparty__btn,
.thirdparty__link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--c-gold-dim);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}


/* ==========================================================================
   17 · Costruttore del soggiorno su misura
   ==========================================================================
   Prende il posto della griglia di pacchetti già fatti sull'hub inglese delle
   esperienze. È il modulo più lungo del sito — cinque passi, una trentina di
   campi — e la ragione per cui non sembra lungo sono due scelte:

     · **il pannello appiccicato.** Sul desktop il riepilogo resta a video
       mentre si scorre, come la spalla di un pacchetto (`.offer-detail__aside`,
       che è la stessa idea e lo stesso fondo scuro del riquadro del prezzo):
       chi compila vede crescere ciò che sta chiedendo, e il modulo smette di
       essere un questionario;
     · **i campi che non ci sono.** Le domande sulla navetta, sul regalo, sul
       giorno di un'esperienza compaiono quando servono. Senza JavaScript
       restano tutte visibili — qualche domanda in più, mai una pagina rotta.

   I campi sono gli stessi del form di richiesta (`.field`): stessa etichetta
   in maiuscoletto, stesso bordo, stesso oro sul fuoco. Qui cambia solo la
   griglia che li dispone.
   -------------------------------------------------------------------------- */

/* L'apertura: un blocco solo, bianco, come quella di ogni altra pagina —
   `.exp-intro` con la stessa misura e lo stesso respiro. Erano due blocchi con
   due occhielli e due titoli, e in mezzo un cambio di fondo che prometteva una
   sezione nuova senza aprirne nessuna. */
.pkg-intro { --measure: var(--measure-wide); padding-block: var(--sp-section) var(--sp-7); text-align: center; }
.pkg-intro__title { margin: var(--sp-2) 0 0; }
.pkg-intro__lead {
  margin: var(--sp-5) auto 0; max-width: 46rem;
  font-size: var(--fs-lead); color: var(--c-ink-soft);
}
/* Come si fa, non che cos'è: sta sotto il racconto e pesa meno, perché è
   un'istruzione e non un invito. */
.pkg-intro__how {
  margin: var(--sp-4) auto 0; max-width: 42rem;
  font-size: var(--fs-small); color: var(--c-ink-faint);
}

/* Il fondo caldo comincia dai passi, che è dove comincia davvero qualcosa
   d'altro: sopra si legge, da qui si compila. */
.pkg { padding-block: var(--sp-7) var(--sp-section); background: var(--c-paper-warm); }

.pkg__done,
.pkg__prefilled,
.pkg__error {
  max-width: var(--measure-wide); margin: 0 auto var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-inline-start: 2px solid var(--c-gold);
  background: var(--c-paper);
}
.pkg__error { border-color: #a4402f; }
/* Il cartello del pacchetto pre-fatto: pesa meno dell'esito di un invio,
   perché è una spiegazione e non una risposta. */
.pkg__prefilled { font-size: var(--fs-small); color: var(--c-ink-soft); }
.pkg__prefilled strong { color: var(--c-ink); }

/* Il riquadro della modalità link (?build=1): il compositore dei pacchetti
   pre-fatti. Non lo vede chi sta compilando una richiesta vera, ma non per
   questo può pesare: la cosa grande resta il costruttore, che è quella che si
   usa: questa è una striscia in cima da cui si copia un indirizzo. */
/* Attraversa tutte le colonne: nella griglia a due colonne del modulo, un
   figlio qualunque si prende la prima — cioè quella del costruttore, che è
   la cosa larga — e spinge i passi nella colonna stretta del riepilogo. */
.pkg-link {
  grid-column: 1 / -1;
  display: grid; gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-inline-start: 2px solid var(--c-gold);
  border-radius: var(--radius);
}
/* Nome, indirizzo e tasto in fila. Sotto le sessanta rem vanno in colonna da
   soli: su un telefono tre cose in riga diventano tre cose illeggibili. */
.pkg-link__row { display: grid; gap: var(--sp-3); align-items: end; }
@media (min-width: 60rem) {
  .pkg-link__row {
    grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr) auto;
    align-items: center;
  }
}
.pkg-link__field { display: grid; gap: var(--sp-1); min-width: 0; }
.pkg-link__field label {
  font-family: var(--f-label); font-size: var(--fs-micro);
  font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--c-ink-soft);
}
.pkg-link__copy { white-space: nowrap; }
/* L’indirizzo può essere lungo quanto vuole e non deve allargare la pagina:
   va a capo dove capita, che per un indirizzo è il posto giusto. */
.pkg-link__url {
  display: block; min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-paper-warm);
  border: 1px solid var(--c-rule);
  font-size: var(--fs-micro);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.pkg-link__hint { margin: 0; font-size: var(--fs-micro); color: var(--c-ink-faint); }

.pkg__form { display: grid; gap: var(--sp-7); }
.pkg__steps { display: grid; gap: var(--sp-6); min-width: 0; }

/* Ogni passo è un pannello bianco sul fondo caldo della sezione: la stessa
   distinzione che sulla scheda di un pacchetto separa il racconto dalla
   spalla. Senza, cinque blocchi di campi di fila si leggono come un unico
   modulo lungo trenta righe. */
.pkg-step {
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: var(--sp-6);
  /* Il riferimento delle `@container` qui sotto: la griglia dei campi misura
     questo, che è il posto in cui i campi stanno davvero. */
  container-type: inline-size;
  /* Chi arriva qui da un'àncora o da «Vai al punto 3» deve vedere il titolo,
     non trovarlo sotto l'intestazione appiccicosa: stessa misura del
     riepilogo, che ha lo stesso problema. */
  scroll-margin-top: calc(var(--header-h, 10rem) + var(--sp-4));
}
.pkg-step__title {
  margin: 0 0 var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--f-label); font-size: var(--fs-micro);
  font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--c-ink-soft);
}
/* Il numero del passo: un cerchio d'oro sottile, non un pallino pieno. Cinque
   pallini pieni in colonna diventano cinque punti d'attenzione, e l'accento
   del sito è uno solo — il tasto d'invio. */
/* Il numero non è scritto nel markup: lo conta il CSS, e conta **solo i passi
   che si vedono**. Con il numero stampato, nascondere il passo del regalo
   lasciava la fila 1, 2, 4, 5 — e un passo mancante in mezzo a una sequenza
   numerata si legge come un errore della pagina, non come una domanda che non
   serviva. Un elemento in `display: none` non incrementa un contatore, quindi
   la numerazione si richiude da sé. */
.pkg__steps { counter-reset: pkg-step; }
.pkg-step { counter-increment: pkg-step; }
.pkg-step__num {
  flex: none;
  width: 1.9em; height: 1.9em;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-gold); border-radius: 50%;
  color: var(--c-gold-dim); font-size: var(--fs-micro); letter-spacing: 0;
}
.pkg-step__num::before { content: counter(pkg-step); }
/* «Passo 1 di 4», a destra del titolo, sommesso: orienta chi non sa quanto
   manca, e non compete con il titolo. Lo scrive il JavaScript, perché il
   totale cambia con il regalo. */
.pkg-step__of {
  margin-left: auto;
  font-size: var(--fs-micro); letter-spacing: var(--ls-label);
  color: var(--c-ink-faint); text-transform: none;
  white-space: nowrap;
}
/* «(facoltativo)» accanto all'etichetta: minuscolo, attenuato, senza
   maiuscoletto — è una nota, non un'etichetta seconda. */
.field__optional {
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--c-ink-faint);
}
.pkg-step__hint {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-small); color: var(--c-ink-soft);
}
.pkg-step__hint.is-warning { color: var(--c-gold-dim); }

/* La griglia dei campi: due colonne da 30rem in su, quattro da 60. I campi
   larghi si dichiarano con `pkg-span-*`, che è la misura della griglia e non
   una proprietà del campo. */
.pkg-grid { display: grid; gap: var(--sp-4); }
.pkg-grid + .pkg-grid { margin-top: var(--sp-5); }
.pkg-grid[hidden] { display: none; }
/* Le colonne si contano sulla larghezza del **pannello**, non della finestra.
   A 1440 px il modulo è largo 570: con una media query sulla finestra il
   pannello faceva quattro colonne da 130 px, e in una di quelle il calendario
   mostrava «gg/mm/aa» tagliato. La domanda giusta non è quanto è grande lo
   schermo, è quanto è largo il posto in cui sto scrivendo. */
@container (min-width: 26rem) {
  .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkg-span-2, .pkg-span-all { grid-column: 1 / -1; }
}
@container (min-width: 46rem) {
  .pkg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pkg-span-2 { grid-column: span 2; }
  .pkg-span-all { grid-column: 1 / -1; }
}

/* Le scelte a pallino: righe cliccabili larghe, non pallini da centrare col
   dito. Il bersaglio è tutta la riga, che su un telefono è la differenza fra
   un modulo che si compila e uno che si abbandona. */
.pkg-choice { border: 0; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 40rem) {
  .pkg-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkg-choice--stack { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}
.pkg-choice__item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 2.9rem; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-rule-strong); border-radius: var(--radius);
  background: var(--c-paper);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.pkg-choice__item:hover { border-color: var(--c-ink-faint); }
.pkg-choice__item:has(input:checked) { border-color: var(--c-gold); background: var(--c-paper-warm); }
.pkg-choice__item:has(input:focus-visible) { outline: 2px solid var(--c-gold-dim); outline-offset: 2px; }
.pkg-choice__item input { flex: none; accent-color: var(--c-gold-dim); width: 1.1em; height: 1.1em; }

/* La spalla. Lo stesso pannello scuro del riquadro del prezzo di un pacchetto,
   per la stessa ragione: è il riepilogo dei fatti accanto a una cosa lunga. */
.pkg__aside { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
/* `--sp-5` e non `--sp-6`: il pannello è appiccicato e deve stare in uno
   schermo, e sedici pixel di aria per lato sono una riga di riepilogo. */
.pkg-summary { background: var(--c-night); color: var(--c-on-dark); padding: var(--sp-5); }
.pkg-summary__title {
  margin: 0 0 var(--sp-5);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-soft);
}
.pkg-summary__empty { margin: 0; font-size: var(--fs-small); color: var(--c-on-dark-soft); }
/* Lo stacco fra i gruppi: `--sp-3` e non `--sp-4`.
   Le due righe d'anteprima hanno fatto crescere il pannello di ventisei pixel
   oltre l'altezza dello schermo, e la barra di scorrimento è tornata. Quattro
   pixel per stacco su quattro gruppi la rimandano via, e un filetto separa
   quanto un filetto: era l'aria intorno a esser generosa, non il segno. */
.pkg-summary__group + .pkg-summary__group {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid rgb(246 244 240 / 0.16);
}
.pkg-summary__group-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-on-dark-soft);
}

/* --------------------------------------------------------------------------
   I gruppi che si richiudono
   --------------------------------------------------------------------------
   Il pannello è appiccicato e alto quanto lo schermo: con cinque esperienze e
   tre trasferimenti arrivava a milleottocento pixel in settecento, e scorreva.
   Un riepilogo che scorre non è più un riepilogo, è un secondo modulo.

   Restano aperti il soggiorno e la stima — le date e la cifra si guardano di
   continuo; il resto si apre quando serve, e quello che c'è dentro si vede
   comunque nel passo da cui viene.
   -------------------------------------------------------------------------- */
/* Il sommario di un gruppo richiuso è su due righe: il nome col conteggio, e
   sotto l'anteprima di quello che contiene. La freccia sta a destra, allineata
   al nome — non in mezzo alle due righe, dove sembrerebbe appartenere a
   nessuna. */
details.pkg-summary__group > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--sp-3);
  margin: 0;
  padding: var(--sp-2) 0;
  cursor: pointer;
  list-style: none;
}
.pkg-summary__group-name { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }

/* L'anteprima: si legge solo a gruppo chiuso, ed è la ragione per cui
   richiuderlo non toglie niente. Una riga sola, tagliata dove finisce lo
   spazio — a capo diventerebbe il gruppo aperto, che è quello che si voleva
   evitare. */
.pkg-summary__peek {
  grid-column: 1;
  font-family: var(--f-text); font-size: var(--fs-small);
  letter-spacing: 0; text-transform: none;
  color: var(--c-on-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
details.pkg-summary__group[open] > summary .pkg-summary__peek { display: none; }
details.pkg-summary__group > summary::-webkit-details-marker { display: none; }
/* La freccia la disegniamo noi: il triangolino del browser cambia forma da un
   sistema all'altro, e in un pannello di maiuscoletti spaziati stona. */
details.pkg-summary__group > summary::after {
  content: ''; grid-column: 2; grid-row: 1; justify-self: end; flex: none;
  width: 0.45rem; height: 0.45rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); translate: 0 -2px;
  transition: transform 180ms var(--ease);
}
details.pkg-summary__group[open] > summary::after { transform: rotate(-135deg); translate: 0 2px; }
details.pkg-summary__group > summary:hover { color: var(--c-on-dark); }
details.pkg-summary__group > summary:focus-visible {
  outline: 2px solid var(--c-gold-soft); outline-offset: 2px;
}
details.pkg-summary__group[open] > summary { margin-bottom: var(--sp-3); }

/* Quante voci ci sono dentro: si legge senza aprire, ed è la ragione per cui
   richiuderlo non toglie niente a chi vuole solo controllare. */
.pkg-summary__count {
  min-width: 1.4em;
  padding: 0.1em 0.45em;
  border-radius: 1em;
  background: rgb(246 244 240 / 0.14);
  font-size: 0.9em; letter-spacing: 0;
  text-align: center;
  color: var(--c-on-dark);
}

/* Le note: non sono un valore, sono la ragione di un valore. Il conto di come
   nasce una cifra, e la frase che dice che quella cifra è una stima. */
.pkg-summary__note-line {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-micro); line-height: 1.55; color: var(--c-on-dark-soft);
}
/* L'ultima nota della stima è la frase che conta — «i trasferimenti si quotano
   a parte, il prezzo esatto arriva per email» — e non deve leggersi come una
   postilla in fondo: prende un filetto sopra e un filo di spazio. */
.pkg-summary__group--estimate .pkg-summary__note-line:last-child {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid rgb(246 244 240 / 0.16);
}

/* La riga del totale si stacca dalle voci che somma.
   Il filetto è un elemento suo che occupa tutta la riga della griglia, non un
   `border-top` sulle due celle: quello lo spezzava in mezzo, perché fra le
   colonne c'è un divario, e due tronconi con un buco si leggono come un
   errore di stampa. Un `box-shadow` allargato oltre la cella non va bene
   neppure: l'ombra è un rettangolo pieno spostato, e ai lati compariva una
   macchia grigia. */
.pkg-summary__rule {
  grid-column: 1 / -1;
  height: 0;
  margin-top: var(--sp-2);
  border-top: 1px solid rgb(246 244 240 / 0.16);
}
.pkg-summary__rows dt.is-total,
.pkg-summary__rows dd.is-total {
  color: var(--c-on-dark);
}
.pkg-summary__rows dd.is-total {
  font-family: var(--f-text); font-size: var(--fs-h3); color: var(--c-gold-soft);
  white-space: nowrap;
}
/* Etichetta e valore su due colonne, il valore a destra come su una ricevuta.
   In un pannello stretto tornano incolonnati.

   **La colonna elastica e' quella dell'etichetta, non quella del valore**, ed
   e' il contrario di quello che verrebbe da fare. La ragione sta nei dati: qui
   le etichette sono corte e prevedibili — «Andata», «Ospiti» — mentre i valori
   non lo sono: «Aeroporto o stazione ↔ hotel · Hotel ↔ esperienze · Altri
   spostamenti» e' un valore. Dando il posto fisso al valore, quella riga
   finiva spezzata a meta' parola in una colonna di sei caratteri —
   «esperienz / e». Adesso il valore prende lo spazio che gli serve, fino a
   quattordici rem, e l'etichetta cede il suo.

   `break-word` e non `anywhere`: una parola si spezza solo quando da sola non
   ci sta, mai per far quadrare una riga. */
.pkg-summary__rows { margin: 0; display: grid; gap: var(--sp-3) var(--sp-4); font-size: var(--fs-small); line-height: 1.35; }
.pkg-summary__rows dt { color: var(--c-on-dark-soft); }
/* Il modo di togliere una scelta da dove la si vede. Sta dentro l'etichetta,
   dopo il nome, e pesa quanto un segno di punteggiatura: è un ripensamento,
   non un'azione da invitare. Bersaglio da 24 px, che su un pannello da
   quattordici rem è il massimo che ci sta senza rubare la riga. */
/* Il valore che porta il segno: valore e segno affiancati, allineati a destra
   come il resto della colonna. */
.pkg-summary__rows dd.has-drop {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-1);
}

.pkg-summary__drop {
  flex: none;
  width: 1.5em; height: 1.5em;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  font: inherit; font-size: 1.15em; line-height: 1;
  color: var(--c-on-dark-soft);
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.pkg-summary__drop:hover { background: rgb(246 244 240 / 0.14); color: var(--c-on-dark); }
.pkg-summary__drop:focus-visible { outline: 2px solid var(--c-gold-soft); outline-offset: 1px; }

/* La spiegazione di un valore, sotto la sua etichetta: «1 doppia × 4 notti ×
   € 250». Non è una riga a sé perché non è un altro fatto, è lo stesso fatto
   detto per esteso — e una riga a sé costava trenta pixel di pannello. */
.pkg-summary__hint {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-micro); line-height: 1.4;
  color: var(--c-on-dark-soft); opacity: 0.72;
}
.pkg-summary__rows dd { margin: 0; overflow-wrap: break-word; }
@container (min-width: 20rem) {
  .pkg-summary__rows { grid-template-columns: minmax(4.5rem, 1fr) minmax(0, 11rem); align-items: baseline; }
  .pkg-summary__rows dd { text-align: right; }
  /* Un valore lungo — l'elenco dei trasferimenti, una dedica — non sta in una
     colonna, e schiacciarcelo dentro fa quattro righe di due parole. Quello va
     sotto la sua etichetta, per tutta la larghezza, come si scrive una nota.
     Chi decide che è lungo è chi disegna la riga: la stessa soglia in PHP e in
     JavaScript, perché il pannello lo stampano tutti e due. */
  .pkg-summary__rows dt.is-wide { grid-column: 1 / -1; margin-bottom: calc(var(--sp-2) * -0.5); }
  .pkg-summary__rows dd.is-wide { grid-column: 1 / -1; text-align: left; }
}
.pkg-summary__note {
  margin: var(--sp-5) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid rgb(246 244 240 / 0.16);
  font-size: var(--fs-small); color: var(--c-on-dark-soft);
}

.pkg__actions { display: grid; gap: var(--sp-3); justify-items: start; }
.pkg__actions .btn { width: 100%; text-align: center; }
.pkg__privacy { margin: 0; font-size: var(--fs-micro); line-height: 1.5; color: var(--c-ink-faint); }

/* Da 64rem in su le due colonne. Sotto quella misura il pannello torna in
   colonna **dopo** i passi e **prima** del tasto d'invio — che è l'ordine in
   cui sta nel documento, quindi anche l'ordine in cui lo incontra chi naviga
   da tastiera: nessuno manda la richiesta senza aver visto il riepilogo.

   L'aggancio in alto **non è un numero scelto a occhio**. L'intestazione del
   sito è anch'essa `sticky` e alta centocinquantasei pixel su un desktop: con
   un `top` a quattro rem e mezzo il riepilogo si fermava sotto di lei e ne
   restava coperto per un terzo, proprio mentre lo si guardava. L'altezza vera
   la misura il JavaScript e la scrive in `--header-h`; il valore di ripiego
   qui sotto è quello misurato, così anche senza JavaScript il pannello si
   ferma al posto giusto invece che sotto la testata. */
@media (min-width: 64rem) {
  .pkg__form { grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem); gap: var(--sp-8); align-items: start; }
  .pkg__aside {
    position: sticky;
    top: calc(var(--header-h, 10rem) + var(--sp-4));
    container-type: inline-size;
    /* Un riepilogo lungo — cinque esperienze e sei trasferimenti — supera
       l'altezza dello schermo, e appiccicato in alto la sua coda non si
       raggiungeva più: si scorre da sé invece di sparire. */
    /* Il tetto è quello che resta fra l'intestazione appiccicata e il fondo
       della finestra. `overflow-y` è una valvola, non il modo normale di
       leggere il pannello: il contenuto è tagliato per starci — il soggiorno in
       due righe, i gruppi già scelti richiusi, il conto sotto la sua etichetta
       invece che in una riga sua — e su uno schermo da milleottanta avanza
       spazio. Sotto gli ottocentocinquanta pixel di finestra riappare, ed è
       giusto così: meglio una barra di scorrimento che il tasto d'invio fuori
       dallo schermo. */
    max-height: calc(100svh - var(--header-h, 10rem) - var(--sp-4));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --------------------------------------------------------------------------
   17b · I pezzi che il costruttore ha in più
   --------------------------------------------------------------------------
   Aggiunti dopo il primo giro, tutti per la stessa ragione: il modulo doveva
   smettere di chiedere cose che non servono, e cominciare a chiedere bene
   quelle che servono.
   -------------------------------------------------------------------------- */

/* Un blocco nascosto è nascosto, anche se è un `.field`.
   `.field { display: grid }` batteva `[hidden] { display: none }` del browser,
   che è una regola sul solo elemento: l'età dei bambini restava a video con
   zero bambini, e le domande sulla navetta anche con la navetta spenta.
   Una regola dentro `.pkg` pesa più di `.field` e meno di qualunque cosa
   dichiari `!important`, che qui non esiste. */
.pkg [hidden] { display: none; }

/* Un campo data ha dentro tre caselle e un'icona: sotto i 9rem il browser le
   taglia invece di ridurle, e resta «gg/mm/» con l'anno fuori. */
.pkg .field input[type="date"],
.pkg .field input[type="time"] { min-width: 8.5rem; }

/* La legenda di un gruppo di scelte: stessa voce dell'etichetta di un campo.
   `legend` non eredita da `.field label`, e senza questa riga «Notti» usciva in
   Garamond corpo testo in mezzo a una colonna di maiuscoletti. */
.pkg-legend,
.pkg-fieldset legend {
  padding: 0;
  font-family: var(--f-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.pkg-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pkg-fieldset legend { margin-bottom: var(--sp-3); }

/* --------------------------------------------------------------------------
   Le notti: un comando segmentato, non cinque pulsanti sciolti
   --------------------------------------------------------------------------
   Da una a cinque notti sono quasi tutti i soggiorni: un menu a tendina di
   ventuno voci per sceglierne una di cinque è un menu che si apre, si scorre e
   si richiude.

   La forma è un blocco solo, diviso da filetti sottili — la stessa idea dei
   filetti che separano i fatti nella spalla di un pacchetto — e non cinque
   riquadri staccati: staccati diventano cinque pulsanti, e cinque pulsanti in
   fila si leggono come cinque azioni possibili invece che come una scelta
   sola. Il selezionato prende l'oro pieno, che è l'accento del sito, e lo
   prende **uno** per volta.
   -------------------------------------------------------------------------- */
/* I tasti e il campo «altro» sulla stessa riga. I tasti si prendono lo spazio
   che avanza — con il campo nascosto è tutta la riga — e sotto i 26rem di
   pannello il campo scende a capo da sé invece di stringere i tasti a
   francobollo. */
.pkg-nights { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); }

/* Otto segmenti in un blocco unico non stanno in un telefono: a 390 px il
   pannello ne ha duecentottantasei, e i tasti ne volevano trecentosessanta —
   «Altro» finiva tagliato dal bordo. Un comando segmentato non si puo'
   stringere sotto la misura di un dito, quindi va a capo; e appena va a capo
   il blocco unico non ha piu' senso, perche' il filetto interno diventa un
   filetto sospeso. Sono tasti separati con un filo di spazio, come la fila dei
   filtri delle esperienze: stessa forma per due cose che si usano allo stesso
   modo. */
.pkg-pills {
  flex: 1 1 auto;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
/* Ogni tasto vale gli altri: la fila si distribuisce, e sette numeri non
   diventano sette francobolli con «Altro» largo il doppio. */
.pkg-pill { position: relative; margin: 0; display: block; flex: 0 0 auto; }
/* Il pallino vero sparisce dalla vista ma non dal fuoco né dal lettore di
   schermo: `display:none` lo toglierebbe dalla tabulazione, e il comando
   diventerebbe irraggiungibile da tastiera. */
.pkg-pill input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
/* 2.9rem di lato: e' il bersaglio minimo per un dito, ed e' la stessa altezza
   dei campi accanto. */
.pkg-pill span {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.9rem; min-height: 2.9rem;
  padding: 0 var(--sp-4);
  background: var(--c-paper);
  border: 1px solid var(--c-rule-strong); border-radius: var(--radius);
  font-family: var(--f-label); font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.pkg-pill--wide span {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.pkg-pill:hover span { border-color: var(--c-ink-faint); color: var(--c-ink); }
.pkg-pill input:checked + span {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-ink);
}
.pkg-pill input:focus-visible + span { outline: 2px solid var(--c-gold-dim); outline-offset: 2px; }

/* Il campo che si apre sotto «Altro»: sta in riga con la sua etichetta, perché
   è una postilla del comando qui sopra e non un campo nuovo. */
.pkg-inline-field {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-3);
}
.pkg-inline-field label {
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-soft);
}
.pkg-inline-field input {
  width: 4.5rem;
  font-family: var(--f-text); font-size: var(--fs-base);
  padding: 0.55em 0.7em;
  background: var(--c-paper);
  border: 1px solid var(--c-rule-strong); border-radius: var(--radius);
  color: var(--c-ink);
}
.pkg-inline-field input:focus-visible { border-color: var(--c-gold-dim); }

/* --------------------------------------------------------------------------
   Le caselle dei trasferimenti, una per riga
   --------------------------------------------------------------------------
   Le etichette sono frasi intere — «Venite a prendermi all'arrivo (aeroporto
   o stazione)» — e tre frasi affiancate in colonne da tredici rem vanno a
   capo tre volte. Una sotto l'altra si leggono come un elenco di domande, che
   è quello che sono.
   -------------------------------------------------------------------------- */
.pkg-choice--list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 30rem) {
  .pkg-choice--list { grid-template-columns: minmax(0, 1fr); }
}
.pkg-grid .pkg-choice__item { margin: 0; }

/* --------------------------------------------------------------------------
   Piccoli aggiustamenti sui blocchi condizionali
   -------------------------------------------------------------------------- */
/* Un blocco di trasporto che compare porta la sua aria, ma non quando è il
   primo: sopra c'è già lo spazio delle scelte a pallino. */
.pkg-step > [data-pkg-show-when] + [data-pkg-show-when] { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   17c · Le esperienze: schede, filtri, dettaglio
   --------------------------------------------------------------------------
   Il catalogo è quello di torciano.com — settantotto esperienze con
   fotografia, prezzo e racconto — e a quel numero un elenco di caselle smette
   di funzionare: non si sceglie, si scorre. Quindi schede che si guardano, una
   fila di filtri che restringe, e un dettaglio che si apre sopra la pagina.

   Le caselle non spariscono: restano dentro le schede, nascoste alla vista e
   fuori dalla tabulazione, perché sono ancora i campi che il modulo invia.
   Senza JavaScript tornano visibili ed è di nuovo un elenco che funziona.
   -------------------------------------------------------------------------- */

/* I filtri. Compaiono solo con JavaScript — nasconderli e mostrarli è lavoro
   del browser — e un filtro che ricarica la pagina perderebbe tutto quello che
   si è già compilato più sopra. */
.pkg-filters {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
}
.pkg-filter {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  min-height: 2.4rem;
  background: transparent;
  border: 1px solid var(--c-rule-strong); border-radius: 2rem;
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}
.pkg-filter:hover { border-color: var(--c-ink-faint); color: var(--c-ink); }
.pkg-filter.is-current {
  background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark);
}
.pkg-filter__count { opacity: 0.6; font-size: 0.9em; }

/* La griglia. Due colonne dentro il pannello del passo, una sul telefono: la
   misura è quella del pannello, non della finestra, perché a destra c'è il
   riepilogo e la colonna del modulo è larga la metà dello schermo. */
.pkg-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
@container (min-width: 34rem) {
  .pkg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 50rem) {
  .pkg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pkg-card {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  overflow: clip;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.pkg-card:hover { border-color: var(--c-rule-strong); box-shadow: var(--shadow-soft); }
/* La scheda scelta si vede da lontano: bordo d'oro pieno e un filo di fondo
   caldo. È l'unico posto della griglia dove l'oro compare, ed è il posto che
   dice «questo è dentro». */
.pkg-card.is-chosen {
  border-color: var(--c-gold);
  box-shadow: inset 0 0 0 1px var(--c-gold);
  background: var(--c-paper-warm);
}

.pkg-card__media { position: relative; }
.pkg-card__media img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--c-paper-deep);
  transition: transform 500ms var(--ease);
}
.pkg-card:hover .pkg-card__media img { transform: scale(1.03); }
.pkg-card__media img.is-clickable { cursor: pointer; }

/* Il momento della giornata, sopra la fotografia: è l'informazione che serve a
   capire se quella cena entra in una sera già occupata. */
.pkg-card__badge {
  position: absolute; left: 0; bottom: 0;
  padding: var(--sp-2) var(--sp-4);
  background: rgb(34 29 24 / 0.78);
  color: var(--c-on-dark);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}

.pkg-card__body {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1 1 auto;
}
.pkg-card__title {
  margin: 0;
  font-family: var(--f-text); font-size: var(--fs-h3); line-height: 1.2;
  color: var(--c-ink);
}
.pkg-card__title.is-clickable { cursor: pointer; }
.pkg-card__title.is-clickable:hover { color: var(--c-gold-dim); }

/* Il prezzo è quello pubblicato da torciano.com, «a partire da». Sta in
   maiuscoletto d'oro perché è un dato, non una frase: si legge in un colpo
   d'occhio e non si confonde con il racconto sotto. */
.pkg-card__price {
  margin: 0;
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-dim);
}
.pkg-card__per { color: var(--c-ink-faint); }

/* Tre righe e poi basta: il racconto intero sta nel dettaglio, e schede alte
   il doppio l'una dell'altra fanno una griglia storta. */
.pkg-card__text {
  margin: 0;
  font-size: var(--fs-small); line-height: 1.55; color: var(--c-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.pkg-card__state {
  margin: 0;
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-dim);
}
.pkg-card__state::before { content: '✓ '; }

/* I due comandi della scheda, in fondo, uno sopra l'altro.

   «Aggiungi al soggiorno» è un tasto vero — bordo d'oro, tutta la larghezza,
   44 px di altezza — perché è l'azione, e chi non è pratico cerca un tasto,
   non una riga sottolineata. Resta un filetto e non una lastra piena, per la
   stessa ragione di sempre: in una griglia di ventiquattro schede ventiquattro
   lastre sono ventiquattro inviti in concorrenza. Una volta scelta, il tasto
   si spegne in «Togli dal soggiorno», grigio: la conferma è la riga
   «✓ Nel tuo soggiorno» sopra, non il tasto. */
.pkg-card__actions {
  margin-top: auto;
  display: grid; gap: var(--sp-3);
}
.pkg-card__actions[hidden] { display: none; }
.pkg-card__add {
  display: block; width: 100%;
  min-height: 2.75rem; padding: 0.7em 1em;
  background: transparent;
  border: 1px solid var(--c-gold); border-radius: var(--radius);
  font-family: var(--f-label); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-dim);
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.pkg-card__add:hover,
.pkg-card__add:focus-visible { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }
.pkg-card__add.is-on {
  border-color: var(--c-rule); color: var(--c-ink-soft);
}
.pkg-card__add.is-on:hover,
.pkg-card__add.is-on:focus-visible { background: var(--c-paper-warm); border-color: var(--c-ink-faint); color: var(--c-ink); }

/* Il comando secondario: «Dettagli», poi «Giorno e orario». Un filetto, come
   prima, ma sotto il tasto e più piccolo di lui. */
.pkg-card__cta {
  align-self: start;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) 0;
  background: none; border: 0; border-bottom: 1px solid var(--c-gold);
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-dim);
  cursor: pointer;
}
.pkg-card__arrow { transition: transform 200ms var(--ease); }
.pkg-card__cta:hover .pkg-card__arrow { transform: translateX(0.25em); }

/* La casella senza JavaScript, e il dettaglio che le sta sotto. */
.pkg-card__choice { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); }
.pkg-card__choice input { flex: none; accent-color: var(--c-gold-dim); width: 1.1em; height: 1.1em; }
.pkg-card__detail { padding: 0 var(--sp-5) var(--sp-5); display: grid; gap: var(--sp-4); }
.pkg-card__detail[hidden] { display: none; }

/* Con JavaScript la casella esce dalla vista ma non dal modulo: resta il campo
   che il server legge, e la comanda il tasto del dettaglio. Fuori schermo e
   non `display:none`, perché un campo tolto dal disegno smette anche di essere
   raggiungibile — e questo deve restare comandabile via JavaScript. */
.pkg-cards.is-enhanced .pkg-card__choice {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* --------------------------------------------------------------------------
   Il dettaglio di un'esperienza
   --------------------------------------------------------------------------
   Un `dialog` vero: il fondo scurito, il fuoco che resta dentro e la chiusura
   con Esc li fa il browser. Qui c'è solo l'aspetto.
   -------------------------------------------------------------------------- */
.pkg-modal {
  width: min(34rem, calc(100vw - 2 * var(--sp-5)));
  max-height: min(46rem, calc(100svh - 2 * var(--sp-6)));
  padding: 0;
  border: 0; border-radius: var(--radius);
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: var(--shadow-lift);
  overflow: auto;
  overscroll-behavior: contain;
}
.pkg-modal::backdrop { background: rgb(34 29 24 / 0.72); }

.pkg-modal__close {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2;
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  background: rgb(255 255 255 / 0.9); border: 0; border-radius: 50%;
  font-size: 1.5rem; line-height: 1; color: var(--c-ink);
  cursor: pointer;
}
.pkg-modal__close:hover { background: var(--c-paper-warm); }

.pkg-modal__media img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--c-paper-deep);
}
.pkg-modal__body { padding: var(--sp-6); display: grid; gap: var(--sp-4); }
.pkg-modal__body > * { margin: 0; }
.pkg-modal__title { font-size: var(--fs-h2); line-height: 1.15; }
.pkg-modal__price {
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-dim);
}
.pkg-modal__text { font-size: var(--fs-small); line-height: 1.7; color: var(--c-ink-soft); }
/* Il giorno e l'orario arrivano qui dentro **spostati** dalla scheda: sono gli
   stessi campi, non una copia. */
.pkg-modal__slot { display: grid; gap: var(--sp-4); }
.pkg-modal__slot .pkg-card__detail { padding: 0; }
@media (min-width: 30rem) {
  .pkg-modal__slot .pkg-card__detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pkg-modal__actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4);
  padding-top: var(--sp-3); border-top: 1px solid var(--c-rule);
}
.pkg-modal__actions .btn { flex: 1 1 14rem; text-align: center; }
.pkg-modal__link {
  font-family: var(--f-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-faint);
}

/* Qui stava il blocco del totale, con classi sue — `pkg-summary__total`,
   `…__total-line`, `…__total-sum`. Non c'e' piu': la stima e' diventata un
   gruppo come gli altri, con righe e note, e la disegna lo stesso codice che
   disegna il soggiorno. Erano due rese per la stessa cosa, ed erano gia'
   divergenti — il server metteva in riga quello che il JavaScript metteva in
   nota. Lo stile della cifra grande sta ora accanto agli altri gruppi, sotto
   `.pkg-summary__group--estimate`. */

/* --------------------------------------------------------------------------
   17d · Il telefono
   --------------------------------------------------------------------------
   Il costruttore su uno schermo da 390 px è un'altra cosa dallo stesso
   costruttore su un portatile: non c'è un «accanto» dove tenere il riepilogo,
   e la griglia delle esperienze è una colonna lunga sei schermi. Le correzioni
   qui sotto rispondono a questo, e a niente altro.
   -------------------------------------------------------------------------- */

/* Il pannello respira meno: a 390 px un'aria da due rem per lato lascia
   duecentottanta pixel di campo, e un menu a tendina con dentro «Giorno 3 —
   12 maggio 2026» non ci sta. I bordi laterali se ne vanno con l'aria: un
   riquadro largo quanto lo schermo con due filetti ai lati è solo lo schermo
   con due filetti. */
@media (max-width: 40rem) {
  .pkg-step { padding: var(--sp-5) var(--sp-4); border-radius: 0; border-inline: 0; }
  .pkg-summary { padding: var(--sp-5) var(--sp-4); }
  .pkg__form { gap: var(--sp-6); }
  .pkg__steps { gap: var(--sp-4); }
  .pkg-intro { padding-block: var(--sp-7) var(--sp-6); }
}

/* Il tasto che apre le altre schede. */
.pkg-cards-more { margin: var(--sp-5) 0 0; text-align: center; }

/* «Vai al punto 3»: una riga sommessa in fondo al passo, per chi non vuole
   esperienze. Non è un tasto — il tasto è «Scopri e aggiungi» — e non deve
   competere con le schede: colore attenuato, corpo piccolo, sottolineatura
   solo al passaggio. */
.pkg-step__skip { margin: var(--sp-4) 0 0; text-align: right; font-size: var(--fs-small); }
.pkg-step__skip a {
  color: var(--c-ink-soft); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.pkg-step__skip a:hover,
.pkg-step__skip a:focus-visible { color: var(--c-ink); border-bottom-color: currentColor; }
.pkg-step__skip a:focus-visible { outline: 2px solid var(--c-gold-dim); outline-offset: 3px; }
/* Il titolo del passo riceve il fuoco da «Vai al punto 3» perché il lettore
   di schermo lo annunci; l'anello intorno a un'intestazione larga una
   colonna non aggiunge niente a chi vede, lo scorrimento basta. */
.pkg-step__title[tabindex="-1"]:focus { outline: none; }

/* --------------------------------------------------------------------------
   La maniglia e il cassetto del riepilogo
   --------------------------------------------------------------------------
   Sul desktop il riepilogo è appiccicato accanto al modulo e si vede sempre.
   Sul telefono non c'è un accanto: il riepilogo sta in fondo a una pagina
   lunga sei schermi, e chi compila perde di vista quello che sta chiedendo
   proprio mentre lo chiede.

   La striscia in basso tiene a video la stima; alzandola si apre il riepilogo
   intero sopra la pagina. **Si alza, non ci si salta sopra**: un'ancora porta
   via dal punto in cui si stava compilando e poi tocca risalire; il cassetto
   si apre, si legge, si richiude, e sotto è rimasto tutto dov'era.

   Esistono **solo** sotto i 64 rem, cioè esattamente dove la spalla smette di
   essere appiccicata: sopra sarebbero la stessa cosa due volte.
   -------------------------------------------------------------------------- */
.pkg-bar { display: none; }
.pkg-drawer { display: none; }

@media (max-width: 63.999rem) {
  .pkg-bar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    /* `env(safe-area-inset-bottom)`: sugli iPhone senza tasto fisico la
       striscia finirebbe sotto la tacca di sistema, e non si preme. */
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: var(--c-night); color: var(--c-on-dark);
    border: 0; border-top: 1px solid rgb(246 244 240 / 0.14);
    box-shadow: 0 -8px 24px rgb(34 29 24 / 0.18);
    text-align: left;
    font: inherit;
    cursor: pointer;
  }
  .pkg-bar[hidden] { display: none; }
  .pkg-bar:focus-visible { outline: 2px solid var(--c-gold-soft); outline-offset: -4px; }

  /* Lo spazio che la striscia si prende: senza, copre il tasto d'invio, che è
     l'ultima cosa della pagina e la più importante. */
  .pkg { padding-bottom: calc(var(--sp-section) + 4.5rem); }

  .pkg-bar__figure { display: grid; gap: 2px; min-width: 0; }
  .pkg-bar__label {
    font-family: var(--f-label); font-size: var(--fs-micro);
    letter-spacing: var(--ls-label); text-transform: uppercase;
    color: var(--c-on-dark-soft);
  }
  .pkg-bar__total { font-family: var(--f-text); font-size: var(--fs-h3); font-weight: 400; }

  .pkg-bar__cue {
    flex: none;
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--f-label); font-size: var(--fs-micro);
    letter-spacing: var(--ls-label); text-transform: uppercase;
    color: var(--c-gold-soft);
  }
  /* La freccia che sale: dice che cosa fa il gesto prima che qualcuno lo
     provi. Due filetti e non un carattere, perché una freccia disegnata con il
     testo cambia forma da un carattere all'altro. */
  .pkg-bar__cue .pkg-bar__arrow {
    width: 0.55rem; height: 0.55rem;
    border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
    transform: rotate(-45deg); translate: 0 2px;
  }

  /* ---- Il cassetto ---- */
  .pkg-drawer {
    display: block;
    position: fixed; inset: auto 0 0 0;
    width: 100%; max-width: none;
    max-height: 86svh;
    margin: 0; padding: 0;
    border: 0; border-radius: 1rem 1rem 0 0;
    background: var(--c-night); color: var(--c-on-dark);
    overflow: hidden;
  }
  .pkg-drawer::backdrop { background: rgb(34 29 24 / 0.6); }

  /*
   * Sale e scende invece di comparire.
   *
   * `allow-discrete` e `@starting-style` sono ciò che permette di animare un
   * elemento che entra ed esce dal disegno: senza, il cassetto apparirebbe già
   * aperto e sparirebbe di colpo. Dove non sono supportati resta esattamente
   * quello — compare e sparisce — che è il comportamento di prima, non un
   * errore.
   */
  .pkg-drawer {
    translate: 0 0;
    transition: translate 280ms var(--ease), overlay 280ms allow-discrete, display 280ms allow-discrete;
  }
  .pkg-drawer:not([open]) { translate: 0 100%; }
  @starting-style {
    .pkg-drawer[open] { translate: 0 100%; }
  }
  .pkg-drawer::backdrop {
    opacity: 1;
    transition: opacity 280ms var(--ease), overlay 280ms allow-discrete, display 280ms allow-discrete;
  }
  .pkg-drawer:not([open])::backdrop { opacity: 0; }
  @starting-style {
    .pkg-drawer[open]::backdrop { opacity: 0; }
  }

  /* Il segno che si prende e si tira: non fa niente — il cassetto si chiude
     con il suo tasto, con Esc o toccando fuori — ma dice che cos'è la cosa che
     è appena salita dal basso. */
  .pkg-drawer__grip {
    width: 2.5rem; height: 3px; margin: var(--sp-3) auto 0;
    border-radius: 2px; background: rgb(246 244 240 / 0.28);
  }
  .pkg-drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5) 0;
  }
  .pkg-drawer__title {
    margin: 0;
    font-family: var(--f-label); font-size: var(--fs-micro);
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-soft);
  }
  .pkg-drawer__close {
    flex: none;
    width: 2.4rem; height: 2.4rem;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0;
    font-size: 1.6rem; line-height: 1; color: var(--c-on-dark);
    cursor: pointer;
  }
  .pkg-drawer__body {
    padding: var(--sp-4) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
    max-height: calc(86svh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Dentro il cassetto il riepilogo è già sul fondo scuro del cassetto: il suo
     pannello scuro dentro un pannello scuro sarebbe un rettangolo dentro un
     rettangolo, con due bordi e nessuna ragione. */
  .pkg-drawer .pkg-summary { background: none; padding: 0; }
  .pkg-drawer .pkg__privacy { color: var(--c-on-dark-soft); }
  .pkg-drawer .pkg__actions .btn { width: 100%; }

  /* Il titolo del pannello se ne va: il cassetto ha già il suo, e «La tua
     richiesta» scritto due volte a due centimetri di distanza si legge come un
     errore di stampa. */
  .pkg-drawer .pkg-summary__title { display: none; }

  /* `container-type` anche qui.
     Le righe del riepilogo vanno su due colonne quando il posto c'è, e la
     domanda «c'è posto?» la fa una container query — che senza un contenitore
     dichiarato non trova nulla da misurare e risponde sempre di no. Fuori dal
     cassetto, su un telefono, quel «no» è giusto: la colonna è stretta. Dentro
     il cassetto il posto c'è, ed erano etichetta e valore incolonnati uno sotto
     l'altro per tutta la lunghezza del riepilogo. */
  .pkg-drawer .pkg__aside {
    position: static; max-height: none; overflow: visible; gap: var(--sp-5);
    container-type: inline-size;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pkg-drawer, .pkg-drawer::backdrop { transition: none; }
}


/* --------------------------------------------------------------------------
   La domanda prima dell'invio
   --------------------------------------------------------------------------
   Chi compone quattro notti e sceglie una sola esperienza nove volte su dieci
   non se n'è accorto: ha finito di scorrere la griglia e tre giornate sono
   rimaste vuote. Dirglielo dopo, per email, costa due giorni; dirglielo qui
   costa un tocco.

   È una domanda, non un allarme: fondo di carta, non rosso, e due risposte
   che hanno lo stesso peso visivo — «aggiungine» in oro perché è quella che
   di solito serve, «va bene così» in filetto perché è comunque vera. Un
   pannello con un tasto grosso e un link piccolo non fa una domanda, dice
   quello che vuole sentirsi rispondere.
   -------------------------------------------------------------------------- */
.pkg-ask {
  width: min(28rem, calc(100vw - 2 * var(--sp-5)));
  padding: 0;
  border: 0; border-radius: var(--radius);
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: var(--shadow-lift);
}
.pkg-ask::backdrop { background: rgb(34 29 24 / 0.62); }

.pkg-ask__body { padding: var(--sp-6); display: grid; gap: var(--sp-4); }
.pkg-ask__body > * { margin: 0; }
.pkg-ask__title { font-size: var(--fs-h3); line-height: 1.2; }
.pkg-ask__text { font-size: var(--fs-small); line-height: 1.7; color: var(--c-ink-soft); }

/* I due tasti in colonna e a piena larghezza: su un telefono due tasti
   affiancati in ventotto rem diventano due bersagli da centoquaranta pixel,
   e quello che si preme per sbaglio è sempre quello sbagliato. */
.pkg-ask__actions {
  display: grid; gap: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--c-rule);
}
.pkg-ask__actions .btn { width: 100%; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .pkg-ask { transition: none; }
}

/* -------------------------------------------------------------------------
   Il tasto di chi amministra.

   Lo vede una persona sola per volta e non fa parte del sito: quindi sta
   fuori dalla tavolozza editoriale — inchiostro e oro sono del contenuto — e
   si presenta come uno strumento, scuro e piccolo. In basso a destra perche'
   e' l'angolo che nessun contenuto occupa, e sopra ogni cosa perche' deve
   restare sopra il contenuto — ma **sotto la fascia del consenso**, che sta a
   300: quella occupa lo stesso angolo con i suoi tasti, e un tasto di servizio
   non si mette mai davanti a una scelta che ha valore legale. Finche' la
   fascia e' aperta il tasto resta dietro; appena si e' scelto, ricompare.

   Sul telefono resta il solo tondo con la matita: la parola costa larghezza
   proprio dove ce n'e' meno, e chi la usa sa gia' che cos'e'.
   ------------------------------------------------------------------------- */
.admin-edit {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 250;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .95rem;
  border-radius: 2rem;
  background: #2b241e;
  color: #f6f4f0;
  font-family: var(--f-label, system-ui, sans-serif);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 12px 28px -14px rgba(0, 0, 0, .55);
  transition: background 180ms ease, transform 180ms ease;
}
.admin-edit:hover,
.admin-edit:focus-visible {
  background: var(--c-gold, #b6934e);
  color: #fff;
  transform: translateY(-1px);
}
.admin-edit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.admin-edit__icon { flex: none; }

@media (max-width: 47.99rem) {
  .admin-edit { padding: .7rem; border-radius: 50%; }
  .admin-edit__label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-edit { transition: none; }
  .admin-edit:hover, .admin-edit:focus-visible { transform: none; }
}

@media print {
  .admin-edit { display: none; }
}

/* Il testo della pagina, sotto il calendario.
   Sono i termini dei buoni regalo e l'informativa: si leggono dopo le date,
   con lo stacco che separa una sezione dall'altra. */
.calendar__note {
  margin-top: var(--sp-section, 3rem);
  padding-top: var(--sp-4, 1.5rem);
  border-top: 1px solid var(--c-rule);
}
.calendar__note > :first-child { margin-top: 0; }