/* =========================================================================
   CRESPI — CATALOGO (le quattro pagine collezione: /abiti-da-sposa/ e' il
   TEMPLATE, /abiti-da-sposo/ /cerimonia-donna/ /uomo/ ne sono copie fedeli)
   Vive DOPO styles.css e hero.css e ne riusa i token: --foto, --ivory,
   --ivory-2, --ink, --ink-soft, --olive, --olive-fondo, --offwhite, --line,
   --line-light, --radius, --ease, --pad, --testataH, la ricetta .fir della
   firma (styles.css) e i comandi .btn/.btn--light. NESSUN token nuovo di
   colore: qui vivono solo le regole del template — apertura, indice delle
   maison, intro, blocchi maison con la galleria a righe, fascia CTA.
   Struttura della pagina (in ordine): .cat-apertura (fondo --foto, sotto
   la testata trasparente) → .cat-intro (Cararra) → .maison ×N (alternanza
   bianco / Cararra con .maison--chiara) → .cat-cta (ambiente olive) →
   footer della home. Niente intro cinematografica, niente nuvole.
   ========================================================================= */

/* =========================================================================
   APERTURA — lo stesso fondo della hero (--foto #D3D8DE): la pagina interna
   apre sulla stessa aria della home, e la testata trasparente a scroll 0
   poggia sul caso gia' misurato (logo 5,5:1 sul --foto). Il primo elemento
   sotto la barra e' SEMPRE campo piatto: la foto viene dopo, mai sotto la
   testata (il logo Carbon sul cielo blu della foto sarebbe illeggibile).
   ========================================================================= */
.cat-apertura { background: var(--foto);
  padding-top: calc(var(--testataH) + clamp(2.4rem, 5vw, 4.2rem)); }
/* lockup a sinistra (2/3), indice delle maison a destra (1/3), allineati
   in ALTO: i due occhielli ("Le collezioni · 01" e "Quattro maison") stanno
   sulla stessa riga; le due colonne sono alte quasi uguali (203 vs 211px a
   1440), quindi anche i piedi si pareggiano da soli */
.cat-apertura__griglia { display: grid; grid-template-columns: 2fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.cat-apertura__titolo { margin: 1.1rem 0 0; }

/* IL LOCKUP DELLA COLLEZIONE: la firma delle sezioni (.fir di styles.css —
   maiuscole Inter 800 + script Ballet olive con canale a giorno dipinto del
   colore del fondo) portata a corpo di titolo. NIENTE knockout della
   silhouette: quello e' la firma della sola home. Proporzioni della hero
   riscalate (maiuscole 68u / script 116u = 1,71, come 82/140; distanza fra
   le due linee di base 59u = 0,866 × 68, come 71/82). Il viewBox (672u) e'
   largo quanto le maiuscole NATURALI a corpo 68 col tracking .13em
   (misurate a font caricato nei tre motori: 671,8 / 667,6 / 671,6 —
   analysis/cataloghi/_strumenti/lockup-misura.mjs): textLength = larghezza
   naturale, cosi' con Inter non c'e' alcuna spremitura e col fallback
   (nascosto da .lk-attesa) il testo viene comunque chiuso nella stessa
   scatola. max-width = viewBox: a 1440 (colonna 699px) il lockup sta a
   scala 1 — script 116px, maiuscole 68px; a 390 la scatola e' larga 355px
   → script 61px, sopra il pavimento dei 40px di Ballet.
   La frase dello script si sceglie GUARDANDOLA (provino
   sposa-provino-lockup.png): niente iniziali con lo svolazzo lungo di
   Ballet ("p", "g" in coda) che tagliano le maiuscole in diagonale ed
   escono dal viewport a 390; "la tua silhouette" resta dentro la scatola
   (ink x −2…405 su 672) e la "l" sale tra le maiuscole come la "il" della
   home. */
.cat-lockup { --fir-fondo: var(--foto); max-width: 672px; }

/* INDICE DELLE MAISON: il sommario della pagina, quattro salti alle sezioni
   (scroll-margin sotto la barra fissa, vedi .maison). Numerino olive a
   peso 500 come i numeri delle card in home; filetti --line come i fatti
   del negozio. */
.indice { padding-bottom: .35rem; }
.indice__lista { list-style: none; margin-top: .85rem; border-top: 1px solid var(--line); }
.indice__lista li { border-bottom: 1px solid var(--line); }
.indice__lista a { display: flex; align-items: baseline; gap: 1rem; padding: .72rem 0;
  font-weight: 400; font-size: .95rem; line-height: 1.3; transition: color .3s; }
.indice__lista a span { flex: none; width: 2.1rem; font-weight: 500; font-size: .7rem;
  letter-spacing: .15em; color: var(--olive); font-variant-numeric: lining-nums; }
.indice__lista a i { margin-left: auto; color: var(--olive); font-style: normal;
  transition: transform .4s var(--ease); }
.indice__lista a:hover i { transform: translateX(5px); }

/* LA FOTO D'APERTURA: a tutta larghezza, senza raggio (e' la copertina,
   non una card), al suo rapporto NATIVO su desktop (1920x950: la
   composizione — le due anfore, l'arco, la sposa al centro — si vede
   intera). Il fondo --ivory-2 e' il segnaposto mentre carica. */
.cat-apertura__foto { margin: clamp(2.2rem, 4vw, 3.4rem) 0 0; background: var(--ivory-2); }
.cat-apertura__foto img { width: 100%; height: auto; display: block; }
/* la didascalia sta sul fondo --foto, a destra, come una riga di colophon */
.cat-apertura__did { display: flex; justify-content: flex-end; padding-block: .85rem 1rem;
  font-weight: 500; font-size: .66rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-soft); }

/* =========================================================================
   INTRO — il testo di collezione come lead grande (Inter 300, ~19-24px) a
   sinistra, tre fatti di servizio a destra (copia della home: prove su
   appuntamento, sartoria interna, consulenza dedicata). Cararra.
   ========================================================================= */
.cat-intro { background: var(--ivory); padding-block: clamp(3.4rem, 7vw, 5.5rem); }
.cat-intro__griglia { display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.cat-intro__lead { margin-top: 1.1rem; font-weight: 300; color: var(--ink);
  font-size: clamp(1.18rem, 1.02rem + .55vw, 1.5rem); line-height: 1.5;
  max-width: 30ch; text-wrap: pretty; }
/* i fatti: la stessa lista del negozio (etichetta olive 500, filetti) */
.cat-fatti { list-style: none; margin-top: .4rem; }
.cat-fatti li { display: flex; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--line);
  font-size: .95rem; color: var(--ink-soft); }
.cat-fatti li:last-child { border-bottom: 1px solid var(--line); }
.cat-fatti span { flex: none; width: 6.2rem; font-weight: 500; font-size: .7rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--olive); padding-top: .22rem; }

/* =========================================================================
   MAISON — un blocco per marchio: occhiello olive "Maison 0N", h2 col nome
   (Inter 800 maiuscolo tracciato) + eventuale sottotitolo, breve testo
   dall'archivio quando c'e', poi la galleria a righe.
   Alternanza dei fondi: bianco (default) / Cararra (.maison--chiara), come
   le sezioni della home. L'ancora arriva SOTTO la testata fissa.
   ========================================================================= */
.maison { background: var(--bg); padding-block: clamp(3.6rem, 7.5vw, 6rem);
  scroll-margin-top: calc(var(--testataH) + 12px); }
.maison--chiara { background: var(--ivory); }
.maison__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 3.5rem);
  align-items: end; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
.maison__nome { font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.35rem); line-height: 1.18; letter-spacing: .12em;
  margin-top: .9rem; overflow-wrap: anywhere; }
/* il sottotitolo (es. "Diamond Couture") vive DENTRO l'h2 ma parla piano:
   Inter 300, minuscolo, senza tracking (mai tracking sul minuscolo) */
.maison__sub { display: block; font-weight: 300; text-transform: none; letter-spacing: .01em;
  font-size: clamp(.98rem, .9rem + .3vw, 1.15rem); line-height: 1.4; color: var(--ink-soft);
  margin-top: .45rem; }
.maison__testo { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.78; max-width: 44ch; }

/* =========================================================================
   LA GALLERIA A RIGHE — ritmo editoriale SENZA ritagliare le foto.
   Ogni galleria e' una pila di righe; ogni riga e' una griglia con un
   pattern. La regola geometrica che permette di alternare i formati senza
   crop: una foto GRANDE larga due colonne e alta due righe e' alta quanto
   due foto piccole impilate (a rapporto uguale, la larghezza doppia da'
   l'altezza doppia: 2:3 → 2/3·W = W di altezza, e due da 1/3·W fanno W).
   Lo scarto e' il solo gap di riga (~16px), che la grande assorbe con
   object-fit: cover — un ritaglio dell'1,5-3%, invisibile.
   Orientamento per galleria: .galleria--vert (verticali 2:3, griglia a 4
   colonne: grande 2 col + due coppie impilate = 5 foto per riga;
   .riga--4 quattro affiancate; .riga--3 tre affiancate piu' grandi) e
   .galleria--oriz (orizzontali 4:3, griglia a 3 colonne: grande 2 col +
   una coppia impilata = 3 foto per riga; .riga--3 tre affiancate).
   Righe: .riga--grande-sx (la grande a sinistra, PRIMA nel DOM),
   .riga--grande-dx (la grande a destra, ULTIMA nel DOM: l'ordine di
   lettura resta quello visivo), .riga--3, .riga--4.
   Un <figure> per foto, autonomo: se se ne toglie uno la riga si
   ricompone da sola (una cella vuota al piu'), niente sprite, niente
   posizioni cablate. L'immagine e' assoluta dentro il figure cosi' la
   grande non ha altezza intrinseca e non gonfia le righe: sono le piccole
   (aspect-ratio) a dettare le tracce, e la grande si stira ad esse.
   ========================================================================= */
.galleria { --gal-gap: clamp(.7rem, 1.5vw, 1.1rem); display: flex; flex-direction: column;
  gap: var(--gal-gap); }
.galleria--vert { --gal-col: 4; --gal-ratio: 2 / 3; }
.galleria--oriz { --gal-col: 3; --gal-ratio: 4 / 3; }
.riga { display: grid; grid-template-columns: repeat(var(--gal-col), minmax(0, 1fr));
  gap: var(--gal-gap); grid-auto-flow: dense; }
.riga--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.riga--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.riga--grande-sx, .riga--grande-dx { grid-template-rows: auto auto; }

.foto { position: relative; margin: 0; aspect-ratio: var(--gal-ratio); overflow: hidden;
  border-radius: var(--radius); background: var(--ivory-2); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease); }
/* hover sobrio: lo stesso gesto della galleria del negozio (scala, nessun
   velo, nessuna didascalia che compare) */
.foto:hover img { transform: scale(1.04); }
.foto--grande { aspect-ratio: auto; grid-row: 1 / span 2; }
.riga--grande-sx .foto--grande { grid-column: 1 / span 2; }
.riga--grande-dx .foto--grande { grid-column: -3 / -1; }

/* =========================================================================
   FASCIA CTA — l'ambiente olive della strada B (inchiostro e accento =
   off-white 8,41:1; corpo a .80 = 6,08:1; bottone .btn--light). Titolo con
   la voce calligrafica ACCOSTATA (.titolo-script--ondark, pavimento 44px).
   Lo stesso bagliore di luce off-white a .07 del blocco su misura.
   ========================================================================= */
.cat-cta { background: var(--olive-fondo); color: var(--offwhite);
  padding-block: clamp(4rem, 9vw, 7rem); position: relative; overflow: hidden; }
.cat-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 85% 10%, rgba(254,251,246,.07), transparent 60%); }
.cat-cta__griglia { display: grid; grid-template-columns: 1.2fr .8fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: end; position: relative; }
.cat-cta__titolo { font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.42rem, 1rem + 1.5vw, 2.2rem); line-height: 1.24; letter-spacing: .12em;
  margin: .9rem 0 1.1rem; }
.cat-cta__lead { color: rgba(254,251,246,.80); font-size: 1.04rem; line-height: 1.7; max-width: 44ch; }
.cat-cta__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem;
  justify-self: end; padding-bottom: .3rem; }
/* il recapito accanto al bottone: off-white pieno, filetto --line-light */
.cat-cta__tel { font-weight: 500; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--offwhite); border-bottom: 1px solid var(--line-light); padding-bottom: .35rem;
  transition: border-color .3s; }
.cat-cta__tel:hover { border-color: var(--offwhite); }

/* =========================================================================
   RESPONSIVE (passata minima: a 390 leggibile e senza overflow; la passata
   completa arriva con quella del sito)
   ========================================================================= */
@media (max-width: 980px) {
  .cat-apertura__griglia, .cat-intro__griglia, .maison__head, .cat-cta__griglia {
    grid-template-columns: 1fr; }
  .cat-apertura__griglia { gap: 2.2rem; }
  .cat-cta__azioni { justify-self: start; padding-bottom: 0; }
}
@media (max-width: 720px) {
  /* la copertina si stringe a 4:5 sul centro (la sposa e' centrata: l'arco
     resta, escono le anfore) — a 2:1 su 390px sarebbe alta 195px */
  .cat-apertura__foto img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }
  .cat-apertura__did { justify-content: flex-start; }
  /* galleria a due colonne: la grande occupa tutta la larghezza (al suo
     rapporto, ritorna aspect-ratio), le piccole a coppie; la terza di una
     tripla scende sola a tutta larghezza — sempre senza ritagli */
  .riga, .riga--3, .riga--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .riga--grande-sx, .riga--grande-dx { grid-template-rows: none; }
  .foto--grande { grid-column: 1 / -1; grid-row: auto; aspect-ratio: var(--gal-ratio); }
  .riga--3 > .foto:nth-child(3):last-child { grid-column: 1 / -1; }
  .cat-fatti span { width: 5.4rem; }
}
@media (max-width: 599px) {
  .cat-cta__azioni { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .foto img, .indice__lista a i { transition: none; }
  .foto:hover img { transform: none; }
}

/* =========================================================================
   CERIMONIA DONNA — due regole in piu' per la copia fedele del template.
   1) Il lockup: "CERIMONIA DONNA" a corpo 68 e' largo 802u (contro i 672u di
      "ABITI DA SPOSA"), quindi la scatola sale a 802px: a 1440 la colonna e'
      larga 699px → scala 0,87, script 101px, maiuscole 59px; a 390 (355px)
      script 51px, sopra il pavimento dei 40px di Ballet.
   2) Le foto dell'archivio cerimonia sono 3:4 (940x1260 Pronovias, 900x1200
      le scarpe), non 2:3: il modificatore .galleria--34 cambia SOLO il
      rapporto delle celle, cosi' object-fit: cover non ritaglia ne' i
      capelli ne' le scarpe. La regola geometrica delle righe (grande = due
      colonne e due righe = due piccole impilate) vale per qualunque rapporto.
   ========================================================================= */
.cat-lockup--cerimonia { max-width: 802px; }
.galleria--34 { --gal-ratio: 3 / 4; }

/* =========================================================================
   APERTURA VERTICALE (/uomo/) — nata col vecchio archivio uomo, che aveva
   solo foto 700x1000: a tutta larghezza sarebbe alta 2000px, ritagliata a
   2:1 andrebbe ingrandita del doppio (sfocata). Dal 17/09/2026 la copertina
   (la giacca Fabio Marra) ha anche il 1400w, ma resta verticale e 7:10 per
   la stessa impaginazione. La copertina sta quindi AFFIANCATA al
   lockup, dentro la griglia d'apertura: a sinistra lockup e indice
   impilati, a destra la foto al suo rapporto nativo che occupa entrambe
   le righe. Sotto i 980px torna la colonna unica del template
   (lockup, indice, foto) e valgono le regole comuni.
   ========================================================================= */
.cat-apertura--verticale .cat-apertura__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  grid-template-rows: auto 1fr; }
.cat-apertura--verticale .cat-apertura__lockup { grid-column: 1; grid-row: 1; }
/* l'indice poggia in BASSO, al piede della foto: lockup in alto, indice
   al piede, copertina a destra — la pagina di apertura di un magazine */
.cat-apertura--verticale .indice { grid-column: 1; grid-row: 2; align-self: end; }
.cat-apertura--verticale .cat-apertura__foto { grid-column: 2; grid-row: 1 / span 2; margin: 0;
  background: transparent; }
/* il segnaposto --ivory-2 sta sull'immagine, non sulla figure: la didascalia
   resta sul fondo --foto e non forma una banda chiara sotto la foto */
.cat-apertura--verticale .cat-apertura__foto img { aspect-ratio: 7 / 10; object-fit: cover;
  background: var(--ivory-2); }
/* il lockup "UOMO" e' corto: il viewBox e' largo quanto lo script (464u),
   max-width uguale cosi' a 1440 la scala resta 1 (script 116px) */
.cat-apertura--verticale .cat-lockup { max-width: 464px; }
.cat-apertura--verticale { padding-bottom: clamp(1.2rem, 2.5vw, 2rem); }
@media (max-width: 980px) {
  /* (specificita' piu' alta della regola comune: la colonna unica va
     ridetta qui, altrimenti a 390 il lockup resta stretto in 1fr) */
  .cat-apertura--verticale .cat-apertura__griglia { grid-template-columns: 1fr; grid-template-rows: none; }
  .cat-apertura--verticale .cat-apertura__lockup,
  .cat-apertura--verticale .indice,
  .cat-apertura--verticale .cat-apertura__foto { grid-column: auto; grid-row: auto; }
  .cat-apertura--verticale .cat-apertura__foto { max-width: 560px; }
}

/* =========================================================================
   APERTURA A TRITTICO (pagina Sposo) — nato col vecchio archivio sposo, che
   non aveva foto orizzontali: una sola verticale 800x1200 stirata a 1440
   sarebbe sfocata (1,8x) e alta 2160px. Anche il lookbook Versali del
   17/09/2026 e' verticale (800w + 1600w, un'unica orizzontale, IMG_7271).
   Tre verticali affiancate al loro rapporto 2:3 chiudono l'apertura a ~700px di
   altezza, come la copertina 1920x950 della Sposa. Stesso gap della
   galleria; la didascalia occupa la riga intera sotto. Il fondo del figure
   e' --foto cosi' i gap leggono come campo, non come segnaposto.
   ≤720: la prima a tutta larghezza in 4:5 (come la copertina Sposa), le
   altre due a coppia sotto, in 2:3 senza ritagli.
   ========================================================================= */
.cat-apertura__foto--trittico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.7rem, 1.5vw, 1.1rem); background: var(--foto); }
.cat-apertura__foto--trittico picture { display: block; background: var(--ivory-2); }
.cat-apertura__foto--trittico img { aspect-ratio: 2 / 3; object-fit: cover; }
.cat-apertura__foto--trittico .cat-apertura__did { grid-column: 1 / -1; }
/* trittico di verticali 3:4 (Cerimonia donna: Pronovias 940x1260): cambia
   solo il rapporto delle celle, cosi' object-fit: cover non ritaglia ne' la
   mantella ne' lo strascico. Sotto i 720 la prima resta 4:5 come tutte. */
.cat-apertura__foto--34 img { aspect-ratio: 3 / 4; }
@media (max-width: 720px) {
  .cat-apertura__foto--trittico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-apertura__foto--trittico picture:first-of-type { grid-column: 1 / -1; }
  .cat-apertura__foto--trittico picture:first-of-type img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
  .cat-apertura__foto--trittico picture:not(:first-of-type) img { aspect-ratio: 2 / 3; }
  .cat-apertura__foto--34 picture:not(:first-of-type) img { aspect-ratio: 3 / 4; }
}

/* STILL LIFE A 3:2 (accessori e scarpe della pagina Sposo): gli scatti da
   studio dell'archivio sono 800x533, cioe' 3:2; nella cella 4:3 della
   .galleria--oriz perderebbero l'11% di larghezza e il marchio in filigrana
   del produttore verrebbe tagliato ("VERSAL"). Il modificatore cambia solo
   il rapporto della cella: la regola geometrica delle righe (grande = due
   piccole impilate) vale per qualunque rapporto. */
.galleria--oriz.galleria--32 { --gal-ratio: 3 / 2; }

/* COPPIA ALLA STESSA ALTEZZA (.riga--coppia, Uomo · Camicie su misura,
   17/09/2026): un'orizzontale 3:2 accanto a una verticale 2:3. Le colonne
   stanno in proporzione ai rapporti (1,5 e 0,667): con un solo gap le due
   celle escono alte uguali, (larghezza - gap) / 2,167, e object-fit: cover
   non taglia niente (a 1440: 757x504 e 336x504). Il 3:2 lo da' .foto--32,
   la verticale tiene il 2:3 della .galleria--vert. Sui telefoni verticali
   una sotto l'altra a tutta larghezza; in orizzontale resta la coppia. */
.riga--coppia { grid-template-columns: minmax(0, 1.5fr) minmax(0, .6667fr); }
.foto--32 { aspect-ratio: 3 / 2; }
@media (max-width: 720px) and (orientation: portrait) {
  .riga--coppia { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   APERTURA COMPATTA (.cat-apertura--compatta, con --verticale) — per le
   pagine con INDICE CORTO (due voci) e copertina verticale: /uomo/. Con due
   sole voci la colonna di sinistra (lockup + indice ≈ 350px) e' alta la
   meta' della copertina 7:10 (≈ 700px a 1440) e restavano ~365px di vuoto
   fra lockup e indice. Il lead di collezione sale in apertura, fra lockup e
   indice — e' lo standfirst dell'apertura di un magazine: firma in alto,
   testo di presentazione, sommario al piede della foto. Stesso corpo e peso
   del lead dell'intro (.cat-intro__lead). L'intro sotto tiene i tre fatti
   in riga (.cat-intro--fatti). Sotto i 980 torna la colonna unica: lockup,
   lead, indice, foto.
   ========================================================================= */
/* niente gap di riga: la riga di mezzo (1fr) assorbe da sola lo spazio fra
   lead e indice, cosi' la colonna e' alta ESATTAMENTE quanto la copertina
   (a 1440: lockup 212 + lead 216 + indice 134 = 562 su 710 di foto, i 148
   che avanzano stanno fra lead e indice) */
.cat-apertura--compatta .cat-apertura__griglia { grid-template-rows: auto 1fr auto; row-gap: 0; }
.cat-apertura--compatta .cat-apertura__lead { grid-column: 1; grid-row: 2; align-self: start;
  margin: clamp(1.4rem, 2.4vw, 2rem) 0 clamp(1.6rem, 3vw, 2.6rem); font-weight: 300; color: var(--ink);
  font-size: clamp(1.18rem, 1.02rem + .55vw, 1.5rem); line-height: 1.5; max-width: 30ch;
  text-wrap: pretty; }
.cat-apertura--compatta .indice { grid-row: 3; }
.cat-apertura--compatta .cat-apertura__foto { grid-row: 1 / span 3; }
/* i tre fatti in riga, etichetta sopra il testo, filetto in testa a ognuno */
.cat-intro--fatti .cat-fatti--riga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.4rem, 3vw, 2.6rem); margin-top: 1.1rem; }
.cat-fatti--riga li { flex-direction: column; gap: .55rem; padding: 1rem 0 0; }
.cat-fatti--riga li:last-child { border-bottom: 0; }
.cat-fatti--riga span { width: auto; padding-top: 0; }

/* =========================================================================
   BLOCCO SENZA GALLERIA (.maison--marchi) — un capitolo dell'indice che non
   ha foto degne (Cerimonia donna · Scarpe: in archivio solo scatti da
   telefono sugli scaffali). Occhiello, h2 e testo come ogni maison; al
   posto della galleria una riga di marchi tracciati fra due filetti,
   separati dal puntino olive. Il blocco resta un'ancora dell'indice.
   ========================================================================= */
.maison--marchi { padding-block: clamp(3rem, 6vw, 4.6rem); }
.maison--marchi .maison__head { margin-bottom: clamp(1.4rem, 2.5vw, 2rem); }
.marchi { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem 0;
  padding: 1.15rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marchi li { font-weight: 500; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; }
.marchi li + li::before { content: "·"; color: var(--olive); margin: 0 1.1rem; }
@media (max-width: 980px) {
  .cat-apertura--compatta .cat-apertura__griglia { grid-template-rows: none; row-gap: 2.2rem; }
  .cat-apertura--compatta .cat-apertura__lead,
  .cat-apertura--compatta .indice,
  .cat-apertura--compatta .cat-apertura__foto { grid-column: auto; grid-row: auto; }
  .cat-apertura--compatta .cat-apertura__lead { margin-block: 0 .4rem; }
}
@media (max-width: 720px) {
  .cat-intro--fatti .cat-fatti--riga { grid-template-columns: 1fr; }
  .cat-fatti--riga li:last-child { border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
  .marchi { flex-direction: column; gap: .7rem; }
  .marchi li + li::before { content: none; }
}

/* =========================================================================
   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
   La soglia 980 delle regole qui sopra resta come rete (finestre fuori
   classe); le classi ridicono cio' che il formato merita.
   ========================================================================= */

/* ---- TABLET-P (768-820) e PHONE-L (844-932): l'apertura NON e' a colonna
   unica. A queste larghezze la colonna unica sprecava il formato (in
   orizzontale il primo schermo mostrava solo lockup e indice; l'iPad
   metteva la copertina verticale dell'uomo a piena colonna, alta 1000px):
   torna la griglia d'apertura del desktop — lockup 2/3 + indice 1/3, e per
   l'uomo (--verticale, --compatta) lockup, lead e indice a sinistra con la
   copertina 7:10 a destra (a 768: 290x414, non 728x1040). Le gallerie
   restano quelle del desktop (>720: 4 colonne per le verticali, 3 per le
   orizzontali: a 768 le celle sono 160-210px, come le coppie del telefono),
   perche' la regola geometrica delle righe (grande = due piccole impilate)
   vale solo con quel numero di colonne. ---- */
@media (min-width: 600px) and (max-width: 1023px) and (orientation: portrait),
       (max-height: 500px) and (orientation: landscape) {
  .cat-apertura__griglia { grid-template-columns: 2fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
  .cat-apertura--verticale .cat-apertura__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
    grid-template-rows: auto 1fr; }
  .cat-apertura--verticale .cat-apertura__lockup { grid-column: 1; grid-row: 1; }
  .cat-apertura--verticale .indice { grid-column: 1; grid-row: 2; align-self: end; }
  .cat-apertura--verticale .cat-apertura__foto { grid-column: 2; grid-row: 1 / span 2; max-width: none; }
  .cat-apertura--compatta .cat-apertura__griglia { grid-template-rows: auto 1fr auto; row-gap: 0; }
  .cat-apertura--compatta .cat-apertura__lead { grid-column: 1; grid-row: 2; align-self: start;
    margin: clamp(1.2rem, 2.4vw, 2rem) 0 clamp(1.4rem, 3vw, 2.6rem); }
  .cat-apertura--compatta .indice { grid-row: 3; }
  .cat-apertura--compatta .cat-apertura__foto { grid-row: 1 / span 3; }
  /* la CTA finale: bottone e telefono in riga a destra, come a desktop */
  .cat-cta__griglia { grid-template-columns: 1.2fr .8fr; }
  .cat-cta__azioni { justify-self: end; padding-bottom: .3rem; }
}
/* sul tablet verticale la colonna dell'indice e' 1/3 di 646px = 215: "Giovanna
   Alessandro" andava a capo; a 1.5fr/1fr l'indice ha 258px e sta in riga, il
   lockup a 388px tiene lo script a 67px */
@media (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) {
  .cat-apertura:not(.cat-apertura--verticale) .cat-apertura__griglia { grid-template-columns: 1.5fr 1fr; }
}
/* in orizzontale sotto i 720 (l'SE a 667x375) la copertina 4:5 del template
   e' piu' alta dello schermo: al rapporto nativo, come sopra i 720 */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 720px) {
  .cat-apertura__foto img { aspect-ratio: auto; }
  .cat-apertura__foto--trittico img { aspect-ratio: 2 / 3; }
  .cat-apertura__foto--trittico picture:first-of-type { grid-column: auto; }
  .cat-apertura__foto--trittico picture:first-of-type img { aspect-ratio: 2 / 3; object-position: 50% 50%; }
  .cat-apertura__foto--trittico { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-apertura__foto--34 img, .cat-apertura__foto--34 picture:first-of-type img { aspect-ratio: 3 / 4; }
}

/* ---- TOCCO E CORPO MINIMO su tutte e quattro le classi (PIANO: nessun
   testo sotto i 12px, nessun comando sotto i 44). Le righe dell'indice
   erano 43px (passo .72rem): a .78rem fanno 45. Il telefono della CTA
   (100x26) prende un'area di tocco assoluta di 10px sopra e sotto senza
   muovere il filetto. Stessa unione di styles.css: fino a 1366 di
   larghezza (l'iPad Pro 13 verticale e' fuori dalle quattro classi). ---- */
@media (max-width: 1366px), (max-height: 500px) and (orientation: landscape) {
  .indice__lista a { padding: .78rem 0; }
  .indice__lista a span { font-size: .75rem; }
  .cat-apertura__did { font-size: .75rem; }
  .cat-fatti span { font-size: .75rem; }
  .cat-cta__tel { font-size: .75rem; position: relative; }
  .cat-cta__tel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
}