/* =============================================================
   Parea Sons — Maison

   La pagina della casa. Si appoggia a css/collezione.css per
   l'impalcatura — .blocco, .cop, .metrica, .dettagli, .tabella,
   .chiusura sono gli stessi delle pagine di collezione — e aggiunge
   qui soltanto quello che a Maison serve e alle altre no.

   Il gesto della pagina è LA CUCITURA, ed esiste solo qui: un filo
   di refe scende lungo le cinque fasi della lavorazione e le cuce
   una a una a tempo con lo scorrimento. Come i mondi e come il
   respiro delle schede è tutto in CSS scroll-driven, senza un solo
   ascoltatore di `scroll`: è anche il motivo per cui va a tempo
   davvero con dito, trackpad e rotellina.

   Il filo è ORO — è l'ombra della corona dello stemma — e questo
   ne rispetta la regola di §2 di SISTEMA.md: solo filetti e segni,
   solo su fondo chiaro. Il punto di cucitura è invece il rosso di
   lavoro, che su fondo chiaro è testo a norma e qui è un segno.
   ============================================================= */

/* --- I fatti della casa ---------------------------------------
   Quattro dati in fila, nessun aggettivo. Il numero è in Cormorant
   leggero come la metrica delle collezioni: la stessa voce.        */

.fatti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-32);
  margin: 0;
}

.fatto {
  display: grid;
  gap: var(--s-8);
  align-content: start;
  padding-top: var(--s-24);
  border-top: 1px solid var(--filetto);
}

.fatto__voce {
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
  color: var(--greige);
}

.fatto__dato {
  margin: 0;
  font-family: var(--font-testo);
  font-weight: 300;
  font-size: clamp(var(--t-32), 3.2vw, var(--t-48));
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* La seconda riga del dato — «Brescia», «Made in Italy» — non è un
   dato: è la sua nota. Torna alla scala del testo minuto. */
.fatto__dato span {
  display: block;
  margin-top: var(--s-8);
  font-family: var(--font-dato);
  font-size: var(--t-13);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
}

/* --- La cucitura ----------------------------------------------
   Geometria: le fasi lasciano libera una corsia a sinistra,
   --corsia, e il filo scende in mezzo a quella. I punti stanno
   sopra il filo e hanno il fondo della sezione dietro, così il
   refe risulta interrotto a ogni punto invece di passarci sotto. */

.cucitura {
  --corsia: var(--s-64);
  --nodo: 16px;
  position: relative;
}

.cucitura__fasi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-48);
}

/* Il refe. Non è una linea continua: è una successione di punti da
   9px con 6px di vuoto — un punto filza vero — dichiarata come
   gradiente ripetuto e non come `dashed`, che nei browser è lungo
   quanto pare a loro. */
.cucitura__filo {
  position: absolute;
  top: 0.6em;
  bottom: 0;
  left: calc(var(--corsia) / 2);
  width: 1px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--oro) 0 9px,
    transparent 9px 15px);
}

.fase {
  position: relative;
  padding-left: var(--corsia);
  display: grid;
  gap: var(--s-8);
  align-content: start;
}

/* Il punto: due fili incrociati, come si ferma una cucitura a mano.
   Il fondo dietro è quello della sezione, per interrompere il refe. */
.fase__nodo {
  position: absolute;
  left: calc(var(--corsia) / 2 - var(--nodo) / 2);
  top: calc(0.6em - var(--nodo) / 2);
  width: var(--nodo);
  height: var(--nodo);
  background: var(--bianco-lino);
}

.fase__nodo::before,
.fase__nodo::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 1px;
  background: var(--rosso);
  transform-origin: center;
}

.fase__nodo::before { transform: rotate(45deg); }
.fase__nodo::after  { transform: rotate(-45deg); }

.fase__numero {
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-largo);
  color: var(--greige);
}

.fase__nome {
  font-family: var(--font-testo);
  font-weight: 400;
  font-size: clamp(var(--t-20), 2.4vw, var(--t-32));
  line-height: 1.12;
  letter-spacing: -0.005em;
}

.fase__nota {
  font-size: var(--t-20);
  line-height: 1.5;
  color: var(--greige);
  max-width: 58ch;
}

/* --- Le tre porte ---------------------------------------------
   Le stesse tre tavole a matita della home, qui come ingressi alle
   pagine dei pregi. Valgono le regole di css/pregi.css: nessuna
   cornice — la carta è stata tolta davvero, un riquadro sarebbe il
   contrario — e forme pareggiate per AREA e non per ritaglio, con
   la stessa costante --k di là.                                    */

.porte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.porta + .porta { border-left: 1px solid var(--filetto); }

.porta__link {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--s-16);
  text-align: center;
  padding: 0 var(--s-32) var(--s-8);
  height: 100%;
}

.porta__tavola {
  --lato: clamp(96px, 11vw, 144px);
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(var(--lato) * 1.173);
  margin-bottom: var(--s-8);
}

/* Il <source> qui dentro diventerebbe una cella della griglia:
   va tolto dal flusso a mano, come in css/pregi.css. */
.porta__tavola source { display: none; }

.porta__tavola img {
  display: block;
  grid-area: 1 / 1;
  width: calc(var(--lato) * var(--k));
  height: auto;
  transition: transform var(--t-ampio) var(--ease);
}

.porta--lino       .porta__tavola { --k: 0.852; }
.porta--cartellino .porta__tavola { --k: 1.610; }
.porta--giftbox    .porta__tavola { --k: 1.075; }

.porta--lino       .porta__tavola img { aspect-ratio: 654 / 900; }
.porta--cartellino .porta__tavola img { aspect-ratio: 900 / 347; }
.porta--giftbox    .porta__tavola img { aspect-ratio: 753 / 651; }

.porta__link:hover .porta__tavola img,
.porta__link:focus-visible .porta__tavola img { transform: scale(1.04); }

.porta__nome {
  font-family: var(--font-display);
  font-size: var(--t-16);
  letter-spacing: 0.02em;
}

.porta__nota {
  font-size: var(--t-20);
  line-height: 1.45;
  color: var(--greige);
  max-width: 34ch;
}

/* Il segno del sito: il filetto che si apre dal centro. Qui è il
   trattino che si allunga, come .ritorno delle collezioni. */
.porta__segno {
  display: inline-flex;
  align-items: center;
  gap: var(--s-16);
  margin-top: var(--s-8);
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
  color: var(--rosso);
}

.porta__segno i {
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: width var(--t-medio) var(--ease);
}

.porta__link:hover .porta__segno i,
.porta__link:focus-visible .porta__segno i { width: 40px; }

/* --- Cura del lino --------------------------------------------- */

.cura {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s-64);
  align-items: start;
}

.cura .dettagli { max-width: none; }

.cura__scena {
  aspect-ratio: 3 / 4;
  position: sticky;
  top: calc(var(--header-h-ridotto) + var(--s-32));
}

/* --- Spedizioni e taglie --------------------------------------- */

.servizio .dettagli { max-width: 76ch; }

/* I link dentro il testo di servizio: sottolineati col filetto del
   sito, non con text-decoration. */
.dettaglio__nota a,
.legale dd a {
  color: var(--inchiostro);
  position: relative;
  padding-bottom: 1px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% 1px;
  transition: background-size var(--t-medio) var(--ease);
}

.dettaglio__nota a:hover,
.legale dd a:hover { background-size: 0% 1px; }

.taglie__misure { margin-top: var(--s-64); max-width: 76ch; }

/* --- I recapiti ------------------------------------------------ */

.recapiti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-48) var(--s-32);
}

.recapito {
  display: grid;
  gap: var(--s-16);
  align-content: start;
  padding-top: var(--s-24);
  border-top: 1px solid var(--filetto);
}

.recapito__voce {
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
  color: var(--greige);
}

.recapito__dato {
  font-family: var(--font-dato);
  font-style: normal;
  font-size: var(--t-16);
  line-height: 1.7;
  letter-spacing: var(--tracking-dato);
  /* `sales@pareasonsluxurygarments.com` è una parola sola larga 280px,
     e una parola sola il browser non la spezza: in una colonna da 236
     — tre colonne su un iPad da 820 — la casella si allargava fino a
     280 e spingeva la terza fuori dalla finestra, facendo scorrere
     TUTTA la pagina in orizzontale di 20px. `anywhere` e non
     `break-word`: solo `anywhere` rimpicciolisce anche la larghezza
     minima intrinseca, che è quella su cui la griglia fa i conti. */
  overflow-wrap: anywhere;
}

.recapito__minore {
  font-size: var(--t-12);
  color: var(--greige);
}

/* Gli indirizzi si sottolineano col filetto che si apre dal centro,
   come .contatti nelle collezioni. */
.recapito__dato a {
  position: relative;
  padding-bottom: 2px;
}

.recapito__dato a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease);
}

.recapito__dato a:hover::after,
.recapito__dato a:focus-visible::after { transform: scaleX(1); }

.recapiti__azione { margin-top: var(--s-48); }

/* --- Le note legali --------------------------------------------
   Una lista di definizioni vera: sono coppie voce/valore, e chi
   legge a voce deve sentirle accoppiate.                           */

.legale {
  margin: 0;
  display: grid;
  max-width: 76ch;
  border-top: 1px solid var(--filetto);
}

.legale__riga {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--s-16) var(--s-32);
  padding-block: var(--s-16);
  border-bottom: 1px solid var(--filetto);
}

.legale dt {
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
  color: var(--greige);
  align-self: center;
}

.legale dd {
  margin: 0;
  font-family: var(--font-dato);
  font-size: var(--t-16);
  line-height: 1.6;
  letter-spacing: var(--tracking-dato);
  align-self: center;
}

.legale__nota {
  margin-top: var(--s-32);
  max-width: 76ch;
  font-size: var(--t-20);
  line-height: 1.5;
  color: var(--greige);
}

/* --- Larghezze minori ------------------------------------------ */

@media (max-width: 1024px) {
  .cura { grid-template-columns: minmax(0, 1fr); gap: var(--s-48); }
  /* `relative` e non `static`, ed è la parola da non cambiare.
     In una colonna sola non c'è niente accanto a cui restare
     appiccicati, quindi lo `sticky` se ne va — ma questo elemento è
     anche un `.posto`, e la sua fotografia è `position: absolute`
     con `inset: 0`. Con `static` non c'è più nessun blocco
     contenitore qui, l'immagine si aggancia al contenuto della
     pagina e diventa 820x11011: copre Maison per intero. Misurato
     su iPad a 820x1180 il 12 agosto 2026. `relative` toglie lo
     sticky e lascia il blocco contenitore, che è quello che serve. */
  .cura__scena { position: relative; aspect-ratio: 16 / 10; }
  .porte { grid-template-columns: minmax(0, 1fr); }
  .porta + .porta {
    border-left: 0;
    border-top: 1px solid var(--filetto);
    padding-top: var(--s-48);
    margin-top: var(--s-48);
  }
}

@media (max-width: 640px) {
  .cucitura { --corsia: var(--s-48); }
  .legale__riga { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .porta__link { padding-inline: 0; }
}

/* =============================================================
   Il filo che cuce
   -------------------------------------------------------------
   Due orologi, tutti e due legati allo scorrimento, e una regola
   sola che li tiene insieme: LA TESTA DEL FILO STA A METÀ SCHERMO.
   È lì che l'occhio guarda mentre si scorre, ed è lì che il refe
   deve arrivare — se no si cuce sopra o sotto quello che si legge.

   1. IL REFE si disegna scoprendosi dall'alto — `clip-path` e non
      `scaleY`, che stirerebbe i punti invece di scoprirli.

      La corsa NON è in percentuale, ed è la cosa da non riscrivere.
      La corsa `cover` è lunga H+F (l'elenco più la finestra) e la
      percentuale si misura su quella somma: qualunque numero fisso
      è giusto per una sola coppia di altezze e sbagliato per tutte
      le altre — a 1280×720 questo elenco è alto 897px, e il 17%
      che andava bene per un elenco alto il doppio della finestra
      qui manda la testa del filo 90px sotto il punto giusto.

      In lunghezze invece il conto si chiude da sé. Avanzata a
      dentro la corsa: il bordo alto dell'elenco sta a F − a, quindi
      il punto che si trova a metà schermo è d = a − F/2. Vale 0 ad
      a = 50vh, e vale H — cioè tutto il filo — ad a = 50vh + H, che
      essendo H = (H+F) − F si scrive `calc(100% - 50vh)`. Due
      numeri veri, buoni per ogni finestra e ogni lunghezza di testo.

   2. OGNI PUNTO si chiude quando il refe gli passa sopra, cioè
      quando il punto stesso attraversa la metà dello schermo. Lo
      misura il nodo, che è un quadratino di 16px e quindi misura
      sé stesso e non la fase intera: il suo centro sta a metà
      schermo dopo 50vh + 8px di corsa. Da lì si chiude in 56px di
      scorrimento. I due fili si aprono dal centro — `scaleX` da 0 —
      che è il gesto unico del sito.

   Fuori dal @supports non c'è niente: senza scroll-driven
   animation la cucitura è già cucita e la pagina si legge tutta.
   È la stessa licenza dei mondi e del respiro delle schede.
   ============================================================= */

@supports (animation-timeline: view()) {

  .cucitura__filo {
    clip-path: inset(0 0 100% 0);
    animation: cuci linear both;
    animation-timeline: view();
    animation-range: cover 50vh cover calc(100% - 50vh);
  }

  @keyframes cuci {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  .fase__nodo::before,
  .fase__nodo::after {
    animation: linear both;
    animation-timeline: view();
    animation-range: cover calc(50vh + 8px) cover calc(50vh + 64px);
  }

  .fase__nodo::before { animation-name: punto-destro; }
  .fase__nodo::after  { animation-name: punto-sinistro; }

  @keyframes punto-destro {
    from { transform: rotate(45deg) scaleX(0); }
    to   { transform: rotate(45deg) scaleX(1); }
  }

  @keyframes punto-sinistro {
    from { transform: rotate(-45deg) scaleX(0); }
    to   { transform: rotate(-45deg) scaleX(1); }
  }

  /* Il testo della fase sale da sotto mentre entra, come il resto
     del sito. Il nodo resta fuori: ha il suo orologio. */
  .fase > :not(.fase__nodo) {
    animation: fase-entra linear both;
    animation-timeline: view();
    animation-range: entry 15% entry 85%;
  }

  @keyframes fase-entra {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
}

/* --- Movimento ridotto ------------------------------------------
   Chi ha chiesto di non vedere cose muoversi trova la cucitura già
   fatta: il filo intero, i punti chiusi, il testo fermo.           */

@media (prefers-reduced-motion: reduce) {
  .cucitura__filo {
    clip-path: none;
    animation: none;
  }

  .fase__nodo::before,
  .fase__nodo::after { animation: none; }

  .fase > :not(.fase__nodo) {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .porta__tavola img { transition: none; }
}