/* ============================================================
   annamilanese.it — foglio di stile
   Identità «Notturno» (sistema di identità v2, 25/09/2026):
   il buio attorno, la luce sul volto. Un solo punto Tuorlo per schermata.
   Token presi da Brand Identity/04_Palette_Tipografia/anna-milanese-token.css
   ============================================================ */

@font-face{font-family:"Instrument Serif";src:url("font/instrument-serif.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("font/instrument-serif-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("font/hanken-grotesk.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --notte:#131A33;
  --margherita:#F7F3EA;
  --oceano:#1D4766;
  --nuvola:#E6C995;
  --tuorlo:#F2B33D;
  --inchiostro:#3C4462;
  --sabbia:#E4DDD0;
  --abisso:#0C1124;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  --display:clamp(2.75rem,6vw,5.5rem);
  --h2:clamp(2.125rem,4.1vw,3.25rem);
  --h3:clamp(1.5rem,2.4vw,1.875rem);
  --citazione:clamp(1.75rem,3.6vw,3rem);
  --corpo:1.0625rem;

  --sez:clamp(84px,11vw,152px);      /* respiro verticale, uguale per tutte le sezioni */
  --gronda:clamp(24px,4vw,48px);
  --max:1200px;
  --testata:76px;
  --raggio:2px;
  --raggio-foto:6px; /* solo le foto interne: angoli appena smussati, in linea col punto (05/10) */

  --morbida:cubic-bezier(.25,.46,.45,.94);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--testata)}
body{
  margin:0;background:var(--notte);color:var(--margherita);
  font-family:var(--sans);font-size:var(--corpo);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
h1,h2,h3{margin:0;font-weight:400}
figure{margin:0}
em{font-style:italic}

.box{width:100%;max-width:calc(var(--max) + var(--gronda)*2);margin-inline:auto;padding-inline:var(--gronda)}

.salta{position:absolute;left:12px;top:-60px;z-index:200;background:var(--margherita);color:var(--notte);padding:10px 16px;border-radius:var(--raggio);text-decoration:none;font-weight:600}
.salta:focus{top:12px}

:focus-visible{outline:2px solid var(--tuorlo);outline-offset:3px;border-radius:var(--raggio)}
.chiara :focus-visible{outline-color:var(--oceano)}

/* ---------- tipografia ---------- */
.etichetta{font:600 .75rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.display{font:400 var(--display)/.98 var(--serif);letter-spacing:-.012em;margin:0}
.titolo{font:400 var(--h2)/1.04 var(--serif);letter-spacing:-.008em;max-width:18ch}
.titolo--largo{max-width:24ch}
.attacco{font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.55;max-width:56ch}
.prosa{max-width:58ch}
.prosa p{max-width:58ch}

/* ---------- bottoni ---------- */
.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.bottone{
  display:inline-flex;align-items:center;gap:12px;
  font:600 1rem/1 var(--sans);text-decoration:none;white-space:nowrap;
  padding:17px 26px 17px 22px;border-radius:var(--raggio);
  background:var(--margherita);color:var(--notte);
  transition:background-color .35s var(--morbida),color .35s var(--morbida);
}
.bottone::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tuorlo);flex:none;transition:transform .45s var(--morbida)}
.bottone:hover{background:#fff}
.bottone:hover::before{transform:scale(1.35)}
.chiara .bottone{background:var(--notte);color:var(--margherita)}
.chiara .bottone:hover{background:var(--abisso)}
.rimando{font:500 1rem/1.3 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color .3s}
.rimando:hover{text-decoration-color:currentColor}

/* ---------- testata ---------- */
.testata{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--testata);
  transition:background-color .6s var(--morbida),backdrop-filter .6s;
}
.testata.piena{background:rgba(19,26,51,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.testata__riga{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:nowrap}
.testata__logo{flex:none;display:block}
.testata__logo img{height:40px;width:auto}
.menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);flex-wrap:nowrap}
.menu a{font:500 clamp(.875rem,1vw,.9375rem)/1 var(--sans);text-decoration:none;white-space:nowrap;color:var(--margherita);opacity:.82;transition:opacity .3s}
.menu a:hover,.menu a[aria-current]{opacity:1}
.menu .menu__lista{opacity:1;padding:12px 18px;border:1px solid rgba(247,243,234,.4);border-radius:var(--raggio);transition:background-color .35s,border-color .35s,color .35s}
.menu .menu__lista:hover{background:var(--margherita);color:var(--notte);border-color:var(--margherita)}
/* l'orizzonte: il filo sotto la testata, con la luce che avanza mentre si legge */
.orizzonte{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(247,243,234,.2)}
.orizzonte__luce{
  position:absolute;bottom:-4px;left:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:var(--tuorlo);box-shadow:0 0 18px 2px rgba(242,179,61,.35);
  transform:translate3d(calc(var(--gronda) + var(--avanzamento,0) * (100vw - var(--gronda) * 2)),0,0);
  will-change:transform;
}
.apri-menu{display:none}

/* ---------- apertura ---------- */
.apertura{position:relative;min-height:100svh;display:grid;align-items:end;background:var(--notte);overflow:hidden;isolation:isolate}
.apertura__foto{position:absolute;inset:0 0 0 36%;z-index:-2;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.apertura__foto img{width:100%;height:108%;object-fit:cover;object-position:60% 16%;will-change:transform}
.apertura::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;z-index:-1;background:linear-gradient(180deg,transparent,rgba(19,26,51,.92))}
.apertura__testo{padding-top:calc(var(--testata) + 64px);padding-bottom:clamp(64px,9vh,112px)}
.apertura h1{color:var(--nuvola);margin-bottom:28px}
.apertura .display{font-size:clamp(2.625rem,5.2vw,4.75rem)}
.apertura .display span,.apertura .display em{display:block}
.apertura__sotto strong{font-weight:600;color:var(--margherita)}
.apertura__invito{max-width:46ch;margin:-18px 0 32px;font-size:clamp(.9375rem,1.1vw,1.0625rem);color:var(--nuvola)}
.apertura__sotto{max-width:44ch;margin:32px 0 40px;font-size:clamp(1.0625rem,1.35vw,1.1875rem);color:rgba(247,243,234,.86)}

/* ---------- sezioni ---------- */
.sez{padding-block:var(--sez);position:relative}
.notte{background:var(--notte);color:var(--margherita)}
.abisso{background:var(--abisso);color:var(--margherita)}
.chiara{background:var(--margherita);color:var(--notte)}
.chiara .prosa,.chiara .attacco{color:var(--inchiostro)}
.notte .prosa,.notte .attacco{color:rgba(247,243,234,.84)}
.sez .etichetta{display:block;margin-bottom:22px;color:var(--oceano)}
.notte .etichetta,.abisso .etichetta,.campo .etichetta{color:var(--nuvola)}

.due{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.due__testo{grid-column:span 6}
.due__foto{grid-column:span 5}
.due--foto-prima .due__foto{grid-column:1 / span 5}
.due--foto-prima .due__testo{grid-column:7 / span 6}
.due--foto-dopo .due__testo{grid-column:1 / span 6}
.due--foto-dopo .due__foto{grid-column:8 / span 5}
.due .titolo{margin-bottom:32px}

/* l'orizzonte (05/10, rev. 10): la foto resta pulita, senza passe-partout (era il segno del sito di
   David). Sotto ogni foto corre il filo del brand, lo stesso della testata, con il suo punto giallo.
   Sta dentro la larghezza della foto: niente sbordi nemmeno vicino ai margini. */
.foto{position:relative;margin-bottom:22px}
.foto picture{display:block;width:100%;height:100%;overflow:hidden;border-radius:var(--raggio-foto);background:var(--abisso)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto::before{content:"";position:absolute;left:0;right:0;bottom:-14px;height:1px;
  background:linear-gradient(90deg,rgba(19,26,51,.26),rgba(19,26,51,.26) 60%,rgba(19,26,51,0))}
.foto::after{content:"";position:absolute;left:var(--punto,32%);bottom:-17px;width:7px;height:7px;border-radius:50%;
  background:var(--tuorlo);box-shadow:0 0 0 4px rgba(242,179,61,.18)}
.notte .foto::before{background:linear-gradient(90deg,rgba(247,243,234,.3),rgba(247,243,234,.3) 60%,rgba(247,243,234,0))}
/* le due foto affiancate in aula condividono un solo orizzonte: il punto sta sulla seconda */
.aula__foto .foto:first-child::after{content:none}
/* il punto non sta mai nello stesso posto: una posizione diversa per ogni foto (Antonello, 05/10) */
#chi-sono .foto{--punto:71%}
.aula__foto .foto:last-child{--punto:18%}
#temi .foto{--punto:44%}
#parole .foto{--punto:86%}
#domande .foto{--punto:9%}
.foto--ritratto{aspect-ratio:4/5}
.foto--largo{aspect-ratio:6/5}
.foto--tema{aspect-ratio:4/3}
.foto--tema-verticale{aspect-ratio:1200/1380}

/* ---------- la frase ---------- */
.frase{text-align:center}
.frase blockquote{margin:0 auto;max-width:21ch;font:400 var(--citazione)/1.12 var(--serif);letter-spacing:-.008em}
.frase blockquote span{display:block}
.frase blockquote span + span{font-style:italic;color:var(--nuvola);margin-top:.18em}
.frase figcaption{margin-top:40px;color:rgba(247,243,234,.62);font-size:.9375rem}
.segno{width:132px;height:44px;margin:36px auto 0}

/* ---------- chi sono ---------- */
.scheda{margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--sabbia)}
.scheda div{padding:16px 0;border-bottom:1px solid var(--sabbia);height:100%}
.scheda dt{font:600 .75rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--oceano);margin-bottom:6px}
.scheda dd{margin:0;color:var(--notte);font-size:1rem;line-height:1.45}

/* ---------- fasce ---------- */
.fascia{position:relative;overflow:hidden;background:var(--abisso);height:clamp(300px,46vw,620px)}
.fascia img{position:absolute;inset:-7% 0;width:100%;height:114%;object-fit:cover;object-position:50% 40%;will-change:transform}

.filmato{position:relative;overflow:hidden;background:var(--abisso);min-height:clamp(420px,56vw,760px);display:grid;align-items:end;isolation:isolate}
.filmato video,.filmato > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.filmato::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,17,36,.15) 30%,rgba(12,17,36,.82) 100%)}
.filmato__testo{padding-block:clamp(40px,6vw,80px)}
.filmato .titolo{margin-bottom:18px}
.filmato p{max-width:46ch;color:rgba(247,243,234,.86)}

/* ---------- in aula ---------- */
.aula__foto{grid-column:7 / span 6;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.aula__foto .foto{width:100%;min-width:0;height:auto}
.aula .due{align-items:center}
.aula .due__testo{grid-column:1 / span 5}
.domande-aula{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--sabbia)} /* «In aula» chiara dal 19/10 (Antonello: troppe sezioni scure di fila) */
.domande-aula li{font:italic 400 var(--h3)/1.2 var(--serif);color:var(--notte);padding:18px 0;border-bottom:1px solid var(--sabbia)}

/* ---------- nastro ---------- */
.nastro{overflow:hidden;background:var(--margherita);color:var(--notte);padding-top:clamp(40px,5vw,64px);user-select:none} /* apre «I temi»: le parole sono i suoi temi (19/10, scelta di Antonello) */
.nastro__pista{display:flex;width:max-content;animation:nastro 70s linear infinite}
.nastro__giro{display:flex;flex:none;align-items:center;margin:0;padding:0;list-style:none}
.nastro li{display:flex;align-items:center;font:italic 400 clamp(2.25rem,5vw,4.25rem)/1.1 var(--serif);white-space:nowrap;color:var(--oceano)}
.nastro li::after{content:"";width:.16em;height:.16em;border-radius:50%;background:var(--sabbia);margin:0 .55em;box-shadow:0 0 0 1px var(--nuvola)}
@keyframes nastro{to{transform:translate3d(-50%,0,0)}}

/* ---------- i temi ---------- */
.temi__testa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-bottom:clamp(48px,6vw,80px)}
.temi__testa > *{grid-column:1 / span 8}
.temi__testa .titolo{margin-bottom:24px}
.temi__corpo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.temi__foto{grid-column:1 / span 5;position:sticky;top:calc(var(--testata) + 32px)}
.temi__elenco{grid-column:7 / span 6;margin:0;padding:0;border-top:1px solid var(--sabbia)}
.tema{padding:30px 0 32px;border-bottom:1px solid var(--sabbia)}
.tema dt{font:400 clamp(1.75rem,2.8vw,2.375rem)/1.08 var(--serif);color:var(--notte);margin-bottom:12px}
.tema dd{margin:0;color:var(--inchiostro);max-width:52ch}

/* ---------- le cinque A ---------- */
.cinque-a__elenco{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px;margin:0;border-top:1px solid rgba(247,243,234,.18)}
.cinque-a__voce{padding:30px 0 8px}
.cinque-a__voce dt{font:italic 400 clamp(1.75rem,2.6vw,2.375rem)/1.08 var(--serif);color:var(--margherita);margin-bottom:14px}
.cinque-a__voce dt::first-letter{color:var(--tuorlo)}
.cinque-a__voce dd{margin:0;color:rgba(247,243,234,.84)}
@media (max-width:1200px){
  .cinque-a__elenco{grid-template-columns:1fr}
  .cinque-a__voce{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid rgba(247,243,234,.18)}
  .cinque-a__voce dt{margin:0}
}
@media (max-width:700px){
  .cinque-a__voce{grid-template-columns:1fr;padding:22px 0}
  .cinque-a__voce dt{margin-bottom:10px}
}

/* ---------- grassetti nel testo corrente ---------- */
.prosa strong,.attacco strong,.tema dd strong,.domanda__risposta strong{font-weight:600;color:inherit}
.chiara .prosa strong,.chiara .attacco strong,.tema dd strong{color:var(--notte)}

/* ---------- le parole: il telefono al posto della foto (06/10) ---------- */
.parole__telefono{grid-column:8 / span 5;justify-self:center;display:block;width:min(300px,100%);
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));transition:transform .5s var(--morbida)}
.parole__telefono img{width:100%;height:auto}
.parole__telefono:hover{transform:translateY(-6px)}


/* ---------- contatti ---------- */
.contatti .due__testo{grid-column:1 / span 5}
.contatti__social{list-style:none;margin:28px 0 0;padding:0;display:flex;gap:24px}
.contatti__social a{color:var(--notte);text-underline-offset:4px}
.modulo{grid-column:7 / span 6;display:grid;gap:18px}
.modulo__campo{display:grid;gap:8px}
.modulo label{font:600 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro)}
.modulo input[type=text],.modulo input[type=email],.modulo textarea{width:100%;font:400 1rem/1.5 var(--sans);color:var(--notte);
  background:#fff;border:1px solid var(--sabbia);border-radius:var(--raggio);padding:13px 14px}
.modulo textarea{resize:vertical;min-height:140px}
.modulo input:focus,.modulo textarea:focus{outline:2px solid var(--tuorlo);outline-offset:2px}
.modulo__esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.modulo .modulo__privacy{display:flex;gap:10px;align-items:flex-start;font:400 .9375rem/1.45 var(--sans);letter-spacing:0;text-transform:none;color:var(--inchiostro)}
.modulo__privacy input{margin-top:3px;accent-color:var(--tuorlo)}
.modulo__privacy a{color:var(--notte)}
.modulo .bottone{justify-self:start}
.modulo__esito{margin:0;min-height:1.5em;color:var(--notte)}
.modulo__esito.errore{color:#A6402A}

/* ---------- pagina privacy ---------- */
.legale{padding-top:calc(var(--testata) + clamp(56px,8vw,96px))}
.legale__corpo{max-width:720px}
.legale h1{margin:14px 0 8px}
.legale__agg{color:var(--nebbia,#5B6478);font-size:.9375rem;margin:0 0 40px}
.legale h2{font:400 clamp(1.5rem,2.4vw,2rem)/1.15 var(--serif);margin:48px 0 14px;color:var(--notte)}
.legale h3{font:600 1rem/1.4 var(--sans);margin:28px 0 8px;color:var(--notte)}
.legale p,.legale li{color:var(--inchiostro);max-width:66ch}
.legale ul{padding-left:20px;margin:0 0 16px}
.legale li{margin-bottom:8px}
.legale a{color:var(--notte)}
.legale__torna{margin-top:56px}

.piede__firma a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(247,243,234,.25);transition:color .3s,border-color .3s}
.piede__firma a:hover{color:var(--tuorlo);border-color:var(--tuorlo)}

/* ---------- le parole ---------- */
.parole .due__foto{grid-column:8 / span 5}
.parole .due__testo{grid-column:1 / span 6}
.brano{margin:0 0 30px;padding:0;font:400 clamp(1.5rem,2.5vw,2.125rem)/1.2 var(--serif);color:var(--margherita)}
.brano + .brano{font-style:italic;color:var(--nuvola)}
.parole .prosa{margin:38px 0 30px}

/* ---------- domande ---------- */
.domande__corpo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.domande__testa{grid-column:1 / span 4}
.domande__foto{margin:40px 0 0}
.domande__elenco{grid-column:6 / span 7;border-top:1px solid var(--sabbia)}
.domanda{border-bottom:1px solid var(--sabbia)}
.domanda summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px 0;font:400 clamp(1.3125rem,2vw,1.625rem)/1.2 var(--serif);color:var(--notte)}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary::after{content:"";flex:none;width:11px;height:11px;border-right:1.5px solid var(--oceano);border-bottom:1.5px solid var(--oceano);transform:translateY(-3px) rotate(45deg);transition:transform .5s var(--morbida)}
.domanda[open] summary::after{transform:translateY(3px) rotate(225deg)}
.domanda__risposta{padding:0 0 28px;color:var(--inchiostro);max-width:60ch}

/* ---------- lista d'attesa ---------- */
.campo{background:linear-gradient(180deg,var(--notte) 0%,#182549 55%,var(--oceano) 130%);color:var(--margherita);overflow:hidden;isolation:isolate}
.campo__filigrana{position:absolute;right:-6%;top:50%;width:min(62vw,820px);transform:translateY(-50%);opacity:.06;z-index:-1;pointer-events:none}
.campo .display{font-size:clamp(2.5rem,5.4vw,4.75rem);max-width:17ch;margin-bottom:30px}
.campo .display span{display:block}
.campo .display em{display:block;color:var(--nuvola)}
.campo .attacco{margin-bottom:40px;max-width:42ch}
.campo__nota{margin-top:26px;font-size:.9375rem;color:rgba(247,243,234,.62);max-width:48ch}

/* ---------- piede ---------- */
.piede{background:var(--abisso);color:rgba(247,243,234,.74);padding-block:clamp(56px,7vw,88px) 40px;font-size:.9375rem}
.piede__griglia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;align-items:start}
.piede__marchio{grid-column:1 / span 5}
.piede__marchio img{height:52px;width:auto;margin-bottom:22px}
.piede__marchio p{max-width:36ch}
.piede__colonna{grid-column:span 3}
.piede__colonna:first-of-type{grid-column:7 / span 3}
.piede h2{font:600 .75rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--nuvola);margin-bottom:16px}
.piede ul{list-style:none;margin:0;padding:0}
.piede li{margin-bottom:10px}
.piede a{text-decoration:none;color:var(--margherita)}
.piede a:hover{text-decoration:underline;text-underline-offset:5px}
.piede__legale{margin-top:clamp(48px,6vw,72px);padding-top:24px;border-top:1px solid rgba(247,243,234,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;font-size:.8125rem;color:rgba(247,243,234,.56)}
.piede__legale p{margin:0}

/* ============================================================
   PAGINE INTERNE: blog e articoli
   ============================================================ */
.pagina-interna .testata{background:rgba(19,26,51,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

.capo{background:linear-gradient(180deg,var(--notte) 0%,#172244 70%,#1a2f52 100%);color:var(--margherita);padding-top:calc(var(--testata) + clamp(56px,8vw,112px));padding-bottom:clamp(56px,7vw,96px)}
.briciole{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:500 .9375rem/1.3 var(--sans);color:var(--nuvola);margin-bottom:28px}
.briciole a{color:rgba(247,243,234,.74);text-decoration:none}
.briciole a:hover{color:var(--margherita);text-decoration:underline;text-underline-offset:5px}
.briciole span[aria-hidden]{color:rgba(247,243,234,.35)}
.capo__titolo{font:400 clamp(2.5rem,5.2vw,4.5rem)/1.02 var(--serif);letter-spacing:-.012em;max-width:19ch}
.capo__firma{margin:28px 0 0;font-size:1rem;color:rgba(247,243,234,.74)}
.capo__firma a{color:var(--margherita);text-underline-offset:5px;text-decoration-thickness:1px}
.capo__attacco{margin:28px 0 0;max-width:52ch;font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.55;color:rgba(247,243,234,.86)}

/* ---------- il testo dell'articolo ---------- */
.scritto__griglia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.scritto__testo{grid-column:1 / span 7}
.scritto__indice{grid-column:9 / span 4;position:sticky;top:calc(var(--testata) + 40px);padding-left:28px;border-left:1px solid var(--sabbia)}
.scritto__indice .etichetta{margin-bottom:18px}
.scritto__indice ol{list-style:none;margin:0;padding:0}
.scritto__indice li{margin:0 0 12px}
.scritto__indice a{color:var(--inchiostro);text-decoration:none;font-size:1rem;line-height:1.4}
.scritto__indice a:hover{color:var(--notte);text-decoration:underline;text-underline-offset:5px}
.scritto__testo > p{font-size:1.1875rem;line-height:1.7;color:var(--inchiostro);margin:0 0 1.35em}
.scritto__testo > p.attacco{font-size:clamp(1.3125rem,1.9vw,1.5rem);line-height:1.5;color:var(--notte);margin-bottom:1.6em;max-width:none}
.scritto__testo > h2{font:400 clamp(1.75rem,3vw,2.25rem)/1.1 var(--serif);color:var(--notte);margin-top:2.2em;margin-bottom:.75em;scroll-margin-top:calc(var(--testata) + 24px)}
.scritto__testo > ul{list-style:none;padding:0;margin-top:0;margin-bottom:1.35em;border-top:1px solid var(--sabbia)}
.scritto__testo > ul li{font-size:1.1875rem;line-height:1.6;color:var(--inchiostro);padding:16px 0;border-bottom:1px solid var(--sabbia)}
.scritto__testo strong{color:var(--notte);font-weight:600}
.scritto__testo > p a,.scritto__testo > ul a{color:var(--oceano);text-underline-offset:5px;text-decoration-thickness:1px}
.scritto__testo > p a:hover,.scritto__testo > ul a:hover{color:var(--notte)}
/* «Prova»: l'esercizio in fondo, segnato dalla luce sull'orizzonte */
.scritto__testo > h2.prova{position:relative;font:600 .8125rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--oceano);margin-top:4.5em;padding-top:34px;border-top:1px solid var(--notte)}
.scritto__testo > h2.prova::before{content:"";position:absolute;left:0;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--tuorlo);box-shadow:0 0 0 5px var(--margherita)}
.scritto__testo > h2.prova ~ p{font:400 clamp(1.375rem,2.2vw,1.625rem)/1.35 var(--serif);color:var(--notte)}
.scritto__testo > h2.prova ~ h2 ~ p{font:400 1.1875rem/1.7 var(--sans);color:var(--inchiostro)}
.scritto__testo > p.scritto__nota,.scritto__testo > h2.prova ~ p.scritto__nota{font:400 .9375rem/1.55 var(--sans);color:var(--inchiostro);margin:72px 0 0;padding-top:22px;border-top:1px solid var(--sabbia)}

/* ---------- chi scrive ---------- */
.autrice{display:grid;grid-template-columns:150px minmax(0,1fr);gap:32px;align-items:center;margin-top:48px}
.autrice__foto{aspect-ratio:4/5;margin:0}
.autrice__testo{color:var(--inchiostro);margin:0 0 18px;font-size:1.0625rem;line-height:1.6}
.autrice .etichetta{display:block;margin-bottom:12px;color:var(--oceano)}

/* ---------- elenchi di articoli ---------- */
.elenco__tema + .elenco__tema{margin-top:clamp(64px,8vw,104px)}
.elenco__titolo{font:400 var(--h2)/1.04 var(--serif);color:var(--notte);margin-bottom:28px}
.elenco__voci{list-style:none;margin:0;padding:0;border-top:1px solid var(--sabbia)}
.elenco__voci li{border-bottom:1px solid var(--sabbia)}
.voce{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:48px;align-items:baseline;padding:28px 0 30px;text-decoration:none;color:inherit;position:relative;transition:padding-left .45s var(--morbida)}
.voce::before{content:"";position:absolute;left:0;top:44px;width:9px;height:9px;border-radius:50%;background:var(--tuorlo);opacity:0;transform:scale(.4);transition:opacity .35s,transform .45s var(--morbida)}
.voce:hover,.voce:focus-visible{padding-left:26px}
.voce:hover::before,.voce:focus-visible::before{opacity:1;transform:none}
.voce__titolo{font:400 clamp(1.5rem,2.5vw,2rem)/1.12 var(--serif);color:var(--notte)}
.voce__testo{color:var(--inchiostro);font-size:1.0625rem;line-height:1.55}
.altri{padding-top:0}
.altri .titolo{margin-bottom:28px}

@media (max-width:700px){
  .scritto__testo > p,.scritto__testo > ul li{font-size:1.125rem}
  .voce{grid-template-columns:1fr;row-gap:10px;padding:24px 0 26px}
  .voce:hover,.voce:focus-visible{padding-left:0}
  .voce::before{display:none}
  .autrice{grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start}
}

/* ---------- bozza ---------- */
.bozza{position:fixed;left:16px;bottom:16px;z-index:300;background:var(--tuorlo);color:var(--notte);font:600 .75rem/1.3 var(--sans);letter-spacing:.06em;padding:9px 13px;border-radius:var(--raggio);box-shadow:0 6px 24px rgba(0,0,0,.35)}

/* ---------- movimento: dissolvenza lenta, mai a scatti ---------- */
.js [data-entra]{opacity:0;transform:translate3d(0,6px,0);transition:opacity 1.6s var(--morbida),transform 1.6s var(--morbida);transition-delay:calc(var(--i,0) * 140ms)}
.js [data-entra].vista{opacity:1;transform:none}
.js .apertura__foto{opacity:0;transition:opacity 1.8s var(--morbida)}
.js .pronta .apertura__foto{opacity:1}
.js .orizzonte__luce{opacity:0;transition:opacity 1.8s var(--morbida) .4s}
.js .pronta .orizzonte__luce{opacity:1}


/* ---------- testimonianze video (19/10): sei voci, tutte 16:9 e della stessa misura ---------- */
.testimonianze__testa{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:44px}
.testimonianze .titolo{margin-bottom:22px}
.testimonianze__intro{max-width:52ch;margin:0}
.striscia-video{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,520px);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:rgba(247,243,234,.25) transparent}
.voce-video{margin:0;scroll-snap-align:start}
.voce-video video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--raggio-foto);background:var(--abisso)}
.voce-video figcaption{margin-top:14px;font:400 1.375rem/1.2 var(--serif);color:var(--margherita)}
.frecce-video{display:flex;gap:10px}
.freccia-video{width:44px;height:44px;border-radius:50%;border:1px solid rgba(247,243,234,.3);background:transparent;color:var(--margherita);font:400 1.5rem/1 var(--serif);cursor:pointer;display:grid;place-content:center;transition:border-color .3s var(--morbida)}
.freccia-video:hover{border-color:var(--margherita)}
.freccia-video:disabled{opacity:.35;cursor:default}
.testimonianze__nota{margin:28px 0 0;font-size:.9375rem;color:rgba(247,243,234,.62)}
/* 19/10: in blu notte, subito sotto le cinque A come loro continuazione: niente doppio respiro fra le due */
.cinque-a + .testimonianze{padding-top:0}
@media (max-width:700px){.frecce-video{display:none}.striscia-video{grid-auto-columns:86vw;gap:16px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-entra],.js .apertura__foto,.js .orizzonte__luce{opacity:1;transform:none;transition:none}
  .nastro__pista{animation:none}
  .fascia img,.apertura__foto img{transform:none !important}
}

/* ---------- tablet ---------- */
@media (max-width:1020px){
  .menu{display:none}
  .apri-menu{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid rgba(247,243,234,.4);color:var(--margherita);font:600 .875rem/1 var(--sans);padding:12px 16px;border-radius:var(--raggio);cursor:pointer}
  .apri-menu i{display:block;width:16px;height:9px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
  .menu.aperto{display:flex;position:fixed;inset:var(--testata) 0 0 0;background:var(--notte);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:24px var(--gronda) 40px;overflow-y:auto}
  .menu.aperto a{font:400 2rem/1.1 var(--serif);opacity:1;padding:18px 0;width:100%;border-bottom:1px solid rgba(247,243,234,.14)}
  .menu.aperto .menu__lista{border:0;border-bottom:1px solid rgba(247,243,234,.14);border-radius:0;padding:18px 0;color:var(--nuvola)}
  .menu.aperto .menu__lista:hover{background:none;color:var(--nuvola)}
  body.menu-aperto{overflow:hidden}
  body.menu-aperto .testata{background:var(--notte)}

  .due__testo,.due--foto-prima .due__testo,.due--foto-dopo .due__testo,.aula .due__testo,.parole .due__testo{grid-column:1 / -1}
  .due__foto,.due--foto-prima .due__foto,.due--foto-dopo .due__foto,.parole .due__foto{grid-column:1 / span 8;margin-bottom:48px}
  .due--foto-dopo .due__foto,.parole .due__foto{order:-1}
  .aula__foto{grid-column:1 / -1;margin-top:56px}
  .scritto__testo{grid-column:1 / -1}
  .scritto__indice{display:none}
  .temi__testa > *{grid-column:1 / -1}
  .temi__foto{grid-column:1 / span 8;position:static;margin-bottom:40px}
  .temi__elenco{grid-column:1 / -1}
  .contatti .due__testo,.modulo{grid-column:1 / -1}
  .modulo{margin-top:40px}
  .parole__telefono{grid-column:1 / -1;margin-top:48px}
  .domande__testa{grid-column:1 / -1;margin-bottom:40px}
  .domande__foto{max-width:420px}
  .domande__elenco{grid-column:1 / -1}
  .piede__marchio{grid-column:1 / -1}
  .piede__colonna,.piede__colonna:first-of-type{grid-column:span 6}
}

/* ---------- telefono ---------- */
@media (max-width:700px){
  :root{--testata:68px}
  .testata__logo img{height:32px}
  .apertura{align-items:end}
  .apertura__foto{inset:0 0 42% 0;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .apertura__foto img{object-position:50% 12%}
  .apertura::after{height:62%;background:linear-gradient(180deg,transparent,rgba(19,26,51,.78) 38%,rgba(19,26,51,.95))}
  .apertura__testo{padding-top:max(30svh,200px);padding-bottom:28px}
  .apertura .display{font-size:clamp(2.125rem,9.4vw,2.625rem)}
  .apertura__sotto{font-size:.96875rem;line-height:1.5}
  .apertura__invito{font-size:.90625rem;margin:-6px 0 18px}
  .apertura h1{margin-bottom:12px}
  .apertura__sotto{margin:16px 0 20px}
  .bottone{width:100%;justify-content:center}
  .due__foto,.due--foto-prima .due__foto,.due--foto-dopo .due__foto,.parole .due__foto,.temi__foto{grid-column:1 / -1}
  .scheda{grid-template-columns:1fr}
  .aula__foto{gap:16px}
  .frase blockquote{max-width:16ch}
  .piede__colonna,.piede__colonna:first-of-type{grid-column:span 6}
  .bozza{left:10px;bottom:10px;font-size:.6875rem}
}