/* ====== Design System ====== */
:root{
  --bg: #ffffff; /* bianco */
  --panel: #111111; /* nero */
  --soft: #1a1a1a; /* nero soft */
  --text: #111111; /* testo nero su bianco */
  --muted: #444444; /* grigio scuro */
  --accent: #d4af37; /* oro */
  --brand: #d4af37; /* oro brand */
  --shadow: 0 10px 30px rgba(0,0,0,.20);
  --radius: 1.25rem;
  --maxw: 1100px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
}
img{ max-width:100%; display:block; border-radius: .75rem; }

.container{ width: min(92%, var(--maxw)); margin-inline:auto; }

/* ====== Header ====== */
.site-header{ position: sticky; top:0; z-index:100; backdrop-filter: blur(8px); background: color-mix(in oklab, var(--bg), transparent 20%); border-bottom: 1px solid rgba(0,0,0,.08); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding: .75rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#000; font-weight:800; letter-spacing:.5px; }
.brand img{ width:40px; height:40px; border-radius:8px; object-fit:cover; }
.navlinks{ display:flex; gap: 1rem; align-items:center; }
.navlinks a{ text-decoration:none; color:var(--text); opacity:.9; }
.navlinks a:hover{ opacity:1; }
.btn{ display:inline-block; padding:.65rem 1rem; border:1px solid var(--accent); border-radius: 999px; text-decoration:none; color: var(--text); }
.btn-primary{ background: var(--accent); color:#fff; border-color: var(--accent); font-weight:700; }
.btn-outline{ background: transparent; }
.burger{ display:none; background:none; border:0; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background:#000; margin:5px 0; transition:.2s; border-radius:2px; }

@media (max-width: 840px){
  .burger{ display:block; }
  .navlinks{ position: absolute; inset: 60px 0 auto 0; background: #fff; padding: 1rem 1.2rem; display:none; box-shadow: var(--shadow); }
  .navlinks.show{ display:grid; gap: .8rem; }
}

/* ====== Hero ====== */
.hero{
  position: relative;
  min-height: 70vh;
  display:grid; place-items:center;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('../images/hero.jpg') center/cover no-repeat;
  color: #fff;
}
.hero-inner{ text-align:center; padding: 6rem 0; }
.hero h1{ font-family: 'Playfair Display', serif; font-weight:700; font-size: clamp(2.4rem, 6vw, 4rem); line-height:1.1; margin:0 0 .5rem 0; }
.hero h1 .accent{ color: var(--accent); }
.hero .tagline{ max-width: 60ch; margin: 0 auto 1.2rem auto; opacity:.95; }
.hero-cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.hero-credit{ position:absolute; bottom:.6rem; right:.8rem; font-size:.75rem; opacity:.7; }

/* ====== Sections ====== */
.section{ padding: clamp(3rem, 6vw, 5rem) 0; }
.bg-soft{ background: #f7f7f7; }
.grid-2{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 1.6rem; align-items:center; }
@media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr; } }

.ticks{ list-style:none; padding:0; margin:1rem 0 0 0; display:grid; gap:.5rem; color: var(--text); }
.ticks li::before{ content:"◆"; color: var(--accent); margin-right:.5rem; }

.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px){ .cards{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .cards{ grid-template-columns: 1fr; } }

.card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1.25rem;
  padding: 1rem;
  box-shadow: var(--shadow);
}
.card h3{ margin-top:0; color: #000; }
.card.photo{ padding:.5rem; }
.card.map iframe{ width:100%; height:320px; border:0; border-radius:.75rem; }

.team{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.teacher{ background: #fff; border:1px solid rgba(0,0,0,.08); border-radius: 1.25rem; padding: .8rem; display:flex; gap: .9rem; align-items:center; box-shadow: var(--shadow); }
.teacher img{ width:120px; height:120px; object-fit:cover; border-radius:.75rem; }
@media (max-width: 900px){ .team{ grid-template-columns: 1fr; } }

.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse: collapse; }
th, td{ padding:.8rem; border-bottom: 1px solid rgba(0,0,0,.08); text-align:left; }
thead th{ background: #fafafa; }

.gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.gallery img{ aspect-ratio: 3/2; object-fit: cover; }
@media (max-width: 800px){ .gallery{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .gallery{ grid-template-columns: 1fr; } }

.social{ display:flex; gap:.8rem; margin: .8rem 0; }
.social a svg{ width:28px; height:28px; fill: #000; opacity:.85; }
.social a:hover svg{ opacity:1; }

.footer{ padding: 1.2rem 0; border-top: 1px solid rgba(0,0,0,.07); background: #000; color: #fff; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.9rem; }
.to-top{ color: #fff; text-decoration:none; }
.muted{ color: #555; }