/* =========================================================================
   CRESPI — HERO NUOVA (dal collaudo analysis/hero/impag.html) + TESTATA
   Vive DOPO styles.css e riusa le sue variabili condivise (--ink, --olive,
   --serif, --sans, --pad, --ease, --ivory, --maxw). Qui vivono SOLO le
   variabili nuove della hero e della testata: nessuna collisione di nomi.
   ========================================================================= */

:root{
  --foto:#D3D8DE;          /* fondale della foto delle spose = fondo hero */
  --ink-sf:#4F565C;        /* alias locale di --ink-soft (nome usato dal collaudo) */

  /* Geometria della fascia di nuvole — numeri APPROVATI, non si toccano.
     La spiegazione completa di ogni valore sta in analysis/hero/impag.html. */
  --banda:.78;             /* altezza della fascia, in frazione dell'altezza hero */
  --sotto:.30;             /* frazione della fascia che sporge SOTTO la giunzione */
  --heroH:clamp(560px,92vh,900px);
  --giu:64px;              /* di quanto le modelle scendono: aria per la testata */
  --nebbia-alta:#EEF1F4;
  --nebbia-bassa:#EDF1F4;  /* = --ivory (Cararra freddo): la nebbia porta la transizione di colore */

  --testataH:76px;         /* ingombro della barra fissa: pilota gli scroll-margin */
}

/* Il fondo del body nella zona hero: mai bianco ai lati o in overscroll. */
body{background:var(--foto)}

/* =========================================================================
   LA SCENA — contenitore che NON ritaglia: la fascia di nuvole sporge sotto
   la giunzione hero/avorio. Il ritaglio vive solo su .hero__clip (la foto).
   ========================================================================= */
.scena{position:relative}

.hero{position:relative;height:var(--heroH);background:var(--foto);
  display:grid;align-items:center}

.hero__clip{position:absolute;inset:0;overflow:hidden;z-index:1}

/* GRADIENTE FREDDO — approvato dal committente il 28/08/2026 su questo esatto
   candidato (via gli avori: la scala resta nella famiglia del fondale D3D8DE).
   Replica cotta in js/intro.js (ritrattoHero): se cambia qui, cambiare la'. */
.hero__calda{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(155% 150% at -18% -26%,
    rgba(250,251,252,.92) 0%, rgba(247,249,251,.80) 14%, rgba(240,244,248,.62) 26%,
    rgba(233,239,245,.42) 37%, rgba(226,233,240,.24) 47%, rgba(219,226,233,.10) 56%,
    rgba(211,216,222,.03) 63%, rgba(211,216,222,0) 70%)}

/* La foto non ha bordi: si dissolve nel proprio stesso colore di fondale. */
.hero__cornice{position:absolute;z-index:2;right:0;bottom:calc(-1*var(--giu));width:min(72%,1180px);
  transform:translateX(4%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 calc(100% - var(--giu) - 210px),transparent calc(100% - var(--giu)));
          mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 calc(100% - var(--giu) - 210px),transparent calc(100% - var(--giu)))}
.hero__foto{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 100%)}

/* Velo CSS di garanzia: se WebGL non parte resta questa foschia ferma,
   e la sua ultima riga (--nebbia-bassa piena, #EDF1F4) azzera lo scalino
   sulla giunzione. */
.scena__velo{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  height:calc(var(--banda)*(1 - var(--sotto))*100%);
  background:linear-gradient(to top,
    var(--nebbia-bassa) 0%, rgba(245,242,237,.86) 9%, rgba(242,241,240,.52) 20%,
    rgba(240,241,243,.24) 32%, rgba(238,241,244,.08) 46%, rgba(238,241,244,0) 62%)}

/* Il canvas delle nuvole: sporge di --sotto della propria altezza sotto la giunzione. */
#nebbia{position:absolute;left:0;right:0;z-index:4;pointer-events:none;
  bottom:calc(-1*var(--banda)*var(--sotto)*100%);
  height:calc(var(--banda)*100%);display:block;width:100%}

.hero__testo{position:relative;z-index:5;padding-inline:var(--pad);max-width:1240px;
  margin-inline:auto;width:100%}
.hero__titolo{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,4.8vw,4.1rem);
  line-height:1.05;letter-spacing:-.01em;margin:1.05rem 0 1.25rem;max-width:16ch;
  text-wrap:balance}
.hero__lead{max-width:40ch;color:var(--ink-sf);font-size:1.02rem;line-height:1.7}
/* =========================================================================
   IL VETRO — una ricetta sola, tre superfici.
   Era copiata due volte (pastiglia dell'header in questo file, semaforo social
   in styles.css) e i bottoni della hero non la usavano affatto: erano rettangoli
   a spigolo vivo con un filetto che sul fondo vero misurava 1,0-1,8:1, cioe' un
   confine di comando invisibile. Da qui in poi la superficie di vetro e' UNA.
   ========================================================================= */
:root{
  --vetro-filtro: saturate(1.62) blur(20px);
  --vetro-velo: linear-gradient(177deg,
    rgba(255,255,255,.672) 0%,
    rgba(255,255,255,.576) 40%,
    rgba(255,255,255,.545) 70%,
    rgba(255,255,255,.622) 100%);
  --vetro-ombre:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 13px 20px -17px rgba(255,255,255,.90),
    inset 1px 0 0 rgba(255,255,255,.44),
    inset -1px 0 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(255,255,255,.52),
    inset 0 -17px 22px -21px rgba(23,26,28,.17),
    0 1px 1px rgba(23,26,28,.05),
    0 10px 24px -14px rgba(23,26,28,.20),
    0 26px 46px -30px rgba(23,26,28,.22);
  /* la forma dei comandi: la pastiglia e' la lingua dell'header, i bottoni la parlano */
  --raggio-comando: 999px;
}

.hero__cta{display:flex;gap:1rem;margin-top:2.2rem;flex-wrap:wrap}

/* I due bottoni della hero (dal collaudo; nome prefissato per non collidere
   con il .btn di styles.css). */
/* I DUE COMANDI DELLA HERO.
   Parlano la lingua dell'header: stessa forma (raggio 999px), stesso trattamento del
   testo (maiuscolo Jost, .15em di tracking come .testata__cta), e le due superfici del
   sito — inchiostro pieno per l'azione primaria, VETRO per la secondaria.
   Il vetro non e' decorazione: e' cio' che risolve alla radice il difetto del vecchio
   bottone "vuoto", il cui filetto rgba(23,26,28,.32) sul fondo vero misurava 1,0-1,8:1.
   Una superficie con un fondo proprio non dipende piu' da cosa le passa sotto. */
.hbtn{display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:1.05em 2.05em;border:0;border-radius:var(--raggio-comando);
  font-family:var(--sans);font-weight:400;
  font-size:clamp(.70rem,.665rem + .11vw,.76rem);letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease)}

/* primaria: inchiostro pieno, come la CTA dell'header */
.hbtn--pieno{background:var(--ink);color:#fff;
  box-shadow:0 1px 1px rgba(23,26,28,.06), 0 10px 24px -14px rgba(23,26,28,.34)}
/* NIENTE accento sull'hover del pieno (il vecchio oro misurava 3,9:1 col
   bianco): si scurisce e si solleva invece di cambiare tinta. */
.hbtn--pieno:hover{background:#0f1112;
  box-shadow:0 2px 3px rgba(23,26,28,.10), 0 16px 30px -14px rgba(23,26,28,.42);
  transform:translateY(-1px)}

/* secondaria: la stessa superficie di vetro della pastiglia e del semaforo */
.hbtn--vetro{color:var(--ink);
  -webkit-backdrop-filter:var(--vetro-filtro);
          backdrop-filter:var(--vetro-filtro);
  background:var(--vetro-velo);
  box-shadow:var(--vetro-ombre)}
.hbtn--vetro:hover{transform:translateY(-1px)}

/* la tastiera esisteva solo per il browser: nel sito non c'era un solo focus-visible */
.hbtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .hbtn,.hbtn:hover,.testata__cta,.testata__cta:hover{transition:none;transform:none}
}

/* La giunzione hero -> #collezioni (prima sezione dopo la hero): lo spazio
   riservato alla coda bassa della fascia (stessa formula del collaudo).
   Vale SOLO per .collezioni. Il fondo e' il Cararra freddo --ivory: e' il
   colore su cui nuvole (colBasso EDF1F4 in js/nebbia.js) e velo CSS
   atterrano — niente scalino, e l'alternanza chiaro/bianco del sito resta
   (collezioni Cararra, story bianco, negozio Cararra, ...). */
.collezioni{padding-top:calc(var(--banda)*var(--sotto)*var(--heroH)*0.62 + 2.5rem);
  background:var(--ivory)}

/* (La "guardia mobile provvisoria" che stava qui — banda/sotto/giu e la
   cornice a 118% sotto gli 860px — e' diventata la BASE COMPATTA e le
   quattro classi in fondo al file, tarate una per una.) */

/* HUD di sviluppo del canvas: nascosto di default, si mostra con ?hud=1. */
#hud{display:none;position:fixed;left:10px;bottom:10px;z-index:300;font:11px/1.5 ui-monospace,monospace;
  background:rgba(20,18,16,.82);color:#e8e4dc;padding:8px 11px;border-radius:6px;white-space:pre}

/* =========================================================================
   TESTATA — struttura "Tines": logo libero a sinistra, pastiglia centrale
   in vetro, a destra Contatti + bottone pieno. Barra FISSA e trasparente in
   cima; appena si scorre (soglia 40px con isteresi, in js/main.js) compare
   dietro tutti i gruppi la lastra avorio traslucida a tutta larghezza.
   ========================================================================= */
.testata{position:fixed;top:0;left:0;right:0;z-index:220}

/* La lastra: vetro smerigliato NEUTRO — blur + saturate + il MINIMO velo
   BIANCO (la diffusione del vetro, non una tinta) che tiene tutti i gruppi
   sopra 4.5:1 sul caso peggiore di tutto lo scorrimento (il blur da solo
   lascerebbe l'inchiostro a ~2:1). Valore misurato con la scansione ogni
   200px, pixel estremo per gruppo. Filo speculare (riga alta bianca) e
   ombra portata restano: sono cio' che fa leggere "vetro" sul chiaro. */
/* RIMISURATO con la STRADA B (02/09/2026, sezioni scure olive #4B4D39):
   sweep webkit a 390 e 1440, ogni 200px, con i .reveal FORZATI visibili
   (come li vede chi scorre) e due catture per posizione — gruppo visibile
   (inchiostro piu' scuro) e gruppo nascosto (lastra NUDA sotto la sua
   scatola). Gruppo vincolante: il burger a 390 (barre a inchiostro sulla
   lastra nuda; a 1440 il logo sul caso peggiore, la hero, fa 5,5:1 gia' a
   .46, e pastiglia/CTA hanno superfici proprie).
   - Sulle sezioni OLIVE (il caso nuovo) la lastra a .46 regge con margine:
     sumisura 5,07:1, contatti 4,84:1 a 390; 7,84:1 a 1440. L'olive e' piu'
     chiaro del Carbon (che a .46 faceva 4,59): da solo permetterebbe .44.
   - Il caso peggiore VERO della pagina pero' non e' una sezione scura: e'
     la foto della galleria del negozio (i completi scuri) sotto il burger,
     a 390 — un caso che la misura del 28/08 non vedeva perche' la galleria
     e' un .reveal (opacity 0 finche' non si scorre): .46 → 3,84:1 (SOTTO
     AA), .50 → 4,47, .54 → 5,11, .58 → 5,82. Il confine e' ~.502.
   Minimo che regge CON margine su tutto lo scorrimento: .52 (~4,8:1 sulla
   foto del negozio; olive 5,4+; hero a 1440 6,6). Si torna al .52 storico
   per una ragione diversa da quella per cui era stato messo. */
:root{--lastra-velo:.52}
.testata__lastra{position:absolute;inset:0;pointer-events:none;
  background:rgba(255,255,255,var(--lastra-velo));
  -webkit-backdrop-filter:saturate(1.5) blur(16px);
          backdrop-filter:saturate(1.5) blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
    0 1px 0 rgba(23,26,28,.07), 0 14px 34px -26px rgba(23,26,28,.35);
  opacity:0;transition:opacity .45s var(--ease)}
.testata.is-ferma .testata__lastra{opacity:1}

.testata__int{position:relative;max-width:1400px;margin-inline:auto;
  padding:.8rem clamp(1.15rem,3vw,2.2rem);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}

/* logo a sinistra, libero sul fondo */
.testata__logo{justify-self:start;display:inline-flex;position:relative;z-index:1}
.testata__logo img{height:50px;width:auto}

/* pastiglia centrale in vetro (ricetta della lastra da analysis/hero/h-header.html:
   blur+saturate, velo bianco, filo speculare, ombra portata doppia) */
.pastiglia{position:relative;display:flex;align-items:center;gap:.1rem;
  padding:.32rem .5rem;border-radius:999px;justify-self:center}
.pastiglia::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  -webkit-backdrop-filter:var(--vetro-filtro);
          backdrop-filter:var(--vetro-filtro);
  background:var(--vetro-velo);
  box-shadow:var(--vetro-ombre)}
.pastiglia a{position:relative;z-index:1;font-size:.69rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:400;color:var(--ink);
  padding:.66em 1.02em;border-radius:999px;white-space:nowrap;
  transition:background .35s var(--ease)}
.pastiglia a:hover{background:rgba(23,26,28,.07)}

/* gruppo destro */
.testata__dx{justify-self:end;display:flex;align-items:center;
  position:relative;z-index:1}
.testata__cta{display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;font-size:.70rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.98em 1.65em;border-radius:999px;white-space:nowrap;
  transition:background .35s var(--ease), transform .35s var(--ease)}
/* NIENTE accento sull'hover (il vecchio oro misurava 3,9:1 col bianco).
   Stesso gesto dei due bottoni della hero: si scurisce e si solleva. */
.testata__cta:hover{background:#0f1112;transform:translateY(-1px)}

/* il burger (stile in styles.css) vive nella colonna destra sotto 980px */
.testata .burger{justify-self:end}

@media (max-width:980px){
  .pastiglia,.testata__dx{display:none}
  .testata__int{grid-template-columns:1fr auto;padding-block:.6rem}
  .testata__logo img{height:44px}
}

/* Ancore sotto barra fissa: la sezione arriva SOTTO la testata, non dietro. */
#collezioni,#negozio,#sumisura,#qualita,#app,#contatti,#top{scroll-margin-top:calc(var(--testataH) + 12px)}

/* Le sezioni che prima ereditavano il bianco dal body (ora il body e' --foto
   per la zona hero): riprendono esplicitamente il loro fondo originale.
   (.collezioni ora e' avorio: vedi la giunzione qui sopra.) */
.story,.qualita{background:var(--bg)}

/* =========================================================================
   IL LOCKUP CON LO STACCO A GIORNO (approvato su titolo.html, riferimento
   "SAME Love"). Riga 1 "L'ABITO CHE RACCONTA" in Inter grassetto; riga 2
   "Il tuo giorno speciale" in Ballet OLIVE --olive (I maiuscola SOLO VISIVA:
   tspan + text-transform, il textContent resta "il" minuscolo perche' nella
   frase intera e' meta' frase). Dove lo script attraversa le maiuscole, e
   attorno alla testa della prima modella, le maiuscole sono RITAGLIATE con
   un canale vuoto in cui si vede il fondo VERO (foto + gradiente).

   Come e' costruito (il markup vive nell'h1.lk-h1 di index.html):
   - un unico h1 con dentro un SVG inline: <text> per le maiuscole e per lo
     script — il testo accessibile resta nel DOM, textContent in ordine;
   - le mask vivono nei <defs> DELLO STESSO svg dell'h1: i riferimenti a
     mask definite in un ALTRO svg si rompono su WebKit al primo layout
     (canale assente, script amputato sotto le maiuscole: il bug "seconda l
     a mezza altezza" — riprodotto e curato, vedi analysis/tipografia/
     lk2-probe-samesvg.html e lk2-probe-use.html);
   - mask maiuscole = rettangolo bianco + <use> che CLONA il testo vero
     dello script con stroke nero spesso 2k (il canale = k per lato) +
     silhouette VETTORIALE (un <path> liscio: corpo della modella sx fino
     al corpetto + testa della modella centrale, generatore
     analysis/tipografia/lk3-vettorializza.py) il cui canale e' lo STROKE
     nero 2k sul path stesso — gemello del canale delle lettere;
   - lo script NON ha mask: la sua coda (u 866) e la punta della "l" (u 916)
     restano sempre fuori dalla silhouette (u>=887) — e su WebKit un testo
     mascherato viene RITAGLIATO alla scatola em del chunk fuori-tspan;
   - la testa NON e' duplicata: attraverso il buco della mask si vede la
     testa VERA della foto sottostante (knockout-solo-maschera);
   - la silhouette nella mask la posiziona il JS (in fondo a index.html)
     misurando i rect veri di foto e svg;
   - textLength dello script = larghezza NATURALE misurata, applicato SOLO
     quando la misura combacia (mai al fallback Snell Roundhand).
   Banco di prova: ?k=1..4 (default 2) · ?peso=700|800 · ?sfs= · ?sx= ?stl=.
   ========================================================================= */
:root{ --lk-k2:4px; --lk-olive:var(--olive); --lk-carbone:var(--carbon); }

/* L'h1 e' agganciato alla SCENA (viewport), non alla colonna: il lockup e'
   interbloccato con la foto e deve scalare con lei. La formula del top lega
   il bordo alto delle maiuscole alla testa della modella per OGNI coppia
   larghezza/altezza: top = heroH + giu - 51.526vw mette il cap-top 18.7px
   (a 1440) sotto la cima dello chignon. A 1440x900: 828+64-742 = 150. */
.lk-h1{position:absolute;left:0;width:100%;margin:0;z-index:5;pointer-events:none;
  /* il max() e' la guardia per le finestre BASSE: li' la foto sale sotto la
     testata (comportamento preesistente della scena) e il titolo non la
     insegue oltre — resta leggibile sotto la barra; la mask e' comunque
     sincronizzata via JS, semplicemente il knockout non si attiva */
  top:max(calc(var(--testataH) + 10px), calc(var(--heroH) + var(--giu) - 51.526vw));
  transition:opacity .18s ease-out}
/* oltre 1638px la foto tocca min(72%,1180px)=1180 e smette di crescere:
   stessa condizione di aggancio, con la foto costante */
@media (min-width:1639px){
  .lk-h1{ top:max(calc(var(--testataH) + 10px), calc(var(--heroH) - 732px - 2.9653vw)) } }
.lk{display:block;width:100%;height:auto;overflow:visible}

.lk-su{font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-weight:var(--lk-peso,800);font-size:82px;text-transform:uppercase;
  fill:var(--lk-carbone)}
/* niente font-variation-settings: l'istanza servita E' gia' opsz 72 (statica),
   cosi' il disegno non dipende dal supporto alle variazioni del motore */
.lk-giu{font-family:"Ballet","Snell Roundhand",cursive;font-size:var(--lk-sfs,140px)}
.lk-giu--vis{fill:var(--lk-olive)}
/* la I maiuscola e' solo visiva: il testo nel DOM resta "il tuo giorno speciale" */
.lk-cap{text-transform:uppercase}
/* il canale nella mask: uno <use> clona il testo vero dello script — il
   colore del clone lo spegne la custom property (il fill del testo e'
   var(--lk-olive): sul clone la ridefiniamo nera), lo stroke nero 2k lo
   espande di k per lato. Un clone, non un duplicato: registrazione perfetta
   per costruzione, anche col fallback in scena, e niente testo in piu' nel
   DOM (textContent dell'h1 intatto, nessun problema di selezione/copia). */
.lk-giu--canale{--lk-olive:#000;stroke:#000;stroke-width:var(--lk-k2);
  stroke-linejoin:round;stroke-linecap:round}
/* la silhouette nella mask: path nero pieno + stroke nero (il canale della
   testa, 2k unita' utente: lo spessore lo scrive il JS insieme al transform,
   perche' dipende dalla scala foto->svg). Sotto: l'ancoraggio statico. */
.lk-sil{fill:#000;stroke:#000;stroke-linejoin:round;stroke-linecap:round}
/* FALLBACK SENZA JS (guadagno dichiarato): finche' vale il ramo agganciato
   del top (heroH+giu-51.526vw, cioe' 92vh >= 22px+51.526vw+8vh -> aspetto
   fino a ~17/10 e W fino a ~1564 con heroH al tetto dei 900px) foto e svg
   scalano INSIEME con la finestra e il rapporto in unita' utente e'
   COSTANTE: il canale-testa si ancora staticamente — translate/scale
   verificati identici al centesimo a 1200x900 e 1440x900 (lk3-banda.mjs /
   lk3-check1.mjs). Con JS attivo (html.lk-js) la regola si spegne e
   comanda l'attributo transform scritto dal JS. Fuori dal recinto (foto al
   tetto 1180px o finestre basse: ramo pinzato sotto la testata) il
   rapporto dipende dalla finestra: senza JS il path resta nascosto
   (transform="scale(0)" nel markup — lo stato di prima: canale-testa
   assente, nessun buco vagante). */
@media (min-width:861px) and (max-width:1560px) and (max-aspect-ratio:17/10){
  html:not(.lk-js) .lk-sil{transform:translate(840.54px,37.91px) scale(.47127);
    stroke-width:8.49px}
}

/* attesa font gestita: il JS aggiunge subito .lk-attesa e la toglie a
   fonts.ready (o dopo 900ms di guardia): niente balletto di fallback.
   Senza JS la classe non c'e' e il lockup resta visibile col fallback. */
.lk-attesa .lk-h1{opacity:0}

/* il blocco lead+CTA si aggancia alla STESSA formula del lockup. ALZATO il
   28/08/2026 ("adesso e' troppo in basso"): il riferimento non e' piu' la
   coda teorica dello script a 330u ma l'inchiostro VERO piu' basso degli
   svolazzi nelle colonne occupate dal lead (u 264, misurato sui pixel rossi:
   lo svolazzo tra "tuo" e "giorno"; 264/14.4 = 18.333vw) + 24px d'aria:
   a 1440 il lead sale da 504 a 438. Niente collisioni ai formati stretti,
   dove il titolo scende con la foto mentre un blocco centrato resterebbe
   fermo. Il combinatore ~ lega l'aggancio alla PRESENZA del lockup: nelle
   pagine di prova col markup vecchio (.hero__titolo dentro .hero__testo,
   es. tavolozza.html) il lead resta centrato com'era. */
.lk-h1 ~ .hero__testo{align-self:start;
  padding-top:max(calc(var(--testataH) + 10px + 18.333vw + 40px),
               calc(var(--heroH) + var(--giu) - 33.193vw + 40px))}
@media (min-width:1639px){
  .lk-h1 ~ .hero__testo{padding-top:max(calc(var(--testataH) + 10px + 18.333vw + 40px),
               calc(var(--heroH) - 692px + 15.368vw))} }

/* LA COLONNA A SINISTRA (28/08/2026, decisione del committente: "lo spazio
   di solo sfondo tra la fine delle spose e il bordo destro e' inferiore
   allo spazio a sinistra"). Il gruppo titolo+lead+CTA non e' piu' una
   colonna centrata: il lead si allinea all'inchiostro della L del lockup,
   che scala con l'svg -> padding-left in vw, non in px.
   MISURA del pareggio a 1440: S_dx (ultimo inchiostro delle modelle ->
   bordo destro) = 40px sul contenuto sorgente, ~51px percepito sotto le
   nuvole; S_sx (bordo -> inchiostro della L) = 45px = 3.125vw (45/14.4),
   dentro il 15% di entrambe le letture. Sotto i 1639px foto e svg scalano
   insieme in vw: il pareggio tiene da solo a 1280/1550/1680 (36-46px).
   Da 1800 il lockup scivola a x=70 (vedi il JS in index.html: la fine della
   parola non deve morire murata nella testa della modella) e la colonna lo
   segue: L a 75u = 5.2083vw. Il mobile (<=860) non e' toccato: le regole
   vivono nella media query desktop. */
@media (min-width:861px){
  .lk-h1 ~ .hero__testo{max-width:none;margin-inline:0;
    padding-left:3.958vw;padding-right:var(--pad)}
  /* "troppo largo... non voglio che vada sopra il velo della sposa":
     40ch -> 33ch (provati 30-34: a 33 il testo cade in quattro righe
     pulite). Il franco dal velo e' misurato: vedi analysis/tipografia/. */
  .hero__lead{max-width:33ch}
}
@media (min-width:1800px){
  .lk-h1 ~ .hero__testo{padding-left:6.042vw}
}

/* =========================================================================
   LE QUATTRO CLASSI (analysis/responsive/PIANO.md, 02/09/2026)
     phone-p  : (max-width:599px)
     tablet-p : (min-width:600px) and (max-width:1023px) and (orientation:portrait)
     tablet-l : (min-width:1000px) and (max-width:1366px) and (max-height:1024px)
     phone-l  : (max-height:500px) and (orientation:landscape)  — ULTIMA: precede
   Il desktop (oltre 1366, o oltre 1024 di altezza) resta com'e'. Prima
   delle classi c'e' la BASE COMPATTA: cio' che phone-p, tablet-p e phone-l
   condividono (lockup ricomposto sul viewBox mobile, cornice a 118%, nuvole
   per gli schermi bassi). Il JS in index.html usa la STESSA unione per
   scegliere il viewBox e spegnere il canale-testa: dove il testo non sta
   piu' accanto alla foto il knockout non ha senso.

   LA REGOLA CHE TIENE IN PIEDI L'INTRO. js/intro.js cuoce il ritratto
   d'atterraggio dai rect VERI (hero, clip, foto, velo) e da --giu, ma le
   ricette delle maschere e il modo in cui disegna la foto (stirata nel suo
   rect) sono FISSI. Quindi qui si cambia SOLO geometria: posizione e misura
   di .hero__cornice, --giu, --banda/--sotto, altezza della hero. Mai
   object-fit, mai maschere diverse, mai un fondo diverso dal body: la
   cucitura resterebbe sotto soglia solo per caso.
   E il bordo alto della foto (--fotoTop) e' una SOMMA DI COSTANTI (testata,
   inchiostro del lockup in vw, righe riservate al lead, CTA), non la misura
   del lead: cosi' il ritratto e' identico prima e dopo il caricamento dei
   font, e il testo non passa mai sui volti per costruzione. Le teste stanno
   nel primo terzo della foto (8-32% dell'altezza: misurato sulla griglia di
   hero-foto-sm), il divano bruno comincia al 38%.
   --heroH in svh (la barra di Safari) SOLO dentro @supports: un'unita'
   sconosciuta dentro una custom property non fallisce dove e' dichiarata
   ma dove e' usata, e height:var(--heroH) diventerebbe auto.
   ========================================================================= */

/* ---- BASE COMPATTA (unione delle tre classi mobili + la soglia storica 860) ----
   Il gruppo torna in cima (la foto sm occupa il fondo), lo script scende quasi
   tutto sotto le maiuscole ma la cresta continua a morderle: il canale script
   resta (riscalato a ~37%, la proporzione canale/altezza-maiuscole del
   desktop). La testa e il suo canale si ABBANDONANO (il JS scrive scale(0)):
   a queste misure la testa e' ~37px, il ritaglio diventerebbe un francobollo. */
@media (max-width:860px),
       (min-width:600px) and (max-width:1023px) and (orientation:portrait),
       (max-height:500px) and (orientation:landscape){
  :root{ --banda:.46; --sotto:.24; --giu:0px; }
  .hero__cornice{ width:118%; right:auto; left:-9%; transform:none; }
  .lk-h1{position:absolute;top:calc(var(--testataH) + 26px);padding-inline:var(--pad)}
  .lk{max-width:560px}
  .lk-su{font-size:30px}
  .lk-giu{font-size:51px}
  .lk-giu--canale{stroke-width:calc(var(--lk-k2)*.37)}
  .lk-h1 ~ .hero__testo{align-self:start;max-width:none;margin-inline:0;
    padding-left:var(--pad);padding-right:var(--pad);
    /* .54 = 200/370, l'aspetto del viewBox mobile; +12 l'alzata del sottotitolo */
    padding-top:calc(var(--testataH) + 26px + min((100vw - 2*var(--pad))*.54, 303px) + 12px)}
  .hero__lead{max-width:40ch}
}

/* ---- TABLET-L (iPad mini/Air/Pro 13 in orizzontale; per definizione anche
   i portatili bassi, 1280x800): il desktop regge — hero = 92vh entro il
   viewport, lockup con knockout — e non si tocca. Cambia SOLO il semaforo,
   in css/styles.css: da colonna (190px, a 3px dalla riga CTA sull'iPad
   mini) a riga in basso a destra. Qui il contenitore della CTA smette di
   essere largo quanto la colonna: e' invisibile, ma il suo rect e' quello
   che il harness misura contro il semaforo (intersezione = 0). ---- */
@media (min-width:1000px) and (max-width:1366px) and (max-height:1024px){
  .hero__cta{width:fit-content}
}
/* tocco e corpo minimo (PIANO) sulla testata, fino a 1366 di larghezza (i
   tablet in orizzontale E l'iPad Pro 13 in verticale, 1024x1366, che cade
   fuori dalle quattro classi): le voci della pastiglia erano 11px e 32px
   di altezza, la CTA 11.2px e 40: a 12px e 44 (la pastiglia sale da 42 a
   54, la testata da 76 a ~80: --testataH resta il suo ingombro dichiarato,
   l'h1 resta sotto la barra). I bottoni della hero: pavimento a .75rem
   (a 1280 il clamp dava gia' .753: il portatile non cambia). */
@media (max-width:1366px){
  .pastiglia a{font-size:.75rem;padding:.92em 1.02em;min-height:44px;display:inline-flex;align-items:center}
  .testata__cta{font-size:.75rem;min-height:44px}
  .hbtn{font-size:clamp(.75rem,.665rem + .11vw,.76rem)}
}

/* ---- TABLET-P (600-1023 verticale: iPad mini/Air, Galaxy Tab; l'iPad Pro
   13 a 1024 prende il desktop e regge): IMPILATO. Lockup grande a tutta
   larghezza — il viewBox MOBILE allargato, non quello desktop riscalato:
   a 768 le maiuscole fanno 57px e lo script 96, la stessa scala del lockup
   desktop a 1000px, col box pieno fino al bordo (il desktop porterebbe
   43/75 con un terzo di viewBox vuoto a destra, dove qui non c'e' foto).
   Lead e CTA sotto; poi la foto a tutta larghezza (118%, lo stesso taglio
   di phone-p: le tre teste ci stanno) che parte SOTTO la CTA e si dissolve
   nella giunzione; silhouette spenta (JS); nuvole a cavallo. ---- */
@media (min-width:600px) and (max-width:1023px) and (orientation:portrait){
  :root{ --testataH:64px;
    --heroH:max(100vh, 900px);
    --banda:.44; --sotto:.24; --giu:0px;
    --lk-top:calc(var(--testataH) + 14px);
    /* inchiostro del lockup: lo script finisce a ~115u su 370 (svolazzo
       della g) — si riserva .32 della larghezza, non l'intero box (.54) */
    --lk-ink:calc((100vw - 2*var(--pad)) * .32);
    --lead-top:calc(var(--lk-top) + var(--lk-ink) + 26px);
    /* 3 righe di lead (max 52ch a 1.06rem/1.7 = 5.406rem) + margine CTA + bottone + aria */
    --fotoTop:calc(var(--lead-top) + 5.406rem + 1.6rem + 54px + 24px);
    /* la larghezza della foto: 118% (il taglio di phone-p) o quanto serve a
       riempire la fascia fra CTA e giunzione, fino a 134% (taglio centrato:
       le teste stanno fra il 45 e l'83% della larghezza, restano dentro) */
    --fotoW:clamp(118vw, calc((var(--heroH) - var(--fotoTop)) / .7425), 134vw); }
  @supports (height:100svh){ :root{ --heroH:max(100svh, 900px) } }
  .lk-h1{top:var(--lk-top)}
  .lk{max-width:none}
  .lk-h1 ~ .hero__testo{padding-top:var(--lead-top)}
  .hero__lead{max-width:52ch;font-size:1.06rem;line-height:1.7}
  .hero__cta{margin-top:1.6rem}
  .hbtn{font-size:.75rem}
  /* .7425 = 891/1200, l'aspetto della foto. Il max: se la foto (al tetto del
     134%) e' piu' bassa della fascia si posa sulla giunzione con la sua
     dissolvenza, altrimenti parte subito sotto la CTA e sporge sotto */
  .hero__cornice{left:calc((100vw - var(--fotoW)) / 2);width:var(--fotoW);bottom:auto;
    top:max(var(--fotoTop), calc(var(--heroH) - var(--fotoW) * .7425))}
}

/* ---- PHONE-P (<=599 verticale: SE, 13, 15 Pro Max, Pixel 7, S23, 360x640):
   la ricomposizione rifinita. Hero = 100svh (la barra di Safari, non vh);
   lockup a tutta larghezza subito sotto la testata; lead e i due bottoni
   impilati nel primo schermo; la foto parte SOTTO la CTA con le tre teste
   nel suo primo terzo — sui telefoni bassi (SE 667, 360x640) si vedono
   teste e busti, sui telefoni alti la foto si posa sulla giunzione con la
   sua dissolvenza (il max: il piu' basso dei due ancoraggi vince). Il
   semaforo diventa una riga in basso a destra (styles.css). ---- */
@media (max-width:599px){
  :root{ --testataH:64px;
    --heroH:max(100vh, 600px);
    --banda:.46; --sotto:.24; --giu:0px;
    --lk-top:calc(var(--testataH) + 6px);
    --lk-ink:calc((100vw - 2*var(--pad)) * .32);
    --lead-top:calc(var(--lk-top) + var(--lk-ink) + 14px);
    /* 4 righe di lead (.96rem/1.6 = 6.144rem) + margine CTA + due bottoni impilati + aria */
    --fotoTop:calc(var(--lead-top) + 6.144rem + 1.3rem + 54px + .7rem + 54px + 14px);
    /* la foto riempie la fascia fra CTA e giunzione: 118% sui telefoni bassi
       (SE, 360x640: teste e busti), fino a 134% sui telefoni alti (13: 132%,
       15 Pro Max: al tetto) — senza il tetto sul 15 Pro Max il taglio
       arriverebbe al 144% e la modella di destra perderebbe il braccio */
    --fotoW:clamp(118vw, calc((var(--heroH) - var(--fotoTop)) / .7425), 134vw); }
  @supports (height:100svh){ :root{ --heroH:max(100svh, 600px) } }
  .lk-h1{top:var(--lk-top)}
  .lk{max-width:none}
  .lk-h1 ~ .hero__testo{padding-top:var(--lead-top)}
  .hero__lead{max-width:none;font-size:.96rem;line-height:1.6}
  .hero__cta{flex-direction:column;gap:.7rem;margin-top:1.3rem}
  .hero__cta .hbtn{width:100%;font-size:.75rem}
  .hero__cornice{left:calc((100vw - var(--fotoW)) / 2);width:var(--fotoW);bottom:auto;
    top:max(var(--fotoTop), calc(var(--heroH) - var(--fotoW) * .7425))}
}

/* ---- PHONE-L (orizzontale, <=500 di altezza: 844x390, 915x412, 932x430 e
   l'SE a 667x375): hero dedicata a DUE COLONNE compatte in 100svh. A
   sinistra il lockup compatto (viewBox mobile a max 340px: script 47px,
   mai sotto i 40), lead a tre righe e i due bottoni in riga (si impilano da
   soli sotto i ~720px); a destra la foto, larga meta' schermo, che parte
   sotto la testata compatta (52px) o si posa sulla giunzione: le teste nel
   primo terzo, i vestiti che si sciolgono nelle nuvole. Nessuna
   sovrapposizione testo/foto: la colonna finisce dove la foto comincia
   (e il bordo sinistro della foto e' la sua dissolvenza al 5%). ---- */
@media (max-height:500px) and (orientation:landscape){
  :root{ --testataH:52px;
    --heroH:max(100vh, 360px);
    --banda:.62; --sotto:.24; --giu:0px;
    --col:54vw;
    --lk-top:calc(var(--testataH) + 8px);
    --lk-w:min(calc(var(--col) - var(--pad) - 1rem), 340px);
    --lk-ink:calc(var(--lk-w) * .32);
    --lead-top:calc(var(--lk-top) + var(--lk-ink) + 8px); }
  @supports (height:100svh){ :root{ --heroH:max(100svh, 360px) } }
  .testata__int{padding-block:.45rem}
  /* logo a 36px per la testata da 52: l'area di tocco resta 44 (padding
     verticale compensato dal margine negativo: il flusso non cresce) */
  .testata__logo img{height:36px}
  .testata__logo{padding-block:4px;margin-block:-4px}
  .lk-h1{top:var(--lk-top);padding-inline:var(--pad) 0}
  .lk{width:var(--lk-w);max-width:none}
  .lk-h1 ~ .hero__testo{max-width:var(--col);padding-right:.75rem;padding-top:var(--lead-top)}
  .hero__lead{max-width:none;font-size:.86rem;line-height:1.5}
  .hero__cta{flex-direction:row;gap:.5rem;margin-top:.8rem;width:fit-content}
  /* etichette a 12px (mai sotto): con tracking .08em e padding 1.1em i due
     bottoni stanno in riga da 844 in su (394px su 406 misurati), sull'SE
     orizzontale si impilano e restano nel primo schermo */
  .hero__cta .hbtn{width:auto;min-height:44px;padding:.8em 1.1em;font-size:.75rem;letter-spacing:.08em}
  /* foto larga 50vw da 54vw (il 4% che sborda a destra e' il gomito della
     modella di destra: le teste finiscono all'83%); 37.125vw = 50vw*891/1200 */
  .hero__cornice{left:var(--col);right:auto;width:50vw;transform:none;bottom:auto;
    top:max(var(--testataH), calc(var(--heroH) - 37.125vw))}
  /* SE orizzontale con le barre di Safari VERE (667x331): il floor di 360px
     mandava "Prenota" 29px sotto il bordo. Sotto i 700px la hero e' il
     viewport reale e il gruppo si stringe: lockup 300, lead .82, aria ridotta. */
  @media (max-width:700px){
    :root{ --heroH:100vh; --lk-w:min(calc(var(--col) - var(--pad) - 1rem), 300px);
      /* il viewBox mobile ha ~11% di aria sopra le maiuscole (baseline a 64 su
         200): la si recupera alzando l'svg, cosi' "Prenota" guadagna ~30px dal
         bordo invece di stare a filo (misurato 330/331 prima) */
      --lk-top:calc(var(--testataH) + 4px - .10*var(--lk-w));
      --lead-top:calc(var(--lk-top) + var(--lk-ink) + 4px) }
    @supports (height:100svh){ :root{ --heroH:100svh } }
    .hero__lead{font-size:.82rem;line-height:1.45}
    .hero__cta{margin-top:.5rem;gap:.35rem}
    .hero__cta .hbtn{min-height:42px;padding:.7em 1em}
  }
}