/* kevernance.com — caratteri serviti da questo dominio (D-DIN, Atkinson Hyperlegible Next, B612 Mono: SIL Open Font License 1.1) */
@font-face{font-family:"D-DIN";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/d-din-400.woff2) format("woff2")}
@font-face{font-family:"D-DIN";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/d-din-700.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"B612 Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/b612-mono-latin-400-normal.woff2) format("woff2")}

/* Un solo mondo, scuro: la sala in alto, il documento sotto in una colonna giustificata. Il rosso è la responsabilità. */
:root{
  --fondo:#060B12;
  --carta:#080E16;
  --ghiaccio:#9FD0FF;
  --chiaro:#EAF3FF;
  --testo:#D3DCE7;
  --grigio:#97A4B5;
  --filetto:rgba(159,208,255,.2);
  --resp:#FF5A4E;
  --f-tit:"D-DIN","DIN Alternate",Bahnschrift,"Arial Narrow",Arial,sans-serif;
  --f-testo:"Atkinson Hyperlegible Next","Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --f-mono:"B612 Mono",ui-monospace,Menlo,Consolas,monospace;
  --g-sx:max(16px,env(safe-area-inset-left,0px));
  --g-dx:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--carta);color:var(--testo);font-family:var(--f-testo);font-size:18px;line-height:1.62;overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:var(--ghiaccio);color:var(--fondo)}
a{color:var(--chiaro);text-decoration-color:rgba(159,208,255,.55);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ghiaccio)}
:focus-visible{outline:2px solid var(--ghiaccio);outline-offset:3px}
[hidden]{display:none!important}
.salta{position:absolute;left:50%;top:8px;transform:translate(-50%,-160%);z-index:40;padding:10px 16px;background:var(--ghiaccio);color:var(--fondo);font:700 12px/1 var(--f-tit);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.salta:focus{transform:translate(-50%,0)}

/* ---------------------------------------------------------------- testata */
.testata{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);padding-left:var(--g-sx);padding-right:var(--g-dx);transition:background-color .3s ease,box-shadow .3s ease,opacity .8s ease}
.testata.ferma{background:rgba(6,11,18,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--filetto)}
.testata-in{max-width:1180px;margin:0 auto;height:56px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.pillola{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 14px;border:1px solid rgba(159,208,255,.36);border-radius:16px;font:700 11.5px/1 var(--f-tit);letter-spacing:.18em;text-transform:uppercase;color:var(--chiaro);background:rgba(6,11,18,.35)}
.t-sx{justify-self:start}.t-dx{justify-self:end}
.spenta{color:var(--grigio);opacity:.7}
.punto{color:var(--grigio)}
.moto{display:inline-grid;place-items:center;width:22px;height:22px;margin:0 -4px;padding:0;border:0;border-radius:50%;background:none;color:var(--chiaro);cursor:pointer}
.moto svg{width:12px;height:12px;fill:currentColor}
.moto .gioca{display:none}
.moto[aria-pressed="true"] .pausa{display:none}
.moto[aria-pressed="true"] .gioca{display:block}
.t-centro{display:inline-flex;align-items:center;gap:10px;color:var(--chiaro);text-decoration:none;font:700 12.5px/1 var(--f-tit);letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;opacity:0;transform:translateY(-3px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.testata.ferma .t-centro{opacity:1;transform:none;pointer-events:auto}
.t-centro svg{width:12px;height:16px;fill:none;stroke:var(--ghiaccio);stroke-width:2}

/* ---------------------------------------------------------------- la sala */
.sala{position:relative;height:100svh;min-height:600px;max-height:1100px;overflow:hidden;background:radial-gradient(120% 90% at 50% 38%,#0B1522 0%,var(--fondo) 62%)}
#scena{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.sala-testa{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 70px);padding-left:var(--g-sx);padding-right:var(--g-dx);text-align:center;pointer-events:none;transition:opacity 1.1s ease}
.marchio{margin:0;font:700 clamp(30px,5.2vw,58px)/1 var(--f-tit);letter-spacing:.34em;padding-left:.34em;text-transform:uppercase;color:var(--chiaro);text-shadow:0 0 24px rgba(159,208,255,.35)}
.metodo{margin:16px auto 0;max-width:34em;font:400 clamp(14.5px,1.35vw,17px)/1.45 var(--f-testo);color:#C2D3E6;text-wrap:balance;text-shadow:0 1px 10px rgba(6,11,18,.9)}
.sala-piede{position:absolute;left:0;right:0;bottom:0;padding-top:40px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px);padding-left:var(--g-sx);padding-right:var(--g-dx);pointer-events:none;background:linear-gradient(rgba(6,11,18,0),rgba(6,11,18,.78) 62%);transition:opacity 1.1s ease;text-align:center}
.registro-tit{margin:0 0 8px;font:700 10px/1 var(--f-tit);letter-spacing:.32em;padding-left:.32em;color:#86A6C6;text-align:center;text-transform:uppercase}
.registro{list-style:none;margin:0 auto;padding:0;max-width:820px;min-height:1.65em;font:400 11px/1.65 var(--f-mono);letter-spacing:.04em;color:var(--ghiaccio);text-transform:uppercase;text-align:center}
.registro li{opacity:.5;transition:opacity .4s ease}
.registro li:last-child{opacity:1}
.registro li:nth-last-child(2){opacity:.75}
.registro time{color:var(--chiaro)}
.registro b{color:var(--resp);font-weight:400;text-shadow:0 0 8px rgba(255,90,78,.5)}
.tasto-verifica{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);pointer-events:auto;padding:10px 16px;border:1px solid var(--ghiaccio);background:var(--fondo);color:var(--chiaro);font:700 11.5px/1 var(--f-tit);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;opacity:0;clip-path:inset(50%)}
.tasto-verifica:focus-visible{opacity:1;clip-path:none}
.sala.senza-scena{background:radial-gradient(90% 70% at 50% 45%,#122236 0%,var(--fondo) 70%)}
html.avvio .sala-testa:not(.vista),html.avvio .sala-piede:not(.vista),html.avvio .testata:not(.vista){opacity:0}

/* ---------------------------------------------------------------- documento */
main{position:relative;padding-top:56px;padding-bottom:40px;padding-left:var(--g-sx);padding-right:var(--g-dx);background:linear-gradient(var(--fondo),var(--carta) 160px)}
.colonna{max-width:35em;margin:0 auto}
.colonna p,.voci dd,.rif li{text-align:justify;-webkit-hyphens:manual;hyphens:manual}
.colonna p{margin:0 0 1em}
.versione{margin:0 0 18px;font:400 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grigio);text-align:center}
.colonna .versione{text-align:center}
.apertura{font-size:20px;line-height:1.56;color:var(--chiaro)}
.notifica{margin:30px auto 0;display:grid;justify-items:center;gap:10px}
.notifica label{font:700 10.5px/1.4 var(--f-tit);letter-spacing:.18em;padding-left:.18em;text-transform:uppercase;color:var(--grigio);text-align:center}
.campo{display:flex;width:100%;max-width:470px;border:1px solid rgba(159,208,255,.6)}
.campo input{flex:1;min-width:0;height:48px;border:0;padding:0 14px;background:transparent;color:var(--chiaro);font:400 16px var(--f-testo);outline:none}
.campo input::placeholder{color:var(--grigio)}
.campo:focus-within{box-shadow:0 0 0 2px var(--carta),0 0 0 4px var(--ghiaccio)}
.campo button{height:48px;padding:0 18px;border:0;background:var(--ghiaccio);color:var(--fondo);font:700 11.5px/1 var(--f-tit);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.campo button:disabled{opacity:.6;cursor:progress}
.campo button:focus-visible{outline:2px solid var(--chiaro);outline-offset:-5px}
.colonna .esito{min-height:1.4em;margin:0;font-size:14px;color:var(--chiaro);text-align:center}
.colonna .avviso{margin:0;font-size:13px;line-height:1.5;color:var(--grigio);text-align:center}
.trappola{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.sez{margin-top:84px;scroll-margin-top:72px}
.sez-tit{margin:0 0 26px;display:grid;justify-items:center;gap:16px;font-weight:400}
.sez-num{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;width:100%}
.sez-num::before,.sez-num::after{content:"";height:1px;background:var(--filetto)}
.rombo{position:relative;display:grid;place-items:center;width:30px;height:38px}
.rombo svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--ghiaccio);stroke-width:1.4}
.rombo b{position:relative;font:700 13px/1 var(--f-tit);color:var(--chiaro)}
.sez-txt{font:700 clamp(18px,2.2vw,23px)/1.25 var(--f-tit);letter-spacing:.14em;padding-left:.14em;text-transform:uppercase;text-align:center;text-wrap:balance;color:var(--chiaro)}
.voci{margin:0 0 1em;display:grid;gap:22px}
.voci > div{scroll-margin-top:80px}
.voci dt{font:700 12px/1.3 var(--f-tit);letter-spacing:.16em;padding-left:.16em;text-transform:uppercase;text-align:center;margin-bottom:6px;color:var(--ghiaccio)}
.voci dt .n{font:400 11px/1 var(--f-mono);letter-spacing:.04em;color:var(--grigio);margin-right:.9em}
.voci dd{margin:0}
.largo{width:min(1040px,calc(100vw - 32px));position:relative;left:50%;transform:translateX(-50%)}
.principi{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:8px}
.principi > div{padding:4px 28px 8px;display:flex;flex-direction:column;align-items:center;min-width:0}
.principi > div + div{border-left:1px solid var(--filetto)}
.colonna .pr-num{margin:0;font:700 64px/1 var(--f-tit);color:var(--chiaro);text-align:center}
.colonna .pr-resp{color:var(--resp);text-shadow:0 0 16px rgba(255,90,78,.45)}
.pr-tit{margin:16px 0 12px;font:700 14px/1.35 var(--f-tit);letter-spacing:.14em;padding-left:.14em;text-transform:uppercase;text-align:center;text-wrap:balance;color:var(--chiaro)}
.colonna .principi p{margin:0;font-size:17px;text-align:center;text-wrap:pretty}

/* l'Indice: tabella dei livelli */
.tabella{margin:6px 0 26px}
.tabella table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.55}
.tabella caption{caption-side:top;padding:0 0 12px;font:700 11px/1.3 var(--f-tit);letter-spacing:.18em;text-transform:uppercase;color:var(--grigio);text-align:center}
.tabella th,.tabella td{padding:16px 18px;vertical-align:top;text-align:left;border-top:1px solid var(--filetto)}
.tabella thead th{padding-top:0;border-top:0;font:700 11px/1.3 var(--f-tit);letter-spacing:.18em;text-transform:uppercase;color:var(--grigio)}
.tabella tbody th{width:208px;font-weight:400}
.tabella tbody tr:last-child th,.tabella tbody tr:last-child td{border-bottom:1px solid var(--filetto)}
.tabella td{text-align:left;-webkit-hyphens:manual;hyphens:manual}
.tabella td.ev{width:34%}
.liv{display:flex;align-items:baseline;gap:12px}
.liv-n{font:400 15px/1 var(--f-mono);color:var(--ghiaccio)}
.liv-nome{font:700 13px/1.3 var(--f-tit);letter-spacing:.16em;text-transform:uppercase;color:var(--chiaro)}
.tacche{display:flex;gap:4px;margin-top:10px}
.tacche i{display:block;width:22px;height:6px;background:rgba(159,208,255,.16)}
.tacche i.su{background:var(--ghiaccio);box-shadow:0 0 6px rgba(159,208,255,.5)}
.ev{color:var(--chiaro)}
.colonna .chiusa{text-align:center;color:var(--grigio);font-size:16px}

/* riferimenti */
.rif{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:14px}
.rif li{display:grid;grid-template-columns:3.2em 1fr;gap:0 .6em;text-align:left}
.rif .n{font:400 12px/1.9 var(--f-mono);color:var(--grigio);text-align:right}
.rif li > span:last-child{text-align:justify;-webkit-hyphens:manual;hyphens:manual}

.dichiarazione{max-width:35em;margin:90px auto 0;padding-top:22px;border-top:1px solid var(--filetto);text-align:center;font-size:15px;line-height:1.6;color:var(--grigio)}
.dichiarazione p{margin:0 0 .6em}
.dichiarazione strong{color:var(--resp);font-weight:700}
.dichiarazione .acc{margin-top:1.1em}
.piede{padding-top:34px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 44px);padding-left:var(--g-sx);padding-right:var(--g-dx);text-align:center;font:400 10.5px/1.9 var(--f-tit);letter-spacing:.12em;text-transform:uppercase;color:var(--grigio)}
.piede p{margin:0}
.piede a{color:var(--grigio);text-decoration-color:rgba(151,164,181,.5)}
.piede a:hover{color:var(--chiaro)}

/* ---------------------------------------------------------------- pagine di testo: privacy, note legali, 404 */
.pagina{max-width:44em;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 72px) var(--g-dx) 40px var(--g-sx)}
.pagina .marca{display:inline-flex;align-items:center;gap:10px;color:var(--chiaro);text-decoration:none;font:700 13px/1 var(--f-tit);letter-spacing:.3em;text-transform:uppercase;margin-bottom:56px}
.pagina .marca svg{width:12px;height:16px;fill:none;stroke:var(--ghiaccio);stroke-width:2}
.pagina .occhiello{margin:0 0 10px;font:400 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grigio)}
.pagina h1{margin:0 0 26px;font:700 clamp(26px,4vw,40px)/1.15 var(--f-tit);letter-spacing:.08em;text-transform:uppercase;color:var(--chiaro);text-wrap:balance}
.pagina h2{margin:36px 0 10px;padding-top:18px;border-top:1px solid var(--filetto);font:700 13px/1.35 var(--f-tit);letter-spacing:.16em;text-transform:uppercase;color:var(--ghiaccio)}
.pagina p,.pagina li{font-size:17px;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.pagina p{margin:0 0 .9em}
.pagina ul{margin:0 0 1em;padding-left:1.2em}
.pagina li{margin:0 0 .4em}
.pagina .torna{display:inline-block;margin-top:34px;font:700 11.5px/1 var(--f-tit);letter-spacing:.16em;text-transform:uppercase}

@media (max-width:620px){
  .sala-testa{top:calc(env(safe-area-inset-top,0px) + 66px)}
  .metodo{max-width:22em}
  .registro{font-size:9.5px;line-height:1.6}
  .principi{grid-template-columns:1fr}
  .principi > div + div{border-left:0;border-top:1px solid var(--filetto);margin-top:18px;padding-top:26px}
  .apertura{font-size:17.5px}
  body{font-size:16.5px}
  .t-centro span{display:none}
  .tabella thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tabella table,.tabella tbody,.tabella tr,.tabella th,.tabella td{display:block;width:auto}
  .tabella tr{padding:16px 0;border-top:1px solid var(--filetto)}
  .tabella tbody tr:last-child{border-bottom:1px solid var(--filetto)}
  .tabella th,.tabella td,.tabella tbody tr:last-child th,.tabella tbody tr:last-child td{border:0;padding:0}
  .tabella tbody th{width:auto;margin-bottom:10px}
  .tabella td + td{margin-top:10px}
  .tabella td[data-etichetta]::before{content:attr(data-etichetta);display:block;margin-bottom:2px;font:700 10.5px/1.3 var(--f-tit);letter-spacing:.18em;text-transform:uppercase;color:var(--grigio)}
  .rif li{grid-template-columns:2.8em 1fr}
}
@media (prefers-reduced-motion:reduce){.sala-testa,.sala-piede,.testata{transition-duration:.2s}html{scroll-behavior:auto}}
