/* ============================================================
   JIWA — Component styles
   Navbar, Footer, Cards (con varianti), Buttons, Overlay,
   Player Soundscape, e tutti i pattern riusabili.
   ============================================================ */

/* ---------- NAVBAR ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
  background: rgba(10, 8, 4, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--border-dim);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) var(--container-padding);
  max-width: var(--container-max);
  margin: 0 auto;
}
.navbar__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.05em;
  color: var(--color-ocra-light);
  text-decoration: none;
}
.navbar__logo:hover { opacity: 0.8; }
.navbar__menu {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}
.navbar__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-testo);
  text-decoration: none;
  transition: color var(--t-fast);
}
.navbar__link:hover { color: var(--color-fucsia); }
.navbar__link[aria-current="page"] { color: var(--color-fucsia); }
.navbar__lang {
  display: flex;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--color-testo-dim);
}
.navbar__lang a {
  color: inherit;
  text-decoration: none;
  padding: 2px 4px;
}
.navbar__lang a.is-active {
  color: var(--color-ocra-light);
  border-bottom: 1px solid var(--color-ocra-light);
}
.navbar__lang-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  padding: 2px 4px;
}

/* Mobile navbar toggle */
.navbar__toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--color-ocra-light);
  font-size: 24px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .navbar__menu { display: none; }
  .navbar__toggle { display: block; }
  .navbar__menu.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-nero);
    padding: var(--space-4) var(--container-padding);
    border-bottom: var(--border-dim);
  }
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--color-nero);
  border-top: var(--border-dim);
  padding: var(--space-7) var(--container-padding) var(--space-5);
  margin-top: var(--space-8);
}
.footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .footer__inner { grid-template-columns: 1fr; }
}
.footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-verde);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.footer__col ul li {
  margin-bottom: var(--space-2);
}
.footer__col a {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-testo);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer__col a:hover { color: var(--color-fucsia); }
.footer__bottom {
  max-width: var(--container-max);
  margin: var(--space-5) auto 0;
  padding-top: var(--space-3);
  border-top: var(--border-dim);
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--color-testo-dim);
}

/* ---------- HERO ---------- */
.hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-9) var(--container-padding) var(--space-7);
  position: relative;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(80px, 18vw, 240px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--color-ocra-light);
  cursor: pointer;
  transition: opacity var(--t-base);
}
.hero__title:hover { opacity: 0.85; }
.hero__subtitle {
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-testo-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- CARD OPERA (varianti) ---------- */
/* Pattern base, condiviso */
.card-opera {
  position: relative;
  background: var(--bg-box-medium);
  border: var(--border-thin);
  padding: var(--space-4);
  transition: border-color var(--t-fast), background var(--t-fast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.card-opera:hover {
  border-color: var(--color-fucsia);
  background: var(--bg-box-strong);
}
.card-opera__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: var(--color-fucsia);
  position: relative;
}
.card-opera__number::before {
  content: attr(data-number);
  position: absolute;
  top: 2px;
  left: 2px;
  opacity: 0.25;
}
.card-opera__tags {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.card-opera__tag {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-verde);
  text-transform: uppercase;
}
.card-opera__meta {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  color: var(--color-testo-dim);
  text-transform: uppercase;
}
.card-opera__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--color-ocra-light);
  transition: color var(--t-fast);
}
.card-opera:hover .card-opera__title { color: var(--color-fucsia); }
.card-opera__desc {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
  color: var(--color-testo);
}
.card-opera__divider {
  width: 40px;
  height: 1px;
  background: var(--color-fucsia);
  margin-top: auto;
}
.card-opera__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--color-fucsia);
  text-transform: uppercase;
}

/* Variante DEFAULT — griglia BioDATA */
.card-opera--default {
  min-height: 280px;
}

/* Variante COMPACT — carousel anteprima Project */
.card-opera--compact {
  min-height: 200px;
  padding: var(--space-3);
}
.card-opera--compact .card-opera__number { font-size: 36px; }
.card-opera--compact .card-opera__title { font-size: 22px; }
.card-opera--compact .card-opera__desc { display: none; }

/* Variante FEATURED — hero opera principale */
.card-opera--featured {
  min-height: 480px;
  padding: var(--space-6);
  background: var(--bg-box-strong);
  border-color: var(--color-ocra-light);
}
.card-opera--featured .card-opera__number { font-size: 80px; }
.card-opera--featured .card-opera__title { font-size: var(--fs-h2); }
.card-opera--featured .card-opera__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
}
.card-opera--featured .card-opera__divider {
  width: 80px;
  margin-top: var(--space-4);
}

/* Variante INLINE — liste compatte */
.card-opera--inline {
  flex-direction: row;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  min-height: 0;
  background: transparent;
  border: 0;
  border-bottom: var(--border-dim);
}
.card-opera--inline:hover {
  background: var(--bg-box-soft);
}
.card-opera--inline .card-opera__number {
  font-size: 24px;
  flex: 0 0 60px;
}
.card-opera--inline .card-opera__title { font-size: 18px; }
.card-opera--inline .card-opera__desc { display: none; }
.card-opera--inline .card-opera__divider { display: none; }

/* ---------- CARD RACCOLTA (poesia/foto/racconto) ---------- */
.card-raccolta {
  position: relative;
  background: var(--bg-box-medium);
  border: var(--border-thin);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 260px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.card-raccolta:hover {
  border-color: var(--color-fucsia);
  background: var(--bg-box-strong);
}
.card-raccolta__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.card-raccolta__numeral {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 0.9;
  color: var(--color-fucsia);
}
.card-raccolta__tag {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-verde);
  text-transform: uppercase;
}
.card-raccolta__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: var(--lh-tight);
  color: var(--color-ocra-light);
}
.card-raccolta__desc {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
  color: var(--color-testo);
}
.card-raccolta__footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-raccolta__cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--color-fucsia);
  text-transform: uppercase;
}
.card-raccolta__meta {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  color: var(--color-testo-dim);
}

/* ---------- CARD RACCONTO (lista flat) ---------- */
.card-racconto {
  background: var(--bg-box-medium);
  border: var(--border-thin);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  min-height: 140px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.card-racconto:hover {
  border-color: var(--color-fucsia);
  background: var(--bg-box-strong);
}
.card-racconto__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-fucsia);
  letter-spacing: 0.05em;
}
.card-racconto__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: var(--lh-tight);
  color: var(--color-ocra-light);
}
.card-racconto__source {
  margin-top: auto;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-testo-dim);
  text-transform: uppercase;
}

/* ---------- BANNER DEPOSITI (home, intera sezione cliccabile) ---------- */
.banner-depositi {
  position: relative;
  margin: var(--space-7) 0;
  padding: var(--space-6) var(--container-padding);
  background: linear-gradient(135deg, rgba(176, 137, 32, 0.15), rgba(229, 53, 53, 0.1));
  border-top: var(--border-thin-strong);
  border-bottom: var(--border-thin-strong);
  cursor: pointer;
  transition: background var(--t-base);
}
.banner-depositi:hover {
  background: linear-gradient(135deg, rgba(176, 137, 32, 0.22), rgba(229, 53, 53, 0.18));
}
/* Cover link: copre tutta la sezione, sotto i CTA */
.banner-depositi__cover-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
}
.banner-depositi__inner {
  position: relative;
  z-index: 1;
  pointer-events: none; /* la sezione la gestisce il cover-link */
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: center;
}
/* CTA interni: pointer-events riattivati + z-index sopra il cover */
.banner-depositi__actions a,
.banner-depositi__inner a {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
@media (max-width: 768px) {
  .banner-depositi__inner { grid-template-columns: 1fr; text-align: center; }
}
.banner-depositi__label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-verde);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.banner-depositi__tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 44px);
  line-height: var(--lh-tight);
  color: var(--color-ocra-light);
  margin-bottom: var(--space-2);
}
.banner-depositi__sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-testo);
}
.banner-depositi__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-end;
}
@media (max-width: 768px) {
  .banner-depositi__actions { align-items: center; }
}

/* ---------- BUTTON / CTA primary ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-fucsia);
  color: var(--color-nero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-fucsia);
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-primary:hover {
  background: transparent;
  color: var(--color-fucsia);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  color: var(--color-ocra-light);
  border: 1px solid var(--color-ocra-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-secondary:hover {
  background: var(--color-ocra-light);
  color: var(--color-nero);
}

/* ---------- SECTION HEADER ---------- */
.section-header {
  margin-bottom: var(--space-6);
}
.section-header__label {
  margin-bottom: var(--space-3);
}
.section-header__title {
  margin-bottom: var(--space-2);
}
.section-header__meta {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  color: var(--color-testo-dim);
  text-transform: uppercase;
}

/* ---------- GRID UTILITIES ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- SECTION CONTAINER ---------- */
section {
  padding: var(--section-padding-y) 0;
}
section > .container {
  position: relative;
}

/* ---------- DECORATIVE asterisco floating ---------- */
.deco-asterisco--floating {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  pointer-events: none;
}

/* ---------- PLAYER SOUNDSCAPE (placeholder, full impl in JS module) ---------- */
.soundscape-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-soundscape-player);
  background: rgba(10, 8, 4, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: var(--border-thin-strong);
  padding: var(--space-3) var(--container-padding);
  display: none; /* shown only on Pennichelle pages */
}
.soundscape-player.is-active { display: block; }
.soundscape-player__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: var(--space-4);
  align-items: center;
}
.soundscape-player__label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-verde);
  text-transform: uppercase;
}
.soundscape-player__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-fucsia);
  letter-spacing: var(--ls-tight);
}
.soundscape-player__controls {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.soundscape-player__btn {
  color: var(--color-ocra-light);
  font-size: 16px;
  padding: var(--space-2);
}
.soundscape-player__indicator {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.15em;
  color: var(--color-testo-dim);
}

/* ---------- OVERLAY ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(10, 8, 4, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-5);
  overflow-y: auto;
}
.overlay.is-open {
  display: flex;
}
.overlay__close {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-fucsia);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.25em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-nero);
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--color-fucsia);
  cursor: pointer;
  z-index: 10;
}
.overlay__close::after {
  content: "×";
  font-size: 24px;
  line-height: 1;
  margin-left: var(--space-2);
}
.overlay__close:hover {
  background: var(--color-fucsia);
  color: var(--color-nero);
}
.overlay__panel {
  max-width: 1100px;
  width: 100%;
  margin: var(--space-7) auto;
  background: var(--bg-box-strong);
  border: var(--border-thin-strong);
  padding: var(--space-6);
}
.overlay__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.overlay__header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  padding-bottom: var(--space-4);
  border-bottom: var(--border-dim);
}
.overlay__media {
  position: relative;
  width: 100%;
  background: var(--bg-img-placeholder);
  border: var(--border-thin);
  min-height: 200px;
}
.overlay__media iframe,
.overlay__media video,
.overlay__media audio {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.overlay__media audio {
  aspect-ratio: auto;
  height: 60px;
}
.overlay__media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-testo-dim);
  text-transform: uppercase;
}
.overlay__body {
  max-width: 720px;
}
.overlay__links {
  padding-top: var(--space-4);
  border-top: var(--border-dim);
}

/* ---------- READING BOX (poesia singola) ---------- */
.reading-box {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg-box-medium);
  border: var(--border-thin);
  padding: var(--space-7) var(--space-6);
  position: relative;
}
.reading-box__label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-verde);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.reading-box__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--color-fucsia);
  margin-bottom: var(--space-4);
}
.reading-box__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-testo);
  white-space: pre-wrap;
}

/* ---------- LED WALL (Project, carousel verticale 3 video) ---------- */
.led-wall {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-5);
}
.led-wall__arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-ocra-light);
  background: transparent;
  border: var(--border-thin);
  padding: var(--space-3) 0;
  transition: background var(--t-fast), color var(--t-fast);
  cursor: pointer;
}
.led-wall__arrow:hover {
  background: var(--color-ocra-light);
  color: var(--color-nero);
}
.led-wall__panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 768px) {
  .led-wall__panels { grid-template-columns: 1fr; }
}
.led-wall__panel {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-img-placeholder);
  border: var(--border-thin);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.led-wall__panel:hover {
  border-color: var(--color-fucsia);
  transform: translateY(-2px);
}
.led-wall__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background-image:
    linear-gradient(45deg, rgba(138, 120, 72, 0.08) 25%, transparent 25%, transparent 75%, rgba(138, 120, 72, 0.08) 75%),
    linear-gradient(45deg, rgba(138, 120, 72, 0.08) 25%, transparent 25%, transparent 75%, rgba(138, 120, 72, 0.08) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}
.led-wall__play {
  font-size: 40px;
  color: var(--color-fucsia);
  line-height: 1;
}
.led-wall__panel:hover .led-wall__play {
  transform: scale(1.1);
  transition: transform var(--t-fast);
}
.led-wall__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--color-ocra-light);
  text-transform: uppercase;
}
.led-wall__caption {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-testo-dim);
  text-transform: uppercase;
}

/* ---------- INTRO VIDEO OVERLAY (home) ---------- */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-nero);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease-out;
}
.intro-overlay.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.intro-overlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-overlay__skip {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: rgba(10, 8, 4, 0.7);
  color: var(--color-fucsia);
  border: 1px solid var(--color-fucsia);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.intro-overlay__skip:hover {
  background: var(--color-fucsia);
  color: var(--color-nero);
}
.intro-overlay__play {
  position: absolute;
  background: var(--color-fucsia);
  color: var(--color-nero);
  border: 0;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.25em;
  cursor: pointer;
}

/* ---------- MUTE TOGGLE (navbar) ---------- */
.navbar__mute {
  background: transparent;
  border: 1px solid var(--color-testo-dim);
  color: var(--color-testo-dim);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.15em;
  padding: 4px 8px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.navbar__mute:hover {
  color: var(--color-ocra-light);
  border-color: var(--color-ocra-light);
}
.navbar__mute[aria-pressed="false"] {
  color: var(--color-ocra-light);
  border-color: var(--color-ocra-light);
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-verde);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}