/* Masterismi — design system
   Colori e font ricavati dal sito originale (masterismi.com, Cargo Collective).
   Font: Space Grotesk (Google Fonts). Palette: rosa/salmone + accento blu su bianco. */

:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-hero: rgba(12, 2, 0, 0.25);
  --color-heading: rgba(223, 136, 136, 0.85);   /* rosa titoli di sezione */
  --color-body: rgb(250, 145, 145);             /* salmone testo/corpo */
  --color-body-soft: rgba(227, 117, 117, 0.83);
  --color-muted: rgba(0, 0, 0, 0.35);
  --color-muted-strong: rgba(0, 0, 0, 0.55);
  --color-accent: rgb(105, 143, 255);           /* blu link/logo */
  --color-badge-bg: #0000ff;
  --color-border: rgba(105, 143, 255, 0.5);

  --font-display: "Space Grotesk", -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
  --font-ui: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  --header-font-size: 15px;
  --footer-font-size: 14px;
  --line-height-base: 1.45;

  /* Durata condivisa da ogni animazione di apertura/chiusura del sito
     (accordion +/×, pannello ancore "Indice", sipario del menu) — un
     solo numero da cambiare per rallentare o velocizzare tutto. */
  --open-transition-duration: 0.4s;

  --max-width: 46rem;
  --side-padding: clamp(1.25rem, 5vw, 4rem);

  /* Spazio sopra e sotto ogni asterismo (⁂), sempre uguale a
     prescindere dal contesto — vedi .asterism più sotto. */
  --asterism-spacing: 2.3rem;

  /* Spazio sopra/sotto ogni voce di menu — condiviso tra il menu
     "Indice" dell'header (.page-anchors a) e il menu del footer
     (.footer-group, .accordion__panel .sub), per restare uniformi. */
  --footer-row-gap: 0.3rem;

  /* Altezza di .site-header (logo+breadcrumb): un valore esplicito
     invece di lasciarla dettata dal contenuto, così .page e
     .header-menu possono allinearcisi esattamente sotto — a riposo
     (padding-top di .page) e da stuck (top di .header-menu) — senza
     doverla misurare via JS. */
  --site-header-height: 3.3125rem;

  /* Offset da lasciare sopra un titolo raggiunto via ancora (#id),
     così non finisce nascosto sotto header+menu sticky. Misura
     l'altezza di header + menu "Indice" chiuso (~134px = 8.375rem,
     misurato via getBoundingClientRect), più un po' di margine.
     Presuppone che il menu sia chiuso all'arrivo — vedi il click sui
     link di .page-anchors in main.js, che lo chiude apposta prima di
     lasciar navigare il browser all'ancora. */
  --sticky-offset: 9.5rem;
}

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

/* Toglie il riquadro grigio/blu di default che i browser mobile
   disegnano al tap: essendo legato al bounding box di ogni elemento
   inline, su bottoni/link composti da più span (icona + testo, es.
   button.menu-toggle) appariva frammentato, un pezzo per figlio
   invece di un unico riquadro coerente. Lo stato "active" va poi
   ridefinito a mano, di proposito, solo dove serve e sull'elemento
   cliccabile intero (vedi es. button.menu-toggle:active più sotto),
   mai sui suoi figli. */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

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

/* ---------- Layout shell ---------- */

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  /* Non serve più calcolare in JS l'altezza di un header fisso: il
     menu (.header-menu) è ora il primo elemento dentro .page, nel
     flusso normale — spinge giù il resto da sé, qualunque sia il
     numero di ancore. Logo e menu sono entrambi a bandiera sx, quindi
     impilati verticalmente (non affiancati): questo padding lascia
     spazio al logo, fisso sopra (--site-header-height), così il menu
     comincia esattamente sotto di lui invece di sovrapporglisi. */
  padding-top: var(--site-header-height);
  padding-right: var(--side-padding);
  padding-bottom: 4rem;
  padding-left: var(--side-padding);
}

/* Sotto i 544px (stesso breakpoint già usato più sotto per word-grid/
   service-grid/footer a colonna singola): padding sx/dx fisso a 10px
   invece del clamp() fluido — copre anche tutto ciò che sta dentro
   .page, footer compreso (non ha un suo padding proprio). Il logo/
   header non usa --side-padding: la sua versione mobile è impostata
   a parte, subito dopo la regola base di .site-header. */
@media (max-width: 34rem) {
  :root { --side-padding: 10px; }
}

/* ---------- Header ----------
   Logo e breadcrumb in un'unica riga flex — il breadcrumb si mette da
   solo subito dopo il logo, senza dover calcolare a mano quanto sia
   largo "M***" per posizionarlo di conseguenza. Lo sfondo è qui, sulla
   barra intera, non sui singoli elementi al suo interno. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: var(--site-header-height);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
}

/* Sotto i 544px (stesso breakpoint già usato più sotto per word-grid/
   service-grid/footer a colonna singola): padding sx/dx fisso a 10px.
   Deve stare DOPO la regola base qui sopra (stessa specificità: senza
   media query attiva vince comunque l'ultima dichiarata nel file —
   se questo blocco fosse prima, la regola base lo sovrascriverebbe
   appena la media query è vera, altro bug di specificità/ordine come
   gli altri di questa sessione). Il resto della colonna (.page, e con
   essa il footer, che non ha un suo padding proprio) usa già
   --side-padding, sovrascritta subito sotto .page. */
@media (max-width: 34rem) {
  .site-header { padding-left: 10px; padding-right: 10px; }
}

/* Coda sfumata attaccata sotto l'header, non dentro di lui: pieno per
   tutta la sua altezza (altrimenti l'ultimo tratto di contenuto reale
   — es. le voci del menu, più sotto — sbiadirebbe insieme allo
   sfondo). La sfumatura comincia solo alla FINE del blocco e sporge
   oltre, dentro l'inizio di .header-menu sotto (niente più taglio
   netto/1px di scarto fra i due: qui c'è deliberata sovrapposizione,
   non un bordo a bordo). */
.site-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 15px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  mask-image: linear-gradient(to bottom, black, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
}

.logo {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--header-font-size);
  color: var(--color-accent);
}

/* ---------- Breadcrumb ----------
   Quando il titolo della pagina (h1/h2) scompare scrollando verso
   l'alto, il suo testo compare qui accanto a M***, con un asterisco
   come separatore — un po' come un breadcrumb "dove sono arrivato".
   Nascosto di default (opacity/translateY), animato in ingresso da
   main.js aggiungendo/togliendo .is-visible. Meccanismo automatico,
   disattivabile per pagina con <body data-breadcrumb="off">; un
   singolo titolo può essere escluso con l'attributo
   data-breadcrumb-skip (usato per l'hero "M***" di index, ridondante
   col logo). h3 non fa proprio parte del breadcrumb (deroga voluta),
   niente da nascondere responsive per lui: main.js non lo traccia
   nemmeno. */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--header-font-size);
  color: var(--color-accent);
  opacity: 0;
  transform: translateY(-0.85rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.breadcrumb.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ogni voce (separatore + testo) è avvolta in questo, non appesa
   sciolta: serve per poter nascondere una voce per intero sotto certe
   larghezze (vedi media query sotto) senza lasciare un "*" orfano
   senza testo. */
.breadcrumb__crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.breadcrumb__sep { opacity: 0.6; }

/* Il primo elemento (link "Homepage"/"Accueil"/"首页") è un <a> vero,
   gli altri (h1/h2/h3 della pagina) sono <span> solo testo. */
a.breadcrumb__text:hover, a.breadcrumb__text:focus-visible { opacity: 0.7; }

/* Breadcrumb responsive, 4 fasce (main.js traccia sempre h1/h2/h3,
   qui si decide solo cosa mostrare secondo la larghezza):
   - mobile, fino a 544px (stesso breakpoint mobile del resto del
     sito): solo il titolo di pagina (h1) — via Homepage, h2, h3,
     troppo affollato in poco spazio;
   - tablet, 545–900px: torna "Homepage", ma non h2 né h3;
   - desktop, 901–999px: c'è anche h2, ma non ancora h3;
   - desktop largo, 1000px in su: percorso completo, anche h3. */
@media (max-width: 34rem) {
  .breadcrumb [data-crumb="home"],
  .breadcrumb [data-crumb="h2"],
  .breadcrumb [data-crumb="h3"] { display: none; }
}

@media (min-width: 34.0625rem) and (max-width: 56.25rem) {
  .breadcrumb [data-crumb="h2"],
  .breadcrumb [data-crumb="h3"] { display: none; }
}

@media (min-width: 56.3125rem) and (max-width: 62.4375rem) {
  .breadcrumb [data-crumb="h3"] { display: none; }
}

/* ---------- Header menu ----------
   Non più fixed con la matematica di .page duplicata in calc(): il
   menu vive dentro .page, come suo primo figlio, largo quanto la
   colonna (nessuna width/margin qui: è un blocco normale, eredita la
   larghezza di .page da solo). position: sticky lo tiene visibile
   durante lo scroll, con top che lo tiene appena sotto al logo (fisso
   sopra, in .site-header) invece di sovrapporglisi — sono impilati,
   non affiancati, perché entrambi a bandiera sx. Tutto il CONTENUTO
   (toggle, ancore, lingue) è allineato a bandiera a sx, sia nella sua
   posizione nel box (align-items qui) sia nel testo al proprio
   interno — stessa continuità tipografica del footer. Niente
   align-self/width-calc sui figli per "sfondare" il contenitore: le
   ancore e le lingue sono semplicemente width:100%, il contenitore
   è già largo quanto basta. */
.header-menu {
  position: sticky;
  top: var(--site-header-height);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 0.6rem;
  /* Linea grigia sopra "Indice", sempre (aperto o chiuso) — qui sul
     contenitore, non sul bottone stesso, perché il contenitore è già
     largo quanto la colonna: il bottone da solo (width: fit-content)
     sarebbe largo solo quanto il testo. */
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Sipario bianco dietro al menu — largo quanto il viewport (come
   .site-header, di cui prosegue il bordo basso: sovrapposizione
   deliberata, non bordo a bordo — vedi .site-header::after), non
   quanto la colonna: il testo sopra (toggle, ancore, lingue) resta
   nella colonna, è solo lo sfondo a sfondare a bordo a bordo. Pieno
   per tutta l'altezza del menu (niente sfumatura qui dentro: le voci
   vere, tipo le lingue in fondo, non devono sbiadire insieme allo
   sfondo) — la sfumatura è nella coda a parte, ::after sotto, che
   comincia solo alla FINE del blocco. Un ::before invece di un
   elemento vero perché non deve far parte del layout (non deve
   spingere giù nulla): position:absolute dentro un antenato sticky
   (.header-menu) si comporta come dentro un relative, quindi
   top:0/bottom:0 lo fa combaciare esattamente con l'altezza del menu,
   qualunque essa sia — cresce da sola insieme al pannello ancore
   quando si apre, un vero "sipario che scende". left:50%/margin-left:
   -50vw/width:100vw è il trucco css classico per "sfondare" un
   genitore stretto e coprire tutto il viewport. Sempre presente ma
   invisibile (opacity:0): compare in hover o da aperto (vedi sotto). */
.header-menu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--open-transition-duration) ease;
}

/* Coda sfumata sotto il pannello, stessa idea di .site-header::after:
   comincia alla fine del blocco (top: 100%) e sporge oltre, dentro il
   contenuto della pagina. */
.header-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: 15px;
  z-index: -1;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  mask-image: linear-gradient(to bottom, black, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  opacity: 0;
  transition: opacity var(--open-transition-duration) ease;
}

.header-menu:hover::before,
.header-menu.is-open-overlay::before,
.header-menu:hover::after,
.header-menu.is-open-overlay::after {
  opacity: 1;
}

/* Sempre visibile — la parola "Indice" (±) c'è sia a pagina appena
   caricata sia con le ancore aperte in cima, non solo da scrollato. */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--header-font-size);
  color: var(--color-accent);
  background: none;
  border: none;
  /* Niente padding sx/dx: a filo col resto del menu, come le ancore
     e le lingue sotto. */
  padding: 0.35rem 0 0.15rem;
  cursor: pointer;
  width: fit-content;
}

.menu-toggle .accordion__toggle-icon { color: inherit; }
.menu-toggle[aria-expanded="true"] .accordion__toggle-icon { transform: rotate(45deg); }

.menu-toggle:active { opacity: 0.6; }

/* Le ancore sono sempre un pannello che si apre/chiude in verticale
   (stessa animazione a max-height degli accordion del sito — vedi
   --open-transition-duration), non un box modale: chiuso di
   default (anche a pagina appena caricata, non solo da scrollato),
   si apre con il bottone "Indice" sopra. Nessuno sfondo (solo testo +
   linee), niente bordi stondati né ombra. width: 100% lo fa combaciare
   con i bordi sx/dx di .header-menu, già largo quanto la colonna —
   niente padding sx/dx, per restare a filo con le altre voci del
   menu. Resta nel flusso (non fixed) così lo switch lingua sotto
   viene spinto giù quando il pannello si apre. */
.page-anchors {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0.5rem;
  width: 100%;
  overflow: hidden;
  max-height: 0;
  padding: 0;
  /* Linea grigia sotto l'intera lista, sempre — come i divisori del
     footer — ma nessuna linea dopo le lingue (vedi .lang-switch più
     sotto, che non ne ha). La linea sopra non serve qui: la prima
     voce se la porta già da sé (vedi .page-anchors a, sotto — tutte
     le voci hanno una linea sopra, non solo tra una e l'altra). */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: max-height var(--open-transition-duration) ease,
              padding var(--open-transition-duration) ease;
}

.header-menu.is-open-overlay .page-anchors {
  max-height: var(--accordion-max-height, 60rem);
  padding: 0.8rem 0;
}

/* Apertura iniziale istantanea, impostata da JS (vedi main.js): a
   pagina appena caricata le ancore devono trovarsi già aperte, senza
   un'animazione non richiesta da chi visita. */
.header-menu.no-transition .page-anchors { transition: none; }

.page-anchors a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--header-font-size);
  color: var(--color-accent);
  text-align: left;
  max-width: min(22rem, calc(100vw - 2rem));
  padding-top: var(--footer-row-gap);
  padding-bottom: var(--footer-row-gap);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.page-anchors a:hover, .page-anchors a:focus-visible { opacity: 0.7; }

.lang-switch {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  /* Niente padding sx/dx: .header-menu è a bandiera sx e largo quanto
     la colonna, quindi le lingue partono già allineate da sole allo
     stesso bordo sx delle ancore sopra, senza bisogno di ricalcolare
     larghezza/ancoraggio qui. */
  padding: 0.2rem 0;
}

.lang-switch a, .lang-switch span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--header-font-size);
  color: var(--color-accent);
}

.lang-switch span { opacity: 0.45; }

.lang-switch a:hover, .lang-switch a:focus-visible { opacity: 0.7; }

/* ---------- Typography ---------- */

.eyebrow {
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  color: var(--color-muted);
  margin: 0 0 2.5rem;
}

.hero {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(4rem, 16vw, 9.5rem);
  line-height: 0.95;
  color: var(--color-hero);
  margin: 0 0 2rem;
}

h1.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 3.3rem);
  color: var(--color-accent);
  margin: 0 0 0.75rem;
}

h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.5vw, 3.15rem);
  color: var(--color-heading);
  margin: 2.8rem 0 1rem;
  scroll-margin-top: var(--sticky-offset);
}

.asterism {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--color-hero);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin: 0;
  padding: var(--asterism-spacing) 0;
  text-align: center;
}

/* Spazio sopra e sotto l'asterismo sempre uguale (--asterism-spacing,
   dal padding qui sopra): azzeriamo margin E padding di chi lo
   precede/segue (non solo i margin: certi elementi, es. ul.word-grid,
   hanno anche padding-bottom/top propri) così nessun collapsing né
   somma di spazi lo altera in base al contesto. !important perché,
   a parità di specificità (una sola classe/pseudo-classe da entrambe
   le parti), altrimenti vincerebbe la regola del singolo componente
   se definita più sotto nel foglio di stile (es. .word-grid, .course):
   qui l'intento è che questa vinca sempre, a prescindere dall'ordine. */
*:has(+ .asterism) { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.asterism + * { margin-top: 0 !important; padding-top: 0 !important; }

h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  color: var(--color-heading);
  margin: 2.4rem 0 0.75rem;
  scroll-margin-top: var(--sticky-offset);
}

p, li {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  line-height: var(--line-height-base);
  color: var(--color-body);
  margin: 0 0 1rem;
}

.lede {
  color: var(--color-muted-strong);
  font-family: var(--font-ui);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.5;
}

b, strong { font-weight: 700; }

ul { padding-left: 1.2em; margin: 0 0 1.5rem; }

.arrow-list { list-style: none; padding-left: 0; }

.keyword-list li {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--color-muted-strong);
  line-height: 1.5;
  margin-bottom: 0.4rem;
}

.small-print {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-muted);
}

.epigraph {
  margin: 1.6rem 0 0.5rem;
  padding: 0;
  border: none;
  max-width: 34rem;
}

.epigraph p {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--color-hero);
  font-size: clamp(1.3rem, 3.6vw, 2rem);
  line-height: 1.35;
  margin: 0;
}

.epigraph p + p { margin-top: 1rem; }

.epigraph cite {
  display: block;
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--color-hero);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  margin-top: 0.9rem;
}

/* ---------- Links & buttons ---------- */

.text-link {
  color: var(--color-accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.text-link:hover,
.text-link:focus-visible { border-color: currentColor; }
.text-link:active { opacity: 0.6; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 36px;
  padding: 0.7rem 1.4rem;
  margin: 0 0.6rem 1.2rem 0;
}

.pill:hover, .pill:focus-visible { background: rgba(105, 143, 255, 0.08); }
.pill:active { opacity: 0.6; }

.badge {
  position: absolute;
  top: -0.7rem;
  right: 0.7rem;
  background: var(--color-badge-bg);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  padding: 0.18rem 0.45rem;
  border-radius: 9px;
  white-space: nowrap;
}

.buttons-row { margin: 1.5rem 0; }

/* ---------- Link buttons (stile linktree) ---------- */

.linktree {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  max-width: 37.5rem; /* 600px, larghezza della main column */
  margin: 1.5rem 0 3rem;
}

.link-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  font-weight: 500;
  color: var(--color-accent);
  background: #fff;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: 1rem 1.6rem;
  transition: transform 0.15s ease, background 0.15s ease;
}

.link-btn:hover, .link-btn:focus-visible {
  background: rgba(105, 143, 255, 0.08);
  transform: translateY(-2px);
}

.link-btn:active { opacity: 0.6; }

.link-btn .arrow { font-size: 1.15em; line-height: 1; flex-shrink: 0; }

.link-btn__text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}

.link-btn__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  line-height: 1.2;
}

.link-btn__chip {
  display: inline-block;
  position: relative;
  top: -2px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(105, 143, 255, 0.12);
  color: var(--color-accent);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.link-btn__subtitle {
  display: block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-accent);
}

@media (max-width: 34rem) {
  /* Il sottotitolo esce dal pulsantone e si legge sotto, fuori da
     bordo/sfondo della pillola — solo su mobile. Prima versione:
     sottotitolo in position:absolute (fuori dal flusso) + margin-
     bottom fisso su .link-btn per riservargli lo spazio sotto — bug
     segnalato dall'utente, lo spazio dopo il sottotitolo era sempre
     uguale a prescindere che il sottotitolo occupasse 1 o 2 righe
     (tarato sul caso peggiore a 2 righe, quindi troppo largo con 1
     riga sola). Ora il sottotitolo resta nel flusso normale (niente
     position:absolute): a fargli spazio senza farlo racchiudere
     dentro la pillola è la pillola stessa, ridotta via ::before a
     un'altezza pari alla sola riga titolo+freccia (via CSS grid) —
     .link-btn diventa un contenitore invisibile a 2 righe (riga 1:
     titolo+freccia dentro la pillola disegnata da ::before; riga 2:
     sottotitolo, fuori dalla pillola, in flusso normale). Così
     l'altezza reale di .link-btn segue il sottotitolo (1 o 2 righe
     che sia) e lo spazio dopo, prima del prossimo pulsante, torna a
     essere dettato da un solo posto: il `gap` di .linktree. */
  .link-btn {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
  }

  .link-btn::before {
    content: "";
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: stretch;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    background: #fff;
    transition: background 0.15s ease;
  }

  .link-btn:hover::before, .link-btn:focus-visible::before {
    background: rgba(105, 143, 255, 0.08);
  }

  .link-btn__text { display: contents; }

  /* Il padding orizzontale della pillola non è più sul contenitore
     (che ora è a tutta larghezza, invisibile) ma su titolo/freccia:
     1.6rem sul lato esterno di ciascuno (come prima), 1rem tra i due
     al posto del vecchio gap di flex. */
  .link-btn__title {
    grid-row: 1;
    grid-column: 1;
    padding: 1rem 0 1rem 1.6rem;
  }

  .link-btn .arrow {
    grid-row: 1;
    grid-column: 2;
    padding: 0 1.6rem 0 1rem;
  }

  .link-btn__subtitle {
    grid-row: 2;
    grid-column: 1 / -1;
    padding: 0 1.6rem;
    margin: 0;
  }
}

/* ---------- Griglia di competenze ---------- */

.word-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem 1.2rem;
  margin: 3.5rem 0 3rem;
  padding: 0;
  list-style: none;
}

@media (max-width: 34rem) {
  .word-grid { grid-template-columns: repeat(2, 1fr); }
}

.service-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 2.2rem 1.5rem;
}

@media (max-width: 34rem) {
  .service-grid { grid-template-columns: 1fr; }
}

.word-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.word-card svg {
  width: 1.9rem;
  height: 1.9rem;
  color: var(--color-accent);
  flex-shrink: 0;
}

.word-card span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--color-body-soft);
}

/* ---------- Contatto ---------- */

.contact-hipster {
  position: relative;
  margin: 1.5rem 0 3rem;
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  max-width: 37.5rem; /* 600px, larghezza della main column */
}

.contact-form label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted-strong);
  margin-bottom: 0.4rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  padding: 1rem 1.6rem;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
}

.contact-form textarea {
  border-radius: 1.75rem; /* stesso motivo del pulsante Formazione: un raggio pieno su un box alto taglia il testo */
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  background: rgba(105, 143, 255, 0.06);
}

.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn-hipster {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: #fff;
  background: var(--color-accent);
  border: none;
  border-radius: 999px;
  padding: 0.9rem 1.9rem;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn-hipster:hover, .btn-hipster:focus-visible {
  transform: translateY(-2px);
}

.btn-hipster:active { opacity: 0.6; }

.btn-hipster:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

@media (max-width: 34rem) {
  .btn-hipster { padding-left: 2.5rem; padding-right: 2.5rem; }
}

.contact-note {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 1rem;
}

.contact-note[data-state="ok"] { color: #1a8f4c; }
.contact-note[data-state="error"] { color: #c23b3b; }

/* ---------- Course entries (Formazione) ---------- */

.course {
  padding-top: 0.5rem;
  scroll-margin-top: var(--sticky-offset);
}

.course h2 { margin-top: 0; }

.meta {
  font-family: var(--font-ui);
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

/* "Risultati" va letto come la prima cella della tabella sotto, non
   come un elemento a parte: stesso bordo dei th/td (1px, stesso
   grigio) su tutti e 4 i lati, larga quanto la tabella. Da CHIUSO
   serve un margine sotto (0.5rem, come tutti gli altri elementi della
   pagina) perché non c'è nessuna tabella aperta lì a dare respiro
   verso l'elemento successivo. Da APERTO invece deve restare a filo
   con la tabella (margin-bottom: 0 — niente più trucco di
   sovrapposizione a -1px: raddoppiava comunque il bordo, visibile
   come una riga doppia, perché il bordo superiore della tabella
   restava lì sotto; il bordo superiore della tabella si toglie del
   tutto, vedi .results-table thead th sotto — resta solo quello di
   "Risultati" a chiudere la forma), quindi lo zero è condizionato
   su [aria-expanded="true"], impostato da main.js. Selettore a due
   classi (non solo .results-toggle) per vincere di sicuro contro
   .accordion__toggle qui sotto, a parità di specificità altrimenti
   deciderebbe l'ordine nel file. */
.accordion__toggle.results-toggle {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-muted-strong);
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
}

.accordion__toggle.results-toggle[aria-expanded="true"] { margin-bottom: 0; }

.results-table {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0.5rem;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 14px;
}

.results-table th,
.results-table td {
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
  color: var(--color-muted-strong);
}

.results-table th { font-weight: 600; }

/* Niente bordo superiore sulla prima riga: lo chiude già "Risultati"
   sopra (stesso bordo, stesso colore) — senza questo si vedevano due
   righe grigie sovrapposte invece di una sola. */
.results-table thead th { border-top: none; }

/* ---------- Small pill (inline CTAs) ---------- */

.pill-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
}

.pill-sm:hover, .pill-sm:focus-visible { background: rgba(105, 143, 255, 0.08); }
.pill-sm:active { opacity: 0.6; }

/* ---------- Syllabus request checklist ---------- */

.syllabus-checklist {
  margin: 0 0 1.2rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-muted-strong);
}

.syllabus-checklist label {
  display: block;
  padding-left: 1.6rem;
  text-indent: -1.6rem;
  margin-bottom: 0.5rem;
}

.syllabus-checklist input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* ---------- Footer ---------- */

footer.site-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 2rem;
  margin-top: 4rem;
}

footer.site-footer .block {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 1.2rem;
  font-family: var(--font-ui);
  font-size: var(--footer-font-size);
  line-height: 1.7;
  color: var(--color-muted);
}

footer.site-footer .block strong { color: var(--color-muted-strong); }

footer.site-footer .block a { display: block; color: var(--color-muted-strong); }
footer.site-footer .block a:hover { color: var(--color-accent); }

footer.site-footer .block a.sub {
  margin-left: 1rem;
  color: var(--color-muted);
}

footer.site-footer .block a.footer-external::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.3em;
}

/* ---------- Accordion (disclosure) — used by the footer menu and by
   course results. One component, one animation: a "+" that rotates
   45° into a "×" on open, and a panel that grows via max-height. ---------- */

.accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.accordion__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--color-muted-strong);
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  cursor: pointer;
}

.accordion__toggle:hover { color: var(--color-accent); }
.accordion__toggle:active { opacity: 0.6; }

.accordion__toggle-icon {
  display: inline-block;
  transition: transform var(--open-transition-duration) ease;
}

.accordion__toggle[aria-expanded="true"] .accordion__toggle-icon { transform: rotate(45deg); }

.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--open-transition-duration) ease;
}

.accordion__panel.is-open { max-height: var(--accordion-max-height, 60rem); }

/* ---------- Footer menu: row dividers & spacing ----------
   Uniformato con il menu "Indice" dell'header (.page-anchors a):
   stessa dimensione testo (--header-font-size, non il più piccolo
   --footer-font-size del resto del footer) e stessa spaziatura
   (--footer-row-gap, condivisa con .page-anchors a — vedi :root) — una
   sola riga sopra OGNI voce (non solo tra una voce e l'altra via "+":
   così anche la prima voce di ogni gruppo, e il primo gruppo stesso,
   hanno la loro linea, invece di restarne senza), niente margin-top
   aggiuntivo (in .page-anchors non c'è: la riga sta a filo del bordo
   superiore). font-size qui, non su .footer-menu: quella regola
   perderebbe comunque contro "footer.site-footer .block" più sopra,
   a parità di specificità vince l'ultima dichiarata nel CSS, e qui
   serve un selettore più specifico per essere sicuri di vincere. */
.footer-menu { --footer-divider: rgba(0, 0, 0, 0.05); }

footer.site-footer .footer-menu { font-size: var(--header-font-size); }

.footer-group {
  padding-top: var(--footer-row-gap);
  padding-bottom: var(--footer-row-gap);
  border-top: 1px solid var(--footer-divider);
}

.accordion__panel .sub {
  padding-top: var(--footer-row-gap);
  padding-bottom: var(--footer-row-gap);
  border-top: 1px solid var(--footer-divider);
}

@media (max-width: 30rem) {
  footer.site-footer { grid-template-columns: 1fr; }
}

/* ---------- Post-it traduttori ----------
   Il pannello di accesso (login/logout) è nostro; note, segnaposto e schede
   li disegna il motore postit-js (/postit-asset.php?f=annotate.css), che qui
   riceve solo i colori del sito. */

/* html:root (non :root) perché il foglio del motore, caricato dopo il nostro,
   dichiara gli stessi nomi su :root e altrimenti vincerebbe lui. */
html:root {
  --annotate-accent: var(--color-accent);
  --annotate-font: var(--font-ui);
  --bg: var(--color-bg);
  --fg: var(--color-text);
}

/* Il nostro `p` globale (salmone, grande) non deve entrare nelle schede del
   motore. :where() tiene la specificità a zero, così le regole del motore
   (margini, interlinea) restano più forti di questo azzeramento. */
:where(#annotate-widget, .annotate-card, .annotate-composer) p {
  font: inherit;
  color: inherit;
  margin: 0;
}

.postit-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 4.9rem;
  z-index: 310;
  width: min(20rem, 88vw);
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  color: var(--color-text);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 1rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.postit-panel[hidden] { display: none; }

.postit-panel h4 {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-accent);
}

.postit-panel label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted-strong);
  margin-bottom: 0.25rem;
}

.postit-panel input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
  margin-bottom: 0.7rem;
  background: #fff;
  color: var(--color-text);
}

.postit-meta { opacity: 0.65; font-size: 0.78rem; margin: 0 0 0.7rem; }
.postit-meta a { color: var(--color-accent); }

.postit-error {
  color: #c23b3b;
  font-size: 0.78rem;
  margin: 0 0 0.7rem;
}

.postit-panel__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.postit-btn {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
}

.postit-btn--solid { background: var(--color-accent); color: #fff; border-color: transparent; }

/* ---------- Immagini dal magazine (Fandonie) ---------- */

.essay-figure {
  margin: 2.2rem 0;
}

.essay-figure img {
  width: 100%;
  display: block;
  border-radius: 0.9rem;
}

.essay-figure figcaption {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 0.6rem;
}

.essay-figure--quote img {
  border-radius: 0;
}

/* ---------- Banner cookie (CookieConsent): tema del sito ----------
   La libreria (vendor/cookieconsent/) espone la sua interfaccia tramite
   variabili CSS su :root; le ridefiniamo qui su #cc-main, che essendo un
   selettore per ID vince sempre sul :root della libreria a prescindere
   dall'ordine di caricamento dei fogli di stile. */

#cc-main {
  --cc-font-family: var(--font-ui);
  --cc-bg: var(--color-bg);
  --cc-primary-color: var(--color-text);
  --cc-secondary-color: var(--color-muted-strong);
  --cc-modal-border-radius: 0.75rem;
  --cc-modal-transition-duration: var(--open-transition-duration);
  --cc-separator-border-color: rgba(0, 0, 0, 0.08);

  --cc-btn-border-radius: 999px;

  --cc-btn-primary-bg: var(--color-accent);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--color-accent);
  --cc-btn-primary-hover-bg: var(--color-accent);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: var(--color-accent);

  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--color-accent);
  --cc-btn-secondary-border-color: var(--color-accent);
  --cc-btn-secondary-hover-bg: rgba(105, 143, 255, 0.08);
  --cc-btn-secondary-hover-color: var(--color-accent);
  --cc-btn-secondary-hover-border-color: var(--color-accent);

  --cc-toggle-on-bg: var(--color-accent);
  --cc-toggle-off-bg: rgba(0, 0, 0, 0.25);
  --cc-toggle-readonly-bg: rgba(105, 143, 255, 0.35);

  --cc-cookie-category-block-bg: rgba(0, 0, 0, 0.03);
  --cc-cookie-category-block-border: rgba(0, 0, 0, 0.08);
  --cc-cookie-category-block-hover-bg: rgba(0, 0, 0, 0.05);
  --cc-cookie-category-block-hover-border: rgba(0, 0, 0, 0.08);
  --cc-cookie-category-expanded-block-hover-bg: rgba(0, 0, 0, 0.05);
}

/* Traccia del salmone del sito: bordo sottile sulla card (stesso
   spessore 1px degli altri elementi a pillola del sito, es. .link-btn)
   e titolo nel rosa usato per i titoli di sezione altrove (--color-heading). */
#cc-main .cm,
#cc-main .pm {
  border: 1px solid var(--color-body);
  box-shadow: 0 0.625em 1.875em rgba(0, 0, 0, 0.18);
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-family: var(--font-display);
  color: var(--color-heading);
}

/* Il banner non ha più testo descrittivo (spostato nel pannello
   "Dettagli"): lo spazio fra titolo e pulsanti va dato a mano. */
#cc-main .cm__title {
  margin-bottom: 0.75rem;
}

#cc-main .pm__section-title {
  font-family: var(--font-display);
}

/* Pulsanti: stesso trattamento dei bottoni dei form (.btn-hipster),
   non dei "pulsantoni" linktree di home/formazione/pro-cultura. */
#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: var(--font-display);
  padding: 0.9rem 1.6rem;
  transition: transform 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, color 0.15s ease;
}

#cc-main .cm__btn:hover,
#cc-main .pm__btn:hover {
  transform: translateY(-2px);
}

/* Nel pannello "Dettagli" l'azione che conta è "Salva preferenze"
   (l'utente sta scegliendo le categorie): la libreria le assegna però
   di default la classe secondaria/attenuata, lasciando "Accetta tutti"/
   "Solo necessari" in primo piano. Invertiamo qui lo stile solo in
   questo footer, senza toccare la gerarchia del banner iniziale (dove
   va bene così: consenso/rifiuto alla pari, "Dettagli" attenuato). */
#cc-main .pm__footer .pm__btn {
  background: var(--cc-btn-secondary-bg);
  color: var(--cc-btn-secondary-color);
  border-color: var(--cc-btn-secondary-border-color);
}

#cc-main .pm__footer .pm__btn:hover {
  background: var(--cc-btn-secondary-hover-bg);
  color: var(--cc-btn-secondary-hover-color);
  border-color: var(--cc-btn-secondary-hover-border-color);
}

#cc-main .pm__footer .pm__btn--secondary {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-color);
  border-color: var(--cc-btn-primary-border-color);
}

#cc-main .pm__footer .pm__btn--secondary:hover {
  background: var(--cc-btn-primary-hover-bg);
  color: var(--cc-btn-primary-hover-color);
  border-color: var(--cc-btn-primary-hover-border-color);
}