.settimana,
.chi,
.supporto,
.saluti {
  width: min(100%, calc(var(--max-larghezza) + var(--margine) * 2));
  margin-inline: auto;
  padding-inline: var(--margine);
  padding-block: clamp(var(--passo-8), 8vh, var(--passo-12));
}

.chi__corpo > .sezione__occhiello,
.saluti__social > .sezione__occhiello { margin: 0; }

.chi__corpo > .sezione__titolo,
.saluti__social > .sezione__titolo { margin-block: var(--passo-2) var(--passo-3); }

.saluti__social > .sezione__testo { margin: 0; max-width: 52ch; }

.settimana {
  position: relative;

  isolation: isolate;
}

@media (min-width: 900px) {
  .settimana__testa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    column-gap: var(--passo-6);
    align-items: end;
    max-width: none;
  }

  .settimana__testa .sezione__occhiello { grid-column: 1; grid-row: 1; }
  .settimana__testa .sezione__titolo    { grid-column: 1; grid-row: 2; }

  .settimana__testa .sezione__testo {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    max-width: none;
  }
}

.settimana__sfondo {
  position: absolute;
  z-index: -1;
  top: 0;
  inset-inline: 0;
  height: min(100%, max(36rem, 72vw));
  overflow: hidden;
  pointer-events: none;

  -webkit-mask-image: radial-gradient(closest-side at 50% 42%, rgba(0, 0, 0, 1) 42%, rgba(0, 0, 0, 0.6) 72%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(closest-side at 50% 42%, rgba(0, 0, 0, 1) 42%, rgba(0, 0, 0, 0.6) 72%, rgba(0, 0, 0, 0) 100%);
}

.settimana__sfondo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuoco, 50% 50%);
  opacity: var(--intensita, 0.3);

  filter: brightness(1.25) saturate(1.05);
}

.settimana__sfondo.con-immagine::before {
  --scrim-bordo: color-mix(in srgb, var(--fondo) clamp(0%, calc(100% - 15.3% / var(--intensita, 0.3)), 100%), transparent);
  --scrim-mezzo: color-mix(in srgb, var(--fondo) clamp(0%, calc(100% - 41.5% / var(--intensita, 0.3)), 100%), transparent);
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    var(--scrim-bordo) 0,
    var(--scrim-bordo) var(--scrim-alto, 20rem),
    var(--scrim-mezzo) calc(var(--scrim-alto, 20rem) + 10rem),
    var(--scrim-mezzo) calc(100% - 12rem),
    var(--scrim-bordo) calc(100% - 7rem),
    var(--scrim-bordo) 100%
  );
}

@media (min-width: 900px) {
  .settimana__sfondo.con-immagine::before { --scrim-alto: 13rem; }
}

.settimana__sfondo.con-immagine::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  var(--linea) 0 1px, rgba(0, 0, 0, 0) 1px 72px),
    repeating-linear-gradient(to bottom, var(--linea) 0 1px, rgba(0, 0, 0, 0) 1px 72px);
  opacity: 0.7;
}

.nastro {
  display: flex;
  gap: var(--passo);
}

.nastro__giorno {
  --pad: clamp(10px, 1.05vw, 18px);
  position: relative;

  isolation: isolate;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 3.75rem;
  min-height: clamp(21rem, 28vw, 26rem);
  padding: var(--pad);
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);

  background-color: color-mix(in srgb, var(--fondo-2) 80%, transparent);
  transition:
    border-color var(--durata) var(--curva),
    box-shadow   var(--durata) var(--curva);
}

@media (min-width: 1100px) {
  .nastro:not(:has(.is-diretta)) .nastro__giorno { min-height: 12rem; }
}

.nastro__giorno.is-diretta {
  flex-grow: 4;
  min-width: 0;
  border-color: var(--linea-forte);
  background-color: var(--fondo-2);
}

.nastro__giorno.is-diretta:not(.con-immagine) {
  background-image:
    linear-gradient(to bottom, color-mix(in srgb, var(--fondo-2) 84%, transparent) 0%, color-mix(in srgb, var(--fondo-2) 22%, transparent) 52%, color-mix(in srgb, var(--fondo-2) 50%, transparent) 100%),
    radial-gradient(150% 55% at 50% 100%, color-mix(in srgb, var(--viola) 30%, transparent), color-mix(in srgb, var(--viola) 0%, transparent) 72%),
    repeating-linear-gradient(to right,  var(--linea) 0 1px, rgba(0, 0, 0, 0) 1px 24px),
    repeating-linear-gradient(to bottom, var(--linea) 0 1px, rgba(0, 0, 0, 0) 1px 24px),
    url("../../img/copertina.webp");
  background-size: auto, auto, auto, auto, cover;
  background-position: 0 0, 0 0, 0 0, 0 0, var(--panorama, 50%) 100%;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
}

.nastro__giorno[data-giorno="1"] { --panorama: 0%; }
.nastro__giorno[data-giorno="2"] { --panorama: 16.6%; }
.nastro__giorno[data-giorno="3"] { --panorama: 33.3%; }
.nastro__giorno[data-giorno="4"] { --panorama: 50%; }
.nastro__giorno[data-giorno="5"] { --panorama: 66.6%; }
.nastro__giorno[data-giorno="6"] { --panorama: 83.3%; }
.nastro__giorno[data-giorno="0"] { --panorama: 100%; }

.nastro__filigrana {
  position: absolute;
  z-index: -1;
  top: calc(var(--pad) + 3.5rem);
  right: calc(var(--pad) * 0.6);
  writing-mode: vertical-rl;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 72%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 72%);
  color: transparent;
  font-family: var(--font-titolo);
  font-size: clamp(3.5rem, 2rem + 3.4vw, 6.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--viola-chiaro) 30%, transparent);
  pointer-events: none;
  user-select: none;
}

.nastro__sfondo {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--fuoco, 50% 50%);
  transition: scale var(--durata-lunga) var(--curva);
}

.nastro__giorno.con-immagine::before,
.evento.con-immagine .evento__manifesto::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--fondo) calc(var(--velo, 0.6) * 12%), transparent) 0%,
    color-mix(in srgb, var(--fondo) calc(var(--velo, 0.6) * 22%), transparent) 45%,
    color-mix(in srgb, var(--fondo) calc(var(--velo, 0.6) * 80%), transparent) 100%
  );
}

.nastro__giorno::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background-color: var(--magenta);
  opacity: 0;
  transition: opacity var(--durata) var(--curva);
}

.nastro__giorno.is-oggi::after { opacity: 1; }

.nastro__giorno.ha-evento { border-color: color-mix(in srgb, var(--ciano) 45%, transparent); }

.nastro__giorno.is-prossima,
.evento.is-prossima { --luce: var(--viola); }

.nastro__giorno.is-in-onda,
.evento.is-in-onda { --luce: var(--live); }

.nastro__giorno.is-prossima,
.nastro__giorno.is-in-onda,
.evento.is-prossima,
.evento.is-in-onda {
  border-color: var(--luce);
  box-shadow: 0 0 0 1px var(--luce), 0 0 22px color-mix(in srgb, var(--luce) 40%, transparent);
  animation: settimana-respiro 3.6s var(--curva) infinite;
}

@keyframes settimana-respiro {
  50% { box-shadow: 0 0 0 1px var(--luce), 0 0 40px color-mix(in srgb, var(--luce) 62%, transparent); }
}

@media (hover: hover) {
  .nastro__giorno.is-diretta:hover .nastro__sfondo { scale: 1.045; }

  .nastro__giorno.is-diretta:not(.is-prossima):not(.is-in-onda):hover {
    border-color: color-mix(in srgb, var(--viola-chiaro) 55%, transparent);
  }
}

.nastro__testa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.nastro__targa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--passo);
  margin: 0;
  color: var(--testo-medio);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.nastro__abbr { color: var(--testo); }

.con-immagine .nastro__targa {
  padding: 3px 7px;
  border-radius: var(--raggio-s);
  background-color: color-mix(in srgb, var(--fondo-2) 92%, transparent);
}

.is-oggi .nastro__abbr { color: var(--magenta); }

.nastro__data:empty { display: none; }

.nastro__nome {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nastro__segni {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 22px;
  margin: 0;
}

.segno {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: var(--raggio-pill);
  background-color: color-mix(in srgb, var(--fondo-2) 92%, transparent);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.segno--oggi   { color: var(--magenta); }
.segno--evento { color: var(--ciano); }
.segno--onda   { color: var(--live); }

.segno--prossima {
  border-color: var(--viola);
  background-color: var(--viola);
  color: var(--testo);
}

.segno .spia { --spia-d: 7px; }

.nastro__corpo {
  position: relative;

  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--passo-2);
}

.nastro__giorno.is-diretta .nastro__corpo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: calc(var(--passo-4) * -1) calc(var(--pad) * -1);
  inset-inline: calc(var(--pad) * -1);
  background-image: linear-gradient(
    to top,
    var(--velatura) 0%,
    var(--velatura) calc(100% - var(--passo-4) - var(--passo-2)),
    color-mix(in srgb, var(--fondo) 0%, transparent) 100%
  );
  --velatura: color-mix(in srgb, var(--fondo-2) 86%, transparent);
}

.nastro__giorno.con-immagine .nastro__corpo::before {
  --velatura: color-mix(in srgb, var(--fondo) calc(80% + var(--velo, 0.6) * 18%), transparent);
}

.nastro__quando {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--passo);
  margin: 0;
}

@media (min-width: 1100px) {
  .nastro__giorno.is-diretta .nastro__quando {
    flex-direction: column;
    align-items: flex-start;
  }
}

.nastro__tag {
  color: var(--ciano);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
}

.nastro__orario {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 4px;
  color: var(--testo);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  line-height: 1.15;
}

.nastro__ora {
  color: var(--testo);
  font-size: clamp(1.45rem, 0.85rem + 1.25vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--ciano) 38%, transparent);
}

.nastro__fine {
  color: var(--testo-medio);
  font-size: var(--t-piccolo);
  white-space: nowrap;
}

.nastro__giorno.is-sostituito { border-color: color-mix(in srgb, var(--ciano) 45%, transparent); }

.nastro__giorno.is-sostituito .nastro__orario {
  color: var(--testo-medio);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.nastro__giorno.is-sostituito .nastro__ora {
  color: var(--testo-medio);
  text-shadow: none;
}

.nastro__giorno.is-sostituito .nastro__titolo,
.nastro__giorno.is-sostituito .nastro__gioco,
.nastro__giorno.is-sostituito .nastro__nota {
  color: var(--testo-medio);
  font-weight: 500;
}

.nastro__sostituito {
  margin: 0;
  margin-top: 2px;
  color: var(--ciano);
  font-family: var(--font-titolo);
  font-size: clamp(1.05rem, 0.72rem + 0.66vw, 1.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.nastro__giorno.is-saltata { border-color: color-mix(in srgb, var(--allerta) 45%, transparent); }

.nastro__saltata {
  margin: 0;
  margin-top: 2px;
  display: grid;
  gap: 2px;
}

.nastro__saltata .nastro__tag { color: var(--allerta); }

.nastro__spostata {
  color: var(--ciano);
  font-size: var(--t-piccolo);
  font-weight: 700;
}

.nastro__extra {
  margin: 0;
  margin-top: 4px;
  color: var(--ciano);
  font-size: var(--t-piccolo);
}

.nastro__extra .nastro__tag { color: var(--ciano); }

.nastro__extra-titolo { color: var(--testo-medio); }

.nastro__giorno.is-saltata .nastro__sostituito {
  color: var(--testo-medio);
  font-size: clamp(0.95rem, 0.7rem + 0.5vw, 1.25rem);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.nastro__motivo {
  color: var(--testo-medio);
  font-size: var(--t-piccolo);
  text-wrap: balance;
}

.evento__limite {
  position: absolute;
  top: clamp(14px, 1.8vw, 20px);
  right: clamp(14px, 1.8vw, 20px);
  z-index: 1;
  margin: 0;
  display: grid;
  gap: 2px;
  justify-items: center;
  max-width: min(85%, 14rem);
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--allerta) 40%, transparent);
  border-radius: var(--raggio-s);
  background-color: color-mix(in srgb, var(--fondo-2) 90%, transparent);
  color: var(--testo-tenue);
  font-size: var(--t-piccolo);
  text-align: center;
  text-wrap: balance;
}

.evento__limite .evento__tag {
  color: var(--allerta);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
}

.evento.is-saltata { border-color: color-mix(in srgb, var(--allerta) 45%, transparent); }

.evento.is-saltata.is-oggi { box-shadow: inset 0 3px 0 var(--magenta); }

.evento__saltata {
  margin: 0;
  display: grid;
  gap: 4px;
}

.evento__saltata .evento__tag {
  color: var(--allerta);
  font-family: var(--font-mono);
  font-size: var(--t-piccolo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
}

.evento__motivo {
  color: var(--testo-medio);
  font-size: var(--t-piccolo);
  text-wrap: balance;
}

.nastro__locale,
.evento__locale {
  margin: 0;
  color: var(--testo-medio);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums slashed-zero;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.nastro__titolo {
  margin: 0;
  margin-top: 2px;
  color: var(--testo);
  font-family: var(--font-titolo);
  font-size: clamp(1.05rem, 0.72rem + 0.66vw, 1.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.nastro__gioco {
  margin: 0;
  color: var(--viola-chiaro);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
}

.nastro__nota {
  margin: 0;
  color: var(--testo-medio);
  font-size: var(--t-piccolo);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (min-width: 1100px) {
  .nastro__giorno.is-diretta .nastro__nota {
    font-size: 0.8125rem;
    line-height: 1.4;
  }
}

.nastro__giorno:not(.is-diretta) {
  --pad: 10px;
  align-items: center;
  text-align: center;
}

.nastro__giorno:not(.is-diretta) .nastro__testa { align-items: center; }

.nastro__giorno:not(.is-diretta) .nastro__targa {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.08em;
}

.nastro__giorno:not(.is-diretta) .nastro__abbr { color: var(--testo-medio); }
.nastro__giorno.is-oggi:not(.is-diretta) .nastro__abbr { color: var(--magenta); }

.nastro__giorno:not(.is-diretta) .nastro__segni {
  flex-direction: column;
  align-items: center;
}

.nastro__giorno:not(.is-diretta) .segno { writing-mode: vertical-rl; padding: 7px 3px; }

.nastro__giorno:not(.is-diretta) .nastro__corpo {
  flex: 1 1 auto;
  align-items: center;
  margin: 0;
  padding-top: var(--passo-2);
}

.nastro__giorno:not(.is-diretta) .nastro__quando {
  flex: 1 1 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--passo-2);
}

.nastro__giorno:not(.is-diretta) .nastro__quando::before,
.nastro__giorno:not(.is-diretta) .nastro__quando::after {
  content: "";
  flex: 1 1 0;
  width: 1px;
  background-color: var(--linea);
}

.nastro__giorno:not(.is-diretta) .nastro__tag {
  writing-mode: vertical-rl;
  color: var(--testo-tenue);
}

.nastro__giorno.is-saltata:not(.is-diretta) .nastro__corpo { align-self: stretch; }

.nastro__giorno:not(.is-diretta) .nastro__saltata {
  flex: 1 1 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--passo-2);
  min-height: 0;
  contain: size;
}

.nastro__giorno:not(.is-diretta) .nastro__saltata::before,
.nastro__giorno:not(.is-diretta) .nastro__saltata::after {
  content: "";
  flex: 1 1 0;
  width: 1px;
  background-color: var(--linea);
}

.nastro__giorno:not(.is-diretta) .nastro__saltata .nastro__tag {
  flex: none;
  color: var(--allerta);
}

.nastro__giorno:not(.is-diretta) .nastro__motivo {
  flex: none;
  max-width: 100%;
  font-size: var(--t-micro);
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

@media (min-width: 1100px) {
  .nastro__giorno.is-saltata:not(.is-diretta):has(.nastro__motivo) {
    flex-grow: 2;
    min-width: 7rem;
  }
}

@media (max-width: 1099.98px) {
  .nastro {
    flex-direction: column;
    gap: 6px;
  }

  .nastro__giorno {
    --pad: clamp(14px, 2.6vw, 22px);
    flex: none;
    min-width: 0;
    min-height: 0;
  }

  .nastro__giorno.is-diretta { min-height: clamp(11rem, 50vw, 15rem); }

  .nastro__giorno.is-diretta .nastro__testa {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    margin-bottom: clamp(2.5rem, 9vw, 4rem);
  }

  .nastro__giorno.is-diretta .nastro__segni { min-height: 0; }

  .nastro__giorno.is-diretta .nastro__corpo > * { max-width: 40rem; }

  .nastro__giorno.is-diretta .nastro__corpo::before {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) calc(40rem + var(--pad) * 2), rgba(0, 0, 0, 0.3) calc(56rem + var(--pad) * 2));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) calc(40rem + var(--pad) * 2), rgba(0, 0, 0, 0.3) calc(56rem + var(--pad) * 2));
  }

  .nastro__filigrana {
    left: auto;
    right: var(--pad);
    top: calc(var(--pad) + 2rem);
    writing-mode: horizontal-tb;
    font-size: clamp(3.5rem, 1.4rem + 9vw, 7rem);
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
  }

  .nastro__giorno::after {
    inset-block: 0;
    inset-inline: 0 auto;
    width: 3px;
    height: auto;
  }

  .nastro__giorno:not(.is-diretta) {
    --pad: var(--passo-2);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--passo-2);
    min-height: 48px;
    padding-block: var(--passo);
    border-radius: var(--raggio-s);
    text-align: start;
  }

  .nastro__giorno:not(.is-diretta) .nastro__testa {
    flex-direction: row;
    align-items: center;
    gap: var(--passo);
  }

  .nastro__giorno:not(.is-diretta) .nastro__targa {
    flex-direction: row;
    align-items: baseline;
    gap: 2px var(--passo);
    letter-spacing: 0.12em;
  }

  .nastro__giorno:not(.is-diretta) .nastro__segni {
    flex-direction: row;
    min-height: 0;
  }

  .nastro__giorno:not(.is-diretta) .segno {
    writing-mode: horizontal-tb;
    padding: 3px 7px;
  }

  .nastro__giorno:not(.is-diretta) .nastro__corpo {
    flex: 1 1 6rem;
    align-items: stretch;
    padding: 0;
  }

  .nastro__giorno:not(.is-diretta) .nastro__quando {
    flex-direction: row;
    gap: var(--passo-2);
  }

  .nastro__giorno:not(.is-diretta) .nastro__quando::before {
    width: auto;
    height: 1px;
  }

  .nastro__giorno:not(.is-diretta) .nastro__quando::after { content: none; }

  .nastro__giorno:not(.is-diretta) .nastro__tag { writing-mode: horizontal-tb; }

  .nastro__giorno:not(.is-diretta) .nastro__saltata {
    flex: 1 1 auto;
    contain: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: var(--passo-2);
    row-gap: 2px;
  }

  .nastro__giorno:not(.is-diretta) .nastro__saltata::before {
    flex: 1 1 2rem;
    width: auto;
    height: 1px;
  }

  .nastro__giorno:not(.is-diretta) .nastro__saltata::after { content: none; }

  .nastro__giorno:not(.is-diretta) .nastro__motivo {
    flex: 1 1 100%;
    writing-mode: horizontal-tb;
    font-size: var(--t-piccolo);
    text-align: end;
  }
}

.eventi { margin-top: clamp(var(--passo-6), 5vw, var(--passo-8)); }

.eventi__titolo {
  display: flex;
  align-items: center;
  gap: var(--passo-2);
  margin: 0 0 var(--passo-3);
  color: var(--testo);
}

.eventi__titolo::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: 1px solid var(--ciano);
  background-color: color-mix(in srgb, var(--ciano) 30%, transparent);
  rotate: 45deg;
}

.eventi__titolo::after {
  content: "";
  flex: 1 1 auto;
  min-width: var(--passo-3);
  height: 1px;
  background-image: linear-gradient(
    to right,
    var(--linea-forte),
    color-mix(in srgb, var(--linea-forte) 0%, transparent)
  );
}

.eventi__elenco {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(27rem, calc((100% - var(--passo-2)) / 2))), 1fr));
  gap: var(--passo-2);
}

.evento {
  --manifesto: clamp(11rem, 18vw, 17rem);
  display: grid;
  grid-template-columns: var(--manifesto) minmax(0, 1fr);
  min-height: calc(var(--manifesto) * 4 / 3);
  overflow: hidden;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);

  background-color: var(--fondo-2);
  background-image: var(--grad-pannello);
  transition:
    border-color var(--durata) var(--curva),
    box-shadow   var(--durata) var(--curva);
}

.evento:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 1100px) {
  .evento:last-child:nth-child(odd) { --manifesto: clamp(13rem, 22vw, 21rem); }
}

.evento__manifesto {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--passo);
  padding: clamp(14px, 1.6vw, 20px);
  border-right: 1px solid var(--linea);

  background-color: var(--fondo-2);
  background-image:
    linear-gradient(to top, color-mix(in srgb, var(--fondo-2) 88%, transparent) 0%, color-mix(in srgb, var(--fondo-2) 45%, transparent) 60%, color-mix(in srgb, var(--fondo-2) 70%, transparent) 100%),
    radial-gradient(130% 70% at 0% 100%, color-mix(in srgb, var(--viola) 34%, transparent), color-mix(in srgb, var(--viola) 0%, transparent) 70%),
    repeating-linear-gradient(to right,  var(--linea) 0 1px, rgba(0, 0, 0, 0) 1px 24px),
    repeating-linear-gradient(to bottom, var(--linea) 0 1px, rgba(0, 0, 0, 0) 1px 24px),
    url("../../img/settimana-sfondo.webp");
  background-size: auto, auto, auto, auto, cover;
  background-position: 0 0, 0 0, 0 0, 0 0, 40% 50%;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
}

.evento.con-immagine .evento__manifesto { background-image: none; }

.evento__sfondo {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--fuoco, 50% 50%);
  transition: scale var(--durata-lunga) var(--curva);
}

.evento__segni {
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

.evento__data {
  position: relative;
  isolation: isolate;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  color: var(--testo);
  line-height: 1;
}

.evento.con-immagine .evento__data::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: calc(var(--passo-6) * -1) calc(clamp(14px, 1.6vw, 20px) * -1);
  inset-inline: calc(clamp(14px, 1.6vw, 20px) * -1);
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--fondo) calc(80% + var(--velo, 0.6) * 18%), transparent) 0%,
    color-mix(in srgb, var(--fondo) calc(80% + var(--velo, 0.6) * 18%), transparent) calc(100% - var(--passo-6)),
    color-mix(in srgb, var(--fondo) 0%, transparent) 100%
  );
}

.evento__giorno,
.evento__mese {
  font-family: var(--font-mono);
  font-size: var(--t-piccolo);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
}

.evento__giorno { color: var(--ciano); }

.evento__numero {
  margin-block: 2px 4px;

  padding-right: 0.06em;
  color: var(--testo);
  font-family: var(--font-titolo);
  font-size: clamp(4rem, 2.6rem + 3.6vw, 7rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.86;
  letter-spacing: -0.05em;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--viola) 55%, transparent));
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .evento__numero {
    background-image: var(--grad-titolo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.evento { container: evento / inline-size; }

.evento__spettatori:not([hidden]) { display: grid; }

.evento:not(.is-in-onda) .evento__spettatori { display: none; }

.evento__spettatori {
  justify-items: start;
  gap: 4px;
  margin-top: var(--passo);
}

.evento__spettatori p { margin: 0; }

.evento__spettatori-testa {
  display: flex;
  align-items: center;
  gap: var(--passo);
  color: var(--testo-medio);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.evento__spettatori-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--passo);
  border: 1px solid color-mix(in srgb, var(--live) 55%, transparent);
  border-radius: var(--raggio-pill);
  background-color: color-mix(in srgb, var(--live) 15%, transparent);
  color: var(--live);
  font-weight: 500;
  letter-spacing: var(--spazio-etichetta);
}

.evento__spettatori-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  animation: monitor-batte 2.2s var(--curva) infinite;
}

.evento__spettatori-conto {
  display: flex;
  align-items: center;
  gap: var(--passo-2);
}

.evento__spettatori-icona {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--ciano) 45%, transparent);
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--ciano) 12%, transparent);
  color: var(--ciano);
}

.evento__spettatori-icona svg {
  width: 20px;
  height: 20px;
}

.evento__spettatori-numero {
  color: var(--testo);
  font-family: var(--font-titolo);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.evento__spettatori-parola {
  color: var(--testo-tenue);
  font-family: var(--font-mono);
  font-size: var(--t-piccolo);
  letter-spacing: 0.08em;
}

.evento__spettatori.is-cambiato .evento__spettatori-numero { animation: eventi-guizza 0.6s var(--curva); }

@container evento (min-width: 46rem) {
  .evento.is-in-onda .evento__corpo:has(> .evento__spettatori:not([hidden])) { padding-right: clamp(13rem, 24cqi, 17rem); }

  .evento__spettatori {
    position: absolute;
    top: 50%;
    right: clamp(24px, 4cqi, 56px);
    translate: 0 -50%;
    justify-items: center;
    margin: 0;
    padding: var(--passo-3) var(--passo-4);
    border: 1px solid color-mix(in srgb, var(--live) 35%, var(--linea-forte));
    border-radius: var(--raggio);
    background-color: color-mix(in srgb, var(--fondo-2) 85%, transparent);
    background-image: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--live) 14%, transparent), transparent 70%);
  }
}

@keyframes eventi-guizza {
  0%   { color: var(--ciano); text-shadow: 0 0 12px var(--ciano); }
  100% { text-shadow: none; }
}

.evento__corpo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--passo);
  min-width: 0;
  padding: clamp(18px, 2.4vw, 32px);
}

.evento__titolo {
  margin: 0;
  color: var(--testo);
  font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.evento__quando {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--passo-2);
  margin: 0;
}

.evento__giorno-esteso {
  color: var(--testo-medio);
  font-size: var(--t-micro);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.evento__orario {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 4px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
}

.evento__ora {
  color: var(--testo);
  font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.3rem);
  font-weight: 500;
}

.evento__fine {
  color: var(--testo-medio);
  font-size: var(--t-piccolo);
  white-space: nowrap;
}

.evento__gioco {
  margin: 0;
  color: var(--viola-chiaro);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
}

.evento__nota {
  margin: 0;
  max-width: 56ch;
  color: var(--testo-medio);
  font-size: var(--t-piccolo);
  line-height: 1.55;
}

@media (max-width: 759.98px) {
  .evento {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .evento__manifesto {
    aspect-ratio: 5 / 4;
    border-right: 0;
    border-bottom: 1px solid var(--linea);
  }

  .evento__numero { font-size: clamp(3.5rem, 2rem + 8vw, 5rem); }
}

.settimana__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--passo-3);
  margin-top: var(--passo-4);
}

.settimana__nota {
  flex: 1 1 30ch;
  min-width: 0;
  max-width: 68ch;
  margin: 0;
  color: var(--testo-tenue);
  font-size: var(--t-piccolo);
  line-height: 1.55;
}

.chi__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "ritratto"
    "corpo"
    "margine";
  gap: var(--passo-6);
}

.chi__corpo    { grid-area: corpo; }
.chi__ritratto { grid-area: ritratto; }
.chi__margine  { grid-area: margine; }

@media (min-width: 1100px) {
  .chi__griglia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    grid-template-areas:
      "corpo   ritratto"
      "margine margine";
    column-gap: var(--passo-12);
    row-gap: var(--passo-8);
    align-items: center;
  }
}

.chi__corpo {
  max-width: 62ch;
}

.chi__corpo p {
  margin-block: 0 var(--passo-3);
  color: var(--testo-medio);
}

.chi__apertura {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.5;
}

.chi__corpo .chi__apertura { color: var(--testo); }

.chi__citazione {
  position: relative;
  margin-block: var(--passo-6) var(--passo-6);
  margin-inline: 0;
  padding: var(--passo-3) var(--passo-4) var(--passo-3) calc(var(--passo) * 5.5);
  border: 1px solid var(--linea-viva);
  border-radius: var(--raggio-g) var(--raggio-g) var(--raggio-g) 6px;
  background:
    var(--grad-pannello),
    color-mix(in srgb, var(--viola) 14%, var(--fondo));
  box-shadow: var(--ombra-morbida);
  color: var(--testo);
  font-family: var(--font-titolo);
  font-size: clamp(1.2rem, 1.02rem + 0.8vw, 1.6rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.chi__citazione::before {
  content: "\201C";
  position: absolute;
  top: calc(var(--passo) * -1.5);
  left: var(--passo-2);
  color: var(--ciano);
  font-family: var(--font-titolo);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: var(--bagliore-ciano);
}

.chi__citazione::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: var(--passo-3);
  width: 14px;
  height: 14px;
  border-right: 1px solid var(--linea-viva);
  border-bottom: 1px solid var(--linea-viva);
  background-color: color-mix(in srgb, var(--viola) 14%, var(--fondo));
  rotate: 45deg;
}

.chi__tag {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo);
  margin-block: var(--passo-4);
}

.chi__tag .tag {
  --accento: var(--ciano);
  border-color: color-mix(in srgb, var(--accento) 30%, transparent);
  background-color: color-mix(in srgb, var(--accento) 8%, var(--pannello));
  color: var(--testo);
  transition:
    translate var(--durata-lampo) ease,
    rotate var(--durata-lampo) ease,
    border-color var(--durata-lampo) ease;
}

.chi__tag .tag::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--accento);
  box-shadow: 0 0 8px var(--accento);
}

.chi__tag .tag:nth-child(3n + 2) { --accento: var(--viola-chiaro); }
.chi__tag .tag:nth-child(3n + 3) { --accento: var(--magenta); }

.chi__tag .tag:hover {
  translate: 0 -2px;
  rotate: -2deg;
  border-color: var(--accento);
}

.chi__corpo .btn { margin-top: var(--passo); }

.chi__ritratto {
  --lato: min(100%, 300px);
  position: relative;
  display: grid;
  justify-items: center;
  margin: 0;
}

.chi__ritratto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--lato);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: var(--raggio-g);
  background: linear-gradient(135deg, var(--viola), var(--ciano));
  rotate: 6deg;
  box-shadow: var(--bagliore-viola);
}

.chi__ritratto img {
  position: relative;
  width: var(--lato);
  height: auto;
  aspect-ratio: 1;
  border: 4px solid var(--fondo);
  border-radius: var(--raggio-g);
  object-fit: cover;
  rotate: -3deg;
  box-shadow: var(--ombra);
  transition: rotate var(--durata) ease;
}

.chi__ritratto:hover img { rotate: 0deg; }

.chi__cliccami {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(var(--passo) * -0.5);
  inset-inline-start: 50%;
  translate: -50% -100%;
  padding: 4px var(--passo-2);
  border: 1px solid var(--linea-viva);
  border-radius: var(--raggio-pill);
  background-color: var(--pannello-2);
  box-shadow: var(--bagliore-ciano);
  color: var(--ciano);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  pointer-events: none;
  animation: chi-cliccami 1.6s ease-in-out infinite;
}

.chi__ritratto.is-cliccato .chi__cliccami { display: none; }

@keyframes chi-cliccami {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .chi__cliccami { animation: none; }
}

.chi__ritratto figcaption {
  position: relative;
  max-width: 100%;
  margin-top: calc(var(--passo) * -2.5);
  padding: calc(var(--passo) * 0.75) var(--passo-2);
  border-radius: var(--raggio-pill);
  background-color: var(--magenta);
  box-shadow: var(--ombra-morbida);
  color: var(--fondo);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-wrap: balance;
  rotate: 2deg;
}

.chi__parla {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--raggio-g);
  background: none;
  cursor: pointer;
}

.chi__parla:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 6px;
}

.chi__fumetto {
  --fx: 50%;
  --fy: 0px;
  --dx: 0;
  --dy: -1;
  --ux: 0;
  --uy: -1;
  --sx: 0px;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: max-content;
  max-width: min(16rem, 70vw);
  margin: 0;
  padding: var(--passo) var(--passo-2);
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background-color: var(--pannello-2);
  background-image: var(--grad-pannello);
  box-shadow: var(--ombra-morbida);
  color: var(--testo);
  font-size: var(--t-piccolo);
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  translate:
    calc(var(--fx) - 50% + 50% * var(--dx) + var(--sx))
    calc(var(--fy) - 50% + 50% * var(--dy));
  transform-origin: calc(50% - 50% * var(--dx)) calc(50% - 50% * var(--dy));
  scale: 0.8;
  transition:
    opacity var(--durata) var(--curva),
    scale var(--durata) var(--curva);
}

.chi__fumetto::before,
.chi__fumetto::after {
  content: "";
  position: absolute;
  left: calc(50% - 50% * var(--dx) - var(--sx));
  top: calc(50% - 50% * var(--dy));
  border: 1px solid var(--linea-forte);
  border-radius: 50%;
  background-color: var(--pannello-2);
}

.chi__fumetto::before {
  width: 10px;
  height: 10px;
  translate: calc(-50% - var(--ux) * 11px) calc(-50% - var(--uy) * 11px);
}

.chi__fumetto::after {
  width: 6px;
  height: 6px;
  translate: calc(-50% - var(--ux) * 22px) calc(-50% - var(--uy) * 22px);
}

.chi__ritratto .chi__fumetto .chi__emote {
  display: inline-block;
  width: 1.75em;
  height: 1.75em;
  margin: -0.35em 0.05em;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  vertical-align: middle;
  rotate: none;
  animation: none;
  aspect-ratio: auto;
  position: static;
}

.chi__ritratto.is-parla .chi__fumetto {
  opacity: 1;
  scale: 1;
}

.chi__ritratto.is-parla img { animation: chi-saltello 420ms var(--curva); }

@keyframes chi-saltello {
  0%, 100% { translate: 0 0; }
  40%      { translate: 0 -10px; }
}

.chi__parla::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--raggio-g);
  rotate: -3deg;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 255, 255, .95) 0 3px, transparent 4px),
    radial-gradient(circle at 16% 6%, rgba(255, 255, 255, .8) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 88%, rgba(255, 255, 255, .95) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 95%, rgba(255, 255, 255, .8) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, .7) 0 2px, transparent 3px),
    radial-gradient(ellipse at 0% 0%, rgba(210, 250, 255, .75), transparent 42%),
    radial-gradient(ellipse at 100% 100%, rgba(210, 250, 255, .75), transparent 42%),
    radial-gradient(ellipse at 100% 0%, rgba(210, 250, 255, .5), transparent 35%),
    radial-gradient(ellipse at 0% 100%, rgba(210, 250, 255, .5), transparent 35%),
    linear-gradient(135deg, rgba(160, 240, 255, .35), rgba(34, 224, 255, .12) 50%, rgba(255, 255, 255, .3));
  box-shadow: inset 0 0 0 3px rgba(200, 248, 255, .85), inset 0 0 28px rgba(160, 240, 255, .9), 0 0 26px rgba(34, 224, 255, .7);
  opacity: 0;
  scale: 1.04;
  pointer-events: none;
  transition: opacity 180ms ease, scale 180ms ease;
}

.chi__ritratto.is-congelato .chi__parla { cursor: not-allowed; }
.chi__ritratto.is-congelato .chi__parla::after { opacity: 1; scale: 1; }

.chi__ritratto.is-congelato img {
  rotate: -3deg;
  filter: saturate(.35) hue-rotate(-25deg) brightness(1.15) contrast(1.1);
  transition: none;
  animation: chi-gelo 60ms steps(2) 7;
}

.chi__ritratto.is-congelato::before {
  background: linear-gradient(135deg, rgb(216, 251, 255), var(--ciano));
  box-shadow: 0 0 34px color-mix(in srgb, var(--ciano) 70%, transparent);
}

.chi__ritratto.is-sgela img { animation: chi-trema 90ms linear 5; }

@keyframes chi-gelo {
  0%   { translate: -4px 1px; }
  50%  { translate: 4px -1px; }
  100% { translate: 0 0; }
}

@keyframes chi-trema {
  0%, 100% { translate: 0 0;     rotate: 0deg; }
  25%      { translate: -5px 2px; rotate: -4deg; }
  75%      { translate: 5px -2px; rotate: 4deg; }
}

.pollo-gif {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-velo) + 5);
  display: grid;
  place-items: center;
  padding: var(--passo-3);
  background-color: var(--velo);
  opacity: 0;
  transition: opacity var(--durata) var(--curva);
}

.pollo-gif.is-aperto { opacity: 1; }

.pollo-gif__riquadro {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--passo);
  width: fit-content;
  max-width: min(92vw, 560px);
  margin: 0;
  padding: var(--passo-2);
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background-color: var(--pannello-2);
  background-image: var(--grad-pannello);
  box-shadow: var(--ombra-morbida);
  scale: 0.6;
  rotate: -6deg;
  transition:
    scale var(--durata-lunga) var(--rimbalzo),
    rotate var(--durata-lunga) var(--rimbalzo);
}

.pollo-gif.is-aperto .pollo-gif__riquadro {
  scale: 1;
  rotate: 0deg;
}

.pollo-gif__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 160px;
  max-height: 60vh;
  border-radius: var(--raggio-s);
  object-fit: contain;
}

.pollo-gif__scritta {
  max-width: 100%;
  margin: 0;
  color: var(--testo);
  font-family: var(--font-titolo);
  font-size: clamp(1.25rem, 5vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow:
    2px 2px 0 var(--fondo),
    -2px 2px 0 var(--fondo),
    2px -2px 0 var(--fondo),
    -2px -2px 0 var(--fondo),
    0 4px 18px color-mix(in srgb, var(--viola) 60%, transparent);
}

.pollo-gif__chiudi {
  position: absolute;
  top: calc(var(--passo) * -1);
  right: calc(var(--passo) * -1);
  width: 36px;
  height: 36px;
  border: 1px solid var(--linea-comando);
  border-radius: 50%;
  background-color: var(--pannello-2);
  color: var(--testo);
  transition: border-color var(--durata) var(--curva);
}

.pollo-gif__chiudi:hover { border-color: var(--linea-viva); }

.pollo-gif__chiudi::before,
.pollo-gif__chiudi::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background-color: currentColor;
}

.pollo-gif__chiudi::before { translate: -50% -50%; rotate: 45deg; }
.pollo-gif__chiudi::after  { translate: -50% -50%; rotate: -45deg; }

@media (max-width: 639.98px) {
  .chi__ritratto { --lato: min(100%, 220px); }
}

.chi__margine {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--passo-2);
  align-content: start;
}

@media (min-width: 760px) {
  .chi__margine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.nota {
  --accento: var(--ciano);
  position: relative;
  padding: var(--passo-3);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--grad-pannello), var(--pannello);
  overflow: hidden;
}

.nota::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background-color: var(--accento);
}

.nota:nth-of-type(2) { --accento: var(--viola-chiaro); }
.nota:nth-of-type(3) { --accento: var(--magenta); }

.nota__titolo {
  margin: 0 0 var(--passo);
  color: var(--accento);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
}

.nota__testo {
  margin: 0;
  color: var(--testo-medio);
  font-size: var(--t-piccolo);
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .chi__tag .tag:hover { translate: none; rotate: none; }
  .chi__ritratto:hover img { rotate: -3deg; }
  .pollo-gif__riquadro { scale: 1; rotate: 0deg; }
}

.listino {
  border-top: 1px solid var(--linea);
}

.listino__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--passo-2);

  margin-inline: calc(var(--passo) * -1);
  padding: var(--passo-3) var(--passo);
  border-bottom: 1px solid var(--linea);
  transition: background-color var(--durata) var(--curva);
}

.listino__riga:hover,
.listino__riga:focus-within {
  background-color: var(--pannello);
}

.listino__icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio-s);
  background-color: var(--pannello);
  color: var(--viola-chiaro);
  transition:
    border-color var(--durata) var(--curva),
    color        var(--durata) var(--curva);
}

.listino__icona svg {
  width: 20px;
  height: 20px;
}

.listino__riga:hover .listino__icona,
.listino__riga:focus-within .listino__icona {
  border-color: var(--linea-viva);
  color: var(--ciano);
}

.listino__corpo {
  flex: 1 1 14rem;
  min-width: 0;
}

.listino__titolo {
  margin: 0 0 calc(var(--passo) * 0.5);
  color: var(--testo);
}

.listino__testo {
  margin: 0;
  max-width: 62ch;
  color: var(--testo-medio);
  font-size: var(--t-piccolo);
  line-height: 1.55;
}

.listino__tag {
  flex: none;
  padding: 4px var(--passo);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-s);
  color: var(--testo-tenue);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
  white-space: nowrap;
}

.listino__azione {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;

  margin-left: auto;
  min-height: 40px;
  padding-inline: var(--passo-2);
  border: 1px solid var(--linea-comando);
  border-radius: var(--raggio-pill);
  color: var(--testo);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition:
    border-color     var(--durata) var(--curva),
    background-color var(--durata) var(--curva),
    color            var(--durata) var(--curva);
}

.listino__azione:hover {
  border-color: var(--ciano);
  background-color: var(--pannello-2);
}

@media (min-width: 720px) {
  .listino__riga {
    flex-wrap: nowrap;
    gap: var(--passo-3);
  }

  .listino__corpo { flex: 1 1 auto; }
  .listino__azione { margin-left: 0; }
}

.supporto__chiusura {
  margin-top: var(--passo-4);
  max-width: 68ch;
  color: var(--testo-tenue);
  font-size: var(--t-piccolo);
  line-height: 1.6;
}

.saluti__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--passo-6);
}

@media (min-width: 1000px) {
  .saluti__griglia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: 0;
    align-items: start;
  }

  .saluti__social { padding-right: clamp(var(--passo-4), 3vw, var(--passo-8)); }

  .contatti {
    padding-left: clamp(var(--passo-4), 3vw, var(--passo-8));
    border-left: 1px solid var(--linea);
  }
}

.social {
  margin-top: var(--passo-4);
  border-top: 1px solid var(--linea);
}

.social__riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--passo-3);
  margin-inline: calc(var(--passo) * -1);
  padding-right: var(--passo);
  border-bottom: 1px solid var(--linea);
  transition: background-color var(--durata) var(--curva);
}

.social__voce {
  display: grid;
  grid-template-columns: 20px 13rem minmax(0, 1fr);
  align-items: center;
  gap: var(--passo) var(--passo-2);
  padding: calc(var(--passo) * 1.5) var(--passo);
  color: var(--testo-medio);
  text-decoration: none;
  transition: color var(--durata) var(--curva);
}

.social__voce svg {
  width: 20px;
  height: 20px;
  color: var(--viola-chiaro);
  transition: color var(--durata) var(--curva);
}

.social__nome {
  color: var(--testo);
  font-weight: 600;
}

.social__handle {
  min-width: 0;
  color: var(--testo-tenue);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.social__conta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0 var(--passo);
  padding: calc(var(--passo) * 0.75) var(--passo-2);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-s);
  background-color: var(--pannello);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.social__conta-etichetta {
  color: var(--testo-tenue);
}

.social__conta-numero {
  color: var(--testo);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: color var(--durata) var(--curva);
}

.social__conta-sep {
  color: var(--linea-forte);
}

.social__riga:hover {
  background-color: var(--pannello);
}

.social__riga:hover .social__voce {
  color: var(--testo);
}

.social__riga:hover svg,
.social__riga:hover .social__handle,
.social__riga:hover .social__conta-numero {
  color: var(--ciano);
}

@media (max-width: 599px) {
  .social__riga {
    grid-template-columns: minmax(0, 1fr);
  }

  .social__voce {
    grid-template-columns: 20px auto minmax(0, 1fr);
  }

  .social__conta {
    justify-self: start;
    margin: 0 0 calc(var(--passo) * 1.5) calc(var(--passo) + 20px + var(--passo-2));
  }
}

.contatti__titolo {
  margin: 0 0 var(--passo);
  color: var(--testo);
}

.contatti__testo {
  margin: 0 0 var(--passo-3);
  max-width: 46ch;
  color: var(--testo-medio);
  font-size: var(--t-piccolo);
  line-height: 1.6;
}

.contatti__email {
  display: inline-block;
  padding: var(--passo) var(--passo-2);
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio-s);
  background-color: var(--pannello);
  color: var(--testo);
  font-size: var(--t-piccolo);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.contatti__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo-2);
  margin-top: var(--passo-3);
}

.referral {
  margin-top: var(--passo-4);
  padding: var(--passo-3);
  border: 1px solid color-mix(in srgb, var(--amazon) 45%, transparent);
  border-radius: var(--raggio);
  background-color: var(--pannello-2);
  background-image: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--amazon) 13%, transparent), transparent 64%);
  box-shadow: var(--ombra-morbida);
}

.referral__titolo {
  display: flex;
  align-items: center;
  gap: var(--passo);
  margin: 0 0 var(--passo-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
  color: var(--amazon);
}

.referral__titolo svg {
  width: 1.35em;
  height: 1.35em;
  flex: none;
}

.referral__testo {
  margin: 0 0 var(--passo-3);
  color: var(--testo-medio);
  font-size: var(--t-piccolo);
  line-height: 1.6;
}

.referral__vai {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--passo);
  min-height: 44px;
  padding-inline: var(--passo-3);
  border: 1px solid transparent;
  border-radius: var(--raggio-pill);
  background-color: var(--amazon);
  color: var(--fondo);
  font-family: var(--font-mono);
  font-size: var(--t-piccolo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition:
    translate var(--durata-lampo) var(--curva),
    background-color var(--durata-lampo) var(--curva),
    box-shadow var(--durata-lampo) var(--curva);
}

.referral__vai svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.referral__vai:hover {
  translate: 0 -1px;
  background-color: color-mix(in srgb, var(--amazon) 82%, var(--testo));
  box-shadow: 0 0 18px color-mix(in srgb, var(--amazon) 40%, transparent);
}

.referral__vai:active {
  translate: 0 1px;
}

.referral__nota {
  margin: var(--passo-2) 0 0;
  color: var(--testo-tenue);
  font-size: var(--t-micro);
  line-height: 1.5;
}

.chiusura-pagina {
  width: min(100%, calc(var(--max-larghezza) + var(--margine) * 2));
  margin-inline: auto;
  padding-inline: var(--margine);
  padding-bottom: clamp(var(--passo-8), 8vh, var(--passo-12));
}

.saluti__chiusura {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--passo-2);
  margin: 0;
  color: var(--testo-tenue);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
}

.saluti__chiusura::before,
.saluti__chiusura::after {
  content: "";
  flex: 0 1 auto;
  width: min(72px, 10vw);
  height: 1px;
  background-color: var(--linea-forte);
}

@media (max-width: 640px) {
  .saluti__chiusura { text-wrap: balance; }

  .saluti__chiusura::before,
  .saluti__chiusura::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nastro__giorno.is-diretta:hover .nastro__sfondo { scale: none; }
}