/* 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: flex; 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. */
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(26,19,15,.58) 0%, rgba(26,19,15,.12) 34%, rgba(26,19,15,.22) 62%, var(--scrim-deep) 100%),
    radial-gradient(120% 80% at 18% 78%, rgba(26,19,15,.42) 0%, rgba(26,19,15,0) 62%);
}
.hero__body {
  position: relative; z-index: 1;
  min-height: calc(100vh - var(--chrome)); display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: var(--space-7) 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: flex; 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: 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 { 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: 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 { 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: 3 / 4; object-fit: cover; }
/* 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)); }
.areas__fig img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.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.
   ⚠ E ogni icona appartiene al SUO ambito: build-ir copia le `icon` PER SLOT dal template, quindi un
   progetto che elenchi le aree in un altro ordine se le ritrova tutte sull'ambito sbagliato. */
.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 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. */
.areas-page__cols { display: grid; grid-template-columns: 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: 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: 3 / 4; object-fit: cover; }
@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(--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: 1.3fr 1fr 1fr; gap: clamp(var(--space-6), 4vw, var(--space-8)); }
.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: 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 */
  .worklike__grid > :nth-child(even) { margin-top: var(--space-5); }
}
@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 {
    margin-left: calc(-1 * var(--bleed));
    padding-left: calc(var(--bleed) + clamp(var(--space-6), 4vw, var(--space-8)));
    max-width: calc(48rem + var(--bleed));
  }
  /* 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: 112%; margin-top: -6%; 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: 4 / 5; }
  .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: 118%; }
  .areas-page__cols { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); }
  .areas-page__fig img { aspect-ratio: 4 / 5; }
}

/* 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: 100vh; padding-top: calc(var(--chrome) + var(--space-6)); }

/* ⚠ 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: 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; }