/* Sandro Cavalieri Foschini. Il tema scuro è quello base, il chiaro è in :root[data-theme="light"]. */

@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/dm-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  --fondo: #0e1820;
  --fondo-2: #121f29;
  --superficie: #182732;
  --testo: #ece8df;
  --tenue: #a9b3b5;
  --linea: rgba(236, 232, 223, .15);
  --segnale: #f0b45a;
  --su-segnale: #14191d;
  --errore: #ff9d8a;
  --titoli: "Bodoni Moda", "Iowan Old Style", Georgia, serif;
  --corpo: "Source Serif 4", Georgia, serif;
  --mono: "DM Mono", ui-monospace, Consolas, monospace;
  --pagina: 1160px;
  --margine: clamp(16px, 4vw, 40px);
}

:root[data-theme="light"] {
  color-scheme: light;
  --fondo: #f4f0e7;
  --fondo-2: #ebe6da;
  --superficie: #fbf8f1;
  --testo: #17212a;
  --tenue: #525d66;
  --linea: rgba(23, 33, 42, .18);
  --segnale: #8a5200;
  --su-segnale: #fffaf0;
  --errore: #a82a14;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 400 1.125rem/1.6 var(--corpo); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--segnale); }
:focus-visible { outline: 2px solid var(--segnale); outline-offset: 3px; border-radius: 2px; }

.salta { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 8px 14px; background: var(--segnale); color: var(--su-segnale); }
.salta:focus { top: 12px; }

.contenuto { max-width: var(--pagina); margin-inline: auto; padding-inline: var(--margine); }
.etichetta { font: 400 .8125rem/1.4 var(--mono); letter-spacing: .04em; color: var(--segnale); }

/* Testata */
.testata { position: sticky; top: 0; z-index: 20; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.testata::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--segnale); transform: scaleX(var(--avanzamento, 0)); transform-origin: left; }
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-block: 12px; }
.marchio { font: 500 1.25rem/1 var(--titoli); text-decoration: none; white-space: nowrap; }
.menu { display: flex; gap: 18px; margin-left: auto; font: 400 .875rem/1 var(--mono); }
.menu a { text-decoration: none; padding-block: 6px; white-space: nowrap; }
.azioni { display: flex; align-items: center; gap: 12px; }
.lingua { font: 400 .875rem/1 var(--mono); text-decoration: none; padding: 7px 8px; border: 1px solid var(--linea); border-radius: 4px; }
.tema { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; background: none; color: inherit; border: 1px solid var(--linea); border-radius: 4px; cursor: pointer; }
.tema:hover { color: var(--segnale); }

.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid var(--segnale); border-radius: 4px; background: var(--segnale); color: var(--su-segnale); font: 400 .9375rem/1.2 var(--mono); text-decoration: none; cursor: pointer; }
.bottone:hover { color: var(--su-segnale); filter: brightness(1.08); }
.bottone.vuoto { background: none; color: var(--testo); border-color: var(--linea); }
.bottone.vuoto:hover { color: var(--segnale); border-color: var(--segnale); filter: none; }
.bottone:disabled { opacity: .6; cursor: wait; }

/* Apertura */
.apertura { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(32px, 5vw, 72px); padding-block: clamp(40px, 7vw, 88px); }
.apertura h1 { margin-block: 14px 22px; font: 400 clamp(3.25rem, 8.6vw, 6.5rem)/1 var(--titoli); letter-spacing: -.01em; }
.apertura h1 span { display: block; }
.ruolo { font-size: 1.3125rem; line-height: 1.4; color: var(--segnale); }
.sintesi { max-width: 34em; margin-block: 16px 28px; font-size: 1.1875rem; color: var(--tenue); }
.pulsanti { display: flex; flex-wrap: wrap; gap: 12px; }

.diagramma { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto; }
.diagramma svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.diagramma picture { position: absolute; inset: 23%; }
.foto-chiara, :root[data-theme="light"] .foto-scura { display: none; }
:root[data-theme="light"] .foto-chiara { display: block; }
.diagramma img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.griglia-polare { fill: none; stroke: var(--linea); }
.tacche { stroke: var(--tenue); opacity: .55; }
.gradi { fill: var(--tenue); font: 400 11px var(--mono); text-anchor: middle; dominant-baseline: middle; }
.spettro line { stroke: var(--segnale); stroke-width: 3; stroke-linecap: round; }

/* Numeri */
.numeri { border-block: 1px solid var(--linea); background: var(--fondo-2); }
.numeri ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: 30px; }
.numeri strong { display: block; font: 400 clamp(2.25rem, 4vw, 3rem)/1.1 var(--titoli); color: var(--segnale); }
.numeri span { display: block; margin-top: 6px; font-size: 1rem; line-height: 1.4; color: var(--tenue); }

/* Sezioni */
.sezione { padding-block: clamp(56px, 8vw, 104px); }
.sezione.piena { background: var(--fondo-2); border-block: 1px solid var(--linea); }
.sezione h2 { margin-block: 8px 28px; font: 400 clamp(2.25rem, 4.6vw, 3.5rem)/1.1 var(--titoli); }
.sezione h3 { font: 500 1.5rem/1.25 var(--titoli); }
.introduzione { max-width: 40em; margin-top: -10px; margin-bottom: 36px; color: var(--tenue); }

.profilo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.profilo p + p { margin-top: 1em; }
.citazione { padding-left: 22px; border-left: 2px solid var(--segnale); font: 400 clamp(1.5rem, 2.6vw, 1.875rem)/1.3 var(--titoli); }

.schede { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.scheda { padding: 28px; background: var(--fondo-2); }
.scheda p { margin-top: 10px; font-size: 1.0625rem; color: var(--tenue); }

/* Percorso */
.tappe { border-left: 1px solid var(--linea); }
.tappa { position: relative; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 24px; padding: 0 0 44px 28px; }
.tappa:last-child { padding-bottom: 0; }
.tappa::before { content: ""; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--fondo); border: 1px solid var(--segnale); }
.tappa:first-child::before { background: var(--segnale); }
.periodo { padding-top: 5px; font: 400 .875rem/1.4 var(--mono); color: var(--tenue); }
.azienda { margin-bottom: 10px; color: var(--segnale); font-size: 1.0625rem; }
.tappa li { position: relative; padding-left: 18px; font-size: 1.0625rem; }
.tappa li + li { margin-top: 6px; }
.tappa li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--tenue); }
.scarica { margin-top: 40px; }

/* Progetti */
.progetto + .progetto { margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--linea); }
.progetto-testo { max-width: 44em; }
.progetto .stato { margin-block: 6px 12px; font: 400 .8125rem/1.4 var(--mono); color: var(--tenue); }
.progetto p + p { margin-top: .8em; }
.progetto .collegamento { margin-top: 14px; }
.schermata { margin-top: 28px; }
.schermata img { width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 6px; }
.telefoni figcaption { margin-top: 12px; font-size: 1rem; color: var(--tenue); text-align: center; }
.app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.telefoni .coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 3vw, 28px); max-width: 520px; margin-inline: auto; }
.telefoni img { width: 100%; height: auto; }

.caso dl { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 10px 20px; max-width: 48em; margin-top: 16px; }
.caso dt { padding-top: 4px; font: 400 .8125rem/1.4 var(--mono); color: var(--segnale); }
.laboratorio { margin-top: clamp(56px, 8vw, 88px); padding-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--linea); }
.scarica-programma { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.scarica-programma .bottone { padding: 9px 13px; font-size: .8125rem; }

/* Competenze */
.competenze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 6vw, 72px); }
.competenze div { padding-block: 18px; border-top: 1px solid var(--linea); }
.competenze dt { font: 400 .8125rem/1.4 var(--mono); color: var(--segnale); }
.competenze dd { margin-top: 6px; font-size: 1.0625rem; }

.colonne { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); }
.elenco li { padding-block: 14px; border-top: 1px solid var(--linea); font-size: 1.0625rem; }
.elenco span { display: block; color: var(--tenue); font-size: 1rem; }
.colonne h3 { margin-bottom: 12px; }

/* Tratta radio */
.tratta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.comandi { display: grid; gap: 18px; }
.comando label, .comando .nome { display: flex; justify-content: space-between; gap: 12px; font: 400 .875rem/1.4 var(--mono); }
.comando output { color: var(--segnale); white-space: nowrap; }
input[type="range"] { width: 100%; margin: 10px 0 0; accent-color: var(--segnale); }
fieldset.comando { border: 0; margin: 0; padding: 0; min-width: 0; }
legend.nome { padding: 0; }
.frequenze { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.frequenze label { cursor: pointer; }
.frequenze input { position: absolute; opacity: 0; }
.frequenze span { display: block; padding: 6px 10px; border: 1px solid var(--linea); border-radius: 4px; font: 400 .8125rem/1.2 var(--mono); }
.frequenze input:checked + span { background: var(--segnale); border-color: var(--segnale); color: var(--su-segnale); }
.frequenze input:focus-visible + span { outline: 2px solid var(--segnale); outline-offset: 2px; }

.quadro { padding: clamp(18px, 3vw, 28px); background: var(--superficie); border: 1px solid var(--linea); border-radius: 6px; }
.profilo-tratta { width: 100%; height: auto; }
.torre { stroke: var(--tenue); stroke-width: 2; fill: none; }
.suolo { stroke: var(--linea); stroke-width: 1; }
.raggio { stroke: var(--segnale); stroke-width: 1; stroke-dasharray: 4 4; }
.fresnel { fill: var(--segnale); fill-opacity: .14; stroke: var(--segnale); stroke-width: 1; }
.risultati { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.risultati dt { font: 400 .75rem/1.3 var(--mono); color: var(--tenue); }
.risultati dd { font: 400 clamp(1.5rem, 2.6vw, 1.875rem)/1.2 var(--titoli); }
.verdetto { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 1.0625rem; }
.verdetto strong { color: var(--segnale); font-weight: 600; }
.verdetto.critico strong { color: var(--errore); }
.avvertenza { margin-top: 14px; font-size: 1rem; color: var(--tenue); }

/* Contatti */
.contatti { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.recapiti { margin-top: 24px; }
.recapiti li { padding-block: 12px; border-top: 1px solid var(--linea); }
.recapiti span { display: block; font: 400 .8125rem/1.4 var(--mono); color: var(--tenue); }
.modulo { display: grid; gap: 18px; }
.campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campo.pieno { grid-column: 1 / -1; }
.campo label { display: block; margin-bottom: 6px; font: 400 .875rem/1.4 var(--mono); }
.campo label span { color: var(--tenue); }
.campo input, .campo select, .campo textarea { width: 100%; padding: 11px 12px; background: var(--superficie); color: var(--testo); border: 1px solid var(--linea); border-radius: 4px; font: inherit; font-size: 1.0625rem; }
.campo textarea { resize: vertical; }
.campo [aria-invalid="true"] { border-color: var(--errore); }
.esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nota-modulo { font-size: 1rem; color: var(--tenue); }
.invio { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.esito { flex: 1 1 16rem; min-width: 0; font-size: 1.0625rem; }
.esito:empty { display: none; }
.esito.errore { color: var(--errore); }

/* Pagina del CV */
.cv-testa { padding-block: clamp(32px, 6vw, 64px); background: var(--fondo-2); border-bottom: 1px solid var(--linea); }
.briciole { display: flex; flex-wrap: wrap; gap: 8px; font: 400 .8125rem/1.4 var(--mono); color: var(--tenue); }
.icona-cv { display: grid; place-items: center; width: 46px; height: 46px; margin-block: 22px 16px; color: var(--segnale); border: 1px solid var(--segnale); border-radius: 6px; }
.cv-testa h1 { font: 400 clamp(2.75rem, 7vw, 4.5rem)/1.05 var(--titoli); }
.cv-testa .sintesi { margin-block: 12px 0; }
.cv-corpo { display: grid; gap: 28px; max-width: 46rem; padding-block: clamp(36px, 6vw, 64px); }
.autorizzazione { padding: 22px 24px; border: 1px solid var(--segnale); border-radius: 6px; background: var(--superficie); }
.autorizzazione h2 { margin-bottom: 8px; font: 400 .875rem/1.4 var(--mono); color: var(--segnale); }
.richiesta-cv { padding: clamp(22px, 4vw, 32px); border: 1px solid var(--linea); border-radius: 6px; background: var(--fondo-2); }
.richiesta-cv h2 { margin-bottom: 8px; font: 400 clamp(1.75rem, 3.5vw, 2.25rem)/1.15 var(--titoli); }
.richiesta-cv > p { margin-bottom: 20px; color: var(--tenue); }
.consenso { display: flex; gap: 10px; align-items: flex-start; font-size: 1.0625rem; cursor: pointer; }
.consenso input { flex: none; width: 18px; height: 18px; margin: 5px 0 0; accent-color: var(--segnale); }
.consenso input[aria-invalid="true"] { outline: 2px solid var(--errore); outline-offset: 2px; }

/* Piede */
.piede { border-top: 1px solid var(--linea); padding-block: 26px; font: 400 .8125rem/1.5 var(--mono); color: var(--tenue); }
.piede .contenuto { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* Logo rotante */
.sigillo { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 15; width: 76px; height: 76px; padding: 0; background: var(--fondo); border: 1px solid var(--linea); border-radius: 50%; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9); transition: opacity .3s, transform .3s, visibility .3s; }
.sigillo.visibile { opacity: 1; visibility: visible; transform: none; }
.sigillo:hover { border-color: var(--segnale); }
.sigillo svg { width: 100%; height: 100%; }
.sigillo-spettro { animation: ruota 24s linear infinite; }
.sigillo-spettro line { stroke: var(--segnale); stroke-width: 1.7; stroke-linecap: round; }
.sigillo text { fill: var(--testo); font: 500 16px var(--titoli); text-anchor: middle; dominant-baseline: central; }
@keyframes ruota { to { transform: rotate(360deg); } }

/* Pagina privacy */
.pagina { max-width: 44rem; margin-inline: auto; padding: 56px var(--margine) 80px; }
.pagina h1 { font: 400 clamp(2.5rem, 6vw, 3.5rem)/1.1 var(--titoli); margin-bottom: 16px; }
.pagina h2 { font: 500 1.5rem/1.25 var(--titoli); margin-block: 32px 8px; }
.pagina p + p { margin-top: .8em; }

@media (max-width: 1120px) {
  .menu { order: 3; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .azioni { margin-left: auto; }
}

@media (max-width: 900px) {
  .apertura, .profilo, .colonne, .tratta, .contatti, .app { grid-template-columns: minmax(0, 1fr); }
  .diagramma { width: min(100%, 400px); }
  .numeri ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  body { font-size: 1.0625rem; }
  .schede, .competenze, .campi, .caso dl { grid-template-columns: minmax(0, 1fr); }
  .caso dl { gap: 2px; }
  .caso dd { margin-bottom: 10px; }
  .tappa { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-left: 20px; }
  .periodo { padding-top: 0; }
  .azioni .bottone { display: none; }
  .sigillo { width: 62px; height: 62px; }
  .marchio { font-size: 1.0625rem; }
  .barra { flex-wrap: wrap; justify-content: space-between; column-gap: 8px; }
  .menu { gap: 16px; font-size: .8125rem; }
  .profilo-tratta text { display: none; }
  .risultati { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sigillo { transition: none; }
  .sigillo-spettro { animation: none; }
}

@media print {
  .testata, .diagramma, #tratta, #contatti, .pulsanti, .scarica, .sigillo { display: none; }
}