/* =========================================================
   Compagnia dei Piccoli — foglio di stile del sito
   =========================================================
   Struttura del file:
   1. Font
   2. Colori e variabili (:root)
   3. Reset di base
   4. Elementi comuni a tutte le pagine (header, footer, bottoni)
   5. Homepage
   6. Pagina "Spettacoli" (listino)
   7. Pagina di dettaglio spettacolo
   8. Utility varie
   9. Pagina "Laboratori" e iscrizione
   10. Transizioni tra pagine (Barba.js)
   11. Utility (fine file)

   Per cambiare un colore del brand, modifica solo le variabili
   nella sezione 2: si aggiorna automaticamente ovunque nel sito.
   ========================================================= */

/* 1. Font ------------------------------------------------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-variable.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Archivo Black';
  src:url('../fonts/archivo-black.woff2') format('woff2');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Piazzolla Italic';
  src:url('../fonts/piazzolla-italic.woff2') format('woff2');
  font-weight:500;
  font-style:italic;
  font-display:swap;
}

/* 2. Colori e variabili ------------------------------------
   Presi dalla guida cromatica ufficiale del rebrand 2022
   ("CROMIE"). Il rosso è l'unico accento vivo del sito: usalo
   con parsimonia (bottoni, tag di categoria, dettagli), mai
   come sfondo di grandi superfici di testo. */
:root{
  --red: #D91441;        /* "la formica e il sipario" — accento primario */
  --navy: #201F2C;        /* "il buio del fuoriscena" — fondo scena, footer, hero */
  --navy-2: #2B293B;
  --paper: #F5F2F5;        /* fondo pagina chiaro */
  --atmosfera: #C9C2C9;    /* "atmosfera" — grigio neutro ufficiale */
  --ink: #201F2C;          /* testo principale */
  --ink-soft: #5B5868;     /* testo secondario */
  --line: rgba(32,31,44,0.14);
  --card-bg: #ffffff;
  --shadow: 0 18px 40px -20px rgba(32,31,44,0.35);

  /* colori accento della guida CROMIE, usati SOLO per marcare
     le categorie di spettacolo (mai come colore di brand) */
  --cat-prosa: #9E1447;
  --cat-famiglie: #F6C500;
  --cat-laboratori: #296BAF;
  --cat-repertorio: #8B2BF4;

  /* arancio della guida CROMIE, riservato al motivo "parola ripetuta"
     delle intestazioni di sezione (.pattern-header) — non un secondo
     accento di brand, solo questo pattern grafico specifico */
  --pattern-accent: #D76532;
}

@media (prefers-color-scheme: dark){
  :root{
    --navy:#111017; --navy-2:#1C1B26; --paper:#17161F;
    --atmosfera:#4A4855; --ink:#EFEDF2; --ink-soft:#B3AFC0; --red:#E91646;
    --line: rgba(239,237,242,0.14); --card-bg:#1E1D27;
    --shadow: 0 18px 44px -18px rgba(0,0,0,0.6);
  }
}

/* 3. Reset di base ------------------------------------------ */
*{ box-sizing:border-box; }
/* Lo scroll fluido è gestito da Lenis (assets/js/main.js), non dal CSS:
   niente scroll-behavior:smooth qui, altrimenti i due sistemi entrano in conflitto. */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'neue-haas-grotesk-text','Archivo', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4,p{ margin:0; }

.display{
  font-family:'Archivo Black','Archivo',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.01em;
  text-wrap:balance;
}
.italic-accent{
  font-family:'Piazzolla Italic', serif;
  font-style:italic;
  font-weight:500;
}
.eyebrow{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif;
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

/* 4. Elementi comuni ----------------------------------------- */
.sitehead{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand-logo{ height:40px; width:auto; }
.brand-logo-footer{ height:34px; width:auto; }
.sitenav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); flex-wrap:wrap; }
.sitenav a{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.86rem;
  text-decoration:none; color:var(--ink); opacity:0.82;
}
.sitenav a:hover, .sitenav a[aria-current="page"]{ opacity:1; }
.sitenav a[aria-current="page"]{
  border-bottom:2px solid var(--red); padding-bottom:2px;
}

.cta-pill{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.82rem;
  background:var(--red); color:#fff; padding:11px 22px; border-radius:999px;
  text-decoration:none; white-space:nowrap; border:none; cursor:pointer;
  display:inline-block;
}
.cta-pill:hover{ opacity:0.92; }
.cta-pill.on-light{ background:var(--red); color:#fff; }
.cta-outline{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.95rem;
  border:1.5px solid rgba(245,242,245,0.5); color:#F5F2F5;
  padding:14px 28px; border-radius:999px; text-decoration:none; display:inline-block;
}

.section{ padding:clamp(56px,8vw,96px) clamp(20px,6vw,72px); }
.section-narrow{ max-width:1180px; margin:0 auto; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:36px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(1.7rem,3vw,2.5rem); margin:8px 0 0; }
.section-head .eyebrow{ color:var(--red); }
.section-head a.see-all{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.86rem;
  text-decoration:none; color:var(--ink); border-bottom:2px solid var(--red);
  padding-bottom:2px; white-space:nowrap;
}

.sitefoot{ background:var(--navy); color:#D9D6E0; padding:56px clamp(20px,6vw,72px) 30px; }
.foot-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.12);
}
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
.foot-grid h4{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.76rem; letter-spacing:0.09em;
  text-transform:uppercase; color:#9C98AC; margin:0 0 14px;
}
.foot-grid a{
  display:block; font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.9rem;
  text-decoration:none; color:#EDEAF0; margin-bottom:10px; opacity:0.9;
}
.foot-grid a:hover{ opacity:1; color:var(--red); }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:22px; font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.8rem;
  color:#9C98AC; flex-wrap:wrap; gap:12px;
}
.foot-social{ display:flex; gap:14px; }
.foot-social svg{ width:18px; height:18px; }

/* pagina semplice (chi siamo, contatti, laboratori) */
.simple-page h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:22px; max-width:16ch; }
.simple-page .lede{
  font-family:'Piazzolla Italic'; font-style:italic;
  font-size:clamp(1.1rem,1.8vw,1.35rem); color:var(--ink-soft);
  max-width:52ch; margin-bottom:34px;
}
.simple-page p{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; line-height:1.75; color:var(--ink-soft);
  font-size:1.02rem; max-width:65ch; margin:0 0 18px;
}

/* 5. Homepage -------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; background:var(--navy);
  padding:clamp(70px,12vw,140px) clamp(20px,6vw,72px) clamp(60px,9vw,110px);
  color:#F5F2F5;
}
.hero .stripes{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(217,20,65,0.55) 0 34px,
    rgba(107,101,119,0.4) 34px 60px,
    rgba(43,41,59,0.7) 60px 96px,
    rgba(217,20,65,0.55) 96px 130px,
    rgba(32,31,44,0.85) 130px 168px
  );
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,16,23,0.5) 0%, rgba(17,16,23,0.9) 78%, var(--navy) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:1180px; }
.hero .eyebrow{ color:#FFD9E2; margin-bottom:18px; display:inline-flex; align-items:center; gap:10px; }
.hero .eyebrow::before{ content:""; width:26px; height:2px; background:var(--red); display:inline-block; }
.hero h1{ font-size:clamp(2.6rem,7vw,5.6rem); line-height:0.98; margin:0 0 28px; max-width:14ch; }
.hero h1 .line-red{ color:var(--red); }
.hero p.lede{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.6;
  max-width:46ch; color:#E4E1EA; margin:0 0 34px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.cta-pill-lg{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.95rem;
  background:var(--red); color:#fff; padding:15px 30px; border-radius:999px; text-decoration:none;
}

/* Homepage — Eventi del mese */
.events-section{ padding-top:clamp(16px,2vw,40px); padding-bottom:clamp(16px,2vw,40px); }
.events-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:36px; flex-wrap:wrap;
}
/* Lo spazio del badge resta sempre riservato (visibility, non display)
   così l'header non trasla verticalmente quando si esce dal mese
   corrente e il badge scompare: solo il testo si nasconde, l'altezza
   della riga sopra al titolo resta identica in ogni mese. */
.events-badge{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700;
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--red);
  display:block; margin-bottom:8px; visibility:visible;
}
.events-badge.is-hidden{ visibility:hidden; }
.events-head h2{ font-size:clamp(1.7rem,3vw,2.5rem); margin:0; }
.events-nav-group{ display:flex; align-items:center; gap:10px; flex:none; }
.events-nav{
  flex:none; width:38px; height:38px; border-radius:999px; border:none;
  background:transparent; color:var(--ink); font-size:1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background-color 0.2s, color 0.2s;
}
.events-nav:hover{ background:var(--red); color:#fff; }
@media (max-width:480px){
  .events-nav{ width:44px; height:44px; border:1px solid var(--line); }
  .events-nav-group{ margin-left:auto; }
}

/* Anima height (non transform/opacity) perché il valore di arrivo è un
   numero di pixel calcolato in JS in base al contenuto reale del mese
   (assets/js/events.js, changeMonth) — un semplice fade non basterebbe
   a evitare lo scatto di altezza tra mesi con un numero diverso di
   eventi. Transizione breve e isolata a un singolo elemento piccolo:
   costo di reflow accettabile rispetto al beneficio percepito. */
.events-viewport{ transition:height 0.25s ease; overflow:hidden; will-change:height; }
.events-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  transition:opacity 0.2s ease; opacity:1;
}
.events-grid.is-changing{ opacity:0; }
@media (max-width:980px){ .events-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .events-grid{ grid-template-columns:1fr; gap:16px; } }

.event-card{
  border-radius:16px; overflow:hidden; text-decoration:none; color:#fff;
  position:relative; aspect-ratio:3/4; display:flex; flex-direction:column;
  justify-content:flex-end; box-shadow:var(--shadow); background:var(--navy);
}
@media (max-width:620px){ .event-card{ aspect-ratio:4/3; } }
.event-card .event-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.event-card .event-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,16,23,0) 34%, rgba(17,16,23,0.86) 100%); }
.event-card .event-tag{
  position:relative; z-index:2; margin:16px 16px 0; align-self:flex-start;
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.68rem; letter-spacing:0.07em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px; color:#fff;
}
.event-card .event-body{ position:relative; z-index:2; padding:14px 16px 18px; }
.event-card .event-date{ display:flex; align-items:baseline; gap:6px; margin-bottom:6px; }
.event-card .event-day{ font-family:'Archivo Black',sans-serif; font-size:1.2rem; line-height:1; }
.event-card .event-monthshort{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.68rem;
  letter-spacing:0.07em; text-transform:uppercase; opacity:0.85;
}
.event-card h3{ font-family:'Archivo Black'; font-size:1.15rem; margin:0 0 4px; text-transform:none; letter-spacing:0; }
.event-card .event-luogo{ font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.78rem; margin:0; opacity:0.82; }

.events-empty{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; color:var(--ink-soft); font-size:0.95rem;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:220px; margin:0; border:1px dashed var(--line); border-radius:16px;
}
.events-empty[hidden]{ display:none; }

.marquee{ background:var(--red); color:#fff; overflow:hidden; white-space:nowrap; padding:13px 0; position:relative; z-index:3; }
.marquee-track{ display:inline-flex; gap:40px; animation:scroll-left 26s linear infinite; padding-left:40px; }
.marquee span{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.82rem;
  letter-spacing:0.1em; text-transform:uppercase; display:inline-flex; align-items:center; gap:40px;
}
.marquee span::after{ content:"—"; opacity:0.6; margin-left:40px; }
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

.about-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(32px,6vw,80px); align-items:start; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }
.quote-big{ font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.3; margin:0 0 22px; color:var(--ink); }
.about-copy p{ font-family:'neue-haas-grotesk-text','Archivo',sans-serif; line-height:1.7; color:var(--ink-soft); font-size:1rem; margin:0 0 16px; }
.about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; padding-top:8px; }
.about-stats div{ border-top:1px solid var(--line); padding-top:12px; }
.about-stats .num{ font-family:'Archivo Black'; font-size:1.7rem; color:var(--red); display:block; }
.about-stats .lbl{ font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.8rem; color:var(--ink-soft); }

.cat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:44px; }
@media (max-width:820px){ .cat-strip{ grid-template-columns:1fr 1fr; } }
.cat-chip{
  border-radius:14px; padding:18px; min-height:88px; text-decoration:none;
  display:flex; flex-direction:column; justify-content:space-between; color:#fff;
}
.cat-chip .cat-name{ font-weight:700; font-size:1.02rem; font-family:'neue-haas-grotesk-text','Archivo'; }
.cat-chip .cat-count{ font-size:0.76rem; opacity:0.85; font-weight:700; font-family:'neue-haas-grotesk-text','Archivo'; }

.show-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:980px){ .show-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .show-grid{ grid-template-columns:1fr; } }
.show-card{
  border-radius:16px; overflow:hidden; text-decoration:none; color:#fff;
  position:relative; aspect-ratio:3/4; display:flex; flex-direction:column;
  justify-content:flex-end; box-shadow:var(--shadow);
}
.show-card .art{ position:absolute; inset:0; }
.show-card .art.photo{ background-size:cover; background-position:center; }
.show-card .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,16,23,0) 34%, rgba(17,16,23,0.86) 100%); }
.show-card .tag{
  position:relative; z-index:2; margin:16px 16px 0; align-self:flex-start;
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.68rem; letter-spacing:0.07em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px; color:#fff;
}
.show-card .cc{ position:relative; z-index:2; padding:14px 16px 18px; }
.show-card h3{ font-family:'Archivo Black'; font-size:1.15rem; margin:0 0 4px; text-transform:none; letter-spacing:0; }
.show-card p{ font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.78rem; margin:0; opacity:0.82; }

.curtain-band{ background:var(--navy); color:#F5F2F5; }
.lab-inner{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media (max-width:820px){ .lab-inner{ grid-template-columns:1fr; } }
.lab-inner p{ font-family:'neue-haas-grotesk-text','Archivo',sans-serif; line-height:1.7; color:#D3CFDC; max-width:46ch; }
.curtain-drape{ width:100%; height:auto; display:block; }

/* Barba.js page-transition curtain overlay: scende dall'alto */
.curtain{
  position:fixed; inset:0; z-index:9999;
  background:var(--red);
  transform:scaleY(0) translateY(0);
  transform-origin:top;
  pointer-events:none;
  will-change:transform;
}

/* Durante lo swap Barba tiene per un istante sia il container in uscita
   che quello in entrata nel DOM: il primo va sfilato dal flusso normale
   e nascosto, altrimenti le due altezze si sommano (spazio bianco) e i
   contenuti si sovrappongono visivamente. */
[data-barba="container"].is-leaving{
  position:absolute; top:0; left:0; width:100%;
  visibility:hidden;
  pointer-events:none;
}

/* Intestazione a "parola ripetuta": lo stile tipografico che il grafico
   del brand usa spesso nei materiali di comunicazione (vedi guida CROMIE,
   pagina "Un tocco di colore") — una parola in corsivo ripetuta a tappeto
   sotto un titolo enorme in bianco. Riservato alle intestazioni di sezione
   (Spettacoli, Laboratori), non da usare come sfondo decorativo generico. */
.pattern-header{
  position:relative; overflow:hidden; background:var(--red);
  padding:clamp(64px,11vw,120px) clamp(20px,6vw,72px);
  display:flex; align-items:center; min-height:clamp(220px,32vw,320px);
}
.pattern-header-bg{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; justify-content:center;
  pointer-events:none; user-select:none;
}
.pattern-row{
  white-space:nowrap;
  font-family:'Piazzolla Italic'; font-style:italic; font-weight:500;
  font-size:clamp(3.4rem,11vw,7.5rem); line-height:0.8;
  color:var(--pattern-accent, #D76532);
  letter-spacing:-0.01em;
}
.pattern-row.offset{ transform:translateX(-2.4em); }
.pattern-header-inner{ position:relative; z-index:1; }
.pattern-header-inner h1{ color:#fff; margin:0; }
.pattern-header-inner .eyebrow{ color:#FFE1CE; margin-bottom:14px; display:block; }

/* 6. Pagina "Spettacoli" (listino) ------------------------------ */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.filter-pill{
  font-family:'neue-haas-grotesk-text','Archivo'; font-weight:700; font-size:0.8rem;
  border:1.5px solid var(--line); border-radius:999px; padding:8px 16px;
  text-decoration:none; color:var(--ink-soft);
}
.filter-pill[aria-current="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.listing-block{ margin-bottom:56px; }
.listing-block h2{ font-size:1.5rem; margin-bottom:6px; }
.listing-block .desc{ font-family:'neue-haas-grotesk-text','Archivo'; color:var(--ink-soft); font-size:0.92rem; margin-bottom:24px; max-width:60ch; }

/* 7. Pagina di dettaglio spettacolo ------------------------------ */
.show-hero{ position:relative; height:min(64vh,520px); min-height:320px; background:var(--navy); overflow:hidden; }
.show-hero .art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.show-hero .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,16,23,0.15) 0%, rgba(17,16,23,0.92) 100%); }
.show-hero-inner{
  position:absolute; left:0; right:0; bottom:0; padding:0 clamp(20px,6vw,72px) 44px;
  color:#fff; max-width:1180px; margin:0 auto;
}
.show-tag{
  display:inline-block; font-family:'neue-haas-grotesk-text','Archivo'; font-weight:700; font-size:0.72rem;
  letter-spacing:0.08em; text-transform:uppercase; padding:6px 13px; border-radius:999px; margin-bottom:16px;
}
.show-hero-inner h1{ font-size:clamp(2.4rem,6vw,4.6rem); margin:0 0 10px; line-height:0.98; }
.show-hero-inner .subtitle{ font-family:'Piazzolla Italic'; font-style:italic; font-size:clamp(1.1rem,1.8vw,1.4rem); color:#E4E1EA; margin:0; }

.show-meta-bar{
  display:flex; gap:28px; flex-wrap:wrap; padding:16px clamp(20px,6vw,72px);
  border-bottom:1px solid var(--line); font-family:'neue-haas-grotesk-text','Archivo'; font-size:0.82rem;
  color:var(--ink-soft); max-width:1180px; margin:0 auto;
}
.show-meta-bar b{ color:var(--ink); font-weight:700; }

.show-body{
  max-width:1180px; margin:0 auto; padding:clamp(44px,7vw,72px) clamp(20px,6vw,72px);
  display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(32px,5vw,64px);
}
@media (max-width:900px){ .show-body{ grid-template-columns:1fr; } }
.show-main h2.kicker{
  font-family:'neue-haas-grotesk-text','Archivo'; font-weight:700; font-size:0.78rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--red); margin:0 0 14px;
}
.show-main p{ font-family:'neue-haas-grotesk-text','Archivo'; line-height:1.75; color:var(--ink-soft); font-size:1.02rem; max-width:65ch; margin:0 0 18px; }

blockquote.director{ margin:46px 0 38px; position:relative; }
blockquote.director::before{
  content:"\201C"; font-family:'Archivo Black'; font-size:4.6rem; line-height:1;
  color:var(--red); display:block; margin:0 0 -0.5rem -0.05em; opacity:0.9;
}
blockquote.director p{
  font-family:'Piazzolla Italic'; font-style:italic; font-size:clamp(1.15rem,1.8vw,1.4rem);
  line-height:1.55; color:var(--ink); max-width:52ch;
}
blockquote.director cite{
  font-family:'neue-haas-grotesk-text','Archivo'; font-style:normal; font-weight:700; font-size:0.86rem;
  color:var(--ink-soft); display:block; margin-top:14px;
}
blockquote.director cite::before{ content:"— "; color:var(--red); }

/* Sezione "Foto di scena": vive fuori da .show-body per poter usare
   tutta la larghezza della pagina, non solo la colonna dei contenuti. */
.show-gallery{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,6vw,72px) clamp(44px,7vw,72px); }
.show-gallery h2.kicker{
  font-family:'neue-haas-grotesk-text','Archivo'; font-weight:700; font-size:0.78rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--red); margin:0 0 14px;
}
.gallery-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery-strip .g{
  width:100%; height:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:10px; cursor:zoom-in; transition:opacity 0.2s; display:block;
}
.gallery-strip a{ display:block; border-radius:10px; overflow:hidden; }
.gallery-strip a:hover .g{ opacity:0.85; }
@media (max-width:900px){ .gallery-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .gallery-strip{ grid-template-columns:1fr; } }

.sidebar-poster{ display:block; border-radius:16px; overflow:hidden; margin-bottom:20px; cursor:zoom-in; }
.sidebar-poster img{ width:100%; height:auto; display:block; transition:opacity 0.2s; }
.sidebar-poster:hover img{ opacity:0.9; }

.sidebar-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:16px; padding:26px 24px; margin-bottom:20px; }
.sidebar-card h3{ font-family:'neue-haas-grotesk-text','Archivo'; font-weight:700; font-size:0.78rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--red); margin:0 0 16px; }
.credit-row{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-top:1px solid var(--line); font-family:'neue-haas-grotesk-text','Archivo'; font-size:0.88rem; }
.credit-row:first-of-type{ border-top:none; }
.credit-row .role{ color:var(--ink-soft); }
.credit-row .who{ font-weight:600; text-align:right; }
.sidebar-cta{ background:var(--red); color:#fff; border-radius:16px; padding:26px 24px; }
.sidebar-cta h3{ font-family:'Archivo Black'; font-size:1.15rem; margin:0 0 8px; text-transform:none; }
.sidebar-cta p{ font-family:'neue-haas-grotesk-text','Archivo'; font-size:0.88rem; line-height:1.6; color:#FCE1E8; margin:0 0 18px; }
.sidebar-cta .cta-pill{ background:#fff; color:var(--red); }

.updown{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--navy); }
@media (max-width:700px){ .updown{ grid-template-columns:1fr; } }
.updown a{
  position:relative; padding:34px clamp(20px,4vw,56px); min-height:150px; color:#F5F2F5;
  text-decoration:none; display:flex; flex-direction:column; justify-content:center; overflow:hidden;
}
.updown a .bg{ position:absolute; inset:0; opacity:0.5; }
.updown a .cc{ position:relative; z-index:2; }
.updown .eyebrow{ color:#C9C2C9; margin-bottom:8px; }
.updown h4{ font-family:'Archivo Black'; font-size:1.4rem; margin:0; text-transform:none; }
.updown a.next{ text-align:right; align-items:flex-end; }

/* 9. Pagina "Laboratori" e iscrizione ---------------------------- */
.lab-hero{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(28px,5vw,64px); align-items:center;
  padding:clamp(56px,8vw,96px) clamp(20px,6vw,72px); max-width:1180px; margin:0 auto;
}
@media (max-width:820px){ .lab-hero{ grid-template-columns:1fr; } }
.lab-hero-img{ width:100%; height:auto; border-radius:16px; display:block; }
.lab-hero-copy .eyebrow{ color:var(--red); margin-bottom:12px; display:block; }
.lab-hero-copy h1{ margin:0 0 6px; font-size:clamp(2.2rem,4.4vw,3.6rem); }
.lab-hero-copy .subtitle{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--ink-soft); margin:0 0 22px; }
.lab-hero-copy p{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; line-height:1.75; color:var(--ink-soft);
  font-size:0.98rem; margin:0 0 16px;
}

.lab-list{ display:grid; grid-template-columns:1fr; gap:16px; }
.lab-card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; display:grid; grid-template-columns:300px 1fr;
}
@media (max-width:680px){ .lab-card{ grid-template-columns:1fr; } }
.lab-card-img{ width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
@media (max-width:680px){ .lab-card-img{ aspect-ratio:16/9; } }
.lab-card-body{ padding:22px 24px 26px; }
.lab-card.no-img{ grid-template-columns:1fr; }
.lab-card.no-img .lab-card-body{ padding:26px 24px; }
.lab-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.lab-card-head h3{
  font-family:'Archivo Black',sans-serif; font-size:1.15rem; text-transform:none; letter-spacing:0;
}
.lab-age{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.68rem;
  letter-spacing:0.07em; text-transform:uppercase; color:#fff; background:var(--cat-laboratori);
  padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.lab-desc{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; line-height:1.6; color:var(--ink-soft);
  font-size:0.92rem; margin:0 0 18px;
}
.lab-meta{ display:grid; gap:0; border-top:1px solid var(--line); }
.lab-meta div{
  display:flex; justify-content:space-between; gap:14px; padding:9px 0;
  border-bottom:1px solid var(--line); font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.84rem;
}
.lab-meta div:last-child{ border-bottom:none; }
.lab-meta .k{ color:var(--ink-soft); }
.lab-meta .v{ font-weight:600; text-align:right; }

.lab-modules{ display:grid; gap:12px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.lab-module{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.84rem; line-height:1.6; color:var(--ink-soft);
}
.lab-module b{ color:var(--ink); }

.lab-steps{ list-style:none; margin:0 0 8px; padding:0; display:grid; gap:16px; }
.lab-steps li{ display:flex; gap:14px; align-items:flex-start; font-family:'neue-haas-grotesk-text','Archivo',sans-serif; line-height:1.6; color:#D3CFDC; }
.lab-step-n{
  flex:none; width:28px; height:28px; border-radius:999px; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.86rem;
}
.lab-payment{ background:rgba(245,242,245,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:16px; padding:26px 24px; }
.lab-payment h3{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.78rem; letter-spacing:0.09em;
  text-transform:uppercase; color:#FFD9E2; margin:0 0 16px;
}
.lab-payment .credit-row{ border-top-color:rgba(255,255,255,0.14); }
.lab-payment .role{ color:#B3AFC0; }
.lab-payment .who{ color:#F5F2F5; }

.lab-form{ display:grid; gap:20px; margin-top:28px; }
.form-row{ display:grid; gap:8px; }
.form-row-group{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:620px){ .form-row-group{ grid-template-columns:1fr; } }
.form-row label{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.82rem; color:var(--ink);
}
.form-row label .optional{ font-weight:400; color:var(--ink-soft); }
.form-row input, .form-row select, .form-row textarea{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.95rem; color:var(--ink);
  background:var(--card-bg); border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
  width:100%;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:2px solid var(--red); outline-offset:1px; border-color:var(--red);
}
.form-row textarea{ resize:vertical; }
.form-section-label{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.78rem;
  letter-spacing:0.05em; color:var(--ink-soft); margin:8px 0 -6px;
}
.form-check{ display:flex; gap:12px; align-items:flex-start; font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.86rem; color:var(--ink-soft); line-height:1.5; }
.form-check input{ flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--red); }
.lab-form button[type="submit"]{ border:none; justify-self:start; }
.lab-form button[type="submit"]:disabled{ opacity:0.6; cursor:not-allowed; }

.form-feedback{
  border-radius:12px; padding:16px 18px; margin-bottom:8px;
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.9rem; line-height:1.5;
}
.form-feedback.success{ background:rgba(41,107,175,0.12); color:#1c4c7a; border:1px solid rgba(41,107,175,0.3); }
.form-feedback.error{ background:rgba(217,20,65,0.08); color:var(--red); border:1px solid rgba(217,20,65,0.3); }
@media (prefers-color-scheme: dark){
  .form-feedback.success{ color:#8fb8e0; }
}


/* 11. Utility ---------------------------------------------------- */
.scallop{ display:block; width:100%; height:auto; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


@media(max-width:850px) {
  .sitenav {
    display: none;
  }
}