/* ---------------------------------------------------------------------------
   Le parti COMUNI del sito: palette, caratteri, barra in alto, bottoni, fondo.
   Le usano tutte le pagine, la principale, il download e le quattro guide, cosi'
   un colore o un link si cambiano in un posto solo e il sito resta uno.

   Palette. La 1.x era la fucina: arancione su marrone scurissimo. Qui il fondo
   passa all'ardesia fredda e l'ambra resta, ma come ACCENTO invece che come
   ambiente. L'ambra tiene il legame con Artisan Guild, il ciano dice "strati".
   Le due tinte non si distinguono solo per colore ma anche per LUMINOSITA',
   cosi' restano leggibili a chi i colori li vede diversamente.

   Barra e fondo stanno su .site-header e .site-footer e non sugli elementi
   header e footer: le guide hanno regole loro su quegli elementi, e la Quick
   Start usa un <header> per la copertina.
--------------------------------------------------------------------------- */
:root{
  --bg:#0d1117;
  --bg-2:#131a24;
  --surface:#182130;
  --surface-2:#1e293b;
  --line:#2a3646;
  --text:#e8ecf2;
  --muted:#95a3b6;
  --amber:#f5a524;
  --amber-dim:#b9791a;
  --layer:#38bdf8;
  --layer-dim:#1d7fae;
  --ok:#34d399;
  --radius:14px;
  --max:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.wordmark{font-family:'Cinzel',Georgia,serif;letter-spacing:.01em}

/* ---------- barra ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;width:auto;padding:0;
  background:rgba(13,17,23,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap,.site-footer .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.site-header a,.site-footer a{color:inherit;text-decoration:none}
.nav{display:flex;align-items:center;gap:22px;height:66px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand img{height:34px;width:auto;border-radius:6px;display:block}
.brand .wordmark{font-size:1.22rem;font-weight:800;color:var(--text)}
.brand .wordmark span{color:var(--amber)}
.nav a.link{color:var(--muted);font-size:.94rem;font-weight:500;font-family:'Inter',system-ui,sans-serif}
.nav a.link:hover,.nav a.link.here{color:var(--text)}
.nav a.link.here{box-shadow:inset 0 -2px 0 var(--amber);padding-bottom:4px}
.btn{
  display:inline-block;border-radius:10px;padding:11px 20px;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:600;font-size:.95rem;border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn-primary{background:var(--amber);color:#1a1206;box-shadow:0 6px 18px rgba(245,165,36,.22)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(245,165,36,.3)}
.btn-ghost{border-color:var(--line);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:1.5rem;cursor:pointer}

/* ---------- fondo ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2);padding:44px 0 30px;margin-top:0}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.foot h4{font-family:'Cinzel',serif;font-size:.95rem;margin-bottom:12px;color:var(--text)}
.foot a,.foot p{color:var(--muted);font-size:.92rem;display:block;margin-bottom:7px}
.foot a:hover{color:var(--amber)}
.copyright{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;
  color:var(--muted);font-size:.85rem;text-align:center}

@media(max-width:1060px){
  .nav{gap:16px}
  .nav a.link{font-size:.88rem}
}
@media(max-width:940px){
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .nav a.link{display:none}
  .nav-toggle{display:block}
  .nav.open a.link{display:block}
  .nav.open{flex-wrap:wrap;height:auto;padding-bottom:14px}
}
@media(max-width:680px){
  .foot{grid-template-columns:1fr}
}