/* =========================================================================
   BEBY PREEMINENCE — Opere di luce
   Direzione artistica: esposizione digitale. Ogni fotografia è una tavola,
   ogni tavola ha una didascalia spostata, come in un catalogo ragionato.
   Regole fisse: una sola curva, tre durate, nessun angolo arrotondato,
   nessuna card, nessun riquadro, champagne < 3% della superficie.
   ========================================================================= */

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

  --ink:var(--nero);
  --ink-70:rgba(10,10,9,.70);
  --ink-45:rgba(10,10,9,.45);
  --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;

  /* 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(54px,5.4vw,88px);
  --head-h:clamp(84px,8.6vw,132px);
}

*,*::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)}
.wrap-large{max-width:1880px}
.sezione{padding-block:var(--sezione);position:relative}
.sezione-alta{padding-block:calc(var(--sezione) * 1.42)}
.sezione-bassa{padding-block:calc(var(--sezione) * .6)}

.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-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:clamp(3.5rem,13.2vw,12.4rem);line-height:.82;letter-spacing:-.038em}
.t-uno{font-size:clamp(2.9rem,7.4vw,7.4rem);line-height:.88;letter-spacing:-.03em}
.t-due{font-size:clamp(2rem,3.9vw,4rem);line-height:.98;letter-spacing:-.024em}
.t-tre{font-size:clamp(1.5rem,2.3vw,2.3rem);line-height:1.08;letter-spacing:-.018em}

.micro{
  font-family:var(--sans);
  font-size:clamp(.63rem,.2vw + .58rem,.72rem);
  font-weight:400;
  line-height:1.5;
  letter-spacing:.185em;
  text-transform:uppercase;
}
.micro-largo{letter-spacing:.28em}
.tenue{color:rgba(10,10,9,.45);color:color-mix(in srgb,currentColor 48%,transparent)}
.champagne{color:var(--champagne)}

.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:clamp(1.25rem,2.1vw,2rem);
  line-height:1.34;
  letter-spacing:-.01em;
  max-width:24ch;
}

/* filetti */
.filo-h{height:1px;background:rgba(10,10,9,.16);background:color-mix(in srgb,currentColor 17%,transparent);border:0;margin:0}

/* ---------- 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}
.telaio-alto{aspect-ratio:2/3}

.didascalia{
  display:block;
  margin-top:clamp(.9rem,1.5vw,1.4rem);
  font-family:var(--sans);
  font-size:clamp(.63rem,.2vw + .58rem,.72rem);
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.6;
  color:rgba(10,10,9,.45);
  color:color-mix(in srgb,currentColor 48%,transparent);
  max-width:34ch;
}
.didascalia .seg{color:var(--champagne)}
/* didascalia spostata: vive lontano dalla sua fotografia */
.didascalia-lontana{margin-top:clamp(1.6rem,4vw,3.6rem)}

/* ---------- collegamenti editoriali (nessun bottone) ---------- */
.link{
  display:inline-flex;
  align-items:baseline;
  gap:.7em;
  position:relative;
  font-family:var(--sans);
  font-size:clamp(.68rem,.22vw + .62rem,.78rem);
  font-weight:400;
  letter-spacing:.185em;
  text-transform:uppercase;
  padding-bottom:.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{animation:filo-ritira 1.1s var(--ease)}
  .link:hover .frec{transform:translate(.34em,-.34em)}
}
@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)}

/* ============================ TESTATA ============================ */
.testata{
  position:fixed;
  inset:0 0 auto 0;
  z-index:70;
  display:flex;
  align-items:center;
  min-height:var(--head-h);
  color:var(--luce);
  transition:color var(--t-media) var(--ease);
  pointer-events:none;
}
.testata > .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1rem,3vw,3rem);
  width:100%;
  pointer-events:none;
}
.testata a,.testata button{pointer-events:auto}
.testata[data-inchiostro="scuro"]{color:var(--ink)}

.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,.66) 0%,rgba(10,10,9,.40) 38%,rgba(10,10,9,.14) 74%,rgba(10,10,9,0) 100%);
  opacity:1;
  transition:opacity var(--t-media) var(--ease);
}
.testata[data-inchiostro="scuro"] ~ .velo-testata,
body.velo-off .velo-testata{opacity:0}

/* marchio: mascherato, il file originale non viene mai alterato */
.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) * .78);height:calc(var(--marchio) * .78)}

.menu-riga{display:flex;align-items:center;gap:clamp(1.5rem,2.9vw,3.2rem)}
.menu-riga a{
  font-size:clamp(.72rem,.22vw + .66rem,.82rem);
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  position:relative;
  padding-block:.5em;
  white-space:nowrap;
}
.menu-riga a::after{
  content:"";position:absolute;left:0;right:0;bottom:.16em;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform var(--t-media) var(--ease);
}
@media (hover:hover){ .menu-riga a:hover::after{transform:scaleX(1);transform-origin:left center} }
.menu-riga a[aria-current="page"]::after{transform:scaleX(1);background:var(--champagne)}

.apri-indice{
  display:none;
  font-size:clamp(.72rem,.22vw + .66rem,.82rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  align-items:center;
  gap:.7em;
}
.apri-indice .barre{display:inline-block;width:22px;height:7px;position:relative}
.apri-indice .barre::before,.apri-indice .barre::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;
  transition:transform var(--t-corta) var(--ease);
}
.apri-indice .barre::before{top:0}
.apri-indice .barre::after{bottom:0}

/* ============================ INDICE A TUTTO SCHERMO ============================ */
.indice{
  position:fixed;
  inset:0;
  z-index:90;
  background:var(--nero);
  color:var(--luce);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:calc(var(--head-h) + 2rem) var(--gutter) clamp(2rem,6vw,4rem);
  opacity:0;
  visibility:hidden;
  transition:opacity .58s var(--ease),visibility 0s linear .58s;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.indice[data-aperto="true"]{opacity:1;visibility:visible;transition:opacity .58s var(--ease)}
.chiudi-indice{
  position:absolute;
  top:0;right:var(--gutter);
  height:var(--head-h);
  display:flex;align-items:center;
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
}
.indice-voci{display:flex;flex-direction:column;gap:clamp(.1rem,.6vw,.5rem)}
.indice-voci li{overflow:hidden}
.indice-voci a{
  display:block;
  font-family:var(--display);
  font-size:clamp(2.6rem,12vw,5.4rem);
  line-height:1.06;
  letter-spacing:-.03em;
  color:var(--luce-42);
  transform:translateY(102%);
  transition:color var(--t-media) var(--ease),transform .78s var(--ease);
}
.indice[data-aperto="true"] .indice-voci a{transform:none;transition-delay:calc(var(--i,0) * 60ms + 120ms)}
.indice-voci a:hover,.indice-voci a:focus-visible,.indice-voci a[aria-current="page"]{color:var(--luce)}
.indice-piede{
  margin-top:clamp(2.6rem,7vw,4.4rem);
  display:flex;
  flex-wrap:wrap;
  gap:.9rem 2.4rem;
  align-items:baseline;
  color:var(--luce-42);
}

/* ============================ APERTURA ============================ */
.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.03);
  will-change:transform;
}
.apertura-sfondo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,10,9,.30) 0%,rgba(10,10,9,.06) 30%,rgba(10,10,9,.52) 74%,rgba(10,10,9,.88) 100%),
    linear-gradient(90deg,rgba(10,10,9,.34) 0%,rgba(10,10,9,0) 52%);
}
.apertura-corpo{
  position:relative;
  z-index:2;
  padding-bottom:clamp(3rem,7svh,6rem);
  padding-top:calc(var(--head-h) + 2rem);
  width:100%;
}
.apertura-alto{
  position:absolute;
  top:calc(var(--head-h) + clamp(1rem,4svh,3.2rem));
  left:var(--gutter);
  right:var(--gutter);
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:2rem;
  color:rgba(242,239,232,.78);
}
.apertura-alto .tenue{color:rgba(242,239,232,.62)}
.apertura-titolo{margin-left:-.055em}
.apertura-sotto{
  margin-top:clamp(1.5rem,3.2vw,2.6rem);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:clamp(1rem,2.4vw,2.6rem);
  color:var(--luce-70);
}
.apertura-frase{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.02rem,1.5vw,1.5rem);
  line-height:1.4;
  letter-spacing:-.008em;
  color:var(--luce);
  max-width:30ch;
}

.scorri{
  position:absolute;
  right:var(--gutter);
  bottom:clamp(3rem,7svh,6rem);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  color:var(--luce-70);
}
.scorri .etichetta{
  writing-mode:vertical-rl;
  font-size:.63rem;
  letter-spacing:.32em;
  text-transform:uppercase;
}
.scorri .asta{position:relative;width:1px;height:clamp(48px,7vw,84px);background:var(--filo-luce);overflow:hidden}
.scorri .asta::after{
  content:"";position:absolute;left:0;right:0;top:0;height:42%;
  background:var(--champagne);
  animation:cala 2.9s var(--ease) infinite;
}
@keyframes cala{
  0%{transform:translateY(-110%)}
  55%{transform:translateY(240%)}
  100%{transform:translateY(240%)}
}

/* apertura delle pagine interne */
.apertura-interna{min-height:min(86svh,860px)}
.apertura-interna .t-apertura{font-size:clamp(2.9rem,9.6vw,8.6rem)}

/* ============================ MANIFESTO ============================ */
.manifesto-griglia{row-gap:clamp(3rem,7vw,7rem)}
.manifesto-voce{grid-column:1 / span 9}
.manifesto-testo{grid-column:8 / span 5;align-self:end}
.manifesto-tavola{grid-column:1 / span 5;margin-top:clamp(2rem,6vw,7rem)}
.manifesto-nota{grid-column:8 / span 4;align-self:end}

/* ============================ 1960 ============================ */
.eredita-griglia{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,6vw,7rem);
  align-items:start;
}
.eredita-fisso{position:sticky;top:calc(var(--head-h) + 4vh)}
.anno{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(6rem,17.5vw,17rem);
  line-height:.76;
  letter-spacing:-.05em;
  display:block;
  margin-left:-.04em;
}
.anno-nota{margin-top:clamp(1.4rem,3vw,2.6rem);max-width:26ch}
.eredita-scorre{display:flex;flex-direction:column;gap:clamp(4rem,11vw,12rem)}
.eredita-scorre > *:nth-child(even){margin-left:clamp(1.5rem,8vw,8rem)}
.eredita-scorre > *:nth-child(3n){margin-right:clamp(1rem,6vw,6rem)}

/* ============================ MATERIA / MACRO ============================ */
.materia{row-gap:clamp(2rem,5vw,5rem);align-items:end}
.materia .m-a{grid-column:1 / span 3}
.materia .m-b{grid-column:5 / span 4;margin-bottom:clamp(2rem,7vw,8rem)}
.materia .m-c{grid-column:10 / span 3;margin-bottom:clamp(4rem,12vw,14rem)}
.materia .m-d{grid-column:2 / span 5;margin-top:clamp(-6rem,-6vw,-2rem)}
.materia .m-testo{grid-column:8 / span 4;align-self:center}

/* ============================ 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(1rem,2.1vw,2.05rem);
}
.look-riga > a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:clamp(1rem,3vw,3rem);
  flex-wrap:wrap;
}
.look-nome{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem,6vw,5rem);
  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{
  display:flex;
  gap:clamp(.8rem,2vw,2.2rem);
  align-items:baseline;
  color:var(--luce-42);
  transition:color var(--t-media) var(--ease);
  flex-shrink:0;
}
@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);transform:translateX(clamp(.4rem,1.1vw,1.3rem))}
  .lookbook.in-uso .look-dati{display:none}
  .lookbook.in-uso .look-riga > a{max-width:60%}
}
.look-foto{margin-top:clamp(1rem,3vw,1.6rem)}

.look-lastra{
  position:fixed;
  z-index:6;
  top:50%;
  right:clamp(2rem,7vw,7rem);
  width:min(34vw,470px);
  aspect-ratio:16/10;
  transform:translateY(-50%);
  pointer-events:none;
  opacity:0;
  transition:opacity .58s var(--ease);
  overflow:hidden;
  background:var(--nero);
}
.look-lastra.visibile{opacity:1}
.look-didascalia{
  position:fixed;
  z-index:6;
  right:clamp(2rem,7vw,7rem);
  width:min(34vw,470px);
  pointer-events:none;
  opacity:0;
  transition:opacity .58s var(--ease);
  display:flex;
  gap:1.6rem;
  color:var(--luce-42);
}
.look-didascalia.visibile{opacity:1}
.look-lastra img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  transition:opacity .68s var(--ease),transform 1.9s var(--ease);
  transform:scale(1.05);
}
.look-lastra img.sopra{opacity:1;transform:scale(1)}

/* ============================ TAVOLE A PIENA PAGINA (collezioni) ============================ */
.spread{position:relative}
.spread-testa{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:clamp(1rem,3vw,3rem);
  flex-wrap:wrap;
  margin-top:clamp(1.1rem,2.2vw,2rem);
  padding-inline:var(--gutter);
  max-width:var(--max);
  margin-inline:auto;
}
.opera-nome{
  font-family:var(--display);
  font-weight:400;
  font-optical-sizing:auto;
  font-size:clamp(2.1rem,6.6vw,6rem);
  line-height:1;
  letter-spacing:-.032em;
  display:block;
}
.opera-nome-piccolo{font-size:clamp(1.7rem,3.4vw,3.2rem);margin-bottom:.42em}
.spread-testa .look-dati{display:flex;gap:clamp(.9rem,2vw,2.2rem);flex-wrap:wrap}

/* elenco dei 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 rgba(10,10,9,.16);
  border-bottom:1px solid rgba(10,10,9,.16);
  border-top-color:color-mix(in srgb,currentColor 17%,transparent);
  border-bottom-color:color-mix(in srgb,currentColor 17%,transparent);
}
.luoghi li{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.2rem,2.6vw,2.1rem);
  line-height:1.5;
  letter-spacing:-.012em;
}

/* ============================ IL PEZZO ============================ */
.pezzo-griglia{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
  gap:clamp(2rem,5vw,5.5rem);
  align-items:start;
}
.pezzo-telaio{overflow:hidden}
.pezzo-telaio img{transition:transform 2.4s var(--ease)}
@media (hover:hover){ .pezzo-griglia:hover .pezzo-telaio img{transform:scale(1.035)} }
.pezzo-scheda{padding-top:clamp(.5rem,2vw,2rem)}
.pezzo-scheda dl{margin:0;border-top:1px solid rgba(10,10,9,.16);border-top-color:color-mix(in srgb,currentColor 17%,transparent)}
.pezzo-scheda .voce-dato{
  display:flex;
  justify-content:space-between;
  gap:1.4rem;
  padding-block:clamp(.75rem,1.2vw,1.05rem);
  border-bottom:1px solid rgba(10,10,9,.16);
  border-bottom-color:color-mix(in srgb,currentColor 17%,transparent);
  font-variant-numeric:tabular-nums;
}
.pezzo-scheda dt{color:rgba(10,10,9,.45);color:color-mix(in srgb,currentColor 48%,transparent)}
.pezzo-scheda dd{margin:0;text-align:right;white-space:nowrap}
@media (max-width:1180px){ .pezzo-scheda dd{white-space:normal} }

/* ============================ PROGETTI ============================ */
.progetti-elenco{display:flex;flex-direction:column;gap:clamp(4.5rem,12vw,13rem)}
.progetto{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(.9rem,1.8vw,2rem);align-items:end}
.progetto .p-foto{grid-column:1 / span 8}
.progetto .p-testo{grid-column:10 / span 3;padding-bottom:clamp(.5rem,2vw,2.2rem)}
.progetto.rovescio .p-foto{grid-column:5 / span 8}
.progetto.rovescio .p-testo{grid-column:1 / span 3;grid-row:1}
.progetto.stretto .p-foto{grid-column:3 / span 5}
.progetto.stretto .p-testo{grid-column:9 / span 3}
.p-luogo{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.6rem,3vw,2.9rem);
  line-height:1.06;
  letter-spacing:-.02em;
  display:block;
  margin-bottom:.5em;
}

/* ============================ STRISCIA EDITORIALE ============================ */
.striscia{row-gap:clamp(1.6rem,4vw,4rem);align-items:start}
.striscia .s1{grid-column:1 / span 3;margin-top:clamp(3rem,9vw,10rem)}
.striscia .s2{grid-column:5 / span 6}
.striscia .s3{grid-column:12 / span 1}
.striscia .s4{grid-column:2 / span 4;margin-top:clamp(1rem,4vw,5rem)}
.striscia .s5{grid-column:7 / span 3;margin-top:clamp(4rem,11vw,13rem)}
.striscia .s6{grid-column:11 / span 2;margin-top:clamp(-4rem,-4vw,-1rem)}
.striscia .s-testo{grid-column:2 / span 4;align-self:center}

/* ============================ METODO — IL FILO ============================ */
.filo-fasi{position:relative;padding-left:clamp(1.6rem,4vw,4rem)}
.filo-fasi::before{
  content:"";position:absolute;left:0;top:.6em;bottom:.6em;width:1px;
  background:linear-gradient(180deg,var(--champagne),rgba(164,140,104,.12));
  transform:scaleY(var(--filo-avanzamento,0));
  transform-origin:top center;
  transition:transform 1.2s var(--ease);
}
.fase{padding-block:clamp(2.4rem,5vw,4.4rem);border-top:1px solid rgba(10,10,9,.16);border-top-color:color-mix(in srgb,currentColor 17%,transparent)}
.fase:first-child{border-top:0;padding-top:0}
.fase h3{margin-bottom:.7rem}

/* ============================ MODULO ============================ */
.modulo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,2.6vw,2.6rem)}
.campo{position:relative;display:flex;flex-direction:column;grid-column:span 1}
.campo-pieno{grid-column:1 / -1}
.campo label{
  font-size:.66rem;letter-spacing:.2em;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;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(.7rem,.22vw + .64rem,.8rem);
  letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:.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)}
@media (hover:hover){ .invia:hover::after{animation:filo-ritira 1.1s var(--ease)} }
.esito{margin-top:1.6rem;min-height:1.4rem;color:var(--champagne);opacity:0;transition:opacity var(--t-media) var(--ease)}
.esito.visibile{opacity:1}

/* ============================ CHIUSURA / PIEDE ============================ */
.chiusura{text-align:left}
.chiusura .t-uno{max-width:16ch}
.piede{background:var(--nero);color:var(--luce);padding-top:clamp(3rem,6vw,6rem);overflow:hidden}
.piede-righe{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(2rem,5vw,5rem) clamp(2rem,6vw,7rem);
  padding-bottom:clamp(3rem,7vw,7rem);
}
.piede-col{min-width:9rem}
.piede-col h4{margin-bottom:1.1rem;color:var(--luce-42)}
.piede-col li + li{margin-top:.62rem}
.piede-col a{font-size:.92rem;position:relative;padding-bottom:.15em}
.piede-col a::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){ .piede-col a:hover::after{transform:scaleX(1);transform-origin:left center} }

.marchio-grande{
  display:block;
  width:100%;
  line-height:.74;
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.028em;
  white-space:nowrap;
  color:var(--luce);
  font-size:11.2vw;
  padding-bottom:.06em;
}
.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);
}

/* ============================ CURSORE ============================ */
.cursore{
  position:fixed;top:0;left:0;z-index:100;
  width:8px;height:8px;
  margin:-4px 0 0 -4px;
  border-radius:50%;
  background:var(--avorio);
  mix-blend-mode:difference;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s var(--ease),width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease);
  display:none;
}
.cursore .parola{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);
  font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--nero);
  opacity:0;
  transition:opacity .3s var(--ease);
  white-space:nowrap;
}
.cursore.attivo{opacity:1}
.cursore.espanso{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--avorio);mix-blend-mode:normal}
.cursore.espanso .parola{opacity:1}
@media (hover:hover) and (pointer:fine){
  .cursore{display:block}
}

/* ============================ INGRESSI ============================ */
.js .rv-tavola .telaio{clip-path:inset(0 0 100% 0)}
.js .rv-tavola .telaio img{transform:scale(1.09)}
.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.35rem)}
.js .rv.dentro{
  opacity:1;transform:none;
  transition:opacity var(--t-media) var(--ease),transform 1.15s var(--ease);
  transition-delay:var(--ritardo,0ms);
}

/* righe tipografiche mascherate */
.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);
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1180px){
  .manifesto-voce{grid-column:1 / span 11}
  .manifesto-testo{grid-column:7 / span 6}
  .manifesto-tavola{grid-column:1 / span 5}
  .manifesto-nota{grid-column:7 / span 5}
  .materia .m-a{grid-column:1 / span 4}
  .materia .m-b{grid-column:6 / span 5}
  .materia .m-c{grid-column:1 / span 4}
  .materia .m-d{grid-column:6 / span 6;margin-top:0}
  .materia .m-testo{grid-column:1 / span 8}
  .striscia .s1{grid-column:1 / span 5}
  .striscia .s2{grid-column:7 / span 6}
  .striscia .s3{grid-column:1 / span 3}
  .striscia .s4{grid-column:5 / span 5}
  .striscia .s5{grid-column:1 / span 5;margin-top:clamp(1rem,4vw,4rem)}
  .striscia .s6{grid-column:7 / span 4;margin-top:0}
  .striscia .s-testo{grid-column:1 / span 7}
  .progetto .p-foto{grid-column:1 / span 9}
  .progetto .p-testo{grid-column:10 / span 3}
  .progetto.rovescio .p-foto{grid-column:4 / span 9}
  .progetto.rovescio .p-testo{grid-column:1 / span 3}
  .progetto.stretto .p-foto{grid-column:1 / span 6}
  .progetto.stretto .p-testo{grid-column:8 / span 4}
}

@media (max-width:960px){
  :root{--head-h:clamp(74px,15vw,104px)}
  .gc{grid-column:1 / -1}
  .look-didascalia{display:none}
  .menu-riga{display:none}
  .apri-indice{display:inline-flex}

  .eredita-griglia{grid-template-columns:1fr;gap:clamp(2.4rem,7vw,4rem)}
  .eredita-fisso{position:static}
  .eredita-scorre{gap:clamp(3rem,9vw,5rem)}
  .eredita-scorre > *:nth-child(even),
  .eredita-scorre > *:nth-child(3n){margin-inline:0}

  .pezzo-griglia{grid-template-columns:1fr;gap:clamp(1.8rem,5vw,3rem)}
  .look-lastra{display:none}

  .progetto,.progetto.rovescio,.progetto.stretto{grid-template-columns:1fr}
  .progetto .p-foto,.progetto.rovescio .p-foto,.progetto.stretto .p-foto{grid-column:1 / -1}
  .progetto .p-testo,.progetto.rovescio .p-testo,.progetto.stretto .p-testo{
    grid-column:1 / -1;grid-row:auto;padding-top:clamp(1.1rem,3vw,1.8rem);padding-bottom:0;
  }
  .progetti-elenco{gap:clamp(3.4rem,10vw,6rem)}
}

@media (max-width:760px){
  .manifesto-voce,.manifesto-testo,.manifesto-tavola,.manifesto-nota,
  .materia .m-a,.materia .m-b,.materia .m-c,.materia .m-d,.materia .m-testo,
  .striscia .s1,.striscia .s2,.striscia .s3,.striscia .s4,.striscia .s5,.striscia .s6,.striscia .s-testo{
    grid-column:1 / -1;
    margin-top:0;margin-bottom:0;
  }
  .manifesto-griglia,.materia,.striscia{row-gap:clamp(2.2rem,7vw,3.4rem)}
  .manifesto-tavola{margin-top:clamp(1rem,4vw,2rem)}
  /* su mobile le fotografie diventano più immersive */
  .striscia .s3,.striscia .s6{max-width:62%}
  .striscia .s1,.striscia .s5{max-width:78%;margin-left:auto}
  .materia .m-a,.materia .m-c{max-width:70%}
  .materia .m-b{max-width:86%;margin-left:auto}

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

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

  .apertura-alto{display:none}
  .scorri{display:none}
  .apertura-sotto{flex-direction:column;gap:1.1rem;align-items:flex-start}
  .t-apertura{font-size:clamp(3.6rem,14.5vw,12.4rem)}
  .apertura-frase{font-size:1.06rem;max-width:28ch}

  .piede-righe{gap:2.2rem 2.6rem}
  .piede-col{min-width:7.5rem}
}

/* ---------- 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,.50) 0%,
      rgba(10,10,9,.10) 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(94svh,880px)}
  .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-col{min-width:100%}
}

/* 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:66px;--marchio:44px;--sezione:clamp(3.2rem,7vw,5rem)}
  .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)}
  .apertura-alto,.scorri{display:none}
  .apertura-sfondo img{object-position:center 42%}
  .anno{font-size:clamp(4.2rem,13vw,8rem)}
  .indice{justify-content:flex-start;padding-top:calc(var(--head-h) + 1rem)}
  .indice-voci a{font-size:clamp(1.5rem,5.4vw,2.2rem)}
  .marchio-grande{font-size:13vw}
}

/* ============================ 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;
  }
  .cursore{display:none !important}
  .scorri .asta::after{display:none}
}

: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}
}