/* =========================================================================
   Studio Haddon — sistema visivo
   ========================================================================= */

/* Tipografia di Studio Haddon: Cormorant Garamond (Light 300 / SemiBold 600)
   per i titoli, un sans leggero per il testo di servizio. Il sito attuale usa
   Avenir LT Light, che è sotto licenza Linotype e non è ridistribuibile.
   Avenir LT Light, che è sotto licenza Linotype/Monotype e non è
   ridistribuibile: Mulish ne è la sostituta più fedele fra i font liberi.
   Chi apre il sito da Mac o iPhone ha però Avenir Next già installato: basta
   anteporlo a Mulish qui sotto in `--sans` perché veda il font autentico. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Mulish:wght@200;300;400;500&display=swap');

:root {
  --paper: #ffffff;
  --sand: #fdfcf8;
  --sand-deep: #f4f2ea;
  --ink: #000000;
  --ink-soft: #323232;
  --ink-faint: #8c8c8c;
  --hair: rgba(0, 0, 0, 0.14);
  /* rosso spento, per i campi lasciati vuoti: segnala senza stonare */
  --errore: #9e3b1b;
  /* il verde della conferma, tenuto sullo stesso registro del rosso: spento,
     terroso, non il verde da semaforo. Rassicura senza gridare. */
  --ok: #3f6b4f;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Mulish', 'Avenir Next', Avenir, -apple-system, 'Segoe UI', sans-serif;

  --masthead: 86px;      /* altezza della testata */
  /* una sola misura per il logo: il segnaposto invisibile che tiene il posto
     fra le due voci deve avere esattamente lo stesso ingombro */
  --logo: clamp(40px, 3.7vw, 54px);
  --gutter: clamp(18px, 4.2vw, 64px);

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

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.72;
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
  /* `clip` e non `hidden`. Sembrano la stessa cosa e non lo sono: `hidden`
     crea un contenitore di scorrimento, e Safari in quel caso smette di
     onorare `scroll-behavior: smooth` e i salti alle àncore — il «Torna su»
     del piè di pagina non faceva niente, mentre su Chrome funzionava.
     `clip` taglia lo stesso quello che esce di lato, ma non crea nessun
     contenitore, quindi le àncore continuano a funzionare. */
  overflow-x: clip;
}
/* col menu aperto la testata sparisce: il velo scuro è al 94% e il logo bianco
   vi traspariva sopra, come un residuo di pagina */
body.is-locked { overflow: hidden; }
body.is-locked .masthead { opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ---------- tipografia ------------------------------------------------- */
/* il sito attuale usa il Cormorant in corpo contenuto: alle dimensioni grandi
   di queste pagine lo stesso colore tipografico si ottiene col peso normale */
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* L'àncora del «Torna su» è un elemento vuoto, quindi alto zero. Dentro un
   riquadro con `overflow: clip` — il corpo della pagina — un elemento alto
   zero è considerato interamente ritagliato: il browser non ha niente su cui
   saltare, e il collegamento non fa proprio niente. Un pixel di altezza basta
   a renderlo un bersaglio valido, e il margine negativo se lo riprende, così
   la pagina non si sposta di un capello.
   ⚠️ Non togliere il `clip` dal corpo per aggiustarlo: serve a tagliare le
   sporgenze laterali, e la versione con `hidden` rompeva le àncore su Safari.
   Il problema non è mai stato quello, era l'altezza zero. */
#top { display: block; height: 1px; margin-bottom: -1px; }

.label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
}
/* La misura del testo lungo, una sola per tutto il sito: home, indice storie,
   Chi siamo, Contatti, Booking. Prima Chi siamo ereditava il corpo del sito
   (15 px) e le altre passavano di qui (16,56 px a 1440): affiancate le due
   pagine si vedeva che non erano la stessa cosa. Questa è la via di mezzo,
   15,84 px a 1440, scritta una volta sola perché non possano più separarsi. */
.lede,
.about-text__body p,
.story-testo p { font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.8; }

.link-u {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}
.link-u::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.link-u:hover::after { transform: scaleX(0); }

/* =========================================================================
   Chrome: masthead + binari laterali + menu
   ========================================================================= */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--masthead);
  /* il padding stacca logo e voci dal bordo dello schermo */
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 92px);
  z-index: 60;
  pointer-events: none;
}
/* ⚠️ Sul desktop la testata NON si muove e NON prende sfondo: resta ferma in
   cima, sopra tutto, mentre la pagina le scorre sotto. È una scelta dei
   fotografi, chiesta due volte. Il 19 agosto l'avevo estesa a tutte le
   larghezze perché il collaudo mostrava il logo sopra «Email *» del modulo:
   respinta lo stesso giorno. Se un testo finisce sotto il logo si sposta il
   testo, non la testata. Il ritira-e-torna vale solo sotto i 1024 px, dove il
   testo arriva davvero fin sotto il marchio (vedi in fondo al file). */
.masthead__mark, .masthead__burger, .masthead__link { position: relative; }
.masthead__mark {
  pointer-events: auto;
  display: block;
  line-height: 0;
}
.masthead__mark img {
  height: var(--logo);
  width: auto;
  transition: filter 0.6s var(--ease);
}
body.chrome-light .masthead__mark img { filter: invert(1); }

/* Le due voci ai lati del logo. Stanno fuori dalla testata fissa e sono
   ancorate alla cima del documento: scorrendo se ne vanno con la pagina,
   mentre il logo resta. Su tablet e telefono spariscono, restano nel menu. */
.topnav {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--masthead);
  padding-top: 18px;
  /* tre colonne con le esterne uguali: così il segnaposto del logo cade sul
     centro esatto e le due voci ne distano lo stesso, pur avendo larghezze
     diverse. In fila semplice si centrava il gruppo, non il logo. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(28px, 6vw, 92px);
  z-index: 55;
  pointer-events: none;
}
.masthead__link--l { justify-self: end; }
.masthead__link--r { justify-self: start; }
/* copia invisibile del logo: ne occupa esattamente l'ingombro */
.topnav__ghost { height: var(--logo); width: auto; visibility: hidden; }

/* Cormorant, iniziale maiuscola come sono scritte nel testo. La spaziatura è
   più stretta che nelle etichette maiuscole: fra le minuscole aprirebbe troppo.
   Il peso 400 serve perché il Light, a questo corpo, si sgrana sulle foto. */
.masthead__link {
  pointer-events: auto;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.6s var(--ease), opacity 0.4s var(--ease);
}
.masthead__link:hover { opacity: 0.55; }
/* sulla propria pagina la voce resta identica alle altre. `aria-current` resta
   nel markup: serve ai lettori di schermo, non è un aggancio grafico. */
body.chrome-light .masthead__link { color: #fff; }
.masthead__burger {
  pointer-events: auto;
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 16px;
  display: none;
}
.masthead__burger span {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--ink);
  transition: background 0.6s var(--ease), transform 0.4s var(--ease);
}
.masthead__burger span:nth-child(1) { top: 2px; }
.masthead__burger span:nth-child(2) { bottom: 2px; }

/* variante su fondo scuro (hero fotografico) */
body.chrome-light .masthead__burger span { background: #fff; }

/* ---------- ITA / ENG --------------------------------------------------- */
/* In verticale sul bordo destro, come le voci laterali della reference. Sta
   fissa come il logo e come il logo si schiarisce sopra le fotografie.
   Su tablet e telefono sparisce: le due voci finiscono nel menu del burger. */
.lingue {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 58;
  display: flex;
  /* `row`, non `column`: dentro un testo verticale l'asse principale è già
     quello verticale dello schermo. Con `column` le tre voci si affiancano. */
  flex-direction: row;
  align-items: center;
  /* poco spazio fra le voci: l'aria per il dito la mettono le voci stesse,
     con la loro imbottitura, così la zona sensibile non ha buchi in mezzo */
  gap: 0;
  padding: 8px 18px 8px 10px;
  /* Le lettere ruotate e impilate lungo il bordo, come le voci laterali della
     reference. Niente `rotate: 180deg` per farle leggere dal basso: ruotando
     la scatola si ribaltano anche i suoi margini interni, e il testo finisce
     oltre il bordo dello schermo. */
  writing-mode: vertical-rl;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: none;
}
/* l'imbottitura è la zona che risponde al dito: il solo testo sarebbe
   17 × 22 px, un bersaglio che si manca */
.lingue__voce {
  pointer-events: auto;
  padding: 9px 7px;
  color: var(--ink);
  transition: color 0.6s var(--ease), opacity 0.4s var(--ease);
}
/* La lingua in cui si sta leggendo è quella piena; l'altra è sbiadita, ma non
   tanto da sparire sopra una fotografia mossa. Il pieno segna dove sei, non
   dove puoi andare: è il verso che si legge senza doverci pensare. */
.lingue__voce { opacity: 0.45; }
.lingue__voce.is-on { opacity: 1; }
/* dopo `.is-on`, se no a parità di forza non riuscirebbe ad accenderla */
.lingue__voce:hover { opacity: 1; }
.lingue__sep { color: var(--ink); opacity: 0.4; }
/* Il bianco segue `lingue-light`, non `chrome-light`: quest'ultima dice cosa
   c'è dietro al LOGO, in cima, e il selettore sta a metà schermo. Vale solo
   per quello di lato: quello dentro al menu è su fondo avorio, e lì il bianco
   sparirebbe. */
body.lingue-light .lingue .lingue__voce,
body.lingue-light .lingue .lingue__sep { color: #fff; }
/* col menu aperto sparisce, come la testata */
body.is-locked .lingue { opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); }

/* dentro il menu del burger, in orizzontale sotto le voci di navigazione */
.menu__lingue {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.28s;
}
.menu.is-open .menu__lingue { opacity: 1; }
.menu__lingue .lingue__voce { display: inline-block; padding: 8px 6px; }

/* ---------- menu overlay ------------------------------------------------ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--sand);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s var(--ease), visibility 0.55s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__close {
  position: absolute;
  top: 22px; right: var(--gutter);
  width: 26px; height: 26px;
}
.menu__close::before, .menu__close::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1px;
  background: var(--ink);
}
.menu__close::before { transform: rotate(45deg); }
.menu__close::after { transform: rotate(-45deg); }

.menu__inner { text-align: center; }
.menu__nav { display: flex; flex-direction: column; gap: 2px; }
.menu__nav a {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 300;
  line-height: 1.24;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.4s;
}
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu.is-open .menu__nav a:nth-child(1) { transition-delay: 0.10s; }
.menu.is-open .menu__nav a:nth-child(2) { transition-delay: 0.16s; }
.menu.is-open .menu__nav a:nth-child(3) { transition-delay: 0.22s; }
.menu.is-open .menu__nav a:nth-child(4) { transition-delay: 0.28s; }
.menu__nav a:hover { color: var(--ink-soft); }
.menu__nav a[aria-current='page'] { font-style: italic; }

.menu__meta {
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.34s;
}
.menu.is-open .menu__meta { opacity: 1; }
.menu__meta a { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; }
.menu__meta a:hover { color: var(--ink-soft); }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  height: 100svh;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  background: var(--ink);
}
.hero__stage { position: relative; flex: 1; overflow: hidden; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero__slide.is-on { opacity: 1; }
/* le fotografie restano ferme: il solo movimento è la dissolvenza fra una e
   l'altra, gestita dall'opacità di .hero__slide */
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* Velo appena percettibile sotto la testata: serve perché quattro delle
   fotografie hanno la fascia alta molto chiara e il logo bianco vi
   sparirebbe. Rispetto a una sfumatura lineare, i passaggi intermedi seguono
   una curva morbida: così non si legge come una banda scura ma come una
   naturale caduta di luce. */
.hero__stage::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 300px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.26) 0%,
    rgba(0, 0, 0, 0.15) 25%,
    rgba(0, 0, 0, 0.07) 50%,
    rgba(0, 0, 0, 0.02) 75%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 2;
  pointer-events: none;
}
.hero__caption {
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--paper);
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.hero__cap {
  position: absolute;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  white-space: nowrap;
  padding: 0 20px;
  text-align: center;
}
.hero__cap.is-on { opacity: 1; }
.hero__cap:hover { color: var(--ink-soft); }

/* =========================================================================
   Blocchi editoriali
   ========================================================================= */
/* meno aria sopra il claim: sta più vicino alla fascia della didascalia */
.section { padding: clamp(24px, 3.4vh, 46px) var(--gutter) clamp(56px, 8.5vh, 112px); }
.section--tight { padding-block: clamp(60px, 8vh, 104px); }
.section--sand { background: var(--sand); }

.wrap { max-width: 1560px; margin-inline: auto; }
.measure { max-width: 620px; margin-inline: auto; }

/* il Cormorant ha aste lunghe: a questo corpo l'interlinea normale lascia un
   canale vuoto fra le due righe, e il titolo si slega */
.claim {
  text-align: center;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.92;
}

.intro {
  margin-top: clamp(30px, 4.4vh, 56px);
  text-align: center;
}
.intro p { margin: 0 0 1.35em; }
.intro p:last-child { margin-bottom: 0; }

.cta-line { margin-top: clamp(32px, 4.6vh, 58px); text-align: center; }

.plate { margin: 0; }
.plate img { width: 100%; }
.plate--bleed { width: 100vw; margin-left: calc(50% - 50vw); }
/* fascia larga, non un'altra pagina intera: il taglio 5:2 la tiene bassa e il
   limite in vh evita che sugli schermi molto larghi torni a gonfiarsi */
.plate--tall img {
  aspect-ratio: 5 / 2;
  max-height: 56vh;
  object-fit: cover;
  object-position: center 42%;
}
@media (max-width: 720px) { .plate--tall img { aspect-ratio: 4 / 5; } }
.plate figcaption {
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

/* ---------- rivelazione allo scroll ------------------------------------ */
.rise { opacity: 0; transform: translateY(26px); }
.rise.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.rise--d1.is-in { transition-delay: 0.09s; }
.rise--d2.is-in { transition-delay: 0.18s; }
.rise--d3.is-in { transition-delay: 0.27s; }
/* già al suo posto, senza comparsa: è quanto sta sotto la prima schermata,
   che si raggiunge scorrendo. Va dopo le regole del ritardo per prevalere. */
.rise.subito { transition: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; }
}

/* =========================================================================
   Storie — impaginazione del sito attuale: due colonne, la sinistra allineata
   al margine sinistro e la destra al destro, distanze uguali fra le copertine.
   Nome e luogo compaiono sotto la fotografia al passaggio del mouse.
   ========================================================================= */
/* sotto lo stesso margine che divide recensioni e Instagram: gli stacchi fra
   le sezioni della home sono tutti della stessa misura */
.tales { padding: clamp(60px, 10vh, 130px) var(--gutter) clamp(38px, 6vh, 74px); }
.tales__grid {
  max-width: 1500px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* passo costante fra le righe: la composizione si ripete uguale a sé stessa */
  gap: clamp(70px, 11vw, 190px) clamp(30px, 5vw, 90px);
  /* le due copertine di ogni riga condividono l'asse orizzontale, come nel
     sito attuale, dove verticale e orizzontale hanno lo stesso centro */
  align-items: center;
}

/* il blocco è largo quanto la fotografia, così la didascalia le sta centrata
   sotto; è il blocco intero ad ancorarsi al margine esterno della colonna.
   Attenzione al selettore: .tale È il figlio della griglia, non un discendente */
/* la larghezza del blocco è dichiarata, non dedotta: le copertine sono 3:2 e
   2:3, e il lato lungo vale --lato per entrambe. Lasciarla calcolare al
   browser da `max-width: min(100%, …)` non funziona, perché il 100% dipende a
   sua volta dalla larghezza del blocco. */
.tale { display: block; width: min(100%, var(--lato)); }
.tale--tall { width: min(100%, calc(var(--lato) / 1.5)); }
.tales__grid > .tale:nth-child(odd) { justify-self: start; }
.tales__grid > .tale:nth-child(even) { justify-self: end; }

/* Come nel sito attuale, le copertine hanno il LATO LUNGO uguale: le verticali
   risultano alte e strette, le orizzontali basse e larghe, e le une pesano
   otticamente quanto le altre. */
.tales {
  --lato: clamp(300px, 36vw, 620px);
  background: var(--sand);
}
.tale__ph {
  display: block;
  line-height: 0;
  overflow: hidden;
}
.tale__ph img {
  display: block;
  width: 100%;
  height: auto;
}

.tale__ph { text-align: center; }

/* il nome della coppia affiora sotto la fotografia al passaggio del mouse:
   solo una comparsa graduale, senza spostamenti */
.tale__cap {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 300;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.tale:hover .tale__cap,
.tale:focus-visible .tale__cap { opacity: 1; }

/* su touch il passaggio del mouse non esiste: il nome resta sempre in vista */
@media (hover: none) {
  .tale__cap { opacity: 1; }
}

.tales__more { text-align: center; padding: clamp(44px, 8vh, 96px) 0 0; }

/* =========================================================================
   Parole degli sposi — carosello su fondo chiaro, come nel sito attuale
   ========================================================================= */
/* sotto è più raccolto che sopra: le recensioni e la fascia Instagram hanno lo
   stesso fondo, quindi i due margini si sommano in un vuoto unico */
.witness {
  text-align: center;
  padding: clamp(38px, 6vh, 74px) var(--gutter);
}
.witness__label {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.witness__stage {
  position: relative;
  max-width: 1080px;
  margin: clamp(30px, 4.5vh, 56px) auto 0;
  padding: 0 clamp(40px, 8vw, 130px);
  display: grid;
}
.witness__slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.witness__slide.is-on { opacity: 1; visibility: visible; }
/* come nel sito attuale: corpo contenuto e interlinea larga, ma centrato */
.witness__slide blockquote {
  margin: 0 auto;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.95;
  max-width: 660px;
  text-align: center;
}
/* la firma sta in basso a destra sotto la citazione, come nel sito attuale */
.witness__slide figcaption {
  max-width: 660px;
  margin: clamp(22px, 3.2vh, 38px) auto 0;
  text-align: right;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.witness__slide figcaption span {
  display: block;
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.witness__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink);
  opacity: 0.5;
  transition: opacity 0.4s var(--ease);
}
.witness__arrow:hover { opacity: 1; }
.witness__arrow svg { width: 22px; height: 22px; }
.witness__arrow--p { left: 0; }
.witness__arrow--n { right: 0; }

/* quadratini, come nel sito attuale */
.witness__dots { display: flex; justify-content: center; gap: 10px; margin-top: clamp(24px, 3.4vh, 40px); }
.witness__dots button {
  width: 7px;
  height: 7px;
  border-radius: 0;
  border: 1px solid var(--ink);
  background: transparent;
  padding: 0;
  transition: background 0.4s var(--ease);
}
.witness__dots button[aria-current='true'] { background: var(--ink); }

/* ---------- fascia Instagram ------------------------------------------- */
/* stesso avorio del blocco contatti che segue: le due sezioni formano un'unica
   campitura calda in chiusura di pagina */
.strip { background: var(--sand); padding: clamp(38px, 6vh, 74px) var(--gutter); }
.strip__head { text-align: center; margin-bottom: clamp(26px, 4vh, 52px); }
.strip__head a { display: inline-block; }
.strip__head a:hover { color: var(--ink-soft); }
.strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.2vw, 38px);
  max-width: 1560px;
  margin-inline: auto;
}
.strip__post { display: block; position: relative; overflow: hidden; }
.strip__post img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: filter 0.6s var(--ease);
}
/* La fotografia non si muove: si scurisce soltanto, quel tanto che basta a far
   leggere il segno bianco di Instagram che le compare sopra. Senza velo, su una
   fotografia chiara il segno sparirebbe. */
.strip__post:hover img,
.strip__post:focus-visible img { filter: brightness(0.72); }

/* al passaggio del mouse affiora il segno di Instagram: dice dove porta il
   collegamento senza bisogno di scriverlo */
.strip__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.strip__mark svg {
  width: clamp(34px, 3.4vw, 48px);
  height: auto;
  transform: scale(0.9);
  transition: transform 0.45s var(--ease);
}
.strip__post:hover .strip__mark,
.strip__post:focus-visible .strip__mark { opacity: 1; }
.strip__post:hover .strip__mark svg,
.strip__post:focus-visible .strip__mark svg { transform: none; }

/* =========================================================================
   Contatto (blocco argilla)
   ========================================================================= */
.talk { background: var(--sand); color: var(--ink); padding: clamp(70px, 11vh, 132px) var(--gutter); }
/* dopo la fascia Instagram il fondo non cambia: senza un bordo da segnare, i
   due margini si sommerebbero in un vuoto unico */
/* Instagram e contatti hanno lo stesso fondo avorio: senza una riga a
   dividerli, se lo stacco è corto si leggono come un blocco solo. Serve più
   aria che fra due sezioni di colore diverso, non meno. */
.strip + .talk { padding-top: clamp(46px, 7vh, 84px); }
.talk__grid {
  max-width: 1440px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
/* margine dichiarato per intero: senza, il paragrafo prende dal browser un
   margine alto quanto una riga e la frase scende di 37 px rispetto a
   «Conosciamoci», che invece parte dal bordo della colonna */
.talk__say { margin: 0; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 38px); line-height: 1.24; font-weight: 300; }
/* stacco fra due richiami di seguito: meno di un capoverso normale, perché
   restano due frasi dello stesso pensiero */
.talk__say + .talk__say { margin-top: 0.7em; }
.talk__note { margin: clamp(34px, 8vh, 90px) 0 0; max-width: 330px; font-size: 13px; line-height: 1.75; }
.talk__note a { border-bottom: 1px solid currentColor; }

/* titolo sopra il modulo: serif, come «Conosciamoci» nel sito attuale */
.form-title {
  margin: 0 0 clamp(26px, 3.5vh, 40px);
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- form -------------------------------------------------------- */
.form { display: grid; gap: clamp(36px, 4.6vh, 54px) clamp(24px, 3vw, 44px); grid-template-columns: 1fr 1fr; }
.field { position: relative; grid-column: span 1; margin: 0; }
.field--full { grid-column: 1 / -1; }
/* campi come nel sito attuale: Cormorant Light, filo nero, nessun riempimento */
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
  padding: 4px 0 12px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.4s var(--ease);
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field label {
  position: absolute;
  left: 0; top: 4px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: transform 0.35s var(--ease), font-size 0.35s var(--ease), opacity 0.35s;
  transform-origin: left top;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-17px) scale(0.78);
  opacity: 0.72;
}
.field--area label { top: 6px; }
/* asterisco dei campi da compilare per forza */
.field__req { margin-left: 3px; color: var(--ink-soft); }

/* il campo data mostra già giorno, mese e anno: l'etichetta sta sempre in alto,
   altrimenti si sovrapporrebbe al formato */
.field--data label {
  transform: translateY(-17px) scale(0.78);
  opacity: 0.72;
}
.field--data input { padding-top: 16px; }
.field--data input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.5; }
.field--data input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* campo lasciato vuoto dopo un tentativo di invio. Il fuoco va indicato dopo,
   altrimenti `.field input:focus` riporta la riga al nero proprio sul campo
   dove il cursore viene mandato per primo. */
.field--manca input,
.field--manca textarea,
.field--manca input:focus,
.field--manca textarea:focus { border-bottom-color: var(--errore); }
.field--manca label,
.field--manca .field__req { color: var(--errore); }
/* anche il contenuto del campo: negli altri è vuoto e non si vede, ma il campo
   data mostra sempre «gg/mm/aaaa» e restava scuro in mezzo a tutto il rosso */
.field--manca input,
.field--manca textarea { color: var(--errore); }
.field--manca input::-webkit-datetime-edit { color: var(--errore); }

.choices { grid-column: 1 / -1; margin-top: clamp(8px, 1.5vh, 18px); }
/* la domanda è una voce del modulo come le altre: stesso Cormorant, stesso
   corpo e stesso grigio delle etichette dei campi */
.choices > p {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(0, 0, 0, 0.6);
}
.choices__list { display: flex; flex-wrap: wrap; gap: 11px 12px; }
.choices__list label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
  cursor: pointer;
  padding: 5px 14px 7px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.choices__list input { position: absolute; opacity: 0; pointer-events: none; }
.choices__list label:hover { border-color: var(--ink); }
.choices__list label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }

.form__send { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(10px, 2vh, 22px); }
.btn {
  display: inline-block;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: 13px 34px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: background 0.45s var(--ease), color 0.45s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
/* Variante vuota, per le scelte che stanno accanto a un'altra: stesso ingombro
   e stesso rilievo del pieno, invertiti. Serve al consenso, dove rendere
   «accetta» più invitante di «rifiuta» lo vizierebbe. */
.btn--vuoto { background: transparent; color: var(--ink); }
.btn--vuoto:hover { background: var(--ink); color: var(--paper); }

/* visibile solo ai lettori di schermo */
.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Consenso alla privacy: un quadratino, come i puntini del carosello, non un
   cerchietto di sistema. Il segno di spunta è disegnato dentro la casella. */
.consenso {
  display: inline-flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 420px;
  font-size: 12.5px;
  line-height: 1.5;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.consenso input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.consenso input:checked { background: var(--ink); border-color: var(--ink); }
.consenso input:checked::after {
  content: '';
  display: block;
  width: 4px;
  height: 8px;
  margin: 1px auto 0;
  border: solid var(--paper);
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}
.consenso input:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.consenso a { border-bottom: 1px solid currentColor; }
/* non spuntato dopo un tentativo di invio */
.consenso.field--manca { color: var(--errore); }
.consenso.field--manca input { border-color: var(--errore); }

.form__hint { grid-column: 1 / -1; margin: 14px 0 0; font-size: 12px; opacity: 0.8; }
.form__hint:empty { margin: 0; }
/* esito dell'invio: il rosso resta ai campi mancanti, la conferma è in
   Cormorant come il resto del sito */
.form__hint--manca { color: var(--errore); opacity: 1; }
.form__hint--fatto {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--ok);
  opacity: 1;
}

/* =========================================================================
   Footer
   ========================================================================= */
/* =========================================================================
   Consenso ai cookie — fascia di primo livello
   =========================================================================
   Una fascia bassa in fondo alla finestra, non un velo che copre la pagina:
   la scelta va chiesta senza sbarrare la lettura. Stessa carta e stesso filo
   del piè di pagina, così sembra il bordo inferiore del sito invece di un
   cartello incollato sopra. */
.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;               /* sopra la pagina, sotto il menu del burger (90) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.6vw, 36px);
  padding: 16px var(--gutter);
  background: var(--paper);
  border-top: 1px solid var(--hair);
  /* entra scorrendo dal basso: appare a pagina già disegnata, e comparire di
     scatto la farebbe sembrare un errore di caricamento */
  transform: translateY(100%);
  transition: transform 0.6s var(--ease);
}
.cookie.is-in { transform: none; }
/* Non è pleonastico: `display: flex` qui sopra ha più forza della regola del
   browser per `[hidden]`, quindi senza questa riga l'avviso resterebbe nel
   documento anche a chi ha già scelto. Non si vedrebbe — è spinto sotto il
   bordo — ma si raggiungerebbe col tabulatore e i lettori di schermo lo
   leggerebbero a ogni pagina. */
.cookie[hidden] { display: none; }
.cookie__testo {
  margin: 0;
  max-width: 66ch;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cookie__testo a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}
.cookie__scelte { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
/* più piccoli del bottone d'invio del modulo: sono scelte, non l'azione
   principale della pagina */
.cookie__b { padding: 10px 22px; }

/* col menu aperto sparisce, come la testata e il selettore di lingua */
body.is-locked .cookie { opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); }

/* =========================================================================
   Consenso ai cookie — pannello di dettaglio
   =========================================================================
   Qui invece il velo scuro serve: è una finestra in cui si sceglie, e va
   separata dalla pagina. Stessa carta e stesse regole tipografiche di tutto
   il resto — non ha l'aria di un componente comprato altrove. */
.cbox { position: fixed; inset: 0; z-index: 100; }
.cbox[hidden] { display: none; }
.cbox__velo {
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 8, 0.5);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.cbox.is-in .cbox__velo { opacity: 1; }
.cbox__foglio {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: min(680px, 100%);
  max-height: min(88svh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  transition: transform 0.5s var(--ease);
}
.cbox.is-in .cbox__foglio { transform: translate(-50%, 0); }
/* sopra i 700 px di finestra il foglio si stacca dal fondo e si centra */
@media (min-height: 700px) {
  .cbox__foglio { bottom: 50%; transform: translate(-50%, calc(50% + 40px)); }
  .cbox.is-in .cbox__foglio { transform: translate(-50%, 50%); }
}

.cbox__intestazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 4vw, 36px) 18px;
  border-bottom: 1px solid var(--hair);
}
.cbox__h { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(23px, 2.4vw, 31px); }
/* la × è disegnata con due tratti, come quella del menu */
.cbox__x {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  cursor: pointer;
}
.cbox__x::before, .cbox__x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 1px;
  background: var(--ink);
}
.cbox__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.cbox__x::after { transform: translate(-50%, -50%) rotate(-45deg); }

.cbox__corpo { overflow-y: auto; padding: 4px clamp(20px, 4vw, 36px) 8px; }
.cbox__intro { margin: 20px 0 4px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.cbox__intro a { color: var(--ink); border-bottom: 1px solid currentColor; }

.cbox__cat { padding: 22px 0; border-top: 1px solid var(--hair); }
.cbox__cat:first-of-type { border-top: 0; }
.cbox__testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cbox__titolo { margin: 0; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; }
.cbox__fisso { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.cbox__scelta { max-width: none; margin: 0; }
.cbox__desc { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.cbox__vuota { margin: 12px 0 0; font-size: 12px; font-style: italic; color: var(--ink-faint); }

.cbox__servizi { list-style: none; margin: 14px 0 0; padding: 0; }
.cbox__servizio { padding: 12px 14px; border: 1px solid var(--hair); }
.cbox__servizio + .cbox__servizio { margin-top: 8px; }
.cbox__nome { margin: 0 0 8px; font-size: 12.5px; }
/* fornitore, durata e finalità su due colonne: l'etichetta in maiuscoletto a
   sinistra e il valore a destra, così si scorrono in verticale */
.cbox__dati { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.cbox__dati dt { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); padding-top: 2px; }
.cbox__dati dd { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }

.cbox__piede {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px clamp(20px, 4vw, 36px) calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hair);
}
.cbox__piede .btn { padding: 11px 22px; }

@media (prefers-reduced-motion: reduce) {
  .cookie, .cbox__velo, .cbox__foglio { transition: none; }
}

/* Conferma che l'indirizzo email è finito negli appunti. Il corsivo è il
   segnale che il sito usa già per «questa voce è in uno stato diverso», e
   non sposta niente: la larghezza resta bloccata da JavaScript per il tempo
   in cui il testo è sostituito. */
a.is-copiata { font-style: italic; color: var(--ink-soft); }

.foot { border-top: 1px solid var(--hair); }
.foot__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px var(--gutter);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.foot__bar > :last-child { justify-self: end; }
.foot__bar a:hover { color: var(--ink-soft); }
/* Informativa e Cookie stanno nella stessa cella, separati da un punto: è il
   modo di aggiungere il richiamo alle impostazioni senza passare a quattro
   colonne, che avrebbe voluto dire rifare il piè di pagina a tre larghezze. */
.foot__coppia { display: inline-flex; align-items: baseline; gap: 7px; }
.foot__coppia > [aria-hidden] { color: var(--ink-faint); }
/* è un pulsante, perché apre un pannello e non porta a una pagina, ma deve
   sembrare in tutto un collegamento come quello accanto */
.foot__come {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.foot__come:hover { color: var(--ink-soft); }
.foot__legal {
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px var(--gutter) 22px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.foot__legal > :last-child { justify-self: end; text-align: right; }

/* =========================================================================
   Pagina storia
   ========================================================================= */
/* apertura a tutta pagina, come lo slideshow della home.
   Dove c'è un filmato, la fotografia gli sta sotto come sfondo: se il video
   tarda a partire o non parte affatto, l'apertura resta comunque piena. */
.story-hero {
  position: relative;
  height: 100svh;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  background: var(--ink) center 42% / cover no-repeat;
  overflow: hidden;
}
/* Apertura tagliata quel tanto che basta a far entrare il titolo, e nulla di
   più: al primo colpo d'occhio si vedono la fotografia e «Conosciamoci», il
   testo comincia appena sotto il bordo e invita a scorrere.
   Lo spazio lasciato libero non è un numero fisso: ripete le stesse misure
   del titolo e del suo margine, che cambiano con la larghezza dello schermo.
   Con un valore fisso, sul telefono — dove il titolo è meno della metà —
   sarebbe rientrato anche il testo. */
.story-hero--breve {
  --spazio-titolo: calc(clamp(38px, 5.4vw, 82px) + clamp(46px, 8vh, 100px) + 24px);
  height: calc(100svh - var(--spazio-titolo));
  min-height: 280px;
}

/* L'entrata in dissolvenza, la stessa della prima diapositiva della home
   (1,4s): senza, la fotografia d'apertura compariva di colpo e Contatti
   sembrava caricarsi in un altro modo dal resto del sito.

   ⚠️ SOLO SU CONTATTI. Le pagine delle storie aprono com'erano, senza
   dissolvenza: l'effetto era stato chiesto per Contatti e basta. Da qui il
   `body[data-page="contatti"]` (che vale anche per la pagina inglese, ha lo
   stesso attributo).

   La regola vale solo se il codice gira — `apertura-pronta` lo mette site.js:
   a JavaScript spento la fotografia non viene mai nascosta, quindi non può
   restare invisibile. */
html.apertura-pronta body[data-page="contatti"] img.story-hero__media { opacity: 0; }
html.apertura-pronta body[data-page="contatti"] img.story-hero__media.is-in {
  opacity: 1;
  transition: opacity 1.4s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html.apertura-pronta body[data-page="contatti"] img.story-hero__media {
    opacity: 1;
    transition: none;
  }
}

.story-hero__media {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
.story-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 300px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.26) 0%,
    rgba(0, 0, 0, 0.15) 25%,
    rgba(0, 0, 0, 0.07) 50%,
    rgba(0, 0, 0, 0.02) 75%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 2;
  pointer-events: none;
}

.story-key {
  text-align: center;
  padding: clamp(34px, 5.5vh, 66px) var(--gutter) clamp(56px, 9vh, 108px);
}
/* i margini sono dichiarati per intero: il browser dà da sé un margine di
   un'altezza di riga ai paragrafi, e basta scriverne uno solo perché l'altro
   resti quello predefinito, molto più largo di quanto sembri dal foglio */
.story-key__date { margin: 0; font-size: 10.5px; letter-spacing: 0.26em; color: var(--ink-faint); }
/* i nomi stanno su una riga sola, come nel resto del sito: il corpo scende
   quel tanto che basta perché anche «Carlotta e Giangiacomo» ci stia */
.story-key__name {
  margin: 12px 0 10px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 54px);
  line-height: 1.1;
  text-wrap: balance;
}
.story-key__place { margin: 0; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; }
/* un nome proprio non si spezza a metà: la riga va a capo fra un nome e
   l'altro, mai dentro «Monasterolo del Castello» */
.nowrap { white-space: nowrap; }

/* galleria su due colonne: gli scatti mantengono le proporzioni e le colonne
   si chiudono alla stessa quota (il bilanciamento avviene in generate.mjs) */
.frames {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.6vw, 42px);
  padding: 0 var(--gutter) clamp(60px, 9vh, 120px);
  max-width: 1500px;
  margin-inline: auto;
  align-items: start;
}
.frames__col { display: grid; gap: clamp(18px, 2.6vw, 42px); align-content: start; }
.frame { margin: 0; }
.frame img { width: 100%; display: block; }

/* invito a scrivere, in chiusura di ogni racconto */
.story-cta {
  margin: 0;
  padding: clamp(20px, 4vh, 48px) var(--gutter) clamp(44px, 7vh, 84px);
  text-align: center;
}

.story-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 26px var(--gutter) clamp(56px, 9vh, 110px);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.story-nav > :last-child { justify-self: end; text-align: right; }
.story-nav a:hover { color: var(--ink-soft); }
/* Sul desktop si leggono i nomi delle coppie; le parole brevi restano in
   attesa e compaiono su telefono, dove i nomi non starebbero su una riga. */
.story-nav__breve { display: none; }

/* =========================================================================
   Indice storie
   ========================================================================= */
.index-head { padding: calc(var(--masthead) + clamp(52px, 11vh, 130px)) var(--gutter) clamp(30px, 5vh, 64px); text-align: center; }
.index-head h1 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5.6vw, 86px); line-height: 1; }
.index-head p { margin: 18px auto 0; max-width: 480px; color: var(--ink-soft); }

/* Ritmo costante: ogni riquadro ha la stessa altezza e le copertine poggiano
   tutte sulla stessa linea di base, così i nomi cadono sempre alla medesima
   quota e la distanza fra una copertina e l'altra non cambia mai. */
.cards {
  /* è l'altezza del riquadro: comanda quanto crescono le verticali, mentre le
     orizzontali restano limitate dalla larghezza della colonna */
  --lato: clamp(340px, 41vw, 640px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(64px, 8vw, 130px) clamp(30px, 5vw, 90px);
  padding: clamp(30px, 6vh, 70px) var(--gutter) clamp(70px, 11vh, 140px);
  max-width: 1480px;
  margin-inline: auto;
  align-items: start;
}
.card { display: block; }
/* il riquadro esterno serve solo ad allineare: ha sempre la stessa altezza e
   appoggia la fotografia in basso, così i nomi cadono alla stessa quota */
.card__ph {
  height: var(--lato);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Questo aderisce alla fotografia, ed è ciò che rende possibile la cornice:
   la larghezza è dichiarata, perché il lato lungo vale --lato per entrambi gli
   orientamenti. Lasciarla dedurre da `max-width: 100%` non funziona, perché
   quel 100% dipende a sua volta dal riquadro; e senza, il filo cadrebbe sui
   bordi della colonna invece che su quelli della fotografia. */
.card__box {
  position: relative;
  display: block;
  line-height: 0;
  width: min(100%, calc(var(--lato) * 1.5));
}
.card--tall .card__box { width: min(100%, calc(var(--lato) / 1.5)); }
.card__box img {
  display: block;
  width: 100%;
  height: auto;
}
/* Al passaggio del mouse compare un filo nero attorno alla fotografia.
   È disegnato da uno pseudo-elemento sovrapposto e non da un `border` sul
   riquadro: un bordo vero occuperebbe spazio e alla comparsa farebbe
   sobbalzare di un pixel la fotografia e il nome sotto. */
.card__box::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--ink);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
/* Il filo si accende passando sulla FOTOGRAFIA, non sul collegamento: il
   collegamento è largo quanto la colonna, mentre una copertina verticale ne
   occupa solo la parte centrale. Agganciandolo a `.card` la cornice compariva
   già muovendo il mouse nel vuoto ai lati, prima di essere sulla fotografia. */
.card__box:hover::after,
.card:focus-visible .card__box::after { opacity: 1; }
.card__name { margin: 18px 0 0; text-align: center; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 32px); font-weight: 300; }
.card__meta { margin: 8px 0 0; text-align: center; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }

/* =========================================================================
   Chi siamo
   ========================================================================= */

.about-text {
  max-width: 1180px;
  margin-inline: auto;
  /* poco spazio sopra: il testo appartiene ai ritratti che lo precedono */
  padding: clamp(6px, 1vh, 16px) var(--gutter) clamp(52px, 9vh, 110px);
}
.about-text__lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.12;
  text-align: center;
  margin: 0 0 22px;
}
/* Il racconto sta su una colonna sola e giustificata, come nella reference.
   La misura è stretta apposta: il giustificato regge solo su righe corte, e
   la sillabazione serve a non far aprire buchi fra le parole — senza, per
   riempire la riga il browser allarga gli spazi e si formano fiumi bianchi. */
.about-text__body { max-width: 560px; margin-inline: auto; }
.about-text__body p {
  margin: 0 0 1.5em;
  text-align: justify;
  hyphens: auto;
  line-height: 1.8;
}
.about-text__body p:last-child { margin-bottom: 0; }

.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3.4vw, 54px);
  /* i ritratti aprono la pagina e sono la prima cosa che si vede: stanno
     larghi come le copertine delle storie, non più stretti del testo */
  max-width: 1360px;
  margin-inline: auto;
  /* lo scarto in cima tiene conto della testata fissa, come nelle altre
     pagine che cominciano senza fotografia piena */
  padding: calc(var(--masthead) + clamp(46px, 8vh, 96px)) var(--gutter) clamp(48px, 7vh, 96px);
}
.team figure { margin: 0; }
.team img { width: 100%; }
.team figcaption {
  margin-top: 13px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* =========================================================================
   Contatti / Privacy
   ========================================================================= */
.page-open {
  padding: calc(var(--masthead) + clamp(60px, 12vh, 150px)) var(--gutter) clamp(30px, 5vh, 60px);
  text-align: center;
}
/* Dopo un'apertura fotografica lo scarto per la testata non serve più: quello
   spazio esiste per non far finire il titolo sotto il logo fisso. Sopra e
   sotto la stessa misura, così il blocco sta in mezzo ai suoi due bordi. */
.story-hero + .page-open {
  padding-top: clamp(46px, 8vh, 100px);
  padding-bottom: clamp(46px, 8vh, 100px);
}
.page-open h1 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 5.4vw, 82px); line-height: 1; }
/* la riga che presenta la mappa: sta staccata dal testo sopra e attaccata al
   disegno sotto, così si legge come la sua didascalia e non come un capoverso */
/* l'allineamento è quello dei capoversi sopra: essendo una riga sola, il
   giustificato la lascia a bandiera come l'ultima riga di un paragrafo */
.page-open__base {
  margin: clamp(30px, 4.5vh, 54px) auto 0;
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--ink-soft);
}
/* i capoversi sono giustificati e larghi 560 px come il racconto di Chi siamo:
   il titolo sopra resta centrato. La sillabazione tiene regolari gli spazi. */
/* Il colore è quello del testo, non il grigio: su Chi siamo e su Booking i
   capoversi sono neri, e queste tre pagine si leggono di fila. Il grigio
   resta alla riga di servizio qui sotto, che è una didascalia e deve stare
   un passo indietro. */
/* `:not(.label)` perché questa regola è scritta per i capoversi di Contatti,
   ma dentro `.page-open` finisce anche la righetta maiuscoletta della privacy
   («ai sensi del Regolamento…»). Giustificata, una riga sola si appoggia a
   sinistra: il riquadro da 560 px restava centrato e il testo dentro no.
   Esclusa, riprende il `text-align: center` di `.page-open`. */
.page-open p:not(.label) {
  margin: 20px auto 0;
  max-width: 560px;
  text-align: justify;
  hyphens: auto;
}

/* ---------- mappa delle sedi -------------------------------------------- */
/* disegno a filo, come le righe dei campi e i bordi del sito: nessun colore,
   nessuna ombra. Il paese è una campitura avorio con il contorno sottile. */
.mappa {
  margin: clamp(24px, 4vh, 44px) auto 0;
  /* la stessa misura dei capoversi qui sopra: la mappa è parte di quel
     discorso, non un'illustrazione a sé che debba imporsi */
  max-width: 560px;
}
.mappa svg { display: block; width: 100%; height: auto; overflow: visible; }
.mappa__terra {
  fill: var(--sand);
  stroke: rgba(0, 0, 0, 0.34);
  /* il tratto è in unità del disegno, non in pixel: sale con la mappa, e a
     questa larghezza vale poco più di mezzo pixel a schermo */
  stroke-width: 0.7;
  stroke-linejoin: round;
}
.mappa__segno { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
/* Il corpo è in unità del disegno, non in pixel: il browser lo moltiplica per
   quanto la mappa è ingrandita. Sul telefono la mappa è meno di metà che sul
   desktop, quindi lo stesso valore renderebbe la metà — di qui i due numeri,
   scelti perché a schermo il nome esca sempre attorno agli 11 px. */
.mappa__nome {
  font-family: var(--sans);
  font-size: 8.3px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: var(--ink);
}

/* ---------- racconto della storia --------------------------------------- */
/* Sta fra i nomi e la griglia, e si legge come il testo lungo delle altre
   pagine: colonna da 560 px, giustificata, con la sillabazione. Compare solo
   dove il racconto c'è, quindi nella maggior parte delle storie questa regola
   non tocca niente. */
.story-testo {
  padding: 0 var(--gutter) clamp(38px, 6vh, 76px);
}
/* Senza stacco fra un capoverso e l'altro: i racconti sono corti, due o tre
   frasi, e lo spazio bianco li faceva sembrare due blocchi separati invece
   che un pensiero solo. Vale per tutte le storie, la regola è una. */
.story-testo p {
  margin: 0 auto;
  max-width: 560px;
  text-align: justify;
  hyphens: auto;
}

/* ---------- Booking ----------------------------------------------------- */
/* Il testo sta come su Chi siamo e Contatti: colonna da 560 px, giustificata,
   con la sillabazione. Era centrato, e centrati funzionano i richiami di una
   riga, non cinque capoversi: a ogni riga l'occhio deve ritrovare da capo
   dove comincia la successiva. Il titolo sopra resta centrato. */
.booking-testo {
  padding: 0 var(--gutter) clamp(50px, 8vh, 100px);
}
.booking-testo p {
  margin: 0 auto 1.5em;
  max-width: 560px;
  text-align: justify;
  hyphens: auto;
}
.booking-testo p:last-child { margin-bottom: 0; }

/* il filmato è orizzontale ma si mostra in verticale, come nel sito attuale */
.talk__grid--booking { align-items: start; }
.booking-film { margin: 0; }

/* Quando site.js lo porta in apertura — solo su telefono — il filmato esce
   dalla fascia color sabbia e si ritrova su fondo bianco: gli servono i
   margini laterali della pagina e uno stacco dal testo che segue. */
.booking-film--apre {
  padding: 0 var(--gutter);
  margin: 0 0 clamp(40px, 6vh, 72px);
}
.booking-film video {
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 5 / 8;
  object-fit: cover;
  margin-inline: auto;
  background: var(--sand-deep);
}

.legal { max-width: 760px; margin-inline: auto; padding: 0 var(--gutter) clamp(70px, 11vh, 140px); }
.legal h2 {
  margin: 44px 0 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.legal p { margin: 0 0 1.2em; text-align: justify; hyphens: auto; color: var(--ink-soft); }
/* la traduzione dell'informativa è di cortesia: la nota lo dice, e sta
   staccata dal testo perché non si confonda con l'informativa stessa */
.legal__nota {
  margin: 0 0 clamp(30px, 5vh, 54px);
  padding-bottom: clamp(22px, 3.5vh, 34px);
  border-bottom: 1px solid var(--hair);
  font-style: italic;
  text-align: left;
}
/* I titoli raggiungibili da un collegamento diretto (l'avviso sui cookie punta
   qui) si fermano sotto la testata: senza, arrivano a 59 px dall'alto e il
   logo, che ne occupa 86, si posa sopra le prime righe. */
.legal h2[id] { scroll-margin-top: calc(var(--masthead) + 24px); }
.legal ul { margin: 0 0 1.2em; padding-left: 18px; color: var(--ink-soft); }
.legal li { margin-bottom: 0.5em; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
  .rail { display: none; }
  /* le due voci e il cambio lingua restano solo nel menu del burger */
  .topnav { display: none; }
  .lingue { display: none; }
  .masthead__burger { display: block; }
  /* il logo resta al centro come sul desktop: l'hamburger è già ancorato a
     destra per conto suo, quindi non serve spostare il marchio di lato */
  /* il logo resta al centro come sul desktop: l'hamburger è già ancorato a
     destra per conto suo, quindi non serve spostare il marchio di lato */
  .masthead {
    --logo: 34px;
    transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
  }
  /* Scendendo si ritira, risalendo torna — SOLO qui sotto i 1024 px, dove il
     testo arriva davvero fin sotto il logo (sulla privacy erano illeggibili
     tutti e due). Sul desktop la testata resta ferma: vedi la nota accanto
     alla regola `.masthead` in cima al file. */
  body.testata-via .masthead {
    transform: translateY(calc(-1 * var(--masthead)));
    opacity: 0;
  }
  /* quando riappare lontano dalla cima si porta dietro una fascia con un filo
     sotto, come quella della didascalia: sopra le fotografie resta invece
     trasparente com'è sempre stata (`chrome-light` dice che c'è una foto) */
  body.testata-staccata:not(.chrome-light) .masthead {
    background: var(--paper);
    box-shadow: 0 1px 0 var(--hair);
  }

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

  /* il titolo cresceva di un terzo su uno schermo largo quasi tre volte:
     34,8 px a 1024 contro 26 a 390. Il desktop resta com'è. */
  .story-key__name { font-size: clamp(30px, 6.4vw, 54px); }

  /* l'occhiello sotto il titolo è un maiuscoletto pensato per una riga sola:
     andando a capo le due righe si toccavano */
  .page-open .label { line-height: 1.45; }

  .tales__grid { gap: clamp(46px, 8vw, 100px) clamp(20px, 4vw, 46px); }
  .witness__stage { padding-inline: 44px; }

  /* i corpi minuti sono tarati su una pagina larga guardata da lontano: da
     vicino, su tablet e telefono, vanno alzati. Il desktop resta com'è. */
  .foot__legal { font-size: 11px; }
  .foot__bar { font-size: 12.5px; }
  .label, .strip__head, .card__meta, .btn, .story-nav { font-size: 11.5px; }

  /* i link di servizio sono righe di testo alte 17 px: senza un po' di
     imbottitura il dito non ha dove appoggiarsi */
  .foot__bar a, .story-nav a { display: inline-block; padding: 9px 4px; }
  /* il pulsante dei cookie è un collegamento in tutto tranne che nel nome:
     gli serve lo stesso appoggio per il dito */
  .foot__come { padding: 9px 4px; }
  .foot__bar, .foot__legal { padding-block: 10px; }
  /* Nella riga legale i collegamenti restano in linea, senza imbottitura:
     era solo la terza riga ad averne uno, e quei 9 px sopra e sotto la
     rendevano alta il doppio delle altre due. Le tre righe devono stare alla
     stessa distanza. L'indirizzo Instagram ha comunque un bersaglio pieno
     dentro al menu. */
  .foot__legal a { display: inline; padding: 0; }

  /* le voci di servizio dentro al menu: nell'overlay c'è spazio in
     abbondanza, non c'è motivo di tenerle a 10 px e alte 17 */
  .menu__meta { gap: 2px; }
  .menu__meta a { font-size: 11.5px; display: inline-block; padding: 10px 8px; }

  /* «Tutte le storie» e «@studiohaddon» sono link isolati: da soli su una
     riga, il dito ha bisogno di una fascia più alta del solo testo */
  .tales__more a, .strip__head a { display: inline-block; padding: 11px 14px; }
}

/* Il piè di pagina e la navigazione fra storie stanno su tre colonne: sotto
   questa larghezza le tre voci non ci stanno più e vanno a capo storte, quindi
   si incolonnano al centro. La soglia è più alta delle altre perché dipende
   dalla lunghezza degli indirizzi, non dall'impaginato. */
@media (max-width: 900px) {
  .foot__bar, .foot__legal { grid-template-columns: 1fr; text-align: center; gap: 9px; }
  .foot__bar > :last-child, .foot__legal > :last-child { justify-self: center; text-align: center; }

  /* «Informativa · Cookie» resta sulla stessa riga e va al centro come le
     altre voci. Il `text-align: center` qui sopra non basta: diventando cella
     di griglia il contenitore è trattato come blocco, quindi la sua riga
     interna si allinea con `justify-content`, non con l'allineamento del
     testo — e restava a sinistra mentre tutto il resto era centrato. */
  .foot__coppia { justify-content: center; }

  /* La navigazione fra storie invece resta in fila anche qui: sono tre voci
     che vanno lette insieme — indietro, l'indice, avanti — e incolonnate
     perdevano quel senso di direzione. Al posto dei nomi delle coppie
     compaiono le due parole brevi, e la spaziatura fra le lettere si stringe:
     a corpo minuto è lei, più del corpo, a decidere se una riga ci sta. */
  .story-nav {
    /* Le due colonne laterali restano larghe uguali, come sul desktop: così
       la voce di mezzo cade esattamente al centro della pagina. Con colonne
       a misura del contenuto in inglese si spostava di una dozzina di pixel,
       perché «Previous» è più lunga di «Next». Il `1fr` non le stringe sotto
       il testo — il minimo di una frazione è il contenuto. */
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    font-size: 9.5px;
    letter-spacing: 0.1em;
    padding-inline: clamp(12px, 3.4vw, 22px);
    /* la riga unica è il punto di tutta la regola: senza questo, quando lo
       spazio si stringe è «Tutte le storie» in mezzo ad andare a capo, e la
       fila si sfalsa invece di restringersi */
    white-space: nowrap;
  }
  .story-nav__breve { display: inline; }
  .story-nav__esteso { display: none; }

  /* La galleria della storia passa a una colonna già qui: a 768 px le due
     colonne davano scatti da 342 px, più piccoli dei 354 che si ottengono a
     colonna unica su un telefono da 390. Sopravvivendo le due colonne fino a
     720, un iPad verticale mostrava le fotografie più piccole di un iPhone.

     `display: contents` fa sparire i due contenitori e lascia le figure
     figlie dirette della fila: solo così l'ordine dichiarato su ciascuna
     figura può rimetterle in fila cronologica. Senza, si leggerebbe prima
     tutta la colonna di sinistra e poi tutta quella di destra — la giornata
     raccontata due volte a salti.

     `align-items: stretch` non è pleonastico: la regola generale porta
     `align-items: start`, che a griglia significa «non stirare in altezza» ma
     a colonna flex agisce in orizzontale e restringeva ogni figura alla
     larghezza naturale del file. Fra 721 e 900 px le verticali uscivano più
     strette delle orizzontali, incolonnate a sinistra invece che a filo. */
  .frames { display: flex; flex-direction: column; align-items: stretch; gap: clamp(16px, 4vw, 30px); }
  .frames__col { display: contents; }
}

@media (max-width: 720px) {
  body { font-size: 14.5px; }

  .cards { grid-template-columns: 1fr; }
  .card:nth-child(even) { margin-top: 0; }

  /* A colonna unica il riquadro di altezza fissa non serve più: serviva ad
     allineare i nomi fra due copertine affiancate. Restando, teneva le
     verticali larghe 227 px su 390 e lasciava 104 px di avorio morto sopra
     ogni orizzontale. La seconda riga ripete `.card--tall` perché quella
     regola ha specificità maggiore e altrimenti vincerebbe lei. */
  .card__ph { height: auto; display: block; }
  .card__box, .card--tall .card__box { width: 100%; }
  /* luogo e data su una riga sola: «Monasterolo del Castello — 18 May 2024»,
     la più lunga, non ci stava e andava a capo spezzando il nome della
     località. La spaziatura larga costava più del corpo. */
  .card__meta { font-size: 10px; letter-spacing: 0.12em; }

  .team { grid-template-columns: 1fr; max-width: 340px; }

  /* Il modulo: a colonna unica i vuoti fra i campi si sommano tutti in
     verticale, e quello che sul desktop è respiro qui diventa scorrimento.
     Si stringono le righe e i due blocchi in fondo, che erano i più larghi. */
  .form { grid-template-columns: 1fr; gap: 26px; }
  .choices { margin-top: 2px; }
  .form__send { margin-top: 4px; }
  .field--area textarea { min-height: 68px; }

  /* le pillole su due righe al massimo: tre per riga. Il corpo cala quel
     tanto che serve perché «Passaparola», la più lunga, ci stia in un terzo */
  .choices__list { gap: 8px; }
  .choices__list label { font-size: 13px; padding: 10px 11px 11px; }

  /* Una sola fotografia di Instagram, non tre francobolli. */
  .strip__grid { grid-template-columns: 1fr; }
  .strip__post:nth-child(n + 2) { display: none; }
  /* Il segno compare mentre si tiene premuto: su uno schermo che si tocca non
     c'è il passaggio del mouse, e `:active` è il suo equivalente. L'alone lo
     tiene leggibile senza scurire la fotografia, che qui è l'unica e va vista. */
  .strip__post:active .strip__mark { opacity: 1; }
  .strip__post:active .strip__mark svg { transform: none; }
  .strip__mark svg { filter: drop-shadow(0 1px 9px rgba(0, 0, 0, 0.55)); }

  /* «@studiohaddon» alla misura di «Tutte le storie»: sono la stessa cosa,
     un rimando in coda a una sezione */
  .strip__head .link-u { font-size: 10px; }

  /* fra il richiamo e il modulo, che qui si impilano, ci vuole più stacco:
     affiancati bastavano 36 px perché li divideva la colonna */
  .talk__grid { row-gap: 58px; }

  /* la mappa è meno di metà che sul desktop: nomi e quadratini vanno
     rimoltiplicati, se no si riducono a un francobollo illeggibile */
  .mappa__nome { font-size: 13.1px; }
  .mappa__segno { transform: scale(1.6); }


  .hero__cap { font-size: 13px; }

  /* schermo stretto: una copertina per riga */
  .tales__grid { grid-template-columns: 1fr; }
  .tales__grid > .tale:nth-child(odd),
  .tales__grid > .tale:nth-child(even) { justify-self: center; }

  /* Il nome va SOPRA la fotografia, al centro, non sotto. Sotto era una
     didascalia da leggere in un secondo momento; sopra dice subito di chi è
     la storia. In bianco con un alone, che è l'unico modo di restare
     leggibili sia su un abito chiaro sia su un bosco scuro. */
  .tale { position: relative; }
  .tale__cap {
    position: absolute;
    inset: 0;
    margin: 0;
    /* colonna centrata, non griglia: con `grid` i due nomi diventano due
       righe che si spartiscono tutta l'altezza della fotografia e finiscono
       uno in cima e uno in fondo, invece che vicini al centro */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    opacity: 1;
    visibility: visible;
    color: #fff;
    /* Niente dietro al testo: né velo né ombra. A reggere la lettura è il
       peso del carattere — il SemiBold del Cormorant, il più marcato che il
       sito carica. */
    font-weight: 600;
    font-size: clamp(22px, 6.4vw, 30px);
    line-height: 1.24;
    text-shadow: none;
    pointer-events: none;
  }
  /* «Hanneke» e «e Francesco» su due righe: un nome intero per riga si legge
     meglio di una riga lunga che si spezza dove capita */
  .tale__cap span { display: block; }

  /* Il lato lungo uguale fra verticali e orizzontali serve quando stanno
     affiancate e devono pesare uguale. In colonna singola non ha più nulla da
     bilanciare, e teneva la verticale a 200 px in una colonna da 354. */
  .tales__grid > .tale,
  .tales__grid > .tale--tall { width: 100%; }
  .tales { padding-block: clamp(44px, 6vh, 90px); }

  /* Etichette lunghe come «In quale momento della giornata si terrà il
     matrimonio?» vanno a capo e non stanno più nell'altezza del campo: sul
     telefono metà finiva sotto il filo, staccata, come fosse un'altra riga
     della pagina. Qui l'etichetta smette di galleggiare e si mette sopra. */
  .field--full { display: flex; flex-direction: column-reverse; }
  .field--full > label {
    position: static;
    transform: none;
    opacity: 0.72;
    font-size: 13.5px;
    line-height: 1.35;
    margin-bottom: 6px;
  }
  .field--full input:focus + label,
  .field--full input:not(:placeholder-shown) + label,
  .field--full textarea:focus + label,
  .field--full textarea:not(:placeholder-shown) + label { transform: none; }

  /* Le frecce restano anche qui. Lo scorrimento col dito funziona già, ma non
     si vede: senza un comando visibile molti non sanno che ci sono altre due
     recensioni. Rientrano nei fianchi dello spazio della citazione, che si
     stringe di quel tanto, e portano la loro zona sensibile a 44 px. */
  .witness__stage { padding-inline: 30px; }
  .witness__arrow { width: 24px; height: 24px; opacity: 0.42; }
  .witness__arrow svg { width: 17px; height: 17px; }
  .witness__arrow::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* su colonna stretta il giustificato apre fiumi di bianco fra le parole:
     meglio la bandiera a destra, e senza sillabazione che qui non serve più */
  .legal p, .about-text__body p, .page-open p, .booking-testo p, .story-testo p { text-align: left; hyphens: manual; }

  /* Il bottone principale su una riga sola: a corpo pieno «Raccontateci la
     vostra storia» andava a capo e diventava un rettangolo alto due righe. */
  .btn { font-size: 10px; letter-spacing: 0.14em; padding: 12px 20px; }
  /* «Tutte le storie» è un rimando, non un richiamo: sta un gradino sotto */
  .tales__more .label { font-size: 10px; }

  /* Il recapito si accorpa al richiamo sopra: sono la stessa cosa detta in
     due modi, e con 67 px in mezzo sembravano due sezioni distinte. Restano
     corpo e colore diversi, che è ciò che li distingue davvero. */
  .talk__note { margin-top: 18px; }

  /* Gli indirizzi su una riga sola: al corpo di prima andavano a capo a metà
     città. Meno spaziatura fra le lettere e un gradino di corpo bastano. */
  .foot__legal { font-size: 9.5px; letter-spacing: 0.08em; }

  /* Fascia dei cookie: testo su una riga sua e i tre pulsanti sotto, in fila.
     Incolonnati la fascia sarebbe diventata alta un terzo di schermo, e i tre
     pesi uguali — che sono il punto — si sarebbero persi. */
  .cookie {
    justify-content: stretch;
    gap: 12px;
    padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  }
  .cookie__testo { font-size: 11.5px; line-height: 1.5; flex: 1 1 100%; }
  .cookie__scelte { flex: 1 1 100%; gap: 7px; }
  .cookie__b { flex: 1 1 0; padding: 11px 4px; font-size: 9px; letter-spacing: 0.08em; }
}

@media (max-width: 560px) {
  .cbox__piede { gap: 7px; }
  .cbox__piede .btn { flex: 1 1 0; padding: 11px 4px; font-size: 9px; letter-spacing: 0.08em; }
}

/* Bersagli tattili: il segno resta minuto, ma la zona che risponde al dito
   arriva ai 44 px consigliati. Si allarga con uno pseudo-elemento per non
   spostare di un pixel quello che si vede. */
@media (hover: none), (max-width: 1024px) {
  /* La chiusura del menu non può usare questo trucco: le due aste della × sono
     già disegnate con ::before e ::after. Si allarga il bottone e si riportano
     le aste alla misura di prima, così cresce la zona ma non il segno. */
  .menu__close { width: 44px; height: 44px; top: 13px; }
  .menu__close::before, .menu__close::after { width: 26px; left: 9px; }

  /* lo pseudo-elemento si ancora al bottone, che quindi dev'essere posizionato */
  .witness__dots button { position: relative; }
  .masthead__burger::after,
  .witness__dots button::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  .witness__dots { gap: 22px; }

  /* le pillole erano alte 34,8 px: cresce solo l'imbottitura verticale, così
     restano larghe uguali e non si riordinano su righe diverse */
  .choices__list label { padding: 10px 16px 11px; }
}

/* Su schermo tattile il :hover resta appiccicato dopo il tocco: il bottone
   d'invio restava svuotato e le pillole col bordo scuro, come se fossero
   ancora premute. Va dopo le regole originali, che hanno la stessa forza. */
@media (hover: none) {
  .btn:hover { background: var(--ink); color: var(--paper); }
  .choices__list label:hover { border-color: rgba(0, 0, 0, 0.3); }
}

/* Schermi molto stretti (iPhone SE e simili, 320-375 px). La navigazione fra
   storie è la riga più affollata del sito: tre voci che devono stare affiancate
   in poco più di 300 px. A parità di corpo è la spaziatura fra le lettere a
   costare di più — a 0,1em quindici caratteri di «Tutte le storie» valgono da
   soli un terzo della larghezza — quindi si stringe quella prima del corpo. */
@media (max-width: 380px) {
  .story-nav {
    font-size: 8.5px;
    letter-spacing: 0.04em;
    gap: 7px;
    padding-inline: 10px;
  }
}

/* Il booking ha un filmato accanto al modulo: su tablet orizzontale c'è
   larghezza per due colonne, e impilandoli il video restava solo in mezzo a
   550 px di avorio vuoto. Vale solo per questa pagina: rimettere due colonne
   al blocco contatti in generale stringerebbe i campi su altre quattro. */
@media (min-width: 861px) and (max-width: 1024px) {
  /* il modulo sta da solo: una colonna sola, centrata come il testo.
     Prima erano due perché a sinistra c era il filmato, che dal 26 agosto
     è passato in apertura sotto il titolo. */
  .talk__grid--booking { grid-template-columns: 1fr 1fr; }
}

/* Schermo basso: il telefono girato in orizzontale. Non è una questione di
   larghezza ma di altezza, quindi serve una regola a sé. */
@media (max-height: 560px) and (max-width: 1024px) {
  /* il fondo di 540 px serve a non schiacciare l'apertura sui portatili con
     poca altezza; qui invece la spingeva oltre il bordo dello schermo */
  .hero, .story-hero { min-height: 0; }

}

@media print {
  .masthead, .topnav, .rail, .menu, .cookie, .cbox { display: none !important; }
}