/* ============================================
   NINNETTI — Foglio di stile
   Palette: nero, bianco, rosso
   ============================================ */

:root{
  --nero:#0a0a0a;
  --nero-2:#161616;
  --bianco:#f6f5f1;
  --bianco-puro:#ffffff;
  --rosso:#b81f26;
  --grigio:#59564f;
  --grigio-chiaro:#8c8a84;
  --linea:rgba(255,255,255,0.14);
  --linea-scura:rgba(0,0,0,0.12);
}
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bianco); color:var(--nero); font-family:'Archivo', Arial, sans-serif;
  font-weight:400; line-height:1.65; overflow-x:hidden; width:100%;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
h1,h2,h3{font-family:'Bodoni Moda', Georgia, serif; font-weight:500; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block; width:100%; height:100%; object-fit:cover;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--rosso); color:var(--bianco-puro);}
:focus-visible{outline:2px solid var(--rosso); outline-offset:3px;}
.duotone{filter:grayscale(1) contrast(1.12) brightness(0.96);}
.eyebrow{font-family:'Archivo', sans-serif; font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--nero);}
.kicker{display:flex; align-items:center; gap:1rem; margin-bottom:0.5rem;}
.kicker::before{content:""; width:34px; height:1px; background:var(--rosso); flex:0 0 auto;}

.gallery-section .eyebrow, .contact-panel-full .eyebrow{color:var(--bianco);}

/* ---------- TOPBAR / LOGO ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1.2rem,4vw,3rem); position:relative; z-index:190;
  background:var(--nero); border-bottom:1px solid var(--linea);
}
.brand{display:flex; align-items:center; gap:0.7rem;}
.brand-logo{height:56px; width:auto; object-fit:contain;}
.nav-toggle{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;}
.topbar-right{display:flex; align-items:center; gap:1.2rem; position:relative;}
.call-btn{
  font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--bianco); color:var(--bianco); padding:0.55rem 1.1rem; transition:all .25s ease; white-space:nowrap;
}
.call-btn:hover{background:var(--bianco); color:var(--nero);}
.menu-btn{
  display:flex; align-items:center; gap:0.6rem; cursor:pointer;
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:var(--bianco);
}
.menu-btn .bars{display:flex; flex-direction:column; gap:4px;}
.menu-btn .bars span{width:18px; height:2px; background:var(--bianco); display:block;}

/* ---------- COMPACT DROPDOWN NAV (apertura via CSS :checked, nessun JS necessario) ---------- */
.nav-panel{
  position:absolute; top:calc(100% + 12px); right:0; width:250px; background:var(--nero);
  border:1px solid var(--linea); box-shadow:0 12px 30px rgba(0,0,0,0.35);
  padding:0.6rem 0; z-index:150; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.nav-toggle:checked ~ .nav-panel{opacity:1; visibility:visible; transform:translateY(0);}
.nav-panel a{
  display:flex; align-items:center; gap:0.7rem; padding:0.65rem 1.2rem;
  font-size:0.86rem; color:var(--bianco); border-left:2px solid transparent; transition:all .2s ease;
}
.nav-panel a .num{font-family:'Bodoni Moda', serif; font-style:italic; font-weight:700; font-size:0.78rem; color:var(--bianco);}
.nav-panel a:hover{background:var(--nero-2); border-left-color:var(--rosso); padding-left:1.5rem;}

/* ---------- HERO ---------- */
.hero{position:relative; height:100vh; height:100dvh; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 88%; transition:object-position 0.05s linear; will-change:object-position;}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.45) 55%, rgba(10,10,10,0.55) 100%);
}
.hero-content{position:relative; z-index:2; padding:2rem; text-align:center; display:flex; justify-content:center;}
.hero-content h1{line-height:1; margin-top:1.2rem;}
.hero-content h1 .line1{display:block; font-size:clamp(1.3rem,2.4vw,1.9rem); font-weight:400; letter-spacing:0.02em;}
.hero-content h1 .line2{display:block; font-style:italic; color:var(--rosso); font-size:clamp(2.6rem,5.6vw,4.8rem); margin-top:0.2rem;}
.hero-tagline{max-width:34ch; color:rgba(246,245,241,0.82); font-size:1rem; margin-top:1.4rem;}
.hero-ctas{display:flex; justify-content:center; gap:1rem; flex-wrap:wrap;}
.btn{font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; padding:0.9rem 1.7rem; transition:all .25s ease; border:1px solid var(--bianco); display:inline-block;}
.hero-ctas .btn-solid{font-size:0.92rem; padding:1.3rem 3rem; letter-spacing:0.14em; box-shadow:0 14px 34px rgba(0,0,0,0.4);}
.btn-solid{background:var(--rosso); color:var(--bianco-puro); border-color:var(--rosso);}
.btn-solid:hover{background:var(--bianco-puro); color:var(--nero);}
.btn-outline{color:var(--bianco);}
.btn-outline:hover{background:var(--bianco); color:var(--nero);}
@media (max-width:900px){
  .hero{height:100vh; height:100dvh;}
  .hero-bg img{object-position:center 65%;}
  .hero-content{padding:2rem 1.5rem;}
  .hero-content h1 .line2{font-size:clamp(2.2rem,9vw,3.2rem);}
  .hero-tagline{margin-left:auto; margin-right:auto;}
  .hero-ctas .btn-solid{font-size:0.8rem; padding:1.1rem 2.2rem;}
}

/* ---------- LIGHTBOX (click) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,0.92); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility .25s;
  padding:4vw;
}
.lightbox.active{opacity:1; visibility:visible; pointer-events:auto;}
.lightbox img{
  max-width:80vw; max-height:82vh; width:auto; height:auto; object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,0.55); border:1px solid var(--linea);
}
.lightbox-close{
  position:absolute; top:1.5rem; right:1.5rem; background:none; border:1px solid var(--linea);
  color:var(--bianco); width:42px; height:42px; font-size:1rem; display:flex; align-items:center; justify-content:center;
  transition:all .2s ease;
}
.lightbox-close:hover{background:var(--rosso); border-color:var(--rosso);}

/* ---------- SEZIONI ---------- */
section{padding:5.5rem clamp(1.2rem,6vw,6rem);}
.section-head{max-width:680px; margin-bottom:2.6rem;}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:0.6rem;}
.section-head p{color:var(--grigio); margin-top:0.9rem; font-size:1rem; max-width:56ch;}
@media (max-width:900px){
  .section-head{margin-left:auto; margin-right:auto; text-align:center;}
  .section-head p{margin-left:auto; margin-right:auto;}
  .kicker{justify-content:center;}
}

/* Desktop ampio: più respiro e testi distribuiti su una misura di lettura più estesa */
@media (min-width:1280px){
  section{padding-left:6vw; padding-right:6vw;}
  .section-head{max-width:820px;}
  .section-head h2{font-size:clamp(2.1rem,3.2vw,3rem);}
  .section-head p{font-size:1.06rem; max-width:66ch;}
  .storia{grid-template-columns:1.05fr 1.3fr; gap:5rem; max-width:1500px; margin:0 auto;}
  .storia-text p{font-size:1.05rem; max-width:62ch;}
  .pull-quote{font-size:clamp(1.5rem,1.9vw,2.1rem); max-width:56ch;}
  .manifesto-list{max-width:1500px; margin:0 auto;}
  .m-item{grid-template-columns:110px 1fr;}
  .m-item h3{font-size:1.3rem;}
  .m-item p{font-size:0.98rem; max-width:70ch;}
}

/* ---------- STORIA / FAMIGLIA (schema foto+testo riutilizzato) ---------- */
.storia{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center;}
.storia-photo{aspect-ratio:3/2; min-height:260px; position:relative; overflow:hidden; width:100%; max-width:100%; margin:0 auto;}
.storia-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0;}
.pull-quote{font-family:'Bodoni Moda', serif; font-style:italic; font-size:clamp(1.3rem,2.2vw,1.8rem); line-height:1.4; color:var(--nero); margin-bottom:1.4rem;}
.pull-quote .mark{color:var(--nero); font-weight:700;}
.storia-text p{color:#3a3a37; margin-bottom:1rem; font-size:0.98rem;}
.storia-text .accent{font-weight:600; color:var(--nero);}
@media (max-width:900px){
  .storia{grid-template-columns:1fr; text-align:center;}
  .storia-text .kicker{justify-content:center;}
  .pull-quote{margin-left:auto; margin-right:auto;}
}

/* ---------- MANIFESTO ---------- */
.manifesto{background:var(--nero); color:var(--bianco);}
.manifesto .section-head p{color:rgba(246,245,241,0.68);}
.manifesto-list{border-top:1px solid var(--linea);}
.m-item{display:grid; grid-template-columns:90px 1fr; gap:1.8rem; padding:1.5rem 0; border-bottom:1px solid var(--linea); align-items:baseline;}
.m-item .m-num{font-family:'Bodoni Moda', serif; font-style:italic; font-weight:700; font-size:1.5rem; color:var(--bianco);}
.m-item h3{font-size:1.15rem; font-weight:500; margin-bottom:0.3rem;}
.m-item p{color:rgba(246,245,241,0.68); font-size:0.9rem; max-width:60ch;}
@media (max-width:600px){ .m-item{grid-template-columns:50px 1fr;} }

/* ---------- GALLERIA ---------- */
.gallery-section{background:var(--nero);}
.gallery-section .section-head{color:var(--bianco);}
.gallery-section .section-head p{color:rgba(246,245,241,0.65);}
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; grid-auto-flow:dense; gap:0.5rem;}
@media (min-width:1280px){
  .gallery-grid{grid-auto-rows:230px; gap:0.6rem; max-width:1500px; margin:0 auto;}
  .gallery-section .section-head{max-width:820px; margin-left:auto; margin-right:auto;}
}
.g-tile{position:relative; overflow:hidden; min-height:100%;}
.g-tile img{transition:transform .6s ease, filter .4s ease;}
.g-tile:hover img{transform:scale(1.06); filter:grayscale(0.4) contrast(1.1);}
.g-tile::after{content:""; position:absolute; inset:0; border:1px solid transparent; transition:border-color .3s ease; pointer-events:none;}
.g-tile:hover::after{border-color:var(--rosso);}
.g-tile .g-label{position:absolute; bottom:0.6rem; left:0.6rem; font-family:'Bodoni Moda', serif; font-style:italic; font-size:0.72rem; color:var(--bianco-puro); background:rgba(10,10,10,0.55); padding:0.2rem 0.6rem; z-index:2; opacity:0; transition:opacity .3s ease;}
.g-tile:hover .g-label{opacity:1;}
.g-wide{grid-column:span 2;}
.g-tall{grid-row:span 2;}
@media (max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:170px;}
  .g-wide{grid-column:span 2;}
  .g-tall{grid-row:span 1;}
}

/* ---------- DOVE / CONTATTI ---------- */
#dove{background:var(--nero); padding:0;}
.contact-panel-full{
  color:var(--bianco); padding:5rem clamp(1.8rem,6vw,4rem);
  max-width:640px; margin:0 auto; text-align:center;
}
.contact-panel-full .kicker{justify-content:center;}
.contact-panel-full .c-row{flex-direction:column; align-items:center; gap:0.4rem; text-align:center;}
.contact-panel-full .c-row .value{text-align:center;}
.closed-day{display:inline-block; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; font-size:0.92rem; margin-top:0.2rem;}
.c-row{display:flex; justify-content:space-between; gap:1rem; padding:1.15rem 0; border-bottom:1px solid var(--linea);}
.c-row:first-of-type{border-top:1px solid var(--linea);}
.c-row .label{font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--bianco); font-weight:700; white-space:nowrap;}
.c-row .value{text-align:right; font-size:0.94rem;}
@media (max-width:900px){
  .contact-panel-full{padding:3.5rem 1.5rem;}
}

footer{background:var(--nero); color:rgba(246,245,241,0.6); padding:2rem clamp(1.2rem,6vw,6rem); display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; font-size:0.78rem; border-top:1px solid var(--linea);}

.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

.section-divider{height:1px; background:var(--linea-scura); margin:0 clamp(1.2rem,6vw,6rem);}