/* ============================================================
   VELUM — pages.css
   Page-level composition: home sections, shop, product, cart,
   checkout, about.
   ============================================================ */

/* ---- Section heading ------------------------------------ */
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.sec-head__title { max-width: 20ch; }
@media (max-width: 35em) {
  .sec-head { flex-direction: column; gap: 1.25rem; }
}

/* ============================================================
   I MOMENTI — la home
   Non una pagina a sezioni ma una sequenza: ogni momento occupa
   lo schermo e lo scroll ci si aggancia con dolcezza. Dal
   catalogo in giù lo snap si rilascia e si torna a scorrere
   liberamente, perché una griglia di prodotti agganciata è
   nemica dell'acquisto.
   ============================================================ */
.moment {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 9rem 5rem;
}
/* Sotto i 900px il momento smette di essere una schermata: e' alto
   quanto il suo contenuto. Tenerlo a 100svh con dentro 1189px di testo
   vuol dire solo che il testo esce, e lo snap aggancia una cima che
   non e' piu' la cima di niente. */
@media (max-width: 56.25em) {
  .moment {
    min-height: 0;
    justify-content: flex-start;
    padding-block: 5rem 4rem;
  }
  /* La hero resta a schermo pieno: e' l'unica dove l'altezza e' il
     contenuto, non un contenitore per il contenuto. */
  .moment--hero { min-height: 100svh; justify-content: center; padding-block: 4rem 3rem; }
}

.moment--dark {
  background: var(--depth);
  color: var(--bone);
}
.moment--dark .label { color: color-mix(in srgb, var(--bone) 52%, transparent); }

/* ---- 01 — Hero ------------------------------------------
   Il titolo occupa lo schermo. Scorrendo, un velo Depth sale da
   sotto e diventa il terreno del momento successivo: il
   passaggio non è uno stacco, è una tenda che si alza. */
.moment--hero { overflow: clip; }

/* Titolo e soprariga al centro, sotto la fila: e' la composizione
   della reference, e su una schermata cosi' larga il centro e' anche
   l'unico posto da cui il titolo non scappa. */
.hero2 { position: relative; z-index: 2; text-align: center; }
.hero2 .label { display: block; }
.hero2__cta { margin-top: 2rem; }
.hero2__title {
  font-size: clamp(3.25rem, 13vw, 12rem);
  line-height: 0.92em;
  letter-spacing: -0.035em;
  /* 2.5rem e non 1.75: il margine negativo della feritoia (motion.css)
     ne riassorbe una parte, e senza compenso il titolo saliva addosso
     alla soprariga. */
  margin: 2.5rem 0 0;
}
.hero2__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--depth);
  transform: translateY(100%);
}
/* Le cifre: mono, perche' sono numeri e devono sembrarlo, e allineate
   in colonna cosi' le tre coppie si leggono come una tabella. Contano
   da zero entrando — non e' un vezzo: e' il gesto che dice "questo e'
   un dato", lo stesso della scomposizione del prezzo. */
.pillar__facts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--bone) 18%, transparent);
}
.pillar__fact {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--bone) 55%, transparent);
}
.pillar__fact b { font-weight: 400; color: var(--bone); }
.pillar__fact i { font-style: normal; margin-left: 0.6rem; }

@media (max-width: 56.25em) {
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .pillar + .pillar::before { display: none; }
  .pillar__body { max-width: 46ch; }
}

/* ---- 03 — Materia ---------------------------------------
   Il campo macro si apre in clip-path mentre entra: nessun pin
   in tutta la home, così lo snap non ha nulla contro cui
   combattere. */
/* Cornice che ritaglia: il campo entra scalato a 1.12 e si assesta
   a 1 mentre scorre. Senza overflow nascosto sborderebbe dal
   contenitore sugli schermi stretti. */
.materia__media { overflow: hidden; }

/* Il campo macro ha un rapporto 4:5: in una colonna larga 660px diventa
   alto 825, e con i 9rem di padding del momento la schermata arriva a
   1024px contro 805 di viewport. Sopra i 900px di larghezza lo snap e'
   acceso, e una schermata che sfonda con lo snap acceso e' il caso
   peggiore: ti riaggancia la cima mentre leggi quello che sta sotto.
   Qui l'altezza la decide lo schermo, non il rapporto della fotografia. */
@media (min-width: 56.3125em) {
  .materia__media .shot {
    aspect-ratio: auto;
    height: min(calc(100svh - 21rem), 30rem);
  }
}
/* Su schermo basso il vincolo non e' piu' la fotografia ma la colonna
   di testo: restano 24px di troppo, e si tolgono dalle distanze del
   momento invece che dal corpo del testo, che deve restare leggibile. */
@media (max-height: 56em) {
  .moment { padding-block: 4.5rem 2.5rem; }
}
.materia__media .ph { transform-origin: 50% 50%; }

/* ---- I campi che si scoprono ------------------------------ */
.veiled { clip-path: inset(0 0 0 0); }
.motion-on .veiled { clip-path: inset(0 0 100% 0); }

/* ---- PILLARS: a band of text, no icons ------------------ */
/* I filetti non sono decorazione: sono l'unica struttura di una
   schermata fatta di testo. Si disegnano invece di esserci gia' —
   quello orizzontale da sinistra, i due verticali dall'alto — e senza
   motore del movimento sono semplicemente dritti al loro posto. */
.pillars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  padding-top: 3rem;
}
.pillars::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--bone) 34%, transparent);
  transform-origin: left center;
}
.pillar { position: relative; }
.pillar + .pillar::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: calc(var(--grid-gap) / -2);
  width: 1px;
  background: color-mix(in srgb, var(--bone) 22%, transparent);
  transform-origin: center top;
}
.motion-on .pillars::before { transform: scaleX(0); }
.motion-on .pillar + .pillar::before { transform: scaleY(0); }

/* Il disegno lo fa il CSS: GSAP accende una classe e basta. Un secondo
   e mezzo per la riga lunga, poco meno per le verticali — il tempo di
   una riga tirata a mano, non di un effetto. */
.pillars::before,
.pillar + .pillar::before { transition: transform 1.4s var(--ease); }
.motion-on .pillars.is-drawn::before { transform: scaleX(1); }
.motion-on .pillar.is-drawn::before { transform: scaleY(1); }

.pillar__index {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  color: color-mix(in srgb, var(--bone) 45%, transparent);
  margin-bottom: 1rem;
}
/* Erano grandi quanto tutto il resto: tre colonne indistinguibili.
   Il nome e' la cosa che si legge per prima, e adesso lo sembra. */
.pillar__name {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 400;
  line-height: 1.15em;
  margin-bottom: 0.9rem;
}
.pillar__body {
  font-size: var(--fs-small);
  line-height: 1.7em;
  max-width: 28ch;
  /* Pareggia la lunghezza delle righe invece di lasciare il rag al caso:
     tre colonne accostate si leggono come tre blocchi, non come tre
     paragrafi di fortuna. */
  text-wrap: balance;
}
@media (max-width: 48.75em) {
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .pillar__body { max-width: 46ch; }
}

/* ---- EDITORIAL: half text / half macro ------------------ */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: calc(var(--grid-gap) * 2);
}
.editorial__copy { max-width: 38ch; }
.editorial__copy .h2 { margin-bottom: 1.5rem; }
.editorial__specs {
  margin: 2rem 0;
  border-top: var(--hair);
}
.editorial__specs div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--stone) 45%, transparent);
  font-size: var(--fs-small);
}
.editorial__specs dt { color: var(--stone); }
.editorial__specs dd { margin: 0; font-family: var(--ff-mono); font-size: var(--fs-small); }
@media (max-width: 56.25em) {
  .editorial { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .editorial__copy { max-width: 46ch; }
}

/* ---- LOOKBOOK: full-width images in sequence ------------ */
.lookbook__item + .lookbook__item { margin-top: 1.5rem; }
.lookbook__cap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--stone);
}
.lookbook__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
}
@media (max-width: 48.75em) { .lookbook__pair { grid-template-columns: minmax(0, 1fr); } }

/* ---- PRESS: greyscale, uniform size --------------------- */
.press {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2.25rem 2.5rem;
  border-block: var(--hair);
  padding-block: 3rem;
}
.press__logo {
  font-family: var(--ff-display);
  /* five names have to sit on one line at 1440 — uniform size, per brief */
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  filter: grayscale(1);
  transition: color 0.4s var(--ease);
}
.press__logo:hover { color: var(--ink); }

/* ---- INSTAGRAM: 4x2 ------------------------------------- */
.insta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.insta a { overflow: hidden; }
.insta .ph { transition: transform 0.8s var(--ease); }
.insta a:hover .ph { transform: scale(1.04); }
@media (max-width: 35em) { .insta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- NEWSLETTER ----------------------------------------- */
.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: end;
  border-top: var(--hair);
  padding-top: 3rem;
}
@media (max-width: 48.75em) { .newsletter { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* ---- Page head (shop, about, cart) ---------------------- */
.page-head {
  padding-block: 4rem 3.5rem;
  border-bottom: var(--hair);
}
.page-head__title { margin-bottom: 1.25rem; }
.page-head .lede { color: var(--ink); }

/* ---- SHOP -----------------------------------------------
   La barra col filtro per categoria stava qui. Su sei prodotti
   divideva il catalogo in sei gruppi da uno, e "All" era l'unica
   scelta con senso: un filtro che non filtra niente. Se un domani
   i capi diventassero trenta, va rimessa — e' quello il momento in
   cui comincia a servire. */

/* ---- PRODUCT -------------------------------------------- */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: calc(var(--grid-gap) * 2);
  align-items: start;
  padding-block: 3rem var(--section);
}

/* Gallery scrolls vertically; the panel beside it is sticky */
.pdp__gallery { display: grid; gap: 1rem; }
.pdp__frame { overflow: hidden; }
.pdp__frame .ph { transition: transform 1.1s var(--ease); }
.pdp__frame:hover .ph { transform: scale(1.06); }   /* zoom on hover */

.pdp__panel {
  position: sticky;
  top: 7rem;
  padding-bottom: 2rem;
}
.pdp__cat {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1rem;
}
.pdp__title { margin-bottom: 1rem; }
.pdp__price {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  margin-bottom: 1.5rem;
}
.pdp__intro {
  font-size: var(--fs-body);
  line-height: 1.65em;
  max-width: 42ch;
  margin-bottom: 2rem;
}
/* The composition line, set almost like code */
.pdp__composition {
  border-top: var(--hair);
  border-bottom: var(--hair);
  padding: 1rem 0;
  margin-bottom: 2.5rem;
}
.pdp__opt { margin-bottom: 2rem; }
.pdp__opt-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.pdp__opt-value { font-size: var(--fs-small); }
.pdp__actions { display: grid; gap: 0.75rem; margin-bottom: 2.5rem; }
.pdp__ship {
  font-size: var(--fs-micro);
  color: var(--stone);
  text-align: center;
}

@media (max-width: 56.25em) {
  .pdp {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding-bottom: 6rem;
  }
  .pdp__panel { position: static; }
}

/* Sticky buy bar: mobile only, and only once the page has scrolled */
.buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  display: none;
  align-items: center;
  gap: 1rem;
  background: color-mix(in srgb, var(--bone) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: var(--hair);
  padding: 0.75rem var(--gutter);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.buybar[data-show="true"] { transform: none; }
.buybar__meta { flex: 1; min-width: 0; }
.buybar__name {
  font-size: var(--fs-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buybar__price { font-size: var(--fs-micro); color: var(--stone); font-variant-numeric: tabular-nums; }
.buybar .btn { min-height: 2.875rem; padding-inline: 1.25rem; }
@media (max-width: 56.25em) { .buybar { display: flex; } }

/* Cross-sell: two or three, never more */
.cross { border-top: var(--hair); padding-top: 3rem; }
.cross__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (max-width: 48.75em) { .cross__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 28.75em) { .cross__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- CART ----------------------------------------------- */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: calc(var(--grid-gap) * 2);
  align-items: start;
  padding-block: 3.5rem;
}
@media (max-width: 56.25em) { .cart-layout { grid-template-columns: minmax(0, 1fr); gap: 3rem; } }

.line {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: var(--hair);
  align-items: start;
}
.line:first-child { border-top: var(--hair); }
.line__media .ph { aspect-ratio: 3 / 4; }
.line__name { font-size: var(--fs-body); margin-bottom: 0.4rem; display: inline-block; }
.line__opts { font-size: var(--fs-small); color: var(--stone); margin-bottom: 1rem; }
.line__controls { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.line__remove {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--stone);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.line__remove:hover { color: var(--ink); border-bottom-color: var(--ink); }
.line__price { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.line__unit { display: block; font-size: var(--fs-micro); color: var(--stone); margin-top: 0.3rem; }
@media (max-width: 35em) {
  .line { grid-template-columns: 5rem minmax(0, 1fr); }
  .line__price { grid-column: 2; text-align: left; }
}

.summary {
  border: var(--hair);
  padding: 2rem;
  position: sticky;
  top: 7rem;
}
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  font-size: var(--fs-small);
}
.summary__row--total {
  border-top: 1px solid var(--ink);
  margin-top: 0.75rem;
  padding-top: 1rem;
  font-size: var(--fs-body);
  font-weight: 500;
}
.summary .num { font-variant-numeric: tabular-nums; }
.summary__note { margin-top: 1.25rem; font-size: var(--fs-micro); color: var(--stone); line-height: 1.65em; }
.summary .btn { margin-top: 1.5rem; }
@media (max-width: 56.25em) { .summary { position: static; } }

.empty {
  padding-block: 6rem;
  text-align: center;
  border-block: var(--hair);
}
.empty .h2 { margin-bottom: 1rem; }
.empty p { color: var(--stone); margin-bottom: 2rem; }

/* ---- CHECKOUT ------------------------------------------- */
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: calc(var(--grid-gap) * 2);
  align-items: start;
  padding-block: 3.5rem;
}
@media (max-width: 56.25em) { .checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 3rem; } }

.fieldset { border: 0; padding: 0; margin: 0 0 3rem; }
.fieldset legend {
  padding: 0 0 1.5rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--stone);
}

.demo-note {
  border: 1px dashed var(--stone);
  padding: 1.25rem 1.5rem;
  margin-bottom: 3rem;
  font-size: var(--fs-small);
  line-height: 1.65em;
  max-width: 52ch;
}

.mini { display: grid; gap: 1rem; }
.mini__item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  font-size: var(--fs-small);
}
.mini__qty { color: var(--stone); }

.confirm {
  padding-block: 5rem;
  max-width: 46ch;
}
.confirm .h2 { margin-bottom: 1.5rem; }
.confirm__ref {
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  border-block: var(--hair);
  padding: 1rem 0;
  margin: 2rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* ---- ABOUT ---------------------------------------------- */
.prose { max-width: var(--maxw-text); }
.prose .h2 { margin: 3.5rem 0 1.25rem; }
.prose .h2:first-child { margin-top: 0; }
.prose h3 { margin: 2.5rem 0 0.75rem; }
.prose p { line-height: 1.75em; }
.prose ul { padding-left: 1.1rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.5rem; line-height: 1.7em; }

.two-col {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--grid-gap);
  border-top: var(--hair);
  padding-top: 2.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 48.75em) { .two-col { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }


/* ============================================================
   IL PREZZO CHE SI SCOMPONE
   Il terzo pilastro del marchio trasformato in interazione: il
   prezzo si pinna e si spacca nelle sue quattro voci mentre
   scrolli. Il margine — la voce che nessuno stampa mai — arriva
   per ultimo ed è l'ultima cosa a fermarsi.

   Tutti gli stati di partenza sono dentro `.motion-on`: senza
   GSAP la sezione si legge come una tabella completa e ferma.
   ============================================================ */
.priceview {
  position: relative;
  border-top: var(--hair);
}
.priceview__pin {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 6rem;
}
.priceview__label { margin-bottom: 3rem; }

.priceview__total {
  display: block;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(4rem, 16vw, 15rem);
  line-height: 0.9em;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  transform-origin: 0 50%;
}

.priceview__rows {
  margin-top: 3.5rem;
  border-top: var(--hair);
}
.priceview__row {
  display: grid;
  /* la colonna del nome deve reggere la nota senza spezzarla in tre
     righe; la barra è il soggetto, quindi si prende il resto */
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) minmax(0, 7rem);
  align-items: center;
  gap: 2rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--stone) 45%, transparent);
}
.priceview__name { font-size: var(--fs-small); }
.priceview__note {
  display: block;
  font-size: var(--fs-micro);
  line-height: 1.5em;
  color: var(--stone);
  margin-top: 0.3rem;
  max-width: 30ch;
}
.priceview__track {
  position: relative;
  height: 3px;
  background: color-mix(in srgb, var(--stone) 30%, transparent);
}
.priceview__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--share, 0%);
  background: var(--stone);
  transform-origin: 0 50%;
}
.priceview__row[data-part="margin"] .priceview__fill { background: var(--depth); }
.priceview__value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
}
.priceview__coda {
  margin-top: 2.5rem;
  font-size: var(--fs-small);
  color: var(--stone);
  max-width: 44ch;
}

.motion-on .priceview__row { opacity: 0; }
.motion-on .priceview__fill { transform: scaleX(0); }
.motion-on .priceview__coda { opacity: 0; }

@media (max-width: 43.75em) {
  .priceview__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 5rem);
    gap: 0.75rem 1rem;
  }
  .priceview__track { grid-column: 1 / -1; }
}


/* ============================================================
   L'ANTEPRIMA — la fascia di fotogrammi sfalsati
   Pannelli di larghezza e altezza diverse su un binario
   orizzontale, come nello schizzo. Entrano tutti lentamente ma
   ognuno con la sua velocita: e la differenza fra le velocita a
   dare l'impressione di profondita, non un effetto aggiunto.
   ============================================================ */
.preview { position: relative; margin-top: 1rem; }

.preview__track {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  /* Trascinando non si seleziona: senza questo il gesto lascia dietro
     una scia di testo e immagini evidenziati. */
  user-select: none;
  -webkit-user-select: none;
  /* Lo scorrimento verticale resta al browser: si trascina solo
     di lato. */
  touch-action: pan-y;
}
.preview__track::-webkit-scrollbar { display: none; }
.preview__track[data-dragging="true"] { cursor: grabbing; }

/* Allineati su un asse comune, non sfalsati: le larghezze restano
   diverse, e sono quelle a dare il ritmo alla fila. */
.preview__item {
  flex: 0 0 auto;
  width: var(--w, 20rem);
  margin: 0;
  will-change: transform, opacity;
}
/* Il fotogramma è un link: apre il capo. Prima era muto, e su un
   nastro di fotografie di prodotto il gesto ovvio è cliccarne una. */
.preview__link { display: block; }

.preview__cap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--stone);
}

/* Le due sfumature dicono che il binario continua oltre il bordo */
.preview::before,
.preview::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--gutter);
  z-index: 2;
  pointer-events: none;
}
.preview::before { left: 0; background: linear-gradient(to right, var(--bone), transparent); }
.preview::after { right: 0; background: linear-gradient(to left, var(--bone), transparent); }

/* Senza movimento i pannelli sono semplicemente li, tutti visibili. */
.motion-on .preview__item { opacity: 0; }

@media (max-width: 48.75em) {
  .preview__track { gap: 1.25rem; }
  .preview__item { width: calc(var(--w, 20rem) * 0.66); }
}

/* ============================================================
   LA HERO — texture, fotogrammi, titolo, campo
   Quattro strati impilati: il fondo dietro tutto, la fila di
   fotogrammi in alto, la tipografia al centro, la riga di servizio
   in fondo. La distribuzione la fa space-between, non altezze
   fissate a mano.
   ============================================================ */
.moment--hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  /* Risale sotto l'header, che essendo sticky resta sopra: cosi la
     texture arriva davvero al bordo alto dello schermo invece di
     fermarsi a una banda Bone di cinque rem. */
  margin-top: -5rem;
  padding-block: 8.5rem 1.5rem;
  overflow: clip;
}
.moment--hero > * { position: relative; z-index: 1; }

/* Il fondo. Tenuto basso: deve dare materia alla pagina, non
   diventare il soggetto — e l'Ink del titolo deve restare nero. */
.hero__ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Bassa e leggermente sfocata: deve restare trama, non tornare a
     essere una fotografia con un soggetto da guardare. */
  opacity: 0.22;
  filter: blur(1px);
}
.hero__ground .shot { height: 100%; }
.shot--ground { aspect-ratio: auto; }
.shot--ground img { height: 100%; }

/* I fotogrammi nella hero stanno piu' stretti che in una sezione
   dedicata: sopra e sotto devono restare titolo, campo e riga. */
.moment--hero .preview { margin-top: 0; }
.moment--hero .preview__item { width: calc(var(--w, 20rem) * var(--frame-scale, 0.46)); }
.moment--hero .preview__cap { display: none; }

.hero2__title { font-size: clamp(2.5rem, 7.5vw, 6.5rem); }
.hero2__sub {
  font-size: 1.0625rem;
  line-height: 1.5em;
  /* Il max-width lo teneva stretto ma ancorato a sinistra: senza i
     margini automatici il testo non segue il centro del titolo. */
  max-width: 38ch;
  margin-inline: auto;
  margin-top: 1.25rem;
}

/* ---- La riga di servizio in fondo ------------------------- */
.hero__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* Due voci, ai due lati: il link al lookbook e' salito sotto il
     titolo, dove la reference mette il suo invito. */
  justify-content: space-between;
  gap: 0.5rem 2rem;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Era Stone su una texture chiara: troppo poco stacco. Ink al 68%
     resta discreto ma si legge. */
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font-weight: 500;
}
.hero__bar a {
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  padding-bottom: 0.15rem;
}
.hero__bar a:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 48.75em) {
  .moment--hero { padding-block: 7rem 1.25rem; gap: 1rem; }
  .hero__bar a { order: 3; }
}

/* La hero deve stare in UNO schermo, anche basso. Qui il vincolo non
   e' la larghezza ma l'altezza, quindi si interroga quella. Una sola
   variabile governa la scala dei fotogrammi: i tre gradini toccano
   quella, non dieci valori sparsi. */
.moment--hero { --frame-scale: 0.46; }

/* Schermo basso: la hero deve restare una schermata, perche' sopra i
   900px di larghezza lo snap e' acceso e una schermata che sfonda e' il
   caso peggiore — ti riaggancia la cima proprio mentre stai leggendo
   quello che sta sotto. Misurata a 1024x805: 909px. Si stringe il
   nastro, il titolo e le distanze finche' non ci sta. */
@media (max-height: 56em) {
  .moment--hero {
    --frame-scale: 0.3;
    padding-block: 6rem 1rem;
    gap: 0.75rem;
  }
  .hero2__title { font-size: clamp(2.25rem, 5.5vw, 4.5rem); }
  .hero2__sub { margin-top: 0.6rem; }
  .hero2 .label { margin-bottom: 0.5rem; }
  .hero2__cta { margin-top: 1.25rem; }
  .moment--hero .preview__cap { display: none; }
}

@media (max-height: 46em) {
  .moment--hero {
    --frame-scale: 0.27;
    padding-block: 6.5rem 1rem;
    gap: 0.75rem;
  }
  .hero2__title { font-size: clamp(2rem, 5vw, 4rem); }
  .hero2__sub { font-size: 1rem; margin-top: 0.5rem; }
}

/* ============================================================
   404
   Una pagina che dice cosa è successo e dove andare, non un
   vicolo cieco. Occupa lo schermo: un avviso alto due righe in
   cima a una pagina vuota sembra un errore del sito, non una
   risposta.
   ============================================================ */

.notfound {
  min-height: calc(100svh - 16rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
}
.notfound .page-head { max-width: 34ch; }

/* Le due strade: quella piena porta al catalogo, che è la risposta
   vera; la sottile torna a casa. */
.notfound__ways {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

@media (max-width: 35em) {
  .notfound { min-height: calc(100svh - 12rem); gap: 2.5rem; }
  .notfound__ways { gap: 1.25rem; }
  .notfound__ways .btn { width: 100%; text-align: center; }
}