@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-weight: 300; font-display: swap; src: url("fonts/spectral-300.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-weight: 300; font-style: italic; font-display: swap; src: url("fonts/spectral-300i.woff2") format("woff2"); }

:root {
  --nero: #030405;
  --testo: #eceef0;
  --piano: #868e96;
  --scintilla: #ffd9a6;
  --bordo: 32px;
  color-scheme: dark;
}
@media (max-width: 720px) { :root { --bordo: 20px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--nero); }
body {
  min-height: 100svh;
  background: var(--nero);
  color: var(--testo);
  font: 300 18px/1.4 "Spectral", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
#scena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
main { position: relative; z-index: 1; min-height: 100svh; padding: var(--bordo); pointer-events: none; }
main a { pointer-events: auto; }

.nome {
  font: 600 clamp(58px, 10.4vw, 188px)/.92 "Barlow", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .012em;
  text-transform: uppercase;
}
.nome span { display: block; }

.dati { font-size: 13px; line-height: 1.55; color: var(--piano); }
.dati a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.dati a:hover { color: var(--testo); }