/* ==========================================================================
   SOUND ALCHEMISTS — Base: reset, tipografia, elementi ricorrenti
   Un solo carattere per tutto il sito: Courier New (con ripiego monospace).
   Courier New ha solo regolare e grassetto: i pesi 300–500 si vedono regolari.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--sand);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  /* Senza questo "(c)" diventa ©, e le legature spezzano la spaziatura fissa. */
  font-feature-settings: "calt" 0;
  font-variant-ligatures: no-contextual;
  -webkit-font-smoothing: antialiased;
}

img, video, canvas { display: block; max-width: 100%; }

a { color: var(--sand); text-decoration: none; transition: color .3s; }
a:hover { color: var(--sand-dark); }

button { font: inherit; color: inherit; }
button, [role="button"], a { -webkit-tap-highlight-color: transparent; }

::selection { background: var(--selection-bg); color: var(--selection-fg); }

input::placeholder,
textarea::placeholder { color: currentColor; opacity: .38; }

:focus-visible { outline: 1px solid var(--sand); outline-offset: 4px; }

[hidden] { display: none !important; }

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }

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

/* Titolo di sezione */
.h2 {
  font-weight: 300;
  font-size: clamp(36px, 4.6vw, 64px);
  letter-spacing: -.025em;
  line-height: 1.05;
  text-wrap: balance;
}
.h2--s58 { font-size: clamp(36px, 4.6vw, 58px); }
.h2--s72 { font-size: clamp(36px, 4.6vw, 72px); }
.h2__and {
  margin-left: .6em;
  font-size: .36em;
  letter-spacing: .04em;
  color: var(--muted);
  vertical-align: baseline;
}

/* Filetto sotto i titoli */
.rule { width: 64px; height: 1px; background: var(--faint); }

/* Etichetta maiuscola */
.label {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Paragrafo introduttivo */
.lead {
  max-width: 680px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* Pulsante a pillola: contorno sabbia, si riempie al passaggio */
.pill {
  display: inline-block;
  border: 1px solid var(--sand);
  border-radius: 999px;
  padding: 16px 28px;
  background: transparent;
  color: var(--sand);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.pill:hover { background: var(--sand); color: var(--on-sand); }
.pill--lg { font-size: 13px; }

/* Selettore lingua EN / IT: la lingua attiva è piena, l'altra al 40% */
.lang-switch { display: flex; gap: 10px; }
.lang-switch button {
  border: 0; background: none; padding: 0;
  letter-spacing: inherit; text-transform: inherit;
  color: var(--sand); opacity: .4; cursor: pointer;
  transition: opacity .3s;
}
.lang-switch button[aria-pressed="true"] { opacity: 1; }
.lang-switch button:hover { opacity: .8; }

/* Campo trappola per i bot: reale nel DOM ma fuori schermo */
.hp-field {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Contenuto di prova: compare solo in locale (JetroEnv.isLocal) e viene
   sempre marcato, così non si scambia per un lavoro vero. */
.is-placeholder { outline: 1px dashed var(--faint); outline-offset: -1px; }