/* Il respiro del neon, condiviso con la home. */
@keyframes respiro{0%,100%{opacity:1}46%{opacity:.72}}

/* Pagine di sezione: stesso guscio della home, contenuto piu' stretto. */

.pagina{max-width:var(--max); margin:0 auto; padding:0 var(--pad) clamp(60px,9vw,110px)}
.pagina-testa{
  padding:clamp(52px,9vw,110px) 0 clamp(34px,5vw,54px);
  border-bottom:1px solid var(--rule); margin-bottom:clamp(40px,6vw,72px);
}
.pagina-titolo{
  margin:0 0 14px; font-family:var(--m); font-weight:700;
  font-size:clamp(30px,6vw,58px); line-height:1.1; letter-spacing:-.03em;
  text-wrap:balance;
}
.pagina-sommario{
  margin:0; color:var(--soft); max-width:46ch;
  font-size:clamp(16px,1.9vw,21px); line-height:1.5; text-wrap:pretty;
}
.blocco{max-width:none; padding:0; margin:0 0 clamp(48px,7vw,88px)}
.blocco:last-child{margin-bottom:0}

/* LA COLLISIONE DI NOME. La scheda dell'intervista si chiamava
   "stampa grande". Ma "grande" e' anche la finestra a schermo pieno
   delle immagini, che dice width:100vw e height:100vh - e quelle
   misure finivano addosso alla scheda: un riquadro alto quanto lo
   schermo con dentro due righe di testo e mezzo metro di vuoto.
   Adesso la scheda si chiama "spicca", e le regole della finestra
   valgono solo per un <dialog>, cosi' non puo' succedere di nuovo. */
.stampa.spicca{padding:clamp(24px,3.4vw,34px)}
.stampa.spicca .titolo-art{font-size:clamp(19px,2.6vw,28px)}

.scheda-testo{max-width:62ch; display:flex; flex-direction:column; gap:14px}
.scheda-testo p{margin:0; color:var(--soft); text-wrap:pretty}

.due-strade{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}
.strada{
  padding:26px 24px; border-radius:14px;
  background:linear-gradient(180deg,var(--sur2),var(--sur));
  border:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(var(--bianco-rgb),.04) inset,
             0 18px 34px -22px rgba(var(--nero-rgb),.9);
}
.strada-eti{
  margin:0 0 10px; font-family:var(--m); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal);
  text-shadow:0 0 12px rgba(var(--teal-rgb),.4);
}
.strada-testo{margin:0; color:var(--soft); font-size:15.5px; line-height:1.6; text-wrap:pretty}
.strada-testo strong{color:var(--txt); font-weight:600}

.invito{max-width:56ch; color:var(--soft)}
.invito a{color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(var(--teal-rgb),.4)}
.invito a:hover{color:var(--txt); border-color:var(--txt)}

.azione-riga{display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 0}
.bottone{
  font-family:var(--m); font-size:13px; font-weight:500; text-decoration:none;
  color:var(--ink); background:var(--teal); padding:13px 20px; border-radius:10px;
  box-shadow:0 1px 0 rgba(var(--bianco-rgb),.22) inset, 0 12px 26px -14px rgba(var(--teal-rgb),.65);
  transition:transform .3s var(--curva);
}
.bottone.chiaro{
  background:transparent; color:var(--txt); border:1px solid var(--rule); box-shadow:none;
}
.bottone:hover{transform:translateY(-2px)}

/* ---------- portfolio ---------- */
.lavori{display:flex; flex-direction:column; gap:clamp(34px,5vw,64px)}
.lavoro{
  display:grid; gap:clamp(18px,2.6vw,32px); align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:820px){
  .lavoro{grid-template-columns:1.25fr 1fr}
  .lavoro:nth-child(even) .lavoro-media{order:2}
}
.lavoro-media{
  position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/10;
  border:1px solid var(--rule); background:var(--sur);
  box-shadow:0 1px 0 rgba(var(--bianco-rgb),.05) inset,
             0 28px 54px -30px rgba(var(--nero-rgb),.95);
}
.lavoro-eti{
  margin:0 0 10px; font-family:var(--m); font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--violet-lo);
}
.lavoro-titolo{
  margin:0 0 10px; font-family:var(--m); font-weight:700;
  font-size:clamp(19px,2.6vw,27px); line-height:1.22; letter-spacing:-.02em;
  text-wrap:balance;
}
.lavoro-riga{margin:0 0 12px; color:var(--soft); text-wrap:pretty}
.lavoro-tecnica{
  margin:0; font-family:var(--m); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--soft); opacity:.75;
}

/* prima e dopo: si trascina la leva, e la linea di taglio e' al neon */
.confronto{position:absolute; inset:0; --taglio:50%}
.confronto-dopo,.confronto-prima{position:absolute; inset:0}
.confronto-dopo{background-image:linear-gradient(140deg,#171227,#0B1A1A)}
.confronto-prima{
  background-image:linear-gradient(140deg,#241a1a,var(--sup-1));
  filter:grayscale(1) contrast(.9);
  clip-path:inset(0 calc(100% - var(--taglio)) 0 0);
}
.confronto-maniglia{
  position:absolute; top:0; bottom:0; left:var(--taglio); width:2px;
  background:linear-gradient(180deg,transparent,var(--teal) 14%,#fff 50%,var(--teal) 86%,transparent);
  box-shadow:0 0 16px rgba(var(--teal-rgb),.9); transform:translateX(-1px); pointer-events:none;
}
.confronto-leva{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; margin:0;
}
.confronto-leva:focus-visible + .confronto-maniglia{box-shadow:0 0 24px rgba(var(--teal-rgb),1)}

/* il lettore parte solo al clic: prima non arriva niente da fuori */
.lettore{position:absolute; inset:0; display:grid; place-items:center}
.lettore-anteprima{
  position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 40%, rgba(var(--violet-rgb),.32), transparent 70%),
             linear-gradient(160deg,#161020,#0A0D12);
}
/* IL TASTO: un'icona tonda che pulsa sopra il fermo immagine.
   Prima era una pastiglia con dentro il triangolo e la parola: da
   lontano sembrava un'etichetta, non una cosa da premere. Un cerchio
   che respira si riconosce senza leggere niente, ed e' quello che si
   cerca sopra un fotogramma fermo. */
.lettore-avvia{
  position:relative; width:74px; height:74px; padding:0;
  display:grid; place-items:center;
  border-radius:50%; border:1px solid rgba(var(--teal-rgb),.55);
  background:rgba(var(--fondo-rgb),.5); backdrop-filter:blur(10px);
  color:var(--txt); cursor:pointer;
  transition:transform .3s var(--curva), border-color .3s var(--curva);
}
.lettore-avvia:hover,.lettore-avvia:focus-visible{
  transform:scale(1.06); border-color:var(--teal);
}
.lettore-triangolo{
  width:0; height:0; margin-left:5px;      /* ottico: il triangolo pesa a sinistra */
  border-left:17px solid var(--teal);
  border-top:11px solid transparent; border-bottom:11px solid transparent;
  filter:drop-shadow(0 0 10px rgba(var(--teal-rgb),.8));
}
.lettore-parola{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  font-family:var(--m); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--soft);
  white-space:nowrap; text-shadow:0 1px 10px rgba(var(--nero-rgb),.9);
}
/* L'onda: un anello che parte dal bordo e si allarga svanendo. Uno
   solo, lento: due sovrapposti diventano un allarme. */
.lettore-avvia::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid rgba(var(--teal-rgb),.6);
  animation:ondaPlay 2.6s var(--curva-entra) infinite;
  pointer-events:none;
}
@keyframes ondaPlay{
  0%  {transform:scale(1);   opacity:.75}
  70% {transform:scale(1.6); opacity:0}
  100%{transform:scale(1.6); opacity:0}
}
/* Quando il video non c'e' ancora il tasto non pulsa: pulsare vuol
   dire "premi", e li' non c'e' niente da premere. */
.lettore-avvia:disabled{cursor:default; border-color:var(--rule)}
.lettore-avvia:disabled::after{animation:none; opacity:0}
.lettore-avvia:disabled .lettore-triangolo{border-left-color:var(--testo-tenue); filter:none}
@media (prefers-reduced-motion:reduce){
  .lettore-avvia::after{animation:none; opacity:.3}
}
.lettore iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- i dati di generazione ---------- */
.dati{border-radius:14px; padding:20px 22px}
.dati-eti{
  margin:0 0 14px; font-family:var(--m); font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--teal);
  text-shadow:0 0 12px rgba(var(--teal-rgb),.55);
}
.dati-righe{ flex-wrap:wrap;}
.dati-righe span{display:flex; flex-direction:column; gap:2px}
.dati-righe b{
  font-family:var(--m); font-weight:700; font-size:clamp(17px,2.2vw,22px);
  line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.dati-righe i{
  font-style:normal; font-family:var(--m); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--soft);
}

/* ---------- i tre passi ---------- */
.passi{
  list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  counter-reset:passo;
}
.passo{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:22px 20px; border-radius:14px;
}
.passo-n{
  font-family:var(--m); font-weight:700; font-size:12px; letter-spacing:.14em;
  color:var(--violet-lo); text-shadow:0 0 12px rgba(var(--violet-su-rgb),.5);
}
.passo b{font-family:var(--m); font-size:15px; font-weight:700; letter-spacing:-.01em}
.passo span:last-child{color:var(--soft); font-size:14.5px; line-height:1.55; text-wrap:pretty}

/* ---------- cosa trovi dentro ---------- */
.dentro{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
.scheda{
  display:flex; flex-direction:column; gap:9px; border-radius:14px;
}
.scheda-n{
  font-family:var(--m); font-weight:700; font-size:11px; letter-spacing:.2em;
  color:var(--teal); text-shadow:0 0 12px rgba(var(--teal-rgb),.55);
}
.scheda-t{
  margin:0; font-family:var(--m); font-weight:700;
  font-size:clamp(17px,2.2vw,21px); letter-spacing:-.015em; text-wrap:balance;
}
.scheda-r{margin:0; color:var(--soft); font-size:14.5px; line-height:1.6; text-wrap:pretty}

/* ---------- la sfida ---------- */
.sfida{
  margin:0 0 4px; max-width:24ch;
  font-family:var(--m); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(19px,3vw,32px); line-height:1.28;
  color:var(--teal);
  text-shadow:0 0 16px rgba(var(--teal-rgb),.5), 0 0 42px rgba(var(--teal-rgb),.22);
  animation:respiro 3.4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .sfida{animation:none} }

/* ---------- le tre carte, rifatte ----------
   Il numero non e' piu' un'etichetta: e' una cifra grande e sbiadita
   dietro il testo, che si accende al passaggio. La riga di luce in
   cima si allunga da sinistra. */
.scheda{position:relative; overflow:hidden; padding:26px 22px 24px}
.scheda::after{
  content:attr(data-n); position:absolute; right:-6px; bottom:-22px;
  font-family:var(--m); font-weight:700; font-size:104px; line-height:1;
  color:rgba(var(--bianco-rgb),.035); letter-spacing:-.05em; pointer-events:none;
  transition:color .45s var(--curva), transform .45s var(--curva);
}
.scheda .scheda-n{
  position:relative; z-index:1; font-size:10.5px; letter-spacing:.24em;
}
.scheda-t,.scheda-r{position:relative; z-index:1}
.scheda::before{
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--curva), opacity .4s var(--curva);
}
.rv.on .scheda::before{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .scheda:hover::after{
    color:rgba(var(--teal-rgb),.10); transform:translate(-4px,-4px) scale(1.04);
  }
  .scheda:hover{transform:translateY(-4px)}
}
.scheda{transition:transform .38s var(--curva)}

/* il titolo dell'articolo di stampa, senza il marchio ripetuto */
.stampa.spicca{gap:12px}
.stampa.spicca .testata{display:none}

/* Il cursore in fondo al titolo: lo stesso dell'apertura in home. */
.pagina-titolo .cursore{
  display:inline-block; width:.42em; height:.8em; margin-left:.14em;
  vertical-align:-.04em; background:var(--teal); border-radius:1px;
  box-shadow:0 0 12px rgba(var(--teal-rgb),.7);
  animation:batti 1.15s steps(1,end) infinite;
}
@keyframes batti{0%,49%{opacity:1}50%,100%{opacity:.08}}
@media (prefers-reduced-motion:reduce){ .pagina-titolo .cursore{animation:none} }

/* ============================================================
   IL MODULO
   Le stesse regole del resto: lastra di vetro, luce turchese
   sull'elemento che ha il fuoco, nessun bordo colorato acceso
   prima che serva. Il rosso compare solo dopo un tentativo di
   invio, mai mentre si scrive: correggere qualcuno a meta'
   parola e' il modo piu' rapido per farlo smettere.
   ============================================================ */

.modulo{
  display:grid; gap:var(--s5);
  padding:var(--s6) var(--s6) var(--s5);
  border-radius:var(--r4);
}
@media(max-width:560px){ .modulo{padding:var(--s5) var(--s4) var(--s4); gap:var(--s4)} }

.campo{display:grid; gap:var(--s2); position:relative}
.campo label{
  font-family:var(--m); font-size:var(--t-mini); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--testo-soft);
  transition:color var(--d2) var(--curva-secca);
}
.campo:focus-within label{color:var(--teal)}

.campo input,.campo textarea,.campo select{
  width:100%; font-family:var(--s); font-size:var(--t-m); color:var(--testo);
  background:rgba(var(--fondo-rgb),.55);
  border:1px solid var(--linea);
  border-radius:var(--r2);
  padding:13px 15px;
  transition:border-color var(--d2) var(--curva-secca),
             box-shadow var(--d2) var(--curva-secca),
             background var(--d2) var(--curva-secca);
}
.campo textarea{resize:vertical; min-height:132px; line-height:1.55}
.campo input::placeholder,.campo textarea::placeholder{color:var(--testo-tenue)}

/* La stessa luce che le piace sui bottoni, portata sui campi. */
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;
  border-color:var(--teal-spento);
  background:rgba(var(--fondo-rgb),.8);
  box-shadow:0 0 0 3px rgba(var(--teal-rgb),.13),
             0 0 26px -10px var(--alone-teal);
}

/* Il menu a tendina: la freccia e' nostra, quella di sistema sparisce. */
.scelta{position:relative}
.campo select{appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer}
.campo select option{background:var(--sup-2); color:var(--testo)}
.scelta-freccia{
  position:absolute; right:16px; top:50%; width:9px; height:9px;
  margin-top:-6px; pointer-events:none;
  border-right:1.7px solid var(--testo-soft);
  border-bottom:1.7px solid var(--testo-soft);
  transform:rotate(45deg);
  transition:border-color var(--d2) var(--curva-secca);
}
.scelta:focus-within .scelta-freccia{border-color:var(--teal)}

/* Il contatore: tace finche' non ci si avvicina davvero al limite. */
.campo-conta{
  margin:0; justify-self:end;
  font-family:var(--m); font-size:var(--t-xs); color:var(--testo-tenue);
  opacity:0; transition:opacity var(--d2) var(--curva-secca);
}
.campo-conta[data-vicino]{opacity:1}
.campo-conta[data-pieno]{color:var(--avviso); opacity:1}

/* Il guasto: occupa spazio solo quando parla. */
.campo-guasto{
  margin:0; font-family:var(--m); font-size:var(--t-xs);
  color:var(--avviso); display:none;
}
.campo-guasto[data-dice]{display:block}
.modulo[data-provato] input:invalid,
.modulo[data-provato] textarea:invalid,
.modulo[data-provato] select:invalid{
  border-color:rgba(var(--avviso-rgb),.5);
}

/* L'esca. Nascosta senza display:none, che alcuni programmi leggono
   come segnale: qui e' fuori campo e alta zero. */
.esca{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0;
}

/* La spunta del consenso: quadrato disegnato a mano, perche' quello
   di sistema arriva bianco e rompe il buio. */
.campo-spunta{
  grid-template-columns:auto 1fr; align-items:start; gap:var(--s3);
}
.campo-spunta input{
  appearance:none; -webkit-appearance:none;
  width:21px; height:21px; margin:1px 0 0; padding:0; flex:none;
  border-radius:6px; cursor:pointer; position:relative;
}
.campo-spunta input:checked{
  background:var(--teal); border-color:var(--teal);
  box-shadow:0 0 20px -5px var(--alone-teal);
}
.campo-spunta input:checked::after{
  content:""; position:absolute; left:6.5px; top:2.5px;
  width:5px; height:10px; border:solid var(--fondo);
  border-width:0 2.2px 2.2px 0; transform:rotate(43deg);
}
.campo-spunta label{
  font-family:var(--s); font-size:var(--t-s); font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--testo-soft);
  line-height:1.5; cursor:pointer;
}
.campo-spunta:focus-within label{color:var(--testo-soft)}
.campo-spunta label a{color:var(--teal); text-underline-offset:3px}
.campo-spunta .campo-guasto{grid-column:1 / -1}

.modulo-fondo{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4);
  padding-top:var(--s2);
}
.modulo-stato{
  margin:0; font-family:var(--m); font-size:var(--t-xs);
  color:var(--testo-soft); flex:1; min-width:14ch;
}
.modulo-stato[data-esito="ok"]{color:var(--teal)}
.modulo-stato[data-esito="no"]{color:var(--avviso)}

.modulo[data-invio] .bottone{opacity:.55; pointer-events:none}

/* Riuscito: il modulo si ritira e resta il messaggio. */
.modulo[data-fatto]{
  display:grid; place-items:center; text-align:center;
  min-height:220px; gap:var(--s3);
}
.modulo[data-fatto] > *{display:none}
.modulo[data-fatto]::before{
  content:"Messaggio partito."; display:block;
  font-family:var(--m); font-size:var(--t-l); color:var(--teal);
  text-shadow:0 0 18px var(--alone-teal-largo);
}
.modulo[data-fatto]::after{
  content:"Rispondo io, non un programma. Di solito entro un paio di giorni.";
  display:block; max-width:34ch;
  font-family:var(--s); font-size:var(--t-s); color:var(--testo-soft);
}

/* LA SPUNTA, MISURATA SU UN DITO.
   Ventun pixel si prendono di mira col puntatore; con un dito si
   manca, e chi manca crede di aver premuto. E' l'unica spunta
   obbligatoria del sito: se non si accende, il messaggio non parte -
   quindi mancarla vuol dire restare fermi senza capire perche'.
   L'etichetta accanto era gia' premibile, ma un bersaglio che
   funziona solo se sai che si puo' premere anche la scritta non e'
   un bersaglio: e' una scorciatoia per chi la conosce.
   Il baffo cresce con il quadrato, se no resterebbe in un angolo. */
@media(max-width:560px){
  .campo-spunta{ align-items:center; gap:var(--s3) }
  .campo-spunta input{ width:28px; height:28px; margin:0; border-radius:8px }
  .campo-spunta input:checked::after{
    left:9px; top:4px; width:6px; height:13px; border-width:0 2.6px 2.6px 0;
  }
}

@media (prefers-reduced-motion:reduce){
  .modulo *{transition:none !important}
}

/* ============================================================
   PRIVACY: testo lungo, che deve restare leggibile
   ============================================================ */

.par{
  max-width:68ch; margin:0 0 var(--s4);
  font-size:var(--t-m); line-height:1.62; color:var(--testo-soft);
}
.par:last-child{margin-bottom:0}
.par b,.par strong{color:var(--testo); font-weight:600}
.par a{color:var(--teal); text-underline-offset:3px}

.elenco{
  max-width:68ch; margin:0; padding-left:1.15em;
  font-size:var(--t-m); line-height:1.62; color:var(--testo-soft);
}
.elenco li{margin-bottom:var(--s3)}
.elenco li::marker{color:var(--teal)}

.sintesi{display:grid; gap:var(--s3)}
.sintesi-riga{
  margin:0; padding:var(--s4) var(--s5);
  border-left:2px solid var(--teal-spento);
  border-radius:0 var(--r2) var(--r2) 0;
  background:linear-gradient(90deg, rgba(var(--teal-rgb),.05), transparent 62%);
  font-size:var(--t-s); line-height:1.6; color:var(--testo-soft);
}
.sintesi-riga b{color:var(--testo); font-weight:600}

.nota-fine{
  max-width:64ch; margin:var(--s4) 0 0;
  font-family:var(--m); font-size:var(--t-xs); line-height:1.6;
  color:var(--testo-tenue);
}
.nota-fine b{color:var(--testo-soft)}

/* Un indirizzo che si legge ma non e' un link: niente da cliccare,
   niente da raccogliere in automatico. */
.fuori{font-family:var(--m); color:var(--testo-soft)}

/* ---------- i dati obbligatori ----------
   Etichetta a sinistra, valore a destra, allineati sulla colonna.
   Cio' che manca non si nasconde: si dichiara. */
.dati-righe{display:grid; gap:var(--s3)}
.dato{
  margin:0; display:grid; grid-template-columns:11ch 1fr;
  gap:var(--s4); align-items:baseline;
}
.dato-eti{
  font-family:var(--m); font-size:var(--t-mini); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--testo-tenue);
}
.dato-val{font-family:var(--m); font-size:var(--t-s); color:var(--testo)}
@media(max-width:520px){
  .dato{grid-template-columns:1fr; gap:2px}
}

/* Un buco che si vede. Se questa scritta arriva in produzione,
   e' un errore che grida invece di nascondersi. */
.da-fare{
  font-family:var(--m); font-size:var(--t-xs);
  color:var(--avviso); border:1px dashed rgba(var(--avviso-rgb),.45);
  border-radius:6px; padding:1px 7px;
}
.pie-righe .da-fare{font-size:var(--t-mini)}

/* L'indirizzo ricomposto dal browser: si legge e si clicca, ma nel
   sorgente non esiste come indirizzo. */
.posta-vai{
  font-family:var(--m); font-size:var(--t-s); color:var(--teal);
  text-underline-offset:3px;
}
.posta:empty::before{content:"\2014"; color:var(--testo-tenue)}

/* ============================================================
   PORTFOLIO: le immagini dei lavori
   Ogni scatto e' servito in tre formati. AVIF per chi lo legge,
   WebP per quasi tutti gli altri, JPG come ultima rete.
   ============================================================ */

/* QUALE immagine non sta piu' qui: la scrive il costruttore in
   assets/foto.css leggendo gli attributi data-foto delle pagine.
   Qui resta solo COME va inquadrata. */
.confronto-prima,.confronto-dopo,.lettore-anteprima{
  background-size:cover; background-position:50% 42%;
}


/* ---------- quando l'immagine non c'e' ancora ----------
   Un riquadro vuoto sembra un errore. Questo sembra una cosa che
   sta arrivando, che e' la verita'. */
[data-manca]{background-image:none !important}
[data-manca]::after{
  content:"in preparazione"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--m); font-size:var(--t-mini); font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--testo-tenue);
  background:
    repeating-linear-gradient(-45deg,
      rgba(var(--bianco-rgb),.018) 0 12px,
      transparent 12px 24px),
    linear-gradient(180deg, var(--sup-3), var(--sup-1));
}
.confronto[data-manca] .confronto-leva,
.confronto[data-manca] .confronto-maniglia{display:none}

/* La riga che spiega come si usa la leva. */
.lavoro-nota{
  margin:10px 0 0; font-family:var(--m); font-size:var(--t-xs);
  color:var(--testo-tenue); text-align:center;
}
.confronto[data-manca] + .lavoro-nota{display:none}

/* Un concept non e' una commessa: si vede anche dal colore.
   Il turchese e' per i clienti, il viola per cio' che e' nato
   senza committente. */
.lavoro-eti-concept{color:var(--violet-lo) !important}

/* Un nome di cliente non ancora confermato. Se questa scritta
   arriva in produzione, il controllo ha fallito: percio' grida. */
.da-confermare{
  color:var(--avviso);
  border-bottom:1px dashed rgba(var(--avviso-rgb),.5);
}

/* ---------- da dove viene un lavoro ----------
   Serve quando la commessa non e' di Barbara ma della societa' per
   cui ha lavorato. Il nome del committente finale in cima sarebbe
   una appropriazione; qui sotto, con la casa di produzione nominata,
   e' una attribuzione. La differenza non e' formale. */
.lavoro-fonte{
  margin:14px 0 0; padding-top:12px;
  border-top:1px solid var(--linea);
  font-family:var(--m); font-size:var(--t-xs); line-height:1.55;
  color:var(--testo-tenue);
}
.lavoro-fonte strong{color:var(--testo-soft); font-weight:700}

/* Il video di casa, una volta partito, riempie il riquadro esattamente
   come faceva il riquadro incorporato. */
.lettore video{
  display:block; width:100%; height:100%;
  object-fit:cover; background:var(--fondo); border:0;
}

/* ============================================================
   LO SFOGLIATORE
   Una lastra sola, con la pagina dentro e i comandi sotto. Le
   pagine entrano di lato: e' il gesto di girare un foglio, non
   una dissolvenza.
   ============================================================ */

.sfoglia{
  display:grid; gap:var(--s3);
  user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none;          /* niente menu lungo su iPhone */
}
.sfoglia-palco{
  position:relative; overflow:hidden;
  aspect-ratio:16/9;
  border-radius:var(--r3); border:1px solid var(--linea);
  background:linear-gradient(180deg,var(--sup-3),var(--sup-1));
  box-shadow:var(--om-2);
  touch-action:pan-y;
}
.sfoglia-pagina{
  position:absolute; inset:0;
  background-size:contain; background-repeat:no-repeat; background-position:50% 50%;
  background-color:var(--fondo);
  will-change:transform, opacity;
}
.sfoglia-pagina.entra-dx{animation:foglioDx .42s var(--curva-entra) both}
.sfoglia-pagina.entra-sx{animation:foglioSx .42s var(--curva-entra) both}
.sfoglia-pagina.esce{animation:foglioVia .42s var(--curva-entra) both}
@keyframes foglioDx{from{transform:translate3d(7%,0,0); opacity:0} to{transform:none; opacity:1}}
@keyframes foglioSx{from{transform:translate3d(-7%,0,0); opacity:0} to{transform:none; opacity:1}}
@keyframes foglioVia{from{opacity:1} to{opacity:0}}

.sfoglia-barra{
  display:flex; align-items:center; justify-content:center; gap:var(--s4);
}
.sfoglia-prec,.sfoglia-succ{
  width:42px; height:42px; flex:none; border-radius:var(--r-tondo);
  display:grid; place-items:center; cursor:pointer;
  color:var(--testo); background:var(--sup-3);
  border:1px solid var(--linea);
  transition:border-color var(--d2) var(--curva-secca),
             color var(--d2) var(--curva-secca),
             box-shadow var(--d2) var(--curva-secca);
}
.sfoglia-prec:hover:not(:disabled),.sfoglia-succ:hover:not(:disabled),
.sfoglia-prec:focus-visible:not(:disabled),.sfoglia-succ:focus-visible:not(:disabled){
  color:var(--teal); border-color:rgba(var(--teal-rgb),.45);
  box-shadow:0 0 22px -8px var(--alone-teal);
}
.sfoglia-prec:active:not(:disabled),.sfoglia-succ:active:not(:disabled){transform:scale(.92)}
.sfoglia-prec:disabled,.sfoglia-succ:disabled{opacity:.3; cursor:default}
.sfoglia-prec::before,.sfoglia-succ::before{
  content:""; width:9px; height:9px;
  border-top:1.8px solid currentColor; border-right:1.8px solid currentColor;
}
.sfoglia-prec::before{transform:rotate(-135deg) translate(-2px,-2px)}
.sfoglia-succ::before{transform:rotate(45deg) translate(-2px,-2px)}
.sfoglia-conta{
  font-family:var(--m); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.16em; color:var(--testo-soft); min-width:8ch; text-align:center;
}
.sfoglia-nota{
  margin:0; text-align:center;
  font-family:var(--m); font-size:var(--t-mini); letter-spacing:.1em;
  text-transform:uppercase; color:var(--testo-tenue);
}

@media (prefers-reduced-motion:reduce){
  .sfoglia-pagina.entra-dx,.sfoglia-pagina.entra-sx,.sfoglia-pagina.esce{animation:none}
  .sfoglia-pagina.esce{display:none}
}

/* La presentazione occupa tutta la riga sotto il lavoro. */
.lavoro-deck{grid-column:1 / -1; margin-top:clamp(18px,2.2vw,30px)}
/* Se la presentazione non e' ancora stata convertita, sparisce:
   uno sfogliatore vuoto e' peggio di nessuno sfogliatore. */
.sfoglia[data-vuoto]{display:none}
.lavoro:has(.sfoglia[data-vuoto]) .lavoro-sfoglia-invito{display:none}
.lavoro-sfoglia-invito{
  margin:12px 0 0; font-family:var(--m); font-size:var(--t-xs);
  color:var(--teal); line-height:1.55;
}

/* Lo sfogliatore si raggiunge col tabulatore: e' un comando, non
   un'immagine. Il contorno arriva da vivo.css come per tutto il resto. */
.sfoglia{outline-offset:6px}
.sfoglia:focus-visible{outline:2px solid var(--teal); border-radius:var(--r3)}



/* ============================================================
   LA SCENA DIETRO IL TITOLO DI SEZIONE

   Prima era una striscia SOTTO il titolo: un blocco che stava fra
   l'intestazione e il contenuto e li separava invece di legarli.
   E il sito finiva per avere tre modi diversi di usare una foto -
   dietro la frase in home, in striscia nelle sezioni, in riquadro
   nel portfolio - che facevano sembrare le pagine di siti diversi.

   Adesso e' una sola: la foto sta DIETRO, sfumata, e il titolo ci
   sta dentro. Sfonda i margini del contenitore perche' un'immagine
   che finisce dove finisce il testo sembra ritagliata; sfumando sui
   quattro lati invece nasce dal fondo.

   La fusione e' per SCHIARIMENTO: il fondo e' quasi nero, quindi le
   zone scure spariscono da sole e restano le luci.
   ============================================================ */

.pagina-testa{
  position:relative; isolation:isolate;
  /* L'intestazione deve essere ALTA quanto basta alla foto. Con una
     fascia bassa, un'immagine 16:9 viene tagliata del cinquanta per
     cento e la prima cosa che se ne va e' la testa del soggetto.
     Alzandola, il ritaglio scende e la testa resta dentro. */
  /* Piu' e' bassa la fascia, piu' l'immagine sembra ingrandita: di
     una 16:9 se ne vedrebbe una fetta sottile presa dal centro.
     Alzandola se ne vede il DUE TERZI, e si legge la scena invece
     del primo piano. */
  min-height:clamp(330px, 42vw, 660px);
  display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(26px,3.4vw,54px);
  padding-bottom:clamp(22px,2.8vw,40px);
}
.pagina-testa-testo{position:relative; z-index:2}

/* La foto va da BORDO A BORDO, non in un riquadro accanto al titolo.
   Prima la dissolvenza a sinistra ne cancellava meta' per far posto
   al testo, e si vedeva solo una fetta: sembrava tagliata perche' lo
   era. Adesso si vede intera, e a rendere leggibile il titolo ci
   pensa un velo scuro sopra, non un pezzo di foto mancante. */
.testa-scena{
  position:absolute; z-index:0; pointer-events:none;
  top:0; bottom:0;
  left:50%; width:100vw; transform:translateX(-50%);
  background-size:cover;
  /* MOLTO sopra il centro: in un ritaglio orizzontale la prima cosa
     che si perde e' la testa, perche' sta in alto. Il valore basso
     tiene la parte alta dell'immagine. */
  background-position:62% 22%;
  opacity:.72;
  /* sfuma solo SOTTO, dove la foto deve sciogliersi nella pagina.
     Ai lati arriva al bordo dello schermo: li' non c'e' niente da
     nascondere. */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}

/* Il velo che rende leggibile il titolo. E' scuro a sinistra, dove
   sta il testo, e sparisce a destra, dove sta il soggetto. */
.testa-scena::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      var(--fondo) 0%,
      rgba(var(--fondo-rgb),.92) 22%,
      rgba(var(--fondo-rgb),.55) 52%,
      rgba(var(--fondo-rgb),.12) 78%,
      transparent 100%),
    linear-gradient(180deg, rgba(var(--fondo-rgb),.5) 0%, transparent 34%);
}

@media(max-width:760px){
  .testa-scena{
    opacity:.5; background-position:60% 30%;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 46%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 46%, transparent 100%);
  }
  /* sul telefono il testo sta SOPRA la foto, non accanto: il velo
     deve scurire tutto, non solo un lato */
  .testa-scena::after{
    background:
      linear-gradient(180deg, rgba(var(--fondo-rgb),.72) 0%, rgba(var(--fondo-rgb),.6) 55%, transparent 100%);
  }
}

/* Le foto, una per sezione. Il nome del file segue l'id della
   sezione: press.avif, portfolio.avif, prompt.avif, contatti.avif.
   Se il file non c'e', la build non mette nemmeno il riquadro. */
.testa-press{
  background-image:url(/assets/foto/press.jpg);
  background-image:image-set(
    url(/assets/foto/press.avif) type("image/avif"),
    url(/assets/foto/press.webp) type("image/webp"),
    url(/assets/foto/press.jpg)  type("image/jpeg"));
  background-image:-webkit-image-set(
    url(/assets/foto/press.avif) type("image/avif"),
    url(/assets/foto/press.jpg)  type("image/jpeg"));
}
.testa-portfolio{
  background-image:url(/assets/foto/portfolio.jpg);
  background-image:image-set(
    url(/assets/foto/portfolio.avif) type("image/avif"),
    url(/assets/foto/portfolio.webp) type("image/webp"),
    url(/assets/foto/portfolio.jpg)  type("image/jpeg"));
  background-image:-webkit-image-set(
    url(/assets/foto/portfolio.avif) type("image/avif"),
    url(/assets/foto/portfolio.jpg)  type("image/jpeg"));
}
.testa-prompt{
  background-image:url(/assets/foto/prompt.jpg);
  background-image:image-set(
    url(/assets/foto/prompt.avif) type("image/avif"),
    url(/assets/foto/prompt.webp) type("image/webp"),
    url(/assets/foto/prompt.jpg)  type("image/jpeg"));
  background-image:-webkit-image-set(
    url(/assets/foto/prompt.avif) type("image/avif"),
    url(/assets/foto/prompt.jpg)  type("image/jpeg"));
}
.testa-contatti{
  background-image:url(/assets/foto/contatti.jpg);
  background-image:image-set(
    url(/assets/foto/contatti.avif) type("image/avif"),
    url(/assets/foto/contatti.webp) type("image/webp"),
    url(/assets/foto/contatti.jpg)  type("image/jpeg"));
  background-image:-webkit-image-set(
    url(/assets/foto/contatti.avif) type("image/avif"),
    url(/assets/foto/contatti.jpg)  type("image/jpeg"));
}

/* L'invito di chiusura di una sezione: piu' grande, perche' e' la
   sola cosa che resta dopo aver guardato tutto. */
.invito.grande{
  font-size:clamp(18px,2vw,24px); line-height:1.45; max-width:34ch;
  color:var(--testo-soft);
}
.invito.grande a{color:var(--teal); text-underline-offset:4px}
.testa-blog{
  background-image:url(/assets/foto/blog.jpg);
  background-image:image-set(
    url(/assets/foto/blog.avif) type("image/avif"),
    url(/assets/foto/blog.webp) type("image/webp"),
    url(/assets/foto/blog.jpg)  type("image/jpeg"));
  background-image:-webkit-image-set(
    url(/assets/foto/blog.avif) type("image/avif"),
    url(/assets/foto/blog.jpg)  type("image/jpeg"));
}

/* ============================================================
   IL BOTTONE CHE APRE UNA COSA GRANDE
   Non un'icona da indovinare: si vede l'anteprima, si legge cosa
   c'e' dentro, e la lente dice che si ingrandisce.
   ============================================================ */


/* Sta SOTTO il cursore del confronto, dentro la stessa colonna:
   a tutta larghezza spezzava in due la composizione del lavoro e
   tutto finiva incolonnato. */
.apri-grande{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s3);
  align-items:center; width:100%; text-align:left; cursor:pointer;
  margin-top:12px; padding:10px; border-radius:var(--r2);
  border:1px solid var(--linea);
  background:linear-gradient(180deg,var(--sup-2),var(--sup-1));
  transition:border-color var(--d2) var(--curva-secca),
             box-shadow var(--d2) var(--curva-secca);
}
.apri-grande:hover,.apri-grande:focus-visible{
  border-color:rgba(var(--teal-rgb),.45);
  box-shadow:0 0 30px -12px var(--alone-teal);
}
.apri-grande:active{transform:scale(.995); transition-duration:var(--d1)}

.apri-grande-foto{
  width:clamp(64px,8vw,88px); aspect-ratio:16/9; flex:none;
  border-radius:var(--r1); border:1px solid var(--linea);
  background-size:cover; background-position:50% 50%;
}
.apri-grande-dice{display:grid; gap:5px; min-width:0}
.apri-grande-dice b{
  font-family:var(--m); font-size:var(--t-xs); font-weight:700;
  line-height:1.35; color:var(--testo);
}
.apri-grande-dice i{
  font-style:normal; font-size:var(--t-xs); line-height:1.5; color:var(--testo-soft);
}
/* La lente: due tratti, nessuna immagine da caricare. */
.apri-grande-lente{
  width:28px; height:28px; flex:none; position:relative;
  border-radius:50%; border:1px solid var(--linea);
  display:grid; place-items:center; color:var(--teal);
}
.apri-grande-lente::before{
  content:""; width:11px; height:11px; border-radius:50%;
  border:1.7px solid currentColor;
}
.apri-grande-lente::after{
  content:""; position:absolute; right:9px; bottom:9px;
  width:6px; height:1.7px; background:currentColor;
  transform:rotate(45deg); transform-origin:right;
}
@media(max-width:560px){
  .apri-grande{grid-template-columns:auto 1fr; gap:var(--s3)}
  .apri-grande-lente{display:none}
}

/* ---------- il riquadro a schermo pieno ---------- */
dialog.grande{
  border:0; padding:0; max-width:100vw; max-height:100vh;
  width:100vw; height:100dvh; height:100vh;
  background:transparent; color:var(--testo); overflow:hidden;
}
dialog.grande::backdrop{
  background:rgba(var(--nero-rgb),.93);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.grande-foto{
  position:absolute; inset:clamp(16px,3vw,44px) clamp(16px,3vw,44px) 64px;
  background-size:contain; background-repeat:no-repeat; background-position:50% 50%;
}
.grande-dice{
  position:absolute; left:0; right:0; bottom:22px; margin:0; text-align:center;
  font-family:var(--m); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--testo-soft);
}
.grande-chiudi{
  position:absolute; top:clamp(12px,2vw,22px); right:clamp(12px,2vw,22px);
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  font-size:26px; line-height:1; color:var(--testo);
  background:rgba(var(--bianco-rgb),.07);
  border:1px solid rgba(var(--bianco-rgb),.16);
  transition:background var(--d2) var(--curva-secca),
             border-color var(--d2) var(--curva-secca);
}
.grande-chiudi:hover,.grande-chiudi:focus-visible{
  background:rgba(var(--teal-rgb),.16); border-color:rgba(var(--teal-rgb),.5);
}
dialog.grande[open]{animation:grandeEntra var(--d3) var(--curva-entra)}
@keyframes grandeEntra{from{opacity:0; transform:scale(.985)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ dialog.grande[open]{animation:none} }


/* L'invito sotto lo sfogliatore. La bassa risoluzione va DICHIARATA:
   se non lo dici sembra un difetto, se lo dici e' una scelta - e
   diventa il motivo per scrivere. */
.sfoglia-chiedi{
  margin:14px 0 0; text-align:center; max-width:52ch;
  margin-left:auto; margin-right:auto;
  font-size:var(--t-s); line-height:1.55; color:var(--testo-soft);
}
.sfoglia-chiedi a{color:var(--teal); font-weight:600; text-underline-offset:4px}
/* Un lavoro senza immagine in cima: il testo si prende tutta la riga. */

/* ---------- lo scatto che smentisce se stesso ----------
   Una foto sola, in alta qualita', e sotto la frase che ribalta
   quello che hai appena guardato. E' l'argomento piu' forte del
   portfolio, e funziona solo se la foto e' bella davvero. */
/* QUANDO DENTRO C'E' ANCHE LA DIDASCALIA, IL CONTENITORE NON PUO'
   RESTARE UNA FINESTRA.
   .lavoro-media e' una finestra: proporzione fissa 16/10, angoli
   tondi, sfondo e overflow nascosto. Giusto per un video o una foto,
   sbagliato per una figura che porta il testo sotto di se'.
   Sul telefono la finestra era alta 204px mentre il contenuto ne
   chiedeva 305: la frase - che e' l'argomento piu' forte del
   portfolio - veniva tagliata a meta'. E il riquadro attorno al testo
   non aggiungeva niente: chiudeva in una scatola una frase che deve
   stare sulla pagina.
   Qui la finestra si apre. Gli angoli tondi restano dove servono,
   sulla foto, che ce li ha gia' suoi. */
.lavoro-media-aperta{
  aspect-ratio:auto; overflow:visible;
  border:0; background:none; box-shadow:none; border-radius:0;
}

.scatto-vero{margin:0; display:grid; gap:14px}
/* Lo scatto e' su fondo nero come la pagina: niente bordo e niente
   ombra, altrimenti si vedrebbe il riquadro e non la foto. I flaconi
   sembrano appoggiati sulla pagina invece che chiusi dentro qualcosa. */
.scatto-vero-foto{
  width:100%; aspect-ratio:16/9;
  background-size:cover; background-position:50% 50%;
  border-radius:var(--r3);
}
.scatto-vero figcaption{
  font-size:var(--t-s); line-height:1.55; color:var(--testo-soft);
}
.scatto-vero figcaption b{
  display:block; margin-bottom:4px;
  font-family:var(--m); font-size:var(--t-s); color:var(--teal);
  text-shadow:0 0 14px var(--alone-teal-largo);
}

/* ---------- la chiusura del portfolio ----------
   Prima diceva "se ne parla qui": educato e senza conseguenze.
   Una domanda piccola che prepara, e sotto la riga che pesa. */
/* La chiusa: la domanda e il colpo a sinistra, la scena a destra.
   Stessa griglia della riga "Specializzata nel..." della home, cosi'
   le due frasi che chiedono qualcosa si somigliano. L'alone sta in
   base.css: qui c'e' solo QUALE immagine. */
.chiusa{
  display:grid; gap:var(--s5);
  grid-template-columns:1fr; align-items:center;
}
@media(min-width:860px){
  .chiusa{grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:var(--s7)}
}
.chiusa-testo{min-width:0}
.chiusa-scena[data-c]{
  background-image:url(/assets/foto/provoca.jpg);
  background-image:image-set(
    url(/assets/foto/provoca.avif) type("image/avif"),
    url(/assets/foto/provoca.webp) type("image/webp"),
    url(/assets/foto/provoca.jpg)  type("image/jpeg"));
  background-image:-webkit-image-set(
    url(/assets/foto/provoca.avif) type("image/avif"),
    url(/assets/foto/provoca.jpg)  type("image/jpeg"));
}
.chiusa:not(:has(.chiusa-scena[data-c])){grid-template-columns:1fr}

.chiusa-domanda{
  margin:0 0 8px; font-size:var(--t-m); color:var(--testo-soft);
}
/* 24ch spezzava la frase in TRE righe corte accanto a una scena
   larga mezza pagina: sembrava una colonna di giornale caduta li'.
   Con 30 ne fa due, e le due meta' si guardano. */
.chiusa-colpo{margin:0; max-width:30ch}
.chiusa-colpo a{
  font-family:var(--m); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(21px,2.7vw,32px); line-height:1.22;
  color:var(--teal); text-decoration:none;
  text-shadow:0 0 18px var(--alone-teal-largo);
  transition:color var(--d2) var(--curva-secca),
             text-shadow var(--d2) var(--curva-secca);
}
.chiusa-colpo a:hover,.chiusa-colpo a:focus-visible{
  color:var(--teal-su);
  text-shadow:0 0 26px var(--alone-teal), 0 0 56px var(--alone-teal-largo);
}

/* ============================================================
   I TRE REEL VERTICALI
   ============================================================
   Sono l'ultima cosa della pagina di AMALUR, dopo la presentazione:
   prima il piano, poi la campagna che si muove.

   COME PARTONO. Non ci sono tre lettori in ascolto dal primo
   momento: finche' non si arriva quaggiu' esiste solo un fermo
   immagine, servito dal nostro dominio. Quando la fila entra in
   campo, il codice mette al posto delle foto il lettore di
   Cloudflare Stream, muto e in ciclo. Chi non arriva mai qui non
   scarica un byte di video, e la pagina piu' in alto non aspetta.

   PERCHE' NON UN FILE NOSTRO. Un reel verticale di venti secondi in
   buona qualita' pesa decine di megabyte, e Cloudflare Pages ha un
   limite per file. Stream lo serve a scaglioni, adatta la qualita'
   alla linea, e soprattutto NON offre il file: non c'e' un indirizzo
   .mp4 da incollare altrove. Con "Allowed Origins" impostato sul
   pannello, incorporarli su un altro sito non funziona.
   Non impedisce la registrazione dello schermo. Niente lo impedisce.
   ============================================================ */

.lavoro-reel{grid-column:1 / -1; margin-top:clamp(22px,3vw,38px)}
.reel-eti{
  margin:0 0 14px; font-family:var(--m); font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--violet-lo);
  text-align:center;
}
.reels{
  --vuoto:clamp(12px,1.8vw,22px);
  display:grid; gap:var(--vuoto);
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:760px; margin:0 auto;
}
.reel{margin:0; display:grid; gap:10px}
.reel-quadro{
  position:relative; aspect-ratio:9/16; overflow:hidden;
  border-radius:var(--r3); border:1px solid var(--rule); background:var(--sur);
  box-shadow:0 22px 44px -26px rgba(var(--nero-rgb),.95);
}
.reel-foto{
  position:absolute; inset:0;
  background-size:cover; background-position:50% 50%;
}
.reel-quadro iframe{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; border:0;
  /* Il lettore ha i suoi angoli quadrati: senza questo si vedrebbero
     spuntare fuori dal riquadro arrotondato. */
  border-radius:inherit;
}

/* Il bottone copre tutto il riquadro: si preme dove si guarda.
   La scritta sta in basso, su una velatura, cosi' si legge anche
   sopra un fotogramma chiaro. */
.reel-apri{
  position:absolute; inset:0; z-index:2; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:10px; padding:0 10px 14px;
  border:0; background:linear-gradient(to top,
    rgba(var(--nero-rgb),.72) 0%, rgba(var(--nero-rgb),.28) 34%, transparent 62%);
  color:var(--txt); cursor:pointer; text-align:center;
  transition:opacity var(--d2) var(--curva-secca);
}
/* Dove c'e' il mouse l'invito compare avvicinandosi; dove non c'e'
   - il telefono - resta sempre visibile, altrimenti nessuno saprebbe
   che quei tre rettangoli si possono premere. */
@media(hover:hover){
  .reel-apri{opacity:0}
  .reel-quadro:hover .reel-apri,.reel-apri:focus-visible{opacity:1}
}
.reel-triangolo{
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(var(--bianco-rgb),.5);
  background:rgba(var(--nero-rgb),.42);
  display:grid; place-items:center;
}
.reel-triangolo::before{
  content:""; width:0; height:0; margin-left:3px;
  border-left:12px solid var(--txt);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.reel-parola{
  font-family:var(--m); font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.reel figcaption{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-family:var(--m); font-size:11.5px; letter-spacing:-.01em;
}
.reel figcaption b{font-weight:700; color:var(--testo)}
.reel figcaption i{font-style:normal; color:var(--testo-tenue); font-size:10.5px}
.reel-nota{
  margin:16px auto 0; max-width:52ch; text-align:center;
  font-size:var(--t-s); line-height:1.55; color:var(--testo-soft);
}

@media(max-width:560px){
  /* Tre verticali affiancati su un telefono diventano tre francobolli.
     Meglio due, e il terzo sotto: si vede cosa succede dentro. */
  .reels{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:420px}
  /* Il terzo va sotto e deve restare LARGO COME GLI ALTRI DUE.
     Con "margin:0 auto" un elemento di griglia smette di allargarsi e
     si stringe sul contenuto: siccome il riquadro del video non ha
     una larghezza propria - solo un rapporto 9:16 - restava largo
     quanto la didascalia, ottanta pixel. Un francobollo. */
  .reel:last-child{
    grid-column:1 / -1; justify-self:center;
    width:calc(50% - var(--vuoto) / 2);
  }
}

/* Il reel a schermo pieno: verticale, alto quanto lo schermo lascia,
   e nient'altro intorno. La finestra e' la stessa <dialog> nativa
   delle immagini: Esc chiude, il resto della pagina si blocca da
   solo, il fuoco torna dove stava. */
.grande-video-quadro{
  position:relative; aspect-ratio:9/16;
  height:min(88vh, 1000px); max-width:92vw;
  margin:0 auto; border-radius:var(--r3); overflow:hidden;
  background:var(--nero);
}
.grande-video-quadro iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* Il bottone che copia, un attimo dopo aver copiato. Non un avviso
   che compare da un'altra parte: la conferma sta dove hai premuto. */
.bottone[data-fatto]{
  color:var(--teal); border-color:var(--teal);
  box-shadow:0 0 22px var(--alone-teal-largo);
}

/* ---------- press: il testo e il ritratto ------------------------
   Il paragrafo pronto da copiare occupa 62 caratteri di riga: da solo
   lasciava vuota mezza pagina. Accanto ci va la cosa che a chi scrive
   un pezzo serve subito dopo il testo, cioe' una fotografia. */
.kit{display:grid; gap:var(--s5); grid-template-columns:1fr; align-items:start}
@media(min-width:900px){
  .kit{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:var(--s7)}
}
.kit-testo{min-width:0}
.kit-ritratto{margin:0; display:grid; gap:10px}
.kit-foto{
  width:100%; aspect-ratio:4/5; border-radius:var(--r3);
  background-size:cover; background-position:50% 18%;
  border:1px solid var(--rule);
  box-shadow:0 22px 44px -26px rgba(var(--nero-rgb),.95);
}
.kit-ritratto figcaption{
  font-size:var(--t-s); line-height:1.5; color:var(--testo-soft);
}
.kit-ritratto figcaption a{color:var(--teal); text-underline-offset:3px}

/* ---------- AMALUR: testo e immagini a turno ---------------------
   Sul telefono il lavoro era: una fotografia, poi tre paragrafi di
   fila, poi lo sfogliatore, poi i reel. Un muro di testo in mezzo a
   due blocchi di immagini. Da telefono si scorre e si smette di
   leggere prima della meta'.
   Adesso si alternano: fotografia, due paragrafi, i tre reel, il
   resto del testo, lo sfogliatore. Il testo non e' cambiato: e'
   cambiato dove respira.

   Su schermo largo invece la composizione a due colonne funziona, e
   resta: la fotografia a sinistra alta due righe, il testo a destra
   in due tempi uno sotto l'altro. */
@media(min-width:820px){
  .lavoro-amalur .lavoro-media{grid-column:1; grid-row:1 / span 2; align-self:start}
  .lavoro-amalur .lavoro-testo{grid-column:2; grid-row:1}
  .lavoro-amalur .lavoro-seguito{grid-column:2; grid-row:2; align-self:start}
}
/* Da mille pixel in su lo sfogliatore si stringe e i tre reel gli
   vanno ACCANTO invece che sotto. Prima la presentazione prendeva
   tutta la larghezza e i verticali finivano una schermata piu' giu':
   erano due momenti separati, mentre sono la stessa campagna - il
   piano a sinistra, la campagna che si muove a destra.
   Sotto i mille resta uno sotto l'altro: affiancati diventerebbero
   francobolli. */
@media(min-width:1000px){
  .lavoro-amalur .lavoro-deck{grid-column:1; grid-row:3; margin-top:0}
  .lavoro-amalur .lavoro-reel{grid-column:2; grid-row:3; margin-top:0; align-self:start}
  .lavoro-amalur .reels{max-width:none}
  .lavoro-amalur .reel-eti{text-align:left}
  .lavoro-amalur .reel-nota{margin-left:0; margin-right:0; text-align:left; max-width:none}
}
@media(max-width:819px){
  .lavoro-amalur .lavoro-media{order:1}
  .lavoro-amalur .lavoro-testo{order:2}
  .lavoro-amalur .lavoro-reel{order:3}
  .lavoro-amalur .lavoro-seguito{order:4}
  .lavoro-amalur .lavoro-deck{order:5}
}
/* Il seguito del testo ha le stesse regole del primo blocco: e' lo
   stesso testo, spezzato solo per farci passare le immagini. */
.lavoro-seguito{min-width:0}

/* CHI HA FRETTA VA DRITTO AL MODULO (Contatti). Barbara: "ci vuole subito un
   pulsante che rimandi al modulo di contatto, chi non ha tempo non vuole
   leggere tutti i passaggi per arrivarci". Sta sotto le due strade, prima dei
   canali social. E' un collegamento a un punto della stessa pagina: funziona
   in ogni browser, anche senza JavaScript. */
.azione-modulo{ margin:26px 0 0 }