/* =========================================================================
   BEBY PREEMINENCE — Opere di luce
   Direzione artistica: esposizione digitale.
   La fotografia comanda. Il testo accompagna. Il codice sparisce.

   Regole fisse
   · una sola curva di movimento, tre durate
   · nessun angolo arrotondato, nessuna card, nessun riquadro
   · champagne sotto il 3% della superficie
   · cinque corpi display, un corpo testo, un corpo micro. Nient'altro.
   · due soli comportamenti di collegamento: filetto che si ritira, filetto
     che si disegna. Ogni componente sceglie uno dei due.
   ========================================================================= */

:root{
  /* palette */
  --nero:#0A0A09;
  --carbone:#141412;
  --avorio:#F2EFE8;
  --bianco:#F7F5F0;
  --pietra:#B8B2A7;
  --champagne:#A48C68;

  --ink:var(--nero);
  --filo:rgba(10,10,9,.16);

  --luce:var(--avorio);
  --luce-70:rgba(242,239,232,.70);
  --luce-42:rgba(242,239,232,.42);
  --filo-luce:rgba(242,239,232,.18);

  /* caratteri */
  --display:'Bodoni Moda','Bodoni MT','Didot','Times New Roman',serif;
  --sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* ---- scala tipografica: questi sono TUTTI i corpi del sito ---- */
  --s-anno:clamp(5.6rem,16vw,15rem);            /* il 1960, monumento */
  --s-display:clamp(3.5rem,12.6vw,11.6rem);     /* titolo di apertura */
  --s-uno:clamp(2.5rem,6.4vw,6.4rem);           /* H1 interni, nomi collezione */
  --s-due:clamp(1.85rem,3.6vw,3.6rem);          /* H2, nomi progetto */
  --s-tre:clamp(1.35rem,2.1vw,2.1rem);          /* H3, metadati grandi */
  --s-voce:clamp(1.06rem,1.4vw,1.4rem);         /* corsivo, frase di apertura */
  --s-micro:clamp(.75rem,.14vw + .7rem,.8rem);  /* etichette: mai sotto i 12px */
  --s-did:clamp(.78rem,.2vw + .73rem,.86rem);   /* didascalie */
  /* le voci dell'indice: l'unico corpo che non guarda solo la larghezza.
     Su un portatile basso sei voci a 5vw non ci starebbero, e un indice che
     si scorre non e' piu' un indice. */
  --s-indice:clamp(2.4rem,min(5.1vw,7.4svh),5rem);

  --tracking:.16em;                              /* una sola spaziatura maiuscoletta */

  /* movimento */
  --ease:cubic-bezier(.16,1,.3,1);
  --t-corta:.42s;
  --t-media:.9s;
  --t-lunga:1.4s;

  /* misure */
  --gutter:clamp(1.4rem,5.4vw,5.5rem);
  --max:1580px;
  --sezione:clamp(5.6rem,10.5vw,16rem);
  --marchio:clamp(62px,6.4vw,104px);
  --head-h:clamp(96px,9.6vw,150px);

  /* l'indice */
  --indice-num:clamp(2rem,3.2vw,3.4rem);        /* colonna del numero */
  --indice-gap:clamp(1rem,2.8vw,3rem);          /* dove cresce il filetto */
  --indice-passo:clamp(.35rem,.8vw,.85rem);     /* respiro fra una voce e l'altra */

  /* La larghezza della barra di scorrimento, misurata da script.js quando
     l'indice apre e la pagina si blocca. Vale zero sempre, tranne in quel
     momento: e' cio' che tiene fermo il marchio al centro. */
  --barra:0px;

  /* la cordina: passa nel margine, alla stessa ascissa in ogni sezione.
     La percentuale si risolve sulla sezione, non sulla finestra: cosi'
     resta allineata anche quando compare la barra di scorrimento. */
  --filo-x:calc(max(0px,(100% - var(--max)) / 2) + var(--gutter) * .46);

  /* una sola resa fotografica per tutto l'archivio */
  --grado:saturate(.94) contrast(1.05);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bianco);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(.95rem,.34vw + .86rem,1.06rem);
  font-weight:300;
  line-height:1.72;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
html,body{max-width:100%}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--champagne);color:var(--nero)}

/* ---------- impianto ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sezione{padding-block:var(--sezione);position:relative}
.sezione-alta{padding-block:calc(var(--sezione) * 1.42)}
.sezione-bassa{padding-block:calc(var(--sezione) * .58)}
/* Il ritmo verticale non è un metronomo. Tre respiri diversi, scelti:
   respiro    pausa vera prima di un titolo o di una sequenza muta
   dopo-foto  il testo resta vicino alla fotografia che commenta
   bassa      sezioni di servizio e chiusure */
.sezione-respiro{padding-block:calc(var(--sezione) * 2) calc(var(--sezione) * 1.42)}
.sezione-dopo-foto{padding-top:calc(var(--sezione) * .72)}

.fondo-scuro{background:var(--nero);color:var(--luce)}
.fondo-carbone{background:var(--carbone);color:var(--luce)}
.fondo-avorio{background:var(--avorio);color:var(--ink)}
.fondo-bianco{background:var(--bianco);color:var(--ink)}

.griglia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(.9rem,1.8vw,2rem)}
/* colonne: classi, non stili in riga, cosi' le media query possono intervenire */
.gc-1-4{grid-column:1 / span 4}
.gc-1-5{grid-column:1 / span 5}
.gc-1-6{grid-column:1 / span 6}
.gc-1-7{grid-column:1 / span 7}
.gc-1-8{grid-column:1 / span 8}
.gc-6-7{grid-column:6 / span 7}
.gc-7-5{grid-column:7 / span 5}
.gc-8-4{grid-column:8 / span 4}
.gc-7-6{grid-column:7 / span 6}
.gc-9-4{grid-column:9 / span 4}
.gc-piena{grid-column:1 / -1}
.gc-fine{align-self:end}

/* ---------- tipografia ---------- */
.display{
  font-family:var(--display);
  font-weight:400;
  font-optical-sizing:auto;
  line-height:.92;
  letter-spacing:-.021em;
  text-wrap:balance;
}
.display em,.display i{font-style:italic;font-weight:400}

.t-apertura{font-size:var(--s-display);line-height:.82;letter-spacing:-.038em}
.t-uno{font-size:var(--s-uno);line-height:.9;letter-spacing:-.03em}
.t-due{font-size:var(--s-due);line-height:1;letter-spacing:-.024em}
.t-tre{font-size:var(--s-tre);line-height:1.12;letter-spacing:-.016em}

.micro{
  font-family:var(--sans);
  font-size:var(--s-micro);
  font-weight:400;
  line-height:1.5;
  letter-spacing:var(--tracking);
  text-transform:uppercase;
}
.tenue{color:rgba(10,10,9,.45);color:color-mix(in srgb,currentColor 48%,transparent)}

.testo{max-width:42ch;color:rgba(10,10,9,.72);color:color-mix(in srgb,currentColor 74%,transparent);line-height:1.78}
.testo + .testo{margin-top:1.15em}
.testo-largo{max-width:56ch}

.voce{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:var(--s-voce);
  line-height:1.42;
  letter-spacing:-.008em;
  max-width:28ch;
}

/* ---------- tavole fotografiche ---------- */
.tavola{position:relative;margin:0}
.telaio{position:relative;overflow:hidden;background:var(--carbone)}
.telaio img{width:100%;height:100%;object-fit:cover}
.telaio-16{aspect-ratio:16/9}
.telaio-32{aspect-ratio:3/2}
.telaio-43{aspect-ratio:4/3}
.telaio-34{aspect-ratio:3/4}
.telaio-45{aspect-ratio:4/5}
.telaio-11{aspect-ratio:1/1}

/* Le fotografie vengono da anni e da fotografi diversi: chi caldo, chi
   freddo, chi piatto. Una sola gradazione e una sola vignettatura le
   portano tutte nello stesso punto, senza ritoccare un file. */
.telaio img,.apertura-sfondo img{filter:var(--grado)}
.telaio::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(116% 94% at 50% 42%,transparent 54%,rgba(10,10,9,.30) 100%);
}

/* Didascalia: minuscolo, non maiuscoletto. Prima riga il fatto, seconda
   riga il dettaglio, solo quando serve davvero. Nessun trattino iniziale. */
.didascalia{
  display:block;
  margin-top:clamp(.8rem,1.3vw,1.2rem);
  font-family:var(--sans);
  font-size:var(--s-did);
  font-weight:300;
  letter-spacing:.004em;
  line-height:1.55;
  color:rgba(10,10,9,.58);
  color:color-mix(in srgb,currentColor 62%,transparent);
  max-width:36ch;
}
.didascalia span{display:block}
.didascalia .d-sec{color:color-mix(in srgb,currentColor 68%,transparent)}
/* la didascalia spostata resta, ma solo dove la tavola la regge */
.didascalia-lontana{margin-top:clamp(1.6rem,4vw,3.6rem)}

/* ---------- collegamenti editoriali (nessun bottone) ----------
   comportamento A: il filetto c'è e si ritira. Per i link di testo. */
.link{
  display:inline-flex;
  align-items:baseline;
  gap:.7em;
  position:relative;
  font-family:var(--sans);
  font-size:clamp(.76rem,.16vw + .71rem,.82rem);
  font-weight:400;
  letter-spacing:var(--tracking);
  text-transform:uppercase;
  padding:.35em 0 .62em;
  color:inherit;
}
.link::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:currentColor;
  transform-origin:right center;
  transition:transform var(--t-media) var(--ease);
}
.link .frec{
  display:inline-block;
  transition:transform var(--t-media) var(--ease);
  font-family:var(--sans);
}
@media (hover:hover){
  .link:hover::after,.invia:hover::after{animation:filo-ritira 1.1s var(--ease)}
  .link:hover .frec{transform:translate(.3em,-.3em)}
}
@keyframes filo-ritira{
  0%{transform:scaleX(1);transform-origin:right center}
  46%{transform:scaleX(0);transform-origin:right center}
  47%{transform:scaleX(0);transform-origin:left center}
  100%{transform:scaleX(1);transform-origin:left center}
}
.link-oro::after{background:var(--champagne)}

/* comportamento B: il filetto non c'è e si disegna. Per navigazione e piede. */
.filetto-nasce{position:relative}
.filetto-nasce::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform var(--t-media) var(--ease);
}
@media (hover:hover){
  .filetto-nasce:hover::after,.filetto-nasce:focus-visible::after{transform:scaleX(1);transform-origin:left center}
}

/* ============================ TESTATA ============================
   Non una barra di navigazione: la soglia della Maison. Tre presenze e
   nient'altro — una nota a sinistra, il marchio al centro, l'indice a destra.

   Il marchio NON e' centrato da uno space-between: cosi' sarebbe il baricentro
   di cio' che gli sta accanto, e slitterebbe ogni volta che la parola a destra
   cambia larghezza (Indice diventa Chiudi, la nota sparisce sul telefono). E'
   posizionato al 50% e riportato indietro di meta' della propria larghezza:
   sta sull'asse dello schermo per costruzione, non per equilibrio.

   Per la stessa ragione la testata si stringe di --barra quando l'indice apre
   e la barra di scorrimento sparisce: senza, il centro si sposterebbe di sette
   pixel proprio mentre lo si sta guardando. */
.testata{
  position:fixed;
  top:0;left:0;right:var(--barra);
  z-index:95;              /* sopra l'indice: il marchio presiede, il segno si fa chiusura */
  display:flex;
  align-items:center;
  min-height:var(--head-h);
  color:var(--luce);
  transition:color var(--t-media) var(--ease),min-height var(--t-media) var(--ease);
  pointer-events:none;
}
.testata > .wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(1rem,3vw,3rem);
  width:100%;
  pointer-events:none;
}
.testata a,.testata button{pointer-events:auto}
.testata[data-inchiostro="scuro"]{color:var(--ink)}
/* con l'indice aperto il fondo e' nero comunque, qualunque sezione ci sia sotto */
html[data-indice="aperto"] .testata{color:var(--luce)}
html[data-indice="aperto"] .velo-testata{opacity:0}

/* Scorrendo la testata non prende un fondo: si ritira di poco. */
.testata.ridotta{min-height:calc(var(--head-h) * .84)}

.velo-testata{
  position:fixed;
  inset:0 0 auto 0;
  height:calc(var(--head-h) * 1.9);
  z-index:69;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,9,.60) 0%,rgba(10,10,9,.34) 38%,rgba(10,10,9,.12) 74%,rgba(10,10,9,0) 100%);
  opacity:1;
  transition:opacity var(--t-media) var(--ease);
}
.testata[data-inchiostro="scuro"] ~ .velo-testata{opacity:0}

/* la nota: l'unica cosa a sinistra. Un fatto, non un collegamento. */
.testata-nota{
  color:rgba(242,239,232,.46);
  color:color-mix(in srgb,currentColor 46%,transparent);
  white-space:nowrap;
}

/* marchio: mascherato, il file originale non viene mai alterato */
.testata-marchio{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  display:block;
}
.marchio{
  display:block;
  width:var(--marchio);
  height:var(--marchio);
  background-color:currentColor;
  -webkit-mask:url(assets/img/logo-nero.svg) center/contain no-repeat;
  mask:url(assets/img/logo-nero.svg) center/contain no-repeat;
  transition:width var(--t-media) var(--ease),height var(--t-media) var(--ease);
}
.testata.ridotta .marchio{width:calc(var(--marchio) * .84);height:calc(var(--marchio) * .84)}

/* ---------------------------- IL SEGNO DELL'INDICE ----------------------------
   Non tre lineette. Due filetti di lunghezza diversa, composti come il filetto
   doppio di un frontespizio: al passaggio si scambiano le lunghezze e prendono
   aria, a indice aperto ruotano in una croce sottile. Un elemento solo, tre
   stati, nessuna icona presa altrove.
   L'ordine delle regole non e' casuale: base, passaggio, aperto, aperto in
   passaggio. Ognuna deve poter vincere la precedente. */
.apri-indice{
  display:inline-flex;
  align-items:center;
  margin-left:auto;                  /* resta a destra anche quando la nota non c'e' */
  gap:clamp(.75rem,1vw,1.05rem);
  font-family:var(--sans);
  font-size:var(--s-micro);
  font-weight:400;
  letter-spacing:var(--tracking);
  text-transform:uppercase;
  padding:1.15rem 0 1.15rem 1.4rem;  /* area toccabile: il testo da solo dava 20px */
}
.apri-parola{
  display:grid;                      /* le due parole nella stessa cella: nessuno scarto */
  overflow:hidden;
  line-height:1.3;
  transition:letter-spacing var(--t-media) var(--ease);
}
.apri-p{
  grid-area:1/1;
  display:block;
  white-space:nowrap;
  transition:transform var(--t-media) var(--ease),opacity var(--t-corta) var(--ease);
}
.apri-p-b{transform:translateY(115%);opacity:0}
html[data-indice="aperto"] .apri-p-a{transform:translateY(-115%);opacity:0}
html[data-indice="aperto"] .apri-p-b{transform:none;opacity:1}

.apri-segno{position:relative;display:block;width:26px;height:16px;flex:none}
.apri-indice .apri-segno i{
  position:absolute;left:0;right:0;top:50%;margin-top:-.5px;
  height:1px;
  background:currentColor;
  transform-origin:center;
  transition:transform var(--t-media) var(--ease);
}
.apri-indice .apri-segno i:first-child{transform:translateY(-3.5px)}
.apri-indice .apri-segno i:last-child{transform:translateY(3.5px) scaleX(.54)}
@media (hover:hover){
  .apri-indice:hover .apri-parola,
  .apri-indice:focus-visible .apri-parola{letter-spacing:.3em}
  .apri-indice:hover .apri-segno i:first-child,
  .apri-indice:focus-visible .apri-segno i:first-child{transform:translateY(-4.6px) scaleX(.54)}
  .apri-indice:hover .apri-segno i:last-child,
  .apri-indice:focus-visible .apri-segno i:last-child{transform:translateY(4.6px) scaleX(1)}
}
html[data-indice="aperto"] .apri-indice .apri-segno i:first-child{transform:rotate(31deg) scaleX(.8)}
html[data-indice="aperto"] .apri-indice .apri-segno i:last-child{transform:rotate(-31deg) scaleX(.8)}
@media (hover:hover){
  html[data-indice="aperto"] .apri-indice:hover .apri-segno i:first-child,
  html[data-indice="aperto"] .apri-indice:focus-visible .apri-segno i:first-child{transform:rotate(34deg) scaleX(.88)}
  html[data-indice="aperto"] .apri-indice:hover .apri-segno i:last-child,
  html[data-indice="aperto"] .apri-indice:focus-visible .apri-segno i:last-child{transform:rotate(-34deg) scaleX(.88)}
}

/* Senza JavaScript l'indice non si apre: la navigazione torna in chiaro,
   sotto al marchio. Il sito resta completo, come tutto il resto. */
.menu-scorta{
  position:fixed;
  top:var(--head-h);
  left:0;right:0;
  z-index:94;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.4rem clamp(1.1rem,2.4vw,2.4rem);
  padding-inline:var(--gutter);
  color:var(--luce);
}

/* ============================ L'INDICE ============================
   L'indice di un catalogo, non un pannello di navigazione: sei voci
   numerate, la riga d'apertura del capitolo a fianco, la tavola del
   frontespizio che compare al passaggio.

   L'apertura e' in tre tempi — la superficie scende in diagonale dall'angolo
   dove sta il segno, la luce entra piano da quello stesso angolo, e solo dopo
   le voci salgono da sotto una maschera, una per volta. La chiusura ripercorre
   gli stessi tempi al contrario e piu' svelta.

   Lo stato lo tiene sempre un attributo, mai un'animazione (data-stato:
   chiuso · aperto · chiude · esce). "esce" e' la chiusura di quando si va da
   qualche parte: le voci se ne vanno, la superficie resta nera e ci si passa
   attraverso senza rivedere la pagina di partenza. */
.indice{
  position:fixed;
  top:0;left:0;right:var(--barra);bottom:0;
  z-index:90;
  color:var(--luce);
  display:flex;
  flex-direction:column;
  padding:calc(var(--head-h) + clamp(.6rem,1.8vw,1.5rem)) 0 clamp(1.2rem,3vw,2.2rem);
  visibility:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.indice[data-stato="aperto"],
.indice[data-stato="chiude"],
.indice[data-stato="esce"]{visibility:visible}

/* la superficie: fissa, cosi' non scorre col contenuto sugli schermi bassi.
   La tendina cala in diagonale — il lato destro, dove sta il segno, di 22%
   dell'altezza in anticipo su quello sinistro. */
.indice-superficie{
  position:fixed;
  inset:0;
  background:var(--nero);
  clip-path:polygon(0 0,100% 0,100% 0,0 -22%);
}
.indice[data-stato="aperto"] .indice-superficie,
.indice[data-stato="esce"] .indice-superficie{
  clip-path:polygon(0 0,100% 0,100% 122%,0 100%);
  transition:clip-path var(--t-media) var(--ease);
}
.indice[data-stato="chiude"] .indice-superficie{
  transition:clip-path var(--t-corta) var(--ease);
  transition-delay:250ms;            /* prima se ne vanno le voci */
}

/* la luce: non un bagliore, una stanza che si scalda dall'angolo in alto a
   destra. Champagne sotto il 3%, come ovunque nel sito. */
.indice-luce{
  position:fixed;
  inset:0;
  background:
    radial-gradient(74% 58% at 90% -8%,rgba(164,140,104,.22),rgba(164,140,104,.06) 44%,rgba(164,140,104,0) 72%),
    radial-gradient(120% 96% at 96% -4%,rgba(242,239,232,.05),rgba(242,239,232,0) 60%);
  opacity:0;
  transform:scale(1.14);
  transform-origin:92% 0;
  transition:opacity var(--t-corta) var(--ease);
}
.indice[data-stato="aperto"] .indice-luce,
.indice[data-stato="esce"] .indice-luce{
  opacity:1;
  transform:scale(1);
  transition:opacity var(--t-lunga) var(--ease) 120ms,transform 2.1s var(--ease) 120ms;
}

/* Stessa misura del .wrap del sito — larghezza massima e margine — perche'
   i numeri dell'indice devono cadere sulla stessa ascissa di tutto il resto.
   Il margine automatico centra anche in verticale, e a differenza di
   justify-content non taglia il contenuto quando non ci sta. */
.indice-dentro{
  position:relative;                 /* sopra superficie e luce */
  width:100%;
  max-width:var(--max);
  margin:auto;
  padding-inline:var(--gutter);
}
.indice-conca{
  display:flex;
  align-items:center;
  gap:clamp(2rem,4vw,4.5rem);
}
.indice-nav{flex:1 1 auto;min-width:0}

.indice-riga{position:relative}
.indice-riga > a{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  column-gap:var(--indice-gap);
  padding-block:var(--indice-passo);
  transition:transform var(--t-media) var(--ease);
}
.indice-nome{
  display:block;
  overflow:hidden;                   /* la maschera: il nome sale da sotto */
  padding-bottom:.16em;
  margin-bottom:-.16em;
  font-family:var(--display);
  font-weight:400;
  font-size:var(--s-indice);
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--luce);
  transition:color var(--t-media) var(--ease);
}
.indice-nome > span{display:block}
.indice-eco{
  text-align:right;
  color:var(--luce-42);
  white-space:nowrap;
  transition:color var(--t-media) var(--ease);
}

/* La tavola: il frontespizio del capitolo, la stessa fotografia con cui la
   pagina si apre. Compare da sotto una maschera, come ogni tavola del sito.
   Non e' una galleria: e' un dettaglio di scena, e sta solo dove c'e' spazio
   e un puntatore vero. */
.indice-lastra{
  position:relative;
  flex:none;
  display:none;
  width:min(22vw,17.5rem);
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--nero);
  opacity:0;
  transition:opacity var(--t-media) var(--ease);
}
.indice-lastra.visibile{opacity:1}
.indice-lastra img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:var(--grado);
  opacity:0;
  transform:scale(1.06);
  clip-path:inset(0 0 100% 0);
  transition:opacity var(--t-media) var(--ease),transform 1.9s var(--ease),clip-path var(--t-lunga) var(--ease);
}
.indice-lastra img.sopra{opacity:1;transform:scale(1);clip-path:inset(0 0 0 0)}

/* Una sola interazione: la voce diventa protagonista e le altre passano
   indietro. Nessuna sottolineatura, nessun ingrandimento. */
@media (hover:hover) and (pointer:fine){
  .indice-riga > a:hover,
  .indice-riga > a:focus-visible{transform:translateX(clamp(.4rem,.9vw,.9rem))}
  .indice-riga > a:hover .indice-eco,
  .indice-riga > a:focus-visible .indice-eco{color:var(--luce-70)}
  /* le altre si spengono solo quando una voce e' davvero in mano */
  .indice.in-mano .indice-nome{color:var(--luce-42)}
  .indice.in-mano .indice-riga.attiva .indice-nome{color:var(--luce)}
}
/* la voce della pagina in cui si e' gia': un filetto champagne sotto il nome */
.indice-riga > a[aria-current="page"] .indice-nome > span{text-decoration:underline;text-decoration-color:var(--champagne);text-decoration-thickness:1px;text-underline-offset:.14em}

.indice-piede{
  margin-top:clamp(2rem,4.6vw,3.4rem);
  padding-top:clamp(1rem,2vw,1.5rem);
  border-top:1px solid var(--filo-luce);
  display:flex;
  flex-wrap:wrap;
  gap:.8rem 2.4rem;
  align-items:baseline;
  color:var(--luce-42);
}

/* --------------------------- i tempi dell'indice ---------------------------
   Apertura: superficie, luce, poi le voci una per volta, per ultimo il piede.
   Chiusura: l'ordine si rovescia e le durate si accorciano. I millisecondi
   qui e quelli in script.js sono la stessa sequenza: si cambiano insieme. */
.indice-nome > span{transform:translateY(106%)}
.indice-eco{opacity:0;transform:translateY(.6rem)}
.indice-piede{opacity:0;transform:translateY(.9rem);transition:opacity var(--t-media) var(--ease),transform var(--t-media) var(--ease)}

.indice[data-stato="aperto"] .indice-nome > span{
  transform:none;
  transition:transform var(--t-media) var(--ease);
  transition-delay:calc(260ms + var(--i,0) * 62ms);
}
.indice[data-stato="aperto"] .indice-eco{
  opacity:1;transform:none;
  transition:color var(--t-media) var(--ease),
             opacity var(--t-media) var(--ease) calc(340ms + var(--i,0) * 62ms),
             transform var(--t-media) var(--ease) calc(340ms + var(--i,0) * 62ms);
}
.indice[data-stato="aperto"] .indice-piede{
  opacity:1;transform:none;
  transition-delay:760ms;
}

.indice[data-stato="chiude"] .indice-nome > span,
.indice[data-stato="esce"] .indice-nome > span{
  transition:transform var(--t-corta) var(--ease);
  transition-delay:calc(var(--j,0) * 34ms);
}
.indice[data-stato="chiude"] .indice-eco,
.indice[data-stato="esce"] .indice-eco{
  transition:opacity var(--t-corta) var(--ease) calc(var(--j,0) * 28ms),
             transform var(--t-corta) var(--ease) calc(var(--j,0) * 28ms);
}
.indice[data-stato="chiude"] .indice-piede,
.indice[data-stato="esce"] .indice-piede{
  transition:opacity var(--t-corta) var(--ease),transform var(--t-corta) var(--ease);
}

/* la tavola vive solo dove c'e' spazio vero e un puntatore vero: sul telefono
   l'indice resta tipografia e basta, non diventa una galleria in miniatura */
@media (hover:hover) and (pointer:fine) and (min-width:1100px){
  .indice-lastra{display:block}
}

/* ============================ APERTURA ============================
   Fotografia, marchio, titolo. Al massimo una riga di servizio.
   Tutto il resto arriva dopo. */
.apertura{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:end;
  overflow:hidden;
  background:var(--nero);
  color:var(--luce);
}
.apertura-sfondo{position:absolute;inset:0;overflow:hidden}
.apertura-sfondo img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  will-change:transform;
}
.apertura-sfondo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,10,9,.24) 0%,rgba(10,10,9,.04) 30%,rgba(10,10,9,.36) 72%,rgba(10,10,9,.78) 100%),
    linear-gradient(90deg,rgba(10,10,9,.18) 0%,rgba(10,10,9,0) 46%);
}
.apertura-corpo{
  position:relative;
  z-index:2;
  padding-bottom:clamp(3rem,7svh,6rem);
  padding-top:calc(var(--head-h) + 2rem);
  width:100%;
}
.apertura-titolo{margin-left:-.055em}
.apertura:not(.apertura-interna) .t-apertura{font-size:clamp(3rem,8.4vw,7.8rem)}
.apertura-sotto{
  margin-top:clamp(1.4rem,3vw,2.4rem);
  color:var(--luce-70);
}
.apertura-riga{
  font-family:var(--sans);
  font-size:var(--s-micro);
  font-weight:400;
  letter-spacing:var(--tracking);
  text-transform:uppercase;
  color:rgba(242,239,232,.66);
}
.apertura-frase{
  font-family:var(--display);
  font-style:italic;
  font-size:var(--s-voce);
  line-height:1.42;
  letter-spacing:-.008em;
  color:var(--luce-70);
  max-width:34ch;
}

/* una sola indicazione di scorrimento, muta: un filetto che cala */
.scorri{
  position:absolute;
  right:var(--gutter);
  bottom:clamp(3rem,7svh,6rem);
  z-index:3;
  width:1px;
  height:clamp(44px,6vw,76px);
  background:rgba(242,239,232,.16);
  overflow:hidden;
}
.scorri::after{
  content:"";position:absolute;left:0;right:0;top:0;height:38%;
  background:rgba(164,140,104,.85);
  animation:cala 4.2s var(--ease) infinite;
}
@keyframes cala{
  0%{transform:translateY(-110%)}
  60%{transform:translateY(268%)}
  100%{transform:translateY(268%)}
}

/* apertura delle pagine interne */
.apertura-interna{min-height:min(84svh,840px)}
.apertura-interna .t-apertura{font-size:clamp(2.8rem,9.2vw,8rem)}
/* la pagina di contatto si apre corta: il modulo deve arrivare subito */
.apertura-breve{min-height:min(62svh,660px)}

/* ---------- tavola intera: il lampadario fotografato isolato su nero.
   Cornice dello stesso nero, immagine dentro (contain), nessuna gradazione e
   nessuna vignettatura: i due neri devono combaciare. ---------- */
.tavola-intera{height:100%}
.tavola-intera .telaio{height:100%;aspect-ratio:auto;background:var(--nero)}
.tavola-intera .telaio img{object-fit:contain;filter:none}
.tavola-intera .telaio::after{display:none}

/* ============================ L'ANNO ============================ */
.anno{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--s-anno);
  line-height:.76;
  letter-spacing:-.05em;
  display:block;
  margin-left:-.04em;
}
.anno-nota{margin-top:clamp(1.4rem,3vw,2.6rem);max-width:26ch}
/* ============================ COLLEZIONI — LOOKBOOK ============================ */
.lookbook{position:relative}
.look-lista{border-bottom:1px solid var(--filo-luce)}
.look-riga{
  display:block;
  position:relative;
  border-top:1px solid var(--filo-luce);
  padding-block:clamp(1.05rem,2.2vw,2.1rem);
}
/* Etichetta sopra, nome sotto, come nell'elenco dei progetti. Sulla stessa
   riga l'etichetta andava a capo solo dietro ai nomi lunghi e quella riga
   diventava piu' alta di tutte le altre: cosi' l'altezza e' identica per
   costruzione, non per fortuna. */
.look-riga > a{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(.45rem,.9vw,.8rem);
}
.look-nome{white-space:nowrap}
.look-nome{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--s-uno);
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--luce);
  transition:color var(--t-media) var(--ease),transform var(--t-media) var(--ease);
}
.look-dati{
  color:var(--luce-42);
  transition:color var(--t-media) var(--ease);
  flex-shrink:0;
}
/* una sola interazione: il nome si accende, gli altri si spengono */
@media (hover:hover) and (pointer:fine){
  .lookbook.in-uso .look-nome{color:var(--luce-42)}
  .lookbook.in-uso .look-riga.attiva .look-nome{color:var(--luce)}
  /* il testo si ferma prima della colonna della lastra; il filetto no */
  .lookbook.in-uso .look-riga > a{
    max-width:calc(100% - min(30vw,25rem) - clamp(1.5rem,3vw,3rem));
  }
}
.look-foto{margin-top:clamp(1rem,3vw,1.6rem)}

/* La lastra segue il puntatore, per scelta di Angelo. Segue liberamente in
   verticale e deriva di pochi pixel in orizzontale restando nella propria
   colonna: se seguisse anche la X coprirebbe i nomi che si stanno leggendo.
   Misura sempre la stessa, per qualunque collezione. */
.look-wrap{position:relative}
.look-lastra{
  position:absolute;
  z-index:6;
  top:0;
  /* allineata al bordo destro del testo, non a quello della finestra */
  right:var(--gutter);
  width:min(30vw,25rem);
  aspect-ratio:16/10;
  transform:translate3d(0,0,0);
  transition:opacity .5s var(--ease);
  will-change:transform;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
  background:var(--nero);
}
.look-lastra.visibile{opacity:1}
/* l'ingrandimento dell'1-3% dentro al ritaglio e' cio' che rende credibile
   lo scambio: senza, sembra un salto */
.look-lastra img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  transform:scale(1.03);
  transition:opacity .55s var(--ease),transform .9s var(--ease);
}
.look-lastra img.sopra{opacity:1;transform:scale(1)}

/* ============================ I LUOGHI ============================ */
.luoghi{
  display:flex;
  flex-wrap:wrap;
  gap:0 clamp(1.4rem,3.4vw,3.6rem);
  padding-block:clamp(2rem,4vw,3.2rem);
  margin-top:clamp(2rem,5vw,4rem);
  border-top:1px solid color-mix(in srgb,currentColor 17%,transparent);
  border-bottom:1px solid color-mix(in srgb,currentColor 17%,transparent);
}
.luoghi li{
  font-family:var(--display);
  font-style:italic;
  font-size:var(--s-tre);
  line-height:1.62;
  letter-spacing:-.012em;
}

/* ============================ NOMI DI PROGETTO E COLLEZIONE ============================
   La citta' (o la materia) e' metadato; il nome e' l'elemento dominante. */
.p-testo{display:block}
.p-citta{display:block;margin-bottom:clamp(.7rem,1.4vw,1.1rem)}
.p-nome{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--s-due);
  line-height:1.04;
  letter-spacing:-.024em;
  display:block;
  text-wrap:balance;
}
.p-testo .didascalia{margin-top:.55rem}

/* ============================ MODULO ============================ */
.modulo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,2.6vw,2.6rem)}
.modulo[hidden]{display:none}   /* come per .partenza: display:grid vince sull'attributo */
.campo{position:relative;display:flex;flex-direction:column;grid-column:span 1}
.campo-pieno{grid-column:1 / -1}
.campo label,.campo-et{
  font-size:var(--s-micro);letter-spacing:var(--tracking);text-transform:uppercase;
  color:color-mix(in srgb,currentColor 48%,transparent);margin-bottom:.7rem;
}
.campo input,.campo textarea{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:300;
  color:inherit;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(10,10,9,.16);
  border-bottom-color:color-mix(in srgb,currentColor 22%,transparent);
  padding:.55rem 0 .85rem;
  border-radius:0;
  transition:border-color var(--t-media) var(--ease);
}
.campo textarea{resize:none;min-height:6.5rem;line-height:1.7}
.campo input:focus,.campo textarea:focus{outline:0;border-color:var(--champagne)}
.campo input::placeholder,.campo textarea::placeholder{color:color-mix(in srgb,currentColor 42%,transparent)}

/* selettore su misura — nessun componente nativo */
.scelta{position:relative}
.scelta-bottone{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:1px solid rgba(10,10,9,.16);
  border-bottom-color:color-mix(in srgb,currentColor 22%,transparent);
  padding:.55rem 0 .85rem;
  font-size:1rem;font-weight:300;
  text-align:left;
  transition:border-color var(--t-media) var(--ease);
}
.scelta-bottone[aria-expanded="true"]{border-color:var(--champagne)}
.scelta-bottone .segno{width:9px;height:9px;position:relative;flex-shrink:0}
.scelta-bottone .segno::before,.scelta-bottone .segno::after{
  content:"";position:absolute;background:currentColor;transition:transform var(--t-media) var(--ease);
}
.scelta-bottone .segno::before{left:0;right:0;top:4px;height:1px}
.scelta-bottone .segno::after{top:0;bottom:0;left:4px;width:1px}
.scelta-bottone[aria-expanded="true"] .segno::after{transform:scaleY(0)}
.scelta-vuota{color:color-mix(in srgb,currentColor 45%,transparent)}
.scelta-lista{
  position:absolute;
  z-index:12;
  top:calc(100% + 1px);
  left:0;right:0;
  background:var(--carbone);
  border:1px solid var(--filo-luce);
  border-top:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .5s var(--ease),opacity .34s var(--ease);
}
.scelta[data-aperta="true"] .scelta-lista{max-height:19rem;opacity:1;overflow:auto}
.scelta-lista li{padding:.85rem 1.1rem;cursor:pointer;font-size:.94rem;color:var(--luce-70);transition:background var(--t-corta) var(--ease),color var(--t-corta) var(--ease)}
.scelta-lista li:hover,.scelta-lista li[aria-selected="true"]{background:rgba(242,239,232,.06);color:var(--luce)}

.invia{
  margin-top:clamp(2rem,4vw,3.4rem);
  display:inline-flex;align-items:baseline;gap:.8em;
  font-size:clamp(.76rem,.16vw + .71rem,.82rem);
  letter-spacing:var(--tracking);text-transform:uppercase;
  padding:.45em 0 .6em;position:relative;
}
.invia::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--champagne);transform-origin:right center;transition:transform var(--t-media) var(--ease)}
.esito{
  margin-top:1.6rem;min-height:1.4rem;color:var(--champagne);
  opacity:0;
  /* il ritardo e' la coda della scena: la riga arriva quando il sigillo
     e' gia' sceso. Non e' un'animazione a deciderlo, e' una transizione:
     se il movimento e' spento (piu' sotto) il ritardo va a zero e la riga
     c'e' subito. */
  transition:opacity var(--t-media) var(--ease) 1.42s;
}
.esito.visibile{opacity:1}

/* ============================== LA PARTENZA ==============================
   Cosa succede quando si preme "Invia la richiesta": il modulo esce di scena
   e al suo posto la cartolina scende nella busta, l'aletta si chiude sopra e
   il sigillo cala col marchio della Maison.

   La busta non e' un disegno importato: sono cinque piani sovrapposti — dorso,
   cartolina, fronte, aletta, sigillo — su fondo carbone, tenuti insieme dai
   filetti che il sito usa dappertutto. L'unico colore e' il champagne del
   sigillo, che qui vale meno di un centesimo della superficie.

   L'ordine dei piani conta: la cartolina passa DIETRO al fronte della busta
   (e' cosi' che sembra entrarci) e l'aletta passa DAVANTI a tutto solo a meta'
   della sua rotazione — lo scambio sta nei fotogrammi chiave, non nel tempo. */
.partenza{display:grid;align-content:center;justify-items:start}
.partenza[hidden]{display:none}   /* display:grid coprirebbe l'attributo */

.busta{
  position:relative;
  width:min(100%,25rem);
  aspect-ratio:1.55;
  perspective:1100px;
  animation:scena-entra .7s var(--ease) both;
}
.busta > span{position:absolute;display:block}

/* la cartolina: parte tutta sopra la busta, inclinata, e ci scivola dentro.
   Sparisce dietro al fronte — e' li' che finisce una lettera imbucata: la si
   vede scendere, non la si vede piu' dopo. */
.cartolina{
  left:7%;right:7%;bottom:8%;height:86%;
  background:var(--avorio);
  z-index:2;
  animation:cartolina-entra .62s cubic-bezier(.5,0,.2,1) .22s both;
  padding:11% 10% 0;
}
.cartolina-filo{position:static;display:block;height:1px;background:var(--champagne);width:38%;margin-bottom:14%}
.cartolina-riga{position:static;display:block;height:1px;background:rgba(10,10,9,.20);margin-bottom:9%}
.cartolina-riga:nth-of-type(2){width:92%}
.cartolina-riga:nth-of-type(3){width:78%}
.cartolina-riga:nth-of-type(4){width:56%}

/* il fronte e' tutta la busta, non la sua meta' bassa: e' quello che nasconde
   la cartolina appena entrata. Due filetti dagli angoli bassi al centro fanno
   le piegature — l'unico disegno, niente contorni in piu'. */
.busta-fronte{
  inset:0;
  background:var(--carbone);
  border:1px solid var(--filo-luce);
  z-index:3;
  overflow:hidden;
}
.busta-fronte::before,.busta-fronte::after{
  content:"";position:absolute;bottom:0;width:61.7%;height:0;
  border-top:1px solid var(--filo-luce);
}
.busta-fronte::before{left:0;transform-origin:left bottom;transform:rotate(-35.9deg)}
.busta-fronte::after{right:0;transform-origin:right bottom;transform:rotate(35.9deg)}

/* l'aletta: un triangolo che ruota attorno al bordo alto della busta */
.busta-aletta{
  left:0;right:0;top:0;height:59%;
  background:var(--carbone);
  background-image:linear-gradient(to bottom,rgba(242,239,232,.07),rgba(242,239,232,0) 76%);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;
  transform:rotateX(180deg);
  z-index:1;
  animation:aletta-chiude .66s var(--ease) .62s both;
}

/* il sigillo: ceralacca champagne, bordo volutamente irregolare, e dentro il
   marchio del cliente — file originale, colorato con la maschera, mai toccato */
.sigillo{
  left:50%;top:59%;
  width:23%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:47% 53% 51% 49% / 52% 48% 52% 48%;
  /* ceralacca, non una biglia: una luce radente in alto a sinistra sopra un
     champagne che si scurisce verso il bordo. */
  background:
    radial-gradient(circle at 36% 28%,rgba(242,239,232,.20),rgba(242,239,232,0) 54%),
    radial-gradient(circle at 50% 54%,var(--champagne) 0%,#8B7550 76%,#6B5939 100%);
  z-index:6;
  display:grid;place-items:center;
  animation:sigillo-cala .44s cubic-bezier(.34,1.3,.5,1) 1.14s both;
}
.sigillo-marchio{
  position:static;
  display:block;          /* uno <span> resta in linea: senza questa riga il
                             marchio impresso e' largo e alto zero */
  width:62%;height:62%;
  background-color:rgba(10,10,9,.58);
  -webkit-mask:url(assets/img/logo-nero.svg) center/contain no-repeat;
          mask:url(assets/img/logo-nero.svg) center/contain no-repeat;
}

@keyframes scena-entra{from{opacity:0}to{opacity:1}}
@keyframes cartolina-entra{
  from{transform:translateY(-112%) rotate(-1.8deg)}
  to{transform:translateY(0) rotate(0)}
}
@keyframes aletta-chiude{
  0%{transform:rotateX(180deg);z-index:1}
  49.9%{z-index:1}
  50%{z-index:5}
  100%{transform:rotateX(0deg);z-index:5}
}
@keyframes sigillo-cala{
  from{opacity:0;transform:translate(-50%,-50%) scale(2.2)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* ============================ CHIUSURA / PIEDE ============================
   Sulle pagine editoriali l'invito è una riga, non un modulo. */
.invito{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:clamp(1.6rem,4vw,4rem);
}
.invito .t-due{max-width:18ch}
.invito-coda{max-width:34ch}


.piede{background:var(--nero);color:var(--luce);padding-top:clamp(3rem,6vw,6rem);overflow:hidden}
.piede-righe{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(2rem,5vw,5rem) clamp(1.5rem,3vw,3rem);
  padding-bottom:clamp(3rem,7vw,7rem);
}
.piede-col{min-width:0}
.piede-sede{line-height:2}
.piede-col h4{margin-bottom:1.1rem;color:var(--luce-42)}
.piede-col li + li{margin-top:.72rem}
.piede-col a{font-size:.92rem;padding-bottom:.15em}

/* Il marchio del piede si misura sulla COLONNA, non sulla finestra.
   Prima era 11.2vw: la finestra e' larga, la colonna no (max 1580px meno due
   margini), e la scritta finiva sotto il taglio di .piede{overflow:hidden} —
   sempre, a ogni larghezza. Da qui le due lettere mangiate a destra e l'aria
   tutta da un lato.
   Ora la larghezza la detta il contenitore: 'BEBY PREEMINENCE' in Bodoni Moda
   con questa spaziatura misura fra 10.27 e 10.47 volte il corpo — l'asse
   ottico allarga il disegno ai corpi piccoli — quindi il corpo e' la colonna
   divisa per 10.50, il caso piu' largo: riempie la misura con un filo d'aria
   dai due lati, a ogni larghezza, e non esce mai.
   La spaziatura e' POSITIVA: le lettere non possono toccarsi. */
.marchio-riga{
  container-type:inline-size;
  padding-bottom:clamp(.55rem,1.3vw,1.15rem);   /* respiro prima del filetto */
}
.marchio-grande{
  display:block;
  line-height:.82;
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.035em;
  text-align:center;
  text-indent:.0175em;   /* meta' spaziatura: recupera la coda dopo l'ultima E */
  white-space:nowrap;
  color:var(--luce);
  /* riserva per chi non ha le query di contenitore, poi la misura esatta */
  font-size:calc((min(100vw, var(--max)) - 2 * var(--gutter) - 18px) / 10.50);
  font-size:calc(100cqi / 10.50);
}
.piede-coda{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;
  padding-block:clamp(1.4rem,2.6vw,2.2rem);
  border-top:1px solid var(--filo-luce);
  color:var(--luce-42);
}

/* ============================ INGRESSI ============================
   Tre soli comportamenti in tutto il sito:
   testo che sale, riga tipografica che si scopre, tavola che si apre. */
.js .rv-tavola .telaio{clip-path:inset(0 0 100% 0)}
.js .rv-tavola .telaio img{transform:scale(1.035)}
.js .rv-tavola.dentro .telaio{
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--t-lunga) var(--ease);
  transition-delay:var(--ritardo,0ms);
}
.js .rv-tavola.dentro .telaio img{
  transform:scale(1);
  transition:transform 1.9s var(--ease);
  transition-delay:var(--ritardo,0ms);
}

.js .rv{opacity:0;transform:translateY(1.2rem)}
.js .rv.dentro{
  opacity:1;transform:none;
  transition:opacity var(--t-media) var(--ease),transform 1.15s var(--ease);
  transition-delay:var(--ritardo,0ms);
}

.riga-masch{display:block;overflow:hidden}
.js .riga-masch > span{display:block;transform:translateY(106%)}
.js .dentro .riga-masch > span,
.js .riga-masch.dentro > span{
  transform:none;
  transition:transform 1.15s var(--ease);
  transition-delay:calc(var(--ritardo,0ms) + var(--n,0) * 85ms);
}

/* ============================ VELO DI PASSAGGIO ============================
   Fra una pagina e l'altra: fondo nero, marchio oro al centro, mezzo secondo.
   L'apertura del velo e' un'animazione CSS con fill-mode forwards: anche se il
   JavaScript non parte o fallisce, il velo si apre da solo e la pagina non puo'
   restare nera. Senza JavaScript non compare affatto. */
.passaggio{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  background:var(--nero);
  pointer-events:none;
  opacity:0;
  transition:opacity .40s var(--ease);
}
.passaggio-marchio{
  width:clamp(72px,8vw,124px);
  aspect-ratio:1;
  background-color:var(--champagne);
  -webkit-mask:url(assets/img/logo-nero.svg) center/contain no-repeat;
  mask:url(assets/img/logo-nero.svg) center/contain no-repeat;
  opacity:0;
  transform:scale(1.03);
  transition:opacity .40s var(--ease),transform .40s var(--ease);
}
/* Lo STATO del velo lo decide sempre una classe, mai un'animazione: in entrata
   la mette lo script in testa alla pagina e la toglie un timer, in uscita la
   mette il gestore del clic. Il CSS aggiunge solo la morbidezza. Cosi' anche
   se l'orologio delle animazioni non parte — scheda in secondo piano, batteria
   bassa, pagina incorniciata — nessuno resta davanti a uno schermo nero. */
.velo-in .passaggio,
.passaggio.esce{opacity:1}
/* lo spegnimento finale lo impone lo script con visibility:hidden in riga:
   l'uscita deve poterlo scavalcare */
.passaggio.esce{visibility:visible !important}
.velo-in .passaggio-marchio,
.passaggio.esce .passaggio-marchio{opacity:1;transform:none}

/* Lo stesso velo chiude anche la soglia, ma tenuto un respiro piu' a lungo:
   fra due pagine e' un battito di ciglia, qui e' l'ultima porta prima della
   Maison e il marchio deve avere il tempo di posarsi. */
.passaggio.ingresso{transition-duration:.54s}
.passaggio.ingresso .passaggio-marchio{transition-duration:.62s}

/* ============================ SCORRIMENTO CINEMATOGRAFICO ============================
   Le sezioni importanti muovono la fotografia con lo scorrimento, non con un
   ciclo JavaScript: l'animazione e' agganciata alla timeline di scroll del
   browser, gira fuori dal thread principale e non puo' scattare. Dove non e'
   supportata semplicemente non accade nulla. Lo scorrimento resta quello
   nativo: nessun dirottamento della rotella o del dito. */
.cinema{position:relative;overflow:hidden}
.cinema .telaio{background:var(--nero)}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cinema .telaio img{
      animation:cinema-carrello linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
      will-change:transform;
    }
    @keyframes cinema-carrello{
      from{transform:scale(1.06) translate3d(0,-1.6%,0)}
      to{transform:scale(1) translate3d(0,1.6%,0)}
    }
    /* il marchio del piede prende possesso del footer scorrendo */
    .marchio-grande{
      transform-origin:center bottom;
      animation:marchio-cresce linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 62%;
      will-change:transform;
    }
    @keyframes marchio-cresce{
      from{transform:scale(.78);opacity:.6}
      to{transform:scale(1);opacity:1}
    }
  }
}

/* ============================ LA SOGLIA ============================
   L'ingresso alla Maison. Prima del sito c'e' una stanza al buio, l'opera
   spenta, e una cordina che pende. Si tira, l'opera si accende, e solo
   allora si entra.

   Tre regole, da rispettare se ci si mette mano:

   · Nessun z-index qui dentro. L'opera si fonde col fondo in "screen" —
     e' cosi' che il nero della fotografia sparisce e il pezzo resta
     sospeso nella stanza. Un contesto di sovrapposizione sull'elemento
     fuso (z-index, transform, filter, opacity) spegne la fusione: resta
     un rettangolo nero, o l'opera scompare. L'ordine lo da' il DOM.
   · Per la stessa ragione .soglia-opera porta solo la fusione. Tutto cio'
     che si muove o si filtra sta nei figli.
   · La corda e' disegnata da una simulazione a verlet in script.js. Qui
     c'e' come appare, non come si muove.

   Senza JavaScript la soglia non compare: il sito si apre normalmente. */

/* Il blocco dello scorrimento sta su una classe sua: si toglie a meta'
   della dissolvenza d'ingresso, mentre la soglia e' ancora sullo schermo. */
html.soglia-chiusa,
html.soglia-chiusa body{
  overflow:hidden;
  height:100%;
  overscroll-behavior:none;
}

.soglia{display:none}

/* La tela sotto la soglia e' scura quanto la stanza. Il body e' avorio, e su
   iPhone la barra del browser cambia l'altezza della finestra dopo il primo
   disegno: per una frazione — o finche' non si ricarica — restava una fascia
   avorio sotto la stanza. Con questa riga qualunque scoperto e' nero. */
/* La tela E il corpo. Solo su html non basta, ed e' un errore che ho gia'
   fatto: finche' html non ha un fondo, quello del body si propaga alla tela e
   il body non dipinge nulla di suo; nel momento in cui si da' un fondo a html,
   la propagazione si ferma e il body torna a dipingere avorio sulla PROPRIA
   area. Risultato: la tela diventa nera e la fascia chiara resta identica.
   Vanno spenti tutti e due. */
html.js.soglia-attiva,
html.js.soglia-attiva body{background:#000}

html.js.soglia-attiva .soglia{
  display:block;
  position:fixed;
  inset:0;
  /* inset da solo si fida della finestra al primo disegno; dvh la insegue
     mentre la barra del browser si apre e si chiude. */
  height:100dvh;
  z-index:300;
  background:#000;
  color:var(--luce);
  isolation:isolate;
  overflow:hidden;
  touch-action:none;                 /* tirare non deve trascinare la pagina */
  -webkit-user-select:none;user-select:none;
  --tensione:0;
  --luce-ease:cubic-bezier(.22,.68,.16,1);
  --cta-t:.34em;                     /* spaziatura d'arrivo dell'invito */
}

/* ---------------- la stanza ---------------- */
/* LA LUCE DELLA STANZA STA SOPRA L'OPERA, NON SOTTO.

   Com'era: la stanza si disegnava qui sotto, e la fotografia — che ha il fondo
   nero pieno — ci spariva dentro per fusione (screen sull'opera). Funziona su
   ogni motore da tavolo, ma su WebKit da telefono la fusione salta: allora il
   fondo nero della fotografia resta appoggiato sulla stanza, e si vede un
   rettangolo nero attorno al lampadario. Non e' riproducibile qui (provato su
   Safari per Mac e su Chromium), e il rimedio standard — chiedere uno strato
   composito esplicito — non e' bastato sul telefono di chi l'ha segnalato.

   Com'e' adesso: sotto non c'e' piu' niente da stampare — il fondo e' nero
   quanto il fondo della fotografia, quindi la fotografia NON HA PIU' BISOGNO
   DI FONDERSI e non puo' disegnare bordi. Tutta la luce della stanza passa in
   un velo che sta SOPRA l'opera (.soglia-caldo), ed e' l'unico strato che
   chiede la fusione.

   Lo scambio e' esatto: screen e' commutativa, opera ⊕ stanza non cambia di
   posto. E il velo e' scritto in trasparenza, non in tinta piena: colore alla
   massima intensita', opacita' pari a quanta luce deve aggiungere. Cosi'
   `lerp(fondo, screen(C,fondo), a)` con C acceso e a piccola vale
   `fondo + a(1-fondo)`, che e' proprio screen — e se un motore la fusione non
   la fa, resta un velo del 4%: invisibile, mai un rettangolo. */
.soglia-fondo{position:absolute;inset:0;background:#000}

.soglia-caldo{
  position:absolute;inset:0;
  pointer-events:none;
  /* la stanza: prima il calore in alto al centro, poi il respiro verticale.
     Le tinte sono quelle di prima portate a piena intensita', le opacita'
     sono la luce che aggiungevano: (46,39,30)x.32 -> 15/255, #0B0A08 -> 11/255,
     #060605 -> 6/255, #0A0908 -> 10/255. */
  background:
    radial-gradient(122% 80% at 50% 34%,rgba(255,216,166,.058),rgba(255,216,166,0) 66%),
    linear-gradient(180deg,rgba(255,232,186,.043) 0%,rgba(255,255,213,.024) 60%,rgba(255,230,204,.039) 100%);
  mix-blend-mode:screen;
}
/* la stanza si scalda solo quando l'opera e' accesa */
.soglia-caldo::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(92% 64% at 50% 42%,rgba(255,206,146,.15),rgba(255,190,120,.04) 46%,transparent 76%);
  opacity:0;
  transition:opacity 1.6s var(--luce-ease);
}
.soglia[data-luce="accesa"] .soglia-caldo::after{opacity:1}

.soglia-scena{
  position:absolute;inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(2.4svh,5svh,6.2svh) var(--gutter) clamp(2.6svh,4.6svh,5.4svh);
}

/* ---------------- l'opera ---------------- */
.soglia-opera{
  position:relative;
  flex:0 0 auto;
  width:min(84vw,620px,calc(52svh * 1.09));
  /* niente fusione: il fondo della fotografia e il fondo della stanza sono
     lo stesso nero, e la luce passa sopra (.soglia-caldo) */
}
/* Il ritaglio e' un blocco nel flusso con la sua proporzione: lo stesso
   impianto di .tavola > .telaio nel resto del sito.

   Il taglio esclude il marchio impresso nella fotografia d'archivio:
   l'opera vive fra il 16,7% e l'81,6% dell'altezza, il marchio comincia
   all'85,7%. Il riquadro tiene il 15% - 83,8%. */
.soglia-ritaglio{
  position:relative;
  width:100%;
  aspect-ratio:1.09;
  overflow:hidden;
  /* l'attrezzatura cede appena sotto la trazione, con un filo di ritardo */
  transform:translate3d(0,calc(var(--tensione) * 7px),0);
  transition:transform .22s linear;
}
.soglia-ritaglio img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 48%;
  filter:brightness(.62) contrast(1.3) saturate(.4);
}

/* FASE 1 e 2 — l'impulso nasce nel cuore dell'opera e attraversa il cristallo */
.soglia-nucleo{
  position:absolute;left:50%;top:47%;
  width:52%;aspect-ratio:1;margin:-26% 0 0 -26%;
  background:radial-gradient(circle closest-side,rgba(255,246,230,.96),rgba(255,214,158,.42) 32%,transparent 70%);
  opacity:0;
  transform:scale(.05);
}
/* FASE 3 e 4 — i riflessi, poi la stanza */
.soglia-alone,
.soglia-pozza{
  position:absolute;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0;
}
.soglia-alone{
  inset:-20% -24%;
  background:radial-gradient(closest-side ellipse at 50% 44%,
    rgba(255,216,158,.2),rgba(255,194,120,.06) 46%,rgba(255,182,100,0) 76%);
}
.soglia-pozza{
  left:50%;bottom:-16%;
  width:150%;height:26%;
  translate:-50% 0;
  background:radial-gradient(closest-side ellipse at 50% 50%,
    rgba(255,206,142,.19),rgba(255,196,124,.05) 52%,transparent 74%);
}

/* FASE 5 — la luminosita' definitiva, che resta */
.soglia[data-luce="accesa"] .soglia-ritaglio img{filter:brightness(1.32) contrast(1.12) saturate(1.12) sepia(.12)}
.soglia[data-luce="accesa"] .soglia-nucleo{opacity:.15;transform:scale(1.5)}
.soglia[data-luce="accesa"] .soglia-alone,
.soglia[data-luce="accesa"] .soglia-pozza{opacity:1}

/* la sequenza: 1,9s, cinque tempi, una sola curva */
.soglia.accende .soglia-nucleo{animation:soglia-nucleo 1.9s var(--luce-ease) both}
.soglia.accende .soglia-ritaglio img{animation:soglia-cristallo 1.9s var(--luce-ease) both}
.soglia.accende .soglia-alone{animation:soglia-alone 1.9s var(--luce-ease) both}
.soglia.accende .soglia-pozza{animation:soglia-pozza 1.9s var(--luce-ease) both}

@keyframes soglia-nucleo{
  0%{opacity:0;transform:scale(.05)}
  5%{opacity:1;transform:scale(.13)}
  13%{opacity:.42;transform:scale(.2)}
  38%{opacity:.8;transform:scale(.74)}
  72%{opacity:.3;transform:scale(1.26)}
  100%{opacity:.15;transform:scale(1.5)}
}
@keyframes soglia-cristallo{
  0%{filter:brightness(.62) contrast(1.3) saturate(.4)}
  6%{filter:brightness(1) contrast(1.24) saturate(.48)}
  15%{filter:brightness(.7) contrast(1.28) saturate(.42)}
  46%{filter:brightness(1.04) contrast(1.22) saturate(.9) sepia(.06)}
  76%{filter:brightness(1.44) contrast(1.1) saturate(1.18) sepia(.14)}
  100%{filter:brightness(1.32) contrast(1.12) saturate(1.12) sepia(.12)}
}
@keyframes soglia-alone{0%,11%{opacity:0}44%{opacity:.5}100%{opacity:1}}
@keyframes soglia-pozza{0%,30%{opacity:0}100%{opacity:1}}

/* ---------------- la corda ---------------- */
.soglia-corda{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  overflow:visible;
  opacity:calc(.62 + var(--tensione) * .38);
}
.soglia-corda path{
  fill:none;
  stroke:rgba(242,239,232,.42);
  stroke-width:1.2;
  stroke-linecap:round;
}
.soglia[data-luce="accesa"] .soglia-corda path{stroke:rgba(240,228,206,.56)}

.soglia-presa{
  position:absolute;left:0;top:0;
  width:64px;height:64px;
  margin:-32px 0 0 -32px;
  display:grid;place-items:center;
  cursor:grab;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.soglia-presa:active,
.soglia.in-mano .soglia-presa{cursor:grabbing}
.soglia-goccia{
  width:13px;height:21px;
  background:linear-gradient(158deg,#F7EFE1,#C9AF83 46%,#6C5B41);
  clip-path:polygon(50% 0,100% 32%,50% 100%,0 32%);
  box-shadow:0 0 13px 3px rgba(164,140,104,.26);
  transition:box-shadow .55s var(--ease);
}
@media (hover:hover){
  .soglia-presa:hover .soglia-goccia{box-shadow:0 0 17px 4px rgba(196,168,124,.4)}
}
/* superata la soglia di tensione: la goccia si scalda. Nessuna parola. */
.soglia.tesa .soglia-goccia{box-shadow:0 0 24px 6px rgba(255,206,146,.46);transition-duration:.2s}
.soglia-presa:focus-visible{outline:1px solid var(--champagne);outline-offset:2px}

/* ---------------- l'invito ---------------- */
.soglia-invito{
  margin-top:auto;
  flex:0 0 auto;
  width:100%;
  min-height:clamp(4.4rem,9svh,7rem);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.soglia-entra{
  position:relative;
  display:block;
  max-width:100%;
  padding:.34em .1em .96em;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1rem,2.05vw,1.68rem);
  line-height:1.06;
  text-transform:uppercase;
  color:var(--luce);
  opacity:0;
  pointer-events:none;
}
.soglia-entra-masch{display:block;overflow:hidden}
.soglia-entra-testo{
  display:block;
  white-space:nowrap;
  letter-spacing:var(--cta-t);
  text-indent:var(--cta-t);
  transform:translateY(108%);
}
.soglia-entra::after{
  content:"";position:absolute;left:50%;bottom:.4em;
  width:0;height:1px;background:var(--champagne);
  translate:-50% 0;
}
/* un solo gesto: le lettere arrivano da dietro la maschera mentre la
   spaziatura si chiude. Il filetto le raggiunge dopo. */
.soglia.invita .soglia-entra{opacity:1;pointer-events:auto;transition:opacity .24s linear}
.soglia.invita .soglia-entra-testo{animation:soglia-entra-arriva 1.5s var(--ease) both}
.soglia.invita .soglia-entra::after{animation:soglia-entra-filo 1.05s .68s var(--ease) both}
@keyframes soglia-entra-arriva{
  from{transform:translateY(108%);letter-spacing:calc(var(--cta-t) * 2.7);text-indent:calc(var(--cta-t) * 2.7)}
  to{transform:none;letter-spacing:var(--cta-t);text-indent:var(--cta-t)}
}
@keyframes soglia-entra-filo{from{width:0}to{width:calc(100% - .5em)}}

/* a movimento finito l'animazione si toglie di mezzo e il passaggio del
   puntatore torna a essere una transizione */
.soglia-entra.posata{opacity:1;pointer-events:auto}
.soglia-entra.posata .soglia-entra-testo{animation:none;transform:none;letter-spacing:var(--cta-t);text-indent:var(--cta-t);transition:letter-spacing .8s var(--ease),text-indent .8s var(--ease)}
.soglia-entra.posata::after{animation:none;width:calc(100% - .5em);transition:width .8s var(--ease),background-color .8s var(--ease)}
@media (hover:hover){
  .soglia-entra.posata:hover .soglia-entra-testo{letter-spacing:calc(var(--cta-t) + .08em);text-indent:calc(var(--cta-t) + .08em)}
  .soglia-entra.posata:hover::after{width:calc(100% + .3em)}
}
.soglia-entra:focus-visible{outline:1px solid var(--champagne);outline-offset:6px}

/* uscita di servizio per chi naviga da tastiera: invisibile finche' non
   riceve il fuoco, e allora si vede */
.soglia-salta{
  position:absolute;left:50%;bottom:1rem;
  translate:-50% 0;
  font-family:var(--sans);
  font-size:var(--s-micro);
  letter-spacing:var(--tracking);
  text-transform:uppercase;
  color:var(--luce-42);
  opacity:0;
  pointer-events:none;
}
.soglia-salta:focus-visible{opacity:1;pointer-events:auto;outline:1px solid var(--champagne);outline-offset:6px}

/* ---------------- l'ingresso ----------------
   La luce cresce fino a diventare la superficie che copre la scena, e
   sotto c'e' gia' la Maison. */
/* TEMPORANEO: targa della versione, per sapere quale build ha davanti un
   telefono. Si toglie appena il difetto e' chiuso. */
.soglia-targa{
  position:absolute;left:.9rem;bottom:.7rem;z-index:6;
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,239,232,.34);pointer-events:none;
}

.soglia-bagliore{
  position:absolute;left:50%;top:44%;
  width:min(158vw,158svh);aspect-ratio:1;
  translate:-50% -50%;
  background:radial-gradient(circle closest-side,#FDF7EB 0%,#F7E8CC 26%,rgba(247,232,204,.5) 46%,rgba(247,232,204,0) 72%);
  opacity:0;
  transform:scale(.08);
  pointer-events:none;
}
.soglia.esce .soglia-bagliore{animation:soglia-bagliore 1.02s cubic-bezier(.6,0,.86,.24) both}
/* Si spegne quello che deve sparire prima del bagliore — l'invito, la corda,
   la presa — mai la scena: e' l'antenata dell'opera fusa, e un'opacita' qui
   isola la fusione e lascia un rettangolo nero sospeso (vedi l'intestazione
   del blocco). L'opera non ha bisogno di dissolversi: la copre il bagliore. */
.soglia.esce .soglia-invito,
.soglia.esce .soglia-corda,
.soglia.esce .soglia-presa{opacity:0;transition:opacity .46s .3s linear}
/* la luce cede il posto al velo nero, che sotto e' gia' salito */
.soglia.esce{animation:soglia-svanisce .40s .78s linear both}
@keyframes soglia-bagliore{
  0%{opacity:0;transform:scale(.08)}
  24%{opacity:.92;transform:scale(.42)}
  100%{opacity:1;transform:scale(3.1)}
}
@keyframes soglia-svanisce{to{opacity:0}}

/* ---------------- misure ---------------- */
@media (max-width:760px){
  .soglia{--cta-t:.2em}
  .soglia-invito{min-height:clamp(4rem,8svh,5.4rem);padding-inline:var(--gutter)}
  .soglia-entra{font-size:clamp(.78rem,3.3vw,1.02rem)}
}
@media (max-height:560px) and (orientation:landscape){
  .soglia-opera{width:min(46vw,360px,calc(56svh * 1.09))}
  .soglia-invito{min-height:3.2rem}
  .soglia-scena{padding-block:clamp(1.4svh,3svh,3.4svh)}
}

/* Con movimento ridotto il concetto resta — si tira, si accende, si entra —
   ma la fisica si spegne quasi subito e le durate si accorciano. Queste
   regole battono per specificita' il blocco globale piu' in basso. */
@media (prefers-reduced-motion:reduce){
  .soglia.accende .soglia-nucleo,
  .soglia.accende .soglia-ritaglio img,
  .soglia.accende .soglia-alone,
  .soglia.accende .soglia-pozza{animation-duration:.5s !important}
  .soglia.invita .soglia-entra-testo{animation-duration:.36s !important}
  .soglia.invita .soglia-entra::after{animation-duration:.3s !important;animation-delay:.16s !important}
  .soglia.esce .soglia-bagliore{animation-duration:.42s !important}
  .soglia.esce{animation-duration:.28s !important;animation-delay:.36s !important}
  .soglia-ritaglio{transition:none !important}
}

/* ============================ IL FILM: GLI ATTI ============================
   La home non ha sezioni: ha tempi. Il fondo cambia per atto (nero, avorio,
   nero, oro, avorio, nero), i tre schermi interi sono la cupola, la prova e
   La Fenice, e fra un tempo e l'altro il vuoto ha un compito: e' attraversato
   dalla polvere di cristallo (cristallo.js) o prepara la fotografia che segue. */
.atto{position:relative;isolation:isolate;overflow-x:clip}

/* il varco: il vuoto con tensione dopo l'apertura, attraversato dalla polvere */
.varco{height:clamp(7rem,22svh,15rem)}

/* Light spill (brief, punto 21): su fondo scuro la fotografia contamina appena
   il fondo attorno, con il proprio colore, a opacita' quasi impercettibile.
   Sta dietro al telaio (z-index negativo dentro all'atto isolato). */
.fondo-scuro .tavola[style*="--tinta"]::before,
.fondo-carbone .tavola[style*="--tinta"]::before{
  content:"";position:absolute;inset:-22% -18%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 54% at 50% 56%,color-mix(in srgb,var(--tinta) 13%,transparent),transparent 72%);
}
/* Ombre (brief, punto 20): solo su fondo chiaro, larghe e calde, mai nette. */
.fondo-avorio .tavola .telaio,
.fondo-bianco .tavola .telaio{
  box-shadow:0 30px 80px -24px rgba(48,34,22,.16),0 2px 6px rgba(48,34,22,.05);
}

/* ---------- la materia ---------- */
.atto-materia{padding-bottom:calc(var(--sezione) * .7)}
.cinema-materia .telaio{aspect-ratio:auto;height:min(80svh,860px)}
.cinema-materia .telaio img{object-position:center top}
/* tre vetri, un trittico: la lastra centrale scende di un passo */
.quattro-vetri{margin-top:calc(var(--sezione) * .95);row-gap:clamp(2rem,5vw,4rem);align-items:start}
.quattro-vetri .v-a{grid-column:1 / span 4}
.quattro-vetri .v-b{grid-column:5 / span 4;margin-top:clamp(3rem,12vh,9rem)}
.quattro-vetri .v-c{grid-column:9 / span 4}
.materia-colori{margin-top:calc(var(--sezione) * 1.15);row-gap:clamp(3rem,9vw,8rem);align-items:start}
.materia-colori .mc-foglie{grid-column:1 / span 6;grid-row:1}
.materia-colori .mc-velvet{grid-column:8 / span 5;grid-row:1;margin-top:clamp(3rem,10vh,8rem)}
.materia-colori .mc-testo{grid-column:1 / span 4;grid-row:2;align-self:center}
.materia-colori .mc-cristalli{grid-column:6 / span 7;grid-row:2}

/* ---------- il rilievo e il disegno: l'atto chiaro ---------- */
.atto-disegno{padding-block:calc(var(--sezione) * .9) calc(var(--sezione) * 1.2)}
.disegno-griglia{row-gap:clamp(3rem,7vw,6rem);align-items:start}
/* il cantiere scavalca la cucitura fra il nero e l'avorio: meta' di qua, meta' di la' */
.disegno-griglia .d-cantiere{grid-column:9 / span 4;grid-row:1 / span 2;align-self:start;margin-top:calc(-1 * clamp(6rem,20vh,13rem))}
.disegno-griglia .d-campione{grid-column:10 / span 3;grid-row:3;align-self:end}
.disegno-griglia .d-voce{grid-column:1 / span 7;grid-row:1}
.disegno-griglia .d-voce .micro{margin-bottom:clamp(1.6rem,3.4vw,2.6rem)}
.disegno-griglia .d-testo{grid-column:1 / span 6;grid-row:2}
.disegno-griglia .d-tavolo{grid-column:1 / span 8;grid-row:3}
.disegno-griglia .d-officina{grid-column:5 / span 8;grid-row:4}

/* ---------- la composizione ---------- */
.atto-composizione{padding-block:calc(var(--sezione) * 1.25) calc(var(--sezione) * .9)}
.comp-griglia{row-gap:clamp(2rem,5vw,4rem);align-items:end}
.comp-griglia .comp-intero{grid-column:4 / span 6;grid-row:1 / span 3;height:auto}
.comp-griglia .comp-intero .telaio{height:auto;aspect-ratio:2/3}
.comp-griglia .comp-nymphea{grid-column:1 / span 3;grid-row:3;margin-bottom:clamp(2rem,8vh,6rem)}
.comp-griglia .comp-eclypse{grid-column:10 / span 3;grid-row:1;align-self:start;margin-top:clamp(2rem,8vh,6rem)}
.comp-griglia .comp-testo{grid-column:10 / span 3;grid-row:2;align-self:center}

/* ---------- la prova ---------- */
.atto-prova{padding-top:calc(var(--sezione) * .8)}
.prova-testa{margin-bottom:clamp(2.5rem,6vw,5rem)}
.prova-testa .micro{margin-bottom:clamp(1.6rem,3.4vw,2.6rem)}
.cinema-prova .telaio{aspect-ratio:auto;height:min(86svh,900px)}
.prova-coda{margin-top:clamp(2rem,4vw,3.4rem);padding-bottom:calc(var(--sezione) * 1.2)}
.prova-link{margin:0}

/* ---------- il luogo ---------- */
.atto-luogo{padding-top:calc(var(--sezione) * .3)}
.gc-3-8{grid-column:3 / span 8}
.luogo-montaggio{margin-bottom:clamp(6rem,18svh,12rem)}
.cinema-luogo .telaio{aspect-ratio:auto;height:100svh}
.cinema-luogo .telaio::after{
  background:
    radial-gradient(116% 94% at 50% 42%,transparent 54%,rgba(10,10,9,.30) 100%),
    linear-gradient(180deg,transparent 58%,rgba(10,10,9,.62) 100%);
}
.cinema-nome{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(2rem,6svh,4rem);z-index:3;
  color:var(--luce);display:flex;flex-direction:column;gap:.45rem;
}
.cinema-nome .p-citta{margin:0;color:rgba(242,239,232,.66)}
.cinema-nome .p-nome{font-size:var(--s-due)}
.cinema-nome .d-sec{font-family:var(--sans);font-size:var(--s-did);font-weight:300;color:rgba(242,239,232,.66);margin-top:.2rem}
.luogo-coda{padding-block:calc(var(--sezione) * 1.1) calc(var(--sezione) * 1.2)}
.luogo-griglia{row-gap:clamp(3rem,7vw,6rem);align-items:end}
.luogo-griglia .l-kempinski{grid-column:1 / span 7}
.luogo-griglia .l-kiev{grid-column:9 / span 4;margin-bottom:clamp(2rem,6vh,5rem)}
.luogo-griglia .l-link{grid-column:1 / -1;margin-top:clamp(.5rem,2vw,1.5rem)}
.progetto-breve .p-testo{display:block;margin-top:clamp(1rem,2vw,1.4rem)}
.progetto-breve .didascalia{margin-top:.55rem}

/* ---------- il vocabolario: l'elenco su avorio ---------- */
.atto-vocabolario{padding-block:calc(var(--sezione) * 1.3) calc(var(--sezione) * 1.1)}
.voc-testa{row-gap:1.5rem;margin-bottom:clamp(2.5rem,6vw,5rem)}
.voc-testa .micro{margin-bottom:clamp(1.6rem,3.4vw,2.6rem)}
.voc-link{margin-top:clamp(2.4rem,5vw,4rem)}
.atto-vocabolario .look-lista{border-bottom-color:color-mix(in srgb,currentColor 17%,transparent)}
.atto-vocabolario .look-riga{border-top-color:color-mix(in srgb,currentColor 17%,transparent)}
.atto-vocabolario .look-nome{color:var(--ink)}
.atto-vocabolario .look-dati{color:color-mix(in srgb,currentColor 48%,transparent)}
@media (hover:hover) and (pointer:fine){
  .atto-vocabolario.in-uso .look-nome{color:color-mix(in srgb,var(--ink) 34%,transparent)}
  .atto-vocabolario.in-uso .look-riga.attiva .look-nome{color:var(--ink)}
}
.atto-vocabolario .look-lastra{box-shadow:0 30px 80px -24px rgba(48,34,22,.22)}

/* ---------- l'origine ---------- */
.atto-origine{padding-block:calc(var(--sezione) * 1.3) calc(var(--sezione) * .9)}
.origine-griglia{align-items:end;row-gap:2rem}
.origine-griglia .o-archivio{grid-column:1 / span 7}
.origine-griglia .o-testo{grid-column:9 / span 4;position:relative}
.origine-griglia .anno{font-size:clamp(4rem,9vw,8.5rem)}
.o-link{margin-top:clamp(1.6rem,3vw,2.4rem)}
.invito-sezione{padding-block:calc(var(--sezione) * .6) calc(var(--sezione) * .7)}
.invito-link{margin-top:clamp(1.6rem,3vw,2.2rem)}

/* ---------- il canvas della polvere di cristallo ---------- */
.cristallo{
  position:fixed;inset:0;z-index:60;
  width:100%;height:100%;
  pointer-events:none;
  display:block;
}
html[data-indice="aperto"] .cristallo{visibility:hidden}

/* ---------- responsive degli atti ---------- */
@media (max-width:1180px){
  .quattro-vetri .v-b{margin-top:clamp(2rem,8vh,5rem)}
  .materia-colori .mc-foglie{grid-column:1 / span 7}
  .materia-colori .mc-velvet{grid-column:8 / span 5}
  .disegno-griglia .d-cantiere{grid-column:8 / span 5}
  .disegno-griglia .d-voce{grid-column:1 / span 7}
  .disegno-griglia .d-testo{grid-column:1 / span 6}
  .disegno-griglia .d-tavolo{grid-column:1 / span 9}
  .disegno-griglia .d-campione{grid-column:10 / span 3}
  .disegno-griglia .d-officina{grid-column:4 / span 9}
  .comp-griglia .comp-intero{grid-column:4 / span 6}
  .luogo-griglia .l-kempinski{grid-column:1 / span 8}
  .luogo-griglia .l-kiev{grid-column:9 / span 4}
}
@media (max-width:960px){
  .varco{height:clamp(5rem,16svh,9rem)}
  .cinema-materia .telaio{height:min(64svh,620px)}
  .cinema-prova .telaio{height:min(72svh,700px)}
  .cinema-luogo .telaio{height:min(88svh,820px)}
  .materia-colori .mc-testo{grid-column:1 / span 5}
  .materia-colori .mc-cristalli{grid-column:6 / span 7}
  .comp-griglia .comp-intero{grid-column:3 / span 7}
  .comp-griglia .comp-nymphea{grid-column:1 / span 3}
  .comp-griglia .comp-eclypse{grid-column:10 / span 3}
  .comp-griglia .comp-testo{grid-column:10 / span 3}
  .origine-griglia .o-archivio{grid-column:1 / -1}
  .origine-griglia .o-testo{grid-column:1 / span 8;grid-row:auto}
}
@media (max-width:760px){
  .varco{height:clamp(4rem,12svh,7rem)}
  .cinema-materia .telaio{height:min(58svh,520px)}
  .quattro-vetri{row-gap:clamp(1.2rem,4vw,2rem)}
  .quattro-vetri .v-a{grid-column:1 / span 6}
  .quattro-vetri .v-b{grid-column:7 / span 6;margin-top:clamp(1.5rem,7vw,3rem)}
  .quattro-vetri .v-c{grid-column:4 / span 6}
  .materia-colori{row-gap:clamp(2.2rem,7vw,3.4rem)}
  .materia-colori .mc-foglie,.materia-colori .mc-velvet,.materia-colori .mc-testo,.materia-colori .mc-cristalli{grid-column:1 / -1;grid-row:auto;margin-top:0}
  .materia-colori .mc-velvet{width:84%;margin-left:auto}
  .disegno-griglia{row-gap:clamp(2.2rem,7vw,3.4rem)}
  .disegno-griglia .d-cantiere,.disegno-griglia .d-voce,.disegno-griglia .d-testo,.disegno-griglia .d-tavolo,.disegno-griglia .d-campione,.disegno-griglia .d-officina{grid-column:1 / -1;grid-row:auto}
  .disegno-griglia .d-cantiere{width:70%;margin-left:auto;order:-1;margin-top:calc(-1 * clamp(3rem,10vh,6rem))}
  .disegno-griglia .d-campione{width:46%}
  .comp-griglia{row-gap:clamp(1.6rem,5vw,2.6rem)}
  .comp-griglia .comp-intero,.comp-griglia .comp-nymphea,.comp-griglia .comp-eclypse,.comp-griglia .comp-testo{grid-column:1 / -1;grid-row:auto;margin:0}
  .comp-griglia .comp-nymphea{width:72%}
  .comp-griglia .comp-eclypse{width:72%;margin-left:auto}
  .cinema-prova .telaio{height:min(62svh,560px)}
  .prova-link{margin-top:1.6rem}
  .luogo-montaggio{margin-bottom:clamp(4rem,12svh,7rem)}
  .cinema-luogo .telaio{height:min(78svh,720px)}
  .luogo-griglia{row-gap:clamp(2.2rem,7vw,3.4rem)}
  .luogo-griglia .l-kempinski,.luogo-griglia .l-kiev,.luogo-griglia .l-link{grid-column:1 / -1;margin:0}
  .luogo-griglia .l-kiev{width:72%;margin-left:auto}
  .luogo-griglia .l-link{margin-top:1rem}
  .origine-griglia .o-testo{grid-column:1 / -1}
}
@media (max-height:560px) and (orientation:landscape){
  .varco{height:12svh}
  .cinema-materia .telaio{height:88svh}
  .cinema-prova .telaio{height:92svh}
  .cinema-luogo .telaio{height:100svh}
}

/* ============================ PAGINE INTERNE ============================ */
.apertura-occhiello{margin-bottom:clamp(1.4rem,3vw,2.4rem);color:rgba(242,239,232,.66)}
/* apertura divisa: la fotografia intera sopra, il titolo su fondo pieno sotto (Storia) */
.apertura-divisa{display:block;min-height:auto}
.apertura-divisa .apertura-sfondo{position:relative;inset:auto;height:min(68svh,760px)}
.apertura-divisa .apertura-sfondo::after{background:linear-gradient(180deg,rgba(10,10,9,.30) 0%,rgba(10,10,9,0) 30%)}
.apertura-divisa .apertura-corpo{padding-top:clamp(2rem,4vw,3.2rem);padding-bottom:clamp(2rem,5svh,4rem)}
.apertura-didascalia{margin-top:clamp(1.2rem,2.4vw,1.8rem);color:rgba(242,239,232,.62)}
.apertura-didascalia span{display:block}

/* il film: scene su dodici colonne, ciascuna con la propria misura */
.film{row-gap:clamp(4rem,10vw,9rem);align-items:start}
.film-sezione .film{padding-bottom:clamp(3rem,7vw,6rem)}
.film-dopo{padding-top:clamp(4rem,10vw,9rem)}
.scena{grid-column:var(--da,1) / span var(--span,12)}
.scena .p-testo{margin-top:clamp(1rem,2vw,1.4rem)}
.cinema-progetti .telaio,.cinema-capitolo .telaio{aspect-ratio:auto;height:100svh}
.cinema-metodo .telaio{aspect-ratio:auto;height:min(92svh,900px)}
.cinema-progetti .telaio::after,.cinema-capitolo .telaio::after,.cinema-metodo .telaio::after{
  background:
    radial-gradient(116% 94% at 50% 42%,transparent 54%,rgba(10,10,9,.30) 100%),
    linear-gradient(180deg,transparent 58%,rgba(10,10,9,.62) 100%);
}
.luoghi-griglia{row-gap:clamp(2.4rem,5vw,4rem)}
.luoghi-invito{margin-top:clamp(1rem,3vw,2rem)}

/* la sequenza del metodo */
.sequenza-voce{margin-bottom:clamp(3rem,7vw,6rem);max-width:30ch}
.sequenza{row-gap:clamp(4rem,10vw,9rem);align-items:start}
.passo{grid-column:var(--da,1) / span var(--span,12)}
.passo-testo{margin-top:clamp(1.2rem,2.4vw,1.8rem)}
.passo-testo .micro{margin-bottom:.9rem}
.passo-solo-testo{align-self:center}
.sequenza-coda{margin-top:clamp(4rem,9vw,8rem);row-gap:1.5rem}

/* le stazioni della storia */
.stazioni{row-gap:clamp(4rem,10vw,9rem);align-items:center}
.stazione{grid-column:var(--da,1) / span var(--span,12)}
.st-testo{position:relative}
.st-testo .micro{margin-bottom:clamp(1.2rem,2.6vw,2rem)}
.st-testo .voce{margin-bottom:clamp(1.2rem,2.6vw,2rem)}
.st-testo .anno{font-size:clamp(4rem,9vw,8.5rem)}

/* ---------- la chiusa della storia: la firma ----------
   Il file del cliente e' inchiostro nero su fondo bianco. Non lo tocchiamo:
   lo usiamo come MASCHERA, e il colore lo mette la pagina (var(--luce) sul
   nero, var(--ink) sull'avorio). Cosi' la firma resta esattamente il tratto
   scritto a mano, sta su qualunque fondo, e nessun file del cliente viene
   modificato. Il fallback per i browser senza mask e' l'immagine in screen. */
.congedo{
  margin:clamp(5rem,12vw,10rem) 0 clamp(1rem,3vw,2rem);
  padding-top:clamp(2.6rem,6vw,4.4rem);
  border-top:1px solid var(--filo-luce);
  align-items:end;row-gap:clamp(2.6rem,6vw,4rem);
}
.congedo-voce{margin:0;max-width:26ch;align-self:end}
.congedo-voce p{margin:0}
.congedo-mano{display:grid;justify-items:start}
.firma{
  width:min(34rem,100%);
  aspect-ratio:596 / 189;                 /* le proporzioni del tratto originale */
  background:var(--luce);
  -webkit-mask:url(assets/img/firma-silvia-760.webp) left center / contain no-repeat;
          mask:url(assets/img/firma-silvia-760.webp) left center / contain no-repeat;
  opacity:.88;
}
@media (max-width:960px){
  .congedo-voce,.congedo-mano{grid-column:1 / -1}
  .congedo-voce{max-width:34ch}
  .firma{width:min(22rem,86vw)}
}
/* browser senza mask: l'immagine in "screen" fonde comunque il fondo bianco */
@supports not ((-webkit-mask-image:url(#a)) or (mask-image:url(#a))){
  .firma{
    background:url(assets/img/firma-silvia-760.webp) left center / contain no-repeat;
    mix-blend-mode:screen;filter:invert(1);
  }
}
.fondo-avorio .firma,.fondo-bianco .firma{background:var(--ink);opacity:.82}
.congedo-nome{
  margin-top:clamp(1.2rem,2.6vw,1.8rem);
  display:grid;gap:.35rem;
}
.congedo-chi{font-family:var(--display);font-size:var(--s-tre);line-height:1.1}

/* la firma si scrive: il tratto compare da sinistra, come una mano che passa.
   Non e' un sipario: e' il verso in cui la firma e' stata scritta. */
.js .firma{clip-path:inset(0 100% 0 0);opacity:.88;transform:none}
.js .firma.dentro{
  clip-path:inset(0 0 0 0);opacity:.88;transform:none;
  transition:clip-path 2.1s var(--ease) .15s;
}
@media (prefers-reduced-motion:reduce){
  .js .firma{clip-path:none !important}
  .js .firma.dentro{transition:none !important}
}

/* i capitoli delle collezioni */
.capitolo{position:relative;isolation:isolate}
.capitolo .wrap{padding-top:clamp(3rem,7vw,6rem);padding-bottom:clamp(5rem,12vw,11rem)}
.capitolo-nota{margin-bottom:clamp(3rem,7vw,6rem)}
.su-misura-griglia{row-gap:clamp(2.4rem,6vw,5rem);align-items:center}
.su-misura-occhiello{margin-bottom:clamp(1.6rem,3.4vw,2.6rem)}
.su-misura-testo{margin-top:clamp(2rem,4vw,3rem)}

/* contatto */
.contatto-griglia{row-gap:clamp(3rem,7vw,5rem)}
.contatto-sede{margin-top:clamp(2.6rem,6vw,4.4rem)}
.contatto-sede .tenue{margin-bottom:.9rem}
.contatto-indirizzo{line-height:2.1}
.contatto-altrove{margin-top:clamp(1.8rem,4vw,2.8rem)}
.modulo-nota{margin-top:1rem}

@media (max-width:960px){
  .scena,.passo,.stazione{grid-column:1 / -1}
  .film,.sequenza,.stazioni{row-gap:clamp(2.6rem,7vw,4rem)}
  .cinema-progetti .telaio,.cinema-capitolo .telaio{height:min(80svh,760px)}
  .cinema-metodo .telaio{height:min(72svh,640px)}
  .apertura-divisa .apertura-sfondo{height:min(56svh,520px)}
  .stazioni{align-items:start}
}
@media (max-width:760px){
  .scena[style*="--span:4"],.scena[style*="--span:5"]{width:72%}
  .scena[style*="--da:7"],.scena[style*="--da:8"],.scena[style*="--da:9"]{margin-left:auto}
  .cinema-progetti .telaio,.cinema-capitolo .telaio{height:min(70svh,620px)}
}
@media (max-height:560px) and (orientation:landscape){
  .apertura-divisa .apertura-sfondo{height:72svh}
  .cinema-progetti .telaio,.cinema-capitolo .telaio{height:100svh}
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1180px){
}

@media (max-width:960px){
  :root{--head-h:clamp(86px,17vw,118px);--marchio:clamp(54px,13.4vw,74px)}
  .gc{grid-column:1 / -1}
  /* la nota va via per prima: a destra deve restare aria attorno al segno */
  .testata-nota{display:none}


  .look-lastra{display:none}

  .invito{flex-direction:column;gap:clamp(1.4rem,4vw,2.4rem)}
}

@media (max-width:860px){
  /* Sul telefono l'indice non si semplifica: si ricompone. Le voci crescono
     rispetto alla finestra, il numero resta, la riga del capitolo esce —
     e' l'unica cosa che toglierebbe aria alle voci. */
  :root{--s-indice:clamp(2.4rem,11.5vw,4rem);--indice-num:2.6rem;--indice-gap:1.1rem}
  .indice-riga > a{grid-template-columns:1fr}
  .indice-eco{display:none}
  .indice-piede{gap:.5rem 1.8rem}
}

@media (max-width:760px){
  .tavola-intera,.tavola-intera .telaio{height:auto}
  .tavola-intera .telaio{aspect-ratio:3/4}

  .modulo{grid-template-columns:1fr}
  .campo,.campo-pieno{grid-column:1 / -1}

  .look-riga > a{flex-direction:column;align-items:flex-start;gap:.45rem}

  .scorri{display:none}
  .t-apertura{font-size:clamp(3.4rem,13.8vw,11.6rem)}
  .apertura-frase{font-size:1.02rem;max-width:26ch}
  .didascalia{max-width:40ch}

  .piede-righe{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 2rem}
}

/* ---------- apertura su formati stretti: la fotografia diventa una tavola,
   il testo vive su fondo pieno. Nessuna sovrapposizione, leggibilita' garantita
   su qualunque fotografia. ---------- */
@media (max-width:860px){
  .apertura{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:var(--nero);
    min-height:100svh;
  }
  .apertura-sfondo{
    position:absolute;
    inset:0 0 auto 0;
    height:58svh;
  }
  .apertura-sfondo::after{
    background:linear-gradient(180deg,
      rgba(10,10,9,.46) 0%,
      rgba(10,10,9,.08) 26%,
      rgba(10,10,9,.06) 62%,
      rgba(10,10,9,.72) 90%,
      var(--nero) 100%);
  }
  .apertura-corpo{
    padding-top:calc(58svh - clamp(1.4rem,4svh,2.6rem));
    padding-bottom:clamp(2.4rem,5svh,3.6rem);
  }
  .apertura-interna{min-height:min(92svh,860px)}
  .apertura-interna .apertura-sfondo{height:52svh}
  .apertura-interna .apertura-corpo{padding-top:calc(52svh - clamp(1.4rem,4svh,2.6rem))}
}

@media (max-width:420px){
  .piede-righe{grid-template-columns:1fr}
}

/* schermi molto grandi: cresce il testo, non solo il vuoto */
@media (min-width:1800px){
  html{font-size:17.5px}
  :root{--max:1720px}
}
@media (min-width:2400px){
  html{font-size:19.5px}
  :root{--max:2040px}
}

/* telefono ruotato */
@media (max-height:560px) and (orientation:landscape){
  :root{--head-h:68px;--marchio:46px;--sezione:clamp(3.2rem,7vw,5rem);--s-indice:clamp(1.5rem,5.6vw,2.2rem);--indice-passo:.1rem}
  .apertura{min-height:auto;padding-block:calc(var(--head-h) + 1.4rem) 2.4rem}
  .apertura-interna{min-height:auto}
  .t-apertura{font-size:clamp(2.2rem,7.6vw,4rem)}
  .scorri{display:none}
  .apertura-sfondo img{object-position:center 42%}
  .anno{font-size:clamp(4.2rem,13vw,8rem)}
  .indice{padding-top:calc(var(--head-h) + .5rem);padding-bottom:.9rem}
  .indice-piede{margin-top:1.1rem;padding-top:.8rem}
  .passaggio-marchio{width:64px}
}

/* ============================ ACCESSIBILITÀ MOVIMENTO ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .rv,.js .rv-tavola .telaio,.js .rv-tavola .telaio img,.js .riga-masch > span{
    opacity:1 !important;transform:none !important;clip-path:none !important;
  }
  .scorri::after{display:none}
  .passaggio,.passaggio-marchio{transition:none !important}
  /* La regola generale azzera le durate, non i ritardi: senza questa riga
     l'indice si aprirebbe di scatto ma con un secondo di attesa davanti. */
  .indice,.indice *,.indice *::after{transition-delay:0s !important}
  .indice-superficie{clip-path:none !important}
  /* la partenza: stessa ragione. Senza queste righe la busta arriverebbe gia'
     chiusa (giusto) ma la conferma resterebbe invisibile per un secondo e
     mezzo di ritardo (sbagliato). */
  .esito{transition-delay:0s !important}
  .cartolina,.busta-aletta,.sigillo,.busta{animation-delay:0s !important}
  .indice[data-stato="aperto"] .indice-luce{opacity:1}
}

:focus-visible{outline:1px solid var(--champagne);outline-offset:4px}
.salta{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--nero);color:var(--luce);padding:1rem 1.4rem;
}
.salta:focus{left:0}

/* su desktop la fotografia della collezione vive nella lastra, non nella riga */
@media (hover:hover) and (pointer:fine){
  .look-foto{display:none}
}

/* ---------- sbordi orizzontali: la luce di contaminazione delle tavole non deve
   allargare la pagina. clip, non hidden: non crea un contenitore di scorrimento. ---------- */
main > section,.luogo-coda{overflow-x:clip}

/* ---------- apertura divisa sui formati stretti: la regola generale delle
   aperture strette non deve raddoppiare lo spazio sotto la fotografia ---------- */
@media (max-width:860px){
  .apertura-divisa{display:block;min-height:auto}
  .apertura-divisa .apertura-sfondo{position:relative;inset:auto;height:min(56svh,520px)}
  .apertura-divisa .apertura-corpo{padding-top:clamp(1.6rem,4svh,2.6rem);padding-bottom:clamp(2rem,5svh,3.2rem)}
}