:root{
  --notte:#0f1b2d;
  --notte-2:#16263d;
  --corda:#c9d3e0;
  --testo:#e8ecf1;
  --sfumato:#9aa9bd;
  --colofonia:#e0b25c;
  --font-titoli:"Cormorant Garamond",Georgia,serif;
  --font-testo:"Work Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--notte);color:var(--testo);font-family:var(--font-testo);line-height:1.65;font-size:1.05rem}
a{color:inherit}
:focus-visible{outline:2px solid var(--colofonia);outline-offset:3px}

/* Navigazione */
.menu{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:1.2rem clamp(1.2rem,5vw,4rem);background:linear-gradient(var(--notte),transparent)}
.logo{font-family:var(--font-titoli);font-size:1.5rem;font-weight:600;text-decoration:none}
.menu nav{display:flex;gap:2rem}
.menu nav a{text-decoration:none;color:var(--sfumato);padding-bottom:.2rem;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.menu nav a:hover,.menu nav a[aria-current="page"]{color:var(--testo);border-color:var(--colofonia)}

/* Hero */
.hero{position:relative;min-height:100vh;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:3rem;padding:7rem clamp(1.2rem,5vw,4rem) 4rem;overflow:hidden}
#corde{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-testo,.ritratto{position:relative;z-index:1}
.hero h1{font-family:var(--font-titoli);font-weight:500;font-size:clamp(3.2rem,8vw,7rem);line-height:.95;letter-spacing:-.01em}
.hero p.ruolo{margin-top:1.4rem;font-size:1.25rem;color:var(--colofonia)}
.hero p.intro{margin-top:1rem;max-width:34rem;color:var(--sfumato)}
.suggerimento{margin-top:2.2rem;font-size:.9rem;color:var(--sfumato)}

.ritratto {
  justify-self: center;
  width: min(100%, 380px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, var(--notte-2), #243a5a);
  border: 1px solid rgba(224,178,92,.5);
  box-shadow: 0 0 0 12px rgba(15,27,45,.6);
}

.ritratto img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
}

/* Curriculum */
.curriculum{padding:6rem clamp(1.2rem,5vw,4rem);max-width:60rem;margin:auto}
.curriculum h2,.galleria-titolo h1{font-family:var(--font-titoli);font-weight:500;font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:2.5rem}
.gruppo{margin-bottom:3.5rem}
.gruppo h3{font-family:var(--font-titoli);font-size:1.6rem;font-weight:600;color:var(--colofonia);margin-bottom:1.2rem}
.tappe{list-style:none;border-left:1px solid var(--corda);margin-left:.4rem}
.tappe li{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:0 0 1.6rem 1.6rem;position:relative}
.tappe li::before{content:"";position:absolute;left:-4px;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--colofonia)}
.anni{color:var(--sfumato);font-variant-numeric:tabular-nums}
.tappe strong{display:block;font-weight:600}
.tappe span.dettaglio{color:var(--sfumato);font-size:.95rem}

/* Galleria */
.galleria-titolo{padding:8rem clamp(1.2rem,5vw,4rem) 0;max-width:80rem;margin:auto}
.galleria-titolo p{color:var(--sfumato);margin-top:-1.5rem;margin-bottom:2rem}
.griglia{columns:3 260px;column-gap:1.2rem;padding:1rem clamp(1.2rem,5vw,4rem) 5rem;max-width:80rem;margin:auto}
.griglia figure{break-inside:avoid;margin-bottom:1.2rem;cursor:zoom-in;border-radius:6px;overflow:hidden;background:linear-gradient(160deg,var(--notte-2),#243a5a);min-height:200px;position:relative}
.griglia figure:nth-child(3n+1){min-height:320px}
.griglia figure:nth-child(4n+2){min-height:260px}
.griglia img{width:100%;display:block;transition:transform .5s}
.griglia figure:hover img{transform:scale(1.04)}
figcaption{position:absolute;left:0;right:0;bottom:0;padding:.8rem 1rem;font-size:.9rem;background:linear-gradient(transparent,rgba(15,27,45,.85))}
dialog{border:0;background:transparent;max-width:92vw;max-height:92vh;margin:auto}
dialog::backdrop{background:rgba(8,14,24,.92)}
dialog img{max-width:92vw;max-height:88vh;display:block;border-radius:6px}

footer{text-align:center;padding:3rem 1rem;color:var(--sfumato);font-size:.9rem;border-top:1px solid rgba(201,211,224,.15)}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:6.5rem}
  .ritratto{width:min(70%,300px);order:-1;justify-self:start}
  .tappe li{grid-template-columns:1fr;gap:.2rem}
  .menu nav{gap:1.2rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}