/* Usa SOLO le CSS vars. Nessun colore fisso. */
*{box-sizing:border-box}
main{ max-width:var(--max); margin:22px auto; padding:0 20px; }
footer{ max-width:var(--max); margin:22px auto; padding:0 20px; }
/* Body + sfondo “morbido” */
body{
  margin:0; color:var(--txt);
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 800px at 85% -10%, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 60%),
    radial-gradient(1200px 800px at -15% 110%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 60%),
    var(--bg);
}

/* Tipografia base */
h1,h2,h3,h4,h5,h6{ color:var(--heading); font-family:var(--font-heading); margin:0 0 .5em }
p,li,small,span{ color:var(--txt) }
.muted{ color:var(--muted) }
a{ color:var(--accent); text-decoration:none }
a:hover{ opacity:.92 }

/* Contenitori */
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

/* Header sticky in vetro */
header.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background: var(--header-bg);
  border-bottom:1px solid var(--border);
  padding: 0.5rem;
}
.navrow{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h)}
a.brand{
  display:flex; align-items:center; gap:12px; color:var(--header-tx);
  font-weight:800; letter-spacing:.3px; font-family:var(--font-heading);
}
.brand img{height:64px; width:auto; border-radius:8px}

/* Nav */
nav.nav{display:flex; gap:12px; align-items:center}
nav.nav a{
  position:relative; color:var(--header-tx); opacity:.84;
  padding:8px 12px; border-radius:12px; font-weight:600; font-size:15px;
  transition:opacity .2s ease, transform .2s ease; font-family: var(--font-body);
}
nav.nav a:hover{opacity:1; transform:translateY(-1px)}
nav.nav a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  transform:scaleX(0); transform-origin:center; transition:transform .25s ease;
}
nav.nav a:hover::after, nav.nav a.is-active::after{transform:scaleX(1)}
button.hamb{
  display:none; background:transparent; color:var(--header-tx);
  border:1px solid var(--border); padding:8px 10px; border-radius:12px; font-family: var(--font-body);
}
@media (max-width:880px){ nav.nav{display:none} button.hamb{display:inline-flex} }

/* Drawer mobile */
.drawer{position:fixed; inset:0; display:none; z-index:60; background:rgba(0,0,0,.4); backdrop-filter:blur(6px)}
.drawer[aria-hidden="false"]{display:block}
.sheet{
  position:absolute; right:0; top:0; bottom:0; width:min(86vw,360px);
  background:var(--panel); border-left:1px solid var(--border); padding:20px;
  display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow);
}
.sheet a{color:var(--txt); text-decoration:none; padding:12px 10px; border-radius:10px; font-weight:600; font-family: var(--font-body)}
.sheet a:hover{background:color-mix(in oklab, var(--panel) 80%, var(--accent) 20%)}

/* Hero soft */
.hero{ margin:28px 0 10px }
.hero.box{
  /* base reale dal DB + overlay soffice */
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--panel) 60%, transparent), transparent),
    var(--panel);
  border:1px solid var(--border); border-radius:24px; overflow:hidden;
}
.hero .inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; padding:28px}
.hero .art{
  position:relative; min-height:180px; border-radius:16px; border:1px solid var(--border);
  background-size:cover; background-position:center; background-repeat:no-repeat; overflow:hidden;
}
.hero .art::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, transparent calc(100% - 6px), var(--panel) 100%),
    linear-gradient(rgba(0,0,0,.20), rgba(0,0,0,.20));
  pointer-events:none;
}
@media (max-width:880px){ .hero .inner{grid-template-columns:1fr} }

/* Card */
.card{
  background:var(--panel); color:var(--txt);
  border:1px solid var(--border); border-radius:20px;
  padding:28px; box-shadow:var(--shadow);
}
.card h1{margin:0 0 12px; font-size:clamp(22px, 2.3vw, 30px); font-family: var(--font-heading); color:var(--heading)}