/* Struttura del caso (5/11/2026): regole comuni alle tre proposte osservatorio-caso-{1,2,3}.html, sopra la proposta B.
   La cura della confusione della prova 1: un solo titolo grande, briciole corte su una riga, committente tenue,
   oro solo per ciò che si clicca, pochi stili di testo (titolo, riga del committente, corpo, etichetta, link). */
.ia{
 --crema:#fff7e8;
 --tenue:#f7f9f8b3;
 --titolo:clamp(24px,min(1.6vw,3.2vh),36px);
 --corpo:clamp(16px,min(.8vw,1.7vh),18px);
 --piccolo:clamp(14px,min(.68vw,1.45vh),16px);
 --alto-riga:clamp(38px,min(2.4vw,4.6vh),46px);
 --testa:40px;
 --fondo-schermo:#0c2230;
 --filo-schermo:#fff7e838;
}
@media(min-width:1101px) and (max-height:860px){.ia{--testa:28px}}
@media(min-width:761px) and (max-width:1100px){.ia{--testa:32px}}

/* 1 · Un solo titolo grande. Nei fogli interni il titolo del pannello esce dalla vista (resta ai lettori di schermo);
   riga sopra e introduzione erano già nascoste. Sul foglio iniziale tornano tutti e tre. */
.ia.compatto h1{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ia .foglio h2{font-size:var(--titolo);line-height:1.14;margin-bottom:clamp(12px,1.8vh,22px);text-wrap:balance}

/* 2 · Briciole corte su una riga, alla stessa altezza del pulsante dei contatti. Separatori tenui. */
.ia.compatto .briciole{display:flex;align-items:center;min-height:var(--alto-riga);margin-bottom:clamp(12px,2vh,26px)}
.ia .briciole ol{font-size:var(--piccolo);line-height:1.3;flex-wrap:nowrap;white-space:nowrap;color:var(--tenue)}
.ia .briciole li:not(:first-child)::before{color:var(--tenue);margin:0 .7em}
.ia .briciole a,.ia .briciole button{color:var(--crema);text-decoration-color:#f4c678a6}
.ia .briciole a:hover,.ia .briciole button:hover{color:var(--gold);text-decoration-color:currentColor}
/* Il pulsante dei contatti sta alla stessa altezza in tutti i fogli, così non salta. */
.ia .contatto-alto{top:var(--testa);min-height:var(--alto-riga);padding-block:0}

/* 3 · Committente e anno: una riga piccola e tenue sotto il titolo. */
.work-panel.ia .foglio p.chi{display:flex;flex-wrap:wrap;gap:2px .9em;max-width:none;margin:-4px 0 clamp(14px,2.2vh,28px);font-size:var(--piccolo);line-height:1.35;font-weight:500;color:var(--tenue)!important}
.work-panel.ia .chi span+span{color:inherit;font-weight:inherit}
.work-panel.ia .foglio p.chi:empty{display:none}

/* 4 · Pochi stili: corpo, etichetta (piccola, tenue, semigrassetto), link (crema con la sottolineatura d'oro). */
.ia .caso .parte p{margin:0 0 .85em;font-size:var(--corpo);line-height:1.5;color:var(--testo)}
.ia .caso .parte h4,.ia .caso .rimandi h4,.ia .scelta-materiale h4,.ia .foglio .rimandi h4{margin:0 0 4px;font-size:var(--piccolo);line-height:1.35;font-weight:600;letter-spacing:.01em;color:var(--tenue)}
.ia .caso .rimandi{margin-top:4px}
.ia .caso .rimandi ul{margin-top:2px}
.ia .caso .rimandi button:not(:has(strong)){font-size:var(--corpo);line-height:1.4;font-weight:600;text-decoration-thickness:1px;text-underline-offset:5px}
.ia .caso .rimandi button:hover{color:var(--gold);text-decoration-color:currentColor}

/* Materiale: riquadro scuro con il filo crema (non d'oro: non si clicca), proporzioni del file, nessun ritaglio. */
.ia .materiale{min-width:0}
.ia .palco{position:relative;min-width:0}
.ia .schermo{position:relative;aspect-ratio:var(--ar);border-radius:12px;overflow:hidden;background:var(--fondo-schermo);border:1px solid var(--filo-schermo)}
.ia .schermo[hidden],.ia .didascalia[hidden]{display:none!important}
.ia .schermo video,.ia .schermo img{display:block;width:100%;height:100%;object-fit:contain}
.ia .segnaposto{display:grid;place-items:center}
.ia .segnaposto .riquadro{display:grid;place-items:center;height:100%;max-width:100%;aspect-ratio:var(--ar);background:#15344a;color:var(--tenue);font-size:var(--piccolo);font-weight:500}

/* Didascalia: una riga tenue, al massimo due; lo spazio di due righe resta fermo quando si cambia materiale. */
.ia .didascalie{font-size:var(--piccolo);line-height:1.4;min-height:2.8em}
.ia .didascalia{margin:0;color:var(--tenue);max-width:90ch}

/* Pulsante pausa (si clicca: filo d'oro). */
.ia .media-pausa{position:absolute;right:10px;bottom:10px;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid #f4c678a6;border-radius:10px;background:#0b1f2bd9;color:var(--crema);cursor:pointer;transition:background .2s ease,border-color .2s ease}
.ia .media-pausa:hover{background:#163746e6;border-color:var(--gold)}
.ia .media-pausa svg{width:16px;height:16px;fill:currentColor}
.ia .schermo-video[data-stato="va"] .i-vai,.ia .schermo-video[data-stato="fermo"] .i-pausa{display:none}

/* Miniature: cambiano il materiale. La voce attiva ha il filo d'oro pieno. */
.ia .miniature{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ia .miniatura{position:relative;display:block;width:var(--mini,clamp(72px,4.2vw,104px));aspect-ratio:16/10;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.ia .mini-img{position:absolute;inset:0;border-radius:8px;overflow:hidden;background:#112b3a;box-shadow:0 0 0 1px var(--filo-schermo);opacity:.72;transition:opacity .2s ease,box-shadow .2s ease}
.ia .mini-img img{display:block;width:100%;height:100%;object-fit:cover}
.ia .miniatura:hover .mini-img{opacity:1;box-shadow:0 0 0 1px #f4c678b3}
.ia .miniatura[aria-pressed="true"] .mini-img{opacity:1;box-shadow:0 0 0 2px var(--gold)}
.ia .segno-video{position:absolute;left:6px;bottom:6px;width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:#0b1f2bd9;color:var(--crema)}
.ia .segno-video svg{width:10px;height:10px;fill:currentColor}

/* Suggerimenti disegnati (niente attributo title): al passaggio del mouse e al fuoco da tastiera. */
.ia [data-suggerimento]::after{content:attr(data-suggerimento);display:none;position:absolute;z-index:6;padding:6px 10px;border-radius:8px;border:1px solid #f4c67873;background:#0d2230f5;box-shadow:0 8px 22px #0a161f8c;color:var(--crema);font:600 13px/1.25 "Hanken Grotesk",Arial,sans-serif;letter-spacing:.01em;white-space:nowrap;pointer-events:none}
@media(hover:hover){.ia [data-suggerimento]:hover::after{display:block}}
.ia [data-suggerimento]:focus-visible::after{display:block}
.ia .media-pausa::after{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}
.ia .miniatura::after{left:50%;bottom:calc(100% + 8px);transform:translateX(-50%)}

@media(max-width:760px){
 .ia{--titolo:24px;--corpo:16px;--piccolo:14px}
 .ia .briciole ol{flex-wrap:wrap;white-space:normal}
 .ia.compatto .briciole{margin-bottom:12px}
 .ia .miniatura{--mini:76px}
}
@media(prefers-reduced-motion:reduce){.ia .media-pausa,.ia .mini-img{transition:none}}