@font-face {
  font-family: "Geist Pixel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/geist-pixel.ttf") format("truetype");
}

:root {
  --bg: #000;
  --surface: #17171f;
  --text: #e8e8ea;
  --muted: #9a9aa5;
  --accent: #fee906;
  --radius: 12px;
  /*
   * Larghezza colonna contenuto — in rem (NON px) apposta: cosi entra nel
   * sistema fluido del font di root e resta la STESSA proporzione dello schermo
   * a qualsiasi DPI/zoom/OS. 48.9rem = 880px al font di riferimento (18px @1920),
   * quindi su Linux 1920 e' identico a prima; su Windows non serve piu lo zoom 80%.
   */
  --maxw: 48.9rem;
  --font-title: "Geist Pixel", sans-serif;
}

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


.section__title,
.thought__title,
.card__title,
.music-player__title,
.cbox__title {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "ELSH" 0;
}


html {
  background: var(--bg);
  min-height: 100%;

  /*
   * Font di root FLUIDO, legato alla larghezza della finestra.
   * Tutto il layout (testi + decorazioni in rem) scala come un blocco unico,
   * quindi zoom del browser, DPI di Windows e OS diversi NON spostano piu le
   * decorazioni sopra il testo: tutti vedono la stessa cosa.
   *
   * Coefficiente 0.9375vw = calibrato sui due riferimenti "buoni" su Linux:
   *   1920px -> 18px   (1920 * 0.9375% = 18)
   *   2560px -> 24px   (2560 * 0.9375% = 24)
   * clamp = non scende sotto 13px (laptop piccoli) ne sale sopra 26px (monitor enormi).
   */
  font-size: clamp(13px, 0.9375vw, 26px);
}

/* Telefoni: font fisso leggibile, hanno gia il loro layout dedicato piu sotto. */
@media (max-width: 700px) { html { font-size: 17px; } }

body {
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }


.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 83% 100%);
}
.bg__grid {
  position: absolute;
  top: -30%;
  left: -15%;
  width: 130%;
  height: 160%;
  display: grid;
  
  grid-template-columns: 1.1fr 0.8fr 1.3fr 0.9fr 1.2fr 1fr 1.4fr 0.85fr 1.15fr 0.95fr 1.25fr 1.05fr;
  grid-template-rows: 1fr 1.3fr 0.8fr 1.1fr 0.9fr 1.2fr 1fr 1.35fr 0.85fr 1.15fr;
  grid-auto-flow: dense;
  gap: 3px; 
  
  transform: skewX(24deg) skewY(10deg);
}
.bg__cell {
  position: relative;
  background-position: center;
  background-size: cover;
}


.bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0); 
}

.bg__cell:has(> .bg__video) {
  contain: layout paint;
  isolation: isolate;
}


.bg__fade {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.bg__cell--w2 { grid-column: span 2; }
.bg__cell--h2 { grid-row: span 2; }


main, .site-footer {
  position: relative;
  z-index: 1;
}


.has-bg main, .has-bg .site-header { pointer-events: none; }
.has-bg main a, .has-bg .site-header a { pointer-events: auto; }


.bg__cell--landscape,
.bg__cell--portrait,
.bg__cell--square,
.bg__cell--media { background-color: #000; }


.site-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: transparent;
}

body:not(.page-home) .site-header {
  z-index: 20;
  padding-bottom: 4rem;   
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.96) 0%,
    rgba(0, 0, 0, 0.92) 35%,
    rgba(0, 0, 0, 0.8) 55%,
    rgba(0, 0, 0, 0.45) 78%,
    rgba(0, 0, 0, 0) 100%
  );
}
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__brand {
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.8);
}
.nav__links { display: flex; gap: 1.25rem; list-style: none; }
.nav__links a {
  color: var(--text);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.8);
}
.nav__links a:hover { color: #fff; text-decoration: none; }


.nav__toggle {
  display: none;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 101;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0.5rem 0.35rem;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.15s ease;
}

body.nav-open .nav__toggle-bar:nth-child(1) { transform: translateY(0.55rem) rotate(45deg); }
body.nav-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav__toggle-bar:nth-child(3) { transform: translateY(-0.55rem) rotate(-45deg); }

.nav__links a.active {
  position: relative;
  color: #ff2b2b;
  text-shadow:
    0 0 6px rgba(255, 60, 60, 0.65),
    0 0 14px rgba(255, 40, 40, 0.4);
  isolation: isolate;
}
.nav__links a.active::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: #ffe4e4; 
  pointer-events: none;
  text-shadow:
    0 0 8px rgba(255, 90, 90, 0.9),
    0 0 20px rgba(255, 40, 40, 0.6);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 50%,
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 50%,
    transparent 100%
  );
  -webkit-mask-size: 200% 100%;
          mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: nav-active-sweep 2.2s linear infinite;
}

@keyframes nav-active-sweep {
  0% {
    -webkit-mask-position: 200% 0;
            mask-position: 200% 0;
  }
  55% {
    -webkit-mask-position: -200% 0;
            mask-position: -200% 0;
  }
  100% {
    -webkit-mask-position: -200% 0;
            mask-position: -200% 0;
  }
}


.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6rem 1rem 4rem;
  text-align: center;
}
.hero__title { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: 0.5rem; }
.hero__subtitle { color: var(--muted); font-size: 1.15rem; margin-bottom: 2rem; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #111;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
}
.btn:hover { text-decoration: none; opacity: 1; }


.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3rem 1rem;
}

.section__title,
.section__subtitle {
  color: #F527EB;
}

.section__divider {
  border: 0;
  height: 1px;
  background: #ffffff22;
  margin: 2.5rem 0;
}
.section__title {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.section p { margin-bottom: 1rem; }
.section p:last-child { margin-bottom: 0; }
.section__subtitle {
  font-size: 1.3rem;
  margin: 2rem 0 1rem;
}

.page-chi-sono .section__title,
#thoughts .section__title,
#skills .section__title,
#contact .section__title {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
}

#skills .section__title { font-size: 2.6rem; }
#skills .section__subtitle { font-size: 1.9rem; }

.about-spacer { height: 2.5rem; }

#about strong {
  color: #FF8C00;
  font-weight: 700;
  text-shadow: 0 0 0.3em rgba(255, 140, 0, 0.5);
}

.shimmer-tag {
  display: inline-block;
  position: relative;
  margin-left: 40em;   
  vertical-align: -0.1em; 
  top: 0.4em;             
  font-size: 0.42em;
  font-weight: 600;
  font-family: Georgia, "Times New Roman", "Cambria", serif;
  letter-spacing: 0.03em;
  color: #b8860b;
}

.shimmer-tag::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: #ffffff;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 50%,
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 50%,
    transparent 100%
  );
  -webkit-mask-size: 200% 100%;
          mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: shimmer-sweep 4s linear infinite;
}

@keyframes shimmer-sweep {
  0% {
    -webkit-mask-position: 200% 0;
            mask-position: 200% 0;
  }
  40% {
    -webkit-mask-position: -200% 0;
            mask-position: -200% 0;
  }
  100% {
    -webkit-mask-position: -200% 0;
            mask-position: -200% 0;
  }
}

@media (orientation: portrait), (max-width: 700px) {
  .shimmer-tag {
    margin-left: 1em;
    font-size: 0.5em;
    top: 0.3em;
  }
}

.music-player {
  position: absolute;
  top: 7.4rem;
  right: 3rem;
  
  width: 18.7rem;
  aspect-ratio: 16 / 9;
  background: url("../assets/player-frame.jpg") no-repeat center / 100% 100%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.7rem 1.9rem;
  color: #fee906;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
}
.music-player__row-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-left: 0.8rem;
}
.music-player__row-bottom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.4rem;
}

.music-player__volume { flex: 1 1 0; min-width: 0; max-width: 55%; }

.music-player__next {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  transition: transform 0.1s ease, color 0.1s ease;
}
.music-player__next:hover { color: #fee906; transform: translateX(2px); }

.music-player--home {
  position: fixed;
  top: auto;
  right: auto;
  bottom: 1.5rem;
  left: clamp(1rem, 4vw, 3.5rem);
  
  width: 17.6rem;
  aspect-ratio: 16 / 9;
  z-index: 4;
}

.music-player--home .music-player__row-top { padding-left: 0.8rem; }
.music-player--home .music-player__row-bottom { padding: 0 0.4rem; }
.music-player--home .music-player__volume { max-width: 55%; }
.music-player__cover {
  position: relative; 
  flex: 0 0 auto;
  width: 5rem;
  height: 4.5rem;
  background: #000;
  border: 2px solid #000;
  border-radius: 5px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease;
}
.music-player__cover:hover { transform: scale(1.03); }

.music-player__cover-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  border-radius: 5px;
}
.music-player__cover-icon.is-visible { opacity: 1; }
.music-player__cover-icon svg {
  width: 45%;
  height: 45%;
  display: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.music-player__cover-icon.show-play  .music-player__cover-icon-play  { display: block; }
.music-player__cover-icon.show-pause .music-player__cover-icon-pause { display: block; }
.music-player__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.music-player__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.music-player__title {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #e8e8ea;
  
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.music-player__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.music-player__prev,
.music-player__next {
  background: transparent;
  border: none;
  color: #fee906;
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0.2rem;
  line-height: 1;
}
.music-player__prev:hover,
.music-player__next:hover { color: #fff; }

.music-player__speaker {
  flex: 0 0 auto;
  display: inline-block;
  color: #ffffff;
  width: 18px;
  height: 18px;
}
.music-player__speaker-body {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-linejoin: round;
}
.music-player__wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: opacity 0.15s ease;
  opacity: 0.15; 
}
.music-player--vol-1 .music-player__wave--1 { opacity: 1; }
.music-player--vol-2 .music-player__wave--1,
.music-player--vol-2 .music-player__wave--2 { opacity: 1; }
.music-player--vol-3 .music-player__wave--1,
.music-player--vol-3 .music-player__wave--2,
.music-player--vol-3 .music-player__wave--3 { opacity: 1; }


.music-player__volume,
.music-player__progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: 1;
  min-width: 0;
  height: 14px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
  outline: none;
}

.music-player__volume::-webkit-slider-runnable-track,
.music-player__progress::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(245, 39, 235, 0.9) 0%,
    rgba(0, 190, 255, 0.9) 33%,
    rgba(254, 233, 6, 0.9) 66%,
    rgba(47, 224, 138, 0.9) 100%
  );
  box-shadow:
    0 0 4px rgba(245, 39, 235, 0.55),
    0 0 8px rgba(0, 190, 255, 0.45),
    0 0 6px rgba(254, 233, 6, 0.4);
}
.music-player__volume::-webkit-slider-thumb,
.music-player__progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: none;
  margin-top: -4px; 
  cursor: pointer;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.music-player__volume::-moz-range-track,
.music-player__progress::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  border: none;
  background: linear-gradient(
    90deg,
    rgba(245, 39, 235, 0.9) 0%,
    rgba(0, 190, 255, 0.9) 33%,
    rgba(254, 233, 6, 0.9) 66%,
    rgba(47, 224, 138, 0.9) 100%
  );
  box-shadow:
    0 0 4px rgba(245, 39, 235, 0.55),
    0 0 8px rgba(0, 190, 255, 0.45),
    0 0 6px rgba(254, 233, 6, 0.4);
}
.music-player__volume::-moz-range-thumb,
.music-player__progress::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}
.music-player__time {
  font-size: 0.65rem;
  color: #cfcfcf;
  min-width: 2.5em;
  text-align: right;
}

.music-player__audio { display: none; }


@media (orientation: portrait), (max-width: 700px) {
  
  body:not(.nav-open):not(.page-home) .site-header {
    display: none !important;
  }
  body:not(.page-home) .nav__toggle {
    display: flex;
  }
  body.nav-open .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    background: rgba(0, 0, 0, 0.96);
    padding: 5rem 2rem 2rem 2rem !important;
    z-index: 100 !important;
    height: auto !important;
  }
  body.nav-open .nav {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.2rem !important;
    justify-content: flex-start !important;
  }
  body.nav-open .nav__links {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.4rem !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  body.nav-open .nav__links a {
    font-size: 1.9rem !important;
  }
  .music-player {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 68vw;
    
    margin: 0.75rem auto 1.5rem;
    transform: translateX(-4px);
  }
  .music-player--home {
    
    position: fixed;
    top: auto;
    right: auto;
    left: 3vw;
    bottom: 0.8rem;
    width: 78vw;
    margin: 0;
    transform: scale(0.75);
    transform-origin: bottom left;
  }
  
  .music-player__title { font-size: 0.6rem; }
}


@media (orientation: portrait) and (min-width: 480px) {
  .music-player--home {
    width: min(78vw, 460px);
    transform: scale(0.58);
    transform-origin: bottom left;
  }
}

/* Monitor Full HD ruotato (1080x1920 e simili): NON e' un telefono, ma cade lo
   stesso in "orientation: portrait". Qui la box da 460px scalata a 0.58 sballava
   le proporzioni interne (copertina e barra volume troppo piccole rispetto alla
   cornice) e il player finiva sotto "Contatti". Riparto dalla geometria del
   desktop e la ingrandisco in blocco: cosi copertina, volume e titolo restano
   proporzionati alla cornice invece di essere ridimensionati uno a uno.
   min-width 1000px = fuori dai telefoni (<=700) e dai tablet (768-834). */
@media (orientation: portrait) and (min-width: 1000px) {
  .music-player--home {
    width: 17.6rem;
    left: clamp(1rem, 4vw, 3.5rem);
    bottom: 1.5rem;
    transform: scale(1.45);
    transform-origin: bottom left;
  }
  .music-player--home .music-player__title { font-size: 0.75rem; }

  /* Stessa storia su chi-sono, dove il player sta nel flusso: la regola dei
     telefoni lo stira a 68vw (~734px) lasciando copertina, volume e titolo
     alla loro misura in rem, quindi ammassati in un angolo della cornice.
     Anche qui riparto dalla geometria del desktop e scalo tutto in blocco.
     Scoped su .page-chi-sono per non toccare il player della home. */
  .page-chi-sono .music-player {
    width: 18.7rem;
    transform: scale(1.45);
    transform-origin: top center;
    /* transform non occupa spazio nel flusso: recupero a mano i ~4.7rem
       di altezza in piu, altrimenti la cornice finisce sul titolo sotto */
    margin: 0.75rem auto calc(1.5rem + 4.73rem);
  }
  .page-chi-sono .music-player__title { font-size: 0.75rem; }
}


.chi-sono-sfondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 50%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 50%,
    transparent 100%
  );
}

@media (orientation: portrait), (max-width: 700px) {
  .chi-sono-sfondo {
    top: -5rem;
    left: -52%;
    width: 220%;
    opacity: 0.4;
  }
}

.chi-sono-skizzo {
  
  position: absolute;
  top: 7.4rem;
  left: 2rem;
  width: 20rem;
  height: auto;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
  border-radius: 2px;
}

.chi-sono-skizzo--right {
  left: auto;
  right: 2rem;
  top: 28.4rem;
  width: 23rem;
}

.chi-sono-skizzo--right-below {
  left: auto;
  right: 4rem;
  top: 52.4rem;
  width: 15rem;
}

.chi-sono-skizzo--left-below {
  left: 7.9rem;
  top: 76.4rem;
  width: 14rem;
}

.chi-sono-skizzo--left-bottom {
  left: 5rem;
  top: 43.4rem;
  width: 13rem;
  height: auto;
}
@media (max-width: 700px) {
  .chi-sono-skizzo { width: 40vw; opacity: 0.7; }
}

@media (orientation: portrait) {
  .chi-sono-skizzo { display: none; }
}

/*
 * Rete di sicurezza contro le sovrapposizioni su schermi piccoli
 * (telefoni orizzontali, tablet): sbiadisce e rimpicciolisce gli skizzo.
 * DUE fasi separate, cosi l'ombra non arriva prima del necessario:
 *
 * FASE 1 - da 1286px in giu: le foto a piena grandezza inizierebbero a toccare
 * il testo, quindi le RIMPICCIOLISCO -- ma restano a PIENA OPACITA (niente ombra).
 * Cosi restano ben visibili anche se lo schermo si stringe.
 */
@media (min-width: 701px) and (max-width: 1286px) {
  .chi-sono-skizzo { width: 15rem; }
  .chi-sono-skizzo--right { width: 15rem; }
  .chi-sono-skizzo--right-below { width: 11rem; }
  .chi-sono-skizzo--left-below { width: 10rem; }
  .chi-sono-skizzo--left-bottom { width: 10rem; }
}
/*
 * FASE 2 - solo da 1103px in giu: qui anche le foto rimpicciolite arrivano sul
 * testo, e SOLO ora scatta l'ombra (opacita ridotta) + sfondo attenuato.
 */
@media (min-width: 701px) and (max-width: 1103px) {
  .chi-sono-skizzo { opacity: 0.18; }
  .chi-sono-sfondo { opacity: 0.1; }
}

/* Player spostato in alto da 1203px in giu (Linux 100%). */
@media (min-width: 701px) and (max-width: 1203px) and (orientation: landscape) {
  .page-chi-sono .music-player {
    top: 6rem;
    right: 4rem;
  }
}

@media (orientation: portrait) and (max-width: 600px) {
  .page-chi-sono { position: relative; }
  .chi-sono-skizzo {
    display: block;
    opacity: 0.35;
    z-index: 0;
    height: auto;
  }
  .chi-sono-skizzo              { top: 10.35%;  left: calc(4vw - 9px); right: auto; width: 52vw; }    /* 1a: abbassata +15% proporzionale (9% -> 10.35%) */
  .chi-sono-skizzo--right       { top: 24%; left: auto; right: 4vw;  width: 57.5vw; }             /* 2a: alzata ~25% (32% -> 24%) */
  .chi-sono-skizzo--left-bottom { top: 39.1%; left: calc(4vw - 9px); right: auto; width: 46vw; }   /* abbassata +15% proporzionale (34% -> 39.1%) */
  .chi-sono-skizzo--right-below { top: 58%; left: auto; right: 5vw;  width: 46vw; }               /* penultima: abbassata nella sezione Vita (48% -> 58%) */
  .chi-sono-skizzo--left-below  { top: calc(69.5% - 13px); left: calc(4vw - 9px); right: auto; width: 50vw; } /* ultima: alzata ancora (70.3% -> 69.5%) */
}


.about-photos {
  position: relative;
  
  width: 100vw;
  height: 40vh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 1rem;
  margin-bottom: 4rem;
  max-width: none;
  aspect-ratio: 4.5 / 1;
  background: #000;
  border: none;
  overflow: hidden;
}

.about-photos__box {
  position: absolute;
  background: transparent;
  background-size: cover;
  background-position: center;
  border: 3px solid;
  overflow: hidden;
}
.about-photos__box > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.about-photos__box--1 {
  left: 12.1%; top: 19.2%;
  width: 20.3%; height: 58.9%;
  transform: rotate(-18.5deg);
  border-color: #4bd9ff;
  z-index: 2;
}

.about-photos__box--2 {
  left: 45.0%; top: 11.4%;
  width: 19.7%; height: 71.1%;
  transform: rotate(-8.3deg);
  border-color: #ff4bd9;
  z-index: 2;
  background-image: url("../assets/faccia.jpeg");
}

.about-photos__box--3 {
  left: 31.8%; top: 8.3%;
  width: 13.6%; height: 85.8%;
  transform: rotate(4.7deg);
  border-color: #ffe14b;
  z-index: 1;
  background-image: url("../assets/bbici.jpg");
}

.about-photos__box--4 {
  left: 63.0%; top: 20.5%;
  width: 16.8%; height: 47.3%;
  transform: rotate(4.7deg);
  border-color: #4bff8b;
  z-index: 1;
}

.about-photos__box--4 p {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: #fff;
  font-size: 0.7rem;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.about-photos__box--5 {
  left: 79.0%; top: 8.4%;
  width: 12.0%; height: 88.0%;
  transform: rotate(10.8deg);
  border-color: #ff8b4b;
  z-index: 2;
  background-image: url("../assets/sballo.jpeg");
}


@media (orientation: portrait) {
  .about-photos__box--1 {
    left: 5.9%; top: 7.2%;
    width: 37.6%; height: 30.5%;
    transform: rotate(-18.5deg);
  }
  .about-photos__box--2 {
    left: 29.1%; top: 27.6%;
    width: 44.8%; height: 47.3%;
    transform: rotate(-8.3deg);
  }
  .about-photos__box--3 {
    left: 5.6%; top: 57.5%;
    width: 30.7%; height: 40.9%;
    transform: rotate(4.7deg);
  }
  .about-photos__box--4 {
    left: 63.3%; top: 5.9%;
    width: 34.1%; height: 31.4%;
    transform: rotate(4.7deg);
  }
  .about-photos__box--5 {
    left: 73.2%; top: 53.2%;
    width: 20.4%; height: 40.5%;
    transform: rotate(10.8deg);
  }
}

.neon-cyan {
  color: #9fefff;
  text-shadow:
    0 0 6px  rgba(120, 220, 255, 0.95),
    0 0 14px rgba(120, 220, 255, 0.65),
    0 0 28px rgba(80, 180, 240, 0.4);
}

.neon-green {
  color: #a8ffbf;
  text-shadow:
    0 0 6px  rgba(120, 255, 160, 0.95),
    0 0 14px rgba(120, 255, 160, 0.65),
    0 0 28px rgba(60, 220, 120, 0.4);
}

.knife-bg {
  position: fixed;
  right: -2vw;
  bottom: 30vh;
  
  width: 45rem;
  height: 12.5rem;
  background: url("../assets/kara-bg.png") no-repeat center / contain;
  transform: rotate(-40deg);
  transform-origin: center right;
  opacity: 0.85;
  filter: drop-shadow(0 0 30px rgba(60, 110, 232, 0.3));
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 700px) {
  .knife-bg { width: 90vw; height: 25vw; opacity: 0.55; }
}



.knife-bg2 {
  position: fixed;
  left: -18vw;
  top: -7vh;
  
  width: 55rem;
  height: 55rem;
  
  object-fit: contain;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 700px) {
  .knife-bg2 { width: 78vw; height: 78vw; opacity: 0.6; }
}


.competenze-deco {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  height: auto;
}
.competenze-deco--left {
  left: 10rem;
  top: 3%;
  width: 15rem;
}
.competenze-deco--right {
  right: 12rem;
  top: -3rem;
  width: 35rem;
  transform: rotate(25deg);
}
@media (orientation: portrait), (max-width: 700px) {
  .competenze-deco { display: none; }
}


.verokara {
  position: fixed;
  right: -9vw;
  top: -10vw;
  
  width: 30rem;
  height: auto;
  object-fit: contain;
  transform: scaleX(-1) rotate(-80deg);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 700px) {
  .verokara { width: 66vw; opacity: 0.7; }
}



.raggi {
  position: fixed;
  right: -0.5vw;
  top: -1.5vw;
  width: 20rem;
  height: auto;
  object-fit: contain;
  mix-blend-mode: screen; 
  opacity: 0.75;
  pointer-events: none;
  z-index: 0; 
}
@media (max-width: 700px) {
  .raggi { width: 48vw; opacity: 0.55; }
}


.knife-bg3 {
  position: fixed;
  left: 1vw;
  bottom: 4vh;
  width: 18rem;
  aspect-ratio: 512 / 384;
  background: url("../assets/butterfly.png") no-repeat center / contain;
  transform: rotate(-18deg);
  transform-origin: center;
  opacity: 0.85;
  filter: drop-shadow(0 0 24px rgba(210, 60, 150, 0.28));
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 700px) {
  .knife-bg3 { width: 46vw; opacity: 0.55; }
}


.link-esadecimale { color: #F527EB; }
.link-esadecimale:hover { color: #fa6bf3; }

.study-list {
  padding-left: 1.2rem;
  display: grid;
  gap: 1rem;
}
.study-list li { padding-left: 0.3rem; }
.study-list li::marker { color: #2fe08a; }

.study-list li strong {
  background: linear-gradient(100deg,
    #aeffcf 0%,
    #34e78a 32%,
    #12c96a 60%,
    #0aa85c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #23d178; 
  text-shadow: 0 0 12px rgba(40, 220, 130, 0.35);
}


.contact-ig {
  display: block;
  max-width: min(760px, 100%);
  margin: 2rem auto 0;
  border: 1px solid #ffffff14;
  border-radius: var(--radius);
}


#contact hr {
  border: 0;
  height: 1px;
  background: #ffffff22;
  width: min(340px, 60%);
  margin: 3rem auto;
}


.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.card {
  background: var(--surface);
  border: 1px solid #ffffff10;
  border-radius: var(--radius);
  padding: 1.25rem;
}
.card__title { margin-bottom: 0.4rem; }


.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.tags li {
  background: #ffffff0d;
  border: 1px solid #ffffff14;
  color: var(--text);
  font-size: 0.85rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}


.thoughts {
  display: grid;
  gap: 2.25rem;
}
.thought {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid #ffffff10;
  border-radius: var(--radius);
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.thought--active {
  box-shadow: 0 0 24px -4px #fee9063d;
}

.thought__link { color: inherit; text-decoration: none; }

.thought__link:hover,
.thought__link:focus,
.thought__link:active { text-decoration: none; }
.thought__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.thought--active:hover {
  border-color: var(--accent);
  background: #1c1c26;
  transform: translateY(-2px);
  box-shadow: 0 0 34px -2px #fee9065c;
}
.thought--active:hover .thought__title {
  color: #4dff8f;
  text-shadow: 0 0 12px rgba(0, 255, 95, 0.6);
}

/* stessa intensita' del box giallo (alpha 3d / 5c), solo in rosso */
.thought--active.thought--rosso {
  box-shadow: 0 0 24px -4px #ff2d2d3d;
}
.thought--active.thought--rosso:hover {
  border-color: #ff2d2d;
  box-shadow: 0 0 34px -2px #ff2d2d5c;
}

.thought--dim { opacity: 0.5; }


.thought__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.9rem;
}
.thought__actions .thought__say,
.thought__actions .thought__read {
  margin-top: 0;
}

.thought__say,
.thought__read {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  background: #ffffff0d;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.thought__say:hover,
.thought__read:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: #fee90614;
}
.thought__say:focus-visible,
.thought__read:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.thought__soon {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-style: italic;
  color: #ff3b3b;
  letter-spacing: 0.02em;
}
.thought__title {
  margin-bottom: 0.2rem;
  
  color: #00ff5f;
  text-shadow: 0 0 8px rgba(0, 255, 95, 0.35);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.thought > p {
  font-style: italic;
}


.cbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}
.cbox-overlay[hidden] { display: none; }
body.cbox-open { overflow: hidden; }


.cbox {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(820px, 96vw);
  min-height: min(82vh, 760px);
  max-height: min(92vh, 960px);
  background: #000;
  
  border: 54px solid transparent;
  border-image: url("../assets/cornice.jpg") 210 / 54px / 0 stretch;
  
  padding: 1rem 1.7rem;
  overflow: visible;
  animation: cbox-in 0.2s ease, cbox-ambilight 3.6s ease-in-out infinite;
}
@keyframes cbox-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes cbox-ambilight {
  0%, 100% {
    box-shadow:
      0 0 24px -8px rgba(255, 26, 48, 0.26),
      0 0 56px 0 rgba(255, 0, 30, 0.12),
      0 24px 70px -12px rgba(0, 0, 0, 0.85);
  }
  50% {
    box-shadow:
      0 0 34px -6px rgba(255, 40, 64, 0.40),
      0 0 78px 4px rgba(255, 0, 34, 0.18),
      0 24px 70px -12px rgba(0, 0, 0, 0.85);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cbox {
    animation: cbox-in 0.2s ease;
    box-shadow:
      0 0 28px -6px rgba(255, 32, 56, 0.30),
      0 0 66px 2px rgba(255, 0, 30, 0.15),
      0 24px 70px -12px rgba(0, 0, 0, 0.85);
  }
}
.cbox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.15rem 0.8rem;
  border-bottom: 1px solid #ffffff1f;
}
.cbox__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  
  color: #00ff5f;
  text-shadow: 0 0 8px rgba(0, 255, 95, 0.35);
}
.cbox__list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.9rem 0.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.cbox__empty {
  margin: auto 0;
  text-align: center;
  color: #ffffff66;
  font-size: 0.85rem;
}
.cbox__item {
  background: #ffffff0a;
  border: 1px solid #ffffff10;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
}
.cbox__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;   
  overflow-wrap: anywhere; 
}
.cbox__form {
  flex: none;
  padding: 0.85rem 0.15rem 0;
  border-top: 1px solid #ffffff1f;
}

.cbox__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.cbox__text {
  width: 100%;
  resize: vertical;
  min-height: 2.6rem;
  max-height: 40vh;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: #00000040;
  border: 1px solid #ffffff1f;
  border-radius: 8px;
}
.cbox__text:focus {
  outline: none;
  border-color: #ff3b3b;
  box-shadow: 0 0 0 1px #ff3b3b55, 0 0 16px -6px rgba(255, 40, 60, 0.7);
}

.cbox__text::placeholder { color: #00ff5f; opacity: 0.85; }
.cbox__formrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.6rem;
}
.cbox__note {
  font-size: 0.75rem;
  color: #ffffff80;
}
.cbox__note--error { color: #ff6b6b; }

.cbox__send {
  flex: none;
  padding: 0.45rem 1.2rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ff5a5a;
  background: transparent;
  border: 1px solid #ff3b3b66;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.cbox__send:hover {
  color: #fff;
  background: #ff28401f;
  border-color: #ff3b3b;
  box-shadow: 0 0 16px -3px rgba(255, 40, 60, 0.65);
}
.cbox__send:disabled { opacity: 0.5; cursor: default; }


.cbox__exit {
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  transition: transform 0.15s ease;

}
.cbox__exit img {
  display: block;
  
  height: 3.3rem;
  width: 11vh;
  
  position: relative;
  top: -0.6rem;
}
.cbox__exit:hover { transform: scale(1.08); }
.cbox__exit:focus-visible {
  outline: 2px solid #ff3b3b;
  outline-offset: 2px;
}


.rockstar-video,
.rockstar-img {
  display: block;
  width: 60%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid #ffffff14;
  margin: 1.5rem 0;
  background: #000;
}
.rockstar-h4 {
  font-size: 1.1rem;
  margin-top: 1.5rem;
}

.rockstar-img--portrait {
  width: auto;
  max-width: 284px;
}

.rockstar-video {
  width: 140%;
  max-width: 96vw;
  margin-left: 50%;
  transform: translateX(-50%);
}


.rockstar-sfondo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%,
    #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 75% at 50% 50%,
    #000 50%, transparent 100%);
}

.rockstar-logo {
  position: fixed;
  top: 6rem;
  right: 3rem;
  width: 8rem;
  height: auto;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
}

.rockstar-mouse {
  position: fixed;
  top: 5rem;
  left: -4rem;
  width: 13rem;
  height: auto;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transform: rotate(30deg);
}

.rockstar-pad {
  position: fixed;
  top: 50%;
  right: -3rem;
  width: 13rem;
  height: auto;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transform: translateY(-50%) rotate(-18deg);
}

.rockstar-sofa {
  position: fixed;
  bottom: 2rem;
  right: -4rem;
  width: 18rem;
  height: auto;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
}

.rockstar-pad-mat {
  position: fixed;
  bottom: 2rem;
  left: -5rem;
  width: 15rem;
  height: auto;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transform: rotate(270deg);
}
@media (orientation: portrait), (max-width: 700px) {
  .rockstar-logo { display: none; }
  .rockstar-mouse { display: none; }
  .rockstar-pad { display: none; }
  .rockstar-sofa { display: none; }
  .rockstar-pad-mat { display: none; }
}
.thought__date {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  margin-bottom: 0.6rem;
}


.site-footer {
  text-align: center;
  color: var(--muted);
  padding: 2rem 1rem;
  border-top: 1px solid #ffffff10;
}



.page-contatti {
  display: flex;
  flex-direction: column;
  
  height: 100vh;
  overflow: hidden;
}
.page-contatti main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-contatti #contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
.page-contatti #contact p,
.page-contatti #contact .section__divider { margin: 0; }
.page-contatti #contact .section__divider { width: 60%; }
.page-contatti .contact-ig { max-width: 100%; height: auto; }

.page-contatti #contact p a { color: #00ff5f; }
.page-contatti #contact p a:hover { color: #4dff8f; }


.contact-nokia {
  position: fixed;
  right: 0vw;
  top: 4vw;
  
  width: 28rem;
  height: 39rem;
  object-fit: contain;
  transform: rotate(18deg);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 700px) {
  .contact-nokia { width: 55vw; height: 78vw; opacity: 0.65; }
}


.contact-planet {
  position: fixed;
  left: -3.2rem;
  top: -3.3rem;
  width: 22rem;
  height: 22rem;
  object-fit: contain;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 700px) {
  .contact-planet { width: 48vw; height: 48vw; opacity: 0.7; }
}


.contact-tel {
  position: fixed;
  left: 2rem;
  bottom: 1rem;
  width: 20rem;
  height: auto;
  object-fit: contain;
  transform: rotate(-8deg);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 700px) {
  .contact-tel { width: 42vw; opacity: 0.65; }
}



.pensieri-moon {
  position: fixed;
  left: 0rem;
  top: 0rem;
  width: 20rem;
  height: 20rem;
  object-fit: contain;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
  
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    #000 42%, transparent 50%);
  mask-image: radial-gradient(circle at 50% 50%,
    #000 42%, transparent 50%);
}
@media (max-width: 700px) {
  .pensieri-moon { width: 45vw; height: 45vw; opacity: 0.7; }
}


.pensieri-left-deco {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  width: 14rem;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.pensieri-balloon-deco {
  position: fixed;
  right: 1rem;
  top: 5rem;
  width: 22rem;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.pensieri-trump-deco {
  position: fixed;
  right: 1rem;
  top: 38rem;
  width: 15rem;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.pensieri-sentient-deco {
  position: fixed;
  left: 3rem;
  top: 8rem;
  width: 13rem;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

@media (orientation: portrait) and (max-width: 600px) {
  .page-pensieri { position: relative; }
  .pensieri-left-deco,
  .pensieri-sentient-deco { display: none; }
  .pensieri-balloon-deco,
  .pensieri-trump-deco {
    display: block;
    position: absolute;
    opacity: 0.35;
    z-index: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    height: auto;
    pointer-events: none;
  }
  .pensieri-balloon-deco { top: 42%; width: 70vw; }
  .pensieri-trump-deco   { top: 73%; width: 55vw; }
}

@media (max-width: 600px) and (orientation: landscape) {
  .pensieri-left-deco,
  .pensieri-balloon-deco,
  .pensieri-trump-deco,
  .pensieri-sentient-deco { display: none; }
}

/* FASE 1 - da 1234px in giu: rimpicciolisco le decorazioni (a piena opacita,
   niente ombra) cosi restano fuori dal testo mentre lo schermo si stringe. */
@media (min-width: 601px) and (max-width: 1234px) {
  .pensieri-left-deco,
  .pensieri-balloon-deco,
  .pensieri-trump-deco,
  .pensieri-sentient-deco { display: block; }
  .pensieri-left-deco     { width: 10rem; }
  .pensieri-balloon-deco  { width: 15rem; }
  .pensieri-trump-deco    { width: 11rem; }
  .pensieri-sentient-deco { width: 10rem; }
  .pensieri-moon { width: 14rem; height: 14rem; }
}
/* FASE 2 - solo da 1052px in giu: qui anche le decorazioni rimpicciolite toccano
   il testo, e SOLO ora scatta l'ombra. */
@media (min-width: 601px) and (max-width: 1052px) {
  .pensieri-left-deco,
  .pensieri-balloon-deco,
  .pensieri-trump-deco,
  .pensieri-sentient-deco { opacity: 0.2; }
  .pensieri-moon { opacity: 0.4; }
}

/* --- capolavoro --- */
.capolavoro-intro {
  font-style: italic;
  color: var(--muted);
}

.capolavoro-quote {
  position: relative;
  margin: 2.5rem 0;
  padding: 2rem 1.8rem;
  border-top: 1px solid #ffffff22;
  border-bottom: 1px solid #ffffff22;
  font-style: italic;
  line-height: 2;
}
.capolavoro-quote__note {
  position: absolute;
  top: 0.6rem;
  right: 0;
  font-size: 0.58rem;
  font-style: normal;
  letter-spacing: 0.12em;
  color: var(--muted);
  opacity: 0.7;
}
.capolavoro-quote__attrib {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--muted);
}

/* decorazioni della pagina capolavoro (stesso schema di .pensieri-*-deco).
   Tutto in rem: scala col font fluido di root, quindi resta uguale su ogni schermo. */
.capolavoro-video-deco,
.capolavoro-classe-deco,
.capolavoro-moto-deco {
  position: fixed;
  height: auto;
  border-radius: 3px;
  z-index: 1;
  pointer-events: none;
}

/* video: in alto a sinistra */
.capolavoro-video-deco {
  left: 1.5rem;
  top: 5.5rem;
  width: 12rem;
  max-height: 42vh;  /* su schermi larghi ma bassi si accorcia da solo,
                        cosi non va a sbattere sulla moto qui sotto */
  border: 1px solid #ffffff14;
  background: #000;
}

/* foto di classe: in alto a destra */
.capolavoro-classe-deco {
  right: 5.5rem;   /* 1rem + 25% della larghezza: spostata a sinistra */
  top: 6rem;
  width: 21.6rem;  /* 15rem +20% +20% */
}

/* foto moto: in basso a sinistra, sotto al video */
.capolavoro-moto-deco {
  left: 4.6rem;    /* 1.5rem + 20% della larghezza: spostata a destra */
  bottom: 2rem;    /* abbassata per lasciare spazio al video */
  width: 15.4rem;  /* 11rem + 40% */
  max-height: 38vh;
}

@media (min-width: 601px) and (max-width: 1234px) {
  .capolavoro-video-deco  { width: 9.5rem; }
  .capolavoro-classe-deco { width: 14.4rem; }
  .capolavoro-moto-deco   { width: 11.2rem; }
}
@media (min-width: 601px) and (max-width: 1052px) {
  .capolavoro-video-deco,
  .capolavoro-classe-deco,
  .capolavoro-moto-deco { opacity: 0.2; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .capolavoro-video-deco,
  .capolavoro-classe-deco,
  .capolavoro-moto-deco {
    display: block;
    position: absolute;
    opacity: 0.35;
    z-index: 0;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
  }
  .capolavoro-video-deco  { top: 12%; width: 50vw; }
  .capolavoro-classe-deco { top: 38%; width: 86vw; }
  .capolavoro-moto-deco   { top: 72%; width: 63vw; }
}
@media (max-width: 600px) and (orientation: landscape) {
  .capolavoro-video-deco,
  .capolavoro-classe-deco,
  .capolavoro-moto-deco { display: none; }
}