/* components.css — componenti law_firm (studio legale associato). Registro istituzionale: fondo chiaro
   caldo, blocchi PIENI in cotto, taglio squadrato, fotografia di AMBIENTI (mai volti presi altrove).
   Il segno del verticale è la TARGA piena che scavalca la fotografia: il contrasto del titolo è
   strutturale e non dipende dal fotogramma. I token vivono in tokens.css. */

/* ===========================================================================
   Intestazione
   =========================================================================== */

/* Fascia di servizio sopra l'header (recapito e orari), come nei riferimenti della categoria. Sotto i
   900px sparisce: il telefono lo porta già la barra fissa in basso, e ripeterlo è la terza volta. */
.topbar { background: var(--brand); color: var(--on-dark); font-size: var(--text-sm); }
.topbar__row { display: var(--topbar-display); align-items: center; justify-content: flex-end; gap: var(--space-5); min-height: 34px; }
.topbar a { color: var(--on-dark); }
.topbar a:hover { color: var(--accent-lt); }
.topbar__item { display: inline-flex; align-items: center; gap: var(--space-2); }
@media (max-width: 899.98px) { .topbar { display: none; } }

/* ⚠ Lo sticky di un header block-based richiede questo: il wrapper .wp-block-template-part crea un
   contenitore che limita il position:sticky del figlio. `display:contents` lo toglie di mezzo. */
.wp-block-template-part { display: contents; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header__row {
  display: flex; align-items: center; gap: var(--space-5);
  padding-block: var(--space-4);
}
/* Header centrato: spazio sopra = sotto su OGNI figlio (regola 16). */
.site-header__row > * { align-self: center; margin-block: 0; }

.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); }
.wordmark__logo { width: clamp(150px, 20vw, 210px); height: auto; }
/* Wordmark tipografico (il demo non ha un marchio: lo studio-tipo non ne possiede uno). */
.wordmark__name { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.1; color: var(--ink); }
.wordmark__tag {
  display: block; font-family: var(--font-body); font-size: 0.62rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink);
  margin-top: 3px;
}

.site-nav { margin-left: auto; }
.site-header .site-nav .wp-block-navigation-item__content,
.site-header .site-nav .wp-block-navigation-item__label {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  /* ⚠ Un'etichetta lunga («Aree di attività») che va a capo alza TUTTA la testata (misurato: 81 → 103px)
     e sembra una nav su due righe mentre è una voce su due linee. Le voci non vanno mai a capo. */
  white-space: nowrap;
}
/* ⚠ WP inietta `.wp-block-navigation .wp-block-navigation-item__content` (0,2,0) DOPO il tema: a parità
   di specificità vince lui. Serve un livello in più E il colore anche sullo __label. */
.site-header .site-nav .wp-block-navigation-item__content:hover,
.site-header .site-nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label { color: var(--accent-ink); }
.site-header .site-nav .wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__label { color: var(--accent-ink); }
/* ⚠ Lo spazio fra le voci si DICHIARA qui: appoggiarsi al block-gap che WP inietta sul layout flex del
   blocco significa dipendere da una regola che non è nostra — e senza, le voci si incollano in una sola
   parola («HOMELO STUDIOAREE…», misurato: gap `normal`).
   La ul del blocco nasce inoltre flex-wrap:wrap: con margin-left:auto sulla nav una voce in più resta
   orfana su una seconda riga e l'header cresce. Sopra i 900 si tiene in riga. */
.site-header .site-nav .wp-block-navigation__container { gap: var(--space-5); }
@media (min-width: 900px) { .site-header .site-nav .wp-block-navigation__container { flex-wrap: nowrap; } }

.site-header__cta { margin-left: var(--space-2); }
/* ⚠ Il selettore porta DUE classi apposta: `.btn` (0,1,0) è dichiarata più sotto in questo stesso foglio e
   le media query NON aggiungono specificità ⇒ un `@media{.site-header__cta{display:none}}` perde contro il
   `display:inline-flex` di `.btn` e il bottone resta visibile su mobile (misurato: flex a tutte le
   larghezze, header 109px a 390). Sotto i 900 la barra fissa in basso porta già «Scrivici»: in testata
   sarebbe la terza ripetizione. */
@media (max-width: 899.98px) { .site-header .site-header__cta { display: none; } }

/* --- Menu mobile (overlay wp:navigation) --- */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* ⚠ Il fondo dell'overlay lo impone WP con
   `.wp-block-navigation:not(.has-background) .…__responsive-container.is-menu-open:not(.disable-default-overlay)`
   = (0,4,0), iniettato DOPO il tema: una regola a 3 classi PERDE in silenzio e l'overlay resta BIANCO.
   Si vince solo ricopiando il suo schema di selettori. */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  background: var(--brand-dark); color: var(--on-dark);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
  color: var(--on-dark); font-size: 1rem; letter-spacing: 0.1em;
}
/* ⚠ Le voci finivano a destra e tagliate: non serve correggere l'<a> (è shrink), il colpevole è il primo
   antenato largo quanto lo schermo con l'allineamento contrario. Si allinea il PADRE. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch; width: 100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%; border-bottom: 1px solid rgba(246,242,234,.16);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding-block: var(--space-4); width: 100%; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: var(--space-8); padding-bottom: var(--space-9); }
.site-header .wp-block-navigation__responsive-container-close {
  top: var(--space-5); right: var(--space-5); padding: var(--space-2);
  color: var(--accent-lt); width: 44px; height: 44px;
}
.site-header .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.site-header .wp-block-navigation__responsive-container-close:hover { color: var(--on-dark); }
/* Hamburger: WP lo lascia a `currentcolor`. ⚠ SOLO sotto i 600px, cioè dove WP lo mostra davvero: senza
   il vincolo il `display:flex` batte il `display:none` di WP e il bottone resta visibile ANCHE a desktop,
   occupando spazio nella nav e mandando le voci a capo. */
@media (max-width: 599.98px) {
  .site-header .wp-block-navigation__responsive-container-open {
    color: var(--ink); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  }
  .site-header .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; fill: currentColor; }
}
/* Fascia 900–1080px: marchio + quattro voci + bottone stanno stretti (misurato a 900: somma 785 su 841 di
   riga utile, con le voci a filo). Si stringono spaziatura e lettere quel tanto che basta a tenere la
   testata a una riga sola senza toccare le altre larghezze. */
@media (min-width: 900px) and (max-width: 1080px) {
  .site-header__row { gap: var(--space-4); }
  .site-header .site-nav .wp-block-navigation__container { gap: var(--space-4); }
  .site-header .site-nav .wp-block-navigation-item__content,
  .site-header .site-nav .wp-block-navigation-item__label { font-size: 0.71rem; letter-spacing: 0.08em; }
  .site-header__cta { font-size: 0.72rem; padding-inline: var(--space-5); }
}
/* Fascia di confine 600–899px: WP mostra ancora la nav estesa ma le voci non entrano accanto al marchio. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .site-header .site-nav .wp-block-navigation-item__content,
  .site-header .site-nav .wp-block-navigation-item__label { font-size: 0.68rem; letter-spacing: 0.08em; }
  .wordmark__name { font-size: 1rem; }
}

/* ===========================================================================
   Bottoni — SQUADRATI: nella categoria il raggio zero è il registro
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius);
  border: 1px solid transparent; background: var(--brand); color: var(--on-dark);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--brand-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
/* Su fondo scuro il bottone si inverte: crema piena con testo cotto (10,31). */
.btn--light { background: var(--paper); color: var(--brand); }
.btn--light:hover { background: var(--accent-lt); color: var(--ink); }
.btn--outline-light { background: transparent; color: var(--on-dark); border-color: rgba(246,242,234,.5); }
.btn--outline-light:hover { background: var(--paper); color: var(--brand); border-color: var(--paper); }

/* ===========================================================================
   Testata — foto a piena larghezza + TARGA piena che la scavalca
   =========================================================================== */
/* Testata cinematografica: la fotografia occupa la finestra intera e RESTA mentre il contenuto le scorre
   sopra (`position: sticky`), con una deriva di parallasse governata da reveal.js. È la richiesta
   dell'owner — «una foto più grande, o una foto che fa da sfondo mentre scorre» — e insieme il registro
   del template di riferimento.
   ⚠ Lo sticky vive nel flusso: la media occupa una finestra e poi la RESTITUISCE con un margine negativo
   pari alla propria altezza, così il corpo della testata le si sovrappone invece di finirle sotto. */
.hero { background: var(--paper); position: relative; }
/* ⚠ Il fondo della testata è SCURO di suo, non solo per via della fotografia: i segni chiari (indice,
   numerale, indicatore) devono reggere anche se lo scatto non carica — e axe, che risolve il fondo sulla
   catena degli antenati e non sui pixel, misurava l'ocra chiara contro l'intonaco a 1,98. */
.hero--cinema { min-height: calc(100vh - var(--chrome)); display: flex; flex-direction: column; background: var(--night); }
.hero__media {
  position: sticky; top: 0; height: calc(100vh - var(--chrome)); margin-bottom: calc(-100vh + var(--chrome));
  background: var(--night); overflow: hidden; z-index: 0;
}
/* La foto è più alta della finestra: la deriva di parallasse ha così margine per muoversi senza scoprire
   i bordi. `will-change` la promuove a livello proprio (niente sfarfallii durante lo scorrimento). */
.hero__media img { width: 100%; height: 116%; margin-top: -8%; object-fit: cover; will-change: transform; }
/* Il velo non rende leggibile il titolo — quello sta sulla targa, e il suo contrasto è strutturale — ma
   tiene unita la banda e lega la fotografia al cotto. Doppio gradiente: scurisce in alto per l'header e
   in basso per l'attacco della sezione seguente. */
/* ⚠ Il colore del velo era CABLATO bruno (rgba(26,19,15,…)): è il nero-caldo delle travi del PRIMO
   cliente, e su una palette fredda vira l'intera fotografia al caldo staccandola dalla banda. Ora viene
   dai token, che per default valgono esattamente il bruno di prima — quindi chi non li ridichiara non
   cambia di un pixel. */
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--veil-1, rgba(26,19,15,.58)) 0%, var(--veil-2, rgba(26,19,15,.12)) 34%, var(--veil-3, rgba(26,19,15,.22)) 62%, var(--scrim-deep) 100%),
    radial-gradient(120% 80% at 18% 78%, var(--veil-4, rgba(26,19,15,.42)) 0%, var(--veil-0, rgba(26,19,15,0)) 62%);
}
.hero__body {
  position: relative; z-index: 1;
  min-height: var(--hero-min-h, calc(100vh - var(--chrome))); display: flex; flex-direction: column; justify-content: var(--hero-justify, flex-end);
  padding-block: var(--hero-pad-top) var(--space-8);
}
/* Indice editoriale: un numerale e un filetto che si allunga — il dispositivo del riferimento, qui reso
   come SEGNO (aria-hidden), non come copy. */
.hero__index {
  display: var(--hero-index-display); align-items: center; gap: var(--space-4);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-label); color: var(--on-dark-muted);
  margin-bottom: auto;
}
.hero__index { filter: drop-shadow(0 1px 4px rgba(26,19,15,.55)); }
.hero__index i { display: block; width: clamp(40px, 9vw, 132px); height: 2px; background: var(--accent-lt); transform-origin: left center; transform: scaleX(0); transition: transform 1.1s var(--ease) .2s; }
.hero--cinema .hero__index i { transform: scaleX(1); }
.hero__index b { font-weight: 600; color: var(--accent-lt); }
.hero__plate {
  position: relative; z-index: 1;
  background: var(--brand); color: var(--on-dark);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  max-width: var(--hero-plate-w, 52rem);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-md);
}
/* Filetto che si DISEGNA sotto il titolo quando la targa entra in scena. */
.hero__hr {
  display: block; height: 2px; width: 96px; background: var(--accent-lt);
  margin: var(--space-5) 0 var(--space-2); transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--ease) .45s;
}
.hero--cinema .hero__hr { transform: scaleX(1); }
/* Staffa d'angolo: due filetti che si disegnano ad angolo retto, in alto a destra della composizione.
   Fa coppia col filetto dell'indice in alto a sinistra e incornicia la testata senza aggiungere UNA
   PAROLA di copy. ⚠ Il primo tentativo era una freccia diagonale: leggeva come due tratti scollegati —
   un segno grafico va GUARDATO al vero, non dedotto dal codice. */
.hero__mark { display: var(--hero-mark-display, block); position: absolute; right: 0; top: 30%; width: 74px; height: 74px; pointer-events: none;
  filter: drop-shadow(0 1px 4px rgba(26,19,15,.55)); }
.hero__mark::before, .hero__mark::after { content: ""; position: absolute; background: var(--accent-lt); }
.hero__mark::before { right: 0; top: 0; height: 2px; width: 0; transition: width .8s var(--ease) .5s; }
.hero__mark::after { right: 0; top: 0; width: 2px; height: 0; transition: height .8s var(--ease) .9s; }
.hero--cinema .hero__mark::before { width: 100%; }
.hero--cinema .hero__mark::after { height: 100%; }

.hero__scroll { position: absolute; left: 50%; bottom: var(--space-4); width: 1px; height: 52px; overflow: hidden; background: rgba(246,242,234,.22); }
.hero__scroll::after { content: ""; position: absolute; inset: 0; background: var(--accent-lt); animation: fp-scroll 2.4s var(--ease) infinite; }
@keyframes fp-scroll { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll::after { animation: none; transform: none; } }
@media (max-width: 700px) { .hero__mark { display: none; } .hero__scroll { display: none; } }
.hero__plate .eyebrow { color: var(--accent-lt); }
.hero__plate h1 { color: var(--on-dark); }
/* ⚠ La misura di lettura sta sul PARAGRAFO, mai sul contenitore del display. */
.hero__lead { margin-top: var(--space-4); color: var(--on-dark-muted); font-size: var(--text-md); max-width: var(--hero-lead-w, 54ch); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
/* Testata senza fotografia (fallback design-only: nessuna foto hero-grade ⇒ nessuna foto finta). */
.hero--design .hero__body { padding-top: var(--section-y); min-height: 0; }
.hero--design .hero__plate { max-width: var(--hero-plate-w, 52rem); margin-top: 0; }

/* ===========================================================================
   Lo Studio (featured) — testo in colonna + fotografia verticale affiancata
   =========================================================================== */
.studio__grid {
  display: grid; gap: clamp(var(--space-6), 4vw, var(--space-8));
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center;
}
.studio__body p + p { margin-top: var(--space-4); }
.studio__fig { position: relative; }
.studio__fig img { width: 100%; aspect-ratio: var(--fig-ratio); object-fit: cover; object-position: var(--fig-object-pos); }
/* Filetto d'ocra che aggancia la foto alla colonna di testo: non è testo, quindi l'ocra piena è legittima. */
.studio__fig::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-5)); top: var(--space-6);
  bottom: var(--space-6); width: 3px; background: var(--accent);
}
@media (max-width: 860px) {
  .studio__grid { grid-template-columns: 1fr; }
  .studio__fig img { aspect-ratio: 4 / 3; }
  .studio__fig::before { display: none; }
}

/* ===========================================================================
   Aree di attività — IL blocco firma della categoria:
   colonna fotografica che sborda dal bordo + pannello chiaro che la scavalca con la griglia a icone
   =========================================================================== */
.areas { background: var(--surface); }
.areas__grid { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); align-items: stretch; }
.areas__fig { position: relative; }
/* La colonna esce dal contenitore fino al bordo sinistro della pagina — e si ferma LÌ.
   ⚠ Non si usa l'idioma `calc(50% - 50vw)`: quel 50% si risolve sul contenitore dell'elemento, che qui è
   la CELLA di griglia (480px), non il container (1200px) ⇒ il margine risultava il doppio del dovuto e la
   foto partiva a −360, buttando fuori schermo 360px di immagine. Lo screenshot non lo mostra (il bordo
   sinistro resta pieno in entrambi i casi): lo dice solo la misura.
   Lo scarto giusto è la distanza fra il bordo pagina e il contenitore, cioè esattamente ciò che
   `.container` lascia ai lati: `max(gutter, (100vw - container)/2)`. */
.areas__fig { margin-left: calc(-1 * var(--bleed)); }
/* ⚠ La colonna e' ALTA: una fotografia stirata su tutta la sua altezza perde l'inquadratura (misurato
   84% su una panoramica). I due token vanno insieme — il rapporto da solo perderebbe contro height:100%
   — e i default riproducono esattamente il comportamento storico. */
.areas__fig img { width: 100%; height: var(--areas-fig-h, 100%); min-height: var(--areas-fig-min); object-fit: cover; aspect-ratio: var(--areas-fig-ratio); }
.areas__panel {
  position: relative; z-index: 1;
  margin-left: calc(-1 * var(--overlap)); margin-block: var(--space-8);
  background: var(--paper); padding: clamp(var(--space-6), 3.5vw, var(--space-8));
  border-top: 3px solid var(--accent);
}
.areas__intro { max-width: 60ch; }
/* ⚠ Elenco a UNA colonna, con l'icona di fianco al titolo: a due colonne dentro un pannello stretto le
   righe misuravano 27 caratteri — si spezzavano ogni tre parole, ed è la ragione per cui il testo
   sembrava «poco attraente». Una colonna piena porta la misura a ~55 e fa dell'elenco un blocco
   editoriale invece di una griglia compressa. */
.areas__list { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
.areas__list .area { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: start; }
.areas__list .area h3 { margin-top: 0; align-self: center; }
.areas__list .area .area__icon { grid-row: 1; align-self: center; }
.areas__list .area p { grid-column: 2; margin-top: var(--space-2); }
/* filetto sottile fra un ambito e l'altro: separa senza pesare */
.areas__list .area + .area { border-top: 1px solid var(--line); padding-top: var(--space-6); }
/* ⚠ `display:block` NON è decorativo: lo <span> è inline e un inline IGNORA width/height — l'icona
   restava 0×0 con la maschera perfettamente risolta (misurato nel DOM, invisibile nello screenshot). */
.area__icon {
  display: block; width: 30px; height: 30px; background: var(--accent-ink);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
/* ⚠ Le maschere vivono QUI, nel CSS del verticale: `url("../assets/…")` si risolve rispetto al FOGLIO.
   In uno style inline dentro il post_content NON risolverebbe (il rewrite tocca solo i .php del tema, e
   nel DB il PHP non gira) e le icone resterebbero invisibili — difetto già pagato per intero.
   ⚠ Ogni icona appartiene al SUO ambito, e l'ambito lo sceglie il cliente: il nome arriva dall'IR
   (`items/<i>/icon`, leaf di copy gated dal catalogo del verticale), non dalla posizione nel pattern.
   Aggiungere un'area vuol dire aggiungere QUI la riga e il file: senza la regola la maschera resta
   vuota e l'icona sparisce senza errori. */
.area[data-icon="civile"]         { --icon: url("../assets/img/icons/civile.svg"); }
.area[data-icon="arbitrati"]      { --icon: url("../assets/img/icons/arbitrati.svg"); }
.area[data-icon="immobiliare"]    { --icon: url("../assets/img/icons/immobiliare.svg"); }
.area[data-icon="amministrativo"] { --icon: url("../assets/img/icons/amministrativo.svg"); }
.area[data-icon="penale"]         { --icon: url("../assets/img/icons/penale.svg"); }
.area[data-icon="ambiente"]       { --icon: url("../assets/img/icons/ambiente.svg"); }
.area[data-icon="famiglia"]       { --icon: url("../assets/img/icons/famiglia.svg"); }
.area[data-icon="sinistri"]       { --icon: url("../assets/img/icons/sinistri.svg"); }
.area[data-icon="crediti"]        { --icon: url("../assets/img/icons/crediti.svg"); }
.area[data-icon="contratti"]      { --icon: url("../assets/img/icons/contratti.svg"); }
/* Materie del diritto amministrativo: il vocabolario nasceva su uno studio generalista e non le copriva. */
.area[data-icon="appalti"]        { --icon: url("../assets/img/icons/appalti.svg"); }
.area[data-icon="urbanistica"]    { --icon: url("../assets/img/icons/urbanistica.svg"); }
.area[data-icon="edilizia"]       { --icon: url("../assets/img/icons/edilizia.svg"); }
.area[data-icon="beni-culturali"] { --icon: url("../assets/img/icons/beni-culturali.svg"); }
.area[data-icon="beni-pubblici"]  { --icon: url("../assets/img/icons/beni-pubblici.svg"); }
.area[data-icon="accesso-atti"]   { --icon: url("../assets/img/icons/accesso-atti.svg"); }
.area[data-icon="silenzio-pa"]    { --icon: url("../assets/img/icons/silenzio-pa.svg"); }
.area[data-icon="partenariato"]   { --icon: url("../assets/img/icons/partenariato.svg"); }
.area[data-icon="commercio"]      { --icon: url("../assets/img/icons/commercio.svg"); }
.area h3 { margin-top: var(--space-4); }
.area p { margin-top: var(--space-2); color: var(--ink-muted); }
/* Senza fotografia (demo, o progetto senza uno scatto adatto) il pannello prende tutta la riga invece di
   restare schiacciato in una colonna di destra accanto al vuoto. */
.areas__grid > .areas__panel:only-child { grid-column: 1 / -1; margin-left: 0; }
@media (max-width: 980px) {
  .areas__grid { grid-template-columns: 1fr; }
  .areas__fig { margin-left: 0; }
  .areas__fig img { min-height: 260px; aspect-ratio: 16 / 9; }
  .areas__panel { margin-left: 0; margin-top: calc(-1 * var(--overlap)); }
}
@media (max-width: 620px) { .areas__list .area { grid-template-columns: 26px minmax(0, 1fr); } }

/* Pagina Aree di attività: elenco disteso con una colonna fotografica che lo accompagna.
   ⚠ La foto NON è una banda panoramica: gli scatti di questo verticale sono verticali (ambienti), e un
   taglio panoramico li decapita. Resta nel suo formato nativo e diventa una colonna che segue la lettura. */
/* ⚠ La colonna fotografica finiva PRIMA del testo: quattro scatti a fianco di sei ambiti lasciano
   scoperta l'ultima parte della lettura, ed e' il vuoto che l'owner ha segnalato. Larghezza e passo
   sono ora token — i default riproducono esattamente la misura storica — cosi' un progetto puo'
   allargare la colonna (immagini piu' grandi) e stringere il passo (la colonna arriva in fondo). */
.areas-page__cols { display: grid; grid-template-columns: var(--areas-page-cols, minmax(0, 0.34fr) minmax(0, 0.66fr)); gap: clamp(var(--space-6), 4vw, var(--space-8)); align-items: start; }
/* La colonna porta TRE ambienti distribuiti lungo la lettura: con un solo scatto la pagina restava
   spoglia per due terzi della sua altezza. Il passo è calcolato sull'elenco a fianco, così ogni foto
   accompagna un gruppo di ambiti invece di ammucchiarsi in cima. */
.areas-page__gallery { display: grid; gap: var(--areas-page-gap, clamp(var(--space-8), 9vw, var(--space-10))); }
/* ⚠ Le tre foto della colonna sono ALLINEATE e identiche: sfalsare la mediana con un margine negativo la
   faceva sporgere di 32px e la rendeva larga 32 in più — a colpo d'occhio sembrava semplicemente «più
   grande», che è come l'ha vista il cliente. In una colonna verticale lo sfalsamento non legge come ritmo,
   legge come errore di allineamento. */
.areas-page__fig img { width: 100%; aspect-ratio: var(--areas-page-fig-ratio, var(--fig-ratio)); object-fit: cover; border-radius: var(--radius-lg); }
/* Le fotografie possono essere dichiarate NON ingrandibili: sono illustrazioni, non una galleria.
   Si spegne il GESTO (pointer-events) e il cursore torna neutro. ⚠ Il CSS non toglie il link dal
   percorso di tabulazione: quello lo fa `tabindex` nel markup, gestito a parte. */
a.zoom { pointer-events: var(--fig-zoom-pe, auto); cursor: var(--fig-zoom-cursor, zoom-in); }
@media (max-width: 900px) {
  .areas-page__cols { grid-template-columns: 1fr; }
  .areas-page__gallery { grid-template-columns: repeat(2, 1fr); gap: var(--tile-gap); }
  .areas-page__gallery > :first-child { grid-column: 1 / -1; }
  .areas-page__fig img { aspect-ratio: 4 / 3; }
}
/* Griglia delle aree distesa: una colonna larga, testo lungo leggibile. */
.areas-page { display: grid; gap: var(--space-7); }
.area-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-5);
  padding-bottom: var(--space-7); border-bottom: 1px solid var(--line);
}
.area-row:last-child { border-bottom: 0; padding-bottom: 0; }
.area-row p { margin-top: var(--space-3); color: var(--ink-muted); max-width: 72ch; }
@media (max-width: 620px) { .area-row { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ===========================================================================
   La storia — linea del tempo (innesto dal secondo template della categoria)
   =========================================================================== */
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-5), 3vw, var(--space-7)); margin-top: var(--space-8); }
.tl-step { position: relative; padding-top: var(--space-7); }
/* La linea che lega i passi: si spegne quando la griglia va a una colonna. */
.tl-step::before { content: ""; position: absolute; left: 0; right: calc(-1 * clamp(var(--space-5), 3vw, var(--space-7))); top: 7px; border-top: 1px solid var(--line); }
.tl-step:last-child::before { right: 0; }
/* Il marcatore è un QUADRATO, non un bollo: il registro non arrotonda. */
.tl-step::after { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; background: var(--accent); }
.tl-step h3 { color: var(--ink); }
.tl-step p { margin-top: var(--space-3); color: var(--ink-muted); }
@media (max-width: 800px) {
  .timeline { grid-template-columns: 1fr; }
  .tl-step::before { display: none; }
}

/* ===========================================================================
   Come lavoriamo (trust) — banda scura con l'elenco dei fatti
   =========================================================================== */
.worklike { background: var(--ink); color: var(--on-dark); }
.worklike .eyebrow { color: var(--accent-lt); }
.worklike h2 { color: var(--on-dark); }
.worklike__lead { color: var(--on-dark-muted); font-size: var(--text-md); max-width: 60ch; margin-top: var(--space-4); }
.worklike__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); margin-top: var(--space-7); }
.worklike__item {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--space-4); align-items: start;
  color: var(--on-dark-muted); padding-top: var(--space-4); border-top: 1px solid rgba(246,242,234,.16);
}
.worklike__item::before { content: ""; width: 10px; height: 10px; margin-top: .55em; background: var(--accent-lt); }
@media (max-width: 760px) { .worklike__grid { grid-template-columns: 1fr; } }

/* ===========================================================================
   Fascia contatti (contact_band) — blocco pieno in cotto
   =========================================================================== */
.cta-band { background: var(--brand); color: var(--on-dark); padding-block: var(--section-y); }
.cta-band .eyebrow { color: var(--accent-lt); }
.cta-band h2 { color: var(--on-dark); }
.cta-band__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); align-items: center; }
.cta-band__lead { color: var(--on-dark-muted); font-size: var(--text-md); margin-top: var(--space-4); max-width: 56ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 820px) { .cta-band__row { grid-template-columns: 1fr; } }

/* ===========================================================================
   Testata delle pagine interne — COMPATTA (l'h1 non usa la scala della testata)
   =========================================================================== */
.page-head { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: var(--space-7) var(--space-6); }
.page-head h1 { font-size: var(--text-xl); }
.page-head__lead { color: var(--ink-muted); font-size: var(--text-md); margin-top: var(--space-4); max-width: 62ch; }

/* ===========================================================================
   Pagina Contatti — due colonne: modulo a sinistra, recapiti in scheda chiara a destra
   =========================================================================== */
.contact-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(var(--space-6), 4vw, var(--space-8)); align-items: start; }
.contact-form { display: grid; gap: var(--space-4); }
.contact-form h2 { font-size: var(--text-lg); }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--field-radius); padding: var(--space-3);
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-muted); }
.consent a { color: var(--accent-ink); text-decoration: underline; }
.form-note { font-size: var(--text-sm); color: var(--ink-muted); }
.contact-info { background: var(--surface); padding: clamp(var(--space-5), 3vw, var(--space-7)); border-top: 3px solid var(--accent); }
.contact-info h2 { font-size: var(--text-lg); }
.contact-info dl { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.contact-info dt { font-size: var(--text-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.contact-info dd { margin: var(--space-1) 0 0; color: var(--ink); }
.contact-info a:hover { color: var(--accent-ink); }
.hours { margin-top: var(--space-1); }
/* ⚠ L'elenco orari è CONDIVISO fra la scheda contatti (fondo chiaro) e il footer (fondo cotto profondo):
   non fissa un colore, lo EREDITA dal contesto. Fissarlo su --ink lo rendeva illeggibile nel footer
   (1,07:1, misurato) — un componente condiviso nasce chiaro, ed è così che sparisce sullo scuro. */
.hours li { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: 2px; }
.map-link { display: inline-block; margin-top: var(--space-5); font-size: var(--text-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
@media (max-width: 860px) { .contact-cols { grid-template-columns: 1fr; } .field--row { grid-template-columns: 1fr; } }

/* Prosa delle pagine legali/testuali */
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-5); }
.prose p, .prose ul { margin-top: var(--space-4); max-width: 72ch; color: var(--ink-muted); }
.prose ul { list-style: disc; padding-left: 1.2rem; }
.prose li { margin-top: var(--space-2); }
.prose a { color: var(--accent-ink); text-decoration: underline; }

/* ===========================================================================
   Piè di pagina
   =========================================================================== */
.site-footer { background: var(--brand-dark); color: var(--on-dark-muted); padding-block: var(--space-8) var(--space-6); }
.site-footer h2, .site-footer h3 { color: var(--on-dark); font-size: var(--text-lg); }
.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: var(--accent-lt); }
.site-footer__grid { display: grid; grid-template-columns: var(--footer-cols, 1.3fr 1fr 1fr); gap: clamp(var(--space-6), 4vw, var(--space-8)); }
/* ⚠ Le tracce sono TRE ma le colonne possono essere due: la colonna degli orari sparisce, con il suo
   markup, per uno studio che non li dichiara. Senza questa regola resterebbe una traccia vuota da 329px
   sulla destra — un buco che si vede, non un dettaglio (misurato: 427/329/329 con due soli figli). */
.site-footer__grid:has(> :nth-child(2):last-child) { grid-template-columns: var(--footer-cols-2, 1.3fr 1fr); }
.site-footer__col h3 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-lt); }
.site-footer__col ul { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.site-footer__col address { font-style: normal; margin-top: var(--space-4); display: grid; gap: var(--space-1); }
.site-footer__legal {
  margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid rgba(246,242,234,.16);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  font-size: var(--text-sm);
}
/* ⚠ `justify-content: space-between` NON centra l'elemento mediano: con tre celle 1fr/auto/1fr sì. */
.site-footer__legal > :nth-child(2) { justify-self: center; }
.site-footer__legal > :last-child { justify-self: end; }
.powered { display: inline-flex; align-items: center; gap: var(--space-2); }
.powered img { width: 20px; height: 20px; }
@media (max-width: 820px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__legal { grid-template-columns: 1fr; text-align: center; }
  .site-footer__legal > :nth-child(2), .site-footer__legal > :last-child { justify-self: center; }
}

/* ===========================================================================
   Barra CTA fissa (solo mobile)
   =========================================================================== */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; background: var(--brand); border-top: 1px solid var(--brand-mid);
}
.cta-bar__row { display: grid; grid-template-columns: 1fr 1fr; }
.cta-bar a {
  display: flex; align-items: center; justify-content: center; min-height: 56px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark);
}
.cta-bar a + a { border-left: 1px solid var(--brand-mid); }
.cta-bar a:hover { background: var(--brand-dark); }
@media (max-width: 899.98px) {
  .cta-bar { display: block; }
  body { padding-bottom: 56px; }
}

/* ===========================================================================
   Lightbox (reveal.js la crea NASCOSTA e la apre con .is-open)
   ⚠ Senza lo stato nascosto l'overlay resta sempre visibile e INTERCETTA OGNI CLICK: il sito sembra
   funzionare al crawl («tutte 200») ed è inutilizzabile. Difetto già pagato, trovato da un cliente.
   =========================================================================== */
.fp-lb {
  position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(20,15,12,.94); padding: clamp(var(--space-5), 5vw, var(--space-8));
}
.fp-lb.is-open { display: flex; }
.fp-lb__img { max-width: min(94vw, 1500px); max-height: 88vh; width: auto; height: auto; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
/* La X è DISEGNATA (due barre incrociate): il glifo × a questa misura è sottile e mal centrato. Il testo
   del bottone sparisce ma l'aria-label resta, ed è quello che lo nomina. */
.fp-lb__x {
  position: absolute; top: clamp(12px, 2.2vw, 28px); right: clamp(12px, 2.2vw, 28px);
  width: 48px; height: 48px; padding: 0; font-size: 0; line-height: 0; cursor: pointer;
  color: var(--on-dark); background: rgba(246,242,234,.10); border: 1px solid rgba(246,242,234,.28);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fp-lb__x::before, .fp-lb__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 19px; height: 1.5px; background: currentColor; }
.fp-lb__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.fp-lb__x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.fp-lb__x:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); transform: rotate(90deg); }
.fp-lb__x:focus-visible { outline: 2px solid var(--accent-lt); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fp-lb__x { transition: none; } .fp-lb__x:hover { transform: none; } }

/* Foto apribili: il cursore dichiara l'affordance. */
a.zoom { display: block; cursor: var(--fig-zoom-cursor, zoom-in); }
a.zoom img { transition: transform var(--dur) var(--ease); }
a.zoom:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { a.zoom img, a.zoom:hover img { transition: none; transform: none; } }

/* ===========================================================================
   «Linee che appaiono» — il dispositivo di dinamismo chiesto dall'owner.
   Un filetto non è un ornamento fermo: si DISEGNA quando la sua sezione entra in scena, o sotto il
   puntatore. Tutto in `transform: scaleX`, mai in opacity — un elemento che sfuma trascina il testo
   vicino sotto la soglia AA e può impedire alle immagini che contiene di scaricarsi.
   ⚠ Fail-visible: senza JS la classe `.is-visible` non arriva mai, quindi il filetto DEVE partire
   disegnato e ridursi solo quando il tema è governato da reveal.js (`html.js`).
   =========================================================================== */
.js .reveal .rule,
.js .reveal.rule { transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease) .15s; }
.js .reveal.is-visible .rule,
.js .reveal.rule.is-visible { transform: scaleX(1); }
.rule--center { transform-origin: center; }

/* Filetto di separazione delle aree: si disegna da sinistra quando la riga entra. */
.area-row { border-bottom: 0; position: relative; }
.area-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line);
  transform-origin: left center; transition: transform 1s var(--ease);
}
.js .area-row.reveal::after { transform: scaleX(0); }
.js .area-row.reveal.is-visible::after { transform: scaleX(1); }
.area-row:last-child::after { display: none; }

/* Linea della cronologia: si allunga verso il passo successivo. */
.js .tl-step.reveal::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease) .2s; }
.js .tl-step.reveal.is-visible::before { transform: scaleX(1); }

/* Sottolineature che crescono sotto il puntatore: nav, link del footer, link della scheda contatti. */
.site-header .site-nav .wp-block-navigation-item__content { position: relative; }
.site-header .site-nav .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center; transition: transform .34s var(--ease);
}
.site-header .site-nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }

.site-footer__col li a, .contact-info a, .prose a, .topbar a { position: relative; }
.site-footer__col li a::after, .contact-info a::after, .topbar a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform .34s var(--ease);
}
.site-footer__col li a:hover::after, .contact-info a:hover::after, .topbar a:hover::after { transform: scaleX(1); }

/* Titolo di colonna del footer: filetto che si disegna all'ingresso della banda. */
.site-footer__col h3 { position: relative; padding-bottom: var(--space-3); }
.site-footer__col h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: var(--accent);
}

/* ===========================================================================
   Ritmo verticale per RUOLO della banda — non un solo passo ripetuto.
   Una pagina che respira alterna gradi diversi: l'attacco dopo la testata è ampio, la banda scura è più
   serrata (il colore pesa già), la chiamata all'azione è compatta perché deve suonare come una battuta.
   =========================================================================== */
.section--studio { padding-block: calc(var(--section-y) * 1.45) calc(var(--section-y) * 1.1); }
.section--storia { padding-block: calc(var(--section-y) * 1.2); }
.worklike        { padding-block: calc(var(--section-y) * 0.88); }
.cta-band        { padding-block: calc(var(--section-y) * 0.72); }
.areas__panel    { margin-block: calc(var(--space-8) * 1.25); }

/* ===========================================================================
   Sovrapposizioni: i piani si scavalcano invece di stare in fila.
   ⚠ Restano DENTRO la propria banda: `.section` porta `overflow-x: clip`, e quando un asse è `clip`
   l'altro dichiarato `visible` diventa `clip` a sua volta — un elemento che sporgesse verticalmente
   verrebbe tagliato, non mostrato.
   =========================================================================== */
@media (min-width: 861px) {
  /* la fotografia morde la colonna di testo e sfora sul lato esterno: la coppia non è più due rettangoli
     affiancati ma due piani a quote diverse */
  .studio__fig { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--gutter)); }
  .studio__grid { align-items: center; }
  /* la linea del tempo risale sotto il proprio testo introduttivo */
  .timeline { margin-top: calc(var(--space-8) - var(--space-4)); }
  /* la scheda dei recapiti si alza rispetto al modulo */
  .contact-info { margin-top: calc(-1 * var(--space-6)); }
  /* i fatti della banda scura sfalsano di colonna */
  /* ⚠ In una griglia a due colonne lo sfalsamento non legge come ritmo: legge come errore di
     allineamento — la stessa lezione gia' pagata sulla colonna fotografica. Ora e' una leva. */
  .worklike__grid > :nth-child(even) { margin-top: var(--worklike-offset); }
}
@media (min-width: 981px) {
  /* la colonna fotografica della pagina Aree sfora anche sopra, agganciandosi alla testata di pagina */
  .areas-page__fig { margin-top: calc(-1 * var(--space-7)); }
}

/* ===========================================================================
   Reattività al puntatore: ogni superficie viva risponde, con misura.
   =========================================================================== */
.area, .tl-step, .area-row, .worklike__item, .site-footer__col li, .contact-info dd, .hours li {
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.area:hover, .area-row:hover { transform: translateX(4px); }
.area:hover .area__icon, .area-row:hover .area__icon { background: var(--brand); }
.area__icon { transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.area:hover .area__icon { transform: scale(1.08); }
.tl-step:hover::after { background: var(--brand); }
.tl-step::after { transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tl-step:hover::after { transform: rotate(45deg); }
.worklike__item:hover { color: var(--on-dark); }
.worklike__item::before { transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.worklike__item:hover::before { background: var(--on-dark); transform: rotate(45deg); }
.btn { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn:hover { transform: translateY(-2px); }
.studio__fig img, .areas__fig img, .areas-page__fig img { transition: transform .9s var(--ease); }
.studio__fig:hover img, .areas-page__fig:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .area:hover, .area-row:hover, .btn:hover, .tl-step:hover::after, .worklike__item:hover::before,
  .studio__fig:hover img, .areas-page__fig:hover img { transform: none; }
}

/* Seconda staffa, in basso a DESTRA: con quella in alto incornicia la composizione dal lato libero.
   ⚠ In basso a sinistra finiva sotto la targa, cioè invisibile — un segno va collocato dove c'è spazio,
   e lo si scopre guardando, non deducendolo. */
.hero__mark--bl { top: auto; bottom: var(--space-8); }
.hero__mark--bl::before { top: auto; bottom: 0; transition-delay: .8s; }
.hero__mark--bl::after { top: auto; bottom: 0; transition-delay: 1.2s; }

/* La targa tocca il bordo della pagina: nella categoria il blocco pieno non sta educatamente dentro la
   colonna, la sfonda. Stesso calcolo del bordo usato per la colonna fotografica delle aree. */
@media (min-width: 861px) {
  /* ⚠ La targa arriva a filo pagina recuperando `--bleed` col margine negativo e ricompensandolo col
     padding — e per questo la sua LARGHEZZA MASSIMA deve crescere della stessa quantità. Senza, il padding
     (680px a 2560, 972 a 3000) divora una max-width fissa da 832 e il testo finisce in una colonna da 8px,
     una parola per riga. Difetto vero, visto da un cliente su un monitor largo: la misura del CONTENUTO
     resta costante solo se la scatola cresce quanto il compenso. */
  .hero__plate { max-width: var(--hero-plate-w, 52rem);
    margin-left: calc(-1 * var(--hero-plate-bleed, var(--bleed)));
    padding-left: calc(var(--hero-plate-pad-l, var(--bleed)) + clamp(var(--space-6), 4vw, var(--space-8)));
    max-width: calc(var(--hero-plate-w, 48rem) + var(--hero-plate-pad-l, var(--bleed)) + 2 * clamp(var(--space-6), 4vw, var(--space-8)));
  }
  /* le fotografie prendono più scena: la colonna cresce a scapito del margine, non del testo */
  .studio__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
/* La parallasse ha bisogno di margine: la foto è più alta della cella e si muove dentro il proprio riquadro. */
.studio__fig, .areas__fig, .areas-page__fig { overflow: hidden; }
.studio__fig img, .areas-page__fig img { height: 112%; margin-top: -6%; will-change: transform; }
.areas__fig img { min-height: var(--areas-fig-min-wide); margin-top: var(--areas-fig-mt); will-change: transform; }

/* ===========================================================================
   La fotografia prende scena: gli ambienti di questo studio SONO l'argomento, non un contorno.
   Nessuno scatto cambia — cambia quanto spazio gli si dà.
   =========================================================================== */
@media (min-width: 861px) {
  .studio__fig img { aspect-ratio: var(--fig-ratio-wide); }
  .studio__grid { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
}
@media (min-width: 981px) {
  .areas__grid { grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr); }
  .areas__fig img { min-height: var(--areas-fig-min-xl); }
  .areas-page__cols { grid-template-columns: var(--areas-page-cols-xl, minmax(0, 0.4fr) minmax(0, 0.6fr)); }
  .areas-page__fig img { aspect-ratio: var(--areas-page-fig-ratio-xl, var(--fig-ratio-wide)); }
}

/* Reattività estesa: link, voci, figure e schede rispondono tutte, con la stessa misura. */
a, li, figure, article, dd, .btn, .card { transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.site-footer__col li:hover { transform: translateX(3px); }
.hours li:hover { color: var(--on-dark); }
.contact-info dd:hover { color: var(--accent-ink); }
.topbar__item:hover { color: var(--accent-lt); }
.map-link { transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), letter-spacing var(--dur) var(--ease); }
.map-link:hover { color: var(--brand); border-color: var(--brand); letter-spacing: .08em; }
.wordmark { transition: transform var(--dur) var(--ease); }
.wordmark:hover { transform: translateY(-1px); }
.wordmark__tag { transition: letter-spacing var(--dur) var(--ease); }
.wordmark:hover .wordmark__tag { letter-spacing: .3em; }
@media (prefers-reduced-motion: reduce) {
  .site-footer__col li:hover, .wordmark:hover { transform: none; }
  .map-link:hover, .wordmark:hover .wordmark__tag { letter-spacing: inherit; }
}

/* ===========================================================================
   Intestazione fusa con la testata cinematografica — SOLO sulla home.
   L'header non sta sopra la fotografia: ci galleggia dentro, e la testata guadagna la finestra intera.
   ⚠ Vincolato a `body:has(.hero--cinema)`: una testata trasparente o scura su una pagina che NON ha
   l'hero lascerebbe l'header illeggibile — difetto già pagato altrove su TUTTE le pagine interne.
   ⚠ Il fondo è SOLIDO, non trasparente: axe risolve il colore di fondo sulla catena degli antenati, non
   sui pixel, e un header trasparente con testo chiaro verrebbe misurato contro l'intonaco (e sarebbe
   davvero illeggibile se la foto non caricasse).
   =========================================================================== */
body:has(.hero--cinema) .site-header { background: var(--night); border-bottom-color: rgba(246,242,234,.14); }
body:has(.hero--cinema) .wordmark__name { color: var(--on-dark); }
body:has(.hero--cinema) .wordmark__tag { color: var(--accent-lt); }
body:has(.hero--cinema) .site-header .site-nav .wp-block-navigation-item__content,
body:has(.hero--cinema) .site-header .site-nav .wp-block-navigation-item__label { color: var(--on-dark); }
body:has(.hero--cinema) .site-header .site-nav .wp-block-navigation-item__content:hover,
body:has(.hero--cinema) .site-header .site-nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label { color: var(--accent-lt); }
body:has(.hero--cinema) .site-header .wp-block-navigation__responsive-container-open { color: var(--on-dark); }
body:has(.hero--cinema) .site-header__cta { background: var(--paper); color: var(--brand); }
body:has(.hero--cinema) .site-header__cta:hover { background: var(--accent-lt); color: var(--ink); }

/* La testata risale sotto il cromo e prende tutta la finestra: la fotografia parte dal bordo superiore.
   ⚠ DUE classi apposta: `.wp-block-post-content > *` azzera `margin-block` e a parità di specificità
   (0,1,0) vince, lasciando la testata inchiodata sotto l'header — misurato `margin-top: 0px` con la regola
   scritta e apparentemente applicata. È la regola 23: il CSS si verifica nel DOM calcolato. */
.hero.hero--cinema { margin-top: calc(-1 * var(--chrome)); min-height: 100vh; }
.hero--cinema .hero__media { height: 100vh; margin-bottom: -100vh; }
.hero--cinema .hero__body { min-height: var(--hero-min-h, 100vh); padding-top: calc(var(--chrome) + var(--space-6)); padding-bottom: var(--hero-pad-b, var(--space-8)); }

/* ⚠ L'altezza dell'intestazione dev'essere DETERMINISTICA: la testata cinematografica ci sottrae il token
   `--chrome`, e se il marchio va a capo l'header cresce (misurato: 103px a 900 e 88px a 390 invece di 81 e
   77) e la testata parte disallineata. Il marchio non va mai a capo, e nelle fasce strette rimpicciolisce. */
.wordmark__name { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1080px) { .wordmark__name { font-size: 0.98rem; } }
@media (max-width: 599.98px) { .wordmark__name { font-size: 0.94rem; } .wordmark__tag { font-size: 0.56rem; } }

/* ⚠ Le due larghezze che restavano disallineate erano DUE cause diverse, trovate misurando: a 900px il
   bottone della testata andava a capo (226×70 invece di 226×48) e a 600px si impilava la nav (284×61).
   Un'etichetta di comando non va MAI a capo, e la nav resta in riga anche nella fascia intermedia. */
.btn { white-space: nowrap; }
@media (min-width: 600px) and (max-width: 899.98px) {
  /* ⚠ La targhetta RESTA: nasconderla accorcia l'header di 13px e la testata cinematografica, che sottrae
     il token `--chrome`, finisce a -13. Bastano corpo ridotto e gap più stretto per tenere la nav in riga. */
  .wordmark__name { font-size: 0.9rem; }
  .site-header .site-nav .wp-block-navigation__container { gap: var(--space-3); flex-wrap: nowrap; }
}

/* ⚠ L'altezza dell'intestazione è FISSATA, non dedotta dalle metriche del font: la testata cinematografica
   sottrae il token `--chrome`, e bastava cambiare il corpo del marchio di 0,28rem perché l'header passasse
   da 65 a 63 e la testata finisse a -2. Con una riga di altezza dichiarata il cromo non si muove più,
   qualunque cosa succeda dentro. I tre valori corrispondono ai tre `--chrome`. */
/* ⚠ Con `box-sizing: border-box` il `min-height` COMPRENDE il padding: i valori sono quelli della scatola
   intera (header = riga + 1px di filetto), non del solo contenuto. Scriverne 33 non alzava nulla. */
.site-header__row { min-height: 80px; }
@media (min-width: 600px) and (max-width: 899.98px) { .site-header__row { min-height: 64px; } }
@media (max-width: 599.98px) { .site-header__row { min-height: 76px; } }

/* La banda contatti e il piè di pagina sono due cotti vicini e a fine pagina si fondevano in un'unica
   massa bruna: un filetto d'ocra li separa e chiude la composizione con lo stesso segno con cui si apre. */
.site-footer { border-top: 2px solid var(--accent); }

/* ⚠ La fascia di servizio deve entrare nella stessa pila del resto del cromo: la fotografia della testata
   è `position: sticky`, cioè POSIZIONATA, e un elemento posizionato dipinge sopra il contenuto in FLUSSO —
   la fascia c'era, col suo cotto (misurato 0→34, fondo rgb(94,42,28)), e la foto la copriva. Il risultato
   sembrava un'intestazione «tagliata», con una striscia di fotografia sopra. */
.topbar { position: relative; z-index: 50; }

/* ⚠ Nell'overlay del menu le voci partivano da left: 0, incollate al bordo dello schermo (misurato: tutte
   e quattro a 0, contenitore con padding 0). Il rientro va sul CONTENUTO della voce, non sul contenitore:
   così i filetti di separazione continuano a correre da bordo a bordo mentre il testo respira. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  padding-inline: var(--space-6);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  right: var(--space-6);
}

/* ⚠ Nota e consenso del modulo correvano a 91 caratteri per riga: oltre gli 80 l'occhio perde il capo
   della riga successiva. La misura di lettura si mette sul PARAGRAFO, non sul contenitore. */
.contact-form .consent, .contact-form .form-note { max-width: 62ch; }

/* Banda fotografica della pagina Contatti: la via su cui affaccia lo studio, subito sotto la testata di
   pagina. È l'unico scatto orizzontale del materiale, quindi l'unico che una banda panoramica non
   decapita — un ambiente verticale, tagliato così, perderebbe soffitto e pavimento.
   La pagina restava altrimenti un modulo accanto a una scheda, senza un'immagine del luogo. */
.contact-band { background: var(--paper); position: relative; z-index: 1; overflow: hidden; }
.contact-band__fig { position: relative; overflow: hidden; }
.contact-band__fig img { width: 100%; height: var(--contact-fig-h, clamp(230px, 34vw, 420px)); object-fit: cover; object-position: center 62%; will-change: transform; }

/* Cifre TABELLARI dove i numeri stanno incolonnati: gli orari del footer e della scheda contatti si
   leggono per confronto verticale, e con le cifre proporzionali le colonne ballano.
   Le cifre della fascia di servizio seguono la stessa regola. */
.hours li, .topbar__item, .contact-info dd { font-variant-numeric: tabular-nums; }
/* Cifre alla vecchia maniera nei titoli display: l'anno di fondazione dentro un serif sta meglio con le
   figure non allineate, che si comportano come lettere invece di sporgere. */
.tl-step h3, .hero__index b { font-variant-numeric: oldstyle-nums; }

/* ⚠ Un bottone in coda a un elenco rivelato non può stare attaccato al testo: gli elementi sopra entrano
   traslati di 24px e durante l'animazione GLI FINISCONO DENTRO (misurato: aria 0px a riposo, −24 durante
   la rivelazione). Lo stacco dev'essere maggiore della traslazione, e il bottone entra a sua volta invece
   di restare fermo mentre le cose gli scorrono sopra. */
.panel-more { margin-top: var(--space-8); }
/* Stesso stacco per ogni comando che chiude un blocco di prosa. */
.studio__body > p:last-child:has(.btn) { margin-top: var(--space-7); }

/* Il piè di pagina NON si anima all'ingresso: è la chiusura della lettura, e un movimento proprio lì
   aggiunge peso dove serve quiete. Restano gli stati di HOVER, che rispondono a un gesto voluto invece di
   arrivare da soli. La regola è di sbarramento: se un domani qualcuno rimettesse un `.reveal` qui dentro,
   resterebbe comunque fermo. */
.site-footer .reveal,
.site-footer .reveal.is-visible { transform: none !important; clip-path: none !important; transition: none !important; }
.site-footer .reveal--wipe::after { display: none; }

/* ===========================================================================
   Trama geometrica di riempimento — opt-in, spenta di default
   Le testate di pagina e le colonne alte lasciano larghe zone senza nulla di
   disegnato: un fondo colorato non e' contenuto, ed e' il buco che si vede.
   La trama e' fatta di gradienti ripetuti (zero richieste di rete, zero DOM),
   accesa solo dove il progetto la dichiara col token.
   =========================================================================== */
.page-head { position: relative; overflow: hidden; }
/* il contenuto sta SOPRA la trama: senza questo il decoro copre il testo e il contrasto crolla */
.page-head > * { position: relative; z-index: 1; }
.page-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: var(--trama-opacita, 0);
  background:
    repeating-linear-gradient(90deg, var(--trama-colore, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg,  var(--trama-colore, transparent) 0 1px, transparent 1px 26px);
  -webkit-mask-image: linear-gradient(105deg, transparent 60%, #000 78%, #000 100%);
          mask-image: linear-gradient(105deg, transparent 60%, #000 78%, #000 100%);
}
/* Un quarto di cerchio nell'angolo: chiude la diagonale che la trama apre. */
.page-head::before {
  content: ""; position: absolute; right: calc(-1 * var(--space-8)); top: calc(-1 * var(--space-8));
  width: clamp(180px, 26vw, 420px); aspect-ratio: 1; pointer-events: none; z-index: 0;
  opacity: var(--trama-opacita, 0);
  border: 1px solid var(--trama-colore, transparent); border-radius: 50%;
}
.areas__fig { position: relative; }
.areas__fig::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; pointer-events: none;
  z-index: -1; opacity: var(--trama-opacita, 0);
  background: repeating-linear-gradient(0deg, var(--trama-colore, transparent) 0 1px, transparent 1px 22px);
}

/* ===========================================================================
   Vetrina documenti (.cat-row) — il markup lo genera build-downloads.mjs, ma il
   verticale non l'aveva mai vestito: le schede restavano incolonnate a sinistra
   con meta' pagina vuota. Griglia centrata, copertina incorniciata, titolo e
   scaricamento sotto.
   =========================================================================== */
.cat-row {
  /* le schede RIEMPIONO la riga: centrarle a larghezza fissa lasciava fasce vuote ai lati
     (misurato: i buchi per pagina da 5,8 a 9,0). */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(var(--space-5), 3vw, var(--space-7));
  align-items: start;
  margin-top: var(--space-6);
}
.cat { display: grid; gap: var(--space-3); text-align: var(--cat-align, center); }
.cat__media {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* la copertina di un PDF e' quasi bianca: il rapporto fisso le da' una forma stabile e il taglio
   dall'alto mostra la parte che porta il marchio, non il fondo pagina. */
.cat__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: var(--paper); display: block; }
.cat__media:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cat__name { font-family: var(--font-display); font-size: var(--text-md); line-height: var(--lh-snug); }
.cat__dl {
  display: inline-flex; align-items: center; gap: var(--space-2); justify-self: center;
  font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent-ink); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.cat__dl:hover { color: var(--ink); }
/* il titolo di collezione si allinea alla griglia centrata invece di restare a filo sinistro */
.cat-row + h2, h2 + .cat-row { margin-top: var(--space-6); }

/* ===========================================================================
   STRATO ATMOSFERICO — sfumature e figure geometriche
   Tutto quanto segue è SPENTO per default (`none` / opacità 0): un progetto che
   non dichiara questi token rende esattamente come prima, byte per byte. Serve
   a dare profondità a una palette profonda senza ricadere sul colore piatto,
   che è ciò che fa sembrare «statico» un sito altrimenti corretto.
   ⚠ Zero JavaScript e zero richieste di rete: sono gradienti CSS, quindi non
   toccano né la CSP né la regola zero-live.
   =========================================================================== */

/* Bande profonde: un gradiente verticale al posto del colore pieno. Il fondo
   non è più una campitura ma una profondità, e l'attacco con la banda chiara
   successiva smette di essere una linea netta. */
.worklike,
.site-footer { background-image: var(--grad-deep, none); }

/* Bande chiare: velo appena percettibile dall'alto, così due sezioni chiare
   contigue si distinguono senza bisogno di un filetto. */
.section--tint,
.areas,
.page-head { background-image: var(--grad-soft, none); }

/* Bagliore: una sorgente di luce calda dietro il contenuto, che è ciò che
   impedisce all'indaco di leggersi come un rettangolo spento. Vive su uno
   pseudo-elemento per non litigare con lo sfondo di chi lo ospita. */
.section--studio, .section--storia, .areas, .cta-band, .contact-band { position: relative; }
.section--studio::before,
.section--storia::before,
.cta-band::before,
.contact-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: var(--grad-glow, none);
}
.section--studio > *, .section--storia > *, .cta-band > *, .contact-band > * { position: relative; z-index: 1; }

/* --- Figure geometriche (spente per default: `--deco-op: 0`) -----------------
   Il riferimento della categoria costruisce la fiducia con NUMERI e SEGNI, non
   con decorazione a caso: le aree di attività sono numerate, e gli angoli delle
   bande portano archi e filetti che chiudono la composizione. Qui i numerali
   sono `aria-hidden` per costruzione (contenuto generato dal CSS, che gli
   screen reader non annunciano) e non aggiungono nessuna promessa al testo. */
.areas__list .area, .worklike__item, .aree-body .area { position: relative; }
/* Numerale d'area: conta le voci senza toccare né il markup né la copy. */
.areas__list { counter-reset: area; }
.areas__list .area { counter-increment: area; }
.areas__list .area h3::after {
  content: counter(area, decimal-leading-zero);
  opacity: var(--deco-num-op, 0);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700;
  letter-spacing: var(--tracking-label); color: var(--accent);
  margin-left: var(--space-3); vertical-align: super;
}
/* Arco d'angolo: chiude la diagonale che la trama apre, sulle bande alte. */
.section--storia::after,
.areas::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  opacity: var(--deco-op, 0);
  right: calc(-1 * var(--space-9)); bottom: calc(-1 * var(--space-9));
  width: clamp(220px, 32vw, 560px); aspect-ratio: 1;
  border: 1px solid var(--deco-colore, currentColor); border-radius: 50%;
}
/* Filetto diagonale sottile: un segno che attraversa la banda profonda. */
.worklike::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: var(--deco-op, 0);
  /* Solo il bagliore d'angolo: la diagonale che passava per la banda e' stata tolta su richiesta. */
  background: radial-gradient(38% 60% at 92% 8%, var(--deco-colore, currentColor) 0%, transparent 70%);
}
.worklike { position: relative; overflow: hidden; }
.worklike > * { position: relative; z-index: 1; }
.section--storia, .areas { overflow: hidden; }

/* --- Gerarchia delle superfici -----------------------------------------------
   Una pagina interna aveva TRE superfici in tutto (testata, corpo, piè) e si
   leggeva come un unico blocco: è la ragione per cui il sito sembrava statico
   pur essendo corretto. Qui la testata di pagina, i pannelli e le schede
   prendono un trattamento PROPRIO, così la gerarchia si vede prima di leggere.
   Tutto gated: senza i token il rendering è quello di prima. */
.page-head { background-image: var(--grad-head, var(--grad-soft, none)); }
.contact-info { background-image: var(--grad-panel, none); }
.contact-form { background-image: var(--grad-form, none); }

/* Le schede d'area sull'elenco disteso diventano pannelli: riempiono la colonna
   di testo, che accanto a una colonna fotografica alta restava una lista nuda. */
.area-row {
  background: var(--area-row-bg, transparent);
  border-radius: var(--area-row-radius, 0);
  padding: var(--area-row-pad, 0 0 var(--space-7) 0);
}
.area-row:last-child { padding-bottom: var(--area-row-pad-last, 0); }

/* --- Spina della colonna fotografica ----------------------------------------
   ⚠ Quattro fotografie a fianco di SEI ambiti lasciano scoperta l'ultima parte
   della colonna, e il buco si vede. Aggiungere slot NON è una via: gli altri
   clienti del verticale dichiarano meno fotografie e erediterebbero handle che
   nei loro manifest non esistono, cioè immagini rotte su siti già pubblicati.
   La via è distribuire i quattro scatti su TUTTA la lettura e legarli con una
   spina verticale: il vuoto distribuito legge come ritmo, un buco unico in
   fondo legge come errore. La spina è un gradiente (nessun DOM in più) e si
   accende solo dove il progetto la dichiara. */
.areas-page__gallery { position: relative; }
.areas-page__gallery::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: var(--spina-x, 50%); top: 0; bottom: 0; width: 1px;
  opacity: var(--spina-op, 0);
  background: linear-gradient(180deg, transparent 0, var(--spina-colore, currentColor) 6%, var(--spina-colore, currentColor) 94%, transparent 100%);
}
.areas-page__fig { position: relative; z-index: 1; }
/* Un marcatore su ogni scatto: la spina diventa una sequenza, non una riga. */
.areas-page__fig::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: var(--spina-x, 50%); top: calc(-1 * var(--space-5));
  width: 9px; height: 9px; margin-left: -4px; border-radius: 50%;
  opacity: var(--spina-op, 0); background: var(--spina-colore, currentColor);
}

/* --- Flusso a ZIG-ZAG della pagina Aree --------------------------------------
   ⚠⚠ Il vuoto in fondo alla pagina Aree non si chiude distribuendo: quattro
   fotografie non possono accompagnare SEI blocchi di testo lunghi, e sotto
   l'ultima resta comunque una colonna nuda. Qui i due contenitori diventano
   `display: contents`, cosi' figure e schede entrano nella STESSA griglia e si
   alternano riga per riga; le schede senza fotografia occupano l'intera
   larghezza e leggono come una chiusura voluta invece che come un buco.
   Tutte le collocazioni hanno default `auto`: senza i token la pagina resta
   esattamente quella di prima, per tutti gli altri clienti del verticale. */
.areas-page__gallery { display: var(--aree-gallery-display, grid); }
.areas-page { display: var(--aree-list-display, grid); }
.areas-page__fig:nth-child(1) { grid-column: var(--f1c, auto); grid-row: var(--f1r, auto); }
.areas-page__fig:nth-child(2) { grid-column: var(--f2c, auto); grid-row: var(--f2r, auto); }
.areas-page__fig:nth-child(3) { grid-column: var(--f3c, auto); grid-row: var(--f3r, auto); }
.areas-page__fig:nth-child(4) { grid-column: var(--f4c, auto); grid-row: var(--f4r, auto); }
.area-row:nth-child(1) { grid-column: var(--a1c, auto); grid-row: var(--a1r, auto); }
.area-row:nth-child(2) { grid-column: var(--a2c, auto); grid-row: var(--a2r, auto); }
.area-row:nth-child(3) { grid-column: var(--a3c, auto); grid-row: var(--a3r, auto); }
.area-row:nth-child(4) { grid-column: var(--a4c, auto); grid-row: var(--a4r, auto); }
.area-row:nth-child(5) { grid-column: var(--a5c, auto); grid-row: var(--a5r, auto); }
.area-row:nth-child(6) { grid-column: var(--a6c, auto); grid-row: var(--a6r, auto); }
/* In zig-zag le righe si allineano al contenuto e la spina non serve piu'. */
.areas-page__cols { row-gap: var(--aree-row-gap, 0); align-items: var(--aree-align, start); }

/* Alternanza delle schede: in una sequenza a zig-zag due tinte che si alternano
   danno il passo della lettura — con una tinta sola le schede si sommano in un
   blocco unico, che e' esattamente cio' che fa sembrare «statica» una pagina
   lunga. Le schede a piena larghezza chiudono con la tinta piu' densa. */
.area-row:nth-child(even) { background: var(--area-row-bg-alt, var(--area-row-bg, transparent)); }
.area-row:nth-child(n+5) { background: var(--area-row-bg-last, var(--area-row-bg, transparent)); }
/* La banda profonda della home riceve una seconda sorgente di luce, cosi' il
   piede e la banda non condividono la stessa identica superficie. */
.cta-band { background-image: var(--grad-cta, none); }

/* Pannelli di sezione: la colonna di testo della home e le due voci degli
   incarichi erano testo nudo sul fondo di banda. Un pannello proprio le stacca
   dal fondo e da' alla home la stessa gerarchia che hanno le pagine interne. */
.studio__body { background: var(--studio-body-bg, transparent); border-radius: var(--studio-body-radius, 0); padding: var(--studio-body-pad, 0); }
.worklike__item, .storia__item { background: var(--item-bg, transparent); border-radius: var(--item-radius, 0); padding: var(--item-pad, 0); }

/* Corpo delle pagine interne: era la stessa identica superficie della carta, e
   con la testata di pagina sopra la pagina si leggeva come un foglio unico.
   Un velo appena percettibile la stacca senza aggiungere un filetto. */
/* ⚠⚠ `:not(.worklike)` NON e' cosmetico: `.section.worklike` matcha entrambe le regole e questa viene
   DOPO, quindi il velo chiaro copriva il fondo profondo della banda mentre il testo restava chiaro —
   titolo illeggibile. Due regole con la stessa specificita' le decide l'ORDINE, non l'intenzione. */
.section:not(.worklike) { background-image: var(--grad-body, none); }
.prose { background: var(--prose-bg, transparent); border-radius: var(--prose-radius, 0); padding: var(--prose-pad, 0); }

/* --- Intestazione trasparente sulla testata cinematografica -------------------
   Al primo caricamento l'header galleggia SULLA fotografia; appena si scorre
   prende corpo. `shrinkHeader()` commuta `.is-scrolled` con isteresi 80/30px,
   quindi la transizione non sfarfalla.
   ⚠ Le due ragioni per cui il fondo era SOLIDO restano valide e sono gestite,
   non ignorate: (1) se la fotografia non carica, dietro l'header c'e' comunque
   il fondo scuro di `.hero--cinema`, quindi il testo chiaro resta leggibile;
   (2) axe risolve il colore di fondo sulla CATENA DEGLI ANTENATI e non sui
   pixel, percio' sulla home il `body` dichiara lui stesso il fondo profondo —
   altrimenti misurerebbe testo chiaro contro la carta e segnalerebbe un
   contrasto che a schermo non esiste. Ogni sezione dipinge il proprio fondo,
   quindi il colore del body non si vede da nessuna parte.
   Default = comportamento storico (fondo pieno): gli altri clienti non cambiano. */
body:has(.hero--cinema) { background-color: var(--body-bg-hero, var(--paper)); }
body:has(.hero--cinema) .site-header {
  background: var(--header-bg-top, var(--night));
  border-bottom-color: var(--header-border-top, rgba(246,242,234,.14));
  transition: background var(--header-dur, var(--dur)) var(--ease), border-bottom-color var(--header-dur, var(--dur)) var(--ease);
}
body:has(.hero--cinema) .site-header.is-scrolled {
  background: var(--header-bg-scrolled, var(--night));
  border-bottom-color: var(--header-border-scrolled, rgba(246,242,234,.14));
}
/* La fascia di servizio non e' sticky: scorre via e si vede solo in cima, dove
   deve lasciar passare la fotografia insieme all'header. */
body:has(.hero--cinema) .topbar { background: var(--topbar-bg-top, var(--brand)); }

/* --- Le tre voci degli incarichi ---------------------------------------------
   ⚠ Erano testo NUDO su una banda chiara mentre tutto il resto del sito e' a
   pannelli: e' la ragione per cui la banda «si legge poco e scosta dal resto».
   La classe e' `.tl-step` (linea del tempo), non `.storia__item`: vestire il
   nome sbagliato non produce alcun errore, solo una regola che non si applica. */
.tl-step {
  background: var(--tl-bg, transparent);
  border-radius: var(--tl-radius, 0);
  padding: var(--tl-pad, var(--space-7) 0 0 0);
  border: var(--tl-border, 0 solid transparent);
}
/* ⚠ Marcatore e filetto sono posizionati in ASSOLUTO rispetto alla voce: quando la voce diventa una
   scheda con padding, restano dov'erano e finiscono SOPRA il titolo. Devono muoversi insieme al padding,
   e il filetto deve fermarsi dentro la scheda invece di sborda re in quella accanto — che fuori da una
   scheda era giusto (legava le tre voci) e dentro legge come un errore di allineamento. */
.tl-step::after { left: var(--tl-marker-x, 0); top: var(--tl-marker-y, 0); }
.tl-step::before { left: var(--tl-marker-x, 0); top: var(--tl-rule-y, 7px); right: var(--tl-rule-right, calc(-1 * clamp(var(--space-5), 3vw, var(--space-7)))); }
.tl-step:last-child::before { right: var(--tl-rule-right-last, 0); }