/* JetBrains Mono ospitato in proprio: servito dalla CDN di Google, il solo
   caricamento della pagina spedirebbe l'IP del visitatore a un terzo, e
   l'informativa promette che questo non accade. I due sottoinsiemi sono quelli
   che il sito usa davvero; gli altri (cirillico, greco, vietnamita) non sono
   stati scaricati. I percorsi sono relativi a questo file, non alla pagina. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/jetbrainsmono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/jetbrainsmono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/jetbrainsmono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/jetbrainsmono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0A0A0B;
  --surface: #131316;
  --rule: #24242A;
  --text: #E9E9E6;
  --mute: #8A8A92;
  --emph: #FFFFFF;

  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --phi: 1.618;
  --col: 1080px;
  /* Il minimo del clamp morde solo sotto i ~480px, quindi stringe i margini
     laterali sul telefono senza toccare il desktop. */
  --pad: clamp(0.9rem, 4.5vw, 4rem);
  --gap-v: clamp(4rem, 9vh, 7rem);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  /* Senza uno sfondo esplicito qui, quello del body si propaga al canvas del
     viewport e non verrebbe invertito dal filtro. */
  background: var(--ink);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body {
  background: var(--ink);
  color: var(--text);
  overflow-x: hidden;
  font-family: var(--mono);
  font-weight: 400;
  line-height: var(--phi);
  text-transform: lowercase;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-lang="it"] .lang-en,
body[data-lang="en"] .lang-it {
  display: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--emph);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.wrap-wide {
  max-width: 1200px;
}

.cap {
  text-transform: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Waveform */
.waveform {
  display: block;
  width: 100%;
  color: #e9e9e6;
}

.waveform.primary {
  height: clamp(80px, 12vh, 130px);
  margin: clamp(1.25rem, 3.5vh, 2rem) 0 0.5rem;
}

/* Header */
.site-header {
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}

.brand {
  font-size: 0.8rem;
  color: var(--text);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-transform: lowercase;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.1rem 1.5rem;
  flex-wrap: wrap;
}

.site-nav {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--mute);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  transition: color 120ms ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--text);
}

.nav-sep {
  color: var(--mute);
  opacity: 0.4;
  font-size: 0.8rem;
  user-select: none;
}

.site-nav a.nav-ree {
  text-transform: uppercase;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.lang-toggle button {
  background: none;
  border: none;
  color: var(--mute);
  cursor: pointer;
  padding: 0.15rem 0.25rem;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  transition: color 120ms ease;
}

.lang-toggle button:hover,
.lang-toggle button.active {
  color: var(--text);
}

.lang-toggle .sep {
  color: var(--mute);
  opacity: 0.4;
  font-size: 0.75rem;
}

/* Invert colors: feature solo telefono, come il burger. */
.invert-toggle {
  display: none;
}

/* Burger: nascosto ovunque, riappare solo nel blocco mobile in fondo. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--text);
  transition: transform 160ms ease, opacity 160ms ease;
}

.site-header[data-menu="open"] .nav-toggle span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.site-header[data-menu="open"] .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.site-header[data-menu="open"] .nav-toggle span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* Page hero */
.page-hero {
  padding: 0 0 clamp(1.5rem, 4vh, 2.5rem);
  text-align: left;
}

.soon-main {
  display: flex;
  align-items: center;
  min-height: 58vh;
}

.soon-main .page-hero {
  width: 100%;
}

.works-page .page-hero .tagline {
  text-align: right;
  max-width: none;
  width: 100%;
  font-size: clamp(0.75rem, 1.2vw, 0.85rem);
}

.info-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34vh;
  padding: var(--pad);
  text-align: center;
}

.info-mail-wrap {
  position: relative;
  display: inline-block;
  /* Il minimo del clamp morde solo sul telefono: il desktop resta a 2.6vw. */
  font-size: clamp(0.79rem, 2.6vw, 1.4rem);
  transform: translateY(2vh);
}

.info-mail {
  position: relative;
  display: inline-block;
  font-size: 1em;
  letter-spacing: 0.02em;
  color: #ffffff;
  animation: mail-shift 2.4s ease-in-out infinite;
}


@keyframes mail-shift {
  0%, 100% {
    color: #ffffff;
  }
  50% {
    color: #d0d0d0;
  }
}

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

.page-hero .eyebrow,
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--mute);
  margin: 0 0 1rem;
}

.page-hero .eyebrow {
  margin-bottom: calc(2.75rem * var(--phi));
}

.eyebrow-sm {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--mute);
  margin: 0 0 0.5rem;
}

.page-hero h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
}

.works-page .wrap-wide {
  max-width: var(--col);
}

.page-hero:has(h1.hero-line) {
  padding-top: calc(clamp(0.75rem, 3vh, 2rem) + 3.75rem * var(--phi));
}

.page-hero h1.hero-line {
  position: relative;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(0.6rem, 1.4vw, 0.95rem);
  letter-spacing: 0.35em;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
  overflow: hidden;
  min-height: clamp(80px, 12vh, 130px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-hero h1.hero-line .waveform.primary {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

.page-hero h1.hero-line span {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* Sotto i ~700px il tracking largo non ci sta piu' nella riga: senza questo
   l'overflow:hidden dell'hero taglia il testo ai lati invece di mandarlo a capo. */
@media (max-width: 700px) {
  .page-hero h1.hero-line {
    letter-spacing: 0.22em;
  }
  .page-hero h1.hero-line span {
    white-space: normal;
  }
}

.tagline {
  color: var(--mute);
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  line-height: var(--phi);
  margin: 1rem 0 0;
  max-width: 70ch;
  white-space: normal;
}

/* Sections */
.section {
  padding: var(--gap-v) 0;
  text-align: left;
}

.section.alt {
  background: var(--surface);
}

.section.cta-slim {
  padding: 0;
}

.cta-band {
  display: block;
  padding: clamp(1.25rem, 3vh, 2rem) 0;
}

.section .cta-title {
  margin: 0;
  text-align: right;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 400;
  transition: color 120ms ease;
}

.cta-band:hover .cta-title,
.cta-band:focus-visible .cta-title {
  color: var(--emph);
}

.section h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  margin: 0 0 0.75rem;
  color: var(--text);
}

.section p {
  color: var(--mute);
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  max-width: 70ch;
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  text-align: left;
}

.card {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 1.5rem;
  border-radius: 0;
  transition: background 120ms ease-out;
}

.card:hover {
  background: var(--surface);
}

.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--text);
}

.card p {
  margin: 0;
  color: var(--mute);
  font-size: 0.9rem;
}

.note {
  color: var(--mute);
  font-size: 0.85rem;
  margin-top: 2rem;
}

.wrap-wide > .note {
  margin-top: 3.5rem;
  font-size: 0.72rem;
}

@media (max-width: 640px) {
  .buy-section .note {
    margin-top: 2.6rem;
    font-size: 0.78rem;
  }
}

/* Work slots */
.work-group {
  margin-bottom: var(--gap-v);
}

.work-group:last-of-type {
  margin-bottom: 0;
}

.work-cat {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--mute);
  margin: 0 0 1.25rem;
}

/* Work accordion sections */
.waveform.mini {
  width: 2.2rem;
  height: 1.1rem;
}

.work-section {
  border-top: 1px solid var(--rule);
}

.work-section:last-of-type {
  border-bottom: 1px solid var(--rule);
}

.work-head {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0.6rem;
  margin: 0 -0.6rem;
  cursor: pointer;
  list-style: none;
  transition: background 120ms ease;
}

.work-head::-webkit-details-marker {
  display: none;
}

.work-head:hover,
.work-head:focus-visible {
  background: var(--surface);
}

.work-label {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
}

.work-caret {
  color: var(--mute);
  font-size: 0.62rem;
  transition: transform 160ms ease, color 120ms ease;
}

.work-section[open] .work-caret {
  transform: rotate(90deg);
  color: var(--text);
}

.work-section[open] .work-label {
  color: var(--emph);
}

.work-section .work-slots {
  padding: 0.4rem 0 1.4rem;
}

.work-section .work-body {
  padding: 0.4rem 0.6rem 1.4rem;
}

.work-section .work-body > p {
  color: var(--mute);
  font-size: 0.95rem;
  max-width: 70ch;
}

.sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sub-list li {
  color: var(--mute);
  font-size: 0.95rem;
}

.sub-list li.sub-item-end {
  align-self: flex-end;
}

.sub-list a {
  color: var(--text);
  border-bottom: 1px solid var(--rule);
}

.sub-list a:hover {
  color: var(--emph);
  border-color: var(--emph);
}

.work-section .work-body .install:first-child,
.work-section .work-body .download {
  margin-top: 0;
}

.work-section .work-body .download + .download {
  margin-top: 1rem;
}

.work-section > .note {
  padding: 0.4rem 0.6rem 1.4rem;
}

.work-banner {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0.6rem;
  margin: 0 -0.6rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background 120ms ease;
}

.work-banner:hover,
.work-banner:focus-visible {
  background: var(--surface);
}

.work-banner:hover .work-label,
.work-banner:focus-visible .work-label {
  color: var(--emph);
}

.work-banner:hover .work-caret,
.work-banner:focus-visible .work-caret {
  color: var(--text);
}

.work-banner-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--mute);
}

/* Releases slots: griglia di copertine affiancate, titolo e anno in
   sovrimpressione sul fondo dell'immagine. */
.work-slots.releases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.release-slot {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--ink);
  padding: 0;
  transition: border-color 120ms ease;
}

.release-slot:hover,
.release-slot:focus-within {
  border-color: var(--text);
}

.release-slot.is-clickable {
  cursor: pointer;
}

.release-cover {
  display: block;
  width: 100%;
  height: 100%;
}

.release-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le copertine sono chiare in alto quanto in basso: senza velo il testo
   sovrapposto si perderebbe. */
.release-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.85), rgba(10, 10, 11, 0) 45%);
  pointer-events: none;
}

.release-link {
  position: absolute;
  left: 0.7rem;
  bottom: 0.6rem;
  z-index: 1;
  max-width: calc(100% - 1.4rem - 3.4rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.68rem, 1.4vw, 0.9rem);
  color: var(--emph);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}

.release-link:hover,
.release-link:focus-visible {
  border-color: var(--emph);
}

.release-slot .work-year {
  position: absolute;
  right: 0.7rem;
  bottom: 0.6rem;
  z-index: 1;
  margin: 0;
  font-size: clamp(0.6rem, 1.2vw, 0.8rem);
}

/* Live list: griglia di locandine affiancate, titolo e anno in sovrimpressione
   sul fondo. Il 4/5 e' il formato della maggioranza delle locandine. */
.live-list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.live-row {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface);
  transition: border-color 120ms ease;
}

.live-row:hover,
.live-row:focus-within {
  border-color: var(--text);
}

.live-row.is-clickable {
  cursor: pointer;
}

/* Le locandine sono spesso chiare in basso: senza velo il testo sovrapposto si
   perderebbe. Qui serve piu' alto che nell'archivio, il blocco e' di tre righe. */
.live-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.9), rgba(10, 10, 11, 0.55) 30%, rgba(10, 10, 11, 0) 62%);
  pointer-events: none;
}

.live-title a {
  color: var(--emph);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color 120ms ease;
}

.live-title a:hover,
.live-title a:focus-visible {
  border-color: var(--emph);
}

/* L'anno sta nell'angolo opposto sulla stessa riga di base: il titolo si ferma
   prima, altrimenti una riga lunga gli finisce sotto. */
.live-title {
  position: absolute;
  left: 0.7rem;
  right: 3.6rem;
  bottom: 0.6rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--emph);
  font-size: clamp(0.66rem, 1.1vw, 0.82rem);
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.live-place {
  color: var(--text);
  font-size: 0.9em;
  letter-spacing: 0.03em;
  text-transform: none;
}

.live-place a {
  color: var(--text);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}

.live-place a:hover,
.live-place a:focus-visible {
  color: var(--emph);
  border-color: var(--emph);
}

.live-year {
  position: absolute;
  right: 0.7rem;
  bottom: 0.6rem;
  z-index: 1;
  color: rgba(233, 233, 230, 0.75);
  font-size: clamp(0.6rem, 1vw, 0.76rem);
}

.live-thumb {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--surface);
}

/* Le locandine non hanno tutte lo stesso formato: una e' quasi quadrata.
   Il ritaglio le uniforma, cosi' i titoli restano incolonnati. */
.live-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reel grid */
.reel-grid {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0 1.4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.reel-card {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface);
  transition: border-color 120ms ease;
}

.reel-card:hover,
.reel-card:focus-visible {
  border-color: var(--text);
}

.reel-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-badge {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  z-index: 1;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--emph);
  background: rgba(10, 10, 11, 0.55);
  padding: 0.2rem 0.45rem;
  opacity: 0;
  transition: opacity 120ms ease;
}

.reel-card:hover .reel-badge,
.reel-card:focus-visible .reel-badge {
  opacity: 1;
}

@media (max-width: 640px) {
  .reel-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .reel-badge {
    display: none;
  }
}

.work-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.work-slot {
  position: relative;
  border: 1px solid var(--rule);
  overflow: hidden;
  transition: border-color 120ms ease;
}

.work-slot:hover,
.work-slot:focus-within {
  border-color: var(--text);
}

.work-slot.is-clickable {
  cursor: pointer;
}

.work-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--surface);
}

.work-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.8), rgba(10, 10, 11, 0) 55%);
  pointer-events: none;
}

.work-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 0 1.1rem 0.9rem;
}

.work-title {
  color: var(--emph);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.work-year {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  color: rgba(233, 233, 230, 0.65);
}

.work-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.work-links a {
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}

.work-links a:hover {
  color: var(--emph);
  border-color: var(--emph);
}

.work-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.work-artist {
  align-self: flex-start;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(233, 233, 230, 0.8);
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

.work-artist:hover {
  color: var(--emph);
  border-color: var(--emph);
}

/* Prose (legal pages) */
.prose {
  text-align: left;
  max-width: 74ch;
}

.prose h2 {
  font-size: 1.1rem;
  margin: 2rem 0 0.6rem;
  text-align: left;
}

.prose h2:first-of-type {
  margin-top: 0;
}

.prose p, .prose ul {
  color: var(--text);
  font-size: 0.95rem;
  margin: 0 0 1rem;
}

.prose ul {
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: 0.35rem;
}

.prose a {
  color: var(--text);
  border-bottom: 1px solid var(--rule);
}

.prose a:hover {
  border-bottom-color: var(--text);
}

/* Link more */
.link-more {
  display: inline-block;
  color: var(--text);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color 120ms ease, border-color 120ms ease;
}

.link-more:hover {
  color: var(--emph);
  border-color: var(--emph);
}

/* Signup form */
.signup {
  display: flex;
  gap: 0.5rem;
  max-width: 460px;
  flex-wrap: wrap;
}

.signup input[type="email"] {
  flex: 1 1 220px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  background: var(--ink);
  border-radius: 0;
  font: inherit;
  color: var(--text);
}

.signup input[type="email"]:focus {
  outline: none;
  border-color: var(--text);
}

.signup button {
  padding: 0.7rem 1.2rem;
  background: var(--text);
  color: var(--ink);
  border: none;
  border-radius: 0;
  font: inherit;
  cursor: pointer;
  text-transform: lowercase;
  transition: opacity 120ms ease;
}

.signup button:hover {
  opacity: 0.85;
}

.form-msg {
  flex-basis: 100%;
  color: var(--mute);
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}

/* FAQ */
.faq {
  text-align: left;
}

.faq details {
  border-top: 1px solid var(--rule);
  padding: 1rem 0;
}

.faq details:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
  color: var(--text);
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--mute);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details p {
  margin: 0.75rem 0 0;
  color: var(--mute);
  font-size: 0.95rem;
}

/* Banner */
.banner {
  background: var(--text);
  color: var(--ink);
  padding: clamp(2rem, 5vh, 3rem) 0;
  text-align: left;
}

.banner .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.banner-tag {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ink);
  opacity: 0.7;
}

.banner-text {
  margin: 0;
  font-size: 1.1rem;
}

.banner-cta {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  font-size: 0.9rem;
  transition: opacity 120ms ease;
}

.banner-cta:hover {
  opacity: 0.7;
}

/* Footer */
.site-footer {
  margin-top: var(--gap-v);
  padding: clamp(2rem, 5vh, 3.5rem) 0 clamp(3rem, 8vh, 6rem);
  color: var(--mute);
  font-size: 0.72rem;
  line-height: 1.9;
}

.site-footer a {
  color: var(--mute);
  transition: color 120ms ease;
}

.site-footer a:hover {
  color: var(--text);
}

.footer-nav {
  display: flex;
  gap: 0.4rem 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-nav a {
  font-size: 0.72rem;
}

.site-footer p {
  margin: 0;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin: 0;
}

.footer-nav + .foot-links {
  margin-top: 0.75rem;
}

.foot-vat {
  color: var(--mute);
}

.site-footer .foot-legal {
  margin-top: 0.75rem;
  color: var(--mute);
  text-align: justify;
  text-align-last: justify;
}

.site-footer .foot-links {
  margin-bottom: 0.75rem;
}

.site-footer .foot-links a {
  color: #d2d2d6;
}

/* Product page (Relate) */
.product-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 0.75rem;
  margin-top: 1.75rem;
}

.product-actions .buy-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.product-actions .buy-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.product-actions .buy-cta .btn-primary {
  margin-left: 0;
}

.product-actions .price {
  margin-left: 1.5rem;
}

.product-actions .btn-ghost {
  margin-left: auto;
}

.refund-line {
  margin: 0.45rem 0 0;
  color: #ededed;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

.price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  color: var(--text);
}

.launch-flag {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b0b0b0;
}

.price-tag {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.price-old {
  color: var(--mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-size: 1rem;
}

.price-now {
  color: var(--emph);
  font-size: 1.7rem;
  font-weight: 500;
}

.price-save {
  align-self: center;
  color: #e5484d;
  border: 1px solid #e5484d;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.4rem;
  animation: save-pulse 2.4s ease-in-out infinite;
}

.price-fomo {
  margin: 0;
  color: var(--mute);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.countdown-line {
  margin: 0.15rem 0 0;
  color: var(--mute);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* Magenta e non rosso: urgenza senza il rosso da errore. Resta magenta anche
   ora che il ciclo colore di Relate e' virato sui verdi. */
.countdown {
  color: #C84E94;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

@keyframes save-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

/* Launch offer — centered hero pricing */
.launch-section {
  text-align: center;
}

.launch-title {
  margin: 0;
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: var(--emph);
}

.launch-section .launch-ends {
  max-width: none;
  margin: 0.6rem auto 2rem;
  color: var(--mute);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-align: center;
}

.launch-ends .countdown {
  color: var(--text);
}

.launch-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  column-gap: 1.75rem;
  row-gap: 0.55rem;
}

.launch-old {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  color: #b3b3b9;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-size: 1.45rem;
}

.launch-actions .btn-buy-cycle {
  grid-column: 2;
  grid-row: 1;
  margin: 8px 0;
  font-size: 1.1rem;
  padding: 0.95rem 2.2rem;
}

.launch-actions .launch-trial {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  padding: 0.32rem 0.75rem;
  border: 1px solid rgba(233, 233, 230, 0.08);
  background: none;
  font-size: 0.78rem;
  color: #a9a9af;
}

.launch-actions .launch-trial:hover,
.launch-actions .launch-trial:focus-visible {
  border-color: rgba(233, 233, 230, 0.2);
  color: var(--text);
}

.launch-sub {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.launch-sub-vat {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
  color: var(--mute);
}

.launch-sub-refund {
  grid-column: 2;
  grid-row: 2;
  color: var(--emph);
  font-size: 0.9rem;
}

.launch-sub-refund:hover,
.launch-sub-refund:focus-visible {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .launch-actions {
    grid-template-columns: auto;
    grid-template-rows: none;
    row-gap: 0.5rem;
  }
  .launch-old { grid-column: 1; grid-row: auto; justify-self: center; }
  .launch-actions .btn-buy-cycle { grid-column: 1; grid-row: auto; margin-top: 0.6rem; }
  .launch-sub-refund { grid-column: 1; grid-row: auto; order: 3; }
  .launch-actions .launch-trial { grid-column: 1; grid-row: auto; justify-self: center; margin-top: 0.6rem; }
  .launch-sub-vat { grid-column: 1; grid-row: auto; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .launch-title,
  .btn-buy-cycle {
    animation: none;
  }
}

.btn-primary {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  background: var(--text);
  color: var(--ink);
  border: 1px solid var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-transform: lowercase;
  transition: opacity 120ms ease;
}

.btn-buy-cycle {
  background: #3DA39B;
  color: #000;
  border-color: #3DA39B;
}

.btn-primary:hover {
  opacity: 0.85;
}

.btn-ghost {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--rule);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-transform: lowercase;
  transition: border-color 120ms ease, color 120ms ease;
}

.btn-ghost:hover {
  border-color: var(--text);
  color: var(--emph);
}

.btn-ghost.is-soon,
.btn-ghost.is-soon:hover {
  border-style: dashed;
  border-color: var(--rule);
  color: var(--mute);
  cursor: default;
}

.format-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.format-badges li {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--mute);
  border: 1px solid var(--rule);
  padding: 0.25rem 0.55rem;
  text-transform: uppercase;
}

.product-eyebrow {
  margin-top: clamp(2.5rem, 6.5vh, 5rem);
}

.product-hero {
  margin-top: clamp(2rem, 5vh, 3.75rem);
}

.product-hero h1.cap {
  /* optical left-align: the capital R sits a hair inset from the lowercase
     paragraph text below, so pull it flush. */
  margin-left: -1px;
}

.product-hero .tagline {
  margin-top: 0.15rem;
}

.tagline-lead {
  display: block;
  text-transform: none;
  margin-bottom: calc(0.35rem + 12px);
  white-space: nowrap;
  /* js scales this on the x axis so it spans exactly the width of the
     "Relate" title above — start to end — while staying on one line. */
  transform-origin: left center;
}

.concept-row {
  display: flex;
  align-items: stretch;
  gap: clamp(1.5rem, 5vw, 4rem);
}

/* Turchese REE su tutto il blocco, bianco solo sui punti in rilievo: e' il
   contrario del resto del sito, e serve a staccare la sezione che spiega cosa
   sia l'ecosistema. Il turchese e' lo stesso della pagina download e del ciclo
   colore della home, quindi non introduce un colore nuovo. */
.concept-text {
  flex: 1 1 auto;
  min-width: 0;
  color: #3DA39B;
}

.concept-text .key,
.concept-text .acro {
  color: var(--emph);
  font-weight: 500;
}

.concept-logo-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.concept-logo-fig {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.concept-logo-tag {
  position: absolute;
  right: 8%;
  bottom: 6%;
  line-height: 1;
  white-space: nowrap;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text);
}

.concept-logo {
  width: clamp(120px, 20vw, 200px);
  height: auto;
}

@media (max-width: 640px) {
  .concept-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .concept-logo-wrap {
    align-self: flex-end;
  }
  .concept-text h2 {
    margin-bottom: 1.4rem;
    /* Un rigo solo: il corpo segue il viewport, cosi' il titolo non spezza. */
    white-space: nowrap;
    font-size: min(4.2vw, 1.25rem);
  }
}

.shot-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.75rem;
}

.shot {
  max-width: var(--col);
  margin: clamp(0.5rem, 2vh, 1.25rem) auto 0;
  padding: 0 var(--pad);
}


.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

/* Skin di Relate: le immagini sono impilate e si scambiano in dissolvenza.
   L'aspect-ratio sta sul contenitore perche' le immagini, essendo assolute,
   non occupano piu' spazio: senza, la figura collasserebbe a zero e la pagina
   sotto salterebbe su di un'altezza di schermo al primo caricamento. */
.skin-stack {
  position: relative;
  aspect-ratio: 1903 / 798;
  border: 1px solid var(--rule);
  background: var(--surface);
}

/* Sotto i 760px la vetrina delle skin va da bordo a bordo. */
@media (max-width: 760px) {
  .shot { max-width: none; padding: 0; }
  .shot .shot-meta { padding: 0 var(--pad); }
  .skin-stack { border-left: 0; border-right: 0; }
}

/* La skin che entra non compare in blocco: scorre sotto una maschera a
   gradiente larga tre volte l'immagine, quindi il fronte non e' una linea ma
   una fascia sfumata in cui le due skin restano visibili insieme e i colori si
   mescolano pixel per pixel. E' il motivo per cui non basta l'opacita': quella
   fa cambiare tutta l'immagine nello stesso istante. */
.skin-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 0;
  opacity: 0;
  -webkit-mask-image: linear-gradient(100deg, #000 22%, rgba(0, 0, 0, 0) 62%);
  mask-image: linear-gradient(100deg, #000 22%, rgba(0, 0, 0, 0) 62%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition: opacity 1.6s ease,
              -webkit-mask-position 2.4s cubic-bezier(0.33, 0, 0.2, 1),
              mask-position 2.4s cubic-bezier(0.33, 0, 0.2, 1);
}

.skin-stack img.is-on {
  z-index: 2;
  opacity: 1;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

/* La skin uscente resta ferma e piena sotto quella che entra: se sfumasse
   anche lei, per un attimo si vedrebbe lo sfondo della pagina in mezzo. */
.skin-stack img.is-under {
  z-index: 1;
  opacity: 1;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .skin-stack img { transition: none; }
}

.shot figcaption {
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  color: var(--mute);
  letter-spacing: 0.04em;
}

.install {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin: clamp(2rem, 5vh, 3.5rem) 0 0;
}

.install-reverse .install-figure { order: 2; }

.install-figure { margin: 0; }

.install-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

.install-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
}

.install-body h3 {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  margin: 0.4rem 0 0.6rem;
  color: var(--text);
}

.install-sub { color: var(--mute); font-weight: 400; }

.install-body p {
  color: var(--mute);
  font-size: 0.95rem;
  margin: 0 0 1rem;
  max-width: 60ch;
}

.install-credits a {
  color: var(--text);
  border-bottom: 1px solid var(--rule);
}

.install-credits a:hover { border-color: var(--emph); color: var(--emph); }

.install-anchored { align-items: stretch; }
.install-anchored .install-body { display: flex; flex-direction: column; }
.install-anchored .install-foot { display: contents; }
.install-anchored .cred-list { margin: auto 0; }

.install-anchored .cred-list p {
  margin: 0 0 0.2rem;
  max-width: none;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text);
}
.install-anchored .cred-role { color: var(--mute); }
.install-anchored .cred-list a { color: var(--text); border-bottom: 1px solid var(--rule); }
.install-anchored .cred-list a:hover { color: var(--emph); border-color: var(--emph); }

.install-meta-foot {
  text-align: right;
  margin: 0;
  font-size: 0.36rem;
}

@media (max-width: 720px) {
  .install { grid-template-columns: 1fr; }
  .install-reverse .install-figure { order: 0; }
}

/* Download */
.download {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  background: var(--ink);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin: clamp(2rem, 5vh, 3.5rem) 0 0;
  transition: border-color 120ms ease;
}

.download:hover,
.download:focus-within {
  border-color: var(--text);
}

/* La colonna e' larga quanto la miniatura, cosi' il simbolo che le sta sotto
   cade esattamente sul suo bordo destro. */
.download-figure {
  flex: 0 0 auto;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
}

.download-thumb {
  display: block;
  width: clamp(72px, 14vw, 104px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  background: var(--ink);
  border: 1px solid var(--rule);
}

.download-sym {
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--mute);
}

.download-body {
  flex: 1 1 300px;
  min-width: 0;
}

.download-body h3 {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  margin: 0.4rem 0 0.6rem;
  color: var(--text);
}

.download-sub { color: var(--mute); font-weight: 400; }

.download-body p {
  color: var(--mute);
  font-size: 0.95rem;
  margin: 0 0 1rem;
  max-width: 60ch;
}

.download-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.download-btn::after {
  content: " \2193";
}

/* Minimal audio player */
.player {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  max-width: 460px;
  margin-top: 0.75rem;
}

.player-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--mute);
  cursor: pointer;
  transition: color 120ms ease;
}

.player-btn:hover,
.player-btn:focus-visible {
  color: var(--text);
}

.player-btn .ico {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.player .ico-pause,
.player .ico-muted {
  display: none;
}

.player.is-playing .ico-play {
  display: none;
}

.player.is-playing .ico-pause {
  display: block;
}

.player.is-muted .ico-vol {
  display: none;
}

.player.is-muted .ico-muted {
  display: block;
}

.player-track {
  flex: 1 1 auto;
  position: relative;
  height: 1px;
  background: var(--rule);
  cursor: pointer;
}

.player-track::before {
  content: "";
  position: absolute;
  inset: -9px 0;
}

.player-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--text);
}

.player-time {
  flex: 0 0 auto;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.player-vol {
  flex: 0 0 auto;
  position: relative;
  width: 48px;
  height: 1px;
  background: var(--rule);
  cursor: pointer;
  touch-action: none;
}

.player-vol::before {
  content: "";
  position: absolute;
  inset: -9px 0;
}

.player-vol-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: var(--text);
}

.player.is-muted .player-vol-fill {
  background: var(--rule);
}

/* Righe di testo semplici, stile "System Requirements" alla iZotope: etichetta
   in maiuscoletto a sinistra, valore a destra, nessuna cella ne' bordo. */
.spec-plain {
  margin: 1.5rem 0 0;
  max-width: 46rem;
}

.spec-plain div {
  display: flex;
  gap: 1.5rem;
  padding: 0.5rem 0;
}

.spec-plain dt {
  flex: 0 0 9rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--mute);
  text-transform: uppercase;
  padding-top: 0.2rem;
}

.spec-plain dd {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .spec-plain div {
    display: block;
  }
  .spec-plain dt {
    margin-bottom: 0.25rem;
    padding-top: 0;
  }
}

/* Video slot */
.video-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 1.5rem;
  border: 1px solid var(--rule);
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

/* Swapping the placeholder for an <iframe> needs no other change. */
.video-slot iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-play {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--mute);
}

.video-note {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Producer reviews */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.review {
  margin: 0;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Works as-is on a div placeholder or on a real <img class="review-photo">. */
.review-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.review-stars {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
}

.review-stars .star {
  color: var(--rule);
}

.review-stars .star.on {
  color: var(--text);
}

.review-quote {
  margin: 0.9rem 0 0;
}

.review-quote p {
  margin: 0;
  max-width: none;
  font-size: 0.9rem;
  color: var(--mute);
}

.review-who {
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.review-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}

.review-role {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--mute);
}

@media (max-width: 820px) {
  .reviews {
    grid-template-columns: 1fr;
  }
}

/* La GUI fa da fondale, non da illustrazione: sta sotto un velo scuro e serve
   solo a dare texture. Il pannello sopra e' opaco, perche' il prezzo e i due
   bottoni devono restare leggibili qualunque porzione di schermata capiti
   dietro. */
.buy-section {
  position: relative;
  overflow: hidden;
  background: url(../assets/relate-buy-bg.webp) center / cover no-repeat;
}

/* Sotto i 900px il fondale viene ritagliato quasi tutto: tanto vale scaricare
   il file piccolo. */
@media (max-width: 900px) {
  .buy-section {
    background-image: url(../assets/relate-buy.webp);
  }
}

.buy-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, 0.82);
}

.buy-section > .wrap {
  position: relative;
}

.buy-panel {
  max-width: 40rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: rgba(19, 19, 22, 0.94);
  border: 1px solid var(--rule);
}

.buy-panel h2 {
  margin-top: 0;
}

.buy-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  margin-top: 1.5rem;
}

/* Stessa coppia di colori dell'offerta di lancio piu' in alto: turchese pieno
   sull'acquisto, contorno appena accennato sulla prova. */
.buy-trial {
  border-color: rgba(233, 233, 230, 0.08);
  color: #a9a9af;
}

.buy-trial:hover,
.buy-trial:focus-visible {
  border-color: rgba(233, 233, 230, 0.2);
  color: var(--text);
}

/* A/B compare player */
.hear-section {
  padding-top: 2.25rem;
}

.ab-title {
  text-align: center;
  font-size: 0.82em;
}

.ab-compare {
  margin-top: 1.2rem;
}

.ab-lines {
  margin-top: 2.2rem;
}

.ab-player {
  width: 100%;
  max-width: none;
}

.ab-player + .ab-player {
  margin-top: 1.6rem;
}

.ab-line-label {
  flex: 0 0 auto;
  min-width: 6.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--mute);
  white-space: nowrap;
}

.ab-player .player {
  max-width: none;
  width: 100%;
  margin-top: 0;
}

.ab-player .player-wave {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 30px;
  display: block;
  cursor: pointer;
  touch-action: none;
}

/* Su cellulare il volume lo governa il telefono: via slider e mute.
   L'onda prende il rigo intero accanto al play, l'etichetta scende
   sotto, piccola e allineata a sinistra. */
@media (max-width: 640px) {
  .ab-player .player-mute,
  .ab-player .player-vol {
    display: none;
  }
  .ab-player .player {
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .ab-line-label {
    order: 3;
    flex: 0 0 100%;
    min-width: 0;
    font-size: 0.62rem;
    text-align: left;
  }
  .ab-player .player-btn {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.ab-switch {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.ab-switch--global {
  justify-content: center;
  margin-top: 2.4rem;
}

.ab-switch--global .ab-btn {
  flex: 0 0 auto;
  min-width: 6rem;
  text-transform: none;
  letter-spacing: 0.08em;
}

.ab-btn {
  flex: 1 1 0;
  padding: 0.6rem 1rem;
  border: 1px solid var(--rule);
  background: none;
  color: var(--mute);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.ab-btn:hover,
.ab-btn:focus-visible {
  color: var(--text);
  border-color: var(--text);
}

.ab-btn.is-active {
  color: var(--ink);
  background: var(--text);
  border-color: var(--text);
}

/* Relate button rests turquoise; the color cycle is driven from JS while
   playing, kept in sync with the waveform, then returns to static turquoise. */
.ab-btn-relate {
  background: none;
  color: #3DA39B;
  border-color: #3DA39B;
}

/* A riposo il bottone Relate attivo resta vuoto come in bypass: il
   riempimento arriva solo in riproduzione, via stili inline da ab-compare.js. */
.ab-btn-relate.is-active {
  background: none;
  color: #3DA39B;
  border-color: #3DA39B;
}

.ab-btn-bypass.is-active {
  background: none;
  color: #c6c6cc;
  border-color: var(--rule);
}

@keyframes relate-glow {
  0%, 100% { color: #00A9A0; border-color: #00A9A0; text-shadow: 0 0 12px rgba(0,169,160,0.55); }
  50% { color: #3DA39B; border-color: #3DA39B; text-shadow: 0 0 12px rgba(61,163,155,0.55); }
}

@keyframes relate-glow-fill {
  0%, 100% { background-color: #00A9A0; border-color: #00A9A0; }
  50% { background-color: #3DA39B; border-color: #3DA39B; }
}

@keyframes relate-cycle {
  0%, 100% { color: #00A9A0; }
  50% { color: #3DA39B; }
}

/* waveform.js rilegge il computed color del canvas a ogni frame, quindi per
   colorare l'onda basta animare `color`. */
.ree-page .hero-line .cap,
.ree-page .hero-line .waveform.primary {
  animation: relate-cycle 12s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ab-btn-relate,
  .ab-btn-relate.is-active,
  .ree-page .hero-line .cap,
  .ree-page .hero-line .waveform.primary { animation: none; }
}

/* Code pack */
.pack-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

.pack-fine {
  font-size: 0.72rem;
  color: var(--mute);
}

.pack-fine p {
  margin: 0;
  max-width: none;
  font-size: inherit;
}

.pack-fine p + p {
  margin-top: 0.2rem;
}

/* dd.pulse */
.dd-row {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}

.dd-figure {
  flex: 0 0 150px;
  overflow: hidden;
  border-radius: 4px;
}

.dd-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La figura del 040 osc e' uno screenshot di interfaccia, non un grafico a tratto:
   con il crop a 150px di .dd-figure diventerebbe illeggibile, quindi qui va
   piu' larga e intera. */
.dd-row-wide .dd-figure {
  flex: 0 0 300px;
  align-self: flex-start;
}

.dd-row-wide .dd-figure img {
  height: auto;
  object-fit: contain;
}

.dd-card {
  flex: 1 1 auto;
  min-width: 0;
}

.dd-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.brain-figure {
  float: right;
  width: 130px;
  margin: 0 0 1rem 1.5rem;
}

.dd-format {
  margin-right: auto;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--mute);
}

/* Responsive */
@media (max-width: 720px) {
  .dd-row {
    flex-direction: column;
    gap: 1rem;
  }
  .dd-figure {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .dd-row-wide .dd-figure {
    aspect-ratio: auto;
  }
  .pack-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  /* --gap-v e' il respiro tra le sezioni e sopra il footer: tarato su una
     colonna da 1080px, su 375px diventa un buco. */
  :root {
    --gap-v: clamp(2rem, 5vh, 3rem);
  }
  .page-hero {
    padding-bottom: clamp(0.75rem, 2vh, 1.25rem);
  }
  /* Stacco dal fondo uguale a quello dell'header dalla cima. */
  .site-footer {
    padding: clamp(1.25rem, 3vh, 2rem) 0 1rem;
  }

  /* Sulle pagine corte il footer resterebbe a meta' schermo: il main si
     allunga e lo spinge fino in fondo. */
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
  }
  body > main {
    flex: 1 0 auto;
  }
  .contact-page main {
    display: flex;
    flex-direction: column;
  }
  .contact-page .info-main {
    flex: 1 0 auto;
  }

  /* Su telefono lo stacco sopra l'hero vale piu' di mezzo schermo: la riga
     con la sinusoide arrivava sotto la piega. */
  .site-header {
    padding-top: 1rem;
  }
  .page-hero:has(h1.hero-line) {
    padding-top: calc(clamp(0.5rem, 2vh, 1rem) + 1.25rem * var(--phi));
  }
  .page-hero .eyebrow {
    margin-bottom: calc(1.25rem * var(--phi));
  }

  /* La sinusoide sfonda il padding del .wrap e arriva ai bordi dello schermo.
     Serve overflow:visible perche' l'hero altrimenti riclippa il canvas. */
  .page-hero h1.hero-line {
    overflow: visible;
    min-height: clamp(130px, 24vh, 190px);
    font-size: clamp(0.82rem, 3.8vw, 1.1rem);
    letter-spacing: 0.14em;
  }
  /* Come i banner della home: la riga e il suo filetto sfondano il padding del
     .wrap e arrivano ai bordi dello schermo, il padding laterale rimette il
     testo in colonna. .work-section fa da contenitore, quindi il suo padding
     va compensato di nuovo dalla testata che ci sta dentro. */
  .work-section,
  .work-banner {
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
  .work-head {
    margin: 0 calc(var(--pad) * -1);
    padding: 0.85rem var(--pad) 1.1rem;
  }
  .work-banner {
    padding-bottom: 1.1rem;
  }
  .work-label { font-size: 0.76rem; }
  .work-banner-meta { font-size: 0.7rem; }

  /* Soundtracks, latest releases e archive: via la cornice dello slot, le
     immagini arrivano ai bordi dello schermo separate solo da un filo. */
  .work-section .work-slots {
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    gap: 0.35rem;
  }
  .work-slot {
    border: none;
  }
  .work-slot::after {
    display: none;
  }
  /* La griglia resta a tre colonne anche sul telefono: sfonda il padding del
     wrap e le copertine si toccano quasi, separate dal filo del gap. */
  .work-slots.releases {
    gap: 2px;
  }
  .release-slot {
    border: none;
  }
  .release-link {
    left: 0.4rem;
    bottom: 0.35rem;
    max-width: calc(100% - 0.8rem - 1.9rem);
    font-size: 0.6rem;
  }
  .release-slot .work-year {
    right: 0.4rem;
    bottom: 0.35rem;
    font-size: 0.55rem;
  }
  /* Due colonne e non tre come nell'archivio: qui sotto al titolo c'e' anche il
     luogo, e su un terzo di schermo andrebbe a capo quattro volte. La lista
     sfonda il padding del wrap, le locandine arrivano ai bordi. */
  .live-list {
    margin: 0 calc(var(--pad) * -1);
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    padding-bottom: 0.6rem;
  }
  .live-list .live-row {
    border: none;
    margin: 0;
    padding: 0;
  }
  .live-title {
    left: 0.45rem;
    right: 2.6rem;
    bottom: 0.4rem;
    font-size: 0.6rem;
  }
  .live-year {
    right: 0.45rem;
    bottom: 0.4rem;
    font-size: 0.55rem;
  }
  .works-page .wrap-wide > .note {
    text-align: justify;
    text-align-last: justify;
  }
  /* Le foto delle installazioni arrivano ai bordi come in soundtracks. Qui il
     100vw e' piu' sicuro dei margini negativi: tra il .wrap e la figure ci sono
     due contenitori con padding proprio. */
  .install-figure {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .install-figure img {
    border: none;
  }

  /* Qui la miniatura ha il testo sotto, non di fianco: la riga che occupa e'
     vuota a destra, quindi il simbolo ci sta accanto invece che sotto. */
  .download-figure {
    width: 100%;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  /* I reel restano su tre colonne attaccate, separate solo tra una riga e
     l'altra. */
  .reel-grid {
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    gap: 0.35rem 0;
  }
  .reel-card {
    border: none;
  }

  /* Il testo va a capo prima di "collaborations": il puntino che precede la
     rottura resta appeso a fine riga, quindi lo trasformo nella rottura stessa
     (elemento flex a larghezza piena, invisibile). */
  .page-hero h1.hero-line .hero-words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.15em 0.55em;
    width: 100%;
  }
  .page-hero h1.hero-line .hero-sep-break {
    flex-basis: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }

  .page-hero h1.hero-line .waveform.primary {
    left: 50%;
    right: auto;
    width: 100vw;
    max-width: none;
    transform: translateX(-50%);
  }
  /* Pagine legali: il canvas e' da solo, senza hero sopra. */
  .wrap > .waveform.primary {
    height: clamp(130px, 24vh, 190px);
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Header su una riga sola: brand a sinistra, burger a destra. Il pannello e'
     in position:absolute cosi' esce dal flusso del flex e non spinge il burger
     verso il centro quando e' aperto. */
  .site-header .wrap {
    flex-wrap: nowrap;
    position: relative;
  }
  .nav-toggle {
    display: flex;
  }
  .header-right {
    display: none;
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.4rem 0;
    background: var(--surface);
    border: 1px solid var(--rule);
  }
  .site-header[data-menu="open"] .header-right {
    display: flex;
  }
  .site-nav {
    flex-direction: column;
    gap: 0;
  }
  .site-nav a {
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
  }
  .nav-sep {
    display: none;
  }
  /* Sul telefono il sito resta in inglese: al posto di it/en il menu offre
     l'inversione dei colori. */
  .lang-toggle {
    display: none;
  }
  .invert-toggle {
    display: block;
    width: 100%;
    padding: 0.3rem 0.85rem;
    margin-top: 0.25rem;
    border: none;
    border-top: 1px solid var(--rule);
    background: none;
    color: var(--mute);
    font: inherit;
    text-align: right;
    cursor: pointer;
  }
  .invert-toggle span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.6rem;
    line-height: 1;
  }
  .invert-toggle[aria-pressed="true"] {
    color: var(--text);
  }

  /* Il filtro sul body ribalta tutto; le foto lo annullano con un secondo
     invert, mentre i canvas restano invertiti perche' sono tratto, non
     immagine, e devono seguire il testo. */
  html.inverted {
    background: #F5F5F5;
  }
  html.inverted body {
    filter: invert(1);
  }
  html.inverted img,
  html.inverted video {
    filter: invert(1);
  }
  /* dd.pulse e brain synth sono grafici a tratto, non fotografie: come i canvas
     devono seguire il testo, quindi niente contro-inversione. */
  html.inverted img.invertible {
    filter: none;
  }
  /* Serve la specificita' di `.install-body p`, che altrimenti impone corpo e
     max-width dei paragrafi: era il 60ch a tenere la data lontana dal bordo. */
  .install-body p.install-meta-foot {
    max-width: none;
    font-size: 0.72rem;
    margin-top: 1.7rem;
  }
  /* Titoli e link degli slot stanno sopra la foto, che resta scura: senza la
     contro-inversione diventano neri su nero e spariscono. */
  html.inverted .work-info {
    filter: invert(1);
  }
  /* Ogni riga del footer sta su un rigo solo: il corpo scala con la viewport
     ed e' dimensionato sulla stringa piu' lunga della riga, che e' sempre
     quella italiana. */
  .site-footer {
    font-size: clamp(0.42rem, 2vw, 0.72rem);
  }
  .footer-nav {
    flex-wrap: nowrap;
    gap: 0.3rem;
  }
  .footer-nav a,
  .foot-links {
    font-size: clamp(0.42rem, 2.05vw, 0.72rem);
  }
  .footer-nav a,
  .foot-links a {
    white-space: nowrap;
  }
  .foot-links {
    flex-wrap: nowrap;
    gap: 0.3rem;
  }
  /* Giustificata da bordo a bordo. Con white-space:nowrap la giustificazione
     tipografica non ha appigli, quindi la distribuzione la fa il flex. */
  .site-footer .foot-legal {
    font-size: clamp(0.4rem, 1.9vw, 0.72rem);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem;
    white-space: nowrap;
  }
  .brain-figure {
    float: none;
    display: block;
    width: 55%;
    margin: 0 auto 1rem;
  }
}

/* Gate mail sui download gratuiti.
   Non e' un <dialog> nativo: l'inversione colori agisce con filter sul body, e
   il top layer di showModal() sfugge al filtro, lasciando il pannello scuro su
   sfondo chiaro. Un overlay dentro il body segue l'inversione come il resto. */
.gate[hidden] {
  display: none;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  background: rgba(10, 10, 11, 0.88);
  overflow-y: auto;
}

.gate-panel {
  position: relative;
  width: min(30rem, 100%);
  border: 1px solid var(--rule);
  background: var(--ink);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.gate-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: none;
  color: var(--mute);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 120ms ease;
}

.gate-close:hover,
.gate-close:focus-visible {
  color: var(--emph);
}

.gate-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
}

.gate-panel h2 {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  margin: 0.4rem 0 1.25rem;
  color: var(--text);
}

.gate-file {
  color: var(--mute);
  font-weight: 400;
}

.gate-label {
  display: block;
  font-size: 0.9rem;
  color: var(--mute);
  margin-bottom: 0.4rem;
}

.gate-input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}

.gate-input:focus-visible {
  outline: none;
  border-color: var(--text);
}

.gate-error {
  color: var(--emph);
  font-size: 0.8rem;
  margin: 0.5rem 0 0;
}

.gate-error[hidden] {
  display: none;
}

/* La casella marketing e' separata dall'invio e non pre-spuntata: il consenso
   pubblicitario non puo' essere la condizione per ottenere il file. */
.gate-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--mute);
  line-height: 1.5;
  cursor: pointer;
}

.gate-check input {
  flex: 0 0 auto;
  margin-top: 0.2rem;
  accent-color: var(--text);
}

.gate-check em {
  font-style: normal;
  opacity: 0.7;
}

/* Campo esca per i bot. Non usa display:none ne' il tributo hidden: i bot
   scritti meglio saltano i campi nascosti in quel modo, mentre un campo
   spostato fuori schermo lo compilano. Resta leggibile dagli screen reader,
   percio' nel markup ha aria-hidden e tabindex negativo. */
.gate-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.gate-fine {
  font-size: 0.78rem;
  color: var(--mute);
  line-height: 1.5;
  margin: 1rem 0 1.5rem;
}

.gate-fine a {
  color: var(--mute);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gate-fine a:hover {
  color: var(--emph);
}

.gate-submit {
  width: 100%;
}

/* Biglietto da visita NFC (/card). Pagina isolata: niente header ne' footer,
   si apre dal telefono di chi avvicina la carta. */
.card-page {
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
}

/* Non ".card": quel nome e' gia' preso dai riquadri con bordo delle altre
   pagine, e il biglietto ne ereditava bordo e padding. */
.card-inner {
  /* Misura di riferimento del blocco d'intestazione: il corpo del nome. Da qui
     derivano sia la larghezza dell'immagine sia il tracking del ruolo, cosi'
     i tre elementi restano incolonnati a qualsiasi dimensione di schermo. */
  --u: clamp(0.95rem, 3.6vw, 1.15rem);
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 3rem var(--pad);
  text-align: center;
}

/* "salvatoreversace" sono 16 caratteri e in JetBrains Mono ogni carattere
   avanza di 0.6em: 9.6 volte il corpo del nome. E' la larghezza di riferimento
   a cui si allineano immagine e ruolo. */
.card-mark {
  display: block;
  width: calc(9.6 * var(--u));
  height: auto;
  margin: 0 auto 0.9rem;
}

.card-name {
  display: block;
  font-size: var(--u);
  letter-spacing: 0;
  color: var(--emph);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-underline-offset: 0;
}

/* "vision designer" sono 15 caratteri: a corpo 0.7 occupano 6.3u di glifi e i
   restanti 3.3u vanno spartiti nei 14 spazi fra le lettere, cioe' 0.3367em di
   tracking. Il margine destro negativo annulla il tracking che il browser
   aggiunge anche dopo l'ultima lettera, che altrimenti scentrerebbe la riga. */
.card-role {
  margin: 0.3rem -0.3367em 0 0;
  font-size: calc(var(--u) * 0.7);
  letter-spacing: 0.3367em;
  color: var(--mute);
}

/* Sfondo: un fascio di sinusoidi a tutto schermo, fisso dietro al biglietto,
   con lo stesso motore delle teste delle altre pagine. */
.card-wave {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0;
  pointer-events: none;
}

.card-page .card-inner {
  position: relative;
  z-index: 1;
}

/* Deve stare su un rigo solo: il clamp scala sulla larghezza dello schermo,
   percio' nowrap non manda mai il testo fuori dal viewport. */
.card-claim {
  margin: clamp(2.2rem, 8vh, 3.6rem) 0;
  font-size: clamp(1rem, 4.6vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--emph);
}

.card-save {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.8rem 1.8rem;
}

.card-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.2rem;
  margin-top: clamp(2rem, 7vh, 3.2rem);
  font-size: 0.8rem;
}

.card-links a {
  color: var(--mute);
  transition: color 120ms ease;
}

.card-links a:hover {
  color: var(--emph);
}

.card-rule {
  width: 2rem;
  height: 1px;
  margin: clamp(2rem, 7vh, 3.2rem) auto 0;
  background: var(--rule);
  border: 0;
}

.card-rule + .card-links {
  margin-top: clamp(1.2rem, 4vh, 2rem);
}