/* ==========================================================================
   DJ EROS · Country Deejay since 2001
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Carnevalee";
  src: url("../fonts/carnevalee-freakshow.ttf") format("truetype");
  font-display: swap;
  /* solo ASCII: lettere accentate e segni (É · – “ ”) li disegna il font di riserva */
  unicode-range: U+0020-007E;
}
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ==========================================================================
   UI KIT · token canonici
   ========================================================================== */
:root {
  /* Colori */
  --red: #c8161d;
  --red-dark: #7c0b10;
  --navy: #0e2a5c;
  --navy-dark: #0a1f45;
  --sky: #9cc3f0;            /* solo su fondi scuri */
  --ink: #16181d;            /* testo su chiaro, fondo "carbone" */
  --gray: #5f6470;           /* testo secondario su chiaro */
  --offwhite: #f6f4ef;
  --white: #fff;
  --on-dark-muted: rgba(246, 244, 239, .8);
  --line: rgba(22, 24, 29, .18);
  --line-dark: rgba(246, 244, 239, .3);

  /* Tipografia: 3 famiglie */
  --f-display: "Carnevalee", Georgia, serif;
  --f-ui: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scala (mobile → desktop) */
  --fs-display: clamp(3.5rem, 2rem + 5vw, 6rem);         /* 56 → 96 */
  --fs-h1: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem);       /* 44 → 72 */
  --fs-h2: clamp(1.875rem, 1.4rem + 1.4vw, 2.5rem);      /* 30 → 40 */
  --fs-h3: clamp(1.5rem, 1.3rem + .6vw, 1.75rem);        /* 24 → 28 */
  --fs-lead: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem); /* 19 → 21 */
  --fs-body: clamp(1rem, .9rem + .35vw, 1.125rem);       /* 16 → 18 */
  --fs-ui: 1rem;                                         /* bottoni L, menu: 16 */
  --fs-ui-s: .9375rem;                                   /* bottoni S, link: 15 */
  --fs-eyebrow: .875rem;                                 /* 14 */
  --fs-small: .875rem;                                   /* 14 */
  --fs-label: .75rem;                                    /* 12 */

  /* Spaziatura lettere: 3 valori */
  --ls-display: .02em;
  --ls-ui: .12em;
  --ls-eyebrow: .16em;

  /* Raggi, spazi, misure */
  --radius-s: 4px;
  --radius-m: 12px;
  --btn-h: 52px;
  --btn-h-s: 44px;
  --space-section: clamp(64px, 8vw, 96px);
  --container: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 76px;

  /* Texture */
  /* trama denim: diagonali del jeans, tono su tono (sostituisce le stelle) */
  --denim:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 5px),
    var(--grain);
  --paper-tex: url("../img/texture-paper.jpg") 0 0 / 600px 600px repeat;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
strong { font-weight: 600; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.navy :focus-visible, .dark :focus-visible, .nav :focus-visible { outline-color: var(--sky); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--sky); color: var(--ink); padding: 10px 16px; font-weight: 600; border-radius: var(--radius-s);
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Superfici: chiaro (paper), carbone (dark), navy ---------- */
.paper, .dark, .navy { position: relative; isolation: isolate; }
.navy { background: var(--denim), var(--navy); color: var(--offwhite); }
.navy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(156, 195, 240, .18), transparent 60%), radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, .45), transparent 60%);
}
.stripes {
  position: relative; height: 42px; z-index: 1;
  background:
    linear-gradient(var(--navy), var(--navy)) left / min(32%, 360px) 100% no-repeat,
    repeating-linear-gradient(180deg, var(--red) 0 6px, var(--offwhite) 6px 12px);
}
.stripes::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: min(32%, 360px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='21'%3E%3Cpath fill='%23f6f4ef' d='M7 3l1 3h3l-2.5 1.8 1 3L7 9 4.5 10.8l1-3L3 6h3z'/%3E%3C/svg%3E") 4px 0 / 28px 21px;
}
.paper { background: var(--paper-tex), var(--offwhite); color: var(--ink); }
.dark { background: var(--ink); color: var(--offwhite); }
.paper::before, .dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .14; mix-blend-mode: multiply;
}
.dark::before { opacity: .3; mix-blend-mode: overlay; }

section { padding-block: var(--space-section); }

/* ==========================================================================
   UI KIT · stili di testo canonici
   ========================================================================== */
/* Display / H1 / H2 / H3 — Carnevalee, sempre maiuscolo */
.t-display { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-display); line-height: .9; letter-spacing: var(--ls-display); text-transform: uppercase; }
.title, .quote p { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h1); line-height: .95; letter-spacing: var(--ls-display); text-transform: uppercase; }
.title--h2, .show__day, .ticket__title {
  font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--ls-display); text-transform: uppercase;
}
.marquee span, .corsi-box__title, .show__title, .ticket__vert, .footer__road {
  font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.05; letter-spacing: var(--ls-display); text-transform: uppercase;
}

/* Eyebrow — Barlow Condensed 14 · rosso su chiaro, sky su scuro */
.eyebrow, .corsi-box__days, .show__month, .bio__sub, .ticket__kicker, .bio__tag {
  font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-eyebrow); line-height: 1.3;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
}
.eyebrow { color: var(--red); margin: 0 0 .9rem; }
.eyebrow--light { color: var(--sky); }

/* Label — Barlow Condensed 12 */
.t-label, .show__meta, .yt-mini__meta strong, .ticket__no, 
/* UI — menu, link, footer: Barlow Condensed 15 */
.t-ui, .corsi-box__where, .footer__social, .link-arrow {
  font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-ui-s); line-height: 1.3;
  letter-spacing: var(--ls-ui); text-transform: uppercase;
}

/* Testo — Barlow */
.lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; }
.lead a { color: var(--red); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.t-small, .show__place, .show__empty, .yt-mini__meta em, .footer__legal { font-family: var(--f-body); font-size: var(--fs-small); line-height: 1.4; letter-spacing: 0; text-transform: none; }

.title { margin: 0 0 1.4rem; color: var(--offwhite); }
.title--ink { color: var(--navy); }

.section-head { text-align: center; max-width: 780px; margin: 0 auto clamp(40px, 6vw, 64px); }
.section-head--left { text-align: left; margin-inline: 0; }
.section-sub { color: var(--gray); }
.section-sub--light { color: var(--on-dark-muted); }
.section-sub--left { text-align: left; }

.rule { display: flex; align-items: center; gap: 14px; color: var(--red); margin: 1.6rem 0; }
.rule::before, .rule::after { content: ""; flex: 1; height: 0; border-top: 2px dashed currentColor; opacity: .55; }
.rule span { font-size: 1.1rem; }

/* Link testuale con freccia: sky su scuro, rosso su chiaro */
.link-arrow { display: inline-block; text-decoration: none; color: var(--red); transition: color .2s; }
.navy .link-arrow, .dark .link-arrow { color: var(--sky); }
.link-arrow:hover { color: var(--ink); }
.navy .link-arrow:hover, .dark .link-arrow:hover { color: var(--offwhite); }

/* ==========================================================================
   UI KIT · bottoni (4 varianti × 2 misure)
   ========================================================================== */
.btn {
  --b: var(--offwhite);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: var(--btn-h); padding: 0 1.6em;
  font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-ui); line-height: 1;
  letter-spacing: var(--ls-ui); text-transform: uppercase; text-decoration: none;
  border: 1.5px solid var(--b); border-radius: var(--radius-s);
  background: var(--b); color: var(--ink);
  transition: background-color .2s, border-color .2s, color .2s, transform .15s;
}
.btn svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.btn:active { transform: scale(.98); }
.btn--sm { min-height: var(--btn-h-s); padding: 0 1.3em; font-size: var(--fs-ui-s); }
/* Primario: azione principale */
.btn--primary { --b: var(--red); background: var(--grain), var(--b); color: var(--white); }
.btn--primary:hover { --b: var(--red-dark); }
/* Chiaro: su fondi scuri */
.btn--light { --b: var(--offwhite); color: var(--ink); }
.btn--light:hover { --b: var(--white); }
/* Navy: su fondi chiari */
.btn--navy { --b: var(--navy); color: var(--offwhite); }
.btn--navy:hover { --b: var(--navy-dark); }
/* verde WhatsApp riconoscibile, testo scuro per il contrasto */
.btn--whatsapp { --b: #25d366; color: var(--ink); }
.btn--whatsapp:hover { --b: #3ee07a; }
/* Ghost: trasparente, prende il colore del contesto */
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: rgba(128, 128, 128, .14); }

/* Bottone icona tondo 44px */
.icon-btn, .arrow, .nav__social a {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--line-dark); color: var(--offwhite);
  transition: background .2s, color .2s, border-color .2s;
}
.icon-btn:hover, .arrow:hover, .nav__social a:hover { background: var(--offwhite); color: var(--ink); border-color: var(--offwhite); }

/* ==========================================================================
   NAV (split, logo al centro)
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
/* vetro scuro su uno strato a parte: un backdrop-filter sul .nav intrappolerebbe il menu mobile (position: fixed) */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--navy);
  border-bottom: 3px solid var(--red);
  transition: background-color .3s, border-color .3s;
}
/* blu pieno in cima alla pagina, vetro quando si scorre */
.nav.is-scrolled::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 60%), rgba(10, 31, 69, .7);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.nav.is-hidden:not(.is-open) { transform: translateY(calc(-100% - 40px)); }
.nav__inner {
  height: 100%; max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter);
  display: flex; align-items: center; position: relative;
}
/* logo sempre visibile, al centro, "appoggiato" sulla barra: sporge sotto il bordo */
.nav__brand {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  width: 132px; z-index: 2; transform-origin: 50% 0;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1.3);
}
.nav__brand img { width: 100%; }
.nav.is-scrolled .nav__brand { transform: translateX(-50%) scale(.78); }

.nav__links { flex: 1; display: flex; align-items: center; justify-content: space-between; }
.nav__group { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__links a:not(.nav__social a, .nav__cta) {
  font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-ui-s); letter-spacing: var(--ls-ui); text-transform: uppercase;
  color: var(--offwhite); text-decoration: none; position: relative; padding: 6px 0;
}
.nav__group > a:not(.nav__cta)::after {
  content: "★"; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%) scale(0);
  font-size: .6rem; color: var(--red); transition: transform .25s ease;
}
.nav__group > a:not(.nav__cta):hover::after { transform: translateX(-50%) scale(1); }
.nav__links .nav__cta { margin-inline: 12px 4px; }

.nav__social { display: flex; gap: 6px; margin-right: 6px; }
.nav__social svg { width: 17px; height: 17px; fill: currentColor; }

.nav__toggle { display: none; }

@media (max-width: 1080px) {
  /* mobile: barra sempre visibile, blu pieno e logo intero anche scorrendo */
  .nav.is-scrolled::before { background: var(--navy); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav.is-hidden:not(.is-open) { transform: none; }
  .nav__brand, .nav.is-scrolled .nav__brand { width: 92px; top: 8px; transform: translateX(-50%); }
  .nav__toggle {
    display: grid; gap: 5px; place-content: center; width: 46px; height: 46px; padding: 0; margin-left: auto;
    background: transparent; border: 0; position: relative; z-index: 2;
  }
  .nav__toggle span:not(.sr-only) { display: block; width: 22px; height: 2px; background: var(--offwhite); transition: transform .3s, opacity .3s; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav__links {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 16px;
    background: var(--denim), var(--navy); padding: 96px 24px 40px;
    clip-path: circle(0% at calc(100% - 40px) 38px); visibility: hidden;
    transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), visibility 0s .6s;
  }
  .nav__group { display: contents; }
  .nav__group > a:not(.nav__cta) { font-family: var(--f-display) !important; font-size: var(--fs-h2) !important; letter-spacing: var(--ls-display) !important; font-weight: 400 !important; }
  .nav__links .nav__cta { margin: 8px 0 0; min-height: var(--btn-h); font-size: var(--fs-ui); }
  .nav__social { order: 9; margin: 14px 0 0; }
  .menu-open, .menu-open body { overflow: hidden; }
  .nav.is-open .nav__links { clip-path: circle(150% at calc(100% - 40px) 38px); visibility: visible; transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
}

/* ---------- Loader (wipe diagonale) ---------- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--grain), var(--red);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, -100% 100%);
  transition: clip-path 1s cubic-bezier(.75, 0, .2, 1), visibility 0s 1s;
}
.loader img { width: 170px; clip-path: ellipse(49.5% 49.5% at 50% 50%); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.is-loaded .loader { clip-path: polygon(200% 0%, 300% 0%, 300% 100%, 100% 100%); visibility: hidden; }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  background: var(--grain), var(--red); color: var(--offwhite); overflow: hidden;
  border-block: 3px solid var(--offwhite); box-shadow: 0 0 0 4px var(--navy);
  position: relative; z-index: 3; margin-block: 4px;
}
.marquee__track {
  display: flex; width: max-content; align-items: center; gap: 28px; padding: 12px 0 16px; /* Carnevalee ha più spazio sopra: testo alzato di 2px */
  animation: marquee 38s linear infinite;
}
.marquee span { white-space: nowrap; }
.marquee i { font-style: normal; color: var(--navy); font-size: 1.1rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   BIO
   ========================================================================== */
/* foto a tutta altezza nella metà sinistra, senza cornice; il testo sta nella colonna destra */
.bio { padding-top: calc(var(--nav-h) + clamp(84px, 9vw, 120px)); min-height: min(100vh, 860px); display: flex; align-items: center; }
.bio__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 100px); align-items: center; }
.bio__photo { position: absolute; left: 0; top: var(--nav-h); bottom: 0; width: 50%; margin: 0; }
.bio__frame { height: 100%; overflow: hidden; position: relative; }
/* la foto ha poco spazio sopra la testa: allineata in alto, senza spostamento verticale */
.bio__frame > img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 0; position: absolute; top: 0; transform-origin: 50% 0; }
.bio__text { grid-column: 2; }
.bio__tag {
  position: absolute; left: 0; bottom: 40px; padding: 8px 18px 8px 16px;
  background: var(--grain), var(--red); color: var(--offwhite);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
  padding-right: 30px;
}
.bio__text .title { margin-bottom: .2rem; }
.bio__sub { color: var(--red); margin: 0; }
.bio__text .rule { color: var(--navy); margin: 1.2rem 0 1.4rem; }
.bio__motto {
  border-left: 4px solid var(--red); padding: 4px 0 4px 18px; font-weight: 500; font-style: italic; color: var(--navy);
}

@media (max-width: 860px) {
  /* mobile: foto da bordo a bordo sopra il testo */
  .bio { display: block; min-height: 0; padding-top: var(--nav-h); }
  .bio__grid { grid-template-columns: 1fr; gap: 36px; }
  .bio__photo { position: relative; top: auto; width: auto; margin-inline: calc(var(--gutter) * -1); }
  .bio__frame { height: auto; aspect-ratio: 4 / 4.4; }
  .bio__text { grid-column: auto; }
  }

/* ==========================================================================
   QUOTE BAND
   ========================================================================== */
.quote-band { text-align: center; padding-bottom: 56px; }
/* contatti + footer = un solo blocco stellato: niente ombra in fondo alla sezione, il footer continua lo stesso fondo */
.quote-band.navy::before { background: radial-gradient(ellipse at 50% 0%, rgba(156, 195, 240, .18), transparent 60%); }
.quote-band__stars, .stars { display: block; color: var(--red); letter-spacing: .6em; margin-bottom: 1.2rem; }
.quote { margin: 0 auto; max-width: 1000px; }
.quote p {
  line-height: 1.02; color: var(--offwhite); margin: 0;
}
.quote .q { font-family: Georgia, serif; color: var(--red); font-size: .9em; line-height: 0; vertical-align: -.05em; margin: 0 .08em; }
.quote .w { display: inline-block; }
.quote-band__contact { max-width: none; margin: 2rem auto 0; color: var(--on-dark-muted); }
/* una sola riga dove c'è spazio; su mobile va a capo */
@media (min-width: 861px) { .quote-band__contact { white-space: nowrap; } }
/* mobile: la citazione sta in massimo 3 righe, la dimensione segue la larghezza */
@media (max-width: 700px) { .quote p { font-size: min(var(--fs-h1), calc((100vw - 2 * var(--gutter)) / 12.6)); } }
.quote-band__contact a { color: var(--sky); font-weight: 600; text-underline-offset: 3px; }
.quote-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 1.6rem; }

/* ==========================================================================
   SERATE · TICKET
   ========================================================================== */
.ticket {
  --notch: 18px;
  display: grid; grid-template-columns: 1fr 180px; max-width: 980px; margin: 0 auto;
  background: var(--paper-tex), var(--offwhite); color: var(--ink); border-radius: var(--radius-m); position: relative;
  -webkit-mask:
    radial-gradient(circle var(--notch) at calc(100% - 180px) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - 180px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at calc(100% - 180px) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - 180px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.ticket::before {
  content: ""; position: absolute; inset: 12px; border: 1.5px solid var(--line); border-radius: var(--radius-s); pointer-events: none;
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 192px), transparent calc(100% - 192px), transparent calc(100% - 156px), #000 calc(100% - 156px));
  mask: linear-gradient(90deg, #000 calc(100% - 192px), transparent calc(100% - 192px), transparent calc(100% - 156px), #000 calc(100% - 156px));
}
.ticket__main { padding: clamp(32px, 5vw, 56px); }
.ticket__kicker { color: var(--red); margin-bottom: .6rem; }
.ticket__title { margin: 0 0 1rem; }
.ticket__title .sep { font-family: var(--f-body); font-size: .45em; color: var(--red); vertical-align: .35em; margin: 0 .2em; }
.ticket__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.ticket__no { white-space: nowrap; }
.ticket__stub {
  border-left: 3px dashed rgba(22, 24, 29, .45); background: var(--grain), var(--red); color: var(--offwhite);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 30px 12px;
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}
.ticket__star { font-size: 2.4rem; color: var(--offwhite); line-height: 1; }
.ticket__vert { writing-mode: vertical-rl; transform: rotate(180deg); }

@media (max-width: 700px) {
  .ticket { grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
  .ticket::before { -webkit-mask: none; mask: none; }
  .ticket__stub { border-left: 0; border-top: 3px dashed rgba(22, 24, 29, .45); flex-direction: row; gap: 14px; padding: 16px 24px; border-radius: 0 0 var(--radius-m) var(--radius-m); }
  .ticket__vert { writing-mode: horizontal-tb; transform: none; }
  .ticket__star { font-size: 1.6rem; }
  /* titolo su una riga: la dimensione segue la larghezza dello schermo */
  .ticket__title { font-size: min(30px, calc((100vw - 96px) / 14.6)); white-space: nowrap; }
}

/* ---------- Prossime serate (dal calendario) ---------- */
.next-shows { max-width: 980px; margin: 40px auto 0; }
.next-shows__title { text-align: center; }
.next-shows__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.show {
  display: grid; grid-template-columns: 84px 1fr; min-height: 132px; overflow: hidden;
  border-radius: var(--radius-m); background: var(--paper-tex), var(--offwhite);
}
.show__date { display: grid; place-content: center; text-align: center; gap: 4px; background: var(--grain), var(--red); color: var(--white); padding: 12px 6px; }
.show__day { line-height: .9; }
.show__month { letter-spacing: var(--ls-ui); }
.show__info { padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.show__meta { color: var(--red); }
.show__title { color: var(--navy); overflow-wrap: anywhere; }
.show__place { color: var(--gray); }
.show.is-loading { background: linear-gradient(90deg, rgba(246, 244, 239, .04), rgba(246, 244, 239, .1), rgba(246, 244, 239, .04)) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
/* Fichas: entrano scivolando una dopo l'altra come biglietti di un concerto, inclinate, e si raddrizzano */
.next-shows__list { overflow-x: clip; }
.show--ticket { opacity: 0; transform: translateX(-120%) rotate(-7deg); }
.show--ticket.is-in { animation: ticket-in .9s cubic-bezier(.2, .85, .25, 1.12) calc(var(--i, 0) * 200ms) both; }
@keyframes ticket-in {
  0% { opacity: 0; transform: translateX(-120%) rotate(-7deg); }
  30% { opacity: 1; }
  75% { transform: translateX(2%) rotate(1.2deg); }
  100% { opacity: 1; transform: none; }
}
.show__empty { grid-column: 1 / -1; text-align: center; color: var(--on-dark-muted); margin: 0; }
@media (max-width: 860px) { .next-shows__list { grid-template-columns: 1fr; } .show { min-height: 104px; } }


/* ---------- Video live come sfondo di Resident DJ ---------- */
.resident { background: var(--ink); overflow: hidden; }
.resident__bg { position: absolute; inset: 0; z-index: -2; }
.resident__bg video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
.resident__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 24, 29, .8) 0%, rgba(22, 24, 29, .5) 35%, rgba(22, 24, 29, .5) 70%, rgba(22, 24, 29, .85) 100%),
    radial-gradient(ellipse at center, rgba(14, 42, 92, .2), rgba(22, 24, 29, .45) 80%);
}

/* video precedenti sotto il video principale */
.news__more { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.yt-mini { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; }
.yt-mini__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--ink); border-radius: var(--radius-s); transition: transform .25s; }
.yt-mini__thumb img { width: 100%; height: 100%; object-fit: cover; }
.yt-mini__thumb i { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--grain), var(--red); box-shadow: 0 0 0 3px rgba(246, 244, 239, .5); }
.yt-mini__thumb i::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.yt-mini:hover .yt-mini__thumb, .yt-mini:focus-visible .yt-mini__thumb { transform: translate(-2px, -2px); }
.yt-mini.is-active .yt-mini__thumb { border-color: var(--red); }
.yt-mini__meta { display: block; margin-top: 10px; color: var(--ink); }
.yt-mini__meta strong { display: block; color: var(--red); }


/* ---------- Embeds ---------- */
.embed { position: relative; border-radius: var(--radius-m); overflow: hidden; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed--calendar { max-width: 980px; margin: 32px auto 0; height: 600px; background: var(--offwhite); border: 2px solid var(--navy); }
.embed--video { aspect-ratio: 16 / 9; background: #000; }
.calendar-close { display: flex; margin: 16px auto 0; }
.calendar-close[hidden] { display: none; }

.video-facade { all: unset; position: absolute; inset: 0; cursor: pointer; display: block; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s; filter: saturate(.9); }
.video-facade:hover img { transform: scale(1.04); filter: saturate(1.1); }
.video-facade:focus-visible { outline: 3px solid var(--sky); outline-offset: -6px; }
.video-facade__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%; background: var(--grain), var(--red); display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(246, 244, 239, .35); transition: transform .25s;
}
.video-facade__play svg { width: 40px; fill: #fff; margin-left: 5px; }
.video-facade:hover .video-facade__play { transform: translate(-50%, -50%) scale(1.08); }


/* ==========================================================================
   RESIDENT
   ========================================================================== */
.venues {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: clamp(20px, 3.5vw, 56px);
}
.venue { flex: 1 1 0; min-width: 0; height: clamp(110px, 12vw, 160px); display: flex; align-items: center; justify-content: center; transition: transform .35s cubic-bezier(.2, .8, .2, 1.2); }
.venue:hover { transform: scale(1.08); }
.venue img {
  max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain;
}
.venue--wide { flex-grow: 1.5; }
/* logo completo con i suoi raggi: più grande del riquadro per compensare il margine */
.venue--full img { max-height: none; max-width: none; height: 125%; width: auto; }
/* filetto bianco intorno al bollo Country Tour */
.venue--outline img { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
@media (max-width: 760px) {
  .venues { flex-wrap: wrap; gap: 26px 20px; }
  .venue { flex: 0 0 calc(33.333% - 14px); height: 96px; }
  .venue--full img { height: 115%; }
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery { overflow: hidden; }
.gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.gallery__head .section-head { margin-bottom: 36px; }
.gallery__arrows { display: flex; gap: 10px; margin-bottom: 44px; }
.arrow svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.gallery__track {
  list-style: none; margin: 0; display: flex; gap: clamp(18px, 3vw, 36px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 20px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) 30px;
  scrollbar-width: none; cursor: grab;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.gallery__track li { flex: 0 0 auto; scroll-snap-align: center; }
.polaroid {
  all: unset; box-sizing: border-box; display: block; cursor: zoom-in;
  --pw: clamp(270px, 42vw, 520px);
  width: var(--pw); background: #fff; padding: 12px 12px 46px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1.2);
}
.gallery__track li:nth-child(3n+1) .polaroid { transform: rotate(-2deg); }
.gallery__track li:nth-child(3n+2) .polaroid { transform: rotate(1.5deg) translateY(10px); }
.gallery__track li:nth-child(3n) .polaroid { transform: rotate(-.5deg); }
.gallery__track li .polaroid:hover { transform: rotate(0) scale(1.03); }
.polaroid:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }
/* foto verticale: stessa altezza delle altre, cornice più stretta */
.polaroid--tall { width: calc((var(--pw) - 24px) * 9 / 16 * 3 / 4 + 24px); }
.polaroid--tall img { aspect-ratio: 3 / 4 !important; }
.polaroid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); max-height: 90vh; overflow: visible; }
.lightbox::backdrop { background: rgba(22, 24, 29, .92); backdrop-filter: blur(4px); }
.lightbox img { max-height: 86vh; width: auto; border: 10px solid #fff; }
.lightbox__close {
  position: absolute; top: -18px; right: -18px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--grain), var(--red); color: #fff; border: 2px solid #fff; font-size: 1.8rem; line-height: 1;
}

/* ==========================================================================
   NEWS
   ========================================================================== */

/* ==========================================================================
   GLORIDAY
   ========================================================================== */

/* box corsi dentro il blocco Gloriday */
.corsi-box {
  margin: 1.6rem 0 1.8rem; padding: 18px 20px;
  border: 1.5px solid var(--line); border-radius: var(--radius-m); background: rgba(255, 255, 255, .55);
}
.corsi-box__title { margin: 0 0 .3rem; color: var(--navy); }
.corsi-box__days { margin: 0 0 .9rem; color: var(--red); }
.corsi-box__where { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); line-height: 1.35; transition: color .2s; }
.corsi-box__where svg { width: 28px; height: 28px; fill: var(--red); flex: none; }
.corsi-box__where:hover { color: var(--red); }
.gloriday__logos { display: flex; justify-content: center; gap: 24px; margin-bottom: 18px; }
.gloriday__logos img {
  width: clamp(120px, 15vw, 180px);
}
.gloriday__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.gloriday__yt { margin-top: 22px; }
.gloriday__text .btn { margin-top: .6rem; }
@media (max-width: 860px) { .gloriday__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--denim), var(--navy); color: var(--on-dark-muted); padding: 8px 0 40px; text-align: center; }
.footer__inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; }
.footer__brand img { width: 130px; clip-path: ellipse(49.5% 49.5% at 50% 50%); }
.footer__road { color: var(--offwhite); margin: 0; }
.footer__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; align-items: center; max-width: 100%; }
.footer__social a { text-decoration: none; color: var(--sky); }
.footer__social a:hover { color: var(--offwhite); }
.footer__social span { color: var(--red); font-size: .7rem; }
.footer__legal { margin: 10px 0 0; }
.footer__legal a { color: inherit; }

/* ---------- Contatti + footer: un blocco rosso alto quanto lo schermo (sotto la barra),
   con il paesaggio della bandiera (stelle, cactus, Monument Valley) disegnato in bordeaux scuro ---------- */
.finale {
  position: relative; isolation: isolate; background: var(--grain), var(--red); color: var(--offwhite);
  min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 4vh, 44px);
  padding: clamp(24px, 5vh, 56px) 0;
}
.finale::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #3d0306;
  -webkit-mask: url("../img/paesaggio.png") center bottom / cover no-repeat;
  mask: url("../img/paesaggio.png") center bottom / cover no-repeat;
  opacity: .85;
}
.finale .quote-band, .finale .footer { background: none; padding: 0; }
.finale .quote-band__stars { margin-bottom: clamp(8px, 2vh, 18px); }
.finale .quote p { font-size: min(var(--fs-h1), 7.4vh); }
.finale .quote-band__contact { margin-top: clamp(10px, 2.2vh, 24px); }
.finale .quote-band__actions { margin-top: clamp(10px, 2vh, 22px); }
.finale .footer__inner { gap: clamp(6px, 1.2vh, 12px); }
.finale .footer__brand img { width: clamp(72px, 12vh, 120px); }
/* copyright attaccato al fondo del blocco; il padding inferiore gli lascia spazio */
.finale { padding-bottom: calc(clamp(24px, 5vh, 56px) + 2.4em); }
.finale .footer__legal { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(10px, 2vh, 18px); margin: 0; }
.finale .quote-band__stars, .finale .quote .q { color: var(--offwhite); }
.finale .quote-band__contact, .finale .footer, .finale .footer__legal { color: rgba(246, 244, 239, .9); }
.finale .btn--primary { --b: var(--navy); color: var(--offwhite); }
.finale .btn--primary:hover { --b: var(--navy-dark); }
.finale .footer__social a { color: var(--offwhite); }
.finale .footer__social a:hover { color: var(--sky); }
.finale .footer__social span { color: var(--offwhite); }
.finale :focus-visible { outline-color: var(--offwhite); }
@media (max-width: 700px) {
  /* mobile: il paesaggio intero in fondo, largo quanto lo schermo; bottoni più compatti */
  .finale::before { -webkit-mask-size: 100% auto; mask-size: 100% auto; }
  .finale .quote p { font-size: min(calc((100vw - 2 * var(--gutter)) / 12.6), 4.2vh); }
  .finale .quote-band__actions { gap: 10px; }
  .finale .quote-band__actions .btn { min-height: var(--btn-h-s); }
}

/* ==========================================================================
   MOTION
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
.venue.reveal.is-visible:hover { transform: scale(1.08); }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .js .loader { display: none; }
}