/* Ballet School Theatre
   Tema: scuro, bloccato (una sola modalita' per tutta la pagina).
   Raggi: 0 ovunque. Accento: carminio, usato identico in ogni sezione. */

@font-face{ font-family:"Jost"; font-weight:300 500; font-style:normal; font-display:swap; src:url(fonts/jost.woff2) format("woff2"); }
@font-face{ font-family:"Playfair Display"; font-weight:400 500; font-style:normal; font-display:swap; src:url(fonts/playfair.woff2) format("woff2"); }
@font-face{ font-family:"Playfair Display"; font-weight:400 500; font-style:italic; font-display:swap; src:url(fonts/playfair-italic.woff2) format("woff2"); }

:root{
  --inchiostro:  #0f0d0e;
  --inchiostro2: #171416;   /* superficie leggermente sollevata */
  --osso:        #efeae2;
  --osso-soft:   #b6afa6;   /* testo secondario, 7.1:1 su --inchiostro */
  --carminio:    #b23a4e;
  --carminio-up: #d2566b;   /* solo su fondo scuro, 5.0:1 */
  --filo:        #2b2629;

  --gutter: clamp(1rem, 5vw, 6rem);
  --sezione: clamp(5rem, 11vw, 10rem);
  --display: "Playfair Display", Georgia, serif;
  --testo: "Jost", system-ui, -apple-system, sans-serif;
  --curva: cubic-bezier(.16,1,.3,1);
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--inchiostro);
  color:var(--osso);
  font-family:var(--testo);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }

h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.12; margin:0; }
p{ margin:0; }

a{ color:inherit; }

::selection{ background:var(--carminio); color:var(--osso); }

:focus-visible{
  outline:2px solid var(--carminio-up);
  outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px;
  background:var(--osso); color:var(--inchiostro);
  padding:.75rem 1rem; z-index:100;
}
.skip:focus{ left:1rem; top:1rem; }

/* ---------- etichette (max 3 in tutta la pagina) ---------- */
.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--carminio-up); margin-bottom:1.25rem;
}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap;                /* mai a capo su due righe */
  padding:.85rem 1.6rem;
  font-family:var(--testo); font-size:.9rem; font-weight:400;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; border-radius:0;
  transition:background .25s var(--curva), color .25s var(--curva),
             border-color .25s var(--curva), transform .12s var(--curva);
}
.btn--primary{ background:var(--carminio); color:var(--osso); }  /* 5.4:1 */
.btn--primary:hover{ background:#c44359; }
.btn--ghost{ border-color:#4a4247; color:var(--osso); }
.btn--ghost:hover{ border-color:var(--osso); }
.btn:active{ transform:translateY(1px); }

/* ---------- nav : una riga, max 72px ---------- */
#top-sentinel{ position:absolute; top:0; height:1px; width:1px; }

.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(15,13,14,0);
  border-bottom:1px solid transparent;
  transition:background .35s var(--curva), border-color .35s var(--curva);
}
.nav.is-stuck{
  background:rgba(15,13,14,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--filo);
}
@media (prefers-reduced-transparency: reduce){
  .nav.is-stuck{ background:var(--inchiostro); backdrop-filter:none; }
}

.nav__inner{
  height:72px; padding:0 var(--gutter);
  display:flex; align-items:center; gap:1.5rem;
}
.wordmark{
  text-decoration:none; margin-right:auto; line-height:1.1;
  display:flex; align-items:center; gap:.7rem;
}
.wordmark__mark{ height:40px; width:auto; }
.wordmark__txt{ display:block; }
.wordmark__b{
  display:block; font-family:var(--display); font-size:1.05rem; letter-spacing:.02em;
}
.wordmark__s{
  display:block; font-size:.62rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--osso-soft);
}
.nav__links{ display:flex; gap:1.6rem; }
.nav__links a{
  text-decoration:none; font-size:.85rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--osso-soft);
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav__links a:hover{ color:var(--osso); border-bottom-color:var(--carminio); }

.nav__toggle{
  display:none; background:none; border:0; color:var(--osso);
  font-size:1.7rem; line-height:1; padding:.25rem; cursor:pointer;
}
.nav__drawer{ display:none; }

/* 1024 e non 900: con sei voci la riga non entra piu' sotto questa soglia */
@media (max-width:1024px){
  .nav__links, .nav__cta{ display:none; }
  html:not(.js) .nav__toggle{ display:none; }
  html:not(.js) .nav__inner{ height:auto; flex-wrap:wrap; padding-block:1rem; gap:1rem; }
  html:not(.js) .nav__links{ display:flex; flex-wrap:wrap; gap:1.25rem; width:100%; }
  .nav__toggle{ display:block; }
  .nav__drawer[hidden]{ display:none; }
  .nav__drawer{
    display:flex; flex-direction:column; gap:.25rem;
    padding:1rem var(--gutter) 2rem;
    background:var(--inchiostro); border-bottom:1px solid var(--filo);
  }
  .nav__drawer a{
    text-decoration:none; padding:.85rem 0; font-size:1rem;
    letter-spacing:.06em; text-transform:uppercase;
    border-bottom:1px solid var(--filo);
  }
  .nav__drawer .btn{ margin-top:1rem; border-bottom:0; }
}

/* ---------- hero : split asimmetrico 5/7 ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
  min-height:calc(100dvh - 72px);
  padding:0 0 0 var(--gutter);
}
.hero__copy{ max-width:37rem; padding:clamp(3rem,6vw,5rem) 0; }
.hero__title{
  font-size:clamp(2.6rem,5.4vw,4.35rem);
  letter-spacing:-.015em;
  margin-bottom:1.75rem;
}
.hero__kicker{
  display:block; font-family:var(--testo);
  font-size:.74rem; font-weight:400; letter-spacing:.22em;
  text-transform:uppercase; color:var(--carminio-up);
  margin-bottom:1.4rem;
}
/* riserva per le discendenti del corsivo */
.hero__title em{
  font-style:italic; color:var(--carminio-up);
  display:inline-block; line-height:1.14; padding-bottom:.12em;
}
.hero__sub{
  color:var(--osso-soft); max-width:30rem;
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  margin-bottom:2.5rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }

.hero__media{ position:relative; align-self:stretch; min-height:60vh; }
.hero__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.82);
}
.hero__media::after{                       /* raccordo verso il fondo pagina */
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--inchiostro) 0%,rgba(15,13,14,.45) 9%,transparent 34%);
}

@media (max-width:880px){
  .hero{
    grid-template-columns:1fr;
    padding:0 0 3.5rem;
    min-height:0; gap:2.5rem;
  }
  .hero__copy{ padding:0 var(--gutter); max-width:none; }
  .hero__media{ min-height:56vh; order:-1; }
  .hero__media::after{
    background:linear-gradient(180deg,rgba(15,13,14,.35),transparent 45%,var(--inchiostro));
  }
}

/* ---------- metodo : banda editoriale ---------- */
.metodo{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem,6vw,5rem); align-items:center;
  padding:var(--sezione) var(--gutter);
  border-top:1px solid var(--filo);
}
.metodo__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  max-height:32rem;
  filter:grayscale(.35) brightness(.9);
}
.metodo__text h2{
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  max-width:24ch; margin-bottom:2.25rem;
}
.metodo__cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1.75rem;
}
.metodo__cols p{ color:var(--osso-soft); max-width:42ch; }
@media (max-width:880px){ .metodo{ grid-template-columns:1fr; } }

/* ---------- testata di sezione ---------- */
.section-head{ margin-bottom:clamp(2.5rem,5vw,4rem); max-width:44rem; }
.section-head h2{ font-size:clamp(2.1rem,4.5vw,3.4rem); margin-bottom:1rem; }
.section-head p{ color:var(--osso-soft); max-width:52ch; }

/* ---------- corsi : bento 4 col x 3 righe = 12 unita', 8 celle ---------- */
.corsi{ padding:var(--sezione) var(--gutter); border-top:1px solid var(--filo); }

.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(14rem,auto);
  gap:1px;                       /* il fondo che traspare fa da filo */
  background:var(--filo);
  border:1px solid var(--filo);
  grid-template-areas:
    "classico classico prope   gioco"
    "classico classico modern  hiphop"
    "heels    country  latino  latino";
}
.cell--classico { grid-area:classico; }
.cell--prope    { grid-area:prope; }
.cell--modern   { grid-area:modern; }
.cell--hiphop   { grid-area:hiphop; }
.cell--gioco    { grid-area:gioco; }
.cell--heels    { grid-area:heels; }
.cell--country  { grid-area:country; }
.cell--latino   { grid-area:latino; }

.cell{
  position:relative; overflow:hidden;
  background:var(--inchiostro);
  display:flex; align-items:flex-end;
  transition:background .3s var(--curva);
}
.cell:hover{ background:var(--inchiostro2); }
.cell img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.42);
  transition:transform .7s var(--curva), filter .5s var(--curva);
}
.cell:hover img{ transform:scale(1.04); filter:grayscale(.55) brightness(.5); }
.cell img + .cell__body::before{        /* velo per la leggibilita' sul fotografico */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg,rgba(15,13,14,.95) 0%,rgba(15,13,14,.82) 45%,rgba(15,13,14,.45) 100%);
}
.cell__body{ position:relative; isolation:isolate; padding:clamp(1.5rem,2.2vw,2.25rem); }
.cell h3{ font-size:clamp(1.3rem,2vw,1.9rem); margin-bottom:.6rem; }
.cell p{ color:var(--osso-soft); font-size:.95rem; max-width:34ch; }

/* varieta' di fondo: due celle con foto, due con tinta, tre neutre */
.cell--modern{
  background:linear-gradient(145deg,rgba(178,58,78,.30),rgba(178,58,78,.06) 60%,var(--inchiostro));
}
.cell--latino{
  background:linear-gradient(255deg,rgba(178,58,78,.26),var(--inchiostro2) 70%);
}

@media (max-width:980px){
  .bento{
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "classico classico"
      "prope    gioco"
      "modern   hiphop"
      "heels    country"
      "latino   latino";
  }
}
@media (max-width:620px){
  .bento{
    grid-template-columns:1fr;
    grid-auto-rows:minmax(12rem,auto);
    grid-template-areas:
      "classico" "prope" "gioco" "modern"
      "hiphop" "heels" "country" "latino";
  }
}

.corsi__piede{
  margin-top:2.25rem;
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1.5rem;
}
.corsi__note{ color:var(--osso-soft); font-size:.92rem; max-width:48ch; }
.corsi__piede .btn{ gap:.6rem; }
.corsi__piede .btn i{ font-size:1.2rem; }

/* ---------- orari : una colonna per giorno ---------- */
.orari{ padding:var(--sezione) var(--gutter); border-top:1px solid var(--filo); }
.settimana{
  display:grid; grid-template-columns:1fr;
  column-gap:clamp(2rem,5vw,4rem);
}
@media (min-width:860px){ .settimana{ grid-template-columns:repeat(2,1fr); } }
/* ogni giorno si apre al clic come le righe dello staff (.bio) */
.giorno{
  padding:clamp(1.1rem,2vw,1.6rem) 0;
  border-bottom:1px solid var(--filo);
}
.giorno:first-child{ border-top:1px solid var(--filo); }
@media (min-width:860px){ .giorno:nth-child(2){ border-top:1px solid var(--filo); } }
.giorno h3{ font-size:clamp(1.35rem,2.4vw,1.85rem); }
.giorno ol{ list-style:none; margin:1.3rem 0 0; padding:0; }
.giorno li{
  display:grid; grid-template-columns:auto 1fr; column-gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--filo);
  font-size:.9rem; line-height:1.4;
}
.giorno .ora{
  color:var(--carminio-up); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.giorno .corso{ color:var(--osso); }
.giorno .sala{
  grid-column:2; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--osso-soft);
}

/* ---------- insegnanti : righe, niente card ---------- */
.insegnanti{ padding:var(--sezione) var(--gutter); border-top:1px solid var(--filo); }
.roster{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr;
  column-gap:clamp(2rem,5vw,4rem);
}
/* 10 nomi: due colonne esatte da 5, cosi' i fili di testa e di coda combaciano */
@media (min-width:860px){ .roster{ grid-template-columns:repeat(2,1fr); } }
.roster__row{
  padding:clamp(1.1rem,2vw,1.6rem) 0;
  border-bottom:1px solid var(--filo);
}
/* il filo superiore solo sulle prime di ogni colonna */
.roster__row:first-child{ border-top:1px solid var(--filo); }
@media (min-width:860px){
  .roster__row:nth-child(2){ border-top:1px solid var(--filo); }
}
.roster__row h3{ font-size:clamp(1.35rem,2.4vw,1.85rem); }
/* le righe con biografia si aprono al clic: details nativo, zero JS */
.bio summary{
  list-style:none; cursor:pointer; position:relative; padding-right:2.2rem;
}
.bio summary::-webkit-details-marker{ display:none; }
.bio summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:1.5rem; line-height:1; color:var(--carminio-up);
}
.bio[open] summary::after{ content:"\2212"; }
.bio summary:hover h3{ color:var(--carminio-up); }
.bio__corpo{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1rem,2.5vw,1.8rem); align-items:start; margin-top:1.3rem;
}
.bio__foto{ width:clamp(8rem,16vw,12rem); aspect-ratio:4/5; object-fit:cover; }
.bio__corpo p{ color:var(--osso-soft); font-size:.95rem; max-width:48ch; }
@media (max-width:560px){ .bio__corpo{ grid-template-columns:1fr; } }

.roster__what{
  color:var(--carminio-up); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; margin-top:.3rem;
}

/* ---------- news : una banda per notizia, foto piu' testo ---------- */
.news{ padding:var(--sezione) var(--gutter); border-top:1px solid var(--filo); }
.news__list{
  list-style:none; margin:0; padding:0;
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.news__list::-webkit-scrollbar{ display:none; }
.news__item{
  flex:0 0 100%; scroll-snap-align:start;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(1.5rem,4vw,3rem); align-items:center;
  border-top:1px solid var(--carminio);
  padding-top:clamp(1.4rem,2.5vw,2rem);
}
@media (max-width:860px){ .news__item{ grid-template-columns:1fr; } }
.news__nav{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:1.2rem; }
.news__btn{
  display:grid; place-items:center; width:2.25rem; height:2.25rem;
  background:none; border:1px solid var(--filo); color:var(--osso); font-size:1rem; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.news__btn:hover{ color:var(--carminio-up); border-color:var(--carminio-up); }
/* niente filtro grigio qui: e' una foto di festa, il rosso del tutu' serve */
.news__media img{ width:100%; aspect-ratio:1; object-fit:cover; max-height:30rem; }
.news__testo p{ color:var(--osso-soft); margin-top:1rem; max-width:54ch; }
.news__testo .news__tag{
  color:var(--carminio-up); font-size:.72rem; margin-top:0;
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:.6rem;
}
.news__item h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); max-width:26ch; }
.news__testo .news__punti{ font-size:.85rem; }
.news__testo .news__quando{ color:var(--carminio-up); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
.news__voce{
  margin:1.5rem 0 0; padding-left:clamp(1rem,2vw,1.4rem);
  border-left:1px solid var(--carminio);
}
.news__voce p{
  font-family:var(--display); font-style:italic;
  color:var(--osso); font-size:1.05rem; max-width:46ch;
}
.news__voce cite{
  display:block; margin-top:.7rem; font-style:normal;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--osso-soft);
}

/* ---------- palcoscenico : banda a tutta larghezza ---------- */
.palco{ position:relative; min-height:clamp(22rem,55vh,34rem); overflow:hidden; }
.palco img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.34) contrast(1.15) blur(2px);
  transform:scale(1.04);   /* copre i bordi sfocati */
}
.palco__overlay{
  position:relative; min-height:inherit;
  display:grid; place-items:center;
  padding:clamp(3rem,8vw,6rem) var(--gutter);
  background:linear-gradient(180deg,rgba(15,13,14,.55),rgba(15,13,14,.75));
}
.palco blockquote{ margin:0; }
.palco blockquote p{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.6rem,4vw,2.9rem); line-height:1.25; text-align:center;
  max-width:22ch; margin-inline:auto;
}

/* ---------- contatti ---------- */
.contatti{ padding:var(--sezione) var(--gutter); }
.contatti__lead{ max-width:40rem; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.contatti__lead h2{ font-size:clamp(2.1rem,4.5vw,3.4rem); margin-bottom:1rem; }
.contatti__lead p{ color:var(--osso-soft); max-width:48ch; }

.contatti__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1px; background:var(--filo);
  border:1px solid var(--filo);
}
.contatto{
  display:flex; flex-direction:column; gap:.3rem;
  padding:clamp(1.5rem,2.5vw,2.25rem);
  background:var(--inchiostro); text-decoration:none;
  transition:background .25s var(--curva);
}
.contatto:hover{ background:var(--inchiostro2); }
.contatto i{ font-size:1.6rem; color:var(--carminio-up); margin-bottom:.5rem; }
.contatto__label{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--osso-soft);
}
.contatto__value{ font-size:1.05rem; }

.contatti__dove{
  margin-top:2rem; font-style:normal; color:var(--osso-soft);
  display:flex; align-items:center; gap:.6rem;
}
.contatti__dove i{ color:var(--carminio-up); font-size:1.2rem; }
.contatti__dove a{ text-decoration:underline; text-underline-offset:3px; }
.contatti__dove a:hover{ color:var(--osso); }
.contatti__dove a{ text-decoration:underline; text-underline-offset:3px; }
.contatti__dove a:hover{ color:var(--osso); }

/* ---------- footer ---------- */
.footer{
  border-top:1px solid var(--filo);
  padding:clamp(2.5rem,5vw,4rem) var(--gutter);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:2rem;
  color:var(--osso-soft); font-size:.88rem;
}
.footer__logo{ width:150px; height:auto; margin-bottom:1rem; opacity:.9; }
.footer__credits{ margin-top:.75rem; font-size:.78rem; line-height:1.6; opacity:.75; }

/* ---------- rivelazione allo scroll ---------- */
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{
    opacity:0; transform:translateY(22px);
    transition:opacity .7s var(--curva), transform .7s var(--curva);
    transition-delay:var(--d,0ms);
  }
  html.js .reveal.is-in{ opacity:1; transform:none; }
}

/* ---------- pagina privacy ---------- */
.privacy{ max-width:42rem; margin:0 auto; padding:clamp(2rem,6vw,5rem) var(--gutter); line-height:1.7; }
.privacy h1{ font-size:clamp(2rem,5vw,3rem); margin:1.5rem 0 .5rem; }
.privacy h2{ font-size:1.25rem; margin:2rem 0 .5rem; }
.privacy a{ text-decoration:underline; text-underline-offset:3px; }