/* =====================================================================
   Demo Quisquilia · il linguaggio comune a tutte le pagine.

   12/10/2026: dal pop di Tacita (crema, Space Grotesk, lime, ombre dure) al
   linguaggio del sito Quisquilia, pagine interne in luce. Mint Cream e bianco,
   testo Jet, titoli Imperial, Geist e Geist Mono solo per i dati, pillole,
   schede bianche con ombra morbida. Il corallo è l'azione principale, la pesca
   l'accento caldo. I vecchi nomi dei token restano (--ink, --lime, --indaco…)
   ma puntano ai colori nuovi, così i fogli delle tre interviste li ereditano.
   ===================================================================== */

:root{
  /* palette P2 Sky Reflection */
  --jet:#0e2e3e; --imperial:#1d2f7a; --sky:#8eb7ce; --sky-profondo:#2f5f80; --sky-chiaro:#d6e5ee;
  --fucsia:#f4364c; --corallo:#f4364c; --pesca:#f7cdb6; --pesca-velo:#fdeee5; --mint:#f9fffb;
  --carta-fredda:#eef4f7; --testo-2:#3b5262; --nota:#56707f;
  --linea:rgba(14,46,62,.12); --linea-forte:rgba(14,46,62,.26);
  --ombra-morbida:0 1px 2px rgba(14,46,62,.05),0 24px 48px -32px rgba(14,46,62,.22);
  --isola:linear-gradient(160deg,#1b2c6c,#0b2433 72%);

  /* i nomi di prima, rimappati */
  --cream:var(--mint); --carta:#ffffff; --ink:var(--jet);
  --ink-84:#3b5262; --ink-64:#56707f; --ink-40:rgba(14,46,62,.42);
  --ink-17:rgba(14,46,62,.14); --ink-08:rgba(14,46,62,.08); --ink-04:rgba(14,46,62,.04);
  --lime:var(--pesca); --indaco:var(--imperial); --arancio:var(--fucsia); --viola:var(--sky-profondo);

  --testo:'Geist','Helvetica Neue',Arial,sans-serif;
  --display:'Geist','Helvetica Neue',Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;

  --molla:cubic-bezier(.16,1,.3,1);

  /* il colore della scheda: lo sovrascrive data-tema */
  --vivo:var(--imperial); --su:var(--mint); --leggibile:var(--imperial); --wash:#e3e7f4; --ombra:transparent;
}

/* Una famiglia per figura, presa dalla palette: la campitura, il testo sopra,
   la variante che regge come testo su carta chiara, il velo. */
[data-tema="arendt"]{--vivo:#f7cdb6;--su:#0e2e3e;--leggibile:#9a4325;--wash:#fdeee5}
[data-tema="weil"]{--vivo:#1d2f7a;--su:#f9fffb;--leggibile:#1d2f7a;--wash:#e3e7f4}
[data-tema="marco-aurelio"]{--vivo:#0e2e3e;--su:#f9fffb;--leggibile:#0e2e3e;--wash:#e4ecf0}
[data-tema="nietzsche"]{--vivo:#f4364c;--su:#ffffff;--leggibile:#c01d33;--wash:#fde3e6}
[data-tema="aristotele"]{--vivo:#eef4f7;--su:#0e2e3e;--leggibile:#0e2e3e;--wash:#eef4f7}
[data-tema="kant"]{--vivo:#f8957f;--su:#0e2e3e;--leggibile:#a3372a;--wash:#fde6e0}
[data-tema="haraway"]{--vivo:#2f5f80;--su:#f9fffb;--leggibile:#2f5f80;--wash:#e2edf3}
[data-tema="hume"]{--vivo:#8eb7ce;--su:#0e2e3e;--leggibile:#2f5f80;--wash:#e6f0f6}
[data-tema="buber"]{--vivo:#b7d0e0;--su:#0e2e3e;--leggibile:#2f5f80;--wash:#eef4f7}
[data-tema="leibniz"]{--vivo:#a9c8da;--su:#0e2e3e;--leggibile:#2f5f80;--wash:#eaf2f7}
[data-tema="misto"]{--vivo:#0e2e3e;--su:#f9fffb;--leggibile:#1d2f7a;--wash:#e3e7f4}

*{box-sizing:border-box;margin:0;padding:0}
b,strong{font-weight:600}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.035em;text-wrap:balance;color:var(--titolo,var(--imperial))}
svg{display:block}

/* ------------------------------------------------- dentro la scheda */
.occhio{font-family:var(--testo);font-size:13px;color:var(--leggibile);
  display:flex;align-items:center;gap:12px;margin-bottom:14px}
.occhio::before{content:'';width:26px;height:4px;border-radius:2px;background:var(--vivo);flex:none}
.piena .occhio,.scura .occhio{color:inherit;opacity:.8}
.piena .occhio::before{background:var(--su)}
.scura .occhio::before{background:var(--lime)}
.testo p{color:var(--ink-84);margin-bottom:12px;max-width:60ch}
.testo p:last-child{margin-bottom:0}
.piena .testo p{color:inherit;opacity:.92}
.scura .testo p{color:rgba(250,250,247,.86)}
.grande{font-size:clamp(17px,1.45vw,20px);line-height:1.5}
.etichetta{display:block;font-family:var(--testo);font-size:13px;color:var(--ink-64);margin-bottom:10px}
.piena .etichetta{color:inherit;opacity:.65}
.fonte{font-family:var(--testo);font-size:13px;color:var(--ink-64);margin-top:8px;display:block}
.piena .fonte{color:inherit;opacity:.62}

.pillola{display:inline-flex;align-items:center;font-family:var(--testo);font-size:13px;
  background:var(--ink);color:var(--lime);padding:9px 18px;border-radius:999px;white-space:nowrap}
.pillola.chiara{background:var(--carta);color:var(--ink)}

/* il vecchio pennarello, ridefinito in fondo come fascia pesca */
.pennarello{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 48' preserveAspectRatio='none'%3E%3Cpath d='M3 13c49-8 97-5 144-7 45-2 91 1 150 5 3 9 4 21 2 31-53 6-111 1-161 4-46 3-91 0-132 3-4-11-5-25-3-36z' fill='%23c8ff57'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:100% .62em;background-position:0 .52em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}

/* ------------------------------------------------------------ pulsanti */
.azioni{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
a.pulsante{text-decoration:none}
.pulsante{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;
  padding:13px 22px;border-radius:999px;border:1px solid var(--linea);background:var(--carta);color:var(--ink);
  box-shadow:0 1px 2px rgba(14,46,62,.05),0 24px 48px -32px rgba(14,46,62,.22);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.pulsante:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(14,46,62,.05),0 24px 48px -32px rgba(14,46,62,.22)}
.pulsante:active{transform:translateY(3px);box-shadow:0 1px 2px rgba(14,46,62,.05),0 24px 48px -32px rgba(14,46,62,.22)}
.pulsante:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.pulsante.lime{background:var(--lime)}
.pulsante.scuro{background:var(--ink);color:var(--cream);--ombra:rgba(15,30,61,.45)}
.pulsante.chiaro{background:transparent;color:inherit;border-color:currentColor;box-shadow:none}
.pulsante.chiaro:hover{box-shadow:none}
.scura .pulsante{border-color:var(--cream)}
.scura .pulsante.lime{border-color:var(--lime)}

/* ======================================================= il velo */
.velo{position:fixed;inset:0;z-index:10;background:rgba(15,30,61,.72);display:grid;place-items:center;padding:20px;backdrop-filter:blur(4px)}
.velo[hidden]{display:none}
.velo-corpo{background:var(--carta);border:1px solid var(--linea);border-radius:30px;box-shadow:0 1px 2px rgba(14,46,62,.05),0 24px 48px -32px rgba(14,46,62,.22);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(18px,3vw,36px);
  max-width:min(900px,100%);max-height:calc(100dvh - 40px);overflow:auto}
.velo-anteprima{width:min(34vh,300px);border-radius:16px;overflow:hidden;border:1px solid var(--linea)}
.velo-anteprima svg{width:100%;height:auto}
.velo h2{font-size:clamp(26px,3vw,40px);margin-bottom:10px}
.scelte{display:flex;gap:8px;margin:16px 0 12px}
.scelta{font-family:var(--testo);font-size:13px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--linea);background:transparent;cursor:pointer}
.scelta[aria-checked="true"]{background:var(--ink);color:var(--lime)}
.spunta{display:flex;gap:10px;align-items:center;font-size:14.5px;margin-bottom:18px;cursor:pointer}
.spunta input{width:18px;height:18px;accent-color:var(--ink)}
.esito{font-family:var(--testo);font-size:13px;color:var(--ink-64);margin-top:14px;min-height:1.6em}

.solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:640px){
  .velo-corpo{grid-template-columns:minmax(0,1fr)}
  .velo-anteprima{width:min(52vw,220px);justify-self:center}
}

/* ===================================================== giro Quisquilia */
::selection{background:var(--imperial);color:#fff}
.occhio{font-family:var(--testo);font-size:15px;font-weight:500;letter-spacing:0;color:var(--sky-profondo);gap:10px}
.occhio::before{width:8px;height:8px;border-radius:50%;background:var(--fucsia)}
.etichetta,.fonte{font-family:var(--testo);font-size:13px;letter-spacing:0;color:var(--nota)}
.pillola{font-family:var(--testo);font-size:13px;font-weight:500;letter-spacing:0;background:var(--jet);color:var(--mint);padding:7px 14px}
.pillola.chiara{background:#fff;color:var(--jet);box-shadow:inset 0 0 0 1px var(--linea)}
/* l’evidenziatore: una fascia pesca sotto le parole, al posto del pennarello lime */
.pennarello{background-image:linear-gradient(transparent 58%,rgba(247,205,182,.85) 58%,rgba(247,205,182,.85) 92%,transparent 92%);
  background-size:100% 100%;background-position:0 0;padding:0 .04em}

/* pulsanti: pillole come sul sito. Corallo per l'azione principale, Jet per la seconda, filo per l'alternativa. */
.pulsante{gap:12px;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.005em;min-height:56px;padding:0 26px 0 28px;
  border:0;border-radius:999px;background:#fff;color:var(--jet);box-shadow:inset 0 0 0 1.5px var(--linea-forte);
  transition:transform .3s var(--molla),box-shadow .3s,background .2s,color .2s}
.pulsante:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--jet)}
.pulsante:active{transform:translateY(0);box-shadow:inset 0 0 0 1.5px var(--jet)}
.pulsante:focus-visible{outline:2px solid var(--imperial);outline-offset:3px}
.pulsante.lime{background:var(--fucsia);color:#fff;box-shadow:none}
.pulsante.lime:hover{box-shadow:0 14px 28px -14px rgba(244,54,76,.6)}
.pulsante.scuro{background:var(--jet);color:var(--mint);box-shadow:none}
.pulsante.scuro:hover{box-shadow:0 14px 28px -16px rgba(14,46,62,.55)}
.pulsante.chiaro{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.pulsante.chiaro:hover{box-shadow:inset 0 0 0 1.5px currentColor;background:rgba(14,46,62,.04)}
.scura .pulsante{box-shadow:inset 0 0 0 1.5px rgba(249,255,251,.4)}
.scura .pulsante.lime{box-shadow:none}

.velo{background:rgba(7,28,39,.55);backdrop-filter:blur(8px)}
.velo-corpo{border:0;border-radius:28px;box-shadow:0 40px 80px -30px rgba(7,28,39,.5)}
.velo-anteprima{border:0;box-shadow:var(--ombra-morbida)}
.scelta{font-family:var(--testo);font-size:14px;letter-spacing:0;border:0;box-shadow:inset 0 0 0 1.5px var(--linea-forte)}
.scelta[aria-checked="true"]{background:var(--jet);color:var(--mint);box-shadow:none}
.esito{font-family:var(--testo);letter-spacing:0;font-size:13px}