/* lavori.css: la pagina dei lavori fatti (PIANO-PAGINE §4.2). Si carica DOPO shell.css e film.css.
   Ogni lavoro ha una battuta di titolo e tre schede (Com'era, Cosa abbiamo fatto, Com'e' andata); la vetrina 3D le recita (lavori.js, vetrina.js). */

/* i caratteri di ERGANE (il marchio ospite): solo per il suo tabellone nella vetrina (vetrina.js) */
@font-face { font-family: "Fjalla One"; src: url("../fonts/fjalla-one-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* l'indice in testa: i tre lavori, con il numero */
.lv-toc { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid rgb(245 243 238 / .12); }
.lv-toc ol { list-style: none; display: grid; gap: .35rem; }
.lv-toc a { display: flex; align-items: baseline; gap: .75rem; padding-block: .45rem; font-weight: 600; text-decoration: none; line-height: 1.35; text-wrap: balance; }
.lv-toc a:hover { text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: .25em; }
.lv-n { font-family: var(--pixel); font-size: 1.5rem; line-height: 1; color: var(--cyan); min-width: 1.1rem; }
.kicker .lv-n { font-size: 1.25rem; margin-right: .35rem; }

/* le schede: problema e soluzione con le stesse etichette delle nuvolette (rosso, verde) */
.lv-case .cs-card { width: min(100%, 33rem); }
.lv-case h2 { font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.3rem); line-height: 1.12; font-weight: 720; letter-spacing: -.02em; text-wrap: balance; }
.tag { display: inline-flex; align-items: center; gap: .45rem; font: 650 var(--t-xs)/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); }
.tag::before { content: ''; width: .55rem; height: .55rem; border-radius: 2px; background: var(--mark-sol, #2fb67c); }
.tag.prob::before { background: var(--mark-prob, #e5484d); }
.cs-card > p.tag + p { margin-top: var(--s-2) !important; }

/* i numeri (come nel cambio del server). Un dl normale, senza role: con role="list" sul dl e "listitem" sui div, dt e dd restavano senza il loro dl
   per i lettori di schermo (revisione n.24) */
.cs-lab { margin-top: var(--s-4); font: 650 var(--t-xs)/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); }
.cs-count { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.25rem; margin-top: var(--s-3); }
.cs-count div { display: flex; flex-direction: column; }
.cs-count dt .num { display: block; font-family: var(--pixel); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1; color: var(--cyan); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-count dd { font-size: var(--t-sm); color: var(--fg-mute); margin-top: .3rem; }
.cs-end { height: 1px; }

/* la battuta di ERGANE: il marchio ufficiale (versione negativa, su fondo scuro) sopra il titolo */
.lv-erg-logo { margin-top: var(--s-2); }
.lv-erg-logo img { display: block; height: 2.4rem; width: auto; }
.lv-erg h3 { margin-top: 0; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.lv-erg-logo + h3 { margin-top: var(--s-3); }