/* ==========================================================================
   Eugenio Restelli — sito batterista
   Font: Playfair Display (classico) + Space Grotesk (label) + Inter (testo)
   Palette: CREMA (sfondi) · GRAFITE (testo, footer) · BORDEAUX (accento, sezione lezioni) · TERRACOTTA (onda, numeri) · ORO SPENTO (dettagli)
   Separatore: onda sonora (beat)
   ========================================================================== */
:root{
  --paper:#f7f0e5;            /* crema */
  --paper-2:#eee3d3;          /* crema più scura (riquadri) */
  --ink:#2d2c2e;              /* grigio grafite */
  --muted:#6e6862;            /* testo muto */
  --line:#e2d4c0;             /* hairline */
  --accent:#7b2233;           /* bordeaux */
  --terracotta:#b65a3c;       /* terracotta */
  --gold:#b39a5f;             /* oro spento */
  --accent-soft:#d9c28a;      /* oro chiaro, su fondo scuro */
  --deep:#6d1e2c;             /* bordeaux profondo: sezione lezioni */
  --deep-2:#2d2c2e;           /* grafite: footer */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);background:var(--paper);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:500}
.ph-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;letter-spacing:.2em;text-transform:uppercase}

/* separatore = onda sonora */
.beat{display:inline-flex;gap:5px;align-items:flex-end;height:22px}
.beat span{width:3px;border-radius:2px;background:var(--terracotta)}
.beat span:nth-child(1){height:9px}
.beat span:nth-child(2){height:18px}
.beat span:nth-child(3){height:13px}
.beat span:nth-child(4){height:22px}
.beat span:nth-child(5){height:8px}
.beat span:nth-child(6){height:15px}
.beat span:nth-child(7){height:11px}

/* ---- NAV ---- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(247,240,229,.92);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
header.scrolled{border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{font-family:'Playfair Display',serif;font-weight:600;font-size:19px;letter-spacing:.01em}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-family:'Space Grotesk',sans-serif;font-size:14px;letter-spacing:.02em;position:relative;color:var(--ink)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--terracotta);transition:width .25s}
.nav-links a:not(.btn):hover::after,.nav-links a.active:not(.btn)::after{width:100%}
.nav-links a.active:not(.btn){color:var(--accent)}
.nav-links{margin-left:auto}
/* selettore lingua IT / EN */
.lang-switch{display:flex;align-items:center;gap:2px;margin-left:24px;font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.08em}
.lang-switch button{background:none;border:0;cursor:pointer;padding:6px 4px;font:inherit;color:var(--muted)}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button[aria-pressed="true"]{color:var(--accent);font-weight:600}
.lang-switch .sep{color:var(--line)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin:-8px;z-index:60}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s}
.btn{
  display:inline-block;font-family:'Space Grotesk',sans-serif;
  border:1.5px solid var(--ink);border-radius:999px;padding:9px 20px;
  font-size:13.5px;letter-spacing:.02em;font-weight:500;
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-accent{border-color:var(--accent);color:var(--accent)}
.btn-accent:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-light{border-color:rgba(255,255,255,.65);color:#fff}
.btn-light:hover{background:#fff;color:var(--deep);border-color:#fff}

/* ---- PAGE HEADER (pagine interne) ---- */
.page-head{padding:150px 0 20px;text-align:center;position:relative;overflow:hidden}
.page-head .eyebrow{display:block;margin-bottom:16px}
.page-head h1{font-size:clamp(40px,6.5vw,74px);line-height:1.0;font-weight:500}
.page-head p{color:var(--muted);max-width:52ch;margin:20px auto 0;font-size:16.5px}
.page-head .beat{margin-top:28px}
.page-head .eyebrow + .beat{margin-top:4px}
/* titolo più piccolo e meno aria sopra (Su di me) */
.page-head.compact{padding:112px 0 8px}
.page-head.compact h1{font-size:clamp(34px,4.8vw,54px)}
.page-head.compact .beat{margin-top:18px}

/* ---- HOME HERO (testo sopra, foto verticale centrata sotto) ---- */
.hero{padding:150px 0 0;text-align:center;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:60px;left:50%;transform:translateX(-50%);
  width:min(760px,90vw);height:min(760px,90vw);border-radius:50%;
  background:radial-gradient(circle,rgba(182,90,60,.09),rgba(182,90,60,0) 62%);
  z-index:0;pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.hero .eyebrow{display:block;margin-bottom:22px}
.hero h1{font-size:clamp(56px,10vw,138px);line-height:.94;margin-bottom:48px;font-weight:400}
.hero .role{font-family:'Playfair Display',serif;font-style:italic;color:var(--muted);font-size:clamp(18px,2.6vw,26px);margin-bottom:26px;font-weight:400}
.hero p.lead{font-family:'Inter',sans-serif;font-size:17px;color:#3a3633;max-width:56ch;margin:0 auto 34px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.hero .beat{margin-top:34px}
.hero-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin:52px auto 0}
.hero-photo{aspect-ratio:4/5;background:var(--paper-2);position:relative;overflow:hidden}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- HOME VIDEO (verticale 9:16, centrato) ---- */
.video-block{padding:56px 0 88px}
.video-frame{width:min(380px,100%);margin:0 auto;aspect-ratio:9/16;background:#111;overflow:hidden}
.video-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#111}

/* ---- SECTIONS ---- */
section{padding:100px 0}
.section-head{margin-bottom:52px;max-width:660px}
.section-head .eyebrow{display:block;margin-bottom:16px}
.section-head h2{font-size:clamp(32px,4.4vw,50px);line-height:1.04}

/* ---- ABOUT ---- */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.about-photo{aspect-ratio:4/5;background:var(--paper-2);border:1px solid var(--line);position:relative;overflow:hidden}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.about-body p{margin-bottom:18px;font-size:16.5px;color:#2f2c2a}
.about-body p:last-child{margin-bottom:0}
.facts{display:flex;gap:44px;margin-top:38px;flex-wrap:wrap}
.fact .n{font-family:'Playfair Display',serif;font-size:40px;line-height:1;color:var(--terracotta);font-weight:500}
.fact .l{font-family:'Space Grotesk',sans-serif;font-size:12px;color:var(--muted);letter-spacing:.04em;margin-top:6px}

/* ---- ESPERIENZE (schede a due colonne: genere, nome, cosa, quando) ---- */
.gigs{display:grid;grid-template-columns:repeat(2,1fr);column-gap:64px;border-bottom:1px solid var(--line)}
.gig{display:flex;flex-direction:column;gap:10px;padding:34px 0 30px;border-top:1px solid var(--line)}
.gig .tag{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.gig h3{font-family:'Playfair Display',serif;font-size:clamp(23px,2.4vw,28px);line-height:1.15;font-weight:500}
.gig p{font-size:15px;color:#5b5550;max-width:46ch}
.gig .when{margin-top:auto;padding-top:6px;font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--muted);letter-spacing:.02em}

/* ---- FORMAZIONE ---- */
.formazione{max-width:760px;margin:0 auto;text-align:center}
.rows{border-top:1px solid var(--line)}
.row{padding:20px 0;border-bottom:1px solid var(--line)}
.row h3{font-family:'Playfair Display',serif;font-size:19px;font-weight:500;margin-bottom:3px}
.row .sub{font-family:'Space Grotesk',sans-serif;font-size:13.5px;color:var(--muted)}

/* ---- GALLERY ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{aspect-ratio:1/1;background:var(--paper-2);border:1px solid var(--line);position:relative;overflow:hidden}
.tile.wide{grid-column:span 2;aspect-ratio:2/1}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile:hover img{transform:scale(1.05)}
/* galleria a colonne: foto intere, senza ritaglio */
.gallery-masonry{columns:3;column-gap:16px}
.shot{break-inside:avoid;margin:0 0 16px;overflow:hidden;background:var(--paper-2)}
.shot{position:relative;cursor:zoom-in}
.shot img,.shot video{display:block;width:100%;height:auto;transition:transform .6s ease}
.shot:hover img,.shot:hover video{transform:scale(1.03)}
.shot.is-video{cursor:pointer}
.shot .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.9);pointer-events:none}
.shot .play::after{content:"";position:absolute;left:25px;top:19px;border-style:solid;border-width:13px 0 13px 20px;border-color:transparent transparent transparent #fff}

/* ---- LIGHTBOX (foto/video a tutto schermo) ---- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(14,12,10,.94);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lb-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:56px 72px}
.lb-stage img,.lb-stage video{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lightbox button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font-size:44px;line-height:1;padding:10px 16px;opacity:.85}
.lightbox button:hover{opacity:1}
.lb-close{top:10px;right:14px}
.lb-prev{left:6px;top:50%;transform:translateY(-50%);font-size:64px}
.lb-next{right:6px;top:50%;transform:translateY(-50%);font-size:64px}

/* ---- LESSONS CTA (bordeaux profondo, dettagli oro) ---- */
.lessons{background:var(--deep);color:var(--paper);position:relative;overflow:hidden}
.lessons::before{
  content:"";position:absolute;top:-120px;right:-80px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(179,154,95,.28),transparent 65%);pointer-events:none;
}
.lessons .eyebrow{display:block;margin-bottom:18px;color:var(--accent-soft);font-size:13px}
.lessons .inner{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:1}
.lessons .beat{margin-bottom:22px}
.lessons .beat span{background:var(--gold)}
.lessons p{color:#fff;font-size:clamp(19px,2.2vw,23px);line-height:1.5;margin:0 auto 32px;max-width:34ch}

/* ---- SOCIAL ICONS (footer) ---- */
.icon-link{display:inline-flex;align-items:center;justify-content:center}
.icon-link svg{display:block}

/* ---- CONTACT (form stile Bolamperti) ---- */
.contact-center{max-width:620px;margin:0 auto}
.contact-form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;text-align:left}
.field label{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.field input,.field textarea{
  font-family:'Inter',sans-serif;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:13px 16px;width:100%;transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(123,34,51,.15)}
.field textarea{min-height:150px;resize:vertical}
.contact-form .btn{align-self:flex-start;margin-top:6px;cursor:pointer;background:none}
.form-note{font-size:13px;color:var(--muted);text-align:center;margin-top:14px}
.contact-meta{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:52px;text-align:center}
.contact-meta .k{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.contact-meta .v{font-size:16px;font-weight:500}
.contact-meta a.v:hover{color:var(--accent)}

/* ---- FOOTER ---- */
footer{background:var(--deep-2);color:rgba(255,255,255,.72);padding:26px 0 20px;border-top:3px solid var(--gold)}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot .brand{color:var(--gold);font-size:17px}
.foot .social{display:flex;gap:10px}
.foot .social .icon-link{
  width:34px;height:34px;border-radius:9px;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .2s;
}
.foot .social .icon-link:hover{transform:translateY(-3px)}
.foot .social .icon-link svg{width:20px;height:20px}
.foot-legal{margin-top:14px;font-family:'Space Grotesk',sans-serif;font-size:12px;color:rgba(255,255,255,.45);text-align:center}

/* ---- RESPONSIVE ---- */
/* menu mobile (hamburger + tendina): parte già sotto i 1060px, così la barra non si affolla */
@media(max-width:1060px){
  .nav-toggle{display:flex}
  header.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.open .nav-toggle span:nth-child(2){opacity:0}
  header.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-links{
    position:fixed;top:70px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:6px 28px 22px;box-shadow:0 14px 26px rgba(0,0,0,.07);
    transform:translateY(-16px);opacity:0;pointer-events:none;
    transition:transform .25s,opacity .25s;
  }
  header.open .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav-links a:not(.btn){padding:15px 2px;font-size:17px;border-bottom:1px solid var(--line)}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links .btn{margin-top:18px;text-align:center;padding:13px}
  .lang-switch{margin-left:auto;margin-right:22px}
}
@media(max-width:860px){
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-photo{max-width:360px}
  .gigs{grid-template-columns:1fr}
  .gig{padding:28px 0 24px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-masonry{columns:2;column-gap:10px}
  .shot{margin-bottom:10px}
  .lb-stage{padding:56px 12px}
  .lb-prev,.lb-next{top:auto;bottom:14px;transform:none}
  .hero-photos{gap:10px}
  .video-block{padding:44px 0 64px}
  .tile.wide{grid-column:span 2}
  section{padding:74px 0}
  .page-head{padding:126px 0 8px}
  .contact-meta{gap:28px}
}

/* ---- SOLO TELEFONO: foto della home più grandi, video un po' più piccolo ---- */
@media(max-width:600px){
  .hero-photos{margin-left:-18px;margin-right:-18px;gap:8px}
  .video-frame{width:80%}
}