/* =========================================================
   guidovilla.net — foglio di stile unico
   ========================================================= */

:root{
  --bg:        #0b0b0c;
  --bg-2:      #101012;
  --fg:        #ece9e3;
  --muted:     #8b8780;
  --line:      rgba(255,255,255,.12);
  --accent:    #b8975c;
  --serif:     'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --nav-h:     74px;
  --pad:       clamp(20px, 5vw, 90px);
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.no-scroll{ overflow:hidden; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--accent); color:#0b0b0c; }

/* ---------------- tipografia ---------------- */

h1,h2,h3{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.12;
  margin:0;
  letter-spacing:.01em;
}

.eyebrow{
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 22px;
}

.lede{
  font-family:var(--serif);
  font-size:clamp(19px,2.1vw,25px);
  line-height:1.55;
  color:#d8d4cc;
  font-weight:300;
}

/* ---------------- navigazione ---------------- */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  transition:background .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(11,11,12,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}

.nav__brand{
  font-family:var(--serif);
  font-size:19px;
  letter-spacing:.22em;
  text-transform:uppercase;
  white-space:nowrap;
}

.nav__links{ display:flex; gap:34px; align-items:center; }

.nav__links a{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  padding:6px 0;
  position:relative;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover,
.nav__links a.is-active{ color:var(--fg); }
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; }

.nav__lang{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line);
  padding:5px 11px; border-radius:2px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.nav__lang::after{ display:none; }
.nav__lang:hover{ color:var(--fg); border-color:var(--accent); }

.nav__toggle{
  display:none; background:none; border:0; cursor:pointer;
  width:34px; height:34px; padding:0; position:relative;
}
.nav__toggle span{
  position:absolute; left:4px; width:26px; height:1px; background:var(--fg);
  transition:transform .4s var(--ease), opacity .25s var(--ease);
}
.nav__toggle span:nth-child(1){ top:12px; }
.nav__toggle span:nth-child(2){ top:21px; }
.nav.open .nav__toggle span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2){ transform:translateY(-4.5px) rotate(-45deg); }

@media (max-width:860px){
  .nav__toggle{ display:block; z-index:2; }
  .nav__links{
    position:fixed; inset:0;
    background:rgba(11,11,12,.98);
    backdrop-filter:blur(18px);
    flex-direction:column; justify-content:center; gap:30px;
    opacity:0; pointer-events:none;
    transition:opacity .4s var(--ease);
  }
  .nav__links a{ font-size:14px; letter-spacing:.24em; }
  .nav.open .nav__links{ opacity:1; pointer-events:auto; }
}

/* ---------------- struttura ---------------- */

main{ min-height:60vh; }
.wrap{ padding:0 var(--pad); }
.narrow{ max-width:760px; }

.page-head{
  padding:calc(var(--nav-h) + clamp(70px,11vw,150px)) var(--pad) clamp(46px,6vw,78px);
  border-bottom:1px solid var(--line);
}
.page-head h1{ font-size:clamp(40px,7vw,80px); }
.page-head p{
  color:var(--muted); max-width:620px;
  margin:22px 0 0; font-size:15px;
}

.section{ padding:clamp(70px,10vw,140px) var(--pad); }
.section + .section{ border-top:1px solid var(--line); }

/* ---------------- home: hero ---------------- */

.hero{
  position:relative; height:100svh; min-height:560px;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 2.2s var(--ease);
  position:absolute; inset:0;
  transform:scale(1.06);
  animation:heroDrift 22s ease-in-out infinite alternate;
}
.hero__media img.on{ opacity:.72; }
@keyframes heroDrift{ from{ transform:scale(1.04);} to{ transform:scale(1.12);} }

.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(11,11,12,.72) 0%, rgba(11,11,12,.15) 42%, rgba(11,11,12,.96) 100%);
}
.hero__inner{ position:relative; z-index:2; padding:0 var(--pad) clamp(56px,9vw,110px); width:100%; }
.hero__name{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(52px,11vw,140px); line-height:.98;
  margin:0 0 18px; letter-spacing:.01em;
}
.hero__sub{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:#cfcac1; margin:0;
}

.scroll-cue{
  position:absolute; left:50%; bottom:26px; z-index:3;
  transform:translateX(-50%);
  width:1px; height:52px; background:linear-gradient(var(--accent), transparent);
  opacity:.7;
}

/* ---------------- griglia cicli (home) ---------------- */

.cicli{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; }
@media (max-width:760px){ .cicli{ grid-template-columns:1fr; } }

.ciclo{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--bg-2); display:block;
}
.ciclo img{
  width:100%; height:100%; object-fit:cover;
  opacity:.55; transform:scale(1.02);
  transition:opacity .8s var(--ease), transform 1.4s var(--ease);
}
.ciclo:hover img{ opacity:.78; transform:scale(1.07); }
.ciclo__label{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:clamp(22px,3vw,38px);
  background:linear-gradient(transparent, rgba(11,11,12,.85));
}
.ciclo__label h3{ font-size:clamp(24px,3.4vw,40px); }
.ciclo__label span{
  display:block; margin-top:8px;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
}
.ciclo.is-empty img{ display:none; }
.ciclo.is-empty{ border:1px solid var(--line); }

/* ---------------- galleria opere ---------------- */

.gallery{
  columns:3; column-gap:clamp(14px,2vw,30px);
  padding:clamp(46px,7vw,90px) var(--pad) clamp(80px,10vw,140px);
}
@media (max-width:1000px){ .gallery{ columns:2; } }
@media (max-width:620px){  .gallery{ columns:1; } }

.card{
  break-inside:avoid; margin:0 0 clamp(14px,2vw,30px);
  cursor:zoom-in; position:relative;
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.card.in{ opacity:1; transform:none; }
.card__img{ position:relative; overflow:hidden; background:var(--bg-2); }
.card__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease), opacity .5s var(--ease);
  opacity:.92;
}
.card:hover .card__img img{ transform:scale(1.045); opacity:1; }
.card__meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:13px 2px 0;
}
.card__meta h3{ font-size:19px; font-family:var(--serif); font-weight:300; }
.card__meta h3 em,
.lb__cap h3 em{ font-style:italic; }
.card__meta h3 .anno,
.lb__cap h3 .anno{ color:var(--muted); font-variant-numeric:tabular-nums; }
.card__meta span{ font-size:11px; letter-spacing:.16em; color:var(--muted); white-space:nowrap; }

.empty-note{
  padding:clamp(60px,9vw,120px) var(--pad);
  color:var(--muted); font-family:var(--serif);
  font-size:clamp(20px,2.6vw,30px); text-align:center; font-weight:300;
}

/* ---------------- lightbox ---------------- */

.lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(7,7,8,.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.lb.open{ opacity:1; pointer-events:auto; }
.lb__fig{
  margin:0; max-width:min(1300px,92vw); max-height:88vh;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.lb__fig img{
  max-width:100%; max-height:76vh; width:auto; object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.lb__cap{ text-align:center; }
.lb__cap h3{ font-size:clamp(20px,2.4vw,28px); }
.lb__cap p{ margin:7px 0 0; font-size:12px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }

.lb button{
  position:absolute; background:none; border:0; color:var(--fg);
  cursor:pointer; padding:16px; line-height:1;
  font-family:var(--serif); font-size:34px; font-weight:300;
  opacity:.55; transition:opacity .3s var(--ease);
}
.lb button:hover{ opacity:1; }
.lb__close{ top:12px; right:var(--pad); font-size:28px; }
.lb__prev{ left:max(8px, calc(var(--pad) - 40px)); top:50%; transform:translateY(-50%); }
.lb__next{ right:max(8px, calc(var(--pad) - 40px)); top:50%; transform:translateY(-50%); }
.lb__count{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.2em; color:var(--muted);
}

/* ---------------- biografia ---------------- */

.bio{
  display:grid; grid-template-columns:minmax(240px,360px) 1fr;
  gap:clamp(34px,6vw,90px); align-items:start;
}
@media (max-width:880px){ .bio{ grid-template-columns:1fr; } }
.bio__portrait{ position:sticky; top:calc(var(--nav-h) + 34px); }
.bio__portrait figure,
.bio__foto{ margin:0; }
.bio__portrait img,
.bio__foto img{
  width:100%; height:auto;
  filter:grayscale(1) contrast(1.05) brightness(.94);
  opacity:.92; transition:opacity .6s var(--ease);
}
.bio__portrait img:hover,
.bio__foto img:hover{ opacity:1; }
.bio__portrait figcaption,
.bio__foto figcaption{
  margin-top:12px; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
}
.bio__foto{
  margin:clamp(38px,5vw,56px) 0; max-width:420px;
}
.bio__portrait .placeholder{
  aspect-ratio:3/4; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; text-align:center; padding:22px;
}
@media (max-width:880px){
  .bio__portrait{ position:static; max-width:340px; }
}
.bio__text p{ margin:0 0 22px; color:#c6c2ba; }
.bio__text h2{
  font-size:clamp(26px,3.4vw,38px);
  margin:clamp(44px,6vw,72px) 0 24px;
  padding-top:clamp(34px,5vw,54px);
  border-top:1px solid var(--line);
}
.bio__text .sign{
  font-family:var(--serif); font-style:italic;
  color:var(--muted); font-size:17px;
}

/* ---------------- mostre ---------------- */

.mostre{ max-width:900px; }
.mostra{
  display:grid; grid-template-columns:82px 1fr; gap:clamp(18px,3vw,42px);
  padding:22px 0; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.mostra:first-child{ border-top:1px solid var(--line); }
.mostra__anno{
  font-family:var(--serif); font-size:24px; color:var(--accent);
  font-weight:300; font-variant-numeric:tabular-nums;
}
.mostra__tit{ font-family:var(--serif); font-size:21px; font-weight:300; }
.mostra__luogo{ font-size:13px; color:var(--muted); margin-top:5px; }
.mostra__tipo{
  display:inline-block; margin-left:10px; vertical-align:middle;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line);
  padding:3px 8px; border-radius:2px;
}
@media (max-width:560px){ .mostra{ grid-template-columns:1fr; gap:4px; } }

.foto-mostre{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:2px; margin-top:clamp(34px,5vw,56px);
}
.foto-mostre a{ aspect-ratio:3/2; overflow:hidden; background:var(--bg-2); cursor:zoom-in; }
.foto-mostre img{ width:100%; height:100%; object-fit:cover; opacity:.8; transition:opacity .6s var(--ease), transform 1.2s var(--ease); }
.foto-mostre a:hover img{ opacity:1; transform:scale(1.05); }

/* ---------------- contatti ---------------- */

.contatti{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(30px,5vw,64px); }
.contatti dt{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px;
}
.contatti dd{ margin:0 0 26px; font-family:var(--serif); font-size:clamp(19px,2.1vw,24px); font-weight:300; }
.contatti dd a{ border-bottom:1px solid var(--line); padding-bottom:3px; transition:border-color .35s var(--ease); }
.contatti dd a:hover{ border-bottom-color:var(--accent); }

/* ---------------- pulsanti / link ---------------- */

.link-more{
  display:inline-flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg); margin-top:30px;
}
.link-more::after{
  content:''; width:44px; height:1px; background:var(--accent);
  transition:width .45s var(--ease);
}
.link-more:hover::after{ width:74px; }

/* ---------------- footer ---------------- */

.footer{
  border-top:1px solid var(--line);
  padding:clamp(50px,7vw,80px) var(--pad) 40px;
  display:flex; flex-wrap:wrap; gap:26px;
  justify-content:space-between; align-items:flex-end;
  color:var(--muted); font-size:12px;
}
.footer__brand{
  font-family:var(--serif); font-size:17px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg);
}
.footer a:hover{ color:var(--fg); }
.footer__links{ display:flex; gap:22px; flex-wrap:wrap; }

/* ---------------- animazione di ingresso ---------------- */

.reveal{ opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .reveal,.card{ opacity:1; transform:none; }
}