/* =============================================================
   INNOV2E — base.css
   Fondamenta condivise da tutte le pagine del sito: token di colore,
   tipografia, griglia, bande, navigazione, bottoni, footer, reveal.
   I singoli libri ridefiniscono SOLO i valori dei token in :root.
   ============================================================= */


:root{
  color-scheme: light;
  /* superfici chiare */
  --paper:#EBEEF1;
  --paper-2:#FFFFFF;
  --paper-3:#E2E7EC;
  --text:#0A1E30;
  --text-2:#41576A;
  --muted:#576877;
  --line:#C7D2DB;
  --line-soft:#D8E0E7;
  --gold:#9C6E15;
  --gold-text:#775410;
  --gold-bright:#BC8B26;
  --signal:#0D716A;
  --shadow:0 1px 2px rgba(10,30,48,.06), 0 12px 32px -18px rgba(10,30,48,.35);
  /* bande scure — identiche nei due temi */
  --ink-band:#06182A;
  --ink-band-2:#0B2942;
  --ink-card:rgba(255,255,255,.045);
  --on-ink:#E6EEF5;
  --on-ink-2:#9DB4C6;
  --on-ink-3:#6E8BA0;
  --gold-ink:#DFAC57;
  --gold-ink-soft:rgba(223,172,87,.28);
  --signal-ink:#4FD0C5;
  --radius:3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0A1A28;
    --paper-2:#0F2434;
    --paper-3:#0C1F2E;
    --text:#E3EBF2;
    --text-2:#A7BCCB;
    --muted:#7B95A8;
    --line:#1D3547;
    --line-soft:#17293A;
    --gold:#DCA84F;
    --gold-text:#DCA84F;
    --gold-bright:#EBC078;
    --signal:#4FD0C5;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -18px rgba(0,0,0,.8);
    --ink-band:#04101C;
    --ink-band-2:#071D31;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0A1A28;
  --paper-2:#0F2434;
  --paper-3:#0C1F2E;
  --text:#E3EBF2;
  --text-2:#A7BCCB;
  --muted:#7B95A8;
  --line:#1D3547;
  --line-soft:#17293A;
  --gold:#DCA84F;
  --gold-text:#DCA84F;
  --gold-bright:#EBC078;
  --signal:#4FD0C5;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -18px rgba(0,0,0,.8);
  --ink-band:#04101C;
  --ink-band-2:#071D31;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Bodoni Moda e' un "Didone": sui corpi grandi la variante da display
     assottiglia i tratti fini fino a farli sparire, soprattutto in chiaro
     su scuro. Blocchiamo l'asse ottico sulla variante da testo, che ha
     contrasto minore e aste piu' robuste. Proprieta' ereditata: vale per
     tutti i titoli senza doverla ripetere. Su IBM Plex non ha effetto,
     perche' non ha asse ottico. */
  font-variation-settings:"opsz" 11;
}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none !important}
a{color:inherit}
::selection{background:var(--gold-ink-soft);color:inherit}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:2px}

/* ---------- tipografia ---------- */
.display{font-family:"Bodoni Moda","Didot","Playfair Display",Georgia,serif}
h1,h2,h3,h4{margin:0;text-wrap:balance}
h1{font-family:"Bodoni Moda",Georgia,serif;font-weight:700;font-size:clamp(2.5rem,6.4vw,5rem);line-height:.98;letter-spacing:-.02em}
h2{font-family:"Bodoni Moda",Georgia,serif;font-weight:700;font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.06;letter-spacing:-.015em}
h3{font-size:1.22rem;font-weight:600;line-height:1.32;letter-spacing:-.005em}
p{margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:.685rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;line-height:1;
}
.lead{font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.62;color:var(--text-2)}
.measure{max-width:64ch}

/* ---------- struttura ---------- */
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,5vw,60px)}
section{position:relative}
.band-paper{background:var(--paper);padding-block:clamp(64px,9vw,124px)}
.band-paper.alt{background:var(--paper-3)}
.band-ink{
  background:var(--ink-band);color:var(--on-ink);
  padding-block:clamp(64px,9vw,124px);position:relative;overflow:hidden;
}
.band-ink h2{color:var(--on-ink)}
.band-ink .lead{color:var(--on-ink-2)}
.band-ink .eyebrow{color:var(--gold-ink)}
.band-paper .eyebrow{color:var(--gold-text)}

/* griglia a binario: marcatore mono a sinistra, contenuto a destra */
.rail{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:clamp(22px,4.4vw,60px);align-items:start}
@media (max-width:880px){.rail{grid-template-columns:1fr;gap:18px}}
.rail-mark{position:sticky;top:88px}
@media (max-width:880px){.rail-mark{position:static}}
.rail-mark .num{font-family:"Bodoni Moda",Georgia,serif;font-size:2.6rem;font-weight:700;line-height:1;color:var(--gold);display:block}
.band-ink .rail-mark .num{color:var(--gold-ink)}
.hair{height:1px;background:var(--line);border:0;margin:0}
.band-ink .hair{background:rgba(223,172,87,.22)}
.hair-gold{height:1px;background:linear-gradient(90deg,var(--gold),transparent);border:0;margin:0}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--ink-band) 88%, transparent);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(223,172,87,.16);
  color:var(--on-ink);
}
.nav-in{display:flex;align-items:center;gap:26px;height:60px}
.brandmark{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brandmark img{height:32px;width:auto;flex:0 0 auto;display:block}
.brandmark .glyph{width:22px;height:22px;flex:0 0 auto}
.brandmark .bt{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-2);white-space:nowrap;padding-left:12px;border-left:1px solid rgba(223,172,87,.3)}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav-links a:not(.btn){
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-ink-2);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.nav-links a:not(.btn):hover{color:var(--gold-ink);border-bottom-color:var(--gold-ink)}
@media (max-width:940px){.nav-links a.opt{display:none}}
@media (max-width:560px){.nav-links{gap:14px}.brandmark .bt{display:none}}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:"IBM Plex Sans",sans-serif;font-size:.86rem;font-weight:600;letter-spacing:.01em;
  padding:13px 22px;border-radius:var(--radius);text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:transform .16s cubic-bezier(.2,.7,.3,1),background .18s,border-color .18s,color .18s,box-shadow .18s;
  line-height:1.2;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-gold{background:var(--gold-ink);color:#0A1E30;box-shadow:0 10px 26px -14px rgba(223,172,87,.9)}
.btn-gold:hover{background:#EFC077}
.btn-ghost-ink{border-color:rgba(223,172,87,.42);color:var(--on-ink);background:transparent}
.btn-ghost-ink:hover{border-color:var(--gold-ink);background:rgba(223,172,87,.09)}
.btn-solid{background:var(--text);color:var(--paper-2)}
.btn-solid:hover{background:var(--gold);color:#0A1E30}
.btn-ghost{border-color:var(--line);color:var(--text);background:var(--paper-2)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn .amz{width:15px;height:15px;flex:0 0 auto}
.btn-sm{padding:9px 15px;font-size:.78rem}

/* ---------- footer ---------- */
.foot{background:var(--ink-band);color:var(--on-ink-3);border-top:1px solid rgba(223,172,87,.14);padding-block:34px}
.foot-in{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.08em}
.foot a{color:var(--on-ink-2);text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{color:var(--gold-ink);border-bottom-color:var(--gold-ink)}

/* ---------- reveal ---------- */
/* L'occultamento iniziale scatta SOLO se il JS ha aggiunto .js su <html>:
   senza JavaScript il contenuto resta visibile invece di sparire. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  .btn:hover,.sheets figure:hover{transform:none}
}