/* ===========================================================
   TEMA B — Pelle di tamburo
   L'opposto: fondo chiaro e caldo come una pelle di capra
   montata sul cerchio, inchiostro scuro, il rosso del logo
   come unico colore. Le tue fotografie, tutte scure, ci
   risaltano dentro come stampe su carta.
   Titolo in un serif contemporaneo, testo in grottesco:
   antico e contemporaneo, che è poi quello che fai.
   =========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,400..700&display=swap");

:root {
  --fondo: #f3ede3;
  --fondo-alt: #ffffff;
  --fondo-scuro: #ece4d7;
  --linea: #ddd2c1;

  --testo: #3c3630;        /* 9,6:1 sul fondo */
  --testo-forte: #171310;
  --testo-tenue: #7a7065;

  --ciano: #171310;
  --ciano-scuro: #3c3630;
  --rosso: #d8060c;        /* appena scurito: sul chiaro il rosso puro vibra */

  --raggio: 18px;

  --display: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  --testo-font: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  font-variation-settings: "wdth" 100;
  background:
    radial-gradient(110vw 80vh at 82% -12%, rgba(216, 6, 12, .07), transparent 60%),
    radial-gradient(90vw 70vh at 5% 10%, rgba(214, 180, 130, .22), transparent 58%),
    var(--fondo);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--testo-forte);
}
h1 { font-variation-settings: "wdth" 118; letter-spacing: -.032em; line-height: 1.04; }

/* sul chiaro serve il logo a inchiostro: nome nero, icona rossa.
   Sono due file veri, non un filtro: restano nitidi a ogni dimensione. */
.logo-chiaro { display: none; }
.logo-scuro { display: block; }

.testata {
  background: linear-gradient(180deg, rgba(243,237,227,.94), rgba(243,237,227,.7));
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--linea);
}

.lingue { background: rgba(255,255,255,.7); border-color: var(--linea); }
.lingua { color: var(--testo); }
.lingua:hover { background: rgba(23,19,16,.08); color: var(--testo-forte); }
.lingua.attiva { background: var(--rosso); color: #fff; }

.navigazione a { color: var(--testo-forte); font-weight: 600; letter-spacing: .05em; font-size: 13.5px; }
.navigazione a:hover { color: var(--rosso); border-bottom-color: var(--rosso); }
.navigazione a[aria-current="page"] { color: var(--testo-forte); border-bottom-color: var(--rosso); }

.apertura-riga { background: var(--rosso); height: 3px; width: 72px; border-radius: 99px; }
.apertura-ruolo {
  font-family: var(--testo-font); color: var(--testo-tenue);
  letter-spacing: .18em; font-weight: 600; font-size: 13px;
}
.apertura-foto img {
  border-radius: var(--raggio);
  box-shadow: 0 30px 60px -30px rgba(23,19,16,.55);
  -webkit-mask-image: none;
          mask-image: none;
}

.pulsante {
  border-radius: 999px; padding: 13px 24px;
  font-weight: 600; letter-spacing: .05em;
  border-color: var(--linea); color: var(--testo-forte);
  background: rgba(255,255,255,.6);
}
.pulsante:hover { background: #fff; border-color: var(--testo-tenue); transform: translateY(-1px); }
.pulsante-pieno {
  background: var(--rosso); border-color: var(--rosso); color: #fff;
  box-shadow: 0 10px 26px -12px rgba(216,6,12,.75);
}
.pulsante-pieno:hover { background: #b90409; border-color: #b90409; color: #fff; }

a { color: var(--testo-forte); text-decoration-color: var(--testo-tenue); }
a:hover { color: var(--rosso); }

.stampa blockquote {
  border-left: 2px solid var(--rosso);
  font-style: italic;
  font-size: clamp(18px, 2vw, 21px); line-height: 1.45; color: var(--testo-forte);
}
.stampa cite { font-style: normal; }

.scheda { background: #fff; border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: 0 18px 40px -30px rgba(23,19,16,.4); }
.video { border-radius: var(--raggio); background: var(--fondo-scuro); }

.piede { background: var(--fondo-scuro); border-top: 1px solid var(--linea); }
.social a { color: var(--testo-forte); font-weight: 600; letter-spacing: .05em; }
.social a:hover { color: var(--rosso); }
.copyright { color: var(--testo-tenue); }
.salta { background: var(--rosso); color: #fff; }