/*
 * Festival del Sud — base: token, toni, reset, tipografia.
 *
 * Palette (invariata dalla pagina in costruzione):
 *   salvia #a7bf97 · accento (magenta storico) #8e2a7c · inchiostro #2b2b28 · bianco #ffffff
 *
 * L'unico colore che cambia da un'edizione all'altra è l'accento: lo scrive
 * fds-edizioni in <style id="fds-accento"> come --fds-accento. Qui c'è solo il
 * valore di riserva, per quando il plugin non c'è ancora.
 *
 * Contrasti:
 *   inchiostro su salvia 7.1:1 → qualsiasi testo
 *   accento su salvia ≥ 3:1 → solo display (≥ 24px)
 *   bianco su accento ≥ 7:1 → qualsiasi testo
 *   salvia su inchiostro 7.1:1 → qualsiasi testo
 *   accento su inchiostro ~2:1 → solo grafica decorativa
 *
 * Toni: ogni sezione dichiara data-tone="chiaro|magenta|scuro".
 * - senza animazioni la sezione applica il suo tono localmente (sfondo proprio);
 * - con animazioni (html.fds-motion) il tono passa all'elemento <html> e
 *   le variabili registrate con @property sfumano su tutta la pagina.
 */

@property --bg { syntax: '<color>'; inherits: true; initial-value: #a7bf97; }
@property --fg { syntax: '<color>'; inherits: true; initial-value: #2b2b28; }
@property --display { syntax: '<color>'; inherits: true; initial-value: #8e2a7c; }
@property --pop { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --rule { syntax: '<color>'; inherits: true; initial-value: rgba(43, 43, 40, 0.35); }
@property --muted { syntax: '<color>'; inherits: true; initial-value: rgba(43, 43, 40, 0.78); }

:root {
  --fds-salvia: #a7bf97;
  --fds-magenta: var(--fds-accento, #8e2a7c);
  --fds-inchiostro: #2b2b28;
  --fds-bianco: #ffffff;

  /* I due colori della brochure della IX edizione. Non entrano nei toni delle
     sezioni: servono alla mappa dei territori, che la brochure disegna in blu
     profondo su fondo di pietra. */
  --fds-blu: #1c4476;
  --fds-pietra: #dcd5ca;

  --bg: var(--fds-salvia);
  --fg: var(--fds-inchiostro);
  --display: var(--fds-magenta);
  --pop: var(--fds-bianco);
  --rule: rgba(43, 43, 40, 0.35);
  --muted: rgba(43, 43, 40, 0.78);

  --font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --font-text: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --header-h: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* Toni — senza animazioni: applicati alla sezione */
html:not(.fds-motion) [data-tone="magenta"],
html.fds-motion[data-tone="magenta"],
.fds-tone-magenta {
  --bg: var(--fds-magenta);
  --fg: var(--fds-bianco);
  --display: var(--fds-bianco);
  --pop: var(--fds-salvia);
  --rule: rgba(255, 255, 255, 0.4);
  --muted: rgba(255, 255, 255, 0.86);
}

html:not(.fds-motion) [data-tone="scuro"],
html.fds-motion[data-tone="scuro"],
.fds-tone-scuro {
  --bg: var(--fds-inchiostro);
  --fg: var(--fds-salvia);
  --display: var(--fds-bianco);
  --pop: var(--fds-magenta);
  --rule: rgba(167, 191, 151, 0.35);
  --muted: rgba(167, 191, 151, 0.86);
}

.fds-tone-bianco {
  --bg: var(--fds-bianco);
  --fg: var(--fds-inchiostro);
  --display: var(--fds-magenta);
  --pop: var(--fds-salvia);
  --rule: rgba(43, 43, 40, 0.25);
  --muted: rgba(43, 43, 40, 0.8);
}

html:not(.fds-motion) [data-tone="magenta"],
html:not(.fds-motion) [data-tone="scuro"] {
  background: var(--bg);
  color: var(--fg);
}

html.fds-motion {
  transition: --bg 0.7s ease, --fg 0.7s ease, --display 0.7s ease, --pop 0.7s ease, --rule 0.7s ease, --muted 0.7s ease;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: inherit; text-decoration-color: var(--fds-magenta); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

::selection { background: var(--fds-magenta); color: var(--fds-bianco); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Tipografia */
.fds-eyebrow {
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.4;
}

.fds-d2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--display);
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-wrap: balance;
  font-size: clamp(48px, 9vw, 150px);
  font-size: clamp(48px, min(9vw, 16svh), 150px);
}

.fds-d3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--display);
  text-transform: uppercase;
  line-height: 0.9;
  text-wrap: balance;
  font-size: clamp(34px, 4.6vw, 76px);
}

.fds-lead {
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.45;
  max-width: 34ch;
  text-wrap: pretty;
}

.fds-note {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

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

.fds-skip {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--fds-inchiostro);
  color: var(--fds-salvia);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}
.fds-skip:focus { transform: none; }

@keyframes fds-spin { to { transform: rotate(360deg); } }
@keyframes fds-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

@view-transition { navigation: auto; }

/* La stella a otto punte, disegnata invece che scritta.
   Il carattere ✳ su iOS ha una presentazione a emoji e diventa un fiorellino
   verde: il simbolo del festival cambiava faccia a seconda del telefono. */
.fds-star {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  fill: currentColor;
  flex: none;
}