/*
Theme Name: The Roman Way
Theme URI: https://www.theromanway.it/
Author: SAZ Network
Description: Tema su misura per il run club The Roman Way (Roma). Ogni testo, immagine, link e colore del sito si modifica da wp-admin, in "The Roman Way → Contenuti del sito". Run e appuntamenti hanno i loro menu dedicati.
Version: 2.7.3
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: the-roman-way
*/

/* ═══════════════════════════════════════════════════════════════════════
   THE ROMAN WAY — Run Club di Roma
   style.css
   ───────────────────────────────────────────────────────────────────────
   Indice
   01 · Variabili (colori, font, spazi)      08 · Chi siamo
   02 · Reset e base                          09 · Gallery
   03 · Tipografia e utility                  10 · Eventi
   04 · Bottoni                               11 · Unisciti / CTA
   05 · Animazioni di comparsa                12 · Social + Footer
   06 · Binario "via" + Navbar                13 · Placeholder immagini
   07 · Hero + Ticker                         14 · Responsive + stampa
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ 00 · CARATTERI ══════════════════════════════════════════════════
   I caratteri sono serviti dal tema, non da un CDN esterno. Tre motivi:
   il browser non deve aprire una seconda connessione verso un altro
   dominio (200–350 ms in meno su rete mobile), i file si possono
   precaricare, e l'indirizzo IP di chi visita non viene trasmesso a
   terzi senza consenso.

   Tutti e tre i caratteri sono sotto SIL Open Font License 1.1:
   il testo delle licenze è in assets/font/.

   Se preferisci caricarli da un servizio esterno, scrivi l'indirizzo in
   "The Roman Way → Contenuti → Colori e caratteri": quello che imposti
   lì viene caricato in aggiunta e ha la precedenza.
   ─────────────────────────────────────────────────────────────────── */

/* Archivo variabile: due assi, larghezza 62–125 e peso 100–900.
   Il tema usa wdth da 100 a 118 e wght da 500 a 800. */
@font-face{
  font-family: "Archivo";
  src: url("assets/font/archivo-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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;
}
/* Scaricato solo se in pagina compare un carattere dell'Europa centrale
   o orientale: per un testo in italiano non viene mai richiesto. */
@font-face{
  font-family: "Archivo";
  src: url("assets/font/archivo-latin-ext.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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: "Inter";
  src: url("assets/font/inter-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Inter";
  src: url("assets/font/inter-latin-ext.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Space Mono";
  src: url("assets/font/space-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Space Mono";
  src: url("assets/font/space-mono-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- Ripieghi con metriche corrette ----
   Nel mezzo secondo che passa prima che il carattere arrivi, la pagina
   usa quello di sistema. Se le larghezze non coincidono, al cambio il
   testo si riassesta e il titolo dell'hero — l'elemento più grande della
   pagina — salta sotto gli occhi di chi legge.

   Le percentuali sono state trovate provando valori a scalare finché la
   larghezza del ripiego non ha coinciso con quella del carattere vero,
   negli stessi identici stili che usa il tema:
     titoli  — "PROSSIMI APPUNTAMENTI" a 100px, wdth 112 e peso 800:
               1323,2px in Archivo, 1328,0px col ripiego al 102,5%
               (scarto 0,36%; senza correzione sarebbe 1,8%)
     corpo   — una frase italiana a 100px:
               3016,1px in Inter, 3005,0px col ripiego all'89,5%
               (scarto 0,37%; senza correzione sarebbe 10,8%)

   Il ripiego è tarato su Arial e non su Arial Black di proposito: Arial
   ha metriche prevedibili su ogni sistema (Liberation Sans su Linux,
   Helvetica su macOS), Arial Black no. */
@font-face{
  font-family: "Archivo Ripiego";
  src: local("Arial Bold"), local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 102.5%;
  font-weight: 100 900;
  font-display: swap;
}
@font-face{
  font-family: "Inter Ripiego";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 89.5%;
  font-weight: 100 900;
  font-display: swap;
}


/* ═══ 01 · VARIABILI ══════════════════════════════════════════════════ */
:root{

  /* ---- PALETTE PRINCIPALE ----
     Questi sono i valori di partenza. Per cambiarli NON serve toccare
     questo file: vai su "The Roman Way → Contenuti del sito → Colori e
     caratteri". Quello che imposti lì sovrascrive le righe qui sotto. */
  --primary:    #0C0C0D;   /* nero inchiostro (blocchi notte, testo)      */
  --secondary:  #2B2A6E;   /* blu navy Rome Half Marathon                  */
  --background: #FBFAF8;   /* bianco carta                                 */
  --text:       #0C0C0D;   /* colore testo                                 */
  --accent:     #C7007F;   /* magenta The Roman Way (campionato dal logo)  */

  /* ---- Derivati (di norma non serve toccarli) ---- */
  --stone:        #E7E2D8;             /* travertino: sezioni alternate    */
  --accent-deep:  #C7007F;             /* su fondo chiaro il magenta di brand passa gia' AA (5.6:1) */
  --accent-chiaro:#FF4FB8;             /* schiarito: solo per testo piccolo sui fondi scuri (6.6:1 sul nero) */
  --accent-stone: #A80069;             /* magenta approfondito: leggibile sul travertino (5.7:1) */
  --ink-soft:     rgba(12,12,13,.62);
  --ink-line:     rgba(12,12,13,.14);
  --paper-soft:   rgba(255,255,255,.66);
  --paper-line:   rgba(255,255,255,.16);

  /* ---- Tipografia ---- */
  --font-display: "Archivo", "Archivo Ripiego", Arial, sans-serif;      /* titoli */
  --font-body:    "Inter", "Inter Ripiego", Arial, system-ui, sans-serif;
  --font-data:    "Space Mono", ui-monospace, monospace; /* km, orari, dati */

  /* ---- Ritmo ---- */
  --gutter:  clamp(20px, 5vw, 64px);
  --wrap:    1320px;
  --rail:    64px;                       /* larghezza binario laterale */
  --sec-y:   clamp(88px, 12vw, 168px);   /* padding verticale sezioni  */
  --ease:    cubic-bezier(.16, 1, .3, 1);
}

/* --accent-stone derivato dall'accento invece che fisso: se cambi il colore
   in wp-admin, la versione leggibile sul travertino lo segue da sola.
   Il valore fisso qui sopra resta come ripiego dove color-mix() non c'è. */
@supports (color: color-mix(in srgb, red 50%, black)){
  :root{ --accent-stone: color-mix(in srgb, var(--accent) 82%, #000); }
}


/* ═══ 02 · RESET E BASE ═══════════════════════════════════════════════ */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body{
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked{ overflow: hidden; }

img{ max-width: 100%; display: block; }
a{ color: inherit; }
button{ font: inherit; color: inherit; }

/* Necessario: le regole display: flex/grid qui sotto vincerebbero
   sull'attributo hidden, lasciando cliccabili elementi invisibili. */
[hidden]{ display: none !important; }

::selection{ background: var(--accent); color: #fff; }

/* Focus visibile e coerente ovunque */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link{
  position: fixed; top: 8px; left: 8px; z-index: 999;
  padding: 10px 18px; background: var(--primary); color: #fff;
  font-family: var(--font-data); font-size: .8rem; text-decoration: none;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip-link:focus{ transform: none; }


/* ═══ 03 · TIPOGRAFIA E UTILITY ═══════════════════════════════════════ */
.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 112, "wght" 800;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: .86;
  margin: 0;
  text-wrap: balance;
}

p{ margin: 0 0 1.1em; }
p:last-child{ margin-bottom: 0; }
strong{ font-weight: 600; }

/* Etichetta mono maiuscola: eyebrow, km, meta */
.kicker,
.km{
  font-family: var(--font-data);
  /* 12px sul telefono, 13,1px sul desktop: sotto i 12 il maiuscolo
     spaziato diventa faticoso da leggere. */
  font-size: clamp(.75rem, .68rem + .3vw, .82rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: block;
}
.kicker--light,
.section--ink .km{ color: var(--accent-chiaro); }

/* Sul travertino il magenta pieno si ferma a 4,36:1 e non passa AA:
   qui serve la versione approfondita. */
.section--stone .kicker,
.section--stone .km{ color: var(--accent-stone); }

/* Intestazione di sezione */
.sec-head{ margin-bottom: clamp(40px, 6vw, 76px); }
.sec-head .km{ margin-bottom: 18px; }

.sec-head--split{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
/* Senza questo i figli hanno min-width:auto e non scendono sotto la
   larghezza della parola più lunga: è ciò che spingeva "APPUNTAMENTI"
   fuori dallo schermo sotto i 414px. */
.sec-head--split > *{ min-width: 0; }

.sec-title{
  /* La curva è calibrata per restare identica da 1211px in su (dove
     tocca il tetto di 5.6rem) e per scendere a 28px a 320px, dove
     "APPUNTAMENTI" deve stare in 284px di spazio utile. */
  font-size: clamp(1.75rem, .375rem + 6.9vw, 5.6rem);
  overflow-wrap: break-word;   /* rete di sicurezza per parole ancora più lunghe */
}
.sec-title--xl{
  font-size: clamp(2.6rem, 1rem + 10vw, 9rem);
  line-height: .82;
  overflow-wrap: break-word;
}

.sec-note{
  max-width: 34ch;
  font-size: .95rem;
  color: var(--ink-soft);
  margin: 0;
  padding-bottom: .5em;
}

.lead{
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: 1.1em;
}

/* Blocchi sezione */
.section{ padding-block: var(--sec-y); position: relative; }
.section--stone{ background: var(--stone); }

.section--ink{
  background: var(--primary);
  color: #fff;
}
.section--ink .sec-note,
.section--ink p{ color: var(--paper-soft); }
.section--ink h2,
.section--ink h3{ color: #fff; }


/* ═══ 04 · BOTTONI ════════════════════════════════════════════════════ */
.btn{
  --btn-bg: var(--primary);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-data);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
/* Riempimento che sale al passaggio del mouse */
.btn::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .45s var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before{ transform: none; }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn--accent{ --btn-bg: var(--accent); }
.btn--accent::before{ background: var(--primary); }

.btn--ghost{
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255,255,255,.4);
}
.btn--ghost:hover{ border-color: var(--accent); }

/* min-height: sotto i 44px il bersaglio è scomodo da centrare col pollice */
.btn--sm{ padding: 11px 20px; font-size: .68rem; min-height: 44px; }
.btn--lg{ padding: 22px 44px; font-size: .85rem; }


/* ═══ 05 · ANIMAZIONI DI COMPARSA ═════════════════════════════════════ */
.reveal{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in{ opacity: 1; transform: none; }

/* Righe che salgono da dietro una maschera (hero) */
.reveal-line{ display: block; overflow: hidden; }
.reveal-line > span{
  display: block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1.1s var(--ease), opacity 1.1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-loaded .reveal-line > span{ transform: none; opacity: 1; }


/* ═══ 06 · BINARIO "VIA" + NAVBAR ═════════════════════════════════════ */

/* Il binario è l'elemento firma: rappresenta il percorso della mezza
   maratona. Il riempimento magenta e il contachilometri seguono lo scroll. */
.route{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail);
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  padding-block: 108px 32px;
  gap: 20px;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #fff;
}
.route__label{
  font-family: var(--font-data);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  opacity: .55;
}
.route__track{
  flex: 1;
  width: 1px;
  background: rgba(255,255,255,.22);
  position: relative;
  overflow: hidden;
}
.route__fill{
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
}
.route__readout{
  font-family: var(--font-data);
  font-size: .62rem;
  text-align: center;
  line-height: 1.35;
}
.route__readout b{ display: block; font-weight: 700; }
.route__readout i{ display: block; font-style: normal; opacity: .45; }

/* --- Navbar --- */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  color: #fff;
  transition: background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}
.nav__bar{
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
  transition: padding .4s var(--ease);
}
.nav--solid{
  background: var(--background);
  color: var(--text);
  box-shadow: 0 1px 0 var(--ink-line);
}
.nav--solid .nav__bar{ padding-block: 14px; }

.nav__progress{
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* Logo */
.brand{
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
  flex-shrink: 0;
}
.brand__img{ height: 30px; width: auto; }
.brand__img--on-light{ display: none; }
.nav--solid .brand__img--on-dark{ display: none; }
.nav--solid .brand__img--on-light{ display: block; }

/* Link */
.nav__links{
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav__links a{
  position: relative;
  font-family: var(--font-data);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 4px;
}
.nav__links a:not(.btn)::after{
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__links a:not(.btn):hover::after,
.nav__links a.is-active::after{ transform: scaleX(1); transform-origin: left; }
.nav__links a.is-active{ color: var(--accent); }

.nav__cta{ margin-left: 6px; }
.nav--solid .nav__cta{ --btn-fg: #fff; }

/* Hamburger */
.burger{
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  position: relative;
}
.burger span{
  position: absolute; left: 11px;
  width: 22px; height: 2px;
  background: currentColor;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1){ top: 18px; }
.burger span:nth-child(2){ top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform: translateY(-3.5px) rotate(-45deg); }


/* ═══ 07 · HERO + TICKER ══════════════════════════════════════════════ */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 140px 92px;
  background: var(--primary);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__media{
  position: absolute; inset: -8% 0;
  z-index: -1;
  will-change: transform;
}
.hero__img{
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}
/* Velo elegante: verticale + alone magenta molto discreto */
.hero__veil{
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 78% 12%, rgba(199,0,127,.22), transparent 62%),
    linear-gradient(180deg, rgba(12,12,13,.78) 0%, rgba(12,12,13,.42) 42%, rgba(12,12,13,.95) 100%);
}
/* Monogramma gigante in filigrana: si vede anche senza foto */
.hero__watermark{
  position: absolute;
  right: -6%; top: 50%;
  transform: translateY(-50%);
  width: min(58vw, 720px);
  height: auto;
  opacity: .09;   /* a .05 sopra una foto era invisibile: 31 KB spesi per niente */
  pointer-events: none;
}

.hero__inner{ position: relative; }

.hero__title{
  font-size: clamp(3.4rem, 13.5vw, 11.5rem);
  line-height: .8;
  letter-spacing: -.03em;
  font-variation-settings: "wdth" 118, "wght" 800;
  margin: 22px 0 0;
}
.hero__title .dot{ color: var(--accent); font-style: normal; }

.hero__sub{
  margin: 30px 0 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.45;
  color: rgba(255,255,255,.82);
  max-width: 34ch;
}

/* Sequenza d'ingresso orchestrata: eyebrow → titolo riga per riga → testo → CTA */
.hero .kicker{ --d: 150ms; }
.hero__title .reveal-line{ padding-block: .1em; margin-block: -.1em; }
.hero__title .reveal-line:nth-child(1){ --d: 260ms; }
.hero__title .reveal-line:nth-child(2){ --d: 360ms; }
.hero__title .reveal-line:nth-child(3){ --d: 460ms; }
.hero__sub{ --d: 640ms; }

.hero__actions{
  margin-top: 40px;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease) .78s, transform .9s var(--ease) .78s;
}
.is-loaded .hero__actions{ opacity: 1; transform: none; }
.hero__actions > span{ display: flex; flex-wrap: wrap; gap: 14px; }

.hero__scroll{
  position: absolute;
  right: var(--gutter); bottom: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: rgba(255,255,255,.6);
  transition: color .3s var(--ease);
}
.hero__scroll:hover{ color: #fff; }
.hero__scroll-txt{
  font-family: var(--font-data);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero__scroll-line{
  width: 1px; height: 64px;
  background: linear-gradient(currentColor, transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after{
  content: "";
  position: absolute; inset: 0;
  background: var(--accent);
  animation: drop 2.4s var(--ease) infinite;
}
@keyframes drop{
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* Ticker */
.ticker{
  background: var(--primary);
  color: #fff;
  border-block: 1px solid var(--paper-line);
  overflow: hidden;
  padding-block: 16px;
}
.ticker__row{
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
  will-change: transform;
}
.ticker__row span{
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-right: .6em;
  white-space: nowrap;
}
.ticker__row i{ color: var(--accent); font-style: normal; }
@keyframes marquee{ to{ transform: translateX(-50%); } }


/* ═══ 08 · CHI SIAMO ══════════════════════════════════════════════════ */
.about{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.about__media{ margin: 0; }

/* Arco romano: ripresa diretta del monogramma */
.arch{
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 50% 50% 4px 4px / 30% 30% 2px 2px;
  background: var(--primary);
}
.arch img{ width: 100%; height: 100%; object-fit: cover; }

.about__text{ padding-top: 6px; }
/* Sopra i 75 caratteri per riga l'occhio fatica a ritrovare l'inizio
   della riga successiva: a 1600px la colonna ne misurava 76. */
.about__text p{ max-width: 62ch; }

.stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 44px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--ink-line);
}
.stat dt{
  font-family: var(--font-data);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.stat dd{
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.stat dd small{ font-size: .5em; color: var(--accent-deep); }


/* ═══ 09 · GALLERY ════════════════════════════════════════════════════
   Flessibile invece che a griglia fissa: con 2 run come con 20 il ritmo
   resta lo stesso, senza celle vuote a fine riga. */
.gallery{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 22px);
}
.shot{
  margin: 0;
  flex: 1 1 260px;
  max-width: 400px;
}
/* Ritmo editoriale: le card pari scendono, come un provino a contatto */
.shot:nth-child(even){ margin-top: clamp(22px, 4vw, 60px); }

.shot__btn{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--primary);
  overflow: hidden;
  position: relative;
  text-decoration: none;
}
.shot__btn img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease), opacity .5s var(--ease);
}
.shot__btn::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(12,12,13,.55));
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.shot__btn:hover img{ transform: scale(1.06); }
.shot__btn:hover::after,
.shot__btn:focus-visible::after{ opacity: 1; }

/* Freccia "vai alla gallery": stessa firma visiva delle social-card */
.shot__go{
  position: absolute;
  top: 18px; right: 18px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 1rem;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), background .3s var(--ease);
}
.shot__btn:hover .shot__go,
.shot__btn:focus-visible .shot__go{
  opacity: 1;
  transform: none;
  background: var(--accent);
}

.shot figcaption{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
}
.shot figcaption b{
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.shot figcaption i{
  font-family: var(--font-data);
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}


/* ═══ 10 · EVENTI ═════════════════════════════════════════════════════ */
.events{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.event{
  display: flex;
  flex-direction: column;
  background: var(--background);
  border: 1px solid var(--ink-line);
  padding: 26px 26px 24px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  position: relative;
  overflow: hidden;
}
.event::before{
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.event:hover{
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 22px 44px -18px rgba(12,12,13,.28);
}
.event:hover::before{ transform: scaleX(1); }

.event__date{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
}
.event__day{
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108, "wght" 800;
  font-size: clamp(2.2rem, 8vw, 3.1rem);  /* era fisso: a 320px occupava un terzo della scheda */
  line-height: .82;
  letter-spacing: -.03em;
}
.event__mon{
  font-family: var(--font-data);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.event__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--font-data);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ink-line);
}
.event__meta span{ display: inline-flex; align-items: center; gap: 6px; }
.event__meta span::before{
  content: "";
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
}

.event__title{
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 12px;
}
.event__desc{
  font-size: .95rem;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
/* Prenota e Aggiungi al calendario sono due gesti diversi sullo stesso
   appuntamento: stanno affiancati, e vanno a capo insieme quando la
   scheda si stringe. Il margin-top:auto passa alla riga, così le schede
   di altezza diversa allineano comunque i bottoni in fondo. */
.event__azioni{
  margin-top: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px;
}
.event__cta{ align-self: flex-start; }

.events__scorri{ display: none; }   /* compare solo dove c'è il carosello */

.events__empty{
  font-family: var(--font-data);
  font-size: .85rem;
  color: var(--ink-soft);
}


/* ═══ 11 · UNISCITI + CTA ═════════════════════════════════════════════ */
.perks{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--paper-line);
  border-block: 1px solid var(--paper-line);
}
.perk{
  background: var(--primary);
  padding: 34px 28px 38px;
  transition: background .45s var(--ease);
}
.perk:hover{ background: #151517; }
.perk svg{
  width: 30px; height: 30px;
  margin-bottom: 22px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.perk h3{
  font-size: 1.15rem;
  margin-bottom: 10px;
  font-variation-settings: "wdth" 104, "wght" 700;
}
.perk p{ font-size: .92rem; line-height: 1.55; }

.cta-band{
  margin-top: clamp(56px, 8vw, 92px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cta-band p{
  font-family: var(--font-display);
  font-variation-settings: "wdth" 110, "wght" 700;
  font-size: clamp(1.6rem, 4.2vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: #fff !important;
  max-width: 16ch;
  margin: 0;
}


/* ═══ 12 · SOCIAL + FOOTER ════════════════════════════════════════════ */
.section--finish{ overflow: hidden; }

.finish{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 22px);
  margin-top: clamp(40px, 6vw, 64px);
}
.social-card{
  position: relative;
  display: block;
  padding: 38px 34px 34px;
  border: 1px solid var(--paper-line);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.social-card::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.social-card:hover{ transform: translateY(-5px); border-color: var(--accent); }
.social-card:hover::before,
.social-card:focus-visible::before{ transform: none; }

.social-card__tag{
  display: block;
  font-family: var(--font-data);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-chiaro);
  margin-bottom: 16px;
  transition: color .4s var(--ease);
}
.social-card:hover .social-card__tag{ color: #fff; }
.social-card__handle{
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108, "wght" 800;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.social-card__desc{
  display: block;
  font-size: .92rem;
  color: rgba(255,255,255,.7);
  max-width: 30ch;
  transition: color .4s var(--ease);
}
.social-card:hover .social-card__desc{ color: rgba(255,255,255,.92); }
.social-card__go{
  position: absolute;
  top: 30px; right: 30px;
  font-size: 1.3rem;
  transition: transform .45s var(--ease);
}
.social-card:hover .social-card__go{ transform: translate(4px, -4px); }

/* --- Icone dei canali --- */
.social-ico{
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.social-card--icona .social-ico{
  width: 30px; height: 30px;
  color: var(--tinta, var(--accent-chiaro));
  margin-bottom: 20px;
  transition: color .4s var(--ease);
}
.social-card:hover .social-ico{ color: #fff; }

/* --- Riga dei canali secondari ---
   Le schede grandi reggono due o tre canali. Al quarto il "traguardo"
   diventa un elenco e perde il colpo d'occhio: da lì in poi i canali
   passano a questa riga, che ne regge una dozzina senza appesantire. */
.social-strip{
  margin-top: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.social-strip__eti{
  font-family: var(--font-data);
  font-size: clamp(.66rem, .62rem + .2vw, .72rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-chiaro);
}
.social-strip__lista{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.social-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;               /* comodo da toccare col pollice */
  padding: 12px 20px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  font-family: var(--font-data);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,.82);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.social-pill:hover,
.social-pill:focus-visible{
  color: #fff;
  border-color: var(--tinta, var(--accent));
  transform: translateY(-2px);
}
/* La tinta della piattaforma appare solo al passaggio del mouse: il nero
   e il magenta restano i padroni della pagina, ma ogni canale resta
   riconoscibile. Senza color-mix() si usa il bordo colorato e basta. */
@supports (background: color-mix(in srgb, red 20%, transparent)){
  .social-pill:hover,
  .social-pill:focus-visible{ background: color-mix(in srgb, var(--tinta) 16%, transparent); }
}

/* Footer */
.footer{
  background: var(--primary);
  color: #fff;
  padding-top: clamp(56px, 7vw, 88px);
  border-top: 1px solid var(--paper-line);
}
.footer__grid{
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(48px, 6vw, 72px);
}
.footer__brand p{
  margin-top: 20px;
  max-width: 38ch;
  font-size: .92rem;
  color: var(--paper-soft);
}
.brand--footer img{ height: 42px; width: auto; }

.footer__nav{ display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer__nav h3{
  font-family: var(--font-data);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-chiaro);
  margin-bottom: 6px;
}
.footer__nav a{
  font-size: .93rem;
  text-decoration: none;
  color: var(--paper-soft);
  transition: color .3s var(--ease);
}
.footer__nav a:hover{ color: #fff; }

.footer__bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-block: 24px;
  border-top: 1px solid var(--paper-line);
  font-family: var(--font-data);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* Torna in alto */
.to-top{
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 50;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), background .3s var(--ease);
}
.to-top.is-visible{ opacity: 1; transform: none; }
.to-top:hover{ background: var(--accent); }


/* ═══ 13 · ELEMENTI SPECIFICI DI WORDPRESS ════════════════════════════ */

/* Run senza foto: invece di un buco, un invito ad aggiungerla */
.shot__vuota{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 20px;
  font-family: var(--font-data);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.7;
  color: rgba(255,255,255,.42);
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px),
    var(--primary);
}

/* Logo Rome Half Marathon nel footer */
.footer__rhm{
  display: inline-block;
  margin-top: 26px;
  padding: 14px 18px;
  background: #fff;
  border-radius: 4px;
  transition: transform .4s var(--ease);
}
.footer__rhm:hover{ transform: translateY(-3px); }
.footer__rhm img{ height: 42px; width: auto; }

/* La barra di amministrazione di WordPress non deve coprire la navbar */
body.admin-bar .nav{ top: 32px; }
@media (max-width: 782px){ body.admin-bar .nav{ top: 46px; } }


/* ═══ 13b · PAGINE INTERNE, ELENCHI E 404 ═════════════════════════════
   Serviti da page.php, index.php e 404.php. Riusano i blocchi già
   esistenti (.section, .sec-head, .btn) e aggiungono solo ciò che manca:
   una colonna di lettura stretta e la formattazione del testo lungo. */

.wrap--stretto{ max-width: 860px; }

/* La prima sezione di una pagina interna sta sotto la navbar fissa */
.section--documento,
.section--404{ padding-top: calc(var(--sec-y) + 40px); }

.section--404{ min-height: 78svh; display: flex; align-items: center; }
.lead--404{ color: var(--paper-soft) !important; max-width: 46ch; margin-top: 8px; }

.quattrocentoquattro__evento{
  margin: clamp(32px, 5vw, 52px) 0;
  padding: 26px 28px;
  border: 1px solid var(--paper-line);
  border-left: 3px solid var(--accent);
  max-width: 42ch;
}
.quattrocentoquattro__evento .event__title{ margin: 12px 0 8px; }
.quattrocentoquattro__evento .event__desc{ margin: 0; color: var(--paper-soft); }

/* --- Testo lungo scritto nell'editor di WordPress --- */
.prosa{
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 58ch;   /* ~75 caratteri per riga: oltre, l'occhio fatica a ritrovare l'inizio della riga dopo */
}
.prosa > * + *{ margin-top: 1.15em; }
.prosa h2,
.prosa h3,
.prosa h4{
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-top: 1.9em;
}
.prosa h2{ font-size: clamp(1.5rem, 3vw, 2rem); font-variation-settings: "wdth" 104, "wght" 700; }
.prosa h3{ font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-variation-settings: "wdth" 100, "wght" 700; }
.prosa h4{ font-size: 1.1rem; font-variation-settings: "wdth" 100, "wght" 600; }
.prosa a{ color: var(--accent-stone); text-underline-offset: .18em; }
.prosa a:hover{ text-decoration-thickness: 2px; }
.prosa ul,
.prosa ol{ padding-left: 1.3em; }
.prosa li + li{ margin-top: .45em; }
.prosa blockquote{
  margin-inline: 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 1.2rem;
  line-height: 1.35;
}
.prosa img,
.prosa figure{ margin-block: 1.8em; }
.prosa table{ width: 100%; border-collapse: collapse; font-size: .95rem; }
.prosa th,
.prosa td{ padding: 10px 12px; border-bottom: 1px solid var(--ink-line); text-align: left; }
.prosa code{
  font-family: var(--font-data);
  font-size: .88em;
  background: rgba(12,12,13,.07);
  padding: .15em .4em;
  border-radius: 3px;
}
.prosa hr{ border: 0; border-top: 1px solid var(--ink-line); margin-block: 2.4em; }

.documento__media{ margin: 0 0 clamp(28px, 4vw, 44px); }
.documento__media img{ width: 100%; height: auto; }
.documento__ritorno{ margin-top: clamp(40px, 6vw, 64px); }

/* --- Elenco di articoli --- */
.elenco{ display: flex; flex-direction: column; }
.voce{
  padding-block: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--ink-line);
}
.voce:last-child{ border-bottom: 1px solid var(--ink-line); }
.voce__data{
  font-family: var(--font-data);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-stone);
}
.voce__titolo{
  font-size: clamp(1.35rem, 3vw, 2rem);
  text-transform: none;
  line-height: 1.05;
  margin: 10px 0 10px;
}
.voce__titolo a{ text-decoration: none; }
.voce__titolo a:hover{ color: var(--accent-stone); }
.voce__testo{ color: var(--ink-soft); max-width: 62ch; margin: 0; }

.pagination{ margin-top: clamp(36px, 5vw, 56px); }
.pagination .nav-links{ display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers{
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  font-family: var(--font-data);
  font-size: .74rem;
  text-decoration: none;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
}
.pagination .page-numbers:hover{ border-color: var(--accent); }
.pagination .page-numbers.current{ background: var(--primary); color: #fff; border-color: var(--primary); }


/* ═══ 13c · ISCRIZIONE E PRIMA VOLTA ══════════════════════════════════ */

/* --- La fascia che chiede l'indirizzo ---
   Fondo carta fra due sezioni travertino: si stacca senza urlare, ed è
   l'unico punto della pagina in cui il sito chiede invece di mandare
   via. */
.section--iscrizione{
  background: var(--background);
  padding-block: clamp(64px, 8vw, 108px);
  border-block: 1px solid var(--ink-line);
}
.iscrizione{
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.iscrizione__testo p{ color: var(--ink-soft); max-width: 46ch; margin-top: 14px; }
.sec-title--media{ font-size: clamp(1.6rem, .8rem + 3.2vw, 3.2rem); }

.modulo{ display: flex; flex-direction: column; gap: 14px; }
.modulo__campo{ display: flex; flex-direction: column; gap: 6px; margin: 0; }
.modulo__campo label{
  font-family: var(--font-data);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.modulo input[type="text"],
.modulo input[type="email"]{
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 15px 18px;              /* 50px di altezza: comodo col pollice */
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  background: #fff;
  color: var(--text);
  width: 100%;
}
.modulo input::placeholder{ color: rgba(12,12,13,.38); }
.modulo input:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: transparent;
}
.modulo__consenso{ margin: 2px 0 0; }
.modulo__consenso label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}
.modulo__consenso input{ margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.modulo__consenso a{ color: var(--accent-stone); padding-block: 6px; }
.modulo__nota{ font-size: .82rem; color: var(--ink-soft); margin: 14px 0 0; max-width: 42ch; }

/* Il campo trappola per i robot. Non display:none: alcuni lo saltano
   proprio perché è nascosto in modo troppo evidente. */
.modulo__esca{
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.avviso{
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  background: rgba(199,0,127,.05);
  margin: 0 0 18px;
  font-size: .95rem;
}
.avviso--errore{ border-left-color: #B32D2E; background: rgba(179,45,46,.06); }

/* --- Le risposte alle domande di chi non è mai venuto --- */
.risposte{
  list-style: none;
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.risposta svg{
  width: 30px; height: 30px;
  fill: none;
  stroke: var(--accent-stone);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 14px;
}
.risposta h3{
  font-size: 1.1rem;
  text-transform: none;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.risposta p{ color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* --- I gruppi di passo ---
   La cosa che convince di più chi teme di restare indietro non è una
   rassicurazione, è un numero. */
.gruppi,
.voci{ margin-top: clamp(40px, 6vw, 72px); }
.gruppi__titolo{
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  text-transform: none;
  margin: 0 0 20px;
}
.gruppi__lista{ list-style: none; margin: 0; padding: 0; }
.gruppo{
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 8fr);
  gap: 8px 24px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--ink-line);
}
.gruppo:last-child{ border-bottom: 1px solid var(--ink-line); }
.gruppo__nome{
  font-family: var(--font-display);
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: 1.05rem;
}
.gruppo__passo{
  font-family: var(--font-data);
  font-size: .9rem;
  color: var(--accent-stone);
  white-space: nowrap;
}
.gruppo__testo{ color: var(--ink-soft); font-size: .95rem; }

/* --- Le testimonianze --- */
.voci__lista{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.voce-runner{
  margin: 0;
  padding: 26px 28px;
  background: var(--background);
  border: 1px solid var(--ink-line);
}
.voce-runner blockquote{
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 1.1rem;
  line-height: 1.4;
}
.voce-runner blockquote::before{ content: "“"; }
.voce-runner blockquote::after{ content: "”"; }
.voce-runner figcaption{ display: flex; align-items: center; gap: 12px; }
.voce-runner__foto img{
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.voce-runner figcaption b{
  display: block;
  font-family: var(--font-data);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
.voce-runner figcaption i{
  display: block;
  font-style: normal;
  font-size: .8rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* --- Bottone calendario sotto agli appuntamenti --- */
.events__calendario{ margin: clamp(20px, 3vw, 32px) 0 0; }
.btn--scuro{ border-color: var(--ink-line); color: var(--text); }
.btn--scuro::before{ background: var(--primary); }
.btn--scuro:hover{ color: #fff; border-color: var(--primary); }


/* ═══ 13d · PAGINA DI ATTERRAGGIO IN ALTRA LINGUA ═════════════════════
   Stessa grammatica visiva del sito, ma senza il menu italiano: chi
   arriva qui non sa leggerlo, e un menu che non si capisce è peggio di
   nessun menu. */

.atterraggio{
  position: relative;
  min-height: 62svh;
  display: flex;
  align-items: flex-end;
  background: var(--primary);
  color: #fff;
  overflow: hidden;
  padding-block: 150px 72px;
}
.atterraggio__media{ position: absolute; inset: 0; }
.atterraggio__img{ width: 100%; height: 100%; object-fit: cover; }
.atterraggio__inner{ position: relative; z-index: 2; width: 100%; }
.atterraggio .sec-title--xl{ color: #fff; margin: 0; }

.nav__links--ridotto{ margin-left: auto; }

/* Collegamento alla seconda lingua: si distingue dalle voci di menu
   senza rubare loro attenzione. */
.nav__lingua{
  font-family: var(--font-data);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: .72;
  transition: opacity .3s var(--ease);
}
.nav__lingua:hover{ opacity: 1; }
@media (max-width: 860px){
  .nav__lingua{ font-size: .8rem; padding: 12px 20px; margin-top: 18px; align-self: flex-start; }
}

.footer__grid--ridotto{ grid-template-columns: 1fr; padding-bottom: clamp(28px, 4vw, 44px); }

/* --- Le prossime date --- */
.date-prossime{
  list-style: none;
  margin: 0 0 clamp(32px, 5vw, 52px);
  padding: 0;
}
.data-prossima{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  padding: 18px 0;
  border-top: 1px solid var(--paper-line);
}
.data-prossima:last-child{ border-bottom: 1px solid var(--paper-line); }
.data-prossima__giorno{
  font-family: var(--font-data);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-chiaro);
  flex-basis: 100%;
}
.data-prossima__data{
  font-family: var(--font-display);
  font-variation-settings: "wdth" 106, "wght" 700;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: #fff;
}
.data-prossima__ora{
  font-family: var(--font-data);
  font-size: .9rem;
  color: var(--accent-chiaro);
}
.data-prossima__luogo{ color: var(--paper-soft); font-size: .95rem; }

.atterraggio__azioni{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.atterraggio__social{ margin: 0; }

/* Sul fondo scuro la prosa cambia colori */
.section--ink .prosa{ color: var(--paper-soft); }
.section--ink .prosa a{ color: var(--accent-chiaro); }

@media (max-width: 767px){
  .atterraggio{ padding-block: 120px 48px; min-height: 54svh; }
  .atterraggio__azioni .btn{ flex: 1 1 100%; justify-content: center; }
}


/* ═══ 14 · RESPONSIVE ═════════════════════════════════════════════════ */

/* ≥ 1100 px — compare il binario laterale
   Il binario galleggia sopra la pagina invece di spostarla. Prima il
   corpo del sito veniva spinto a destra di 64px, e sulla prima schermata
   restava una striscia chiara lungo tutto il bordo sinistro che spezzava
   la foto a tutto campo. Ora la foto arriva al bordo e il binario ci sta
   sopra: è il motivo per cui usa mix-blend-mode. */
@media (min-width: 1100px){
  .route{ display: flex; }
  /* Il contenuto lascia libera la colonna del binario. Il margine
     asimmetrico è voluto: la colonna di sinistra è il margine
     editoriale della pagina. */
  .wrap{ padding-left: calc(var(--gutter) + var(--rail)); }
  .nav__bar{ padding-left: calc(var(--gutter) + var(--rail)); }
}

/* 768 – 1099 px — TABLET
   Fino alla 2.3 questa fascia non esisteva: da 768 a 1024 il sito
   ereditava le regole scritte per il telefono grande. Su un iPad in
   verticale la foto di "Chi siamo" restava larga 460px dentro un
   contenitore da 700–920px, lasciando fino a 462px di bianco a destra.
   Era il caso da manuale del layout desktop rimpicciolito. */
@media (min-width: 768px) and (max-width: 1099px){
  .about{
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(28px, 4vw, 44px);
  }
  .about__media{ max-width: none; }
  /* I numeri passano sotto, a tutta larghezza: in una colonna stretta
     starebbero uno sopra l'altro e sprecherebbero altezza. */
  .about__text .stats{ margin-top: 36px; }

  /* Due foto per riga a tutta larghezza, invece di card da 400px con il
     vuoto a destra. */
  .shot{ flex: 1 1 calc(50% - 11px); max-width: none; }

  /* Tre colonne: lo spazio c'è, e la colonna del marchio a tutta
     larghezza sopra due link sparuti era sbilanciata. */
  .footer__grid{ grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
  .footer__brand{ grid-column: auto; }

  .iscrizione{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 36px; }
}

/* ≤ 767 px — TELEFONO */
@media (max-width: 767px){
  .about{ grid-template-columns: 1fr; }
  .about__media{ max-width: 460px; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .footer__brand{ grid-column: 1 / -1; }

  .iscrizione{ grid-template-columns: 1fr; }
  .gruppo{ grid-template-columns: 1fr auto; gap: 4px 16px; }
  .gruppo__testo{ grid-column: 1 / -1; }

  .shot{ flex-basis: 100%; max-width: 480px; }
  /* A colonna singola lo sfalsamento editoriale diventa solo uno
     spazio irregolare fra una card e l'altra. */
  .shot:nth-child(even){ margin-top: 0; }

  /* Le testimonianze usano lo stesso gesto degli appuntamenti: impilate
     erano 669px per tre frasi. */
  .voci__lista{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 12px;
    scrollbar-width: none;
  }
  .voci__lista::-webkit-scrollbar{ display: none; }
  .voce-runner{ flex: 0 0 82%; scroll-snap-align: start; }

  /* --- Appuntamenti: da pila a carosello ---
     Otto schede impilate misuravano circa 2.400px di altezza per dire
     otto volte la stessa cosa: quasi un quarto dell'intera pagina speso
     in ripetizione, e nessuno arrivava in fondo. In orizzontale la
     sezione scende sotto i 600px e scegliere la data diventa un gesto
     invece che una lettura.

     Niente tabindex sul contenitore: le schede contengono link, quindi
     chi naviga da tastiera ci passa dentro con Tab e il carosello
     scorre da solo per seguire il fuoco. */
  .events{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    overscroll-behavior-x: contain;
    gap: 12px;
    /* Sfonda i margini per far intravedere la scheda successiva sul
       bordo dello schermo: è il segnale che c'è dell'altro. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 14px;
    scrollbar-width: none;
  }
  .events::-webkit-scrollbar{ display: none; }
  .event{
    flex: 0 0 86%;
    scroll-snap-align: start;
    margin: 0;
  }
  .events__scorri{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--font-data);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .section--ink .events__scorri{ color: var(--paper-soft); }
}

/* ≤ 860 px — menu mobile */
@media (max-width: 860px){
  .burger{ display: block; }

  .nav__links{
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    /* NON justify-content:center. Con overflow-y:auto il sovrappiù
       superiore finisce fuori dall'area scrollabile e la prima voce
       diventa irraggiungibile (succedeva in orizzontale). I margini
       auto centrano quando c'è spazio e cedono quando non ce n'è. */
    justify-content: flex-start;
    gap: 6px;
    padding: 96px var(--gutter) 48px;
    background: var(--primary);
    color: #fff;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .6s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;   /* lo scroll non "sfonda" sulla pagina sotto */
  }
  .nav__links > *:first-child{ margin-top: auto; }
  .nav__links > *:last-child { margin-bottom: auto; }
  .nav__links.is-open{ clip-path: inset(0 0 0 0); }
  .nav__links a{
    font-family: var(--font-display);
    font-variation-settings: "wdth" 110, "wght" 800;
    font-size: clamp(2rem, 9vw, 3.2rem);
    letter-spacing: -.02em;
    padding-block: 8px;
  }
  .nav__links a:not(.btn)::after{ display: none; }
  .nav__cta{
    margin-top: 26px;
    font-family: var(--font-data) !important;
    font-size: .78rem !important;
    font-variation-settings: normal;
    letter-spacing: .12em !important;
    padding: 16px 30px;
  }
  .burger{ z-index: 2; }

  /* Il pannello del menu ha sempre lo sfondo var(--primary) (#0C0C0D).
     Passata la soglia di scorrimento la barra prende .nav--solid, che
     imposta color: var(--text) — anch'esso #0C0C0D. L'hamburger disegna
     le sue due stanghette con currentColor, quindi la X finiva nera su
     nero: invisibile esattamente quando serve chiudere. Sopra il
     pannello il colore torna bianco, a prescindere dallo scorrimento. */
  .burger[aria-expanded="true"]{ color: #fff; }

  /* Stesso motivo per il marchio: i 96px di padding in cima al pannello
     esistono per lasciare respirare la barra, ma il logo restava sotto
     il pannello perché non era posizionato. Sopra, e nella versione
     chiara: sul fondo scuro quella magenta si legge male. */
  .brand{ position: relative; z-index: 2; }
  body.is-locked .brand__img--on-dark { display: block; }
  body.is-locked .brand__img--on-light{ display: none; }

  .hero__scroll{ display: none; }

  /* Link del footer: da 24px di bersaglio a 40px */
  .footer__nav{ gap: 2px; }
  .footer__nav a{ padding-block: 8px; }
}

/* Schermi bassi (telefono in orizzontale, 320px di altezza in su):
   il menu smette di essere un manifesto e diventa una lista. */
@media (max-width: 860px) and (max-height: 520px){
  .nav__links{ padding-top: 76px; padding-bottom: 28px; }
  .nav__links a{ font-size: 1.4rem; padding-block: 6px; }
  .nav__cta{ margin-top: 14px; }
}

/* ≤ 560 px */
@media (max-width: 639px){
  .stats{ grid-template-columns: 1fr; gap: 18px; }
  .stat{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .stat dt{ margin: 0; }
  .footer__grid{ grid-template-columns: 1fr; }
  .hero__actions > span{ flex-direction: column; align-items: stretch; }
  .btn{ justify-content: center; }
}

/* ≤ 380 px — iPhone SE / 320 px */
@media (max-width: 380px){
  :root{ --gutter: 18px; }
  .gallery{ gap: 8px; }
  .event{ padding: 20px; }
  .sec-title{ line-height: .92; }   /* a corpo piccolo le maiuscole si sfioravano */
}

/* Dispositivi senza puntatore: la freccia "↗" è l'unico segnale che
   la card porta da qualche parte. Se compare solo al passaggio del
   mouse, su telefono e tablet non esiste. */
@media (hover: none){
  .shot__go,
  .social-card__go{ opacity: 1; transform: none; }
  .shot__btn::after{ opacity: .3; }
}


/* ═══ 15 · MOVIMENTO RIDOTTO E STAMPA ═════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal{ opacity: 1; transform: none; }
  .reveal-line > span{ opacity: 1; transform: none; }
  .hero__actions{ opacity: 1; transform: none; }
  .ticker__row{ animation: none; }
}

@media print{
  .nav, .route, .to-top, .hero__scroll, .ticker{ display: none !important; }
  body{ padding: 0; color: #000; background: #fff; }
  .section--ink, .hero{ background: #fff !important; color: #000 !important; }
}