/* riccardopiazza.me — aspetto del sito (quinta versione: poco e sottile).
   Un fondo solo: un'immagine eterea che si muove piano dietro ogni pagina, scelta dal tema (celeste sul
   chiaro, tramonto scurito sullo scuro). Caratteri senza grassetto, linee di un pixel, il colore pieno
   solo sui bottoni che contano. Il tema segue il sistema e si può fissare dal piede (data-tema su <html>):
   ogni regola del tema chiaro sta quindi due volte, :root[data-tema="chiaro"] e la media query con
   :root:not([data-tema="scuro"]). Quasi tutto passa dalle variabili, così le due copie sono una riga. */

@font-face { font-family: "Roboto Slab"; font-weight: 400; font-style: normal; font-display: swap; src: url("/statico/caratteri/roboto-slab-400.woff") format("woff"); }
@font-face { font-family: "Karla"; font-weight: 400; font-style: normal; font-display: swap; src: url("/statico/caratteri/karla-latin.woff2") format("woff2"); } /* solo per il riquadro di Lagom */
@font-face { font-family: "Roboto Slab"; font-weight: 700; font-style: normal; font-display: swap; src: url("/statico/caratteri/roboto-slab-700.woff") format("woff"); } /* il laboratorio e le schede */

:root {
  --azzurro-1: #5CE1E6; /* la barra sottile */
  --azzurro-2: #00C2CB; /* la barra media */
  --azzurro-3: #039A9E; /* la barra larga */
  /* tema scuro: sopra il tramonto scurito. I contrasti sono misurati sul punto più chiaro dell'immagine. */
  --fondo: #2B2B2B;       /* sotto l'immagine e nei pannelli pieni */
  --fondo-2: #343535;
  --fondo-3: #3D3F3F;
  --sotto: #1C1B1A;       /* il colore della pagina finché l'immagine non arriva */
  --inchiostro: #FFFFFF;
  --testo: #F0F1F1;
  --tenue: rgba(255, 255, 255, .82);
  --accento: #5CE1E6;     /* testo e linee d'accento */
  --pieno: #00C2CB;       /* fondo dei bottoni pieni, con testo grafite */
  --sul-pieno: #1E1F1F;
  --avviso: #FFB45C;      /* gli avvisi del laboratorio */
  --linea: rgba(255, 255, 255, .3);
  --lettere: #FFFFFF;     /* le lettere RP del marchio */
  --pezzo: #2B2B2B;       /* il fondo dei pezzi dell'anatra al tratto: copre le linee dietro */
  --ombra: 0 18px 40px -18px rgba(0, 0, 0, .6);
  --carta: #FFFFFF;       /* il foglio delle schede: chiaro nei due temi */
  --su-carta: #2B2B2B;
  --sfondo: var(--sfondo-scuro);
  --etichetta-chiaro: none; --etichetta-scuro: block;
  --carattere: "Roboto Slab", "Rockwell", Georgia, serif;
  --raggio: 3px;
  --largo: 1200px;
  --margine: clamp(20px, 5vw, 56px);
  --testata: 72px;
  color-scheme: dark;
}
/* tema chiaro: sopra il celeste. I contrasti sono misurati sul punto più scuro dell'immagine. */
:root[data-tema="chiaro"] {
  --fondo: #F4F6F6; --fondo-2: #FFFFFF; --fondo-3: #E6ECEC; --sotto: #F4F6F6; --inchiostro: #1E1F1F; --testo: #2B2B2B;
  --tenue: rgba(30, 31, 31, .78); --accento: #005F65; --avviso: #9A4D00; --linea: rgba(30, 31, 31, .3); --lettere: #2B2B2B; --pezzo: #F8FBFB;
  --ombra: 0 18px 40px -20px rgba(0, 40, 42, .35); --sfondo: var(--sfondo-chiaro); --etichetta-chiaro: block; --etichetta-scuro: none; color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="scuro"]) {
    --fondo: #F4F6F6; --fondo-2: #FFFFFF; --fondo-3: #E6ECEC; --sotto: #F4F6F6; --inchiostro: #1E1F1F; --testo: #2B2B2B;
    --tenue: rgba(30, 31, 31, .78); --accento: #005F65; --avviso: #9A4D00; --linea: rgba(30, 31, 31, .3); --lettere: #2B2B2B; --pezzo: #F8FBFB;
    --ombra: 0 18px 40px -20px rgba(0, 40, 42, .35); --sfondo: var(--sfondo-chiaro); --etichetta-chiaro: block; --etichetta-scuro: none; color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--sotto); color: var(--testo); font: 400 17px/1.6 var(--carattere); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .32em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 4px; border-radius: 2px; }
h1, h2, h3 { color: var(--inchiostro); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; margin: 0; }
p { margin: 0 0 1em; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dentro { width: 100%; max-width: var(--largo); margin: 0 auto; padding: 0 var(--margine); }
.stretto { max-width: 760px; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--pieno); color: var(--sul-pieno); padding: 12px 16px; }
.salta:focus { top: 12px; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- lo sfondo: nebbia che si muove ---------- */
/* La stessa immagine due volte, una dritta e una specchiata sopra, che derivano in versi opposti con una
   piccola rotazione mentre quella sopra respira. Solo transform e opacity. Ingrandite 1,3 e 1,4 volte: agli
   estremi i bordi non si scoprono (collaudo/sfondo.mjs). Alta 100lvh: le barre del telefono non la scoprono. */
.cielo { position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; z-index: -1; overflow: hidden; pointer-events: none; }
.cielo i { position: absolute; inset: 0; display: block; background: var(--sfondo) center / cover no-repeat; }
.cielo .a { transform: scale(1.3); }
.cielo .b { transform: scale(-1.4, 1.4); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .cielo .a { animation: deriva-a 46s ease-in-out infinite alternate; will-change: transform; }
  .cielo .b { animation: deriva-b 62s ease-in-out infinite alternate, respiro 19s ease-in-out infinite alternate; will-change: transform, opacity; }
  @keyframes deriva-a { from { transform: translate(5%, -3%) rotate(-1.5deg) scale(1.3); } to { transform: translate(-6%, 4%) rotate(2deg) scale(1.3); } }
  @keyframes deriva-b { from { transform: translate(-6%, 5%) rotate(2deg) scale(-1.4, 1.4); } to { transform: translate(6%, -5%) rotate(-2deg) scale(-1.4, 1.4); } }
  @keyframes respiro { from { opacity: .25; } to { opacity: .7; } }
}
.con-etichette .cielo .etichetta-foto { top: auto; bottom: 10px; }
.con-etichette .cielo .solo-chiaro { display: var(--etichetta-chiaro); }
.con-etichette .cielo .solo-scuro { display: var(--etichetta-scuro); }

/* ---------- le parole piccole e gli inviti ---------- */
.occhiello { margin: 0 0 22px; color: var(--tenue); font-size: 14px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; }
.marchio .rp, .marchio-mini .rp, .marchio-foglio .rp, .marchio-firma .rp, .segnaposto .rp { fill: var(--lettere); }
.sotto { color: var(--tenue); max-width: 30em; margin: 20px auto 0; }
.piccolo { font-size: 14px; color: var(--tenue); margin: 10px 0 0; }
.piccolo a, .piccolo button { display: inline-flex; align-items: center; min-height: 44px; color: var(--inchiostro); }
.piccolo button, .copia-link, .altro-esempio, .tema { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; }
.va { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--inchiostro); }
@media (hover: hover) and (pointer: fine) { .va .ico { transition: transform .18s ease; } .va:hover .ico { transform: translateX(3px); } }

/* ---------- bottoni: uno solo pieno per schermata ---------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px;
  border: 1px solid var(--inchiostro); border-radius: var(--raggio); background: transparent; color: var(--inchiostro);
  font-weight: 400; font-size: 17px; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.bottone.pieno { background: var(--pieno); border-color: var(--pieno); color: var(--sul-pieno); }
.bottone.piccolo { min-height: 44px; padding: 8px 16px; font-size: 16px; }
.bottone:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .bottone:not(.pieno):hover { background: var(--inchiostro); color: var(--fondo); }
  .bottone.pieno:hover { background: var(--azzurro-1); border-color: var(--azzurro-1); }
  .bottone .ico { transition: transform .18s ease; }
  .bottone:hover .ico:last-child { transform: translateX(3px); }
}
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

/* ---------- testata: il logo e quattro voci ---------- */
.testata { position: relative; z-index: 50; height: var(--testata); }
.testata-dentro { height: 100%; padding: 0 var(--margine); display: flex; align-items: center; gap: 16px; }
.casa { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-right: auto; text-decoration: none; }
.marchio-mini { height: 28px; width: auto; }
.nome-mini { height: 14px; width: auto; fill: var(--inchiostro); }
.nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav a, .apri-menu { display: flex; align-items: center; min-height: 44px; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--tenue); }
.nav a[aria-current] { color: var(--inchiostro); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--inchiostro); } }
.nav .nav-chiudi, .apri-menu { display: none; }
@media (max-width: 859px) {
  .apri-menu { display: flex; color: var(--inchiostro); }
  .nav { position: absolute; top: var(--testata); left: 0; right: 0; background: var(--fondo-2); border-block: 1px solid var(--linea); padding: 8px var(--margine) 16px; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
  .nav:target, .nav.aperta { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { min-height: 52px; color: var(--inchiostro); }
  .nav .nav-chiudi { display: flex; color: var(--tenue); }
  html.js .nav .nav-chiudi { display: none; }
}

/* ---------- il filo: le tre barre del logo, sottili, da una frase all'altra ---------- */
.filo { display: flex; justify-content: center; gap: 3px; height: clamp(64px, 10vw, 104px); margin: 0 auto; }
.filo i { display: block; height: 100%; width: 1px; background: var(--azzurro-1); transform-origin: top; }
.filo i:nth-child(2) { width: 2px; background: var(--azzurro-2); }
.filo i:nth-child(3) { width: 4px; background: var(--azzurro-3); }

/* ---------- una frase per volta ---------- */
.passo { padding: clamp(44px, 7vw, 84px) var(--margine); text-align: center; }
.frase { font-size: clamp(2rem, 7.4vw, 4.2rem); line-height: 1.08; letter-spacing: -.03em; max-width: 15em; margin: 0 auto; text-wrap: balance; }
.frase-sinistra { margin: 0 0 20px; font-size: clamp(2rem, 5vw, 3.2rem); }
.titolone { font-size: clamp(3.2rem, 14.5vw, 7.5rem); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.passo .disegno { margin-top: clamp(28px, 5vw, 48px); }
.dopo-righe { margin: 26px 0 0; }

/* ---------- la prima schermata: una frase, una riga su cui scrivere, un bottone ---------- */
.apertura { min-height: calc(100svh - var(--testata)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px var(--margine) 48px; text-align: center; }
.domanda { display: block; margin: 30px 0 4px; color: var(--tenue); }
.campo { display: block; width: min(600px, 100%); margin: 0 auto; padding: 12px 2px; min-height: 76px; resize: none; background: none; color: var(--inchiostro); border: 0; border-bottom: 1px solid var(--inchiostro); border-radius: 0; text-align: center; font: 400 20px/1.5 var(--carattere); }
.campo::placeholder { color: var(--tenue); opacity: 1; }
.campo:focus { outline: none; border-bottom-color: var(--accento); box-shadow: 0 1px 0 var(--accento); }
/* l'esempio tiene sempre lo stesso posto: cambiando frase, e con o senza JavaScript, la pagina non salta */
.esempio { margin: 4px 0 18px; font-size: 15px; color: var(--tenue); min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.spunto { min-height: 44px; padding: 0; background: none; border: 0; border-bottom: 1px dotted var(--tenue); color: var(--inchiostro); cursor: pointer; }
html:not(.js) .esempio { visibility: hidden; }
@media (max-width: 560px) { .esempio { flex-direction: column; gap: 0; min-height: 68px; } }
@media (prefers-reduced-motion: no-preference) { .spunto { transition: opacity .35s; } .spunto.via { opacity: 0; } }

/* ---------- i disegni al tratto: uno per frase, dentro un cerchio ---------- */
.disegno { display: block; width: min(360px, 80vw); height: auto; margin-inline: auto; overflow: visible; color: var(--inchiostro); }
.disegno * { vector-effect: non-scaling-stroke; }
.tratto { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.cornice { fill: none; stroke: var(--linea); stroke-width: 1; }
.tratto.acc, .acc .tratto, g.acc path { stroke: var(--accento); }
.pieno-acc, .disegno .pieno { fill: var(--accento); stroke: none; }
.partenza { fill: currentColor; }
.f1 { fill: var(--azzurro-1); } .f2 { fill: var(--azzurro-2); } .f3 { fill: var(--azzurro-3); }
.pezzo { fill: var(--pezzo); }
.pezzo .occhio { fill: currentColor; stroke: none; }
/* Senza JavaScript, o col movimento ridotto, ogni disegno mostra la sua figura finale, ferma. Con
   JavaScript parte dallo stato di prima e arriva quando entra nello schermo (sito.js mette «on»). */
.p { transform: translate(var(--x2), var(--y2)); }
.p .casella, .albero { opacity: 0; }
.viandanti { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .p { transform: translate(var(--x1), var(--y1)); transition: transform 1.5s cubic-bezier(.65, 0, .2, 1); }
  html.js .p .casella { opacity: 1; transition: opacity .5s .2s; }
  html.js .p .persona { opacity: 0; transition: opacity .7s .7s; }
  html.js .albero { opacity: .55; transition: opacity .6s; }
  html.js .raggi path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s 1.5s; }
  html.js .cuore { opacity: 0; transition: opacity .5s 1.6s; }
  html.js .on .p { transform: translate(var(--x2), var(--y2)); }
  html.js .on .p .casella, html.js .on .albero { opacity: 0; }
  html.js .on .p .persona, html.js .on .cuore { opacity: 1; }
  html.js .on .raggi path { stroke-dashoffset: 0; }
  html.js .on .p .persona { animation: respira 4.5s ease-in-out infinite; animation-delay: var(--r); }
  html.js .on .anello { animation: batte 3s ease-out 2.2s infinite; transform-origin: 200px 205px; }
  @keyframes respira { 50% { transform: translateY(-3px); } }
  @keyframes batte { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
  .onda { animation: scorre 7s linear infinite; }
  @keyframes scorre { to { transform: translateX(-80px); } }
  html.js .sotto-acqua { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s .4s ease-out; }
  html.js .on .sotto-acqua { stroke-dashoffset: 0; }
  html.js .fondo-p { opacity: 0; transition: opacity .5s; }
  html.js .on .fondo-p { opacity: 1; }
  html.js .on .f1 { transition-delay: .9s; } html.js .on .f2 { transition-delay: 1.5s; } html.js .on .f3 { transition-delay: 2.1s; }
  html.js .strada { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease-out; }
  html.js .on .strada { stroke-dashoffset: 0; }
  html.js .on .strada:nth-of-type(2) { transition-delay: .25s; } html.js .on .strada:nth-of-type(3) { transition-delay: .5s; } html.js .on .strada:nth-of-type(4) { transition-delay: .75s; }
  html.js .viandanti { display: inline; opacity: 0; transition: opacity .4s 2s; }
  html.js .on .viandanti { opacity: 1; }
}
.onda { opacity: .7; } .sotto-acqua { opacity: .6; }

/* ---------- su misura: gli strati ---------- */
/* gli esempi stanno nella stessa cella: l'altezza è quella del più alto, con e senza JavaScript */
.esempi { display: grid; max-width: 30em; margin: 34px auto 0; text-align: left; }
.strati { grid-area: 1 / 1; list-style: none; margin: 0; padding: 0; visibility: hidden; opacity: 0; }
.strati.attivo { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .strati { transition: opacity .4s; } }
.strati li { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 16px; padding: 12px 0; }
.strati li:nth-child(2) { margin-left: 22px; } .strati li:nth-child(3) { margin-left: 44px; }
.strati i { width: 9px; height: 9px; border-radius: 50%; margin-top: 8px; background: var(--azzurro-1); }
.strati li:nth-child(2) i { background: var(--azzurro-2); } .strati li:nth-child(3) i { background: var(--azzurro-3); }
.strati small { display: block; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.strati span { font-size: 1.15rem; color: var(--inchiostro); }
html:not(.js) .altro-esempio { visibility: hidden; }

/* ---------- come lavoro: le quattro strade, righe che si aprono ---------- */
.righe { max-width: 720px; margin: 36px auto 0; text-align: left; border-top: 1px solid var(--linea); }
.righe details { border-bottom: 1px solid var(--linea); }
.righe summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 72px; padding: 10px 0; cursor: pointer; }
.righe summary::-webkit-details-marker { display: none; }
.righe summary b { font-weight: 400; font-size: clamp(1.3rem, 4vw, 1.75rem); letter-spacing: -.01em; display: block; color: var(--inchiostro); }
.righe summary small { font-size: 14px; color: var(--tenue); }
.righe summary::after { content: "+"; font-size: 1.6rem; width: 44px; text-align: center; color: var(--tenue); }
.righe details[open] summary::after { content: "–"; }
.dentro-riga { padding: 0 0 22px; max-width: 36em; color: var(--tenue); }
.dentro-riga p { margin: 0 0 6px; }

/* ---------- chi sono, nella home: tre numeri e i nomi ---------- */
.numeri { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 640px; margin: 36px auto 26px; }
.numero { display: block; font-size: clamp(2.2rem, 8vw, 3.8rem); line-height: 1; letter-spacing: -.03em; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.numero-etichetta { display: block; font-size: 14px; color: var(--tenue); margin-top: 10px; line-height: 1.4; }
.dove-titolo { margin: 44px 0 0; line-height: 1.6; }
.luoghi { color: var(--tenue); max-width: 40em; margin: 8px auto 0; font-size: 15px; }
.corsista { max-width: 34em; margin: 26px auto 0; }

/* ---------- le proposte ---------- */
.passo-cima { padding-top: clamp(28px, 5vw, 56px); }
.tre-passi { list-style: none; counter-reset: passo; margin: 44px auto 0; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; text-align: left; }
.tre-passi li { counter-increment: passo; padding-top: 16px; border-top: 1px solid var(--linea); }
.tre-passi li::before { content: counter(passo); display: block; font-size: 14px; color: var(--tenue); margin-bottom: 6px; }
.tre-passi li:nth-child(1) { border-top-color: var(--azzurro-1); } .tre-passi li:nth-child(2) { border-top-color: var(--azzurro-2); } .tre-passi li:nth-child(3) { border-top-color: var(--azzurro-3); }
.tre-passi h2 { font-size: 1.5rem; margin-bottom: 8px; }
.tre-passi p { margin: 0; color: var(--tenue); }
.temi { max-width: 860px; margin: 44px auto 0; text-align: left; }
.gruppo-tema + .gruppo-tema { margin-top: 48px; }
.tema-nome { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); margin-bottom: 10px; }
.proposte-elenco { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.proposta a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--linea); text-decoration: none; }
.proposta-nome { grid-column: 1; font-size: clamp(1.25rem, 3.4vw, 1.6rem); letter-spacing: -.01em; color: var(--inchiostro); line-height: 1.2; }
.proposta-sotto { grid-column: 1; font-size: 14px; color: var(--accento); }
.proposta-breve { grid-column: 1; color: var(--tenue); }
.proposta-fatti { grid-column: 1; font-size: 14px; color: var(--tenue); }
.proposta-scheda { grid-column: 2; grid-row: 1 / span 4; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--inchiostro); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .proposta a:hover .proposta-nome { text-decoration: underline; text-decoration-thickness: 1px; } .proposta a:hover .ico { transform: translateX(3px); } .proposta .ico { transition: transform .18s ease; } }
@media (max-width: 640px) { .tre-passi { grid-template-columns: minmax(0, 1fr); } .proposta-scheda { grid-column: 1; grid-row: auto; margin-top: 6px; min-height: 24px; } }
.proposta-aperta { max-width: 34em; margin: 56px auto 0; }
.proposta-aperta .proposta-nome { margin-bottom: 6px; }
.proposta-aperta p { color: var(--tenue); }
.proposta-aperta .proposta-nome { color: var(--inchiostro); }

/* ---------- i contatti, in fondo a ogni pagina ---------- */
.piede { padding: clamp(44px, 7vw, 84px) 0 40px; text-align: center; }
.recapiti { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 30px; font-size: 1.15rem; }
.recapiti .va { text-decoration: underline; text-decoration-thickness: 1px; }
.numero-chiaro, .dove-sono { color: var(--tenue); font-size: 15px; margin: 14px 0 0; }
.senza { color: var(--tenue); max-width: 34em; margin: 30px auto 0; }
/* Lagom tiene il suo marchio anche qui: carta, inchiostro e tortora di lagomconsulting.it */
.lagom { margin: 56px auto 48px; padding: 22px 24px; background: #FAF8F5; color: #1F1D1B; font-family: "Karla", system-ui, sans-serif; border-radius: 4px; border-left: 4px solid #C2AB92; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; max-width: 820px; text-align: left; }
.lagom p { margin: 0; font-size: 17px; line-height: 1.5; flex: 1 1 320px; }
.lagom-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #1F1D1B; }
.lagom-link img { width: 190px; height: auto; }
/* il logo intero: marchio, nome e «Human centered consultancy» */
.firma { display: grid; justify-items: center; gap: 12px; width: min(100%, 240px); margin: 0 auto 36px; }
.marchio-firma { width: 40%; height: auto; }
.nome-firma, .payoff-firma { width: 100%; height: auto; fill: var(--inchiostro); }
.payoff-firma { fill: var(--tenue); }
.legale { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; align-items: center; padding-top: 20px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--tenue); }
.legale p { margin: 0; display: flex; align-items: center; min-height: 44px; }
.legale a, .legale .tema { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.legale .marchi { flex-basis: 100%; justify-content: center; max-width: 60em; margin: 6px auto 0; }

/* sul telefono, passata la prima schermata, i due gesti restano sotto il pollice */
.pollice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; align-items: center; justify-content: space-between; gap: 16px; padding: 8px var(--margine) calc(8px + env(safe-area-inset-bottom)); background: var(--fondo); border-top: 1px solid var(--linea); transform: translateY(110%); }
.pollice .bottone { min-height: 46px; flex: 1; }
.pollice .va { text-decoration: underline; text-decoration-thickness: 1px; }
@media (max-width: 859px) {
  html.js .pollice { display: flex; }
  .pollice.su { transform: none; }
  .pagina-home .piede { padding-bottom: 104px; }
}
@media (prefers-reduced-motion: no-preference) { .pollice { transition: transform .25s ease; } }

/* ---------- comparire scorrendo ---------- */
/* Chi nasconde è lo stesso codice che fa comparire: sito.js mette «arriva» solo a quello che sta sotto lo
   schermo, e «on» quando ci entra (con un controllo di posizione a ogni scorrimento, non solo l'osservatore). */
@media (prefers-reduced-motion: no-preference) {
  html.js .entra.arriva { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
  html.js .entra.arriva.on { opacity: 1; transform: none; }
  html.js .filo.arriva i { transform: scaleY(0); transition: transform .9s ease; }
  html.js .filo.arriva.on i { transform: none; }
  html.js .filo.arriva.on i:nth-child(2) { transition-delay: .12s; } html.js .filo.arriva.on i:nth-child(3) { transition-delay: .24s; }
}

/* ---------- le pagine interne: titoli e testo a sinistra ---------- */
.sezione { padding: clamp(44px, 7vw, 84px) 0; }
.titolo-sezione { font-size: clamp(2rem, 5.4vw, 3.4rem); max-width: 18ch; margin-bottom: 20px; letter-spacing: -.03em; }
.titolo-piccolo { font-size: 26px; margin-bottom: 16px; }
.intro { font-size: clamp(17px, 2vw, 20px); color: var(--tenue); max-width: 46ch; }
.chi-griglia { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ritratto { aspect-ratio: 1; }
@media (max-width: 760px) { .chi-griglia { grid-template-columns: minmax(0, 1fr); } .ritratto { max-width: 280px; } }
.laboratorio { padding-top: clamp(20px, 4vw, 48px); text-align: center; }
.laboratorio .lab-palco { text-align: left; margin-top: 8px; }
.pagina-testo main p { max-width: 62ch; }

/* ---------- le foto d'aula ---------- */
/* la striscia di foto d'aula: scorre di lato, col dito, la rotella o le frecce */
.galleria { margin-top: clamp(40px, 6vw, 64px); overflow-x: auto; scroll-padding-inline: max(var(--margine), calc((100vw - var(--largo)) / 2 + var(--margine))); overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 10px; }
.galleria ul { list-style: none; margin: 0; padding: 0 max(var(--margine), calc((100vw - var(--largo)) / 2 + var(--margine))); display: flex; gap: 14px; width: max-content; }
.galleria li { scroll-snap-align: start; height: clamp(260px, 34vw, 400px); }
.galleria .foto { height: 100%; }
.galleria img { height: 100%; width: auto; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .galleria img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .galleria li:hover img { transform: scale(1.04); }
}
.galleria-nota { margin: 10px 0 0; padding: 0 var(--margine); font-size: 14px; color: var(--tenue); text-align: center; }
/* ---------- foto e segnaposto ---------- */
.foto { position: relative; margin: 0; border-radius: 6px; overflow: hidden; background: var(--fondo-3); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto.vuota { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px dashed var(--linea); }
.segnaposto { width: 34%; height: auto; opacity: .35; }
.etichetta-foto { display: none; }
.con-etichette .etichetta-foto { display: block; position: absolute; top: 10px; left: 10px; z-index: 3; background: #FFE14D; color: #1E1F1F; font: 700 14px/1 var(--carattere); padding: 6px 8px; border-radius: 2px; letter-spacing: .06em; }

/* ---------- la sfida dell'anatra ---------- */
.sfida-griglia { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
/* alta quanto dieci righe, con e senza JavaScript e con o senza classifica: la pagina non salta */
.sfida-tabellone { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 6px; padding: 22px 24px; height: 590px; overflow: hidden; }
.sfida-tabellone h3 { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--accento); margin-bottom: 14px; }
.sfida-avviso { margin: 0; color: var(--tenue); }
.sfida-avviso:empty { display: none; }
.classifica { list-style: none; margin: 0; padding: 0; counter-reset: posto; }
.classifica li { counter-increment: posto; display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 18px; line-height: 1.4; white-space: nowrap; }
.classifica-nome { overflow: hidden; text-overflow: ellipsis; }
.classifica li::before { content: counter(posto); font-weight: 700; color: var(--tenue); font-variant-numeric: tabular-nums; }
.classifica li:nth-child(-n+3)::before { color: var(--accento); }
.classifica-nome { color: var(--inchiostro); }
.classifica-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.classifica li.tua { background: color-mix(in srgb, var(--pieno) 18%, transparent); }
@media (max-width: 899px) { .sfida-griglia { grid-template-columns: minmax(0, 1fr); } }
/* dentro il laboratorio */
.sfida-regole { margin: 0; padding-left: 1.2em; max-width: 60ch; display: grid; gap: 6px; }
.sfida-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; }
.sfida-tempo { margin: 0; font-size: clamp(36px, 5vw, 52px); font-weight: 700; line-height: 1; color: var(--inchiostro); font-variant-numeric: tabular-nums; min-width: 2ch; }
.sfida-tempo.sfida-poco { color: var(--avviso); }
.sfida-conta { margin: 0; font-size: 22px; font-weight: 700; color: var(--accento); }
.sfida-conta:focus { outline: none; }
.sfida-striscia { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; width: 100%; min-height: 98px; }
.sfida-striscia li { background: var(--fondo); border-radius: 4px; padding: 4px; }
.sfida-striscia img { display: block; width: 120px; height: 90px; object-fit: contain; }
.sfida-tutte { justify-content: center; min-height: 0; }
.sfida-modulo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: min(100%, 560px); align-items: end; }
.sfida-modulo label { grid-column: 1 / -1; font-weight: 700; color: var(--inchiostro); }
.sfida-modulo input { min-height: 56px; padding: 8px 14px; border-radius: 3px; border: 1.5px solid var(--linea); background: var(--fondo); color: var(--inchiostro); font: inherit; font-size: 28px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.sfida-modulo input:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }
.sfida-esito, .sfida-nota { grid-column: 1 / -1; margin: 0; }
.sfida-esito { font-weight: 700; color: var(--inchiostro); min-height: 1.5em; }
.sfida-nota { font-size: 15px; color: var(--tenue); }
.sfida-classifica { width: min(100%, 560px); }
.sfida-posto { font-size: 22px; font-weight: 700; color: var(--inchiostro); text-align: center; margin: 0 0 10px; }
@media (max-width: 520px) { .sfida-modulo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- il laboratorio dell'anatra ---------- */
.atti { list-style: none; margin: 30px 0 22px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.atti li { display: flex; align-items: center; gap: 10px; color: var(--tenue); font-size: 16px; }
.atto-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linea); font-size: 14px; }
.atti li[aria-current], .atti li.fatto { color: var(--inchiostro); }
.atti li[aria-current] .atto-num { border-color: var(--pieno); background: var(--pieno); color: var(--sul-pieno); }
/* Il palco del laboratorio. Nel primo atto ha un'altezza fissa, uguale con e senza JavaScript (le ancore
   sotto non si spostano); dopo cresce con quello che c'è dentro. */
:root { --lab-alto: clamp(600px, 84vh, 760px); }
@media (max-width: 760px) { :root { --lab-alto: 740px; } }
.lab-palco { position: relative; border-radius: 8px; background: var(--fondo-2); border: 1px solid var(--linea); box-shadow: var(--ombra); overflow: hidden; height: var(--lab-alto); }
.lab-palco.lab-libero { height: auto; overflow: visible; }
.lab-attesa { position: relative; height: 100%; display: grid; place-items: center; }
.lab-attesa > * { grid-area: 1 / 1; }
.lab-foto { width: 100%; height: 100%; border-radius: 0; }
.senza-js-testo { margin: 16px; padding: 18px 22px; max-width: 40ch; border-radius: 8px; background: color-mix(in srgb, var(--fondo) 92%, transparent); color: var(--testo); font-weight: 700; text-align: center; position: relative; z-index: 2; }
html.js .senza-js-testo { visibility: hidden; }
.lab { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: clamp(12px, 2vw, 22px); }
.lab-libero .lab { height: auto; gap: 16px; padding: clamp(18px, 3vw, 32px); align-items: center; }
.lab-istr { margin: 0; color: var(--tenue); font-size: 16px; }
.lab-tastiera { font-size: 14px; }
@media (hover: none), (max-width: 760px) { .lab-tastiera { display: none; } }
.lab-ricevuta { margin: 0; font-weight: 700; color: var(--accento); }
.lab-banco { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; width: 100%; }
.lab-libero .lab-banco { height: min(560px, 70vh); flex: none; }
.lab-scena { position: relative; min-height: 0; border-radius: 6px; background: radial-gradient(ellipse at 50% 70%, var(--fondo-3), var(--fondo) 75%); overflow: hidden; }
.lab-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; outline: none; }
.lab-canvas:active { cursor: grabbing; }
.lab-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--accento); }
.lab-vassoio { list-style: none; margin: 0; padding: 6px; display: grid; grid-auto-rows: max-content; gap: 6px; overflow-y: auto; background: var(--fondo); border-radius: 6px; }
.lab-pezzo { width: 100%; min-height: 64px; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1.5px solid var(--linea); border-radius: 4px; background: var(--fondo-2); color: var(--testo); font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.lab-pezzo img { width: 72px; height: 54px; object-fit: contain; }
.lab-pezzo:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .lab-pezzo:hover { border-color: var(--accento); } }
.lab-vassoio-vuoto { padding: 12px; color: var(--tenue); font-size: 14px; }
.lab-comandi { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-comandi .bottone:disabled { color: var(--tenue); border-color: var(--linea); border-style: dashed; background: transparent; cursor: default; transform: none; box-shadow: none; }
.lab-stato { margin: 0; min-height: 1.5em; font-weight: 700; color: var(--inchiostro); font-size: 16px; }
.lab-azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.lab-libero .lab-azioni { justify-content: center; }
.lab-titolo { margin: 0; font-size: clamp(22px, 2.6vw, 30px); text-align: center; max-width: 30ch; }
.lab-titolo:focus, .lab-msg:focus { outline: none; }
.lab-libero .lab-istr { text-align: center; max-width: 62ch; }
.lab-niente { margin: auto; padding: 24px; max-width: 46ch; text-align: center; font-weight: 700; }
.lab-galleria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: min(100%, 960px); }
.lab-galleria li { background: var(--fondo); border-radius: 6px; padding: 8px; text-align: center; }
.lab-galleria li.lab-tua { outline: 3px solid var(--pieno); }
.lab-galleria img { width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: contain; }
.lab-galleria span { display: block; font-size: 14px; color: var(--tenue); }
.lab-msg { margin: 0; max-width: 58ch; text-align: center; }
.lab-msg p { margin: 0 0 8px; font-size: 19px; }
.lab-msg .lab-msg-titolo { font-size: clamp(24px, 3.4vw, 36px); font-weight: 700; color: var(--inchiostro); line-height: 1.15; }
@media (max-width: 520px) {
  /* sul telefono i comandi sono solo icone (il nome resta per lo screen reader), così stanno in una riga */
  .lab-comandi .bottone { padding: 8px 12px; }
  .lab-comandi .bottone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lab-azioni .bottone { flex: 1 1 auto; }
}
@media (max-width: 760px) {
  .lab-banco { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 96px; }
  .lab-libero .lab-banco { height: min(620px, 80vh); }
  .lab-vassoio { grid-auto-flow: column; grid-auto-columns: 132px; grid-auto-rows: auto; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  .lab-pezzo { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; min-height: 84px; padding: 4px; font-size: 14px; line-height: 1.2; }
  .lab-pezzo img { width: 64px; height: 44px; }
}

/* ---------- schede dei formati ---------- */
.scheda { padding: 32px 0 96px; }
.scheda-su a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: var(--inchiostro); }
.foglio { background: var(--carta); color: var(--su-carta); --inchiostro: #1E1F1F; --testo: #2B2B2B; --tenue: #535A5A; --accento: #00747A; --lettere: #2B2B2B; --linea: rgba(0, 0, 0, .14);
  border-radius: 6px; padding: clamp(26px, 5vw, 64px); margin: 12px 0 28px; box-shadow: var(--ombra); max-width: 900px; }
.foglio-firma { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.marchio-foglio { height: 42px; width: auto; }
.nome-foglio { height: 22px; width: auto; fill: #1E1F1F; }
.foglio h1 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 14px; letter-spacing: -.03em; }
.foglio .occhiello { letter-spacing: .14em; }
.foglio-sotto { font-size: 16px; font-weight: 700; color: var(--accento); letter-spacing: .04em; margin: -4px 0 12px; }
.foglio-breve { font-size: 21px; color: var(--tenue); margin-bottom: 34px; }
.foglio-nome { display: grid; gap: 6px; }
.payoff-foglio { height: 10px; width: auto; fill: #2B2B2B; }
.scheda-partenza { margin: 18px 0 0; padding: 14px 16px; border-left: 4px solid var(--azzurro-2); background: #F1F6F6; font-size: 16px; }
.scheda-voce { padding: 20px 0; border-top: 1px solid var(--linea); }
.scheda-voce h2 { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--accento); margin-bottom: 10px; }
.scheda-voce p:last-child { margin-bottom: 0; }
.scheda-passi { margin: 0; padding-left: 1.3em; }
.scheda-passi li { margin-bottom: 6px; }
.scheda-temi { font-weight: 700; padding: 14px 0; }
.scheda-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
@media (max-width: 640px) { .scheda-due { grid-template-columns: minmax(0, 1fr); } }
.foglio-piede { margin-top: 20px; padding-top: 18px; border-top: 3px solid #2B2B2B; font-size: 15px; color: var(--tenue); }
.foglio-piede p { margin: 0; }
.foglio .occhiello { color: var(--accento); }
.altri-formati { margin-top: 64px; }
.altri-formati h2 { font-size: 24px; margin-bottom: 16px; }
.altri-formati ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.altri-formati a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; min-height: 88px; padding: 16px 0; border-top: 1px solid var(--linea); text-decoration: none; color: var(--inchiostro); }
.altri-formati small { grid-column: 1; color: var(--tenue); font-size: 15px; }
.altri-formati .ico { grid-row: 1 / span 2; grid-column: 2; }
@media (hover: hover) and (pointer: fine) { .altri-formati a:hover span { text-decoration: underline; text-decoration-thickness: 1px; } }

/* ---------- chi sono: il percorso ---------- */
.lato { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--accento); margin-bottom: 18px; }
.tracce { list-style: none; padding: 0; margin: 0 0 32px; }
.traccia { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--linea); }
.traccia-num { font-weight: 700; color: var(--tenue); font-size: 17px; padding-top: 3px; }
.traccia h3 { font-size: 24px; margin-bottom: 6px; }
.traccia-anno { color: var(--accento); font-size: 17px; margin-left: 6px; }
.traccia p { margin: 0; }
.elenco-studi { padding-left: 1.2em; }
.elenco-studi li { margin-bottom: 6px; }

/* ---------- 404 ---------- */
.e404 { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.e404-foto { aspect-ratio: 4 / 3; }
.rotte { padding-left: 1.2em; }
.rotte a { display: inline-flex; min-height: 44px; align-items: center; }
.forse { font-size: 20px; font-weight: 700; }
.forse a { color: var(--accento); }
@media (max-width: 760px) { .e404 { grid-template-columns: minmax(0, 1fr); } .e404-foto { max-width: 360px; } }

/* ---------- l'avviso in basso ---------- */
.avviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; background: var(--inchiostro); color: var(--fondo); padding: 12px 20px; border-radius: var(--raggio); box-shadow: var(--ombra); max-width: calc(100vw - 32px); }

/* ---------- stampa: la scheda del formato su un foglio ---------- */
@media print {
  @page { size: A4; margin: 12mm 14mm; }
  :root { --carta: #fff; }
  body { background: #fff; color: #2B2B2B; font-size: 10.5pt; line-height: 1.4; }
  .testata, .piede, .scheda-su, .scheda-azioni, .altri-formati, .salta, .avviso, .etichetta-foto, .cielo, .pollice { display: none !important; }
  .scheda { padding: 0; }
  .dentro { padding: 0; max-width: none; }
  .foglio { box-shadow: none; padding: 0; margin: 0; max-width: none; }
  .foglio h1 { font-size: 22pt; margin-bottom: 6pt; }
  .foglio-sotto { font-size: 10.5pt; margin: 0 0 6pt; }
  .foglio-breve { font-size: 13pt; margin-bottom: 10pt; }
  .foglio .occhiello { margin-bottom: 8pt; }
  .scheda-partenza { font-size: 9.5pt; padding: 6pt 9pt; margin-top: 10pt; }
  .scheda-voce { padding: 6pt 0; break-inside: avoid; }
  .scheda-voce h2 { margin-bottom: 4pt; }
  .scheda-passi li { margin-bottom: 2pt; }
  .scheda-temi { padding: 4pt 0; }
  .foglio-firma { margin-bottom: 10pt; }
  .foglio-piede { margin-top: 10pt; padding-top: 8pt; }
}