/* ===== Caratteri del brand — PP Fragment, serviti dal sito =====
   Glare: marchio, titoli e display. Text: corpo del testo. */
@font-face {
  font-family: "PP Fragment Glare";
  src: url("../fonts/PPFragment-GlareLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Fragment Glare";
  src: url("../fonts/PPFragment-GlareRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Fragment Glare";
  src: url("../fonts/PPFragment-GlareExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Fragment Text";
  src: url("../fonts/PPFragment-TextRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== Lettera Blu — design system dal Figma "Versione Mobile - Sito" =====

   I colori sono token semantici, non nomi di colore: cambiando i valori
   qui sotto cambia l'intero sito, senza toccare una sola regola.

   --brand        superfici piene (header, bande, menu, footer)
   --brand-deep   variante scura del brand (banda contatti)
   --brand-light  variante chiara del brand (banda gallery)
   --brand-soft   variante intermedia (footer)
   --on-brand     testo e bordi sopra le superfici brand
   --accent       titoli, bordi e link su fondo chiaro
   --ink          corpo del testo su fondo chiaro
   --paper        sfondo delle sezioni chiare
   --surface      superfici piene chiare (card, skip link)
*/

/* Impostazione predefinita: la versione WEB del Figma — pagina bianca, testo
   nero, header lavanda chiarissima e bande nere piene. Il sistema di token
   regge l'inversione, perché `--on-brand` significa «testo sopra la superficie
   brand», non «bianco». */
:root {
  --brand: #E2EAFF;
  /* header */
  --brand-deep: #010203;
  /* bande piene */
  --brand-light: #E2EAFF;
  --brand-soft: #E2EAFF;
  /* footer */
  --on-brand: #010203;
  /* testo sopra l'header */
  --accent: #010203;
  --ink: #010203;
  --paper: #FFFFFF;
  --surface: #FFFFFF;
}

:root {
  /* Il marchio è un'immagine, non testo: qui restano solo i due caratteri. */
  --font-display: "PP Fragment Glare", Georgia, serif;
  --font-body: "PP Fragment Text", Georgia, serif;

  --radius-pill: 0;
  /* Margini laterali stretti: il contenuto arriva vicino ai bordi, come nella
     referenza Studio Museum in Harlem. */
  /* Margine laterale del contenuto: fisso, per scelta. Nel prototipo il testo
     parte al 6,25% della larghezza (a 1440px sarebbero 90px), ma qui il
     contenuto resta vicino al bordo. */
  --gutter: 25px;
  /* Ritmo verticale: è la distanza che separa i blocchi. Usata sia dal padding
     delle sezioni sia dal margine dei caroselli, così l'aria sopra e sotto le
     immagini è lo stesso valore e non due numeri che si somigliano. */
  --ritmo: clamp(2.5rem, 6vw, 4.5rem);
  --maxw: 1720px;
  /* Misura unica di tutte le pagine: è quella della home, così il contenuto
     parte dallo stesso punto ovunque. Cambiandola qui si sposta il margine
     dell'intero sito. */
  --misura: min(100rem, var(--maxw));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--surface);
  color: var(--accent);
  padding: .6rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

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

/* ===== Testi differenziati mobile / desktop =====
   Il documento del cliente prevede testi brevi in homepage: su mobile resta
   la versione sintetica, da tablet in su compare quella estesa. Solo una
   delle due è nel DOM visibile, quindi i lettori di schermo ne leggono una. */
.solo-desktop {
  display: none;
}

@media (min-width: 800px) {
  .solo-mobile {
    display: none;
  }

  .solo-desktop {
    display: revert;
  }
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem var(--gutter);
}

/* Il pannello del menu è figlio dell'header: marchio e burger devono restare
   sopra di esso, altrimenti da aperto sparisce anche il tasto per chiudere. */
.site-header>.wordmark,
.site-header>.menu-btn {
  position: relative;
  z-index: 41;
}

/* ===== Marchio ufficiale =====
   I due lockup vettoriali del cliente, applicati come maschera: il colore
   arriva da `currentColor`, così il marchio si adatta a qualsiasi fondo.
   Essendo SVG restano nitidi a ogni dimensione.
   Il nome resta come testo per lettori di schermo e motori di ricerca.

   .wordmark--nav  versione con «blu» allineato a sinistra, per la barra
   .wordmark       versione centrata, usata in tutto il resto del sito */
.wordmark {
  display: inline-block;
  text-decoration: none;
  color: var(--on-brand);
  --logo-h: 3rem;
  --logo-aspect: 2.3331;
  /* viewBox 714.48 × 306.24 */
  width: calc(var(--logo-h) * var(--logo-aspect));
  height: var(--logo-h);
  background-color: currentColor;
  -webkit-mask: url("../img/logo.svg") no-repeat center / contain;
  mask: url("../img/logo.svg") no-repeat center / contain;
}

/* Versione su una riga, per la barra: essendo larga quasi sette volte la sua
   altezza va tenuta bassa, altrimenti mangia lo spazio delle voci di menu. */
.wordmark--nav {
  --logo-aspect: 6.9771;
  /* viewBox 1088.5 × 156.01 */
  --logo-h: clamp(1.15rem, .95rem + .7vw, 1.6rem);
  -webkit-mask-image: url("../img/logo-inline.svg");
  mask-image: url("../img/logo-inline.svg");
  -webkit-mask-position: left center;
  mask-position: left center;
}

/* In cima alla pagina il marchio nella barra è molto grande (4 volte la
   misura ridotta); appena si scorre si riduce. Il grande è lo stato di
   partenza, così senza JavaScript il sito resta comunque corretto.
   Il marchio è largo quasi sette volte la sua altezza: l'altezza è limitata
   anche dalla larghezza disponibile, tolto lo spazio per lingua e burger
   (`--riservato`), così su schermi stretti non esce dalla barra. */
.site-header>.wordmark--nav {
  --riservato: 10rem;
  --logo-h: min(clamp(6rem, 4.4rem + 8vw, 11.2rem),
      calc((100vw - 2 * var(--gutter) - var(--riservato)) / 6.9771));
  /* Centratura ottica: nel file del logo la stellina in alto alza il
     riquadro, e le lettere stanno fra il 20% e il 99% dell'altezza. Il loro
     centro è al 59% invece che al 50%: si sposta il logo in su del 9%. */
  transform: translateY(calc(var(--logo-h) * -.093));
  transition: width .35s ease, height .35s ease, transform .35s ease;
}

.site-header.is-scrolled>.wordmark--nav {
  --logo-h: min(clamp(1.5rem, 1.1rem + 2vw, 2.8rem),
      calc((100vw - 2 * var(--gutter) - var(--riservato)) / 6.9771));
}

/* Da desktop la lingua è fissa in basso: accanto al marchio resta solo il
   burger. */
@media (min-width: 1000px) {
  .site-header>.wordmark--nav {
    --riservato: calc(44px + 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {

  .site-header>.wordmark--nav {
    transition: none;
  }
}

.wordmark--lg {
  --logo-h: clamp(3.6rem, 2.9rem + 2.4vw, 5.25rem);
}

/* Solo icona: niente etichetta né bordo. L'area cliccabile resta di 44px,
   la misura minima comoda anche da touch. */
.menu-btn {
  color: var(--on-brand);
  background: transparent;
  border: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 0;
}

.menu-btn:focus-visible {
  outline: 2px solid var(--on-brand);
  outline-offset: 2px;
}

/* Le tre linee sono un SVG con `crispEdges`: ogni linea viene agganciata
   al pixel intero, così hanno tutte lo stesso spessore anche quando il
   pulsante cade a metà pixel (con tre elementi separati la prima linea
   veniva sfumata su due pixel e sembrava più spessa). Le linee stanno sul
   bordo alto, a metà e sul bordo basso; `overflow: visible` lascia
   sporgere metà tratto. */
.menu-icon {
  display: block;
  width: 26px;
  height: 14px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
}

/* ===== Menu overlay animato ===== */
/* Nota: a menu aperto lo scorrimento si blocca sulla radice (`html`, vedi
   in fondo al file), mai sul body: sul body azzererebbe lo sticky
   dell'header, facendo sparire il pulsante di chiusura a pagina scrollata. */
.menu-overlay {
  /* Parte sotto la barra: nel prototipo l'header resta lavanda e visibile,
     e il pannello nero occupa solo lo spazio sotto. `--h-header` la misura
     il JS, il valore di scorta copre il caso in cui non arrivi. */
  position: fixed;
  inset: var(--h-header, 4.6rem) 0 0 0;
  z-index: 40;
  background: var(--brand-deep);
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  padding: 5.5rem var(--gutter) 2rem;
  overflow-y: auto;
  overscroll-behavior: none;

  /* apertura: il colore si espande dal pulsante burger */
  clip-path: circle(0% at calc(100% - var(--gutter) - 22px) 0);
  opacity: 0;
  visibility: hidden;
  transition:
    clip-path .62s cubic-bezier(.76, 0, .24, 1),
    opacity .32s ease .05s,
    visibility 0s linear .62s;
}

.menu-overlay.is-open {
  clip-path: circle(150% at calc(100% - var(--gutter) - 22px) 0);
  opacity: 1;
  visibility: visible;
  transition:
    clip-path .62s cubic-bezier(.76, 0, .24, 1),
    opacity .28s ease,
    visibility 0s;
}

.menu-overlay ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.7rem, 2vw, 1.1rem);
  width: 100%;
}

.menu-overlay a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 4.2vw, 4.75rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--brand);
  text-decoration: none;
  display: inline-block;
  /* le voci lunghe vanno a capo su sé stesse, centrate sotto la prima riga */
  text-wrap: balance;
}

/* Nessun effetto al passaggio del mouse; resta solo il segno per chi naviga
   da tastiera, che altrimenti non saprebbe su quale voce si trova. */
.menu-overlay a:focus-visible {
  font-style: italic;
}


/* ingresso a cascata delle voci */
.menu-overlay li,
.menu-meta {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}

.menu-overlay.is-open li,
.menu-overlay.is-open .menu-meta {
  opacity: 1;
  transform: none;
  transition-delay: calc(180ms + var(--i, 0) * 55ms);
}

.menu-meta {
  display: grid;
  gap: .4rem;
}

.menu-meta a {
  font-family: var(--font-body);
  font-size: 1.05rem;
  opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
  .menu-overlay {
    clip-path: none;
    transition: opacity .2s, visibility 0s linear .2s;
  }

  .menu-overlay.is-open {
    clip-path: none;
    transition: opacity .2s, visibility 0s;
  }

  .menu-overlay li,
  .menu-meta {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ===== Da desktop: marchio a sinistra, burger a destra =====
   Nessuna voce in linea: il burger apre il pannello a tutto schermo, come
   da mobile. */

@media (min-width: 1000px) {

  /* Da desktop la barra tiene solo marchio e burger: il selettore di
     lingua se ne va in basso allo schermo, fisso. Su mobile non si applica:
     lì resta accanto al pulsante del menu, dove serve avere tutto a portata
     di pollice in alto. */
  .site-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "marchio . burger";
    align-items: center;
    column-gap: clamp(.6rem, 1.2vw, 1.2rem);
    padding-block: .7rem;
  }

  .site-header>.wordmark {
    grid-area: marchio;
  }

  /* Il contenitore sparisce come scatola — la lingua è fissa — così il
     burger diventa una cella della griglia. Deve restare sopra il pannello
     aperto, altrimenti sparisce il tasto per chiuderlo. */
  .header-tools {
    display: contents;
  }

  .menu-btn {
    grid-area: burger;
    position: relative;
    z-index: 41;
  }

  /* Pastiglia fissa in basso a sinistra. Il fondo serve: scorrendo, il
     selettore passa sopra le bande scure, e senza una superficie propria
     il testo ci sparirebbe dentro. */
  .lingue {
    position: fixed;
    left: 15px;
    bottom: 15px;
    z-index: 45;
    background: var(--brand);
    box-shadow: 0 2px 14px rgba(1, 2, 3, .16);
    transition: opacity .3s ease, visibility 0s;
  }

  /* Mentre il banner cookie è in primo piano si toglie di mezzo: sotto i
     1100px circa il banner arriva a coprire proprio quell'angolo. */
  body:has(.cookie-banner.is-visible) .lingue {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
}

/* ===== Story blocks ===== */
.story {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  display: grid;
  gap: 1.6rem;
}

.story-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

#filosofia .story-media img {
  object-position: 50% 20%;
}

.badge {
  justify-self: start;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0;
  padding: .25rem .8rem;
}

.story h1,
.story h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.2;
  margin-top: .9rem;
}

.story p {
  margin-top: 1rem;
  max-width: 34em;
}

@media (min-width: 800px) {
  .story {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }

  .story--flip .story-media {
    order: 2;
  }
}

/* ===== Bande =====
   Nel Figma WEB le sezioni forti sono blocchi neri a tutta larghezza con
   testo chiaro, allineati a sinistra come il resto della pagina. */
.band {
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
  display: grid;
  justify-items: center;
  text-align: center;
}

.band--scura {
  background: var(--brand-deep);
  color: var(--brand);
  /* ribaltamento locale: tutto ciò che sta dentro (titoli, pulsanti, campi)
     legge questi valori e si adatta senza regole dedicate.
     Sul nero il testo è lavanda, non bianco: è il colore del marchio e
     l'accoppiata è quella del Figma. */
  --accent: var(--brand);
  --ink: var(--brand);
  --on-brand: var(--brand);
  --pill-tinta: var(--brand);
  --pill-fondo: var(--brand-deep);
}

/* ===== Titoli in maiuscolo =====
   Display e titoli vanno in caps, come nella referenza Studio Museum in
   Harlem. Il maiuscolo chiede un filo di spaziatura in più fra le lettere e
   un'interlinea leggermente più aperta, perché mancano le aste discendenti.
   Restano in tondo i testi esplicativi, gli occhielli e i dati (i nomi delle
   persone nell'area riservata, il titolo del banner cookie). */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 2rem + 4vw, 4.5rem);
  color: var(--on-brand);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .015em;
}

.display--blue {
  color: var(--brand);
}

.band--servizi {
  background: var(--brand);
}

.service-list {
  list-style: none;
  margin: clamp(2rem, 5vw, 3.5rem) 0;
  display: grid;
  gap: 2.2rem;
  max-width: 760px;
}

.service-list li {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.25;
  color: var(--on-brand);
}

.service-list li+li {
  position: relative;
  padding-top: 2.2rem;
}

.service-list li+li::before {
  content: "✦";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: .8rem;
  opacity: .7;
}

/* ===== Pulsanti =====
   Rettangoli con bordo sottile, come nella versione WEB del Figma. Colore e
   bordo vengono da `currentColor`: così lo stesso pulsante funziona sul bianco
   e dentro le bande nere, senza varianti dedicate. */
.pill {
  /* i due colori sono variabili: le bande scure li ribaltano una volta sola,
     senza bisogno di una classe per ogni contesto */
  --pill-tinta: var(--accent);
  --pill-fondo: var(--paper);

  font-family: var(--font-body);
  /* Stessa scala dei riquadri delle pagine interne: i bottoni di sezione
     erano rimasti alla misura del corpo del testo e sparivano accanto ai
     titoli grandi. */
  font-size: clamp(1.15rem, 1rem + .55vw, 1.6rem);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--pill-tinta);
  border: 2px solid var(--pill-tinta);
  border-radius: 0;
  padding: .275em .575em;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}

/* Freccia disegnata e non carattere: così il tratto è di 2px come il bordo,
   a qualsiasi dimensione del testo. */
.pill-freccia {
  width: 12px;
  height: 15px;
  flex: none;
  overflow: visible;
}

/* Al passaggio del mouse si riempie della propria tinta e il testo prende il
   colore del fondo su cui il pulsante si trova. */
.pill:hover {
  background-color: var(--pill-tinta);
  color: var(--pill-fondo);
}

/* ===== Chi siamo ===== */
.chi-siamo {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 8vw, 6rem) var(--gutter);
  max-width: calc(var(--misura) + 2 * var(--gutter));
  margin: 0 auto;
}

.chi-siamo .display {
  text-align: left;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw, 420px);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-right: var(--gutter);
  scrollbar-width: none;
}

.cards::-webkit-scrollbar {
  display: none;
}

.card {
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: .9rem;
}

.card figure img {
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  width: 100%;
}

.card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1.15;
}

.card .pill {
  justify-self: center;
  margin-top: .6rem;
}

@media (min-width: 900px) {
  .chi-siamo {
    padding-right: var(--gutter);
  }

  .cards {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: unset;
    overflow: visible;
    padding-right: 0;
  }
}

/* ===== Gallery ===== */
.band--gallery {
  background: var(--brand-light);
}

.band--gallery .display {
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.gallery-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  width: min(100%, var(--misura));
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 700px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== Contatti =====
   Nel Figma i campi sono righe sottili a tutta larghezza, non una colonna
   stretta centrata. */
.contact-form {
  width: 100%;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  text-align: left;
}

.field-row {
  display: grid;
  gap: 2rem;
}

@media (min-width: 640px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: grid;
  gap: .3rem;
}

.field span {
  font-family: var(--font-display);
  color: var(--on-brand);
  font-size: 1.15rem;
}

.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 1.25rem + 0.4vw, 1.8rem);;
  background: transparent;
  color: var(--on-brand);
  border: 0;
  border-bottom: 1.5px solid var(--on-brand);
  padding: .45rem .1rem;
  border-radius: 0;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  font-size: clamp(1.4rem, 1.25rem + 0.4vw, 1.8rem);;
  color: var(--on-brand);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-bottom-width: 2.5px;
}

.field input.invalid,
.field textarea.invalid {
  border-bottom-color: #FFD9D9;
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  color: var(--on-brand);
  font-size: .98rem;
  line-height: 1.45;
}

.field-check input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .2rem;
  accent-color: var(--on-brand);
}

.field-check input.invalid {
  outline: 2px solid #FFD9D9;
  outline-offset: 2px;
}

.field-check a {
  color: var(--on-brand);
}

.form-feedback {
  color: var(--on-brand);
  font-style: italic;
  min-height: 1.4em;
}

.form-feedback a {
  color: var(--on-brand);
}

.form-feedback.is-error {
  font-style: normal;
  background: color-mix(in srgb, var(--on-brand) 16%, transparent);
  border-radius: 0;
  padding: .5rem .8rem;
}

.form-feedback.is-ok {
  font-style: normal;
  background: color-mix(in srgb, var(--on-brand) 22%, transparent);
  border-radius: 0;
  padding: .5rem .8rem;
}

.pill--submit[disabled] {
  opacity: .5;
  cursor: progress;
}

.pill--submit {
  justify-self: start;
  padding: .55rem 2rem;
}

/* ===== Footer =====
   Impianto del Figma: fondo bianco, tutto allineato a sinistra sullo stesso
   margine del contenuto, righe «ETICHETTA: valore» in carattere display, e il
   marchio a chiudere. Niente centratura: nel prototipo la colonna parte dal
   bordo sinistro del contenuto e finisce lì. */
.site-footer {
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  font-family: var(--font-display);
  padding: var(--ritmo) var(--gutter);
  max-width: var(--misura);
  margin-inline: auto;
}

.site-footer a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

/* Ogni riga è etichetta e valore sulla stessa linea, con i due punti fra
   l'una e l'altro: è la forma che ha nel prototipo. */
.recapiti {
  display: grid;
  gap: .45rem;
}

.recapiti>div {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.recapiti dt {
  text-transform: uppercase;
  letter-spacing: .02em;
}

.recapiti dt::after {
  content: ":";
}

.recapiti dd {
  margin: 0;
}

.recapiti a {
  color: inherit;
}

.site-footer .copy {
  margin-top: .45rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.footer-links {
  margin-top: clamp(1rem, 2.2vw, 1.6rem);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.2rem;
  font-size: .95rem;
}

/* Nel footer il marchio è la versione su una riga, come in testa alla pagina,
   e apre il blocco al posto di un titolo. */
.wordmark--footer {
  --logo-aspect: 6.9771;
  --logo-h: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem);
  -webkit-mask-image: url("../img/logo-inline.svg");
  mask-image: url("../img/logo-inline.svg");
  -webkit-mask-position: left center;
  mask-position: left center;
  color: var(--ink);
  margin-bottom: clamp(1rem, 2.2vw, 1.7rem);
}

/* ===== Banner cookie =====
   Scheda flottante, non bloccante: non copre la pagina né oscura il fondo.
   Accettare e rifiutare hanno lo stesso peso visivo, come richiede il Garante. */
.cookie-banner {
  position: fixed;
  inset: auto var(--gutter) var(--gutter) var(--gutter);
  z-index: 60;
  display: flex;
  justify-content: center;
  transform: translateY(calc(100% + var(--gutter)));
  opacity: 0;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}

.cookie-banner.is-visible {
  transform: none;
  opacity: 1;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-inner {
  width: min(100%, 64rem);
  max-height: calc(100dvh - 2 * var(--gutter));
  overflow-y: auto;
  background: var(--brand-deep);
  /* Il fondo è la superficie scura: come nelle bande, i token vanno
     ribaltati qui dentro, altrimenti il testo resta del colore previsto per
     l'header e sul nero diventa illeggibile. */
  --accent: var(--brand);
  --ink: var(--brand);
  --on-brand: var(--brand);
  --pill-tinta: var(--brand);
  --pill-fondo: var(--brand-deep);
  color: var(--on-brand);
  border: 1px solid color-mix(in srgb, var(--on-brand) 30%, transparent);
  border-radius: 0;
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .24);
  display: grid;
  gap: 1rem;
}

.cookie-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem);
  margin-bottom: .35rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.cookie-copy p {
  font-size: .96rem;
  line-height: 1.5;
  max-width: 68ch;
}

.cookie-banner a {
  color: var(--on-brand);
}



.cookie-prefs {
  display: grid;
  gap: .8rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--on-brand) 45%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--on-brand) 8%, transparent);
}

.cookie-prefs[hidden] {
  display: none;
}

.cookie-opt {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .95rem;
  line-height: 1.45;
}

.cookie-opt input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .2rem;
  accent-color: var(--on-brand);
}

.cookie-opt input:disabled {
  opacity: .6;
}

.cookie-prefs .pill {
  justify-self: start;
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

.pill--ghost {
  color: var(--on-brand);
  border-color: transparent;
  text-decoration: underline;
}

.pill--ghost:hover {
  background: color-mix(in srgb, var(--on-brand) 16%, transparent);
  color: var(--on-brand);
}

/* «Accetta» e «Rifiuta» hanno lo stesso trattamento: solo «Personalizza»
   è secondario, perché apre un pannello e non esprime una scelta. */
.cookie-actions .pill--light,
.cookie-actions .pill--ghost {
  font-size: 1.05rem;
}
.cookie-actions .pill--light {
  flex: 1 1 auto;
  justify-content: center;
}

.cookie-actions .pill--ghost {
  flex: 0 0 auto;
}

@media (min-width: 900px) {
  .cookie-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .cookie-prefs {
    grid-column: 1 / -1;
  }

  .cookie-actions {
    justify-content: flex-end;
  }

  .cookie-actions .pill--light {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: opacity .2s;
    transform: none;
  }
}

/* ===== Pagine interne (legali + area riservata) ===== */
.page {
  max-width: var(--misura);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 7vw, 5rem);
}

.page-head {
  margin-bottom: 2.5rem;
}

.page-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  font-size: clamp(2rem, 1.5rem + 3vw, 3.2rem);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: .015em;
  margin: .9rem 0 .8rem;
}

.page-lede {
  font-size: 1.12rem;
  max-width: 60ch;
}

.page-date {
  margin-top: .8rem;
  font-size: .95rem;
  font-style: italic;
  opacity: .85;
}

/* ===== Pagine legali: intestazione a tutta larghezza, poi indice + testo ===== */
.legal-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.legal-index {
  border-top: 2px solid var(--accent);
  padding-top: 1rem;
}

/* specificità alzata: deve vincere su `.page--legal h2`, definito più sotto */
.page--legal .legal-index h2 {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9rem;
}

.legal-index ol {
  list-style: none;
  display: grid;
  gap: .45rem;
  counter-reset: sez;
}

.legal-index li {
  counter-increment: sez;
}

.legal-index a {
  display: flex;
  gap: .55rem;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
}

.legal-index a::before {
  content: counter(sez);
  color: var(--accent);
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

.legal-index a:hover,
.legal-index a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

@media (min-width: 1100px) {
  .legal-grid {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 6rem);
    align-items: start;
  }

  .legal-index {
    position: sticky;
    /* sotto l'header sticky */
    top: 6.5rem;
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
  }
}

.legal-section+.legal-section {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* compensa l'header sticky quando si salta a una sezione dall'indice */
.legal-section {
  scroll-margin-top: 7rem;
}

.page--legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  margin: 0 0 .8rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.2;
}

.legal-section h2 .num {
  font-variant-numeric: tabular-nums;
  opacity: .55;
  margin-right: .5rem;
}

.page--legal h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  font-size: 1.15rem;
  margin: 1.6rem 0 .5rem;
}

.page--legal p,
.page--legal li {
  max-width: 68ch;
}

.page--legal p+p {
  margin-top: .8rem;
}

.page--legal ul {
  margin: .7rem 0 .7rem 1.3rem;
  display: grid;
  gap: .45rem;
}

.page--legal a {
  color: var(--accent);
}

.page--legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  padding: .1em .35em;
  border-radius: 0;
}

.legal-table-wrap,
.legal-table {
  margin: 1.1rem 0;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  display: block;
  overflow-x: auto;
}

.legal-table th,
.legal-table td {
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  padding: .6rem .7rem;
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  font-weight: 600;
  color: var(--accent);
}

.page-back {
  margin-top: 3rem;
}

/* ===== Area riservata: richieste ===== */
.notice {
  border-radius: 0;
  padding: .85rem 1rem;
  margin: 1.2rem 0;
  font-size: .97rem;
  line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--brand) 50%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.notice--warn {
  border-color: #E4B95F;
  background: rgba(228, 185, 95, .14);
  color: #8A6410;
}

.notice--error {
  border-color: #D98A8A;
  background: rgba(217, 138, 138, .14);
  color: #8E3636;
}

.notice--ok {
  border-color: #7FB48D;
  background: rgba(127, 180, 141, .14);
  color: #2F6B41;
}

.login-form {
  display: grid;
  gap: 1.4rem;
  max-width: 320px;
}

.field--dark span {
  color: var(--accent);
}

.field--dark input {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.admin-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
}

.admin-count {
  font-size: 1rem;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

.admin-actions form {
  margin: 0;
}

.pill--sm {
  font-size: .9rem;
  padding: .35rem .9rem;
}

.pill--danger {
  color: #A94A4A;
  border-color: #D9A0A0;
}

.pill--danger:hover {
  background: #A94A4A;
  border-color: #A94A4A;
  color: var(--on-brand);
}

.msg-list {
  list-style: none;
  display: grid;
  gap: 1.1rem;
}

.msg {
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  border-radius: 0;
  padding: 1.1rem 1.2rem;
  background: var(--surface);
}

.msg--nuovo {
  border-left: 4px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, transparent);
}

.msg-head {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.msg-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--accent);
}

.msg-head time {
  font-size: .9rem;
  opacity: .8;
  font-style: italic;
}

.msg-mail {
  font-size: .96rem;
  margin-top: .15rem;
}

.msg-mail a,
.page a {
  color: var(--accent);
}

.msg-body {
  margin: .8rem 0 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.msg-tools form {
  margin: 0;
}

.empty-state {
  border: 1px dashed color-mix(in srgb, var(--brand) 60%, transparent);
  border-radius: 0;
  padding: 2.2rem 1.2rem;
  text-align: center;
  font-style: italic;
}

/* ===== Home: intro e servizi ===== */
/* ===== Impianto della home WEB =====
   Blocchi impilati a tutta pagina, tutti allineati a sinistra sulla stessa
   misura: dichiarazione, fila di immagini, banda nera, coppia di schede. */
.sezione {
  max-width: var(--misura);
  margin: 0 auto;
  padding: var(--ritmo) var(--gutter);
}

/* Le sezioni a fondo pieno arrivano ai bordi, ma il contenuto resta sulla
   misura comune. Il contenitore interno è esplicito: affidarsi a `> *` non
   funziona, perché il `max-width` dei singoli blocchi vince su quello del
   contenitore e li centra invece di allinearli. */
.sezione--piena {
  max-width: none;
  padding-inline: 0;
}

.sezione-interna {
  max-width: var(--misura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Dichiarazione: il blocco di testo grande in maiuscolo, a bandiera. */
.claim {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  font-size: clamp(1.75rem, 1rem + 3.4vw, 4.5rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: .005em;
  max-width: 20ch;
}

.claim--largo {
  max-width: 26ch;
}

/* Da mobile il Figma centra claim e titoli e stringe il margine laterale a
   20px. Da desktop, invece, il testo resta allineato a sinistra: è così anche
   nel Figma, e qui sotto la soglia del menu in linea non si applica nulla. */
@media (max-width: 999px) {
  :root {
    --gutter: 20px;
  }

  .claim,
  .titolo-sezione {
    text-align: center;
    margin-inline: auto;
  }

  /* «Contattaci» è la parola più lunga del sito: a 64px sborda dallo schermo,
     ed è per questo che anche nel Figma mobile sta a 48px mentre gli altri
     titoli stanno a 64. Da desktop torna in riga con tutti gli altri. */
  #contatti>.sezione-interna>.titolo-sezione {
    font-size: 3rem;
  }
}

/* Fila di immagini affiancate. */
.fila {
  display: grid;
  gap: clamp(.9rem, 1.6vw, 1.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.fila--tre {
  grid-template-columns: 1fr;
}

.fila--due {
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .fila--tre {
    grid-template-columns: repeat(3, 1fr);
  }

  .fila--due {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fila img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.fila--alta img {
  aspect-ratio: 3 / 4;
}

/* Scheda: immagine, titolo in maiuscolo, pulsante rettangolare. */
.scheda {
  display: grid;
  gap: clamp(.9rem, 2vw, 1.4rem);
  align-content: start;
}

.scheda img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.scheda h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem);
  line-height: 1.08;
  text-transform: uppercase;
}

.scheda .pill {
  justify-self: start;
}

/* Immagine orizzontale: taglio panoramico per i blocchi Servizi e Chi siamo. */
.immagine--landscape {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.scheda--larga {
  gap: clamp(1rem, 2.2vw, 1.6rem);
}

/* ===== Scorrimento automatico e continuo =====
   La sequenza di immagini è duplicata nel markup: la traccia scorre di metà
   della propria larghezza e a fine ciclo la seconda copia si trova esattamente
   dov'era la prima. Il ritorno all'inizio non si vede e il movimento non si
   ferma mai. La durata la calcola `main.js` dalla larghezza reale, così la
   velocità resta la stessa anche cambiando numero o formato delle immagini. */
.marquee {
  --passo: clamp(.8rem, 1.6vw, 1.4rem);
  --larghezza-immagine: min(72vw, 26rem);
  overflow: hidden;
}

.marquee-traccia {
  display: flex;
  width: max-content;
  animation: scorrimento var(--durata, 45s) linear infinite;
}

.marquee[data-verso="indietro"] .marquee-traccia {
  animation-direction: reverse;
}

.marquee figure {
  flex: 0 0 var(--larghezza-immagine);
  /* la distanza sta sul singolo riquadro, non sul contenitore: così metà
     traccia corrisponde esattamente a una sequenza intera e l'aggancio è
     invisibile */
  margin-right: var(--passo);
}

.marquee img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.marquee--largo {
  --larghezza-immagine: min(82vw, 38rem);
}

/* Da desktop tre immagini riempiono esattamente la larghezza del carosello:
   la misura parte dal contenitore (unità `cqi`), non dalla finestra, così
   rispetta i margini della sezione. Il movimento non cambia: la durata la
   ricalcola `main.js` dalla nuova larghezza della traccia. */
@media (min-width: 900px) {
  .marquee {
    container-type: inline-size;
  }

  .marquee,
  .marquee--largo {
    --larghezza-immagine: calc((100cqi - 2 * var(--passo)) / 3);
  }
}

@keyframes scorrimento {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Chi ha chiesto meno animazioni non subisce il movimento continuo: la
   sequenza resta ferma e scorribile a mano. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .marquee-traccia {
    animation: none;
  }

  .marquee figure {
    scroll-snap-align: start;
  }
}

/* ===== Carosello manuale (non più usato in home, resta per altri contesti) =====
   Scorrimento orizzontale con aggancio: si trascina col dito, con la rotella
   o con le frecce da tastiera. */
.carosello {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 30rem);
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  overflow-x: auto;
  /* Con `overflow-x: auto` anche l'asse verticale diventerebbe scorrevole, e
     l'entrata delle figure o lo zoom al passaggio lo farebbero sporgere di
     qualche pixel: la rotella resterebbe catturata dal carosello invece di
     far scorrere la pagina. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding-bottom: .1rem;
  scrollbar-width: none;
}

.carosello::-webkit-scrollbar {
  display: none;
}

/* Un carosello preceduto da altro — in apertura è la frase grande — restava
   incollato al testo: sopra zero, sotto il padding della sezione. Con questo
   margine l'aria è identica dai due lati. */
.sezione>*+.carosello,
.sezione-interna>*+.carosello,
.sezione>*+.marquee {
  margin-top: var(--ritmo);
}

.carosello figure {
  scroll-snap-align: start;
}

/* Con sole tre immagini servono riquadri più larghi, altrimenti su schermo
   grande stanno tutte in fila e il carosello non si legge come tale. */
.carosello--largo {
  grid-auto-columns: min(82vw, 38rem);
}

.carosello img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.carosello figure:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .carosello {
    scroll-behavior: auto;
  }

  .carosello img {
    transition: none;
  }
}

/* ===== Blocchi di testo lunghi =====
   Più aria fra le righe e fra i paragrafi, misura di lettura contenuta:
   sono le tre leve che rendono davvero leggibile un testo lungo. */
.blocco-testo {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 62ch;
}

.blocco-testo p {
  font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem);
  line-height: 1.7;
  margin-top: 1.1em;
  text-wrap: pretty;
}

.blocco-testo p:first-child {
  margin-top: 0;
}

.blocco-testo strong {
  font-weight: 600;
}

.blocco-testo h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: .6rem;
}

.blocco-testo h3 {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.2rem 0 .9rem;
}

/* Occhiello: la riga di lancio sotto al titolo. */
.occhiello {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  line-height: 1.35;
  color: var(--accent);
  margin-bottom: 1.6rem;
}

.titolo-blocco {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.1;
  text-transform: uppercase;
  margin: clamp(2.5rem, 5vw, 4rem) 0 1rem;
  scroll-margin-top: 7rem;
}

/* Gruppo di pulsanti in chiusura di sezione. */
.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: clamp(1.8rem, 4vw, 3rem);
}

.azioni--inline {
  margin-top: 1.8rem;
}

/* Titolo di sezione a bandiera, il grande maiuscolo delle bande. */
.titolo-sezione {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  /* Misure del Figma: 64px sul frame mobile da 402px, 96px su quello desktop
     da 1440px. La formula passa per quei due punti. */
  font-size: clamp(3.6rem, 3.2rem + 3.1vw, 6rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: .005em;
}

/* ===== Apertura: opere e dichiarazioni alternate =====
   Il ritmo della home aggiornata del Figma: un'opera, una frase centrata in
   maiuscolo, di nuovo un'opera. Le immagini sono dipinti e illustrazioni, non
   fotografie: si trattano come tavole, con un formato alto e un'altezza
   massima legata allo schermo perché restino leggibili per intero. */
.apertura {
  max-width: var(--misura);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(3rem, 7vw, 5rem);
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.movimento {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  justify-items: center;
  align-items: center;
  max-width: 62rem;
  margin: 0 auto;
  /* impilato resta una colonna leggibile */
}

.opera {
  width: 100%;
}

.opera img {
  width: 100%;
  max-height: min(62vh, 34rem);
  object-fit: contain;
  object-position: center;
}

.dichiarazione {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  font-size: clamp(1.45rem, 1rem + 2.3vw, 3rem);
  line-height: 1.18;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .015em;
  max-width: 24ch;
  text-wrap: balance;
}

/* Da desktop la coppia si affianca: l'opera occupa una metà, la dichiarazione
   l'altra, e i due lati si scambiano a ogni movimento. Così la pagina usa la
   larghezza disponibile invece di restare una colonna stretta al centro. */
@media (min-width: 1000px) {
  .movimento {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    max-width: none;
  }

  .movimento:nth-child(even) .opera {
    order: 2;
  }

  .opera img {
    max-height: min(78vh, 44rem);
  }

  .dichiarazione {
    text-align: left;
    /* nessun limite in caratteri: il testo riempie la sua metà, così il corpo
       grande non si traduce in una colonna di dodici righe */
    max-width: none;
    font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.75rem);
    line-height: 1.1;
  }

  .movimento:nth-child(even) .dichiarazione {
    justify-self: end;
    text-align: right;
  }
}

.intro {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(1.5rem, 4vw, 3rem);
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.intro-claim {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  /* il minimo è più basso di prima: in maiuscolo la stessa frase occupa
     circa un terzo di riga in più e su schermi stretti riempiva tutto il
     primo schermo */
  font-size: clamp(1.2rem, .85rem + 2vw, 2.6rem);
  line-height: 1.18;
  max-width: 26ch;
  text-transform: uppercase;
  letter-spacing: .012em;
}

.intro-blocks {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
}

@media (min-width: 860px) {
  .intro-blocks {
    grid-template-columns: repeat(3, 1fr);
  }
}

.intro-block {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.intro-block img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.intro-block p {
  font-size: 1.05rem;
}

.servizi-home {
  max-width: var(--misura);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(3rem, 8vw, 5rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.servizi-cards {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 800px) {
  .servizi-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.servizio-card {
  display: grid;
  gap: 1rem;
  align-content: start;
  border-top: 2px solid var(--accent);
  padding-top: 1.4rem;
}

.servizio-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.servizio-card .pill {
  justify-self: start;
  margin-top: .4rem;
}

/* ===== Pagine di contenuto =====
   Su schermi larghi la colonna di lettura non resta appoggiata a sinistra con
   metà pagina vuota: il contenitore si stringe a misura d'articolo e i blocchi
   si centrano, mentre le immagini usano tutta la colonna. */


.page--testo h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem);
  margin: 2.6rem 0 .9rem;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1.18;
}

.page--testo p {
  max-width: 66ch;
}

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

.page--testo figure {
  margin: 2.2rem 0;
}

.page--testo figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Con i margini stretti l'immagine arriva a tutta pagina: senza un tetto
     in altezza occuperebbe più di uno schermo sui monitor larghi. */
  max-height: 68vh;
  object-fit: cover;
}

/* Per gli scatti verticali il taglio 16/9 tronca il soggetto: qui il formato
   resta più alto e l'inquadratura sale verso il volto. */
.page--testo .figure--ritratto img {
  aspect-ratio: 3 / 4;
  max-height: 76vh;
  object-position: 50% 22%;
}

@media (min-width: 800px) {
  .page--testo .figure--ritratto {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1rem, 2vw, 1.6rem);
    align-items: end;
  }

  .page--testo .figure--ritratto figcaption {
    font-style: italic;
    font-size: .95rem;
    align-self: end;
    padding-bottom: .4rem;
  }
}

.quote {
  margin: 2.2rem 0;
  padding: 1.4rem 0 1.4rem 1.6rem;
  border-left: 3px solid var(--accent);
}

.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .9vw, 1.5rem);
  line-height: 1.4;
  color: var(--accent);
  max-width: 46ch;
}

.skill-list {
  list-style: none;
  margin: 1.2rem 0;
  display: grid;
  gap: .6rem;
}

.skill-list li {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  padding-bottom: .6rem;
}

.skill-list li::before {
  content: "✦";
  color: var(--accent);
  font-size: .8em;
}

/* ===== Griglia della pagina Gallery =====
   Una colonna da telefono, due dal tablet in su: le immagini restano grandi
   abbastanza da leggersi, senza diventare francobolli in fila. */
.griglia-opere {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.9rem, 1.6vw, 1.5rem);
  margin-top: var(--ritmo);
}

@media (min-width: 700px) {
  .griglia-opere {
    grid-template-columns: 1fr 1fr;
  }
}

/* Da desktop le immagini stanno in fila da tre, come nel Figma. */
@media (min-width: 1000px) {
  .griglia-opere {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Verticali, nelle proporzioni del Figma (453 × 541). */
.griglia-opere img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
}

/* ===== Comparsa allo scorrimento ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease var(--ritardo, 0ms), transform .7s ease var(--ritardo, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Le immagini entrano salendo e allargandosi appena: il movimento si nota
   ma non sposta il testo attorno. Il ritardo per indice le fa arrivare a
   cascata invece che tutte insieme. */
.reveal--sale {
  transform: translateY(44px) scale(.97);
}

.reveal--sale img {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== Strumenti nell'header: lingua e menu ===== */
.header-tools {
  position: relative;
  z-index: 41;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Selettore di lingua sempre visibile, come richiesto. Due sigle brevi:
   occupa poco e resta leggibile anche accanto al marchio su schermo piccolo. */
.lingue {
  display: flex;
  align-items: center;
  gap: .1rem;
  font-family: var(--font-body);
}

.lingua {
  color: var(--on-brand);
  text-decoration: none;
  font-size: 1.05rem;
  letter-spacing: .06em;
  line-height: 1;
  padding: .55rem .45rem;
  border: 1px solid transparent;
  border-radius: 0;
  opacity: .55;
  transition: opacity .25s ease, border-color .25s ease;
}

/* Da desktop il selettore è una pastiglia fissa in basso a sinistra.
   In barra, da mobile, deve lasciare posto al marchio. */
@media (min-width: 1000px) {
  .lingue {
    gap: .2rem;
  }

  .lingua {
    font-family: var(--font-display);
    font-size: clamp(1.0rem, 0.8rem + .40vw, 1.25rem);
    line-height: 1.2;
    letter-spacing: .04em;
    padding: .38rem .7rem;
  }
}

.lingua:hover,
.lingua:focus-visible {
  opacity: 1;
}

.lingua.is-attiva {
  opacity: 1;
  border-color: currentColor;
}

.lingua:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Nel pannello del menu, dove c'è più spazio, i nomi per esteso. */
.menu-lingue {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
}

.menu-lingue a[aria-current] {
  font-style: italic;
}

/* ===== Entrata delle immagini nei caroselli =====
   Le figure salgono una dopo l'altra quando il carosello arriva in vista.
   Il ritardo per indice lo imposta il JS su `--ritardo`. */
.carosello figure {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease var(--ritardo, 0ms), transform .7s cubic-bezier(.22, 1, .36, 1) var(--ritardo, 0ms);
}

.carosello.is-entrato figure {
  opacity: 1;
  transform: none;
}

.carosello.is-trascinato {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.carosello.is-trascinato img {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .carosello figure {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== Area riservata ===== */
.area-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: clamp(1.2rem, 3vw, 2rem) 0 1.4rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.area-tab {
  font-family: var(--font-display);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink);
  text-decoration: none;
  padding: .45rem .85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 0;
}

.area-tab:hover {
  border-color: var(--accent);
}

.area-tab.is-attiva {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}

/* ===== Statistiche =====
   Cifre grandi in cima, poi un grafico a barre fatto di elementi di lista:
   niente librerie e niente canvas, così la pagina resta leggera e il
   contenuto resta leggibile anche da chi usa un lettore di schermo. */
.area-filtri {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.6rem;
}

.area-filtri .is-attiva {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}

.stat-cifre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-cifra {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: 1rem 1.1rem;
}

.stat-cifra strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1;
}

.stat-cifra span {
  display: block;
  margin-top: .3rem;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.stat-titolo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 2.2rem 0 .9rem;
}

.stat-grafico {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 160px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.stat-grafico li {
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  height: 100%;
}

/* Un filo di altezza anche ai giorni a zero: la barra vuota si vede come
   scelta, mentre il nulla sembra un pezzo di grafico mancante. */
.stat-barra {
  width: 100%;
  height: max(2px, var(--parte));
  background: var(--accent);
}

.stat-asse {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  font-size: .8rem;
  opacity: .7;
}

.stat-tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.stat-tabella th,
.stat-tabella td {
  text-align: left;
  padding: .55rem .4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

.stat-tabella th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .05em;
}

.stat-tabella td+td,
.stat-tabella th+th {
  text-align: right;
  width: 7rem;
}

.area-esci {
  margin-left: auto;
}

.lingua-tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: 1.4rem;
}

.guida-box {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 0;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
  background: color-mix(in srgb, var(--brand) 30%, var(--paper));
}

.guida-box h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .7rem;
}

.guida-box ul {
  padding-left: 1.1rem;
  display: grid;
  gap: .45rem;
}

.guida-box li {
  font-size: .95rem;
  line-height: 1.5;
}

/* --- Immagini --- */
.slot-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.slot {
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 7rem;
}

.slot-anteprima {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.slot-corpo {
  padding: 1rem;
  display: grid;
  gap: .7rem;
}

.slot-corpo h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
}

.slot-meta {
  font-size: .85rem;
  line-height: 1.45;
  opacity: .8;
}

.slot-avviso {
  font-size: .85rem;
}

.slot-form {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.slot-form input[type="file"] {
  font-size: .82rem;
  max-width: 100%;
  flex: 1 1 12rem;
}

.slot-alt summary {
  cursor: pointer;
  font-size: .9rem;
}

.slot-alt form {
  display: grid;
  gap: .6rem;
  margin-top: .7rem;
}

.campo-aiuto {
  font-size: .82rem;
  opacity: .75;
  line-height: 1.4;
}

.field--admin {
  display: grid;
  gap: .35rem;
}

.field--admin>span {
  font-size: .85rem;
  letter-spacing: .02em;
  opacity: .85;
}

.field--admin input,
.field--admin textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 0;
  padding: .6rem .7rem;
}

.field--admin textarea {
  resize: vertical;
  min-height: 6rem;
}

.field--admin input:focus-visible,
.field--admin textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* --- Testi --- */
.gruppo-testi {
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 0;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  margin-bottom: 1.4rem;
}

.gruppo-testi legend {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 0 .5rem;
}

.gruppo-link {
  font-size: .85rem;
  margin-bottom: 1rem;
}

.campo-testo {
  display: grid;
  gap: .8rem;
  padding: 1rem 0;
}

.campo-testo+.campo-testo {
  border-top: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}

.anteprima {
  border-left: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding-left: .9rem;
}

.anteprima-etichetta {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .6;
  margin-bottom: .4rem;
}

.anteprima-corpo p {
  margin-top: .6rem;
  line-height: 1.6;
}

.anteprima-corpo p:first-child {
  margin-top: 0;
}

.anteprima-corpo ul {
  padding-left: 1.1rem;
}

.anteprima-corpo li {
  line-height: 1.5;
}

.barra-salva {
  position: sticky;
  bottom: 0;
  padding: 1rem 0;
  background: linear-gradient(to top, var(--paper) 60%, transparent);
}

@media (min-width: 900px) {
  .campo-testo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 1.4rem;
  }
}

/* Rete di sicurezza: se l'IntersectionObserver non risponde, il JS aggiunge
   questa classe e tutto ciò che doveva «entrare» viene mostrato subito. */
.senza-animazioni .reveal,
.senza-animazioni .carosello figure {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ===== Pagine interne, impianto del Figma =====
   Fondo scuro a tutta pagina, titolo grande in alto a sinistra, testo in
   colonna e immagine affiancata. Il contrasto si ribalta qui dentro: i token
   restano gli stessi, cambia la superficie di riferimento. */
.page--scura {
  background: var(--brand-deep);
  color: var(--brand);
  /* stesso ribaltamento delle bande: così pulsanti ed elenchi annidati
     prendono il lavanda senza regole dedicate */
  --accent: var(--brand);
  --ink: var(--brand);
  --on-brand: var(--brand);
  --pill-tinta: var(--brand);
  --pill-fondo: var(--brand-deep);
  max-width: none;
  margin: 0;
  padding: 0;
}

.page--scura a {
  color: var(--brand);
}

.blocco-doppio {
  max-width: var(--misura);
  margin-inline: auto;
  padding: var(--ritmo) var(--gutter);
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
}

.blocco-doppio+.blocco-doppio {
  padding-top: 0;
}

.blocco-doppio-testo>p {
  max-width: 60ch;
}

.blocco-doppio-testo>p+p {
  margin-top: 1.1em;
}

/* Titolo della pagina: la misura del Figma, che occupa metà colonna. */
.titolo-pagina {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5.5rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
  text-wrap: balance;
}

.titolo-elenco {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem);
  margin: 1.8rem 0 .7rem;
}

.page--scura .occhiello {
  /* `--accent` è il colore dei titoli su fondo chiaro: qui sarebbe nero su
     nero, e l'occhiello sparirebbe lasciando un buco fra titolo e testo. */
  color: var(--brand);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem);
  margin-bottom: 1.6rem;
  max-width: 52ch;
}

.page--scura .titolo-pagina,
.page--scura .titolo-elenco {
  color: var(--brand);
}

.page--scura .skill-list {
  padding-left: 1.2rem;
  display: grid;
  gap: .35rem;
}

.page--scura .skill-list li {
  line-height: 1.5;
}

.blocco-doppio figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Bottone squadrato del Figma: rettangolo bordato, non pastiglia. */
/* Stessa misura dei bottoni della home: corpo e padding vengono da lì, così
   «Contattaci» sulle pagine interne e «Leggi tutto» in home sono lo stesso
   oggetto. Cambia solo il carattere, display invece che di testo. */
.riquadro {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .55vw, 1.6rem);
  line-height: 1;
  color: currentColor;
  text-decoration: none;
  padding: .275em .575em;
  border: 1px solid currentColor;
  border-radius: 0;
  transition: background-color .28s ease, color .28s ease;
}

.riquadro:hover,
.riquadro:focus-visible {
  background: var(--brand);
  color: var(--brand-deep);
}

.page--scura .azioni {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

@media (min-width: 900px) {

  /* Due colonne: il testo tiene circa metà pagina, l'immagine il resto —
     le proporzioni del Figma. */
  .blocco-doppio {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }

  .blocco-doppio--invertito .blocco-doppio-testo {
    order: 2;
  }

  .blocco-doppio--invertito figure {
    order: 1;
  }
}

/* Didascalia e citazione dentro le pagine scure: stesso ribaltamento di
   contrasto del resto del blocco. */
.blocco-doppio figcaption {
  margin-top: .7rem;
  font-size: .95rem;
  line-height: 1.45;
  opacity: .8;
}

.page--scura .quote {
  border-left: 2px solid currentColor;
  padding-left: clamp(1rem, 2.5vw, 1.6rem);
  margin: 1.8rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .95rem + .4vw, 1.35rem);
  line-height: 1.45;
}

.page--scura .quote p+p {
  margin-top: .8rem;
}

/* ===== Menu aperto: rifiniture dal Figma =====
   Pannello nero, voci grandi in lavanda, e sotto — staccati — i due contatti
   diretti, sottolineati. Vale solo da mobile: da desktop il menu è in linea
   nella barra e queste regole vengono ribaltate più sopra. */
.menu-meta a {
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: underline;
  text-underline-offset: .2em;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, .9rem + 2.4vw, 2.6rem);
  line-height: 1.2;
}

.menu-meta {
  gap: clamp(.9rem, 2.5vw, 1.6rem);
  margin-top: clamp(1rem, 4vw, 2.4rem);
}

.menu-lingue a {
  text-transform: none;
  font-size: clamp(1rem, .9rem + .6vw, 1.3rem);
  text-decoration: none;
  opacity: .75;
}

.menu-lingue a[aria-current] {
  opacity: 1;
  font-style: italic;
}

/* Il pulsante: tre righe da chiuso, la scritta CHIUDI in un riquadro da
   aperto, come nel prototipo. */
.menu-etichetta {
  display: none;
  font-family: var(--font-display);
  font-size: clamp(.95rem, .85rem + .4vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1;
  padding: .45em .8em;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.menu-btn[aria-expanded="true"] {
  width: auto;
  height: auto;
}

.menu-btn[aria-expanded="true"] .menu-icon {
  display: none;
}

.menu-btn[aria-expanded="true"] .menu-etichetta {
  display: block;
}
/* ===== Pagina Noi, impianto del Figma =====
   Titolo di pagina grande a tutta larghezza, poi blocchi con l'immagine a
   sinistra e il testo a destra. Il titolo della persona è molto più piccolo
   del titolo di pagina: è la gerarchia del prototipo. */
.titolo-pagina--grande {
  max-width: var(--misura);
  margin-inline: auto;
  padding: var(--ritmo) var(--gutter) 0;
  font-size: clamp(3rem, 1.4rem + 6.4vw, 7rem);
  margin-bottom: 0;
}

/* «Lettera Blu» non è un sottotitolo come il nome della persona: nel
   prototipo è quasi grande quanto il titolo di pagina. */
.titolo-marchio {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.1rem + 4.4vw, 5rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
  color: var(--brand);
}

.titolo-persona {
  font-family: var(--font-display);
  font-weight: 400;
  /* Nel prototipo è poco più grande del corpo del testo, non un titolo:
     il salto di scala vero è fra questo e il titolo di pagina. */
  font-size: clamp(1.25rem, 1rem + .95vw, 2rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: clamp(.8rem, 1.6vw, 1.2rem);
  color: var(--brand);
}

/* Interlinea più stretta di quella delle pagine di testo: nel prototipo i
   paragrafi di questa pagina sono compatti. Non fino al valore del Figma —
   il cliente aveva chiesto più aria fra le righe — ma vicino. */
.blocco-doppio--media-prima .blocco-doppio-testo p { line-height: 1.3; }
.blocco-doppio--media-prima .blocco-doppio-testo > p + p { margin-top: .5em; }

@media (min-width: 900px) {
  /* Immagine a sinistra, più stretta della colonna di testo, come nel Figma. */
  .blocco-doppio--media-prima { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
  .blocco-doppio--media-prima figure { order: 0; }
  .blocco-doppio--media-prima .blocco-doppio-testo { order: 1; }
}

/* ===== Da desktop: titolo, immagine e testo nella stessa schermata =====
   Le immagini non devono mai superare l'altezza utile dello schermo, altrimenti
   per vedere il titolo sopra o il testo accanto bisogna scorrere. L'altezza
   della barra è una stima fissa e non `--h-header`: quella cambia mentre si
   scorre (il marchio si rimpicciolisce) e farebbe ridimensionare le immagini
   a ogni scroll. */
@media (min-width: 900px) {
  :root {
    --schermo-utile: calc(100svh - 5rem);
  }

  /* Home, Servizi e Chi siamo: titolo sopra, immagine, pulsante sotto. */
  .scheda img.immagine--landscape {
    aspect-ratio: 1400 / 499;
    max-height: calc(var(--schermo-utile) - 17rem);
  }

  /* Pagine Servizi e Noi: l'immagine non è mai più alta dello schermo. */
  .blocco-doppio figure img {
    max-height: calc(var(--schermo-utile) - 8rem);
  }

  /* Pagina Noi: sopra il primo blocco c'è anche il titolo grande della
     pagina, che va tolto dallo spazio disponibile. */
  .titolo-pagina--grande+.blocco-doppio figure img {
    max-height: calc(var(--schermo-utile) - 18rem);
  }

  /* Gallery: titolo, frase d'apertura e prima fila di immagini insieme. */
  .griglia-opere img {
    max-height: calc(var(--schermo-utile) - 22rem);
  }
}

/* Angoli retti in tutto il sito, anche sui controlli dei moduli che alcuni
   browser (Safari soprattutto) arrotondano di loro iniziativa. */
input,
textarea,
select,
button {
  border-radius: 0;
}

/* ===== Da desktop: misure del Figma (frame da 1440px) =====
   Valori letti dal file «Lettera Blu — Versione Mobile», pagina WEB. Le
   dimensioni sono quelle del Figma a 1440px e scendono in proporzione sugli
   schermi più stretti (`min(vw, px)`); la spaziatura fra i caratteri nel
   Figma è sempre 0. Nota sui caratteri: lo stile che il Figma chiama
   «Fragment Text» corrisponde qui a `--font-display` e «Fragment Glare» a
   `--font-body` — i nomi dei file sono invertiti, il disegno è lo stesso. */
@media (min-width: 1000px) {

  /* Frasi grandi della home: 64px, interlinea 1.02. */
  .claim {
    font-size: min(4.444vw, 64px);
    line-height: 1.02;
    letter-spacing: 0;
  }

  /* Titoli di sezione e titoli grandi di pagina: 96px. */
  .titolo-sezione,
  .titolo-pagina--grande,
  #contatti>.sezione-interna>.titolo-sezione {
    font-size: min(6.667vw, 96px);
    line-height: 1.02;
    letter-spacing: 0;
  }

  /* Titoli dei blocchi interni (Servizi per le aziende, Lettera Blu): 64px. */
  .titolo-pagina,
  .titolo-marchio {
    font-size: min(4.444vw, 64px);
    line-height: 1.02;
    letter-spacing: 0;
  }

  .titolo-pagina--grande {
    font-size: min(6.667vw, 96px);
  }

  /* Nome di Francesca nella pagina Noi: 36px. */
  .titolo-persona {
    font-size: min(2.5vw, 36px);
    line-height: 1.02;
    letter-spacing: 0;
  }

  /* Testo corrente delle pagine interne: 20px, interlinea 1.02, paragrafi
     uno sotto l'altro senza stacco, come nel Figma. */
  .blocco-doppio-testo>p,
  .blocco-doppio--media-prima .blocco-doppio-testo p,
  .page--scura .occhiello,
  .page--scura .skill-list li,
  .page--scura .quote p,
  .titolo-elenco {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.02;
    letter-spacing: 0;
  }

  .blocco-doppio-testo>p+p,
  .blocco-doppio--media-prima .blocco-doppio-testo>p+p,
  .page--scura .occhiello {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Le righe vuote del Figma fra un gruppo e l'altro. */
  .titolo-elenco,
  .page--scura .quote {
    margin: 1.02em 0 0;
  }

  /* Elenco puntato semplice, come nel Figma: niente stelline né righe. */
  .page--scura .skill-list {
    list-style: disc;
    display: block;
    margin: 0;
    gap: 0;
    padding-left: 30px;
  }

  .page--scura .skill-list li {
    display: list-item;
    border-bottom: 0;
    padding-bottom: 0;
  }

  .page--scura .skill-list li::before {
    content: none;
  }

  .page--scura .quote {
    border-left: 0;
    padding-left: 0;
  }

  /* Pulsanti (Leggi tutto, La gallery, Contattaci, Invia): 32px su una riga
     da 20px, bordo 2px, alti 62px. */
  .pill,
  .riquadro,
  .pill--submit {
    font-family: var(--font-display);
    font-size: min(2.222vw, 32px);
    line-height: 20px;
    letter-spacing: 0;
    border-width: 2px;
    padding: 20px 30px 18px;
    gap: 10px;
  }

  /* Con la freccia il Figma toglie spazio a destra: 21px prima, 13px dopo. */
  .pill:has(.pill-freccia) {
    padding: 20px 13px 18px 21px;
  }

  /* Selettore di lingua: 24px, bordo 1px, alto 31px. */
  .lingua {
    font-family: var(--font-display);
    font-size: min(1.667vw, 24px);
    line-height: 1.2;
    letter-spacing: 0;
    padding: 0 10px;
  }

  /* Pannello del burger: voci a 64px distanziate di 59px, contatti a 48px.
     Su schermi bassi tutto si riduce con l'altezza (`vh`), e `safe center`
     evita che il contenuto, se non ci sta, venga tagliato sotto la barra
     invece di scorrere. */
  .menu-overlay {
    justify-content: safe center;
    padding-top: 2rem;
    gap: min(59px, 4vh);
  }

  .menu-overlay ul {
    gap: min(59px, 3.2vh);
  }

  .menu-overlay a {
    font-size: min(4.444vw, 64px, 6.4vh);
    line-height: 1.2;
    letter-spacing: 0;
  }

  .menu-meta a {
    font-family: var(--font-display);
    font-size: min(3.333vw, 48px, 4.4vh);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: underline;
  }

  /* Modulo contatti: etichette e campi a 32px. */
  .field span,
  .field input,
  .field textarea,
  .field input::placeholder,
  .field textarea::placeholder {
    font-family: var(--font-display);
    font-size: min(2.222vw, 32px);
    line-height: 1.2;
    letter-spacing: 0;
  }

  /* Footer: righe a 36px, interlinea normale, 30px fra una riga e l'altra. */
  .site-footer {
    font-size: min(2.5vw, 36px);
    line-height: 1.2;
  }

  .recapiti {
    gap: 30px;
  }

  .recapiti dt,
  .site-footer .copy {
    letter-spacing: 0;
  }

  .site-footer .copy {
    margin-top: 30px;
  }

  /* Proporzioni delle immagini del Figma. */
  .marquee img {
    aspect-ratio: 453 / 299;
  }

  .blocco-doppio figure img {
    aspect-ratio: 562 / 618;
  }

  #francesca figure img {
    aspect-ratio: 474 / 390;
  }

  #lettera-blu figure img {
    aspect-ratio: 473 / 449;
  }

  .griglia-opere img {
    aspect-ratio: 453 / 541;
  }
}

/* ===== Testo centrato in verticale nei pulsanti =====
   Il carattere ha poco spazio sopra le maiuscole e circa 0,24em sotto la
   linea di base (per le discendenti): a padding simmetrico le maiuscole
   sembrano spinte in alto. Si sposta il testo in giù di metà di quello
   scarto, togliendolo sotto e aggiungendolo sopra: l'altezza non cambia. */
.lingua {
  padding-top: calc(.55rem + .12em);
  padding-bottom: calc(.55rem - .12em);
}

.pill,
.riquadro {
  padding-top: .395em;
  padding-bottom: .155em;
}

.pill--submit {
  padding-top: calc(.55rem + .12em);
  padding-bottom: calc(.55rem - .12em);
}

.pill--sm {
  padding-top: calc(.35rem + .12em);
  padding-bottom: calc(.35rem - .12em);
}

@media (min-width: 1000px) {

  /* Lingua: tutto lo scarto messo sopra. */
  .lingua {
    line-height: 1;
    padding: .21em 10px 0;
  }

  /* Pulsanti da 62px. */
  .pill,
  .riquadro,
  .pill--submit {
    padding-top: calc(19px + .12em);
    padding-bottom: calc(19px - .12em);
  }
}

@media (min-width: 1000px) {
  .pill:has(.pill-freccia) {
    padding-top: calc(19px + .12em);
    padding-bottom: calc(19px - .12em);
  }
}

/* Selettore di lingua: da desktop 24px, come CHIUDI. */
.lingua {
  font-size: .9rem;
}

@media (min-width: 1000px) {
  .lingua {
    font-size: min(1.667vw, 24px);
  }
}

/* CHIUDI: stesso pulsante del selettore di lingua (carattere, spaziatura,
   bordo e testo centrato in verticale). */
.menu-etichetta {
  letter-spacing: 0;
  padding: calc(.45em + .12em) .8em calc(.45em - .12em);
}

@media (min-width: 1000px) {
  .menu-etichetta {
    font-size: min(1.667vw, 24px);
    line-height: 1;
    padding: .21em 10px 0;
  }
}

/* CHIUDI: da desktop 24px, come il selettore di lingua. */
.menu-etichetta {
  font-size: 1rem;
}

@media (min-width: 1000px) {
  .menu-etichetta {
    font-size: min(1.667vw, 24px);
  }
}

/* Burger come nel Figma: tre linee da 42px, spesse 1px, a 15,5px l'una
   dall'altra (da asse ad asse), su un'altezza totale di 32px. */
@media (min-width: 1000px) {
  .menu-icon {
    width: 42px;
    height: 31px;
    stroke-width: 1px;
  }
}

/* Menu aperto: la pagina sotto resta ferma. Il blocco va sulla radice e non
   sul body, così la barra in alto resta `sticky`; `scrollbar-gutter` tiene
   il posto della barra di scorrimento e la pagina non salta di lato. */
html {
  scrollbar-gutter: stable;
}

html:has(.menu-overlay.is-open) {
  overflow: hidden;
}

/* Da desktop anche il pannello è fermo: le misure in `vh` lo fanno sempre
   stare nello schermo. */
@media (min-width: 1000px) {
  .menu-overlay {
    overflow: hidden;
  }
}

/* Da desktop il gruppo lingua + burger va nell'ultima colonna della barra:
   senza voci in linea la colonna centrale resta vuota. */
@media (min-width: 1000px) {
  .site-header>.header-tools {
    grid-area: burger;
    justify-self: end;
  }
}

/* Pagina Servizi: immagine e blocco di testo (titolo, paragrafi, elenco e
   pulsante) sono centrati in verticale l'uno rispetto all'altro, qualunque
   dei due sia più alto. */
@media (min-width: 900px) {
  .blocco-doppio:not(.blocco-doppio--media-prima) {
    align-items: center;
  }

  .blocco-doppio:not(.blocco-doppio--media-prima) figure {
    align-self: center;
  }
}

/* Pagina Noi: immagine con sotto il pulsante «Contattaci», a 51px come nel
   Figma. Il gruppo occupa la colonna dell'immagine. */
.blocco-doppio-media .azioni {
  margin-top: clamp(1.5rem, 3.5vw, 51px);
}

@media (min-width: 900px) {
  .blocco-doppio-media {
    align-self: start;
  }
}

/* ===== Pagina Noi da desktop: spazi del Figma (frame da 1440px) =====
   Colonna immagine 474px, 98px di stacco, colonna testo 710px; l'immagine
   parte più in basso del titolo accanto (54px sotto il nome, 50px sotto
   «Lettera Blu»); 31–30px fra titolo e testo; in fondo, prima del footer,
   lo stesso stacco che c'è fra le due sezioni (120px). Le misure scendono in proporzione sotto i 1440px. */
@media (min-width: 1000px) {
  .blocco-doppio--media-prima {
    grid-template-columns: minmax(0, 33.86%) minmax(0, 50.71%);
    column-gap: 7%;
  }

  #francesca figure {
    margin-top: min(3.75vw, 54px);
  }

  .blocco-doppio-media {
    margin-top: min(3.47vw, 50px);
  }

  .titolo-persona {
    margin-bottom: min(2.5vw, 36px);
  }

  .titolo-marchio {
    margin-bottom: min(2.08vw, 30px);
  }

  /* Più stacco fra la sezione di Francesca e quella di Lettera Blu. */
  #francesca {
    padding-bottom: min(8.33vw, 120px);
  }

  #lettera-blu {
    padding-bottom: min(8.33vw, 120px);
  }
}

/* ===== Gallery: filtri per categoria =====
   Riquadri bordati come gli altri pulsanti, in fila sotto il titolo (nel
   Figma: 20px fra un pulsante e l'altro). Quello attivo è pieno. */
.filtri-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.6rem, 1.4vw, 20px);
  margin: clamp(1.2rem, 2.8vw, 40px) 0 clamp(1.6rem, 4.5vw, 65px);
}

.filtri-gallery .riquadro.is-attivo {
  background: var(--brand);
  color: var(--brand-deep);
}

/* Area riservata: gestione delle categorie e scelta per ogni immagine. */
.categorie-box h3 {
  margin-bottom: .6rem;
}

.categoria-riga {
  display: grid;
  gap: .6rem;
  align-items: end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

@media (min-width: 760px) {
  .categoria-riga {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto auto;
  }

  .categoria-nuova {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
}

.categoria-conteggio {
  font-size: .9rem;
  opacity: .75;
  white-space: nowrap;
  padding-bottom: .5rem;
}

.slot-categorie fieldset {
  border: 0;
  padding: 0;
  margin: .4rem 0 .6rem;
  display: grid;
  gap: .3rem;
}

.slot-categorie legend {
  font-weight: 600;
  margin-bottom: .3rem;
}

/* Pagina Servizi: più aria fra la fine del testo e il pulsante Contattaci. */
.blocco-doppio-testo .azioni {
  margin-top: clamp(2.5rem, 4.5vw, 64px);
}

/* Pagina Noi: immagini quadrate (1:1), a ogni larghezza. */
#francesca figure img,
#lettera-blu figure img {
  aspect-ratio: 1 / 1;
}

/* Se l'immagine di Francesca deve abbassarsi per stare nello schermo sotto
   il titolo grande, si stringe anche in larghezza: resta quadrata. */
@media (min-width: 900px) {
  #francesca figure img {
    width: min(100%, calc(var(--schermo-utile) - 18rem));
    max-height: none;
  }
}

/* Da desktop il margine laterale del contenuto è il triplo di quello di
   partenza (25px → 75px). `--gutter` lo usano barra, sezioni, footer e
   tutte le pagine, quindi cambia ovunque allo stesso modo. */
@media (min-width: 1000px) {
  :root {
    --gutter: 75px;
  }
}

/* ===== Immagini che cambiano (home) =====
   Riquadri fermi al posto dei caroselli: da mobile se ne vede uno, da
   desktop tre affiancati. La nuova immagine entra sopra la vecchia con una
   dissolvenza (900ms, lo stesso valore di `DISSOLVENZA` in `main.js`). */
.rotazione {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.8rem, 1.6vw, 1.4rem);
}

.sezione>*+.rotazione {
  margin-top: var(--ritmo);
}

.rotazione figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin: 0;
}

.rotazione figure+figure {
  display: none;
}

.rotazione img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rotazione img.rotazione-entra {
  opacity: 0;
  transition: opacity .9s ease;
}

.rotazione img.rotazione-entra.is-visibile {
  opacity: 1;
}

#gallery .rotazione+.pill {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 900px) {
  .rotazione {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rotazione figure+figure {
    display: block;
  }

  /* Proporzioni del Figma (453×299). */
  .rotazione figure {
    aspect-ratio: 453 / 299;
  }
}

/* ===== Footer: marchio con la frase sotto =====
   Proporzioni dell'immagine del cliente: la frase è larga poco più del
   marchio e alta circa metà della sua altezza; il margine sotto il blocco
   è quello che prima aveva il solo marchio. */
.marchio-footer {
  --logo-h: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--logo-h) * .22);
  color: var(--ink);
  text-decoration: none;
  margin-bottom: clamp(1rem, 2.2vw, 1.7rem);
}

.site-footer .marchio-footer {
  text-decoration: none;
}

.marchio-footer .wordmark--footer {
  margin-bottom: 0;
}

.marchio-footer-frase {
  font-family: var(--font-display);
  font-size: calc(var(--logo-h) * var(--frase-scala, .507));
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}