/*
   L'ASPETTO DEL SITO.

   L'idea in una riga: una pagina di carta chiara, due caratteri veri, e le
   fotografie lasciate parlare. Niente scatole, niente ombre pesanti, niente
   colori accesi. Quello che separa le cose è lo spazio, non le cornici.

   I COLORI sono quelli del programma «Casa di Neno» — il mare di Capraia — ma
   tenuti tutti un tono più su. Il fondo non è bianco: è un bianco caldo,
   appena sporco di sabbia. Il bianco puro su uno schermo è freddo e un po'
   clinico; questo è il colore della calce di una casa al sole, e si nota solo
   se si mettono le due pagine una accanto all'altra. Il blu profondo resta
   dove serve a leggere — le scritte, i bordi, il tasto che conta.

   I CARATTERI sono due, e stanno su questo sito (vedi modello\font\LEGGIMI):
     Instrument Serif   i titoli. Un serif da display, alto e con tratti
                        sottili: a cinquanta pixel ha un'eleganza che nessun
                        carattere di sistema ha, e non costa quasi niente
     Inter              tutto il resto. Disegnato per gli schermi, si legge a
                        qualunque misura e non ha nessuna personalità — che
                        per il testo è esattamente quello che serve

   LO SPAZIO è la cosa a cui sono stati dedicati più tentativi. Le sezioni
   respirano molto più di quanto sembri necessario guardando il codice, e le
   righe di testo non superano i 62 caratteri: oltre, l'occhio perde il capo
   della riga dopo e si stanca. Un sito che uno guarda per quaranta secondi
   deve sembrare facile, e «facile» quasi sempre vuol dire «vuoto intorno».

   SOLO DI GIORNO. L'app del telefono ha anche la notte perché la si guarda a
   letto; un sito che si visita una volta non ne ha bisogno, e «color-scheme:
   light» serve a dire al telefono di non ribaltarlo lui per conto suo — se no
   i campi del modulo diventano neri e le fotografie restano chiare.
*/

/* -------------------------------------------------------------------------
   I CARATTERI
   «swap» vuol dire: intanto scrivi con quello di sistema, e quando il mio è
   arrivato cambialo. Il testo si vede subito, e chi ha la rete lenta legge
   una pagina brutta invece di una pagina bianca.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Serif";
  src: url("font/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("font/inter.woff2") format("woff2");
  font-weight: 400 600;     /* un file solo per tutti i pesi che usiamo */
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* la carta */
  --carta: #FDFBF7;
  --velata: #EFF4F5;
  --bianco: #FFFFFF;
  --filo: #E5E1D8;
  --filo-mare: #D3DFE1;

  /* L'inchiostro. Quasi nero, con dentro un filo di verde-blu che si vede
     solo accanto al nero vero.

     Prima era un grigio-ardesia morbido, #16262C, scelto per non essere
     aggressivo. Guardando come scrivono i professionisti — The Thinking
     Traveller sta a #050817, Plum Guide al nero pieno — si capisce che era
     un errore: un testo che non arriva mai al nero sembra stinto, e la
     pagina sembra una fotocopia. Il nero costa niente e alza tutto. */
  --inchiostro: #0B1416;
  --grafite: #3D4A4F;
  /* Il grigio dei dettagli — le didascalie, le note, le voci del menu. È più
     scuro di quanto verrebbe naturale sceglierlo, e non per caso: alle misure
     a cui lo usiamo (13-15 pixel) un grigio più tenue scende sotto il 4,5:1
     richiesto, e a quel punto non è discreto, è solo faticoso. Questo sta a
     5,1:1 anche sul fondo più chiaro che abbiamo. La gerarchia la reggono la
     dimensione e lo spazio, che non costano niente a nessuno. */
  --tenue: #586A72;

  /* Il mare. Resta, ma fa un passo indietro: adesso è il colore dei
     COLLEGAMENTI e di poco altro. I due siti di ville che ho guardato non
     usano nessun colore saturo in nessun posto grande, e avevano ragione —
     il colore va speso dove serve a capire, non dove serve a decorare. */
  --mare: #0E5468;
  --mare-cupo: #093B4A;
  --mare-medio: #2C7E96;
  --onda: #C3DBE3;
  --schiuma: #E8F1F4;

  /* Il colore dei tasti: quasi nero, ma non nero. Un nero pieno su una carta
     calda fa un buco; questo è il blu del mare profondo tirato giù fin quasi
     al nero, e sulla pagina sembra nero finché non gli si mette accanto il
     nero vero. Plum Guide usa il nero, The Thinking Traveller un blu
     notte: la sostanza è la stessa. */
  --pece: #0C2229;
  --pece-chiaro: #163640;

  /* La sabbia: l'unico accento, come l'oro dei professionisti. */
  --sabbia: #8A5B12;
  --sabbia-velo: #F3EADB;

  --titoli: "Instrument Serif", Georgia, "Times New Roman", serif;
  --testo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --largo: 1180px;
  --lettura: 62ch;
  --curva: 8px;
  --respiro: clamp(76px, 10vw, 132px);
}

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

html { scroll-behavior: smooth; }
/* La barra in alto copre il titolo di una sezione quando ci si arriva da un
   collegamento: questo dice al browser di fermarsi un po' più su. */
:target { scroll-margin-top: 90px; }
section[id] { scroll-margin-top: 66px; }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* I COLLEGAMENTI.

   La sottolineatura non è quella del browser: è una riga disegnata sotto, che
   al passaggio del mouse CRESCE DA SINISTRA invece di accendersi tutta
   insieme. È un dettaglio che nessuno nota e che tutti sentono — la stessa
   ragione per cui una porta buona si chiude con un tonfo invece che con uno
   sbattere. Chi ha chiesto niente movimenti la vede apparire e basta. */
a {
  color: var(--mare);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 1px;
  transition: background-size .32s cubic-bezier(.2, .7, .2, 1), color .2s ease;
}
a:hover { color: var(--inchiostro); }
/* Quelli che NON sono testo in mezzo a un discorso non hanno la riga: i tasti
   se la disegnerebbero dentro, e le voci del menu ne hanno già una loro. */
.bottone, .menu a, .salta, .galleria a, .dice a { background-image: none; padding-bottom: 0; }

::selection { background: var(--onda); color: var(--mare-cupo); }

/* Il contorno di chi naviga con il tabulatore. Si vede solo a chi serve: il
   mouse non lo fa comparire. */
:focus-visible {
  outline: 2px solid var(--mare-medio);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3 { font-family: var(--titoli); font-weight: 400; }

p { margin: 0 0 1.1em; }

/* Chi ha chiesto al sistema di non far muovere le cose — per il mal di testa,
   per il mal d'auto — non deve vedere niente muoversi. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

.salta {
  position: absolute; left: -9999px;
  background: var(--mare); color: #fff;
  padding: 14px 20px; z-index: 90;
  border-radius: 0 0 var(--curva) 0;
}
.salta:focus { left: 0; top: 0; }

.dentro {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 44px);
}
/* I tre punti in cima a «La casa». Righe corte, separate da un filo, in un
   carattere un po' più grande del testo: si leggono in tre secondi e si
   saltano in uno. Il trattino davanti è un segno, non un elenco puntato: un
   pallino nero renderebbe il tutto una lista della spesa. */
.punti {
  list-style: none;
  margin: 0 0 clamp(30px, 3.6vw, 44px);
  padding: 0;
  max-width: var(--lettura);
  border-top: 1px solid var(--filo);
}
.punti li {
  position: relative;
  padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--filo);
  font-size: clamp(16px, 1.4vw, 18px);
}
.punti li::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 13px; height: 1px;
  background: var(--mare-medio);
}

.discorso { max-width: var(--lettura); }
.discorso p { font-size: clamp(17px, 1.35vw, 19px); color: var(--grafite); }
.discorso p:first-child { color: var(--inchiostro); }

/* -------------------------------------------------------------------------
   LA COPERTINA
   Due colonne: le parole a sinistra, la fotografia a destra fino al bordo
   dello schermo. Sotto ai 980 pixel diventa una colonna sola, e la fotografia
   passa SOTTO alle parole: sul telefono il nome, i numeri e il tasto si devono
   vedere senza scorrere niente.
   ------------------------------------------------------------------------- */
.copertina {
  display: grid;
  background:
    linear-gradient(180deg, var(--schiuma) 0%, var(--carta) 62%);
}
.copertina-testo {
  display: flex;
  align-items: center;
  padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 84px);
}
.copertina-dentro {
  max-width: var(--largo);
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 44px);
}

/* L'occhiello: il posto, scritto piccolo e spaziato sopra al nome. Serve a
   rispondere alla prima domanda di chiunque — «dove?» — prima ancora che se
   la faccia. */
.occhio {
  margin: 0 0 clamp(14px, 2vw, 22px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sabbia);
}

.copertina h1 {
  margin: 0;
  font-size: clamp(46px, 7.4vw, 96px);
  line-height: .94;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.copertina-riga {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  max-width: 30ch;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--grafite);
}

/* I numeri della casa. Una riga sola, con i punti in mezzo: quattro dati che
   si leggono in un colpo d'occhio invece che quattro scatole da guardare una
   per una. */
.numeri {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  list-style: none;
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  padding: 0;
  font-size: 15px;
  color: var(--grafite);
}
.numeri li { display: flex; align-items: baseline; white-space: nowrap; }
/* Il puntino separatore sta DOPO ogni voce, non prima della successiva.
   Sembra la stessa cosa e non lo è: sul telefono la riga va a capo, e con il
   puntino davanti la seconda riga cominciava con «· 1 bagno» — un segno
   appeso nel vuoto. Messo dopo, resta attaccato alla voce che chiude la riga
   di sopra, dove non dà fastidio a nessuno. */
.numeri li:not(:last-child)::after {
  content: "·";
  margin: 0 .8em;
  color: var(--filo-mare);
}
/* Su uno schermo strettissimo le quattro voci vanno a capo comunque, e il
   puntino resta appeso a fine riga. Lì i punti si tolgono del tutto e a
   separare basta lo spazio: è più pulito che un segno di punteggiatura
   sospeso nel vuoto. */
@media (max-width: 400px) {
  .numeri { gap: 6px 20px; }
  .numeri li:not(:last-child)::after { content: none; }
}
.numeri b {
  font-family: var(--titoli);
  font-weight: 400;
  font-size: 23px;
  color: var(--mare);
  margin-right: .32em;
}

.copertina .bottone { margin-top: clamp(30px, 4vw, 44px); }

.copertina-immagine { position: relative; min-height: 46vh; }
.copertina-immagine img { width: 100%; height: 100%; object-fit: cover; }

/* IL BORDO DOVE LA FOTO TOCCA LE PAROLE.

   Il taglio netto fra una fotografia e una pagina di testo è la cosa che fa
   sembrare un sito montato a pezzi. Qui la fotografia SFUMA in trasparenza
   sul lato che dà verso le parole.

   È una maschera sull'immagine, non un velo colorato sopra: un velo bisogna
   tingerlo del colore che sta sotto, e il colore che sta sotto qui cambia —
   la copertina ha un fondo che va dalla schiuma alla carta. La maschera
   invece buca la foto e lascia vedere quello che c'è, qualunque cosa sia.

   Sul telefono la foto sta SOTTO alle parole e sfuma in alto; da 980 pixel
   in su sta di fianco e sfuma a sinistra. Chi ha un browser che le maschere
   non le conosce vede il taglio netto di prima: non si rompe niente. */
.copertina-immagine img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 72px);
  mask-image: linear-gradient(180deg, transparent 0, #000 72px);
}

@media (min-width: 980px) {
  /* Più della metà alla fotografia. Prima erano 43 su 57 a favore delle
     parole, e le parole sono quattro righe: metà schermo per quattro righe è
     uno spreco, e la fotografia è quella che fa prenotare. Adesso 54 a lei. */
  .copertina-con-foto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 54%);
    align-items: stretch;
  }
  .copertina-con-foto .copertina-dentro {
    max-width: none;
    width: 100%;
    margin: 0;
    /* Il titolo deve cadere esattamente sotto alla colonna di tutto il resto
       della pagina, altrimenti si vede che la copertina è un pezzo a parte.
       Il conto: metà di quello che avanza ai lati del contenitore centrato,
       più il margine che hanno tutte le altre sezioni. */
    /* Il conto parte dalla larghezza di QUESTA colonna e non da quella della
       finestra: «100vw» comprende anche la barra di scorrimento, che c'è o
       non c'è a seconda di quanto è lunga la pagina, e il titolo finiva otto
       pixel più in là di tutti gli altri. Questa colonna è il 46% (cioè
       100 meno il 54 della fotografia), quindi la finestra vera è il suo
       100% diviso 0,46. */
    padding-left: max(clamp(20px, 5vw, 44px),
                      calc((100% / 0.46 - var(--largo)) / 2 + clamp(20px, 5vw, 44px)));
    padding-right: clamp(28px, 3.4vw, 52px);
  }
  .copertina-immagine { min-height: min(86vh, 860px); }
  .copertina-senza-foto .copertina-testo { min-height: 72vh; }
  /* Di fianco: la foto sfuma verso sinistra, dove ci sono le parole. La
     sfumatura è lunga — centotrenta pixel — perché su una fotografia larga
     una dissolvenza corta si vede come una banda, e una banda è un altro
     taglio netto con un nome diverso. */
  .copertina-immagine img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 130px);
    mask-image: linear-gradient(90deg, transparent 0, #000 130px);
  }
}

/* -------------------------------------------------------------------------
   LA BARRA
   ------------------------------------------------------------------------- */
.menu {
  position: sticky; top: 0; z-index: 40;
  background: rgba(252, 251, 248, .86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--filo);
}
.menu-dentro {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 44px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 34px);
}
.menu-nome {
  font-family: var(--titoli);
  font-size: 20px;
  white-space: nowrap;
  padding: 14px 0;
}
.menu ul {
  display: flex;
  gap: clamp(2px, 1.6vw, 22px);
  list-style: none;
  margin: 0 auto 0 0; padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  /* «min-width: 0» non è un dettaglio: senza, questo elenco si rifiuta di
     diventare più stretto del suo contenuto, scavalca il bordo e spinge fuori
     dalla barra il tasto «Scrivi» — che è il tasto che conta. Con questa riga
     l'elenco si stringe e scorre di lato, e il tasto resta dov'è. */
  min-width: 0;
  flex: 1 1 auto;
}
.menu ul::-webkit-scrollbar { display: none; }
.menu a {
  display: block;
  padding: 17px 2px;
  white-space: nowrap;
  text-decoration: none;
  font-size: 14px;
  color: var(--tenue);
  position: relative;
  transition: color .25s ease;
}
.menu a:hover { color: var(--inchiostro); }
/* La voce della sezione che si sta guardando. La lineetta sotto cresce dal
   centro: è l'unico movimento della barra, e si nota appena. */
.menu a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 12px;
  height: 1px; background: var(--mare);
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.menu a.qui { color: var(--inchiostro); }
.menu a.qui::after { transform: scaleX(1); }

/* Scritto «.menu a.menu-tasto» e non «.menu-tasto»: questo è un collegamento
   dentro al menu, quindi la regola generale qui sopra lo prende in pieno e
   vince, essendo più specifica. Senza il nome della classe attaccato alla «a»,
   il tasto si ritrova il padding delle voci — 2 pixel ai lati — e diventa una
   pastiglia schiacciata con dentro una parola illeggibile. */
/* IL CAMBIO LINGUA.

   Prima era una scritta grigia accanto al tasto, e sotto ai 560 pixel
   spariva del tutto per fare spazio: cioè non c'era proprio sul telefono,
   che è dove lo guarda metà della gente. Uno straniero col telefono in mano
   restava sulla pagina italiana senza sapere che ce n'era un'altra.

   Adesso è un riquadro con il filo intorno — si vede che è un comando e non
   una voce del menu — e c'è a tutte le larghezze: per esteso dove ci sta,
   con la sola sigla dove non ci sta. Niente bandierine: una bandiera è un
   paese, non una lingua, e l'inglese non è solo degli inglesi. */
.lingue { flex: none; display: flex; gap: 6px; }
.menu .lingue a {
  display: block;
  padding: 7px 11px;
  border: 1px solid var(--filo-mare);
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--grafite);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.menu .lingue a:hover {
  color: var(--pece);
  border-color: var(--pece);
  background: var(--schiuma);
}
.menu .lingue a::after { display: none; }
.lingua-corta { display: none; }

@media (max-width: 720px) {
  /* Da qui in giù «English» non ci sta più: resta «EN». Il riquadro invece
     resta, perché è quello che lo fa riconoscere come un tasto. */
  .lingua-lunga { display: none; }
  .lingua-corta { display: inline; }
  /* Dieci pixel sopra e sotto invece di sette: il riquadro arriva a
     quarantadue, che è la misura sotto la quale un dito comincia a
     sbagliare. Sono cinque pixel, e sono la differenza fra un tasto e un
     bersaglio. */
  .menu .lingue a { padding: 10px 11px; font-weight: 500; }
}

.menu a.menu-tasto {
  flex: none;
  padding: 10px 20px;
  border-radius: 2px;
  background: var(--pece);
  color: var(--carta);
  font-size: 13px;
  letter-spacing: .035em;
  text-decoration: none;
  transition: background .3s ease;
}
.menu a.menu-tasto::after { display: none; }   /* niente lineetta sotto al tasto */
.menu a.menu-tasto:hover { background: var(--pece-chiaro); color: var(--carta); }

/* Sotto ai mille pixel il nome nella barra se ne va: fra il nome, otto voci,
   il cambio lingua e il tasto non ci sta tutto, e il nome è la cosa che serve
   meno — sta scritto grande trenta pixel più in su.

   E le voci che avanzano sfumano invece di essere tagliate a metà parola. È la
   differenza fra «qui finisce» e «qui continua»: senza la sfumatura sembra un
   difetto, con la sfumatura si capisce che si scorre. */
@media (max-width: 1000px) {
  .menu-nome { display: none; }
  .menu ul {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
}
@media (max-width: 720px) {
  .menu a { padding: 15px 8px; }
  .menu a::after { left: 8px; right: 8px; }
}

/* -------------------------------------------------------------------------
   LE SEZIONI
   I numeretti 01, 02, 03 davanti ai titoli li conta il foglio di stile. Se
   una sezione sparisce, gli altri si rifanno da soli: non c'è modo di
   sbagliarli, perché nessuno li scrive.
   ------------------------------------------------------------------------- */
main { counter-reset: sezione; }

.sezione {
  counter-increment: sezione;
  padding: var(--respiro) 0;
}
/* Le bande più chiare entrano ed escono in dissolvenza invece di cominciare
   con una riga. La differenza fra i due fondi è di pochi punti — carta calda
   contro acqua fredda — e a quella distanza una riga netta si nota più del
   colore: sembra un errore di stampa. Novanta pixel per parte e il passaggio
   non si vede più, si sente soltanto. */
.sezione-velata {
  background: linear-gradient(180deg,
              var(--carta) 0,
              var(--velata) 90px,
              var(--velata) calc(100% - 90px),
              var(--carta) 100%);
}

.titolo {
  margin: 0 0 clamp(28px, 3.6vw, 48px);
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.titolo::before {
  content: counter(sezione, decimal-leading-zero);
  display: block;
  margin-bottom: clamp(14px, 1.8vw, 20px);
  font-family: var(--testo);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--sabbia);
}

h3 {
  font-family: var(--testo);
  font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tenue);
  margin: 0 0 14px;
}

.occhiello {
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--grafite);
  max-width: 46ch;
}
.nota { font-size: 15px; color: var(--tenue); max-width: var(--lettura); }
.minuta { font-size: 13px; color: var(--tenue); margin: 16px 0 0; }

/* -------------------------------------------------------------------------
   LA GALLERIA
   La prima larga il doppio: dà un ritmo, e di solito la prima è la più bella.
   ------------------------------------------------------------------------- */
/* LA GALLERIA È UN MOSAICO, NON UNA GRIGLIA.

   Prima era una griglia di riquadri tutti 4:3, e aveva due difetti. Il primo:
   le fotografie venivano TAGLIATE per entrarci, e le due panoramiche del
   porto — che sono larghe il doppio dell'altezza — ci lasciavano metà
   inquadratura. Il secondo: otto riquadri identici uno sotto l'altro non
   sono una galleria, sono un foglio di francobolli.

   Adesso ogni fotografia tiene la forma che ha, e le colonne le incastrano
   una sotto l'altra come i ritagli di un giornale. Le panoramiche vengono
   larghe e basse, il bagno viene stretto e alto, e il ritmo lo fanno loro
   invece di essere imposto da fuori.

   Il «break-inside: avoid» è la riga che impedisce a una fotografia di
   spezzarsi fra il fondo di una colonna e la cima della successiva. */
.galleria {
  column-count: 3;
  column-gap: clamp(10px, 1.1vw, 16px);
}
@media (max-width: 1040px) { .galleria { column-count: 2; } }
@media (max-width: 620px)  { .galleria { column-count: 1; } }

.galleria figure {
  margin: 0 0 clamp(10px, 1.1vw, 16px);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.galleria button {
  display: block; width: 100%; padding: 0;
  border: 0; background: none; cursor: zoom-in;
  border-radius: var(--curva);
  overflow: hidden;
}
.galleria img {
  width: 100%; height: auto;
  background: var(--velata);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
}
.galleria button:hover img { transform: scale(1.035); filter: brightness(1.03); }
.galleria figcaption {
  font-size: 13px; color: var(--tenue);
  padding: 8px 2px 0;
}

/* Il riquadro che si apre toccando una fotografia. */
.visore {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(9, 32, 40, .94);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 3vw, 36px);
  animation: entra .28s ease;
}
@keyframes entra { from { opacity: 0 } to { opacity: 1 } }
.visore[hidden] { display: none; }
.visore img {
  max-width: 100%; max-height: 80vh; object-fit: contain;
  border-radius: 4px;
}
.visore figcaption {
  color: rgba(255,255,255,.82); text-align: center;
  font-size: 14px; padding-top: 16px;
}
.visore-chiudi, .visore-avanti, .visore-indietro {
  position: absolute;
  background: rgba(255,255,255,.12); color: #fff;
  border: 0; border-radius: 50%;
  width: 46px; height: 46px;
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .2s ease;
}
.visore-chiudi:hover, .visore-avanti:hover, .visore-indietro:hover {
  background: rgba(255,255,255,.26);
}
.visore-chiudi { top: 18px; right: 18px; }
.visore-indietro { left: 14px; top: 50%; transform: translateY(-50%); }
.visore-avanti { right: 14px; top: 50%; transform: translateY(-50%); }

/* -------------------------------------------------------------------------
   COSA C'È
   ------------------------------------------------------------------------- */
.dotazioni {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0 clamp(26px, 4vw, 60px);
}
.dotazioni li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 0;
  border-top: 1px solid var(--filo);
}
/* Lo spazio dell'icona è riservato anche a chi non ce l'ha: così i titoli
   restano incolonnati e l'elenco non fa lo scalino dove manca un disegno. */
.icona-posto {
  flex: none;
  width: 22px;
  padding-top: 1px;
  color: var(--mare-medio);
}
.icona { width: 22px; height: 22px; display: block; }
.dotazione-testo { min-width: 0; }
.dotazioni b {
  display: block;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 1px;
}
.dotazione-testo > span {
  display: block;
  font-size: 15px; color: var(--tenue); line-height: 1.5;
}

/* «Da sapere» usa lo stesso elenco delle dotazioni, con due differenze: sta
   su due colonne invece di tre — sono frasi, non etichette — e le iconcine
   sono color sabbia invece che mare. Non è un vezzo: il colore diverso dice
   «attenzione» senza bisogno di scrivere «attenzione», che sarebbe allarmante
   per cose che allarmanti non sono. */
.dotazioni-sapere {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  margin-top: clamp(24px, 3vw, 34px);
}
.dotazioni-sapere .icona-posto { color: var(--sabbia); }

/* La riga sotto ai passi dell'arrivo: sta in disparte, con un filo a sinistra
   che dice «questa non è uno dei passi, è una cosa a parte». */
.nota-arrivare {
  margin-top: clamp(22px, 2.6vw, 30px);
  padding-left: 18px;
  border-left: 2px solid var(--onda);
  max-width: 620px;
}

/* -------------------------------------------------------------------------
   I PREZZI (quando ci sono)
   ------------------------------------------------------------------------- */
.prezzi { width: 100%; border-collapse: collapse; margin-bottom: 44px; max-width: 760px; }
.prezzi td { padding: 18px 8px; border-bottom: 1px solid var(--filo); vertical-align: baseline; }
.prezzi td:first-child { font-weight: 500; }
.prezzi td:nth-child(2) {
  font-family: var(--titoli); font-size: 21px; color: var(--mare); white-space: nowrap;
}
.prezzi td:last-child { font-size: 14px; color: var(--tenue); text-align: right; }
@media (max-width: 560px) {
  .prezzi, .prezzi tbody, .prezzi tr, .prezzi td { display: block; width: 100%; }
  .prezzi tr { padding: 14px 0; border-bottom: 1px solid var(--filo); }
  .prezzi td { border: 0; padding: 1px 0; }
  .prezzi td:last-child { text-align: left; }
}
.due-colonne {
  display: grid; gap: clamp(26px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  max-width: 760px;
}
.spunta { list-style: none; margin: 0; padding: 0; font-size: 16px; color: var(--grafite); }
.spunta li { padding: 6px 0 6px 24px; position: relative; }
.spunta li::before {
  content: "—"; position: absolute; left: 0; color: var(--mare-medio);
}
.spunta-no li::before { content: "+"; color: var(--sabbia); }

/* -------------------------------------------------------------------------
   IL CALENDARIO
   Il giorno libero non ha niente addosso: è il giorno preso a essere marcato.
   Su un calendario dove quasi tutto è libero, colorare le eccezioni è meno
   faticoso da guardare che colorare la regola.
   ------------------------------------------------------------------------- */
.calendario {
  display: grid;
  gap: clamp(26px, 3vw, 44px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.mese h3 {
  font-family: var(--titoli);
  text-transform: none; letter-spacing: 0;
  font-size: 19px; color: var(--inchiostro);
  margin-bottom: 12px;
}
.mese-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mese-griglia span {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; border-radius: 6px;
  color: var(--grafite);
  font-variant-numeric: tabular-nums;
}
.mese-griglia .intestazione {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tenue); aspect-ratio: auto; padding: 2px 0 6px;
}
.mese-griglia .vuoto { visibility: hidden; }
.mese-griglia .libera { background: transparent; }
/* Due segni insieme, il colore e la riga sopra: un uomo su dodici non
   distingue bene i colori, e un calendario che glielo dicesse solo con la
   tinta per lui sarebbe tutto uguale. */
.mese-griglia .presa {
  background: var(--onda);
  color: var(--mare-cupo);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.mese-griglia .passata { color: #C8CFD2; }

.legenda { font-size: 14px; color: var(--tenue); margin-top: clamp(26px, 3vw, 38px); }
.pastiglia {
  display: inline-block; width: 13px; height: 13px;
  border-radius: 4px; vertical-align: -2px; margin: 0 6px 0 18px;
}
.legenda .pastiglia:first-child { margin-left: 0; }
.pastiglia.libera { background: transparent; border: 1px solid var(--filo); }
.pastiglia.presa { background: var(--onda); }

/* -------------------------------------------------------------------------
   COME SI ARRIVA
   I passi in fila su un filo verticale: si capisce a colpo d'occhio che sono
   uno dopo l'altro, e non un elenco di cose a caso.
   ------------------------------------------------------------------------- */
.passi {
  list-style: none;
  counter-reset: passo;
  margin: clamp(30px, 4vw, 44px) 0 0;
  padding: 0;
  max-width: 640px;
}
.passi li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 30px 40px;
  border-left: 1px solid var(--filo-mare);
}
.passi li:last-child { border-left-color: transparent; padding-bottom: 0; }
.passi li::before {
  content: counter(passo);
  position: absolute; left: -13px; top: -2px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--carta);
  border: 1px solid var(--filo-mare);
  font-size: 11px; color: var(--mare);
}
.sezione-velata .passi li::before { background: var(--velata); }
.passi b { display: block; font-weight: 500; margin-bottom: 2px; }
.passi span { display: block; font-size: 15px; color: var(--tenue); line-height: 1.6; }
.passi a { color: var(--mare); }
.sotto-passi { margin-top: clamp(30px, 4vw, 40px); }

/* -------------------------------------------------------------------------
   LE DOMANDE
   Aperte e chiuse dal browser, senza una riga di JavaScript.
   ------------------------------------------------------------------------- */
.domande { max-width: 780px; border-top: 1px solid var(--filo); }
.domande details { border-bottom: 1px solid var(--filo); }
.domande summary {
  padding: 22px 42px 22px 0;
  cursor: pointer;
  font-size: clamp(16px, 1.4vw, 18px);
  list-style: none;
  position: relative;
  transition: color .2s ease;
}
.domande summary::-webkit-details-marker { display: none; }
.domande summary:hover { color: var(--mare); }
.domande summary::after,
.domande summary::before {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 13px; height: 1px;
  background: var(--mare-medio);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.domande summary::before { transform: rotate(90deg); }
.domande details[open] summary::before { transform: rotate(0deg); }
.domande p {
  margin: -6px 0 24px;
  padding-right: 42px;
  color: var(--grafite);
  max-width: var(--lettura);
}

/* -------------------------------------------------------------------------
   COSA DICONO GLI OSPITI
   ------------------------------------------------------------------------- */
/* LE RECENSIONI SCORRONO DI LATO.

   Prima erano tutte in colonna, una sotto l'altra: otto recensioni impilate
   sono un muro di parole, e un muro di parole non lo legge nessuno — si
   scorre oltre e si perde anche quelle buone. Tre alla volta si guardano.

   È una fila che scorre, non una giostra automatica: niente si muove da solo.
   Una cosa che scivola mentre uno sta leggendo è la fine della lettura.

   Lo scorrimento è quello vero del browser, con lo scatto (scroll-snap) che
   ferma le schede in riga: sul telefono si trascina col dito e funziona senza
   una riga di codice. Le frecce servono a chi ha il mouse e non gli viene in
   mente di trascinare. */
.giostra { margin-top: clamp(28px, 3.4vw, 40px); }

.dicono {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* I due pixel sotto lasciano respirare il bordo delle schede, che se no
     tocca il taglio dello scorrimento. */
  padding-bottom: 2px;
  scroll-padding-left: 0;
}
.dicono::-webkit-scrollbar { display: none; }
/* Chiuse, tutte alte uguali: la fila è ordinata. Aperta una, ognuna torna
   alta quanto il suo testo, se no le altre diventano scatoloni vuoti. */
.dicono.qualcuna-aperta { align-items: flex-start; }

.dice {
  margin: 0;
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: 12px;
  padding: clamp(22px, 2.6vw, 28px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Quanto è larga una scheda. Con le parole: tre per schermata su un
   computer, una e un pezzo sul telefono — il pezzo che avanza è quello che
   dice «ce n'è dell'altra». Senza parole sono cartellini e ne stanno di più. */
.dicono-testi .dice { flex: 0 0 min(84%, 345px); }
.dicono-cartellini .dice { flex: 0 0 min(44%, 185px); }

/* Il taglio delle recensioni lunghe. La classe la mette «sito.js» dopo aver
   misurato: senza JavaScript non c'è nessun taglio e il testo si legge tutto,
   in una scheda più alta. */
.dice blockquote.tagliato {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}
.continua {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--mare);
  cursor: pointer;
  border-bottom: 1px solid var(--onda);
  transition: border-color .25s ease;
}
.continua:hover { border-bottom-color: var(--mare); }

.giostra-frecce {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.giostra-freccia {
  width: 42px; height: 42px;
  border: 1px solid var(--filo-mare);
  border-radius: 2px;
  background: none;
  color: var(--inchiostro);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}
.giostra-freccia:hover { border-color: var(--pece); background: var(--schiuma); }
/* Arrivati in fondo la freccia resta al suo posto, spenta: sparire le farebbe
   saltare l'altra di lato, e un tasto che si sposta sotto al dito è peggio di
   un tasto spento. */
.giostra-freccia[disabled] { opacity: .3; cursor: default; }
.giostra-freccia[disabled]:hover { background: none; border-color: var(--filo-mare); }
/* Le virgolette le mette il foglio di stile, non chi scrive: così in
   contenuti.json si incolla la recensione come sta, senza pensarci. */
.dice blockquote { margin: 0; color: var(--grafite); font-size: 16px; line-height: 1.62; }
.dice blockquote::before { content: "«"; }
.dice blockquote::after { content: "»"; }

.dice figcaption {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 9px;
  margin-top: auto;      /* la firma resta in fondo anche se i testi sono corti */
  padding-top: 4px;
  font-size: 14px;
}
.dice figcaption b { font-weight: 500; }
.bandiera {
  width: 21px; height: 14px;
  border-radius: 2px;
  display: block; flex: none;
}
.paese { color: var(--tenue); }
.quando { color: var(--tenue); margin-left: auto; }

/* Il cartellino: la recensione che ha il voto ma non le parole. Su Booking è
   il caso più frequente di tutti. Il voto diventa la cosa grande, il nome e la
   bandierina gli stanno sotto, e sei cartellini ci stanno su una riga sola. */
.dicono-cartellini {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
}
.dice-cartellino {
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: clamp(20px, 2.2vw, 26px) 14px;
}
.dice-cartellino .voto-numero { font-size: clamp(34px, 3.4vw, 42px); }
.dice-cartellino figcaption { justify-content: center; margin-top: 0; }
.dice-cartellino .quando { margin-left: 0; }

.stelle {
  color: var(--sabbia);
  letter-spacing: .14em;
  font-size: 15px;
  line-height: 1;
}
.stelle .spenta { color: var(--filo-mare); }
.voto-numero {
  font-family: var(--titoli);
  font-size: 27px; line-height: 1;
  color: var(--mare);
}
.voto-numero small {
  font-family: var(--testo);
  font-size: 12px; color: var(--tenue); margin-left: 3px;
}

/* -------------------------------------------------------------------------
   DISPONIBILITÀ E PREZZI
   ------------------------------------------------------------------------- */
/* La sezione del modulo entra dalla carta invece di cominciare di colpo: i
   primi centoventi pixel sono la dissolvenza, poi l'acqua. Fra due colori
   così vicini il taglio netto non si legge come una scelta, si legge come una
   riga storta. */
.sezione-mare {
  background: linear-gradient(180deg,
              var(--carta) 0,
              var(--schiuma) 120px,
              #DFEDF1 100%);
}
.chiedi-griglia {
  display: grid;
  /* «minmax(0, 1fr)» e non semplicemente una colonna: una colonna di griglia
     lasciata a sé stessa si allarga quanto il suo contenuto più largo, e i
     campi della data hanno una larghezza minima che non si comprime. Risultato
     sul telefono: tutta la sezione sporgeva di quaranta pixel oltre il bordo,
     e il testo finiva tagliato. Lo zero dice «puoi stringerti fino a niente». */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
}
/* Stesso motivo, un piano più sotto: dentro alle griglie del modulo. */
.campo, .campo-doppio > *, .campo-triplo > * { min-width: 0; }
@media (min-width: 900px) {
  .chiedi-griglia { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
  /* Le parole restano ferme mentre si compila: chi arriva in fondo al modulo
     ha ancora sotto gli occhi il motivo per cui lo sta compilando. */
  .chiedi-parole { position: sticky; top: 100px; }
}
.altri-modi {
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(20px, 2.5vw, 26px);
  border-top: 1px solid var(--filo-mare);
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 15px;
}
.recensioni { margin: 16px 0 0; font-size: 15px; }
.recensioni a { text-decoration: none; border-bottom: 1px solid var(--onda); }
.recensioni a:hover { border-bottom-color: var(--mare); }

/* Il modulo su una carta bianca: è l'unico riquadro di tutto il sito, e lo è
   di proposito. Vuol dire «questa è la cosa da fare». */
.modulo {
  background: var(--bianco);
  border-radius: 14px;
  padding: clamp(24px, 3.4vw, 40px);
  box-shadow: 0 1px 2px rgba(9, 45, 58, .04),
              0 12px 40px -12px rgba(9, 45, 58, .16);
}
.campo { margin-bottom: 18px; }
.campo label {
  display: block;
  font-size: 13px; font-weight: 500;
  letter-spacing: .01em;
  margin-bottom: 7px;
  color: var(--grafite);
}
.campo input, .campo textarea {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  font-size: 16px;      /* sotto i 16 l'iPhone ingrandisce da solo la pagina */
  color: var(--inchiostro);
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: 9px;
  /* Senza questo, su iPhone i campi data vengono storti e più alti degli
     altri: è la stessa cosa già vista nell'app del telefono. */
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, background .2s ease;
}
.campo input:hover, .campo textarea:hover { border-color: var(--filo-mare); }
.campo input:focus, .campo textarea:focus {
  background: var(--bianco);
  border-color: var(--mare-medio);
  outline: 3px solid rgba(44, 126, 150, .16);
  outline-offset: 0;
}
.campo textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.campo ::placeholder { color: #9AA8AE; }
.campo-doppio { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.campo-triplo { display: grid; gap: 14px; grid-template-columns: 1fr 1fr .62fr; }
/* Sotto ai 560 pixel i tre campi vanno in colonna. Affiancati ci starebbero,
   ma un campo data ha bisogno di circa 150 pixel per far vedere «gg/mm/aaaa»
   per intero, e in due colonne gliene restavano 136: la data usciva tagliata.
   Una riga in più è meno peggio di una data che non si legge. */
@media (max-width: 560px) {
  .campo-triplo { grid-template-columns: 1fr; }
  .campo-triplo .campo:last-child { max-width: 170px; }
}
/* La riga che separa quello che serve da quello che fa comodo: senza, chi
   compila crede che le date siano obbligatorie e se non le sa se ne va. */
.facoltativi {
  margin: 26px 0 16px;
  padding-top: 22px;
  border-top: 1px solid var(--filo);
  font-size: 13px;
  color: var(--tenue);
}
.trappola { position: absolute; left: -9999px; }

/* -------------------------------------------------------------------------
   I TASTI
   ------------------------------------------------------------------------- */
/* I TASTI.

   Erano pastiglie azzurre che si sollevavano al passaggio del mouse. Facevano
   simpatia e sembravano il tasto di un'app, non di un sito che affitta una
   casa. I due siti di ville che ho guardato usano tutti e due un rettangolo
   scuro, quasi nero, senza ombra e senza salti: la differenza è tutta lì.

   Tre scelte, e ognuna ha un motivo:
     il RETTANGOLO (raggio 2) invece della pastiglia, perché una pastiglia è
       un bottone da schermo e un rettangolo è un bottone da stampa;
     la SPAZIATURA fra le lettere, che a un testo corto e tutto attaccato dà
       il respiro che al titolo dà la dimensione;
     NIENTE ombra e NIENTE salto: il tasto cambia solo di tono. Un elemento
       che si muove per dire «sono cliccabile» lo dice a chi non l'aveva
       capito, e dà fastidio a tutti gli altri.
*/
.bottone {
  display: inline-block;
  padding: 16px 34px;
  background: var(--pece);
  color: var(--carta);
  border: 1px solid var(--pece);
  border-radius: 2px;
  font: inherit;
  font-size: 15px; font-weight: 500;
  letter-spacing: .035em;
  text-decoration: none; cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.bottone:hover { background: var(--pece-chiaro); border-color: var(--pece-chiaro); }
.bottone-largo { width: 100%; }

/* Il tasto secondario: solo il filo. Sta accanto a quello pieno senza
   litigarci, e si capisce da sé che è la scelta meno importante. */
.bottone-vuoto {
  background: none;
  color: var(--inchiostro);
  border-color: var(--filo-mare);
  font-weight: 400;
  letter-spacing: .02em;
}
.bottone-vuoto:hover {
  background: none;
  color: var(--pece);
  border-color: var(--pece);
}

/* -------------------------------------------------------------------------
   IL PIÈ DI PAGINA
   Il CIN sta qui, e per legge deve starci.
   ------------------------------------------------------------------------- */
.pie {
  padding: clamp(44px, 6vw, 72px) 0 clamp(52px, 7vw, 80px);
  border-top: 1px solid var(--filo);
  font-size: 14px;
  color: var(--tenue);
}
.pie-griglia {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.pie p { margin: 0 0 5px; }
.pie a { color: var(--grafite); }
.pie-nome {
  font-family: var(--titoli); font-size: 21px;
  color: var(--inchiostro); margin-bottom: 10px;
}
.pie-codici { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   L'APPARIRE
   Le cose entrano salendo di dieci pixel. È l'unico movimento della pagina, e
   dura mezzo secondo: serve a far sembrare che la pagina si stia srotolando
   invece di comparire tutta insieme. Chi ha chiesto niente movimenti non lo
   vede (sta scritto in cima), e chi non ha JavaScript vede tutto subito —
   la classe la mette «sito.js», e se non arriva non c'è niente da nascondere.
   ------------------------------------------------------------------------- */
.appare { opacity: 0; transform: translateY(12px); }
.visto {
  opacity: 1; transform: none;
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
}

/* La pagina della privacy e quella del grazie: testo e basta. */
.pagina-semplice {
  max-width: var(--lettura);
  margin: 0 auto;
  padding: clamp(50px, 8vw, 90px) clamp(20px, 5vw, 44px) clamp(60px, 9vw, 100px);
}
.pagina-semplice h1 {
  font-size: clamp(34px, 5vw, 50px); line-height: 1.05; letter-spacing: -.012em;
  margin: 0 0 24px;
}
.pagina-semplice h2 { font-size: clamp(21px, 2.4vw, 26px); margin: 44px 0 12px; }
.pagina-semplice p { color: var(--grafite); }