/* =============================================================================
   PUROTATTO — pagina «Il brand»
   Indice laterale sticky (desktop) · lavorazioni a righe alterne · sartorialità ·
   fascia video «Fatta per durare» · le boutique. Solo token di system.css.
   ============================================================================= */

.pagina-brand { --rail: clamp(168px, 13vw, 216px); }

/* Corpo: le sezioni scorrono a destra dell'indice; la fascia video esce a tutta pagina */
.brand-corpo { position: relative; }
.brand-corpo > .sezione { margin-left: var(--rail); }
.brand-corpo > .sezione + .sezione, .brand-corpo > .durare + .sezione { margin-top: 2px; }

/* 1 · Indice laterale ------------------------------------------------------- */
.indice { position: absolute; top: 0; bottom: 0; left: 0; width: var(--rail); z-index: 1; }
.indice-in {
  position: sticky; top: calc(var(--hdr) + clamp(40px, 6vh, 72px));
  padding: clamp(40px, 6vh, 72px) 16px 0 var(--gutter);
}
.indice-testa { color: var(--pietra); font-size: 11px; margin-bottom: 26px; }
.indice-lista li + li { margin-top: 14px; }
.indice-lista a {
  display: flex; align-items: baseline; gap: 12px; position: relative;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.3;
  color: var(--pietra); transition: color .35s var(--ease);
}
.indice-n { font-size: 10px; letter-spacing: .14em; min-width: 2.2ch; }
.indice-lista a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.indice-lista a:hover { color: var(--inchiostro); }
.indice-lista a.is-attiva { color: var(--inchiostro); }
.indice-lista a.is-attiva::after { transform: scaleX(1); }

/* 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 { font-size: clamp(30px, 3.1vw, 48px); line-height: 1.08; padding-left: .17em; }
.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 { font-size: clamp(24px, 2.4vw, 38px); }

/* 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 { font-size: clamp(26px, 2.5vw, 40px); line-height: 1.1; 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à: due foto a filo + tre voci --------------------------- */
.sarto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--avorio); }
.sarto-foto { position: relative; aspect-ratio: 2 / 3; 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(40px, 4.4vw, 80px) clamp(24px, 2.8vw, 56px); }
.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; }
.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 · Fascia video «Fatta per durare» (a tutta pagina, copre l'indice) ------ */
.durare { position: relative; z-index: 2; height: 70vh; height: 70svh; min-height: 460px; margin-top: 2px; overflow: hidden; background: #3b312c; color: var(--bianco); }
.durare-tre { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--avorio); }
.durare-col { position: relative; overflow: hidden; background: #3b312c; }
.durare-col > img, .durare-col > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); }
.durare-col--video > video { object-position: 50% 30%; filter: brightness(.86); }
.durare::after {                                 /* ombra morbida dietro il titolo, niente fasce */
  content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: min(1100px, 90%); height: 46%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(24, 18, 15, .34), rgba(24, 18, 15, 0));
}
.durare-titolo {
  position: absolute; z-index: 2; left: 0; right: 0; top: 50%; margin-top: -.5em;
  font-size: clamp(40px, 6.2vw, 120px); line-height: 1; white-space: nowrap;
}

/* 6 · Le boutique ----------------------------------------------------------- */
.tavole--brand .tavola { height: 86vh; height: 86svh; min-height: 520px; }

/* Tablet: niente indice, le sezioni tornano a tutta larghezza --------------- */
@media (max-width: 1099px) {
  .indice { display: none; }
  .brand-corpo > .sezione { margin-left: 0; }
  .sarto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sarto-voci { grid-column: 1 / -1; }
}

/* Mobile ------------------------------------------------------------------- */
@media (max-width: 759px) {
  .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-voci { padding: 48px var(--gutter) 56px; }
  .durare-tre { grid-template-columns: 1fr; gap: 0; }
  .durare-col:not(.durare-col--video) { display: none; }
  .durare-titolo { font-size: min(11vw, 56px); white-space: normal; margin-top: 0; transform: translateY(-50%); }
  .js .durare-titolo[data-reveal] { transform: translateY(calc(-50% + 24px)); }
  .js .durare-titolo[data-reveal].is-in { transform: translateY(-50%); }
  .tavole--brand .tavola { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .js .durare-titolo[data-reveal] { transform: none; }
  @media (max-width: 759px) { .js .durare-titolo[data-reveal] { transform: translateY(-50%); } }
}