/* ═══════════════════════════════════════════════════════════════════════
   atelievents — BOZZA 5 · "Il bianco"
   Ispirata all'impaginato di saratusset.it: pochissimo testo, moltissimo
   bianco, tutto centrato, le immagini a tutta larghezza senza cornice.
   Nessuna scheda, nessun riquadro, nessuna icona: è l'opposto delle
   altre quattro, e questo è il punto.

   Caratteri, ospitati qui, nessuna richiesta esterna:
     Cormorant Garamond — SIL Open Font License 1.1
     Lato               — SIL Open Font License 1.1
   Il segno distintivo è il maiuscoletto Cormorant con la spaziatura
   larghissima. Tutto il resto tace.
   ═══════════════════════════════════════════════════════════════════════ */

@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, non rosa */
  --avorio-2:#FBF8F3;
  --inchiostro:#1A1A18;
  --grigio:#6E6A64;
  --tenue:#9C968D;
  --filo:rgba(26,26,24,.14);
  --filo-t:rgba(26,26,24,.07);

  --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);
  --pv:clamp(86px,11vw,178px);   /* il respiro verticale è il progetto */
  --e:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bianco);color:var(--grigio);
  font-family:var(--sans);font-size:16px;font-weight:300;line-height:1.85;
  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(720px,100% - var(--mg)*2);margin-inline:auto}
section{padding:var(--pv) 0}

/* ── tipografia ─────────────────────────────────────────────────────────
   Una sola regola: i titoli sono Cormorant, maiuscoli, spaziati.
   La dimensione cambia, il resto mai.                                    */
h1,h2,h3,.occhiello,.marchio,.btn,.voce__d{
  font-family:var(--serif);text-transform:uppercase;font-weight:400;color:var(--inchiostro)}

h1{font-size:clamp(27px,4.4vw,54px);letter-spacing:.055em;line-height:1.34}
h2{font-size:clamp(21px,2.9vw,35px);letter-spacing:.075em;line-height:1.42}
h3{font-size:clamp(15px,1.5vw,19px);letter-spacing:.12em;line-height:1.5}
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}
.ta-c{text-align:center}
p{max-width:66ch}
/* il testo è centrato dal contenitore, ma il blocco <p> ha un max-width:
   senza margin auto resterebbe incollato a sinistra e sembrerebbe storto */
.ta-c p,.fine p,.piede p,.cit p,.stretto>p{margin-inline:auto}
p+p{margin-top:1.1em}
.picc{font-size:13.5px;letter-spacing:.02em;color:var(--tenue);line-height:1.75}

/* filetto sottile che separa i respiri */
.filetto{display:block;width:44px;height:1px;background:var(--inchiostro);
  opacity:.34;margin:30px auto}

/* ── pulsante: solo un rettangolo di filo, come nel riferimento ─────── */
.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 saratusset ──────────────────────── */
.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:82px;
  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(16px,2.4vw,38px);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}

.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;
}
.barra .btn{padding:12px 22px;font-size:10px;letter-spacing:.24em}

.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)}

/* ── apertura: video a tutta pagina, senza una parola sopra ─────────── */
.apertura{padding:0;margin-top:82px;position:relative;height:min(86vh,860px);overflow:hidden}
.apertura video,.apertura img{width:100%;height:100%;object-fit:cover}
.apertura__giu{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  display:grid;justify-items:center;gap:9px;color:var(--bianco);z-index:2;
  font-family:var(--serif);font-size:9.5px;letter-spacing:.36em;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.65),0 2px 22px rgba(0,0,0,.5);
}
/* una velatura appena accennata, solo in fondo, perché "Scorri" si legga
   anche quando sotto c'è l'acqua chiara */
.apertura::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:190px;z-index:1;
  background:linear-gradient(transparent,rgba(18,16,14,.28));pointer-events:none;
}
.apertura__giu i{display:block;width:1px;height:38px;background:currentColor;opacity:.75;
  animation:scendi 2.6s var(--e) infinite}
@keyframes scendi{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* ── fasce a tutta larghezza ────────────────────────────────────────── */
.fascia{padding:0;height:clamp(280px,46vw,620px);overflow:hidden;position:relative}
.fascia--alta{height:clamp(340px,58vw,760px)}   /* quando il soggetto è verticale */
.fascia img,.fascia video{width:100%;height:100%;object-fit:cover;object-position:center}
.fascia--bn img{filter:grayscale(1) contrast(1.04)}
/* i petali: i volti stanno sotto la metà, quindi tengo bassa l'inquadratura */
.fascia--petali img{object-position:center 62%}

/* ── file di immagini, bordo a bordo ────────────────────────────────── */
.tris{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0}
.tris figure{position:relative;aspect-ratio:3/4;overflow:hidden}
.tris img{transition:transform 1.5s var(--e)}
.tris figure:hover img{transform:scale(1.04)}
.tris figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;
  font-family:var(--serif);text-transform:uppercase;font-size:10px;letter-spacing:.26em;
  color:var(--bianco);text-align:center;
  background:linear-gradient(transparent,rgba(20,18,16,.55));
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--e),transform .5s var(--e);
}
.tris figure:hover figcaption{opacity:1;transform:none}

.striscia{display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding:0}
.striscia figure{aspect-ratio:1/1;overflow:hidden}
.striscia img{transition:transform 1.4s var(--e),filter .6s}
.striscia figure:hover img{transform:scale(1.05)}

/* ── i quattro passi: quattro righe, nient'altro ────────────────────── */
.passi{display:grid;gap:0;margin-top:56px;border-top:1px solid var(--filo)}
.passo{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,60px);
  align-items:baseline;padding:30px 0;border-bottom:1px solid var(--filo);
  transition:padding-left .6s var(--e);
}
.passo:hover{padding-left:14px}
.passo__n{
  font-family:var(--serif);font-size:12px;letter-spacing:.22em;color:var(--tenue);
  min-width:2.2em;
}
.passo h3{margin-bottom:8px}
.passo p{font-size:15px;max-width:60ch}

/* ── l'elenco delle scelte: solo righe di titolo ────────────────────── */
.scelte{margin-top:52px;border-top:1px solid var(--filo)}
.scelte li{border-bottom:1px solid var(--filo)}
.scelte a,.scelte span{
  display:block;padding:26px 0;font-family:var(--serif);text-transform:uppercase;
  font-size:clamp(14px,1.7vw,20px);letter-spacing:.11em;color:var(--inchiostro);
  text-align:center;transition:letter-spacing .7s var(--e),opacity .4s;
}
.scelte li:hover a,.scelte li:hover span{letter-spacing:.2em}

/* ── la citazione ───────────────────────────────────────────────────── */
.cit{padding:var(--pv) 0}
.cit h2{font-size:clamp(22px,3.5vw,44px);letter-spacing:.05em;line-height:1.4}
.cit .picc{margin-top:26px;letter-spacing:.3em;font-size:10.5px;text-transform:uppercase}

/* ── i numeri di Francesca ──────────────────────────────────────────── */
.cifre{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);
  margin-top:52px;padding-top:40px;border-top:1px solid var(--filo)}
.cifre div{text-align:center}
/* Le cifre NON vanno in Cormorant: la sua "1" è uno stelo con due grazie,
   identico a una I, e "10" finiva per leggersi "IO". Lato, leggero e largo. */
.cifre b{display:block;font-family:var(--sans);font-weight:300;
  font-size:clamp(28px,4vw,48px);color:var(--inchiostro);line-height:1;letter-spacing:.06em}
.cifre span{display:block;margin-top:12px;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tenue)}

.ritratto{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,80px);
  align-items:center}
.ritratto figure{aspect-ratio:3/4;overflow:hidden}

/* ── le domande: un accordion senza scatole ─────────────────────────── */
.dom{margin-top:52px;border-top:1px solid var(--filo)}
.dom details{border-bottom:1px solid var(--filo)}
.dom summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--serif);text-transform:uppercase;font-size:clamp(12.5px,1.4vw,15px);
  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 26px 0;font-size:15px;max-width:70ch}

/* ── chiusura e piede, su avorio ────────────────────────────────────── */
.fine{background:var(--avorio);text-align:center}
.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(--tenue);line-height:2.2}

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

/* ── il pulsante che resta ──────────────────────────────────────────── */
.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:900px){
  .ritratto{grid-template-columns:1fr}
  .tris{grid-template-columns:1fr 1fr}
  .tris figure:nth-child(3){grid-column:1/-1;aspect-ratio:16/10}
  .striscia{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .barra{grid-template-columns:auto 1fr auto;height:66px}
  .barra.rid{height:60px}
  .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%);transition:transform .55s var(--e);
    max-height:calc(100svh - 66px);overflow:auto;
  }
  .barra__menu.apre{transform:none}
  .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 .btn{display:none}
  .barra__d{display:none}
  .apri{display:block;justify-self:end}
  .marchio{text-align:left}
  .apertura{margin-top:66px;height:min(78vh,680px)}
  .tris{grid-template-columns:1fr}
  .tris figure,.tris figure:nth-child(3){aspect-ratio:4/5}
  .tris figcaption{opacity:1;transform:none}
  .striscia{grid-template-columns:1fr 1fr}
  .cifre{grid-template-columns:1fr;gap:26px}
  .passo{grid-template-columns:1fr;gap:6px}
  .fisso{left:var(--mg);right:var(--mg);text-align:center}
}

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