/* =============================================================================
   PUROTATTO — pagina «Il brand»
   Indice in alto, al centro, fermo sotto l'header, che si riempie mentre si scorre (26/10 sera) ·
   lavorazioni a righe alterne · sartorialità con una foto sola · le boutique. Solo token di system.css.
   ============================================================================= */

.pagina-brand { --indice-h: 54px; }

/* Corpo: le sezioni a tutta larghezza, l'indice sopra di loro */
.brand-corpo { position: relative; }
.brand-corpo > .sezione + .sezione { margin-top: 2px; }
.pagina-brand .sezione { scroll-margin-top: calc(var(--hdr) + var(--indice-h)); }

/* 1 · Indice: al centro, in alto, in orizzontale, come la banda delle categorie (Gianluca, 26/10 sera:
   «la guida sulla sinistra crea solo confusione»). Ogni voce ha il suo binario che si riempie mentre
   si scorre la sua sezione: piene quelle già lette, vuote quelle dopo (il valore --p lo scrive brand.js) */
.indice {
  position: sticky; top: var(--hdr); z-index: 30;
  background: var(--avorio); border-bottom: 1px solid var(--linea);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.indice::-webkit-scrollbar { display: none; }
.indice-lista { display: flex; gap: clamp(30px, 3.8vw, 68px); width: max-content; margin: 0 auto; padding: 0 var(--gutter); }
.indice-lista a {
  position: relative; display: flex; align-items: center; gap: 10px; height: var(--indice-h); white-space: nowrap;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; line-height: 1;
  color: var(--pietra); transition: color .3s var(--ease);
}
.indice-n { font-size: 10px; letter-spacing: .14em; }
.indice-lista a::before, .indice-lista a::after {
  content: ""; position: absolute; left: 0; right: .2em; bottom: 14px; height: 2px;
}
.indice-lista a::before { background: var(--linea); }
.indice-lista a::after { background: var(--inchiostro); transform: scaleX(var(--p, 0)); transform-origin: left; }
.indice-lista a:hover, .indice-lista a.is-attiva { color: var(--inchiostro); }

/* 2 · Testate di sezione ---------------------------------------------------- */
.sez-testa {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(64px, 7.4vw, 124px) var(--gutter) clamp(52px, 5.6vw, 92px);
}
.sez-num { color: var(--pietra); font-size: 11px; margin-bottom: 18px; }
.sez-testa .titolo { --tr: var(--t-track); font-size: var(--t-hero); line-height: 1.2; padding-left: var(--t-track); }   /* sussurrato (29/10) */
.sez-testa p:not(.sez-num) { margin-top: 26px; max-width: 52ch; font-size: 15px; line-height: 1.75; color: var(--bruno); }
.brand-corpo .fasce { margin-top: 0; }
.fascia { display: block; }
.fascia > .titolo { --tr: var(--t-track); font-size: var(--t-sezione); }

/* 3 · Le lavorazioni: righe a due colonne alterne --------------------------- */
.lav-righe { display: grid; gap: 2px; margin-top: 2px; background: var(--avorio); }
.lav-riga { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.lav-foto { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--carta); }
.lav-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.22); transition: transform 1.4s var(--ease); }
.lav-riga:hover .lav-foto > img { transform: scale(1.26); }
.lav-testo {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 6vw, 112px) clamp(28px, 6.4vw, 120px);
}
.lav-conta { color: var(--pietra); margin-bottom: clamp(26px, 3vw, 44px); }
.lav-conta span { color: var(--inchiostro); }
.lav-testo .titolo { --tr: var(--t-track); font-size: var(--t-sezione); line-height: 1.2; margin-bottom: 24px; }
.lav-testo p:not(.lav-conta) { font-size: 15px; line-height: 1.75; color: var(--bruno); max-width: 42ch; }
.lav-riga--inversa .lav-foto { order: 2; }

/* 4 · La sartorialità: una foto sola, grande quanto quelle delle lavorazioni, a destra (continua l'alternanza);
   le tre voci a sinistra (Gianluca, 26/10 sera: «sennò sembra che il modulo salti») */
.sarto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--avorio); }
.sarto-foto { position: relative; order: 2; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--carta); }
.sarto-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sarto-voci { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 6vw, 112px) clamp(28px, 6.4vw, 120px); }
.sarto-voci > .titolo { font-size: clamp(22px, 1.8vw, 30px); line-height: 1.1; margin-bottom: clamp(30px, 3.4vw, 52px); }
.sarto-voci dl { margin: 0; max-width: 46ch; }
.sarto-voce { padding: 20px 0 22px; border-top: 1px solid var(--linea); }
.sarto-voce:last-child { border-bottom: 1px solid var(--linea); }
.sarto-voce dt { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.2; margin-bottom: 8px; }
.sarto-voce dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bruno); }

/* 5 · Le boutique: le stesse foto della pagina boutique, una per città, non più la tavola doppia (26/10 sera) */
.tavole--brand .tavola { height: 86vh; height: 86svh; min-height: 520px; }
.tavole--brand .tavola > img { left: 0; width: 100%; filter: brightness(.9); }

/* Mobile ------------------------------------------------------------------- */
@media (max-width: 759px) {
  .pagina-brand { --indice-h: 46px; }
  .indice-lista { gap: 22px; }
  .indice-lista a { font-size: 10px; letter-spacing: .16em; }
  .indice-lista a::before, .indice-lista a::after { bottom: 11px; }
  .indice-n { display: none; }
  .lav-riga { grid-template-columns: 1fr; }
  .lav-riga--inversa .lav-foto { order: 0; }
  .lav-foto { aspect-ratio: 4 / 3; }
  .lav-testo { padding: 40px var(--gutter) 56px; }
  .lav-conta { margin-bottom: 20px; }
  .sarto { grid-template-columns: 1fr; }
  .sarto-foto { order: 0; aspect-ratio: 4 / 3; }
  .sarto-voci { padding: 40px var(--gutter) 56px; }
  .tavole--brand .tavola { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
}