/* ═══════════════════════════════════════════════════════════
   Giovanni Gut · CV online
   Il telaio: tredici fili, uno per ogni mondo, e una vita
   che li intreccia. Notte e carta, Fraunces ad assi variabili,
   un intreccio-dataviz disegnato in canvas, libri in 3D.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --notte: #06060E;
  --notte-2: #0D0D1C;
  --carta: #F2ECE2;
  --carta-2: #EAE2D3;
  --inchiostro: #141020;
  --rosso: #E5382F;
  --rosso-vivo: #FF4D42;
  --ambra: #F2B33D;
  --indaco: #8C82FF;
  --testo: #EFEAE1;
  --velato: rgba(239, 234, 225, 0.74);
  --spento: #9292AB;
  --spento-carta: #6E6880;
  --linea: rgba(239, 234, 225, 0.1);
  --linea-carta: rgba(20, 16, 32, 0.14);
  --font-voce: 'Fraunces', Georgia, serif;
  --font-segna: 'Space Grotesk', sans-serif;
  --font-testo: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 90px; }

::selection { background: var(--rosso); color: var(--carta); }

html { scrollbar-color: rgba(229, 56, 47, 0.6) #0A0A16; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0A0A16; }
::-webkit-scrollbar-thumb { background: rgba(229, 56, 47, 0.55); border-radius: 6px; }

body {
  background: var(--notte);
  color: var(--testo);
  font-family: var(--font-testo);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--indaco);
  outline-offset: 4px;
  border-radius: 2px;
}

.salta {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 300;
  background: var(--rosso);
  color: var(--carta);
  font-family: var(--font-segna);
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.salta:focus-visible { top: 1rem; }

/* Grana di pellicola */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

#telaio {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── La cucitura (il filo che cuce la pagina allo scroll) ── */

.cucitura {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 60;
  pointer-events: none;
}
.cucitura-alone {
  fill: none;
  stroke: #FF4D42;
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.08;
  filter: blur(6px);
}
.cucitura-tratto {
  fill: none;
  stroke: url(#cucitura-sfumatura);
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: 0.55;
}
.cucitura-punta {
  fill: #FF4D42;
  filter: drop-shadow(0 0 8px rgba(255, 77, 66, 0.9));
  transition: opacity 0.3s ease;
}
.cucitura-nodo {
  fill: none;
  stroke: #FF4D42;
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.cucitura-nodo.visibile { opacity: 0.75; }

/* ── Testata ── */

.testata {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.6rem;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.testata.compatta {
  background: rgba(6, 6, 14, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--linea);
  padding: 0.65rem 1.6rem;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-voce);
  font-size: 1.05rem;
  font-weight: 550;
  color: var(--testo);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.marchio-segno { width: 24px; height: 24px; }

.testata-azioni { display: flex; align-items: center; gap: 1rem; }

.testata-cta {
  font-family: var(--font-segna);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--testo);
  text-decoration: none;
  border: 1px solid rgba(239, 234, 225, 0.3);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.testata-cta:hover { border-color: var(--rosso-vivo); color: var(--rosso-vivo); }

.testata-volto {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(242, 179, 61, 0.55);
  box-shadow: 0 0 14px rgba(255, 77, 66, 0.18);
  filter: saturate(0.85);
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.testata-volto:hover { transform: rotate(-4deg) scale(1.08); border-color: var(--rosso-vivo); }

.apri-indice {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}
.apri-indice span {
  display: block;
  height: 2px;
  background: var(--testo);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.apri-indice.aperto span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.apri-indice.aperto span:nth-child(2) { opacity: 0; }
.apri-indice.aperto span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── La spina (nav laterale a nodi) ── */

.spina {
  position: fixed;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 110;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  padding-left: 5px;
}
.spina-filo {
  position: absolute;
  left: 8px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--linea);
}
.spina-filo b {
  display: block;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--rosso-vivo), var(--ambra) 60%, var(--indaco));
}
.spina a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--spento);
}
.spina a i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--notte);
  border: 1.5px solid currentColor;
  opacity: 0.7;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
  flex-shrink: 0;
}
.spina a span {
  font-family: var(--font-segna);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(6, 6, 14, 0.8);
}
.spina:hover a span { opacity: 0.75; transform: translateX(0); }
.spina a:hover span { opacity: 1; color: var(--testo); }
.spina a.attivo i {
  background: var(--rosso-vivo);
  border-color: var(--rosso-vivo);
  opacity: 1;
  transform: scale(1.45);
  box-shadow: 0 0 12px rgba(255, 77, 66, 0.7);
}
.spina a.attivo span { color: var(--rosso-vivo); opacity: 1; transform: translateX(0); }
/* sulla carta, la spina si scurisce */
.spina.su-carta a { color: var(--spento-carta); }
.spina.su-carta .spina-filo { background: var(--linea-carta); }
.spina.su-carta a i { background: var(--carta); }
.spina.su-carta a.attivo i { background: var(--rosso); border-color: var(--rosso); }
.spina.su-carta a span { text-shadow: none; }
.spina.su-carta a:hover span { color: var(--inchiostro); }

/* ── Indice mobile ── */

.indice {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 5.5rem 2.2rem 2.2rem;
  background: rgba(6, 6, 14, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.indice.aperto { opacity: 1; visibility: visible; }
.indice a {
  font-family: var(--font-voce);
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 420;
  color: var(--testo);
  text-decoration: none;
  line-height: 1.45;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease, color 0.3s ease;
}
.indice.aperto a { transform: translateY(0); opacity: 1; }
.indice a:hover { color: var(--rosso-vivo); font-style: italic; }
.indice.aperto a:nth-child(1) { transition-delay: 0.05s; }
.indice.aperto a:nth-child(2) { transition-delay: 0.09s; }
.indice.aperto a:nth-child(3) { transition-delay: 0.13s; }
.indice.aperto a:nth-child(4) { transition-delay: 0.17s; }
.indice.aperto a:nth-child(5) { transition-delay: 0.21s; }
.indice.aperto a:nth-child(6) { transition-delay: 0.25s; }
.indice.aperto a:nth-child(7) { transition-delay: 0.29s; }
.indice.aperto a:nth-child(8) { transition-delay: 0.33s; }
.indice.aperto a:nth-child(9) { transition-delay: 0.37s; }
.indice.aperto a:nth-child(10) { transition-delay: 0.41s; }

/* ── Apertura ── */

.apertura {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7.5rem clamp(1.4rem, 6vw, 6rem) 2.5rem;
  max-width: 1440px;
  margin: 0 auto;
}

.apertura-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.ruoli {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-segna);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--spento);
  margin-bottom: clamp(1.4rem, 3vh, 2.6rem);
}
.ruoli em { color: var(--rosso-vivo); font-style: normal; font-size: 0.6rem; }
.ruoli span:first-child { color: var(--testo); }

.urlo {
  font-family: var(--font-voce);
  font-weight: 380;
  line-height: 0.98;
  margin-bottom: clamp(1.6rem, 3.5vh, 3rem);
}
.urlo-riga {
  display: block;
  font-size: clamp(3.4rem, 10.5vw, 8.2rem);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  letter-spacing: -0.02em;
  color: var(--testo);
}
.urlo-riga--corsiva {
  font-style: italic;
  font-weight: 430;
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
  color: var(--rosso-vivo); /* le lettere vengono sfumate una a una dal JS */
  padding-right: 0.1em;
}
.urlo .lettera {
  display: inline-block;
  vertical-align: top;
  transform: translateY(110%) rotate(4deg);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
.urlo.svelato .lettera { transform: translateY(0) rotate(0); opacity: 1; }
/* altezza esplicita: alcuni motori gonfiano la riga con figli inline-block */
.urlo-riga { overflow: hidden; height: 1.06em; }

.urlo-sotto {
  display: block;
  font-family: var(--font-segna);
  font-size: clamp(0.85rem, 1.8vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--velato);
  margin-top: 1.4rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease 0.7s, transform 0.8s ease 0.7s;
}
.urlo-coda {
  display: block;
  font-family: var(--font-voce);
  font-style: italic;
  font-weight: 420;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  color: var(--ambra);
  margin-top: 0.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease 0.95s, transform 0.8s ease 0.95s;
}
.urlo.svelato .urlo-sotto, .urlo.svelato .urlo-coda { opacity: 1; transform: translateY(0); }

.apertura-testi { max-width: 58ch; }
.apertura-testo {
  font-size: clamp(0.98rem, 1.35vw, 1.1rem);
  color: var(--velato);
  margin-bottom: 1.1rem;
}

.timbro {
  display: inline-block;
  font-family: var(--font-segna);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rosso-vivo);
  border: 1.5px solid currentColor;
  border-radius: 4px;
  padding: 0.5rem 0.9rem;
  transform: rotate(-2deg);
  margin: 0.5rem 0 1.4rem;
  box-shadow: 0 0 18px rgba(255, 77, 66, 0.12);
}
.timbro--chiaro { color: var(--ambra); box-shadow: 0 0 18px rgba(242, 179, 61, 0.14); }

.apertura-nota {
  font-size: 0.9rem;
  color: var(--spento);
  margin-bottom: 1.2rem;
}

.apertura-svolta { margin-top: 0.4rem; }
.verso-intreccio {
  font-family: var(--font-voce);
  font-style: italic;
  font-size: 1rem;
  color: var(--rosso-vivo);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 77, 66, 0.5);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.verso-intreccio:hover { color: var(--ambra); border-color: var(--ambra); }
.apertura-svolta--carta { margin: 0.2rem 0 1.6rem; }
.mondo--carta .verso-intreccio { color: var(--rosso); border-color: rgba(229, 56, 47, 0.4); }
.mondo--carta .verso-intreccio:hover { color: var(--inchiostro); border-color: var(--inchiostro); }

/* Il volto */
.apertura-volto {
  position: relative;
  justify-self: end;
  width: min(100%, 380px);
  aspect-ratio: 4 / 5;
}
.apertura-volto img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  filter: grayscale(0.85) contrast(1.06) brightness(0.92);
  clip-path: polygon(3% 0, 100% 2%, 98% 97%, 0 100%);
  transition: filter 0.6s ease;
}
.apertura-volto:hover img { filter: grayscale(0.15) contrast(1.02) brightness(1); }
.apertura-volto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(160deg, rgba(140, 130, 255, 0.16), transparent 40%, rgba(255, 77, 66, 0.14) 90%);
  mix-blend-mode: screen;
  pointer-events: none;
  clip-path: polygon(3% 0, 100% 2%, 98% 97%, 0 100%);
}
.volto-cornice {
  position: absolute;
  inset: -14px 14px 14px -14px;
  border: 1px solid rgba(242, 179, 61, 0.45);
  z-index: 1;
  clip-path: polygon(3% 0, 100% 2%, 98% 97%, 0 100%);
}
.volto-filo {
  position: absolute;
  right: -34px;
  top: -8%;
  height: 116%;
  width: 60px;
  z-index: 4;
  pointer-events: none;
}
.volto-filo svg { width: 100%; height: 100%; }
.apertura-volto.senza-foto { display: none; }

.apertura-piede {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(2rem, 5vh, 4rem);
  border-top: 1px solid var(--linea);
  padding-top: 1.3rem;
}
.credenziali {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  list-style: none;
}
.credenziali li {
  font-family: var(--font-segna);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--spento);
  position: relative;
}
.credenziali li:not(:last-child)::after {
  content: "\2726";
  position: absolute;
  right: -1.15rem;
  color: rgba(255, 77, 66, 0.55);
  font-size: 0.55rem;
}
.scorri {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-voce);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--spento);
  white-space: nowrap;
}
.scorri-linea {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--rosso-vivo), transparent);
  animation: scendi 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scendi {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(18px); opacity: 0; }
}

/* ── Mondi (sezioni) ── */

.mondo { position: relative; z-index: 1; }
.mondo--notte { background: var(--notte); }
#ai-training.mondo--notte { background: linear-gradient(180deg, var(--notte) 0%, var(--notte-2) 55%, var(--notte) 100%); }
.mondo--carta {
  background: var(--carta);
  color: var(--inchiostro);
}
/* la fibra della carta: la stessa trama increspata dell'hub */
.mondo--carta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../img/carta-fibra.webp);
  background-size: 640px;
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* luce che scende dall'alto e ombra che raccoglie i bordi */
.mondo--carta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(178deg, rgba(255, 253, 247, 0.55), transparent 22%),
    radial-gradient(120% 90% at 50% 108%, rgba(20, 16, 32, 0.1), transparent 55%);
}
.mondo--carta .mondo-interno { position: relative; z-index: 1; }
.mondo--carta .cimosa { position: relative; z-index: 1; }

.mondo-interno {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(4.5rem, 10vh, 7.5rem) clamp(1.4rem, 6vw, 4rem);
}
.mondo-interno--largo { max-width: 1280px; }

.cimosa {
  display: block;
  width: 100%;
  height: 48px;
}
.cimosa--entra { margin-bottom: -1px; margin-top: -1px; }
.cimosa--esce { margin-top: -1px; margin-bottom: -1px; }
.mondo--carta + .mondo--carta .cimosa--entra { display: none; }
.mondo--carta:has(+ .mondo--carta) .cimosa--esce { display: none; }
#pubblicazioni { border-top: 1px solid var(--linea-carta); }

/* il nome della sezione, scritto come una parola d'autore:
   Fraunces corsivo rosso, col filo che prosegue accanto */
.mondo-etichetta {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  font-family: var(--font-voce);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0;
  color: var(--rosso-vivo);
  margin-bottom: clamp(2rem, 5vh, 3.4rem);
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
}
.mondo--carta .mondo-etichetta { color: var(--rosso); }
.mondo-etichetta b {
  font-family: var(--font-voce);
  font-size: 1.2em;
  font-weight: 350;
  font-style: italic;
  color: inherit;
  letter-spacing: 0;
}
.mondo-etichetta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  transform: translateY(-0.32em);
}

/* Testo comune */
.capoverso {
  font-family: var(--font-voce);
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight: 380;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--inchiostro);
  margin-bottom: 1.5rem;
  font-variation-settings: "opsz" 40, "SOFT" 40;
}
.capoverso--chiaro { color: var(--testo); }
.mondo p:not(.capoverso):not(.mondo-etichetta) { font-size: 0.96rem; }
.mondo--carta .mondo-interno > * { position: relative; }
.mondo--notte p a:not(.invito):not(.verso-intreccio):not([class]) { color: var(--indaco); text-decoration: none; border-bottom: 1px solid rgba(140, 130, 255, 0.4); transition: color 0.3s, border-color 0.3s; }
.mondo--notte p a:not(.invito):not(.verso-intreccio):not([class]):hover { color: var(--testo); border-color: var(--testo); }

.mondo-sigla {
  font-family: var(--font-segna);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--spento-carta);
  margin-top: 2rem;
}

/* ── Inviti (bottoni) ── */

.invito {
  display: inline-block;
  align-self: flex-start; /* nei contenitori flex-colonna non deve stirarsi */
  font-family: var(--font-segna);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--carta);
  background: var(--inchiostro);
  border: 1px solid var(--inchiostro);
  border-radius: 999px;
  padding: 1rem 1.7rem;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  will-change: transform;
}
.invito:hover { background: var(--rosso); border-color: var(--rosso); color: var(--carta); box-shadow: 0 10px 30px rgba(229, 56, 47, 0.3); }
.invito--chiaro { background: transparent; border-color: rgba(239, 234, 225, 0.35); color: var(--testo); }
.invito--chiaro:hover { background: var(--rosso); border-color: var(--rosso); }
.invito--rosso { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.invito--rosso:hover { background: var(--rosso-vivo); border-color: var(--rosso-vivo); box-shadow: 0 10px 34px rgba(255, 77, 66, 0.4); }
.invito--spettro { background: transparent; color: var(--testo); border-color: rgba(239, 234, 225, 0.35); }
.invito--spettro:hover { background: rgba(255, 77, 66, 0.12); border-color: var(--rosso-vivo); color: var(--rosso-vivo); box-shadow: none; }

.nota-link {
  display: inline-block;
  font-family: var(--font-segna);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rosso);
  text-decoration: none;
  border-bottom: 1px solid rgba(229, 56, 47, 0.4);
  padding-bottom: 3px;
  margin-top: 1.4rem;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.nota-link:hover { color: var(--inchiostro); border-color: var(--inchiostro); }

/* ── Coaching ── */

.coaching-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.coaching-corpo p:not(.capoverso):not(.mondo-sigla) { margin-bottom: 1.1rem; max-width: 62ch; color: #3A3548; }

.coaching-margine {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.strappo {
  position: relative;
  transform: rotate(-1.5deg);
}
.strappo p {
  font-family: var(--font-voce);
  font-style: italic;
  font-weight: 450;
  font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
  line-height: 1.2;
  color: var(--rosso);
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
}
.strappo::before {
  content: "\201C";
  position: absolute;
  top: -2.3rem;
  left: -1.4rem;
  font-family: var(--font-voce);
  font-size: 5.5rem;
  line-height: 1;
  color: rgba(229, 56, 47, 0.18);
}

.ritaglio {
  position: relative;
  background: #FBF7EE;
  border: 1px solid var(--linea-carta);
  border-radius: 3px;
  padding: 1.3rem 1.4rem 1.2rem;
  transform: rotate(1.2deg);
  box-shadow: 0 14px 30px rgba(20, 16, 32, 0.08);
  max-width: 400px;
}
.ritaglio::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 74px;
  height: 20px;
  background: rgba(242, 179, 61, 0.4);
  border-left: 1px dashed rgba(20, 16, 32, 0.15);
  border-right: 1px dashed rgba(20, 16, 32, 0.15);
}
.ritaglio--caldo::before { background: rgba(255, 77, 66, 0.28); }
.ritaglio-etichetta {
  display: block;
  font-family: var(--font-segna);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--spento-carta);
  margin-bottom: 0.5rem;
}
.ritaglio a {
  font-family: var(--font-voce);
  font-size: 1.05rem;
  font-weight: 480;
  color: var(--inchiostro);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.3s ease;
}
.ritaglio a:hover { color: var(--rosso); }
.ritaglio-fonte { font-family: var(--font-testo); font-size: 0.78rem; color: var(--spento-carta); font-weight: 400; }
.ritaglio--caldo { max-width: 440px; margin: 1.6rem 0 0; }

/* ── Orientamento / la rosa delle rotte ── */

.rosa-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.rosa-corpo p:not(.capoverso):not(.mondo-sigla) { max-width: 56ch; color: #3A3548; }
.rosa { position: relative; }
#rosaTela {
  display: block;
  width: 100%;
  height: 380px;
  cursor: pointer;
}
.rosa-guida {
  font-family: var(--font-segna);
  font-size: 0.62rem !important;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(229, 56, 47, 0.8);
  margin-bottom: 0.4rem;
}
.rosa-motto {
  font-family: var(--font-voce);
  font-style: italic;
  font-size: 0.95rem !important;
  color: var(--spento-carta);
  margin-top: 0.6rem;
  text-align: right;
}

/* ── AI Training ── */

.ai-griglia {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.55fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.ai-pannello {
  position: sticky;
  top: 120px;
  border: 1px solid rgba(140, 130, 255, 0.3);
  border-radius: 10px;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(140, 130, 255, 0.14), transparent 55%),
    radial-gradient(130% 120% at 90% 100%, rgba(255, 77, 66, 0.1), transparent 60%),
    rgba(13, 13, 28, 0.7);
  padding: 2.6rem 2.2rem;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.ai-pannello-lucido {
  position: absolute;
  inset: 0;
  background: radial-gradient(240px 240px at var(--lx, 50%) var(--ly, 30%), rgba(239, 234, 225, 0.1), transparent 65%);
  pointer-events: none;
}
/* la treccia: il filo rosso di Giovanni e i tre fili delle AI */
.treccia-ai {
  display: block;
  width: 100%;
  height: 84px;
  margin-bottom: 0.5rem;
  transform: translateZ(18px);
}
.treccia-voci {
  display: flex;
  gap: 1.1rem;
  margin-bottom: 1.6rem;
  transform: translateZ(18px);
}
.treccia-voci i {
  font-family: var(--font-segna);
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta, var(--spento));
  opacity: 0.85;
}
.ai-quota {
  font-family: var(--font-voce);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important;
  line-height: 1.15;
  color: var(--testo);
  margin-bottom: 1.6rem;
  font-variation-settings: "opsz" 144, "SOFT" 40;
  transform: translateZ(34px);
}
.ai-quota em {
  font-style: italic;
  color: var(--indaco);
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
}
.ai-pannello .timbro { margin: 0; transform: rotate(-2deg) translateZ(22px); }
.ai-corpo p:not(.capoverso) { margin-bottom: 1.2rem; max-width: 64ch; color: var(--velato); }

/* ── Un filo rosso ── */

.filo-titolo {
  font-family: var(--font-voce);
  font-weight: 380;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--inchiostro);
  margin-bottom: clamp(2rem, 5vh, 3rem);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  max-width: 22ch;
}
.filo-titolo em {
  font-style: italic;
  color: var(--rosso);
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
}
.filo-titolo--stretto { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 1.4rem; }

.filo-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.filo-corpo p:not(.capoverso) { max-width: 58ch; color: #3A3548; }

.fascicoli { display: flex; flex-direction: column; gap: 1rem; }
.fascicolo {
  background: #FBF7EE;
  border: 1px solid var(--linea-carta);
  border-left: 4px solid var(--rosso);
  border-radius: 4px;
  box-shadow: 0 10px 26px rgba(20, 16, 32, 0.06);
  transition: box-shadow 0.35s ease;
}
.fascicolo[open] { box-shadow: 0 22px 44px rgba(20, 16, 32, 0.1); }
.fascicolo summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fascicolo summary::-webkit-details-marker { display: none; }
.fascicolo-titolo {
  font-family: var(--font-voce);
  font-size: 1.35rem;
  font-weight: 480;
  color: var(--inchiostro);
  transition: color 0.3s ease, font-style 0.3s ease;
}
.fascicolo summary:hover .fascicolo-titolo { color: var(--rosso); font-style: italic; }
.fascicolo-segno {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.fascicolo-segno::before, .fascicolo-segno::after {
  content: "";
  position: absolute;
  background: var(--rosso);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fascicolo-segno::before { left: 0; right: 0; top: 7px; height: 2px; }
.fascicolo-segno::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.fascicolo[open] .fascicolo-segno::after { transform: scaleY(0); }
.fascicolo[open] .fascicolo-segno::before { transform: rotate(180deg); }
.fascicolo-corpo { padding: 0.2rem 1.5rem 1.6rem; }
.fascicolo-corpo p { margin-bottom: 1rem; color: #3A3548; font-size: 0.94rem !important; }
.fascicolo-corpo a { color: var(--rosso); text-decoration: none; border-bottom: 1px solid rgba(229, 56, 47, 0.35); }
.fascicolo-corpo a:hover { color: var(--inchiostro); border-color: var(--inchiostro); }
.fascicolo--largo { margin-top: 2.6rem; border-left-color: var(--ambra); }
.fascicolo--largo .fascicolo-segno::before, .fascicolo--largo .fascicolo-segno::after { background: #B07E1E; }

/* ── Poesia ── */

.poesia { overflow: hidden; }
.poesia .mondo-interno {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(3.5rem, 8vh, 5.5rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}
/* l'eco: il gesto di luce dietro i versi (l'immagine è nera:
   con lo screen resta solo il tratto rosso sospeso nella notte) */
@keyframes eco-respira {
  0%, 100% { transform: scale(1) translateX(0); opacity: 0.9; }
  50% { transform: scale(1.045) translateX(-1.2%); opacity: 1; }
}
.poesia-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../img/eco-poesia.webp) right center / cover no-repeat;
  mix-blend-mode: screen;
  animation: eco-respira 18s ease-in-out infinite;
  pointer-events: none;
}
@media (max-width: 700px) {
  .poesia-fondo { background-position: 78% center; opacity: 0.75; }
}
.poesia-verso {
  position: relative;
  font-family: var(--font-voce);
  font-weight: 380;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem) !important;
  line-height: 1.22;
  color: var(--testo);
  max-width: 22ch;
  margin-bottom: 2.4rem;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.poesia-verso em {
  font-style: italic;
  color: var(--rosso-vivo);
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
}

/* ── Giovanni Gut & AI ── */

.musica { background: radial-gradient(90% 120% at 80% 20%, rgba(229, 56, 47, 0.12), transparent 55%), var(--notte); }
.musica .mondo-interno { padding-top: clamp(2.5rem, 6vh, 4rem); }
.musica-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.musica-corpo p:not(.capoverso) { margin-bottom: 1.2rem; max-width: 62ch; color: var(--velato); }
.musica-azioni { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 2rem; }
.piattaforme { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.piattaforme a {
  font-family: var(--font-segna);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--spento);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.piattaforme a:hover { color: var(--rosso-vivo); border-color: rgba(255, 77, 66, 0.5); }

.giradischi {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-decoration: none;
  justify-self: center;
}
.disco {
  position: relative;
  width: min(320px, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(239, 234, 225, 0.08);
  animation: gira 14s linear infinite;
}
.giradischi:hover .disco { animation-duration: 5s; }
@keyframes gira { to { transform: rotate(360deg); } }
.disco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.vinile {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 17%, rgba(6, 6, 14, 0.85) 18%, rgba(6, 6, 14, 0.82) 19%, transparent 20%),
    repeating-radial-gradient(circle, rgba(239, 234, 225, 0.05) 0 1px, transparent 1px 5px);
  pointer-events: none;
}
.vinile::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--notte);
  box-shadow: 0 0 0 3px rgba(239, 234, 225, 0.18);
}
.giradischi.senza-foto .disco { background: radial-gradient(circle at 35% 30%, #2A2440, var(--notte-2)); }
.eq { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
.eq b {
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ambra), var(--rosso-vivo));
  animation: pulsa 1.1s ease-in-out infinite;
}
.eq b:nth-child(1) { height: 40%; animation-delay: 0s; }
.eq b:nth-child(2) { height: 85%; animation-delay: 0.18s; }
.eq b:nth-child(3) { height: 60%; animation-delay: 0.34s; }
.eq b:nth-child(4) { height: 95%; animation-delay: 0.12s; }
.eq b:nth-child(5) { height: 50%; animation-delay: 0.26s; }
@keyframes pulsa { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
.disco-nome {
  font-family: var(--font-segna);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--spento);
  transition: color 0.3s ease;
}
.giradischi:hover .disco-nome { color: var(--testo); }

/* ── Podcast / onde ── */

.podcast-testa { max-width: 68ch; margin-bottom: 2.6rem; }
.onde {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  align-items: start;
  perspective: 1200px;
  margin-bottom: clamp(3.5rem, 8vh, 5.5rem);
}
/* Ogni podcast è un nastro: due bobine, la sua onda, la sua tinta.
   A riposo sta un po' storto, come una cassetta appoggiata sul tavolo. */
.onda {
  position: relative;
  background:
    radial-gradient(130% 110% at 80% -10%, color-mix(in srgb, var(--accento-vivo) 16%, transparent), transparent 55%),
    var(--inchiostro);
  color: var(--testo);
  border: 1px solid color-mix(in srgb, var(--accento-vivo) 35%, transparent);
  border-radius: 14px;
  padding: 1.7rem 1.7rem 1.6rem;
  overflow: hidden;
  transform: rotate(var(--inclina, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.4s ease;
  box-shadow: 0 20px 44px rgba(20, 16, 32, 0.26);
  display: flex;
  flex-direction: column;
}
.onda:nth-child(2) { margin-top: 2.8rem; }
.onda:nth-child(3) { margin-top: 5.6rem; }
.onda:hover { box-shadow: 0 36px 76px rgba(20, 16, 32, 0.38); }
.onda-lucido {
  position: absolute;
  inset: 0;
  background: radial-gradient(220px 220px at var(--lx, 50%) var(--ly, 0%), rgba(239, 234, 225, 0.09), transparent 65%);
  pointer-events: none;
}
.nastro {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.3rem;
  transform: translateZ(18px);
}
.bobina {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accento-vivo) 65%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bobina i {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--inchiostro) 0 26%, transparent 27%),
    repeating-conic-gradient(var(--accento-vivo) 0 9deg, transparent 9deg 60deg);
  animation: bobina-gira 7s linear infinite;
}
.bobina:last-child i { animation-duration: 9s; animation-direction: reverse; }
.onda:hover .bobina i { animation-duration: 1.4s; }
.onda:hover .bobina:last-child i { animation-duration: 1.9s; }
@keyframes bobina-gira { to { transform: rotate(360deg); } }
.onda-forma { flex: 1; min-width: 0; height: 44px; opacity: 0.95; }
.onda-titolo {
  font-family: var(--font-voce);
  font-style: italic;
  font-weight: 450;
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 0.9rem;
  transform: translateZ(26px);
}
.onda-titolo::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  margin-top: 0.7rem;
  background: var(--accento-vivo);
}
.onda-testo { font-size: 0.88rem !important; color: var(--velato); flex: 1; margin-bottom: 1.3rem; transform: translateZ(14px); }
.onda-ascolta { display: flex; gap: 1.3rem; transform: translateZ(20px); }
.onda-ascolta a {
  font-family: var(--font-segna);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accento-vivo);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accento-vivo) 40%, transparent);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.onda-ascolta a:hover { color: var(--testo); border-color: var(--testo); }

.strumenti { max-width: 68ch; }
.strumenti p:not(.capoverso) { color: #3A3548; margin-bottom: 1.6rem; }

/* ── L'intreccio (CV dataviz) ── */

.percorso { background: radial-gradient(120% 90% at 50% 0%, rgba(140, 130, 255, 0.07), transparent 55%), var(--notte); }
.percorso-testa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-bottom: 1.6rem;
}
.percorso-titolo {
  font-family: var(--font-voce);
  font-weight: 380;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
  color: var(--testo);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.percorso-titolo em {
  font-style: italic;
  color: var(--rosso-vivo);
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
}
.intreccio-intro {
  font-family: var(--font-voce);
  font-style: italic;
  font-size: 1.05rem !important;
  color: var(--spento);
  max-width: 46ch;
  margin-bottom: 0.4rem;
}
.intreccio-guida {
  font-family: var(--font-segna);
  font-size: 0.66rem !important;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 77, 66, 0.75);
  margin-bottom: 1.8rem;
}

.intreccio { position: relative; }
#intreccioTela {
  display: block;
  width: 100%;
  height: 460px;
  cursor: pointer;
}
.intreccio-scheda {
  position: absolute;
  top: 1rem;
  right: 0;
  width: min(340px, 86vw);
  background: rgba(13, 13, 28, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--filo, var(--rosso-vivo));
  border-radius: 8px;
  padding: 1.3rem 1.5rem 1.2rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
  z-index: 5;
}
.intreccio-scheda.visibile { opacity: 1; transform: translateY(0); }
.intreccio-scheda.a-sinistra { right: auto; left: 0; }
.scheda-testa { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.55rem; }
.scheda-anno {
  font-family: var(--font-segna);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--testo);
}
.scheda-mondo {
  font-family: var(--font-segna);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--filo, var(--rosso-vivo));
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
}
.scheda-nome {
  font-family: var(--font-voce);
  font-size: 1.35rem !important;
  font-weight: 450;
  line-height: 1.2;
  color: var(--testo);
  margin-bottom: 0.25rem;
}
.scheda-sotto { font-size: 0.82rem !important; color: var(--spento); margin-bottom: 0.7rem; }
.scheda-svolta {
  font-family: var(--font-voce);
  font-style: italic;
  font-size: 0.95rem !important;
  line-height: 1.5;
  color: var(--filo, var(--rosso-vivo));
}

.intreccio-tappe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
}
.tappa {
  font-family: var(--font-segna);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--spento);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.tappa i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--colore, var(--rosso-vivo));
  flex-shrink: 0;
}
.tappa:hover { color: var(--testo); border-color: var(--colore, var(--rosso-vivo)); transform: translateY(-2px); }
.tappa.attiva {
  color: var(--notte);
  background: var(--colore, var(--rosso-vivo));
  border-color: var(--colore, var(--rosso-vivo));
  font-weight: 600;
}
.tappa.attiva i { background: var(--notte); }

.intreccio-piede {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  border-top: 1px solid var(--linea);
  margin-top: 2rem;
  padding-top: 1.1rem;
}
.intreccio-conto {
  font-family: var(--font-segna);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--spento);
}
.intreccio-motto {
  font-family: var(--font-voce);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--spento);
}

/* ── Il registro ── */

.registro { margin-top: clamp(4rem, 9vh, 6.5rem); }
.registro-linguette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.4rem;
}
.linguetta {
  font-family: var(--font-segna);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spento);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.75rem 1.3rem;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  text-align: left;
}
.linguetta b {
  font-family: var(--font-voce);
  font-style: italic;
  font-weight: 450;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--rosso-vivo);
  margin-left: 0.5rem;
}
.linguetta:hover { color: var(--testo); border-color: rgba(239, 234, 225, 0.4); }
.linguetta.attiva {
  color: var(--testo);
  background: rgba(255, 77, 66, 0.1);
  border-color: var(--rosso-vivo);
}

.registro-pagina { display: none; }
.registro-pagina.attiva { display: block; animation: sfoglia 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sfoglia {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.voce {
  position: relative;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.7rem 0 1.7rem 1.1rem;
  border-bottom: 1px solid var(--linea);
  transition: background 0.3s ease;
}
/* il filo che si accende accanto alla voce */
.voce::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.9rem;
  bottom: 1.9rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--rosso-vivo), var(--ambra));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.voce:hover::before { transform: scaleY(1); }
.voce:last-child { border-bottom: 0; }
.voce-quando {
  font-family: var(--font-segna);
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rosso-vivo);
  padding-top: 0.5rem;
}
.voce h3 {
  font-family: var(--font-voce);
  font-weight: 450;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--testo);
  margin-bottom: 0.3rem;
  transition: color 0.3s ease;
}
.voce:hover h3 { color: var(--ambra); }
.voce-dove {
  font-family: var(--font-segna);
  font-size: 0.78rem !important;
  letter-spacing: 0.06em;
  color: var(--spento);
  margin-bottom: 0.7rem;
}
.voce-testo { font-size: 0.92rem !important; color: var(--velato); max-width: 68ch; }

/* ── Formazione ── */

.studi { border-top: 1px solid var(--linea-carta); }
.studio {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--linea-carta);
}
.studio-anno {
  font-family: var(--font-voce);
  font-style: italic;
  font-weight: 380;
  font-size: 1.9rem !important;
  color: var(--rosso);
  line-height: 1;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.studio-nome {
  font-family: var(--font-voce);
  font-weight: 480;
  font-size: 1.25rem;
  color: var(--inchiostro);
  line-height: 1.25;
}
.studio-dove { font-size: 0.85rem !important; color: var(--spento-carta); margin-top: 0.15rem; }

.attestati {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 2rem;
  margin-top: 0.4rem;
}
.attestato { display: flex; flex-direction: column; padding: 0.55rem 0; border-bottom: 1px dashed var(--linea-carta); }
.attestato b { font-weight: 500; font-size: 0.92rem; color: var(--inchiostro); }
.attestato span { font-size: 0.78rem; color: var(--spento-carta); }

/* ── Pubblicazioni / lo scaffale ── */

.scaffale-sezione { background: var(--carta-2); }
.scaffale {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding: 2rem 0 3rem;
  border-bottom: 1px solid var(--linea-carta);
}
.libro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  perspective: 1000px;
}
.libro-corpo {
  position: relative;
  display: block;
  width: 168px;
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
  transform: rotateY(-26deg);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.libro:hover .libro-corpo { transform: rotateY(-7deg) translateY(-10px); }
.libro-corpo::before {
  content: "";
  position: absolute;
  left: 6%;
  right: -8%;
  bottom: -16px;
  height: 26px;
  background: radial-gradient(50% 100% at 50% 50%, rgba(20, 16, 32, 0.35), transparent 70%);
  transform: rotateX(90deg) translateZ(-24px) scaleY(2.2);
  filter: blur(6px);
}
.libro-fronte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px 6px 6px 2px;
  backface-visibility: hidden;
  transform: translateZ(14px);
  box-shadow: 14px 22px 34px rgba(20, 16, 32, 0.3);
}
.libro-dorso {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 28px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--dorso) 72%, black), var(--dorso));
  transform: rotateY(-90deg) translateZ(14px);
  transform-origin: left;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font-family: var(--font-voce);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(242, 236, 226, 0.92);
  padding: 0.8rem 0;
  border-radius: 2px 0 0 2px;
}
.libro-pagine {
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: 0;
  width: 26px;
  transform: rotateY(90deg) translateZ(154px);
  transform-origin: right;
  background: repeating-linear-gradient(90deg, #E9E2D2 0 2px, #D9D0BC 2px 3px);
  border-radius: 0 2px 2px 0;
}
.libro.senza-foto .libro-fronte { display: none; }
.libro.senza-foto .libro-corpo::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateZ(14px);
  border-radius: 2px 6px 6px 2px;
  background: linear-gradient(150deg, var(--dorso), color-mix(in srgb, var(--dorso) 55%, black));
}
.libro-didascalia { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.15rem; max-width: 220px; }
.libro-didascalia b {
  font-family: var(--font-voce);
  font-style: italic;
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--inchiostro);
}
.libro-didascalia span { font-size: 0.78rem; color: var(--spento-carta); }

.antologie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: 2.6rem;
}
.antologia p { font-size: 0.95rem !important; color: #3A3548; margin-bottom: 0.5rem; }
.antologia .ritaglio-etichetta { margin-bottom: 0.9rem; }

/* ── Coda ── */

.coda {
  position: relative;
  z-index: 1;
  background: var(--notte);
  border-top: 1px solid var(--linea);
}
.coda .mondo-interno { padding-bottom: 3rem; }
.lettera { text-align: center; max-width: 620px; margin: 0 auto 3rem; }
.lettera .mondo-etichetta { justify-content: center; }
.lettera .mondo-etichetta::after { display: none; }
.lettera-nome {
  font-family: var(--font-voce);
  font-style: italic;
  font-weight: 430;
  font-size: clamp(2.6rem, 7vw, 4.6rem) !important;
  line-height: 1.05;
  background: linear-gradient(100deg, var(--rosso-vivo), var(--ambra) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.8rem;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
}
.lettera-motto {
  font-family: var(--font-voce);
  font-style: italic;
  font-size: 1.05rem !important;
  color: var(--spento);
  margin-bottom: 1.3rem;
}
.lettera-testo { color: var(--velato); font-size: 0.98rem !important; margin-bottom: 2rem; }

.coda-filo { margin: 2.5rem 0; }
.coda-filo svg { width: 100%; height: 40px; }

.coda-riga {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2.2rem;
}
.coda-nome { font-family: var(--font-voce); font-size: 1.7rem !important; font-weight: 450; color: var(--testo); }
.coda-ruoli {
  font-family: var(--font-segna);
  font-size: 0.62rem !important;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--spento);
  margin: 0.3rem 0 1rem;
}
.coda-recapiti { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; margin-bottom: 1.6rem; }
.coda-recapiti a { color: var(--testo); text-decoration: none; border-bottom: 1px solid var(--linea); transition: color 0.3s, border-color 0.3s; }
.coda-recapiti a:hover { color: var(--rosso-vivo); border-color: var(--rosso-vivo); }
.coda-recapiti span { color: var(--spento); }
.coda-legami {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 0.7rem 1.4rem;
}
.legame {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  padding: 0.55rem 0.8rem;
  margin: -0.1rem -0.8rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.legame:hover {
  border-color: rgba(255, 77, 66, 0.35);
  background: rgba(255, 77, 66, 0.06);
  transform: translateY(-2px);
}
.legame-icona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--linea);
  color: var(--spento);
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.legame-icona svg { width: 19px; height: 19px; }
.legame:hover .legame-icona {
  color: var(--rosso-vivo);
  border-color: rgba(255, 77, 66, 0.5);
  transform: rotate(-6deg);
}
.legame-testo { display: flex; flex-direction: column; line-height: 1.3; }
.legame-testo b {
  font-family: var(--font-segna);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--testo);
}
.legame-testo i {
  font-family: var(--font-voce);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--spento);
}
.legame:hover .legame-testo i { color: var(--velato); }

/* ── Svelamenti ── */

.svelabile {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.svelabile.svelato { opacity: 1; transform: translateY(0); }

/* ── Responsive ── */

@media (max-width: 1180px) {
  .spina { display: none; }
}

@media (max-width: 960px) {
  .apertura-griglia { grid-template-columns: 1fr; }
  .apertura-volto { display: none; }
  .coaching-griglia, .ai-griglia, .filo-griglia, .musica-griglia, .rosa-griglia { grid-template-columns: 1fr; }
  #rosaTela { height: 320px; }
  .coda-legami { grid-template-columns: 1fr; gap: 0.4rem; }
  .coaching-margine { position: static; }
  .ai-pannello { position: static; max-width: 520px; }
  .onde { grid-template-columns: 1fr; max-width: 560px; }
  .onda:nth-child(2), .onda:nth-child(3) { margin-top: 0; }
  .giradischi { justify-self: start; }
  .intreccio-scheda { position: static; width: 100%; margin-top: 1rem; display: none; }
  .intreccio-scheda.visibile { display: block; }
  #intreccioTela { height: 520px; }
  .antologie { grid-template-columns: 1fr; }
  .attestati { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .apri-indice { display: flex; }
  .testata-cta { display: none; }
  .voce { grid-template-columns: 1fr; gap: 0.3rem; padding: 1.4rem 0; }
  .voce-quando { padding-top: 0; }
  .studio { grid-template-columns: 84px 1fr; gap: 1rem; }
  .studio-anno { font-size: 1.4rem !important; }
  .apertura-piede { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .scorri { display: none; }
  .percorso-testa { flex-direction: column; align-items: flex-start; }
  #intreccioTela { height: 480px; }
  .linguetta { width: 100%; }
}

/* ── Movimento ridotto ── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .svelabile { opacity: 1; transform: none; }
  .urlo .lettera { transform: none; opacity: 1; }
  .urlo-sotto, .urlo-coda { opacity: 1; transform: none; }
  .disco { animation: none; }
}