/* ═══════════════════════════════════════════════════════════════════════
   atelievents — BOZZA 6 · "Il bianco, rimesso in ordine"

   È la bozza 5: stesso bianco, stessa aria, stesso maiuscoletto serif
   larghissimo. Cambia soltanto l'ORGANIZZAZIONE.
     · l'apertura non è più muta: il titolo e il pulsante stanno accanto
       al video, su bianco, e si leggono senza scorrere
     · le cinque scelte non sono più solo titoli: hanno una riga e una foto
     · le domande sono gestione delle obiezioni, quindi la prima è aperta
     · il testo corrente è più grande, più stretto e più scuro: si legge

   Nessuna icona, nessuna scatola colorata: i separatori sono filetti e
   spazio, esattamente come nella 5.

   Caratteri ospitati qui, nessuna richiesta esterna:
     Cormorant Garamond — SIL Open Font License 1.1
     Lato               — SIL Open Font License 1.1
   Il nome del carattere compare SOLO in @font-face e nelle due variabili
   --serif / --sans: per cambiarlo bastano due righe.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Cormorant;src:url(../assets/fnt/cormorant-300.woff2)format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(../assets/fnt/cormorant-400.woff2)format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(../assets/fnt/cormorant-500.woff2)format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(../assets/fnt/cormorant-400-it.woff2)format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Lato;src:url(../assets/fnt/lato-300.woff2)format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(../assets/fnt/lato-400.woff2)format("woff2");
  font-weight:400;font-style:normal;font-display:swap}

:root{
  /* ── i colori della bozza 5, invariati ───────────────────────────── */
  --bianco:#FFFFFF;
  --avorio:#F7F2EA;      /* chiusura e piede. Non è rosa e non deve diventarlo */
  --inchiostro:#1A1A18;
  --grigio:#6E6A64;      /* note, didascalie, etichette lunghe */
  --tenue:#9C968D;       /* etichette secondarie */
  --filo:rgba(26,26,24,.14);
  --filo-t:rgba(26,26,24,.07);

  /* Unico colore aggiunto: il corpo del testo. Il committente ha chiesto
     paragrafi più leggibili, e --grigio resta quello che era (le note).
     Su bianco questo tono sta sopra 10:1 di contrasto.                  */
  --testo:#403D38;

  /* ── i caratteri: due righe, e si cambia tutto ───────────────────── */
  --serif:Cormorant,"Cormorant Garamond",Cochin,Garamond,"EB Garamond",
          Baskerville,"Hoefler Text","Times New Roman",serif;
  --sans:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;

  --mg:clamp(20px,6vw,88px);      /* margine di pagina */
  --pv:clamp(76px,9vw,148px);     /* respiro verticale: un filo meno della 5,
                                     perché qui il contenuto è di più */
  --barra:82px;
  --e:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--barra) + 18px);  /* le ancore non finiscono sotto la barra */
}
body{
  background:var(--bianco);color:var(--testo);
  font-family:var(--sans);font-size:17px;font-weight:300;line-height:1.8;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
li{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--avorio);color:var(--inchiostro)}
:focus-visible{outline:1px solid var(--inchiostro);outline-offset:4px}

/* ── contenitori ────────────────────────────────────────────────────── */
.cont{width:min(1180px,100% - var(--mg)*2);margin-inline:auto}
.stretto{width:min(680px,100% - var(--mg)*2);margin-inline:auto}
section{padding:var(--pv) 0}
.ta-c{text-align:center}

/* ── tipografia ─────────────────────────────────────────────────────────
   Regola unica, come nella 5: i titoli sono serif, maiuscoli, spaziati.
   Cambia la dimensione, mai il resto.                                    */
h1,h2,h3,.occhiello,.marchio,.btn,.voce b,.iotu b{
  font-family:var(--serif);text-transform:uppercase;font-weight:400;color:var(--inchiostro)}

h1{font-size:clamp(29px,3.9vw,52px);letter-spacing:.05em;line-height:1.3}
h2{font-size:clamp(22px,2.8vw,35px);letter-spacing:.075em;line-height:1.42}
h3{font-size:clamp(15px,1.55vw,19px);letter-spacing:.12em;line-height:1.55}
h1 em,h2 em{font-style:italic;text-transform:none;letter-spacing:.01em}

.occhiello{font-size:11px;letter-spacing:.42em;color:var(--tenue);font-weight:500;line-height:1.6}
.stretto .occhiello+h2,.due__tx .occhiello+h2{margin-top:20px}

/* misura corta: 58 caratteri è la riga che si rilegge senza perdersi */
p{max-width:58ch}
.ta-c p,.stretto>p,.fine p,.piede p{margin-inline:auto}
p+p{margin-top:1.05em}
.picc{font-size:13.5px;letter-spacing:.02em;color:var(--grigio);line-height:1.75}
.guida{font-size:clamp(16px,1.5vw,19px);color:var(--testo)}

/* filetto: l'unico separatore ammesso, con lo spazio */
.filetto{display:block;width:44px;height:1px;background:var(--inchiostro);
  opacity:.34;margin:28px auto}
.filetto--sx{margin:26px 0}

.azione{margin-top:clamp(34px,4vw,54px)}

/* ── pulsante: un rettangolo di filo che si riempie ─────────────────── */
.btn{
  display:inline-block;padding:16px 34px;border:1px solid var(--inchiostro);
  font-size:11px;letter-spacing:.3em;background:transparent;position:relative;
  overflow:hidden;transition:color .5s var(--e);
}
.btn span{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--inchiostro);
  transform:translateY(101%);transition:transform .55s var(--e);
}
.btn:hover{color:var(--bianco)}
.btn:hover::before{transform:translateY(0)}
.btn--pieno{background:var(--inchiostro);color:var(--bianco)}
.btn--pieno::before{background:var(--avorio)}
.btn--pieno:hover{color:var(--inchiostro)}

/* ── barra: marchio al centro, come nella 5 ─────────────────────────── */
.barra{
  position:fixed;inset:0 0 auto;z-index:200;background:var(--bianco);
  border-bottom:1px solid var(--filo-t);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--mg);height:var(--barra);
  transition:height .45s var(--e),box-shadow .45s var(--e);
}
.barra.rid{height:66px;box-shadow:0 1px 18px rgba(26,26,24,.06)}
.barra__menu{display:flex;gap:clamp(14px,2.2vw,34px);align-items:center}
.barra__menu a{
  font-family:var(--serif);text-transform:uppercase;font-size:12px;
  letter-spacing:.2em;color:var(--inchiostro);position:relative;padding:6px 0;
}
.barra__menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:var(--inchiostro);transition:right .5s var(--e);
}
.barra__menu a:hover::after{right:0}
.barra__d{display:flex;justify-content:flex-end}
.barra .btn{padding:12px 22px;font-size:10px;letter-spacing:.24em}

.marchio{display:block;text-align:center;line-height:1}
.marchio b{
  font-family:var(--serif);font-weight:400;text-transform:lowercase;
  font-size:clamp(21px,2.4vw,28px);letter-spacing:.008em;color:var(--inchiostro);display:block;
}
.marchio b sup{font-size:.36em;vertical-align:super;opacity:.55;letter-spacing:0}
.marchio i{
  display:block;font-style:normal;font-family:var(--serif);
  font-size:9px;letter-spacing:.55em;color:var(--tenue);margin-top:5px;
  text-transform:uppercase;text-indent:.55em;
}

.apri{display:none;width:26px;height:14px;position:relative}
.apri i{position:absolute;left:0;right:0;height:1px;background:var(--inchiostro);
  transition:transform .4s var(--e),opacity .3s}
.apri i:nth-child(1){top:0}
.apri i:nth-child(2){bottom:0}
.apri[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.apri[aria-expanded="true"] i:nth-child(2){transform:translateY(-6.5px) rotate(-45deg)}

/* ── §1 APERTURA ────────────────────────────────────────────────────────
   Due colonne: le parole su bianco a sinistra, il video che va a filo
   dello schermo a destra. Nessuna scritta sopra al filmato, quindi
   nessuna velatura e nessun problema di contrasto.                       */
.apertura{
  padding:0;margin-top:var(--barra);
  display:grid;grid-template-columns:minmax(340px,50%) 1fr;
  align-items:stretch;min-height:min(72vh,620px);
  padding-left:var(--mg);
}
.apertura__testo{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,6vw,78px) clamp(28px,4.5vw,66px) clamp(48px,6vw,78px) 0;
}
/* il titolo è più contenuto del titolo di pagina: deve stare su due righe
   dentro la colonna, non spezzarsi in quattro */
.apertura h1{font-size:clamp(25px,2.6vw,38px)}
/* il filmato è in posizione assoluta dentro la sua colonna: così è la
   colonna del testo a dettare l'altezza della fascia, e un video verticale
   non fa crescere l'apertura a dismisura */
.apertura__video{position:relative;overflow:hidden;background:var(--avorio)}
.apertura__video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── §1 le tre micro-prove: una riga sola, tre celle divise da un filo ── */
.prove{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--filo);border-bottom:1px solid var(--filo);
  padding:0 var(--mg);
}
.prove li{padding:clamp(22px,2.6vw,32px) clamp(14px,2vw,30px);text-align:center}
.prove li+li{border-left:1px solid var(--filo-t)}
.prove b{
  display:block;font-family:var(--serif);text-transform:uppercase;font-weight:400;
  font-size:clamp(12px,1.25vw,14.5px);letter-spacing:.22em;color:var(--inchiostro);
}
.prove span{display:block;margin-top:9px;font-size:13.5px;color:var(--grigio);line-height:1.6}

/* ── blocco a due colonne: fotografia e testo (promessa, Francesca) ──── */
.due{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,78px);align-items:center}
.due--stretta{grid-template-columns:.72fr 1.28fr}
.due__ph{overflow:hidden;aspect-ratio:4/3}
.due--stretta .due__ph{aspect-ratio:3/4}
.due__ph img{transition:transform 1.6s var(--e)}
.due__ph:hover img{transform:scale(1.03)}
.due__tx p{max-width:52ch}

/* IO / TU: due blocchi affiancati, l'ordine non cambia mai */
.iotu{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,42px);
  margin-top:clamp(30px,3.6vw,46px);border-top:1px solid var(--filo);padding-top:28px}
.iotu b{display:block;font-size:15px;letter-spacing:.34em;line-height:1}
.iotu p{margin-top:12px;font-size:15.5px;max-width:26ch}

/* ── §3 i quattro passi: la sezione migliore, quindi la più larga ─────── */
.funziona .passi{margin-top:clamp(44px,5vw,72px);border-top:1px solid var(--filo)}
.passo{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,4.5vw,66px);
  align-items:baseline;padding:clamp(28px,3vw,42px) 0;border-bottom:1px solid var(--filo);
  transition:padding-left .6s var(--e);
}
.passo:hover{padding-left:14px}
/* i numeri in Lato: la "1" del serif è uno stelo con due grazie e si legge I */
.passo__n{
  font-family:var(--sans);font-weight:300;font-size:clamp(26px,3.2vw,42px);
  line-height:1;color:var(--tenue);letter-spacing:.04em;min-width:2.1em;
}
.passo h3{margin-bottom:10px}
.passo p{font-size:16.5px;max-width:56ch}
.passo em{font-style:italic}

/* ── §4–§8 le cinque scelte: foto piccola, etichetta, titolo, una riga ── */
.scelte{margin-top:clamp(38px,4vw,58px);border-top:1px solid var(--filo)}
.scelte li{
  display:grid;grid-template-columns:clamp(88px,11vw,144px) 1fr;
  gap:clamp(20px,3.4vw,52px);align-items:center;
  padding:clamp(24px,2.6vw,34px) 0;border-bottom:1px solid var(--filo);
}
.scelte figure{aspect-ratio:4/5;overflow:hidden}
.scelte img{transition:transform 1.5s var(--e)}
.scelte li:hover img{transform:scale(1.05)}
.scelte .occhiello{margin-bottom:14px}
.scelte h3+p{margin-top:10px;font-size:16px;color:var(--testo);max-width:60ch}

/* ── fasce a tutta larghezza: solo video, mai fotografie ─────────────── */
.fascia{padding:0;height:clamp(280px,44vw,600px);overflow:hidden;position:relative}
.fascia--bassa{height:clamp(240px,34vw,460px)}
.fascia video{width:100%;height:100%;object-fit:cover}

/* ── §9 il giorno: il momento emotivo, centrato, con l'immagine sotto ── */
.giorno .chiusa{
  margin-top:clamp(26px,3vw,38px);font-family:var(--serif);text-transform:uppercase;
  font-size:clamp(13px,1.5vw,17px);letter-spacing:.16em;line-height:1.8;color:var(--inchiostro);
  max-width:34ch;
}
/* la fotografia sta dentro il contenitore, non a tutta pagina:
   1434px di sorgente non reggono lo schermo intero */
.giorno__ph{margin-top:clamp(44px,5vw,72px);aspect-ratio:16/9;overflow:hidden}

/* ── §10 i progetti: compatta. Sei riquadri piccoli e una didascalia ─── */
.griglia{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(6px,.9vw,12px);
  margin-top:clamp(38px,4vw,58px)}
.griglia figure{aspect-ratio:4/5;overflow:hidden}
.griglia img{transition:transform 1.5s var(--e)}
.griglia figure:hover img{transform:scale(1.05)}
.luoghi{margin-top:26px;letter-spacing:.16em;font-size:11px;text-transform:uppercase;
  color:var(--tenue);max-width:none}

/* ── §11 le coppie: il materiale non c'è ancora ────────────────────────
   Tre riquadri con le righe vuote: si vede che sono voluti, non un buco.
   Il testo entra da data-slot, al posto delle righe.                     */
.voci{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px);
  margin-top:clamp(38px,4vw,58px)}
.voce{border:1px solid var(--filo);padding:clamp(26px,3vw,38px);min-height:208px}
.voce .occhiello{margin-bottom:30px}
.voce__r{display:block;height:1px;background:var(--filo);margin-top:26px}
.voce__r:nth-of-type(2){width:88%}
.voce__r:nth-of-type(3){width:58%}

/* ── §12 i numeri di Francesca ───────────────────────────────────────── */
.firma{margin-top:18px}
.cifre{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,38px);
  margin-top:clamp(34px,3.6vw,48px);padding-top:34px;border-top:1px solid var(--filo)}
.cifre div{text-align:center}
/* Le cifre NON vanno nel serif: "10" finiva per leggersi "IO". */
.cifre b{display:block;font-family:var(--sans);font-weight:300;
  font-size:clamp(26px,3.6vw,44px);color:var(--inchiostro);line-height:1;letter-spacing:.06em}
.cifre span{display:block;margin-top:12px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tenue);line-height:1.7}

/* ── §13 dove: una riga di respiro, niente elenchi di località ───────── */
.dove{padding-top:0}
.dove p{margin-top:20px}

/* ── §14 le domande: righe e filetti, nessuna scatola ────────────────── */
.dom{margin-top:clamp(38px,4vw,56px);border-top:1px solid var(--filo)}
.dom details{border-bottom:1px solid var(--filo)}
.dom summary{
  list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  font-family:var(--serif);text-transform:uppercase;font-size:clamp(13px,1.45vw,15.5px);
  letter-spacing:.1em;color:var(--inchiostro);line-height:1.6;
}
.dom summary::-webkit-details-marker{display:none}
/* il "più" è fatto di due filetti, non di un'icona */
.dom summary::before,.dom summary::after{
  content:"";position:absolute;right:4px;top:50%;background:var(--inchiostro);
  transition:transform .45s var(--e),opacity .3s;
}
.dom summary::before{width:13px;height:1px;margin-top:-.5px}
.dom summary::after{width:1px;height:13px;margin-top:-6.5px;right:10px}
.dom details[open] summary::after{transform:rotate(90deg);opacity:0}
.dom details p{padding:0 46px 28px 0;font-size:16px;max-width:64ch}

/* ── §15 chiusura e piede, su avorio ─────────────────────────────────── */
.fine{background:var(--avorio)}
.fine .picc{margin-top:22px}
.piede{background:var(--avorio);padding:0 0 46px;text-align:center}
.piede__m{padding-top:12px}
.piede nav{display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px clamp(12px,2vw,26px);margin-top:26px}
.piede nav a,.piede nav span{
  font-family:var(--serif);text-transform:uppercase;font-size:10.5px;letter-spacing:.26em;
  color:var(--inchiostro)}
.piede nav span{color:var(--tenue)}
.piede__c{margin-top:30px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grigio);line-height:2.2}

/* ── comparse: una sola animazione in tutto il sito ──────────────────── */
.js .rv{opacity:0;transform:translateY(16px);
  transition:opacity 1.1s var(--e),transform 1.1s var(--e);transition-delay:var(--d,0s)}
.js .rv.on{opacity:1;transform:none}

/* ── il pulsante che resta a portata di pollice ──────────────────────── */
.fisso{
  position:fixed;right:var(--mg);bottom:26px;z-index:190;
  padding:15px 26px;background:var(--inchiostro);color:var(--bianco);
  font-family:var(--serif);text-transform:uppercase;font-size:10.5px;letter-spacing:.24em;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .6s var(--e),transform .6s var(--e),background .4s;
}
.fisso.on{opacity:1;transform:none;pointer-events:auto}
.fisso:hover{background:#000}

/* ═══════════════ SCHERMI STRETTI ═══════════════ */

@media (max-width:1080px){
  .due,.due--stretta{grid-template-columns:1fr;gap:clamp(26px,4vw,44px)}
  .due__ph,.due--stretta .due__ph{aspect-ratio:16/10;max-height:440px}
  .due__tx p{max-width:60ch}
  .griglia{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
  /* l'apertura si impila: prima il video, poi le parole. Il pulsante
     resta comunque sopra la piega su un telefono in verticale.         */
  .apertura{grid-template-columns:1fr;padding-left:0;min-height:0}
  .apertura__video{order:-1;height:clamp(230px,38svh,340px)}
  .apertura__testo{padding:clamp(30px,6vw,48px) var(--mg) 0;text-align:center}
  .filetto--sx{margin:24px auto}
  .apertura__testo p{margin-inline:auto}
  .voci{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .voce{min-height:0}
}

@media (max-width:720px){
  :root{--barra:66px}
  .barra{grid-template-columns:auto 1fr auto;height:var(--barra)}
  .barra.rid{height:60px}
  /* il pannello del menu è figlio della barra: se resta soltanto spostato
     in su, il suo fondo bianco copre il marchio. Quindi da chiuso è anche
     invisibile — e i suoi link non prendono il fuoco.                    */
  .barra__menu{
    position:fixed;inset:66px 0 auto;background:var(--bianco);
    flex-direction:column;gap:0;padding:8px var(--mg) 26px;
    border-bottom:1px solid var(--filo);
    transform:translateY(-115%);visibility:hidden;
    transition:transform .55s var(--e),visibility 0s .55s;
    max-height:calc(100svh - 66px);overflow:auto;
  }
  .barra__menu.apre{transform:none;visibility:visible;
    transition:transform .55s var(--e),visibility 0s 0s}
  .barra__menu a{width:100%;padding:17px 0;border-bottom:1px solid var(--filo-t);font-size:13px}
  .barra__menu a::after{display:none}
  .barra__d{display:none}
  .apri{display:block;justify-self:end}
  .marchio{text-align:left}

  .prove{grid-template-columns:1fr;padding:0}
  .prove li{padding:20px var(--mg)}
  .prove li+li{border-left:0;border-top:1px solid var(--filo-t)}

  .passo{grid-template-columns:1fr;gap:6px}
  .passo__n{font-size:24px;margin-bottom:6px}

  .scelte li{grid-template-columns:82px 1fr;gap:18px;align-items:flex-start}
  .scelte .occhiello{margin-bottom:10px}

  .griglia{grid-template-columns:1fr 1fr}
  .giorno__ph{aspect-ratio:4/3}

  .cifre{grid-template-columns:1fr;gap:0}
  .cifre div{padding:20px 0}
  .cifre div+div{border-top:1px solid var(--filo-t)}

  .fisso{left:var(--mg);right:var(--mg);text-align:center}
}

/* chi ha chiesto meno movimento non ne riceve nessuno */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
}