/* ==========================================================================
   Sberdia live — foglio di stile unico
   Palette, tipografia e componenti di tutte le pagine del sito.
   Modificando questo file cambi il sito intero.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CARATTERI — ospitati sul sito, nessuna chiamata a server esterni
   Big Shoulders: titoli. Schibsted Grotesk: testo. IBM Plex Mono: etichette.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Big Shoulders';
  src:url('../font/big-shoulders-800.woff2') format('woff2'),
      url('../font/big-shoulders-800.woff')  format('woff');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Schibsted Grotesk';
  src:url('../font/schibsted-grotesk.woff2') format('woff2'),
      url('../font/schibsted-grotesk.woff')  format('woff');
  font-weight:400 600;      /* carattere variabile: un file per tutti i pesi */
  font-style:normal;
  font-display:swap;
}

/* Liberation Sans, licenza SIL OFL (vedi LICENZA-liberation-sans.txt).
   Serve solo alla parola che scorre nella testata della homepage: e'
   ritagliata alle lettere che servono, 14 KB. */
@font-face{
  font-family:'Liberation Sans';
  src:url('../font/liberation-sans-400.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'IBM Plex Mono';
  src:url('../font/ibm-plex-mono-400.woff2') format('woff2'),
      url('../font/ibm-plex-mono-400.woff')  format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'IBM Plex Mono';
  src:url('../font/ibm-plex-mono-600.woff2') format('woff2'),
      url('../font/ibm-plex-mono-600.woff')  format('woff');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* --------------------------------------------------------------------------
   1. TOKEN — colori, tipografia, spazi
   -------------------------------------------------------------------------- */
:root{
  /* Palette brand (brand book, settembre 2026) */
  --green:      #9EE0AE;   /* verde primario */
  --ivory:      #EDE9E1;   /* testi, colore chiaro principale */
  --lilla:      #9494A8;   /* neutro: dettagli piccoli e separatori */
  --terra:      #EA6A32;   /* accento caldo, sotto il 3% della superficie */
  --bg:         #131318;   /* fondo */
  --bg-alt:     #1A1A21;   /* fondo dei blocchi in rilievo */
  --line:       #2A2A33;   /* bordi sottili interni */

  /* Componenti di colore per le trasparenze */
  --green-rgb:  158, 224, 174;
  --terra-rgb:  234, 106, 50;
  --bg-rgb:     19, 19, 24;

  /* Tipografia */
  --font-display: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --font-text:    'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-testata: 'Liberation Sans', Arimo, Helvetica, Arial, sans-serif;

  --fs-display: clamp(56px, 11vw, 132px);
  --fs-h2:      clamp(30px, 4.6vw, 54px);
  --fs-h3:      clamp(23px, 3vw, 34px);
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-micro:   13px;

  /* Griglia e spazi */
  --wrap:       1180px;
  --gutter:     clamp(20px, 5vw, 40px);
  --section-y:  clamp(44px, 5.5vw, 76px);

  /* ritmo verticale delle testate: identico in ogni pagina */
  --gap-eyebrow: 11px;      /* intestazione -> titolo */
  --ottica-stelo: 9px;      /* quanto alzare un collegamento con stelo per
                               portarlo sulla linea ottica di un titolo */
  --gap-sub:     16px;      /* titolo -> sottotitolo */
  --header-h:   104px;

  /* Movimento */
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --t-fast:     .18s;
  --t-slow:     .62s;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px); /* le ancore non finiscono sotto l'header */
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
}

img, svg{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
address{ font-style:normal; }

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

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1, h2, h3, .display{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.92;
}

h1{ font-size:var(--fs-display); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:1.05; }

/* I titoli si spezzano in righe di lunghezza simile invece di lasciare
   una parola sola in fondo. Le paroline che non devono chiudere una riga
   (articoli, preposizioni, monosillabi) sono gia' legate dal generatore. */
h1, h2, h3, .display{ text-wrap:balance; }

p{ text-wrap:pretty; }

/* Testo 1. La riscrivo anche con i contenitori davanti: .page-header e
   .prose hanno una regola generica su p che altrimenti la schiaccia. */
.lead,
.page-header p.lead,
.prose p.lead{
  font-size:clamp(19px, 2.2vw, 23px);
  line-height:1.45;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.1em;
  line-height:1;            /* senza questo resta uno spazio vuoto sotto */
  text-transform:uppercase;
  color:var(--lilla);
  margin-bottom:var(--gap-eyebrow);
  margin-top:0;
}

/* nessuna regola generica sui paragrafi deve poterla ingrandire */
p.eyebrow{ font-size:11px; letter-spacing:.1em; line-height:1; }

.muted{ color:var(--lilla); }

/* Paragrafo di appoggio: piu' piccolo del testo principale, per il secondo
   blocco dell'apertura in homepage, della testata Eventi e di Produzioni. */
/* Testo 2: stesso discorso del testo 1. */
.testo-sec,
.page-header p.testo-sec,
.prose p.testo-sec{
  font-size:var(--fs-small);
  line-height:1.55;
  color:var(--ivory);
  max-width:64ch;
}
.page-header .testo-sec{ margin-top:12px; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.wrap--narrow{ max-width:820px; }

.section{ padding-block:var(--section-y); }

/* Separatore fra sezioni: lilla, leggermente piu' spesso */
.section + .section,
.section--ruled{ border-top:2px solid var(--lilla); }

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--green);
  color:var(--bg);
  padding:12px 20px;
  font-weight:600;
}
.skip-link:focus{ left:0; }

/* Testata di sezione: numero editoriale + titolo + link */
.section-head{
  display:flex;
  align-items:baseline;     /* le due scritte poggiano sulla stessa linea */
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:clamp(22px, 3vw, 36px);
}

.section-head__title{
  display:flex;
  align-items:baseline;
  min-width:0;
}

.section-head.is-centered{
  justify-content:center;
  text-align:center;
}
.section-head.is-centered .section-head__title{ justify-content:center; }

.see-all{
  font-size:var(--fs-small);
  color:var(--green);
  border-bottom:1px solid rgba(var(--green-rgb), .45);
  padding-bottom:3px;
  white-space:nowrap;
  transition:border-color var(--t-fast) var(--ease);
}
.see-all:hover{ border-bottom-color:var(--green); }

/* --------------------------------------------------------------------------
   5. HEADER E NAVIGAZIONE
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(var(--bg-rgb), .88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:2px solid var(--lilla);
  transition:padding var(--t-slow) var(--ease);
}

.nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:18px var(--gutter);
  transition:padding var(--t-slow) var(--ease);
}

.nav__logo img{
  height:68px;
  width:auto;
  transition:height var(--t-slow) var(--ease);
}

/* L'header si compatta allo scroll */
.site-header.is-scrolled .nav{ padding-block:10px; }
.site-header.is-scrolled .nav__logo img{ height:48px; }

.nav__links{
  display:flex;
  gap:clamp(20px, 3vw, 38px);
  font-size:var(--fs-small);
}

.nav__links a{
  position:relative;
  padding-block:4px;
  transition:color var(--t-fast) var(--ease);
}

.nav__links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}

.nav__links a:hover{ color:var(--green); }
.nav__links a:hover::after{ transform:scaleX(1); }

/* Pagina corrente */
.nav__links a[aria-current="page"]{ color:var(--green); }
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }

.nav__toggle{
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
}

.nav__toggle span{
  position:relative;
  display:block;
  width:22px;
  height:1.5px;
  background:var(--ivory);
  transition:background var(--t-fast) var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:1.5px;
  background:var(--ivory);
  transition:transform .3s var(--ease);
}
.nav__toggle span::before{ top:-7px; }
.nav__toggle span::after{ top:7px; }

.nav__toggle[aria-expanded="true"] span{ background:transparent; }
.nav__toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:absolute;
    top:100%;
    left:0; right:0;
    display:block;
    background:var(--bg);
    border-bottom:2px solid var(--lilla);
    /* stato chiuso */
    max-height:0;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    transition:max-height .36s var(--ease),
               opacity .24s var(--ease),
               visibility 0s linear .36s;
  }
  .nav__links.is-open{
    max-height:min(70vh, 420px);
    opacity:1;
    visibility:visible;
    overflow-y:auto;
    transition:max-height .36s var(--ease),
               opacity .24s var(--ease),
               visibility 0s linear 0s;
  }
  .nav__links a{
    display:block;
    padding:17px var(--gutter);
    border-top:1px solid var(--line);
    font-size:19px;
    font-weight:600;          /* il peso piu' alto del file variabile */
    letter-spacing:-.005em;
  }
  .nav__links a::after{ display:none; }
}

/* --------------------------------------------------------------------------
   6. BOTTONI
   Nessuna cornice: la parola, e sotto uno stelo preso dal marchio (il piu'
   sottile dei cinque, ruotato in orizzontale). Lo stelo e' largo quanto la
   parola. Al passaggio del puntatore lo stelo vira al lilla e si accende.
   Tre misure: --primary per l'azione principale, base, --sm dentro le schede.
   -------------------------------------------------------------------------- */
.btn,
.see-all,
.disclosure > summary{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:9px;
  width:fit-content;
  padding:5px 0 13px;
  font-family:var(--font-text);
  font-size:16px;
  font-weight:600;
  letter-spacing:0;
  line-height:1.2;
  color:var(--green);
  background:none;
  border:none;
  cursor:pointer;
  transition:color .28s var(--ease);
}

.disclosure > summary{ list-style:none; }
.disclosure > summary::-webkit-details-marker{ display:none; }

/* lo stelo */
.btn::before,
.see-all::before,
.disclosure > summary::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:4px;
  height:5px;
  background-color:var(--green);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201374.8%20272.4%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20transform%3D%22translate%28-0.00%2C272.38%29%20rotate%28-90%29%22%20d%3D%22M151.79%2C1237.69c-55.87-62.29-66.5-112.47-7.56-177.64%2C43.81-52.01%2C119.62-98.62%2C127.86-170.9%2C4.58-67.43-45.82-119.94-80.85-172.27-25.55-36.85-46.19-79.74-44.2-125.6%2C3.32-48.09%2C16.39-95.17%2C32.02-140.6%2C17.94-51.75%2C40.33-101.97%2C56.19-154.44%2C13.02-47.94%2C20.46-97.26%2C27.26-146.4%2C3.85-30.57%2C5.24-61.36%2C7.64-92.08%2C1.52-19.43%2C8.31-47.93-16.73-54.87-11.64-3.67-33.35-5.74-39.43%2C5.89-5.62%2C10.73-9.15%2C45.08-11.5%2C60.61-7.18%2C47.39-10.06%2C80.5-20.48%2C127.36-11.4%2C54.89-25.73%2C109.32-49.17%2C160.43-44.76%2C98.81-103.78%2C212.71-53.56%2C320.6%2C30.51%2C72.79%2C115.89%2C150.55%2C91.02%2C234.5-20.96%2C51.38-69.87%2C84.07-108.05%2C122.07-91.48%2C82.37-73.22%2C138.35-2.76%2C227.23%2C19.37%2C25.58%2C39.77%2C50.97%2C53.25%2C80.29%2C3.73%2C8.5%2C6.33%2C17.36%2C8.48%2C26.27.62%2C2.12.58%2C4.32%2C2.32%2C5.73%2C2.03%2C1.5%2C4.86.67%2C7.24.85%2C26-.18%2C52-.95%2C77.99-1.81%2C19.67-.65%2C26.2-1.18%2C19.51-16.97-21.49-41.66-48.45-80.69-76.47-118.24Z%22%2F%3E%3C%2Fsvg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201374.8%20272.4%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20transform%3D%22translate%28-0.00%2C272.38%29%20rotate%28-90%29%22%20d%3D%22M151.79%2C1237.69c-55.87-62.29-66.5-112.47-7.56-177.64%2C43.81-52.01%2C119.62-98.62%2C127.86-170.9%2C4.58-67.43-45.82-119.94-80.85-172.27-25.55-36.85-46.19-79.74-44.2-125.6%2C3.32-48.09%2C16.39-95.17%2C32.02-140.6%2C17.94-51.75%2C40.33-101.97%2C56.19-154.44%2C13.02-47.94%2C20.46-97.26%2C27.26-146.4%2C3.85-30.57%2C5.24-61.36%2C7.64-92.08%2C1.52-19.43%2C8.31-47.93-16.73-54.87-11.64-3.67-33.35-5.74-39.43%2C5.89-5.62%2C10.73-9.15%2C45.08-11.5%2C60.61-7.18%2C47.39-10.06%2C80.5-20.48%2C127.36-11.4%2C54.89-25.73%2C109.32-49.17%2C160.43-44.76%2C98.81-103.78%2C212.71-53.56%2C320.6%2C30.51%2C72.79%2C115.89%2C150.55%2C91.02%2C234.5-20.96%2C51.38-69.87%2C84.07-108.05%2C122.07-91.48%2C82.37-73.22%2C138.35-2.76%2C227.23%2C19.37%2C25.58%2C39.77%2C50.97%2C53.25%2C80.29%2C3.73%2C8.5%2C6.33%2C17.36%2C8.48%2C26.27.62%2C2.12.58%2C4.32%2C2.32%2C5.73%2C2.03%2C1.5%2C4.86.67%2C7.24.85%2C26-.18%2C52-.95%2C77.99-1.81%2C19.67-.65%2C26.2-1.18%2C19.51-16.97-21.49-41.66-48.45-80.69-76.47-118.24Z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size:100% 100%;  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition:background-color .28s var(--ease),
             filter .28s var(--ease),
             transform .28s var(--ease);
}

/* la freccia, solo sui collegamenti */
a.btn::after,
.see-all::after{
  content:"\2192";
  font-size:1em;
  line-height:1;
  transition:transform .28s var(--ease);
}

/* accensione */
.btn:hover,
.btn:focus-visible,
.see-all:hover,
.see-all:focus-visible,
.disclosure > summary:hover,
.disclosure[open] > summary{ color:var(--ivory); }

.btn:hover::before,
.btn:focus-visible::before,
.see-all:hover::before,
.see-all:focus-visible::before,
.disclosure > summary:hover::before,
.disclosure[open] > summary::before{
  background-color:var(--lilla);
  filter:drop-shadow(0 0 9px rgba(148,148,168,.9));
  transform:translateY(1px);
}

a.btn:hover::after,
.see-all:hover::after{ transform:translateX(5px); }

/* Una sola misura in tutto il sito: il bottone non cambia peso da una
   sezione all'altra, cambia solo quello che ci sta scritto sopra. */

/* "Free entry": stesso bottone, si accende, ma non porta da nessuna parte */
.btn--free{ cursor:default; }

/* il pulsante di invio di un modulo non ha freccia ma ha lo stesso stelo */
.form button.btn{ margin-top:6px; }

/* nelle testate di sezione lo stelo non deve sfalsare l'allineamento */
.section-head .see-all{
  white-space:nowrap;
  /* Allineare le basi del testo non basta: accanto a un titolo l'occhio
     confronta lo stelo verde, che e' la linea piu' forte del blocco.
     Lo alziamo finche' non poggia sulla stessa linea del titolo. */
  position:relative;
  top:calc(var(--ottica-stelo) * -1);
}

/* --------------------------------------------------------------------------
   7. PLACEHOLDER IMMAGINI
   Un solo sistema: stessi rapporti di forma delle foto definitive.
   Quando arrivano le foto, si sostituisce .ph con <img> mantenendo il ratio.
   -------------------------------------------------------------------------- */
.ph{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 30% 28%, rgba(var(--green-rgb), .20), transparent 58%),
    var(--bg-alt);
}
.ph--warm{
  background:
    radial-gradient(circle at 68% 34%, rgba(var(--terra-rgb), .16), transparent 56%),
    var(--bg-alt);
}
.ph--mix{
  background:
    radial-gradient(circle at 26% 30%, rgba(var(--green-rgb), .20), transparent 55%),
    radial-gradient(circle at 78% 72%, rgba(var(--terra-rgb), .14), transparent 52%),
    var(--bg-alt);
}
.ph--soft{
  background:
    radial-gradient(circle at 52% 52%, rgba(var(--green-rgb), .14), transparent 62%),
    var(--bg-alt);
}

/* Rapporti di forma */
.r-hero    { aspect-ratio:16/7; }
.r-square  { aspect-ratio:1/1; }
.r-poster  { aspect-ratio:4/5; }   /* locandine e copertine radio: formato Instagram */
.r-portrait{ aspect-ratio:4/5; }   /* ritratti degli artisti */
.r-photo   { aspect-ratio:4/3; }
.r-tall    { aspect-ratio:4/5; }
.r-wide    { aspect-ratio:16/9; }
.r-band    { aspect-ratio:21/9; }

/* Foto vere dentro il riquadro: il riquadro decide la forma,
   l'immagine lo riempie senza deformarsi. */
.ph--img{ background:var(--bg-alt); }
.ph > picture{ position:absolute; inset:0; }
.ph > picture img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Su telefono le fasce larghe diventano 8:5: in 16:7 erano strisce troppo
   basse, in 4:3 tagliavano mezza inquadratura (scelta del 18/09/2026). */
@media (max-width:820px){
  .r-hero{ aspect-ratio:8/5; }
  .r-band{ aspect-ratio:8/5; }
}

/* --------------------------------------------------------------------------
   8. HERO — carosello foto a tutta larghezza (homepage)
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  border-bottom:2px solid var(--lilla);
}

.visually-hidden,
.hero__title{
  /* Titolo reale della pagina, necessario a SEO e screen reader.
     Visivamente discreto: non deve coprire le foto. */
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.carousel{ position:relative; }

.carousel__track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.carousel__track::-webkit-scrollbar{ display:none; }

.carousel__slide{
  flex:0 0 100%;
  width:100%;
  scroll-snap-align:start;
  border:none;
}

.carousel__dots{
  position:absolute;
  right:var(--gutter);
  bottom:20px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:rgba(var(--bg-rgb), .55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.carousel__dots button{
  width:8px; height:8px;
  border-radius:50%;
  border:1px solid var(--lilla);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.carousel__dots button.is-active{
  background:var(--green);
  border-color:var(--green);
}

/* Pausa: richiesta WCAG per i contenuti in movimento automatico */
.motion-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  color:var(--ivory);
  opacity:.75;
  transition:opacity var(--t-fast) var(--ease);
}
.motion-toggle:hover{ opacity:1; }
.motion-toggle svg{ width:12px; height:12px; fill:currentColor; }
.motion-toggle .icon-play{ display:none; }
.motion-toggle[aria-pressed="true"] .icon-play{ display:block; }
.motion-toggle[aria-pressed="true"] .icon-pause{ display:none; }

/* Blocco di apertura della homepage: titolo a sinistra, testo a destra.
   Riempie tutta la larghezza invece di lasciare mezza pagina vuota. */
.intro{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px, 4vw, 56px);
  align-items:start;
}
.intro h2{ max-width:11ch; }

/* --------------------------------------------------------------------------
   Testata della homepage: il marchio SBERDIA e, sotto, una delle attivita'
   che scorre verso il basso. Le misure sono tutte in proporzione alla
   larghezza del marchio, cosi' il blocco resta se stesso a ogni schermo.
   -------------------------------------------------------------------------- */
.testata-home{ width:100%; }

/* Un titolo animato, non un logo: il marchio sta sulla misura del titolo
   che c'era prima, non su quella di un'insegna. */
.testata-home__marchio{
  display:block;
  width:min(100%, 340px);
  height:auto;
}

/* L'intestazione non va mai a capo: il corpo scende quando lo schermo
   si stringe, cosi' la frase resta una riga sola a ogni misura. */
.eyebrow--riga{
  white-space:nowrap;
  font-size:clamp(8px, 2.5vw, 11px);
  letter-spacing:.09em;
}
p.eyebrow--riga{ font-size:clamp(8px, 2.5vw, 11px); letter-spacing:.09em; }

.rotore-testata{
  position:relative;
  overflow:hidden;
  margin-top:.14em;
  font-family:var(--font-testata);
  font-weight:400;
  text-transform:uppercase;
  color:var(--ivory);
  line-height:1;
}
.rotore-testata__parola{
  position:absolute;
  left:0; top:0;
  display:block;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-104%);
  transition:transform .74s cubic-bezier(.2,.8,.2,1), opacity .42s var(--ease);
}
.rotore-testata__parola.is-in { opacity:1; transform:none; }
.rotore-testata__parola.is-out{ opacity:0; transform:translateY(104%); }

/* L'elenco per intero: lo leggono i lettori di schermo e lo vede chi ha
   disattivato le animazioni. */
.testata-home__elenco{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

@media (max-width:820px){
  /* Sul telefono la testata scende parecchio: e' un titolo, e deve stare
     dentro la schermata insieme ai due paragrafi. Tutto a sinistra. */
  .testata-home{ text-align:left; }
  .testata-home__marchio{ width:min(100%, 210px); margin-inline:0; }
  .eyebrow--riga{ margin-bottom:9px; }

  /* il paragrafo di appoggio scende sotto al corpo del testo */
  .testo-sec,
  .page-header p.testo-sec,
  .prose p.testo-sec{ font-size:13.5px; line-height:1.5; }
}

@media (prefers-reduced-motion:reduce){
  .rotore-testata{ display:none; }
  .testata-home__elenco{
    position:static;
    width:auto; height:auto;
    clip-path:none;
    white-space:normal;
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
    margin-top:14px;
    font-family:var(--font-testata);
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:var(--fs-small);
    color:var(--ivory);
  }
}
.intro__testo > * + *{ margin-top:14px; }
.intro__testo .lead{ max-width:52ch; }
.intro__testo .testo-sec{ max-width:58ch; }

@media (max-width:820px){
  .intro{ grid-template-columns:1fr; gap:18px; }
  .intro h2{ max-width:none; }
}

/* --------------------------------------------------------------------------
   9. MARQUEE — scorrimento continuo (archivio eventi, gallerie)
   La duplicazione del contenuto la fa il JavaScript: nell'HTML gli
   elementi vanno scritti una volta sola.
   -------------------------------------------------------------------------- */
.marquee{
  position:relative;
  overflow:hidden;
  mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track{
  display:flex;
  gap:var(--marquee-gap, 22px);
  /* lo stesso spazio anche in coda: cosi' meta' pista e' esattamente
     un gruppo intero e il ciclo non da' lo scatto */
  padding-right:var(--marquee-gap, 22px);
  width:max-content;
  will-change:transform;
  animation:marquee-scroll var(--marquee-duration, 40s) linear infinite;
}

.marquee:not(.marquee--continuo):hover .marquee__track,
.marquee.is-paused .marquee__track{ animation-play-state:paused; }
/* l'archivio non si ferma mai: ne' al passaggio del puntatore, ne' al tocco */
.marquee--continuo .marquee__track{ animation-play-state:running !important; }

@keyframes marquee-scroll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

.marquee__controls{
  display:flex;
  justify-content:flex-end;
  max-width:var(--wrap);
  margin:14px auto 0;
  padding-inline:var(--gutter);
}

/* Elementi dentro i marquee */
.archive-item{
  flex:0 0 auto;
  width:clamp(150px, 20vw, 200px);
  position:relative;
  display:block;
  transition:transform var(--t-slow) var(--ease);
}
.archive-item .ph{ width:100%; }
.archive-item:hover{ transform:translateY(-6px); }

.archive-item__caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:26px 12px 10px;
  font-family:var(--font-mono);
  font-size:12px;
  background:linear-gradient(to top, rgba(var(--bg-rgb), .92), transparent);
}


/* --------------------------------------------------------------------------
   10. BLOCCHI IN EVIDENZA (prossimo evento, ultima uscita)
   -------------------------------------------------------------------------- */
.feature{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(28px, 4vw, 56px);
  align-items:center;
  padding:clamp(28px, 4vw, 52px);
  background:var(--bg-alt);
  border:1px solid var(--line);
}

.feature--reverse{ grid-template-columns:.95fr 1.05fr; }
.feature--reverse .feature__visual{ order:-1; }

.feature__body > * + *{ margin-top:16px; }
.feature__body h3{ font-size:clamp(26px, 3.4vw, 40px); }

.date-badge{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:15px;
  letter-spacing:.02em;
  color:var(--bg);
  background:var(--green);
  padding:7px 14px;
}

@media (max-width:820px){
  .feature,
  .feature--reverse{ grid-template-columns:1fr; }
  .feature--reverse .feature__visual{ order:0; }
}

/* --------------------------------------------------------------------------
   11. GRIGLIE DI SCHEDE
   -------------------------------------------------------------------------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(22px, 3vw, 36px);
}
.card-grid--2{ grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }

.card{ display:flex; flex-direction:column; }
.card .ph{ margin-bottom:18px; }

.card__artist{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  color:var(--lilla);
  margin-bottom:14px;
}
.card h3{ margin-bottom:8px; }
.card p{ font-size:var(--fs-small); margin-bottom:14px; }

.tag{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:10px;
}

/* --------------------------------------------------------------------------
   12. INTESTAZIONE DELLE PAGINE INTERNE
   -------------------------------------------------------------------------- */
.page-header{
  padding-block:clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px);
}

.page-header .eyebrow{ margin-bottom:var(--gap-eyebrow); }

.page-header p:not(.eyebrow):not(.lead):not(.testo-sec){
  margin-top:var(--gap-sub);
  max-width:72ch;
  font-size:clamp(17px, 1.8vw, 19px);
}

/* Testo 1 e testo 2 non passano piu' dalla regola qui sopra: margine e
   misura della riga glieli do qui, il corpo arriva dalle loro classi. */
.page-header p.lead{ margin-top:var(--gap-sub); max-width:66ch; }
.page-header p.testo-sec{ max-width:64ch; }

.page-header.is-centered{ text-align:center; }
.page-header.is-centered p{ margin-inline:auto; }

/* Firma di appartenenza: Selvatica e' autonoma ma e' un progetto di Sberdia live */
.endorsement{
  margin-top:20px;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--lilla);
}
.endorsement a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-bottom:3px;
  border-bottom:1px solid var(--line);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.endorsement strong{ color:var(--ivory); font-weight:600; }
.endorsement a:hover{ color:var(--green); border-bottom-color:var(--green); }
.endorsement a:hover strong{ color:var(--green); }
.endorsement span{ transition:transform var(--t-fast) var(--ease); }
.endorsement a:hover span{ transform:translateX(3px); }

/* Titolo di pagina disegnato (SVG) al posto dell'H1 testuale */
.title-svg{
  height:clamp(46px, 7.6vw, 92px);
  width:auto;
}
.page-header.is-centered .title-svg{ margin-inline:auto; }

/* Locandina del calendario in testa alla pagina Eventi.
   Si vede sempre per intera, anche su telefono: non viene mai ritagliata,
   quindi resta in 16:7 a ogni misura di schermo. */
.calendar-banner{
  margin:0;
  background:var(--bg-alt);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.calendar-banner picture{ display:block; }
.calendar-banner img{
  display:block;
  width:100%;
  height:auto;
}

/* --------------------------------------------------------------------------
   13. LISTA EVENTI
   -------------------------------------------------------------------------- */
.event-row{
  display:grid;
  grid-template-columns:110px 130px 1fr auto;
  /* La descrizione sta sotto al titolo, nella stessa colonna; locandina,
     data e bottone occupano tutte e due le righe. */
  grid-template-areas:
    "poster date info  cta"
    "poster date testo cta";
  gap:0 clamp(16px, 2.5vw, 28px);
  /* con le descrizioni le righe hanno altezze diverse: allineate in alto
     data, titolo e locandina partono dalla stessa linea */
  align-items:start;
  padding-block:clamp(20px, 2.5vw, 28px);
  border-top:1px solid var(--line);
  transition:background var(--t-fast) var(--ease);
}
.event-row:last-of-type{ border-bottom:1px solid var(--line); }

/* Ogni pezzo nella sua casella, su schermo grande come sul telefono. */
.event-row__poster{ grid-area:poster; }
.event-row__info  { grid-area:info; }
.event-row__testo { grid-area:testo; }
.event-row > .btn,
.event-row > .btn--free{ grid-area:cta; }

/* Finche' non ci sono le locandine la colonna dell'immagine non esiste:
   meglio una riga compatta che quattro riquadri vuoti in fila. */
.event-row--nuda{
  grid-template-columns:130px 1fr auto;
  grid-template-areas:
    "date info  cta"
    "date testo cta";
}

.event-row__poster{ width:100%; }          /* riempie la propria colonna */
.event-row__giorno{ display:block; }
.event-row__date{
  grid-area:date;
  padding-top:2px;
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  color:var(--green);
  font-size:clamp(17px, 2vw, 22px);
  line-height:1.12;
}
/* Sottotitolo facoltativo dell'evento (campo "sottotitolo:" in info.txt):
   stesso carattere del titolo, piu' piccolo, sempre su una riga sua.
   Vale per Upcoming (Eventi) e per Sberdia Next (homepage). */
.titolo-sub{
  display:block;
  font-size:.7em;
  line-height:1.1;
  margin-top:.3em;
}

.event-row__venue{
  font-size:var(--fs-small);
  color:var(--ivory);
  margin-top:4px;
}
.event-row__support{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.03em;
  color:var(--lilla);
  margin-top:4px;
}

/* Il bottone non viene mai allargato: lo stelo deve restare largo
   quanto la parola, identico in ogni sezione e su ogni schermo. */
.event-row .btn{ justify-content:flex-start; }
.event-row > .btn, .event-row > .btn--free{ align-self:start; margin-top:2px; }

@media (max-width:820px){
  /* Sul telefono: in alto locandina, data, artista, luogo e open act;
     sotto, a tutta larghezza, la descrizione. */
  .event-row{
    grid-template-columns:96px 1fr;
    grid-template-areas:
      "poster date"
      "poster info"
      "testo  testo"
      "cta    cta";
    row-gap:6px;
    column-gap:clamp(14px, 4vw, 20px);
    align-items:start;
  }
  .event-row--nuda{
    grid-template-columns:1fr;
    grid-template-areas:
      "date"
      "info"
      "testo"
      "cta";
  }
  .event-row__testo{ margin-top:12px; max-width:none; }

  /* giorno e mese sulla stessa riga */
  .event-row__date{
    align-self:center;
    white-space:nowrap;
  }
  .event-row__giorno{ display:inline; }
  .event-row .btn{ margin-top:14px; }
}

/* Notiziario dell'etichetta: quando a sinistra, notizia a destra.
   Stessa impaginazione del percorso di Chi siamo, cosi' il sito resta uno. */
.news{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:clamp(16px, 2.5vw, 32px);
  padding-block:clamp(18px, 2.2vw, 26px);
  border-top:1px solid var(--line);
}
.news:last-of-type{ border-bottom:1px solid var(--line); }
.news__quando{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--green);
  padding-top:4px;
}
.news__corpo p{ margin-top:6px; max-width:64ch; color:var(--ivory); }
.news__corpo a{ transition:color var(--t-fast) var(--ease); }
.news__corpo a:hover{ color:var(--green); }
.news__corpo a span{ display:inline-block; transition:transform var(--t-fast) var(--ease); }
.news__corpo a:hover span{ transform:translateX(3px); }

@media (max-width:640px){
  .news{ grid-template-columns:1fr; gap:4px; }
}

/* descrizione dell'artista nella riga evento */
.event-row__testo{
  font-size:var(--fs-small);
  color:var(--lilla);
  margin-top:8px;
  max-width:58ch;
}

/* --------------------------------------------------------------------------
   14. LISTA USCITE (catalogo)
   -------------------------------------------------------------------------- */
.release-row{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 12px;
  border-top:1px solid var(--line);
  transition:background var(--t-fast) var(--ease);
}
.release-row:last-of-type{ border-bottom:1px solid var(--line); }
.release-row:hover{ background:var(--bg-alt); }

.release-row .ph{ width:56px; height:56px; flex-shrink:0; }
div.release-row{ cursor:default; }

.release-row__info{ flex:1; min-width:0; }
.release-row__title{
  font-size:var(--fs-small);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.release-row__artist{ font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--lilla); margin-top:2px; }

.release-row__play{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid rgba(var(--green-rgb), .5);
  color:var(--green);
  font-size:11px;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.release-row:hover .release-row__play{ background:var(--green); color:var(--bg); }

/* --------------------------------------------------------------------------
   15. MOSAICO PRODUZIONI
   -------------------------------------------------------------------------- */
.mosaic{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:clamp(16px, 2vw, 26px);
}

.mosaic__cover{ overflow:hidden; margin-bottom:10px; }
.mosaic__cover .ph{
  width:100%;
  transition:transform .5s var(--ease);
}
.mosaic a:hover .mosaic__cover .ph{ transform:scale(1.07); }
.mosaic__title{ font-size:var(--fs-small); line-height:1.3; }
.mosaic__role { font-family:var(--font-mono); font-size:12px; color:var(--lilla); margin-top:2px; }

/* --------------------------------------------------------------------------
   16. SCHEDE SERVIZI / RIDER
   -------------------------------------------------------------------------- */
.grid-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.grid-list__item{
  background:var(--bg);
  padding:clamp(22px, 3vw, 32px);
  transition:background var(--t-fast) var(--ease);
}
.grid-list__item:hover{ background:var(--bg-alt); }
.grid-list__item h3{ font-size:19px; margin-bottom:10px; }
.grid-list__item p{ font-size:var(--fs-small); }

/* --------------------------------------------------------------------------
   17. NUMERI E PERCORSO (chi siamo)
   -------------------------------------------------------------------------- */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:clamp(32px, 4vw, 52px);
}
.stat{ background:var(--bg); padding:clamp(22px, 3vw, 32px); }
.stat__number{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(40px, 5vw, 60px);
  color:var(--green);
  line-height:.9;
  margin-bottom:12px;
}
.stat__label{ font-size:var(--fs-small); }

.timeline{ display:flex; flex-direction:column; }
.timeline__item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:clamp(16px, 3vw, 32px);
  padding-block:clamp(22px, 3vw, 30px);
  border-top:1px solid var(--line);
}
.timeline__item:last-child{ border-bottom:1px solid var(--line); }
.timeline__year{
  font-family:var(--font-display);
  font-weight:800;
  color:var(--green);
  font-size:clamp(22px, 3vw, 30px);
  line-height:1;
}
.timeline__item h3{ margin-bottom:8px; }
.timeline__item p{ font-size:var(--fs-small); }

@media (max-width:640px){
  .timeline__item{ grid-template-columns:1fr; gap:8px; }
}

@media (max-width:900px){
  .stat-grid{ grid-template-columns:repeat(2, 1fr); }
  .grid-list{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:520px){
  /* i numeri restano a due a due: in colonna singola facevano scorrere
     mezzo schermo per quattro dati */
  .stat-grid{ grid-template-columns:repeat(2, 1fr); }
  .stat{ padding:18px 14px; }
  .grid-list{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   18. BLOCCO TESTO + FOTO
   -------------------------------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px, 4vw, 56px);
  align-items:center;
}
.split--single{ grid-template-columns:1fr; }
.split__body > * + *{ margin-top:14px; }

@media (max-width:820px){
  .split{ grid-template-columns:1fr; }
}

.prose{ max-width:68ch; }
.prose > * + *{ margin-top:18px; }
.prose p:not(.eyebrow):not(.lead):not(.testo-sec){ font-size:var(--fs-body); }

/* --------------------------------------------------------------------------
   19. FASCIA DI CHIUSURA
   -------------------------------------------------------------------------- */
.closing{
  position:relative;
  display:flex;
  align-items:flex-end;
  border-top:2px solid var(--lilla);
}
.closing.ph{ border-left:none; border-right:none; border-bottom:none; }

.closing__caption{
  padding:clamp(22px, 4vw, 44px);
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.06;          /* gli accenti maiuscoli non devono toccare */
  font-size:clamp(22px, 4.2vw, 44px);
  color:var(--green);
  max-width:26ch;
  text-wrap:balance;
}

/* --------------------------------------------------------------------------
   20. FORM
   -------------------------------------------------------------------------- */
.form{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:440px;
  margin-top:20px;
}

.form label{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--lilla);
  margin-bottom:6px;
}

.form input[type="text"],
.form input[type="email"],
.form textarea{
  width:100%;
  background:var(--bg-alt);
  border:1px solid var(--line);
  color:var(--ivory);
  font-family:var(--font-text);
  font-size:var(--fs-small);
  padding:12px 14px;
  transition:border-color var(--t-fast) var(--ease);
}
.form input:focus,
.form textarea:focus{ border-color:var(--green); outline:none; }
.form textarea{ resize:vertical; min-height:110px; }

.form__consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:var(--fs-micro);
  color:var(--lilla);
  line-height:1.5;
}
.form__consent input{ margin-top:3px; accent-color:var(--green); flex-shrink:0; }
.form__consent a{ color:var(--green); text-decoration:underline; }

.form__honey{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__avviso{
  font-size:var(--fs-small);
  color:var(--green);
  margin:0;
}

/* Scelta della sezione a cui scrivere */
.form__sezioni{ border:0; padding:0; margin:0; min-width:0; }
.form__sezioni legend{
  padding:0;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--lilla);
  margin-bottom:8px;
}
.scelta{ display:flex; flex-wrap:wrap; gap:8px; }
.form .scelta label{
  position:relative;
  margin:0;
  font-family:var(--font-text);
  font-size:14px;
  letter-spacing:0;
  text-transform:none;
  cursor:pointer;
}
.scelta input{
  position:absolute;
  inset:0;
  opacity:0;
  margin:0;
  cursor:pointer;
}
.scelta span{
  display:inline-block;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ivory);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.scelta label:hover span{ border-color:var(--lilla); }
.scelta input:checked + span{ background:var(--green); border-color:var(--green); color:var(--bg); }
.scelta input:focus-visible + span{ outline:2px solid var(--lilla); outline-offset:2px; }

/* Il form si apre con <details>: funziona anche senza JavaScript */
.disclosure > summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  padding:13px 28px;
  border:1px solid var(--green);
  color:var(--green);
  font-size:var(--fs-small);
  font-weight:500;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.disclosure > summary::-webkit-details-marker{ display:none; }
.disclosure > summary:hover{ background:var(--green); color:var(--bg); }
.disclosure[open] > summary{ background:var(--green); color:var(--bg); }

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{ padding-block:clamp(40px, 5vw, 64px) 32px; }

/* Appendice: il bollo e sotto, centrato su di esso, il motto */
.footer-appendix{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding-top:clamp(32px, 4vw, 44px);
  border-top:2px solid var(--lilla);
  text-align:center;
}

.footer-appendix__mark{
  height:clamp(48px, 6vw, 60px);
  width:auto;
}

.footer-appendix__motto{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.045em;
  font-size:clamp(18px, 2.4vw, 24px);
  line-height:1;
  color:var(--green);
}

/* Blocco informazioni: solo in homepage, sotto il footer */
.site-info{
  border-top:2px solid var(--lilla);
  padding-block:clamp(32px, 4vw, 48px);
}

.site-info__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(24px, 3vw, 40px);
}

.site-info h2{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--lilla);
  margin-bottom:16px;
}

.site-info li{ margin-bottom:10px; font-size:var(--fs-small); }
.site-info a{ transition:color var(--t-fast) var(--ease); }
.site-info a:hover{ color:var(--green); }

.legal-block{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  line-height:1.8;
  color:var(--lilla);
}
.legal-block a{ color:var(--lilla); text-decoration:underline; }
.legal-block a:hover{ color:var(--green); }

.social-icons{ display:flex; gap:12px; }
.social-icons a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border:1px solid var(--line);
  transition:border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.social-icons a:hover{
  border-color:var(--green);
  color:var(--green);
  transform:translateY(-2px);
}
.social-icons svg{ width:18px; height:18px; fill:currentColor; }

@media (max-width:860px){
  .site-info__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .site-info__grid{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   22. ANIMAZIONI DI COMPARSA
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity var(--t-slow) var(--ease),
             transform var(--t-slow) var(--ease);
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* Se il JavaScript non parte, il contenuto resta comunque visibile */
.no-js .reveal{ opacity:1; transform:none; }

/* --------------------------------------------------------------------------
   23. MOVIMENTO RIDOTTO
   Rispetta l'impostazione di sistema di chi non tollera le animazioni.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; transform:none; }
  .marquee{
    overflow-x:auto;
    mask-image:none;
    -webkit-mask-image:none;
  }
}

/* --------------------------------------------------------------------------
   24. STAMPA
   -------------------------------------------------------------------------- */
@media print{
  .site-header, .carousel__dots, .marquee__controls, .nav__toggle{ display:none; }
  body{ background:#fff; color:#000; }
}

/* --------------------------------------------------------------------------
   25. SBERDIA NEXT — carosello dei prossimi eventi (homepage)
   Locandina sopra, informazioni sotto, tutto centrato. Le misure sono
   legate all'altezza dello schermo, cosi' la sezione ci sta per intero
   senza tagliare la locandina.
   -------------------------------------------------------------------------- */
.next{ position:relative; }

.next__track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.next__track::-webkit-scrollbar{ display:none; }

.next__slide{
  flex:0 0 100%;
  width:100%;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(14px, 2vw, 22px);
  padding-inline:4px;
}

.next__poster{
  height:clamp(190px, 33vh, 400px);
  aspect-ratio:4/5;
  width:auto;
  flex-shrink:0;
}

.next__body > * + *{ margin-top:10px; }
.next__body h3{ font-size:clamp(22px, 3.2vw, 34px); }

.next__venue,
.next__testo{
  font-size:15px;
  color:var(--ivory);
  max-width:46ch;
  margin-inline:auto;
}
.next__support{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.03em;
  color:var(--lilla);
}

.next__slide .btn{ margin-top:16px; }

.next__dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:clamp(18px, 3vw, 28px);
}
.next__dots button{
  width:8px; height:8px;
  border-radius:50%;
  border:1px solid var(--lilla);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.next__dots button.is-active{ background:var(--green); border-color:var(--green); }

/* --------------------------------------------------------------------------
   26. PRODUZIONI — copertine a scorrimento, i testi compaiono sopra
   -------------------------------------------------------------------------- */
.cover-item{
  position:relative;
  flex:0 0 auto;
  display:block;
  width:clamp(150px, 20vw, 210px);
  overflow:hidden;
}

.cover-item .ph{
  width:100%;
  aspect-ratio:1/1;
  transition:transform .5s var(--ease);
}
.cover-item:hover .ph{ transform:scale(1.06); }

.cover-item__meta{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:14px;
  background:linear-gradient(to top,
             rgba(var(--bg-rgb), .94) 0%,
             rgba(var(--bg-rgb), .55) 55%,
             rgba(var(--bg-rgb), 0) 100%);
  opacity:0;
  transition:opacity .32s var(--ease);
}
.cover-item:hover .cover-item__meta,
.cover-item:focus-visible .cover-item__meta{ opacity:1; }

.cover-item__title{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  line-height:1;
  font-size:17px;
  color:var(--ivory);
}
.cover-item__artist{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--green);
  margin-top:6px;
}

/* dove non esiste il passaggio del puntatore i testi restano visibili */
@media (hover:none){
  .cover-item__meta{ opacity:1; }
}

/* --------------------------------------------------------------------------
   27. TECHNICAL RIDER — categorie a tendina
   -------------------------------------------------------------------------- */
.rider{ border-top:1px solid var(--line); }

.rider__item{ border-bottom:1px solid var(--line); }

.rider__item > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 2px;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1;
  font-size:clamp(19px, 2.2vw, 25px);
  color:var(--ivory);
  transition:color .2s var(--ease);
}
.rider__item > summary::-webkit-details-marker{ display:none; }

.rider__item > summary::after{
  content:"";
  flex-shrink:0;
  width:13px; height:13px;
  background:
    linear-gradient(var(--green), var(--green)) center/13px 1.5px no-repeat,
    linear-gradient(var(--green), var(--green)) center/1.5px 13px no-repeat;
  transition:transform .32s var(--ease);
}
.rider__item[open] > summary::after{ transform:rotate(135deg); }

.rider__item > summary:hover,
.rider__item[open] > summary{ color:var(--green); }

.rider__body{ padding:2px 2px 22px; }

.rider__body ul{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:clamp(24px, 4vw, 48px);
}
.rider__body li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  break-inside:avoid;
  font-size:15px;
  line-height:1.3;
  color:var(--ivory);
}
.rider__nome{ display:flex; flex-direction:column; gap:3px; }
.rider__nota-voce,
.rider__qta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.rider__nota-voce{ color:var(--lilla); }
.rider__qta{ color:var(--green); flex-shrink:0; }

/* l'ultima riga non ha la linea: sotto c'e' gia' quella della categoria */
.rider__body li:nth-child(3n+1):nth-last-child(-n+3),
.rider__body li:nth-child(3n+1):nth-last-child(-n+3) ~ li{ border-bottom:0; }

@media (max-width:900px){
  .rider__body ul{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .rider__body li{ border-bottom:1px solid var(--line); }
  .rider__body li:nth-child(2n+1):nth-last-child(-n+2),
  .rider__body li:nth-child(2n+1):nth-last-child(-n+2) ~ li{ border-bottom:0; }
}
/* telefono: elenco compatto, senza linee */
@media (max-width:640px){
  .rider__body ul{ grid-template-columns:1fr; }
  .rider__body li,
  .rider__body li:nth-child(n){ border-bottom:0; padding:5px 0; }
}
.rider__nota{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lilla);
  margin-top:18px;
}

/* --------------------------------------------------------------------------
   28. DENSITA' SU SCHERMO PICCOLO
   Le immagini a tutta larghezza diventavano altissime e spingevano le
   informazioni fuori dalla schermata. Qui l'altezza la decide lo schermo.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  :root{
    --section-y:clamp(34px, 8vw, 52px);
  }

  .section-head{ margin-bottom:22px; }

  /* blocchi testo + immagine: l'immagine non occupa piu' tutta la larghezza,
     cosi' la sezione entra nello schermo senza sembrare mezza vuota */
  .split .ph{
    height:clamp(150px, 24vh, 240px);
    width:auto;
    margin-inline:auto;
  }

  /* schede: immagine contenuta e contenuto centrato */
  .card{ text-align:center; align-items:center; }
  .card .ph{
    height:clamp(170px, 28vh, 280px);
    width:auto;
    margin-inline:auto;
  }
  .card .btn{ margin-inline:auto; }

  .page-header p:not(.eyebrow):not(.lead):not(.testo-sec){ font-size:16px; }

  .prose p:not(.eyebrow):not(.lead):not(.testo-sec){ font-size:16px; }
  .lead,
  .page-header p.lead,
  .prose p.lead{ font-size:18px; }
}

/* --------------------------------------------------------------------------
   29. RITOCCHI DI SPAZIATURA
   -------------------------------------------------------------------------- */

/* uno scorrimento che segue del testo ha bisogno di respiro sopra */
.marquee--spaced{ margin-top:clamp(30px, 4vw, 48px); }

/* l'intestazione dentro i blocchi di testo segue lo stesso ritmo delle testate */
.split__body .eyebrow,
.next__body .eyebrow{ margin-bottom:var(--gap-eyebrow); }

/* l'artista sotto il titolo dell'uscita (homepage, Selvatica Dischi):
   stacca poco dal titolo, cosi' i due si leggono come un blocco solo */
.split__body .split__artista{
  margin-top:6px;
  font-size:clamp(17px, 1.6vw, 20px);
  font-weight:600;
  line-height:1.3;
  color:var(--green);
}
.split__body .split__artista + *{ margin-top:18px; }

/* --------------------------------------------------------------------------
   30. SBERDIA NEXT SU SCHERMO GRANDE
   Su desktop la slide prende l'impaginazione della sezione Selvatica
   Dischi — locandina a sinistra, informazioni a destra — restando un
   carosello. Su telefono resta impilata e centrata: li' e' l'unica forma
   che entra in una schermata.
   -------------------------------------------------------------------------- */
@media (min-width:821px){
  .next__slide{
    display:grid;
    /* le stesse colonne della sezione Selvatica Dischi: scorrendo, il
       testo delle due sezioni parte esattamente dallo stesso punto */
    grid-template-columns:.85fr 1.15fr;
    gap:clamp(28px, 4vw, 56px);
    align-items:center;
    text-align:left;
    padding-inline:0;
  }

  /* La locandina e' verticale: lasciata libera di riempire la colonna
     diventerebbe molto piu' alta del testo che le sta accanto. La teniamo
     all'altezza dell'immagine di Selvatica Dischi, cosi' le due sezioni
     pesano uguale. */
  .next__poster{
    height:clamp(340px, 46vh, 460px);
    width:auto;
    aspect-ratio:4/5;
    justify-self:start;
  }

  .next__venue,
  .next__testo{ margin-inline:0; }
  .next__support{ text-align:left; }

  /* senza locandina la slide e' solo testo: una colonna sola, allineata
     a sinistra come il resto della pagina */
  /* Slide senza locandina: il testo prende tutta la larghezza e resta
     centrato in altezza, cosi' non casca in fondo alla fascia. */
  .next__slide--nuda{ grid-template-columns:1fr; align-content:center; }
  .next__slide--nuda .next__body{ max-width:64ch; align-self:center; }

  .next__dots{ justify-content:flex-start; }
}

/* --------------------------------------------------------------------------
   31. NESSUN EVENTO IN PROGRAMMA
   -------------------------------------------------------------------------- */
.vuoto{
  padding-block:clamp(18px, 3vw, 32px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.vuoto.is-centered{ text-align:center; }
.vuoto__titolo{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(22px, 3.2vw, 34px);
  line-height:1.05;
  color:var(--ivory);
  margin-bottom:8px;
}
.vuoto p:not(.vuoto__titolo){ font-size:var(--fs-small); color:var(--ivory); }
.vuoto a{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }

/* --------------------------------------------------------------------------
   32. CHIUSURA LEGALE E INTESTAZIONE SOCIETARIA
   -------------------------------------------------------------------------- */
.footer-appendix__copy{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.04em;
  color:var(--lilla);
}
.site-info h2.site-info__nome{ text-transform:none; letter-spacing:.04em; }

/* --------------------------------------------------------------------------
   33. SERVIZI (Sberdia Studio)
   A sinistra una parola alla volta, a destra le foto che scorrono.
   -------------------------------------------------------------------------- */
.servizi{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(28px, 5vw, 72px);
  align-items:center;
}
.servizi__intro{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lilla);
  margin-bottom:14px;
}
.rotore{
  display:grid;
  align-items:center;
  overflow:hidden;
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:.005em;
  font-size:clamp(40px, 6vw, 80px);
  color:var(--green);
}
.rotore__parola{
  grid-area:1 / 1;
  opacity:0;
  transform:translateY(105%);
  transition:transform .75s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
  text-wrap:balance;
}
.rotore__parola.is-in{ opacity:1; transform:none; }
.rotore__parola.is-out{ opacity:0; transform:translateY(-105%); }

/* l'elenco completo: letto dagli screen reader, mostrato a chi riduce il movimento */
.servizi__lista{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.servizi__testo{
  margin-top:24px;
  max-width:42ch;
  color:var(--ivory);
}
.servizi .btn{ margin-top:18px; }
.servizi__foto .carousel__dots{ right:12px; bottom:12px; }

@media (min-width:821px){
  .servizi{
    grid-template-columns:minmax(0, 1fr) auto;
    gap:clamp(40px, 5vw, 80px);
  }
  .servizi__foto{
    height:clamp(400px, 62vh, 560px);
    aspect-ratio:4 / 5;
    justify-self:end;
  }
  /* Titolo e testo sono una cosa sola: la foto si centra su tutto il
     blocco, non solo sul corpo. */
  .servizi__corpo{ align-self:center; }
  .servizi__corpo .section-head{ margin-bottom:clamp(18px, 2.4vw, 28px); }
  .servizi__intro{ margin-bottom:10px; }
  /* una riga sola: la misura la decide la parola piu' lunga (vedi site.js) */
  .rotore{ white-space:nowrap; font-size:var(--rotore-size, clamp(40px, 4.6vw, 68px)); }
  .rotore__parola{ text-wrap:nowrap; }
  .servizi__testo{ margin-top:20px; }
}

@media (max-width:820px){
  .servizi{ grid-template-columns:1fr; }
  .servizi__foto{
    width:min(100%, calc(56vh * .8));
    justify-self:center;
  }
}

@media (prefers-reduced-motion:reduce){
  .rotore{ display:none; }
  .servizi__lista{
    position:static;
    width:auto; height:auto;
    clip-path:none;
    white-space:normal;
    font-family:var(--font-display);
    font-weight:800;
    text-transform:uppercase;
    font-size:clamp(26px, 3.4vw, 40px);
    line-height:1.1;
    color:var(--green);
  }
}

/* --------------------------------------------------------------------------
   34. TESTATA SBERDIA STUDIO
   Foto 16:7 nella colonna del testo, titolo in sovrimpressione in alto a
   sinistra, introduzione sotto (tavola del 17/09).
   -------------------------------------------------------------------------- */
.studio-head__media{
  position:relative;
  margin-top:4px;
}
.studio-head__media .carousel__slide{ border:1px solid var(--line); }
.studio-head__media::before{
  /* velo leggero dietro il titolo, perche' si legga su ogni foto */
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(60% 70% at 0% 0%, rgba(var(--bg-rgb), .55), transparent 70%);
}
.studio-head__titolo{
  position:absolute;
  z-index:2;
  top:clamp(14px, 3vw, 30px);
  left:clamp(14px, 2.4vw, 26px);
  height:clamp(36px, 6.4vw, 84px);
  width:auto;
  pointer-events:none;
}
.studio-head__media .carousel__dots{
  z-index:2;
  right:12px;
  bottom:12px;
}
.page-header .studio-head__intro{
  margin-top:clamp(16px, 2vw, 24px);
}

/* --------------------------------------------------------------------------
   35. VIDEO AL POSTO DELLE FOTO
   Il file parte da un punto a caso, senza audio, in ciclo. Chi ha chiesto
   meno animazioni o il risparmio dati vede solo il fotogramma di copertina.
   -------------------------------------------------------------------------- */
.ph--video{
  position:relative;
  overflow:hidden;
  background:var(--bg-alt);
}
.ph--video .video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* la didascalia sta sopra la foto o il video, con un velo che la rende
   leggibile su qualsiasi immagine */
.closing__caption{ position:relative; z-index:2; }
.closing.ph--img::after,
.closing.ph--video::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to top, rgba(var(--bg-rgb), .75), rgba(var(--bg-rgb), .15) 55%, transparent 80%);
}

/* --------------------------------------------------------------------------
   36. PRESS KIT — Selvatica Dischi
   Una fascia a tutta larghezza con la grafica di fondo (press-kit/sfondo),
   un velo scuro regolabile da press-kit.txt (velo: 0-90) e sopra i nomi
   degli artisti, grandi come su una locandina. Ogni nome si apre a tendina.
   Su schermo grande, passando sopra un nome compare la sua foto.
   -------------------------------------------------------------------------- */
.presskit{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(72px, 10vw, 150px);
}

/* fondo: la grafica, un po' piu' alta della fascia per il parallasse */
.presskit__fondo{
  position:absolute;
  inset:-10% 0;
  z-index:-3;
  will-change:transform;
}
.presskit__fondo picture,
.presskit__fondo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* senza grafica: un fondo provvisorio nei colori del marchio */
.presskit__fondo--vuoto{
  background:
    radial-gradient(ellipse 60% 55% at 16% 24%, rgba(var(--green-rgb), .30), transparent 70%),
    radial-gradient(ellipse 45% 50% at 88% 80%, rgba(var(--terra-rgb), .20), transparent 70%),
    radial-gradient(ellipse 40% 40% at 72% 12%, rgba(148, 148, 168, .20), transparent 70%),
    var(--bg-alt);
}

/* velo: piu' leggero in alto, piu' scuro dove stanno i nomi */
.presskit::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(var(--bg-rgb), calc(var(--pk-velo, .55) * .55)) 0%,
    rgba(var(--bg-rgb), var(--pk-velo, .55)) 45%,
    rgba(var(--bg-rgb), calc(var(--pk-velo, .55) + .25)) 100%);
}

.presskit__testa .eyebrow{ margin-bottom:var(--gap-eyebrow); }
.presskit__titolo{
  font-size:var(--fs-display);
  line-height:.84;
}
.presskit__testa .testo-sec{ margin-top:var(--gap-sub); max-width:52ch; }

.presskit__lista{
  position:relative;
  z-index:1;
  margin-top:clamp(40px, 6vw, 80px);
  border-top:1px solid rgba(237, 233, 225, .28);
}

.pk{ border-bottom:1px solid rgba(237, 233, 225, .28); }

.pk > summary{
  display:flex;
  align-items:center;
  gap:clamp(14px, 2vw, 28px);
  padding-block:clamp(12px, 1.6vw, 22px);
  cursor:pointer;
  list-style:none;
}
.pk > summary::-webkit-details-marker{ display:none; }
.pk > summary:focus-visible{ outline:2px solid var(--green); outline-offset:4px; }

.pk__nome{
  min-width:0;
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(40px, 7.6vw, 108px);
  line-height:.9;
  letter-spacing:.005em;
  text-wrap:balance;
  color:var(--ivory);
  transition:color .28s var(--ease), transform .45s var(--ease);
}
.pk__meta{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lilla);
  white-space:nowrap;
  transition:color .28s var(--ease);
}
.pk__segno{
  flex-shrink:0;
  width:18px; height:18px;
  background:
    linear-gradient(var(--green), var(--green)) center/18px 2px no-repeat,
    linear-gradient(var(--green), var(--green)) center/2px 18px no-repeat;
  transition:transform .36s var(--ease);
}

.pk > summary:hover .pk__nome,
.pk[open] > summary .pk__nome{ color:var(--green); }
.pk > summary:hover .pk__nome{ transform:translateX(12px); }
.pk > summary:hover .pk__meta,
.pk[open] > summary .pk__meta{ color:var(--ivory); }
.pk[open] .pk__segno{ transform:rotate(135deg); }

/* scheda aperta: un pannello velato sopra la grafica */
.pk__body{
  display:grid;
  grid-template-columns:minmax(0, 240px) minmax(0, 1fr);
  gap:clamp(24px, 4vw, 52px);
  margin-bottom:clamp(18px, 2.4vw, 30px);
  padding:clamp(20px, 3vw, 36px);
  background:rgba(var(--bg-rgb), .82);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
}
.pk[open] .pk__body{ animation:pk-apri .45s var(--ease); }
@keyframes pk-apri{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:none; }
}

.pk__foto{ align-self:start; }
.pk__foto-vuota{
  position:absolute; left:10px; bottom:10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--lilla);
}

.pk__testo{ min-width:0; display:grid; gap:22px; align-content:start; }
.pk__bio{ font-size:var(--fs-body); line-height:1.5; max-width:58ch; }
.pk__testo .testo-sec{ margin-top:12px; color:var(--lilla); }

.pk__dati{ list-style:none; border-top:1px solid var(--line); }
.pk__dati li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:10px 0; border-bottom:1px solid var(--line);
  font-size:15px; line-height:1.3;
}
.pk__dati li > span:first-child{
  flex-shrink:0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--lilla);
}
.pk__dati li > span:last-child{ text-align:right; }

.pk__azioni{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 30px; }

/* il download punta in basso, non avanti */
a.btn.btn--scarica::after{ content:"\2193"; }
a.btn.btn--scarica:hover::after{ transform:translateY(3px); }

.pk__file{
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
  margin-top:-8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--lilla);
}
.pk__file span:empty{ display:none; }
.pk__copia{
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:var(--green); background:none; border:0; padding:0 0 2px; cursor:pointer;
  border-bottom:1px solid rgba(var(--green-rgb), .45);
  transition:color var(--t-fast) var(--ease);
}
.pk__copia:hover{ color:var(--ivory); }
.pk__copia:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

/* la foto che segue i nomi (solo con il puntatore, su schermo grande) */
.presskit__anteprima{
  position:absolute;
  right:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  top:0;
  z-index:0;
  width:clamp(200px, 21vw, 300px);
  aspect-ratio:4/5;
  opacity:0;
  pointer-events:none;
  transform:translateY(-50%) rotate(-3deg) scale(.9);
  transition:opacity .3s var(--ease), transform .45s var(--ease), top .45s var(--ease);
}
.presskit__anteprima.is-attiva{
  opacity:1;
  transform:translateY(-50%) rotate(-2deg) scale(1);
}
.presskit__anteprima .ph{ width:100%; height:100%; }
@media (hover:none), (max-width:899px){
  .presskit__anteprima{ display:none; }
}

@media (max-width:640px){
  .pk__meta{ display:none; }
  .pk__segno{ margin-left:auto; }
  .pk__body{ grid-template-columns:1fr; }
  .pk__foto{ max-width:240px; }
  .pk__dati li{ flex-direction:column; gap:4px; }
  .pk__dati li > span:last-child{ text-align:left; }
}

@media (prefers-reduced-motion:reduce){
  .presskit__fondo{ transform:none !important; }
  .pk > summary:hover .pk__nome{ transform:none; }
}