/* ═══════════════════════════════════════════════════════════════════════
   atelievents — BOZZA 7 · «la più piena»
   Stesso mondo della bozza 5 — bianco, Cormorant maiuscolo spaziato, Lato,
   avorio solo in chiusura — ma con il testo per intero e un ritmo più fitto:
   apertura parlante, sezioni alternate, un set di icone appena percepibili.

   Le differenze di impianto rispetto alla 5, tutte per ragioni di lettura:
     · il titolo e il pulsante stanno sopra la piega, su fondo bianco;
     · i paragrafi hanno un corpo più grande, una misura più corta e un
       colore più scuro del grigio (il grigio resta per le note);
     · ogni fotografia ha accanto il testo che spiega perché è lì.

   Caratteri ospitati qui, nessuna richiesta esterna:
     Cormorant Garamond — SIL Open Font License 1.1
     Lato               — SIL Open Font License 1.1
   Per cambiare carattere basta toccare --serif e --sans: il nome non
   compare da nessun'altra parte in questo foglio.
   ═══════════════════════════════════════════════════════════════════════ */

@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{
  --bianco:#FFFFFF;
  --avorio:#F7F2EA;        /* fasce di chiusura e piede — non è rosa */
  --avorio-2:#FBF8F3;      /* appena percepibile: serve solo a scandire il ritmo */
  --inchiostro:#1A1A18;    /* titoli e testo forte */
  --grigio:#6E6A64;        /* note, didascalie, etichette */
  --tenue:#9C968D;         /* etichette secondarie e icone */
  --filo:rgba(26,26,24,.14);
  --filo-t:rgba(26,26,24,.07);

  /* Il grigio va bene per le note, non per i paragrafi lunghi: questa è la
     stessa tinta dell'inchiostro, solo schiarita, e tiene il contrasto alto
     anche a corpo 17. Non sostituisce nessun token, li affianca. */
  --testo:#3A3833;

  --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,5vw,72px);      /* margine laterale */
  --pv:clamp(72px,8.5vw,132px);   /* respiro verticale: più fitto della 5 */
  --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) + 16px)}
body{
  background:var(--bianco);color:var(--testo);
  font-family:var(--sans);font-size:17px;font-weight:300;line-height:1.78;
  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}

.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}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── tipografia ─────────────────────────────────────────────────────────
   Regola unica ereditata dalla 5: i titoli sono serif, maiuscoli, spaziati.
   Cambia solo la misura.                                                 */
h1,h2,h3,.occhiello,.marchio,.btn,.slot__eti,.fisso{
  font-family:var(--serif);text-transform:uppercase;font-weight:400;color:var(--inchiostro)}

h1{font-size:clamp(29px,4vw,50px);letter-spacing:.05em;line-height:1.3}
h2{font-size:clamp(21px,2.7vw,34px);letter-spacing:.075em;line-height:1.4}
.h2--grande{font-size:clamp(24px,3.4vw,42px);letter-spacing:.06em}
h3{font-size:clamp(15px,1.5vw,18px);letter-spacing:.13em;line-height:1.5}
h1 em,h2 em,h3 em{font-style:italic;text-transform:none;letter-spacing:.01em}

.occhiello{
  display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.42em;color:var(--tenue);font-weight:500;line-height:1.6;
  margin-bottom:20px;
}
.ta-c .occhiello,.stretto.ta-c .occhiello{justify-content:center}

p{max-width:60ch}                 /* misura corta: si legge meglio */
/* sotto un titolo serve aria: senza, il paragrafo sembra una didascalia */
h1+p,h2+p{margin-top:26px}
h3+p{margin-top:14px}
p+p{margin-top:1.05em}
.ta-c p,.stretto>p,.fine p,.piede p{margin-inline:auto}

.guida{font-size:clamp(17px,1.5vw,20px);color:var(--grigio);letter-spacing:.005em}
.forte{color:var(--inchiostro)}   /* le righe che chiudono un ragionamento */
.picc{font-size:13px;letter-spacing:.02em;color:var(--tenue);line-height:1.7;max-width:70ch}

.filetto{display:block;width:42px;height:1px;background:var(--inchiostro);
  opacity:.32;margin:28px auto}

/* ── le icone ───────────────────────────────────────────────────────────
   Griglia 24, tratto 1, terminali tondi, nessun riempimento.
   Sono volutamente sotto la soglia dell'attenzione: guidano l'occhio in
   basso lungo la pagina, non decorano niente.                            */
.ico{
  width:22px;height:22px;flex:none;display:block;
  fill:none;stroke:var(--tenue);stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;opacity:.62;
}
.ico--riga{width:15px;height:15px;opacity:.5}
.ico--passo{width:24px;height:24px;opacity:.5}

/* ── pulsante ───────────────────────────────────────────────────────── */
.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 ──────────────────────────────────────────────────────────── */
.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:64px;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,27px);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: a sinistra quello che si deve capire in tre secondi,
   a destra il video. Nessun testo sopra il video, così resta leggibile
   sempre e il fondo resta bianco.                                        */
.apre{padding:calc(var(--barra) + clamp(34px,4.5vw,64px)) 0 0}
.apre__griglia{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(30px,4.5vw,72px);align-items:center;
}
.apre__testo p:last-child{margin-top:36px}
.apre__testo .guida{margin-top:24px}
.apre h1{margin-top:4px}
.apre__video{aspect-ratio:4/3;overflow:hidden;background:var(--avorio-2)}

/* le tre micro-prove: una riga di fatti, non di aggettivi */
.prove{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);
  margin-top:clamp(44px,5vw,72px);padding:clamp(26px,3vw,34px) 0 0;
  border-top:1px solid var(--filo);
}
.prove li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:14px;align-items:center}
.prove .ico{grid-row:1/3}
.prove b{
  font-family:var(--serif);text-transform:uppercase;font-weight:400;
  font-size:13px;letter-spacing:.15em;color:var(--inchiostro);line-height:1.5;
}
.prove span{font-size:13px;color:var(--grigio);line-height:1.5;letter-spacing:.01em}

/* ── blocchi alternati: una fotografia, il testo che la spiega ───────── */
.duo{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4.5vw,76px);align-items:center;
}
.duo--largo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.duo--compatto{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.duo--ritratto{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
/* l'immagine passa a destra: le sezioni si alternano e l'occhio zigzaga */
.duo--rovescio .duo__img{order:2}
.duo__img{overflow:hidden;background:var(--avorio-2)}
.duo__img img{transition:transform 1.6s var(--e)}
.duo__img:hover img{transform:scale(1.03)}
/* i formati: verticale dove la foto è verticale, orizzontale altrove */
.duo__img{aspect-ratio:4/3}
.duo--compatto .duo__img{aspect-ratio:4/3}
#tavola .duo__img,#francesca .duo__img{aspect-ratio:3/4}
.duo__testo>*+*{margin-top:0}
.duo--largo .duo__img{aspect-ratio:4/3}

/* io / tu — due colonne, sempre in quest'ordine */
.iotu{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,38px);
  margin-top:34px;padding-top:28px;border-top:1px solid var(--filo)}
.iotu b{
  display:block;font-family:var(--serif);text-transform:uppercase;font-weight:400;
  font-size:11px;letter-spacing:.42em;color:var(--tenue);margin-bottom:9px;
}
.iotu span{display:block;font-size:15.5px;color:var(--inchiostro);line-height:1.6}

/* ── fasce di fondo chiarissimo, solo per scandire ──────────────────── */
.chiara{background:var(--avorio-2)}

/* ── §3 i quattro passi ─────────────────────────────────────────────────
   Quattro colonne su schermo largo, quattro righe su telefono.
   È la sezione a cui il cliente tiene di più: ha la griglia più larga,
   il filetto in alto e nessun'altra cosa intorno.                        */
.passi{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:clamp(44px,5vw,68px);border-top:1px solid var(--filo);
}
.passo{
  padding:clamp(26px,2.6vw,34px) clamp(16px,2vw,28px) clamp(30px,3vw,40px);
  border-left:1px solid var(--filo-t);position:relative;
  transition:background .6s var(--e);
}
.passo:first-child{border-left:0}
.passo:hover{background:var(--bianco)}
/* la cifra in Lato: la "1" del serif è uno stelo con due grazie e si
   confonde con una I — qui i numeri devono restare numeri */
.passo__n{
  display:block;font-family:var(--sans);font-weight:300;font-size:13px;
  letter-spacing:.2em;color:var(--tenue);
}
.passo .ico{margin:20px 0 22px}
.passo h3{margin-bottom:12px}
.passo p{font-size:15.5px;line-height:1.72;color:var(--testo);max-width:34ch}

/* ── fascia video: l'unica cosa a tutta larghezza, perché è a 1080p ──── */
.fascia{padding:0;height:clamp(260px,40vw,540px);overflow:hidden;position:relative;
  background:var(--avorio-2)}
.fascia video{width:100%;height:100%;object-fit:cover}

/* ── §9 il giorno ───────────────────────────────────────────────────── */
.giorno .chiusa{
  margin-top:34px;font-size:clamp(15px,1.8vw,21px);letter-spacing:.09em;
  line-height:1.62;text-transform:none;font-style:italic;
}
.giorno__img{
  width:min(1000px,100% - var(--mg)*2);margin:clamp(44px,5vw,72px) auto 0;
  aspect-ratio:1434/1025;overflow:hidden;
}
/* la fotografia non supera mai la sua misura reale: 1434 px di larghezza */

/* ── §10 i progetti: una fascia sola, immagini piccole ──────────────── */
.progetti .striscia{
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(6px,.8vw,12px);
  margin-top:clamp(38px,4vw,56px);
}
.striscia figure{aspect-ratio:3/4;overflow:hidden;background:var(--avorio-2)}
.striscia img{filter:saturate(.96);transition:transform 1.5s var(--e)}
.striscia figure:hover img{transform:scale(1.05)}
.luoghi{
  margin:26px auto 0;text-align:center;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tenue);line-height:2;max-width:64ch;
}

/* ── §11 le coppie: tre riquadri che aspettano un testo ─────────────────
   Non sono buchi: sono contenitori finiti, con le virgolette al posto
   giusto e tre righe sospese che dicono quanto testo ci starà.           */
.coppie{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);
  margin-top:clamp(38px,4vw,56px)}
.slot{
  border:1px solid var(--filo);background:var(--bianco);
  padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,30px) clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;min-height:230px;
}
.slot__v{
  font-family:var(--serif);font-size:52px;line-height:.7;color:var(--tenue);
  opacity:.5;display:block;margin-bottom:22px;
}
.slot__righe{display:block;flex:1}
.slot__righe i{display:block;height:1px;background:var(--filo);margin-bottom:20px}
.slot__righe i:nth-child(2){width:92%}
.slot__righe i:nth-child(3){width:64%}
.slot__eti{
  font-size:9.5px;letter-spacing:.34em;color:var(--tenue);
  padding-top:18px;border-top:1px solid var(--filo-t);
}

/* ── §12 i numeri di Francesca ──────────────────────────────────────── */
.firma{margin-top:18px}
.cifre{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,30px);
  margin-top:34px;padding-top:28px;border-top:1px solid var(--filo)}
/* di nuovo: le cifre in Lato, mai nel serif */
.cifre b{display:block;font-family:var(--sans);font-weight:300;
  font-size:clamp(26px,3.2vw,40px);color:var(--inchiostro);line-height:1;letter-spacing:.05em}
.cifre span{display:block;margin-top:10px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tenue);line-height:1.7}

/* §13 dove: chiude la sezione di Francesca, separata da un filetto */
.dove{margin-top:var(--pv);padding-top:clamp(38px,4vw,56px);border-top:1px solid var(--filo)}

/* ── §14 le domande ─────────────────────────────────────────────────────
   La prima sta aperta e in evidenza: è l'obiezione vera, e va sciolta
   prima che venga posta. Le altre otto si aprono a richiesta.            */
.prima{
  margin-top:clamp(38px,4vw,54px);padding:clamp(26px,3vw,36px);
  background:var(--bianco);border:1px solid var(--filo);
}
.prima h3{margin-bottom:14px;letter-spacing:.1em}
.prima p{font-size:16px;max-width:62ch}

.dom{margin-top:30px;border-top:1px solid var(--filo)}
.dom details{border-bottom:1px solid var(--filo)}
.dom summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--serif);text-transform:uppercase;font-size:clamp(12.5px,1.35vw,14.5px);
  letter-spacing:.1em;color:var(--inchiostro);line-height:1.6;
}
.dom summary::-webkit-details-marker{display:none}
.dom summary::after,.dom summary::before{
  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 44px 24px 0;font-size:15.5px;max-width:64ch}

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

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

/* ── il pulsante che resta ──────────────────────────────────────────── */
.fisso{
  position:fixed;right:var(--mg);bottom:24px;z-index:190;
  padding:15px 26px;background:var(--inchiostro);color:var(--bianco);
  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 medi ───────────────────────────────────────────────────── */
@media (max-width:1000px){
  .passi{grid-template-columns:1fr 1fr}
  .passo{border-top:1px solid var(--filo-t)}
  .passo:nth-child(-n+2){border-top:0}
  .passo:nth-child(odd){border-left:0}
  .progetti .striscia{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
  .duo,.duo--largo,.duo--compatto,.duo--ritratto{grid-template-columns:1fr;gap:30px}
  .duo--rovescio .duo__img{order:0}
  .duo__img,.duo--compatto .duo__img,.duo--largo .duo__img{aspect-ratio:16/11}
  #tavola .duo__img,#francesca .duo__img{aspect-ratio:4/5}
  .apre__griglia{grid-template-columns:1fr;gap:34px}
  .apre__video{aspect-ratio:5/4}
  .coppie{grid-template-columns:1fr}
  .slot{min-height:0}
  .slot__righe i:last-child{margin-bottom:8px}
}

/* ── telefono ───────────────────────────────────────────────────────── */
@media (max-width:720px){
  :root{--barra:64px}
  body{font-size:16.5px}
  .barra{grid-template-columns:auto 1fr auto}
  .barra.rid{height:58px}
  .barra__menu{
    position:fixed;inset:var(--barra) 0 auto;background:var(--bianco);
    flex-direction:column;gap:0;padding:8px var(--mg) 24px;
    border-bottom:1px solid var(--filo);
    transform:translateY(-120%);transition:transform .55s var(--e);
    max-height:calc(100svh - var(--barra));overflow:auto;
  }
  .barra__menu.apre{transform:none}
  .barra__menu a{width:100%;padding:16px 0;border-bottom:1px solid var(--filo-t);font-size:13px}
  .barra__menu a::after{display:none}
  .barra .btn,.barra__d{display:none}
  .apri{display:block;justify-self:end}
  .marchio{text-align:left}

  .apre{padding-top:calc(var(--barra) + 28px)}
  .prove{grid-template-columns:1fr;gap:20px}
  .passi{grid-template-columns:1fr}
  .passo{border-left:0;border-top:1px solid var(--filo-t);padding:24px 0 28px}
  .passo:first-child{border-top:0}
  .passo p{max-width:none}
  .passo .ico{margin:14px 0 16px}
  .iotu{grid-template-columns:1fr;gap:20px}
  .cifre{grid-template-columns:1fr;gap:22px;text-align:left}
  .progetti .striscia{grid-template-columns:1fr 1fr}
  .giorno__img{aspect-ratio:4/3}
  .dom summary{padding-right:36px}
  .dom details p{padding-right:0}
  .fisso{left:var(--mg);right:var(--mg);text-align:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}